diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css index f294a6a..7423d58 100644 --- a/wwwroot/css/chat.css +++ b/wwwroot/css/chat.css @@ -252,7 +252,7 @@ flex: 1; min-height: 0; height: 33px; - overflow: hidden; + overflow: auto; } .archive-container { diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css index d833557..369dbac 100644 --- a/wwwroot/css/dashboard.css +++ b/wwwroot/css/dashboard.css @@ -103,6 +103,31 @@ border-radius: var(--border-radius); } +.card-badges { + display: flex; + flex-wrap: wrap; + gap: var(--badge-spacing); + margin-top: var(--badge-spacing); +} + +.badge-forced-feature { + background: rgb(from var(--dangerous) r g b / .1); + border-color: rgb(from var(--dangerous) r g b / .25); + color: var(--dangerous); +} + +.badge-feature { + background: rgb(from var(--primary) r g b / .1); + border-color: rgb(from var(--primary) r g b / .25); + color: var(--primary); +} + +.badge-skill { + background: rgb(from var(--secondary) r g b / .1); + border-color: rgb(from var(--secondary) r g b / .25); + color: var(--secondary); +} + #newAgentCard, #newSessionCard { margin-top: var(--box-spacing); @@ -196,8 +221,7 @@ .git-badge { padding: var(--badge-padding); - font-family: var(--mono); - font-size: var(--mono-size); + font-size: var(--font-size); border-radius: var(--border-radius); } diff --git a/wwwroot/css/theme.css b/wwwroot/css/theme.css index 079b3fd..33f0bf6 100644 --- a/wwwroot/css/theme.css +++ b/wwwroot/css/theme.css @@ -1,9 +1,9 @@ :root { --text: #ddd; --text-accent: #fff; - --primary: #a41; + --primary: #c91; --secondary: #4a1; - --dangerous: #f66; + --dangerous: #c53; --warning: #fa0; --f1-bg: #111; --f1-border: #333; diff --git a/wwwroot/js/chat.js b/wwwroot/js/chat.js index 12ec9db..638bfff 100644 --- a/wwwroot/js/chat.js +++ b/wwwroot/js/chat.js @@ -1,25 +1,8 @@ // ── Helpers ── -function _prettyModelName(model) { - if (!model) return '?'; - // claude-sonnet-4-20250514 → Sonnet 4 - // claude-opus-4-6 → Opus 4.6 - // claude-haiku-3-5 → Haiku 3.5 - const m = model.match(/claude-(\w+)-(\d+)(?:-(\d+))?/); - if (m) { - const family = m[1].charAt(0).toUpperCase() + m[1].slice(1); - const major = m[2]; - const minor = m[3]; - // minor > 20000000 ist ein Datums-Suffix, kein Minor-Version - if (minor && minor.length <= 2) return family + ' ' + major + '.' + minor; - return family + ' ' + major; - } - return 'Unbekannt'; -} - function buildMetaBadges(d) { const badges = []; - badges.push(_prettyModelName(d.model)); + badges.push(prettyModelName(d.model)); badges.push('Tokens: ' + (d.inputTokens || 0) + ' / ' + (d.outputTokens || 0)); if (d.cacheCreationTokens > 0 || d.cacheReadTokens > 0) { badges.push('Cache: ' + (d.cacheReadTokens || 0) + ' / ' + (d.cacheCreationTokens || 0)); diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js index e78ea23..3ab7bc4 100644 --- a/wwwroot/js/pages/dashboard.js +++ b/wwwroot/js/pages/dashboard.js @@ -29,12 +29,16 @@ registerPage('dashboard', { : ''; const workspaceLabel = s.workspace ? s.workspace : ''; + const sessionBadges = []; + if (agent) sessionBadges.push(`${esc(agent.name)}`); + if (s.context) sessionBadges.push(``); + card.innerHTML = `
${s.image ? `` : ''}
${esc(s.name || 'Unbenannt')} - ${agent ? `${esc(agent.name)}` : ''} + ${sessionBadges.join('')}
- ${s.description ? `
${esc(s.description)}
` : ''}
${msgLabel ? ` ${esc(msgLabel)}` : ''} ${workspaceLabel ? ` ${esc(workspaceLabel)}` : ''} @@ -102,7 +105,7 @@ registerPage('dashboard', { const gitEl = document.createElement('span'); gitEl.className = 'card-meta-item card-git-status'; - gitEl.innerHTML = ` ${parts.join(' ')}`; + gitEl.innerHTML = parts.join(' '); metaEl.appendChild(gitEl); }); } @@ -119,15 +122,35 @@ registerPage('dashboard', { const agentGrid = document.getElementById('agentCards'); agentGrid.innerHTML = ''; + // Skills pro Agent parallel laden + const agentSkillsMap = {}; + await Promise.all(agents.map(async a => { + agentSkillsMap[a.agentId] = await apiGetAgentSkills(a.agentId); + })); + for (const a of agents) { const card = document.createElement('div'); card.className = 'card'; + + const badges = []; + if (a.toolChoice === 'any') badges.push(' Erzwungen'); + if (a.autoCommit) badges.push(' Auto-Commit'); + if (a.useSoul) badges.push(' Seele'); + if (a.useIdentity) badges.push(' Ich'); + if (a.useUserInfo) badges.push(' Du'); + if (a.useMemory) badges.push(' Erinnerungen'); + + const skills = agentSkillsMap[a.agentId] || []; + for (const skill of skills) { + badges.push(` ${esc(skill.name)}`); + } + card.innerHTML = `
${a.avatar ? `` : ''}
${esc(a.name)} - ${esc(a.model)} + ${prettyModelName(a.model)}
- ${a.description ? `
${esc(a.description)}
` : ''} - ${a.persona ? `
${esc(a.persona)}
` : ''} +
${badges.join('')}
`; const menuTrigger = card.querySelector('.card-menu-trigger'); diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js index 5181daf..d867932 100644 --- a/wwwroot/js/ui.js +++ b/wwwroot/js/ui.js @@ -4,6 +4,21 @@ const $ = (sel) => document.querySelector(sel); const chatEl = () => $('#chat'); const metaEl = () => $('#meta'); +function prettyModelName(model) { + if (!model) return '?'; + var m = model.match(/claude-(\w+)-(\d+)(?:-(\d+))?/); + if (m) { + var family = m[1].charAt(0).toUpperCase() + m[1].slice(1); + var major = m[2]; + var minor = m[3]; + if (minor && minor.length <= 2) return family + ' ' + major + '.' + minor; + return family + ' ' + major; + } + if (model == 'sonnet') return 'Sonnet' + if (model == 'opus') return 'Opus' + return 'Unbekannt (' + model + ')'; +} + // ── Markdown ── marked.setOptions({ breaks: true, gfm: true });