style: unify all views on Mission Control V2 design tokens
- Map legacy v1 CSS variables (--nx-*, --panel, --text-*, --surface*) to V2 tokens in nexus-tokens.css - Restyle global shell (main.css), AppSidebar, AppHeader to match V2 Sidebar/Topbar (glass, gradients, Space Grotesk) - Add GalaxyBackground to the v1 shell in App.vue - Replace hardcoded v1 hex colors with V2 tokens in all deviating views (Agents, Calendar, Docs, Incidents, Memory, Notifications, ProjectDetail, Security, Team, TaskDetail, Settings) - Keep JS status colors as hex where alpha suffixes are concatenated (AgentsIndex, Team, Notifications) - Add Settings nav item (System group) + gear icon to V2 sidebar so it shows on the dashboard - No component or layout structure changes; LoginView and TaskBoardView untouched Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -41,7 +41,7 @@ const fallbackAgents: AgentCard[] = [
|
||||
role: 'Chief of Staff',
|
||||
description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.',
|
||||
tags: ['Orchestration', 'Delegation', 'Approval'],
|
||||
color: '#8b7cf6',
|
||||
color: '#7c6cff',
|
||||
icon: 'bot',
|
||||
},
|
||||
{
|
||||
@@ -50,7 +50,7 @@ const fallbackAgents: AgentCard[] = [
|
||||
role: 'Lead Developer',
|
||||
description: 'Implementiert Features, schreibt Code, führt Builds und Tests aus. Arbeitet autonom im Scope.',
|
||||
tags: ['Coding', 'Development', 'Builds'],
|
||||
color: '#4d8cf6',
|
||||
color: '#4f7cff',
|
||||
icon: 'code',
|
||||
},
|
||||
{
|
||||
@@ -59,7 +59,7 @@ const fallbackAgents: AgentCard[] = [
|
||||
role: 'Infrastructure Engineer',
|
||||
description: 'Verantwortlich für Docker, Nginx, Deployment und VPS-Infrastruktur.',
|
||||
tags: ['Infrastructure', 'Deployment', 'Docker'],
|
||||
color: '#4da8f6',
|
||||
color: '#4f7cff',
|
||||
icon: 'server',
|
||||
},
|
||||
{
|
||||
@@ -68,7 +68,7 @@ const fallbackAgents: AgentCard[] = [
|
||||
role: 'Code QA',
|
||||
description: 'Prüft Code auf Bugs, Sicherheit und Wartbarkeit. Fixt Probleme eigenständig.',
|
||||
tags: ['QA', 'Security', 'Code Review'],
|
||||
color: '#f6a84d',
|
||||
color: '#fbbf24',
|
||||
icon: 'shield',
|
||||
},
|
||||
{
|
||||
@@ -77,7 +77,7 @@ const fallbackAgents: AgentCard[] = [
|
||||
role: 'Research Analyst',
|
||||
description: 'Recherchiert, analysiert Quellen, prüft Fakten. Nur Lese-Rechte, keine Aktionen.',
|
||||
tags: ['Research', 'Analysis', 'Fact-Checking'],
|
||||
color: '#8b4df6',
|
||||
color: '#b557f6',
|
||||
icon: 'search',
|
||||
},
|
||||
{
|
||||
@@ -86,7 +86,7 @@ const fallbackAgents: AgentCard[] = [
|
||||
role: 'Host Executor',
|
||||
description: 'Führt Host-Kommandos auf dem VPS aus. Nur auf Iris-Befehl, niemals eigeninitiativ.',
|
||||
tags: ['Execution', 'Docker', 'VPS'],
|
||||
color: '#4df6d4',
|
||||
color: '#34d6f5',
|
||||
icon: 'terminal',
|
||||
},
|
||||
]
|
||||
@@ -161,7 +161,7 @@ function enrichAgent(item: any): AgentCard {
|
||||
role: item.role || fallback?.role || 'Agent',
|
||||
description: item.description || fallback?.description || 'OpenClaw agent',
|
||||
tags: item.tags?.length ? item.tags : fallback?.tags ?? [],
|
||||
color: fallback?.color ?? '#7e8799',
|
||||
color: fallback?.color ?? '#6f6aa0',
|
||||
icon: fallback?.icon ?? 'bot',
|
||||
model: item.model,
|
||||
statusLabel: item.statusLabel,
|
||||
@@ -327,19 +327,19 @@ onMounted(loadMissionControl)
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
background: rgba(139, 124, 246, 0.1);
|
||||
color: #8b7cf6;
|
||||
color: var(--a-mid);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.header-text h1 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
}
|
||||
.header-subtitle {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
.gateway-chip {
|
||||
margin-left: auto;
|
||||
@@ -349,24 +349,24 @@ onMounted(loadMissionControl)
|
||||
padding: 6px 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
color: #9ba3b5;
|
||||
color: var(--tx-2);
|
||||
font-size: 10px;
|
||||
}
|
||||
.gateway-chip.ok {
|
||||
color: #51d49a;
|
||||
color: var(--st-work);
|
||||
border-color: rgba(81, 212, 154, .25);
|
||||
}
|
||||
.gateway-chip.warn {
|
||||
color: #e5b05e;
|
||||
color: var(--st-queue);
|
||||
border-color: rgba(229, 176, 94, .28);
|
||||
}
|
||||
.gateway-chip.error {
|
||||
color: #f29b9b;
|
||||
color: var(--st-block);
|
||||
border-color: rgba(242, 155, 155, .3);
|
||||
}
|
||||
.load-error {
|
||||
margin-bottom: 14px;
|
||||
color: #e5b05e;
|
||||
color: var(--st-queue);
|
||||
font-size: 11px;
|
||||
}
|
||||
.gateway-warning,
|
||||
@@ -376,19 +376,19 @@ onMounted(loadMissionControl)
|
||||
border-radius: 11px;
|
||||
border: 1px solid rgba(229, 176, 94, .24);
|
||||
background: rgba(229, 176, 94, .08);
|
||||
color: #f1d7aa;
|
||||
color: var(--st-queue);
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.empty-state {
|
||||
border-color: var(--line);
|
||||
background: rgba(255,255,255,.03);
|
||||
color: #aab2c3;
|
||||
color: var(--tx-2);
|
||||
}
|
||||
.empty-state h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 14px;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
}
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
@@ -451,7 +451,7 @@ onMounted(loadMissionControl)
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
border-radius: var(--r);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -464,19 +464,19 @@ onMounted(loadMissionControl)
|
||||
margin: 0 0 1px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
}
|
||||
|
||||
.card-role {
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 10.5px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 10px;
|
||||
flex: 1;
|
||||
@@ -486,7 +486,7 @@ onMounted(loadMissionControl)
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
color: #8a92a5;
|
||||
color: var(--tx-2);
|
||||
font-size: 9.5px;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -494,19 +494,19 @@ onMounted(loadMissionControl)
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: #6b7385;
|
||||
background: var(--tx-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.runtime-dot.on {
|
||||
background: #51d49a;
|
||||
background: var(--st-work);
|
||||
}
|
||||
.runtime-dot.connected { background: #51d49a; }
|
||||
.runtime-dot.thinking { background: #79aaff; }
|
||||
.runtime-dot.blocked { background: #f87171; }
|
||||
.runtime-dot.stale { background: #f59e0b; }
|
||||
.runtime-dot.error { background: #f29b9b; }
|
||||
.runtime-dot.unsupported { background: #e5b05e; }
|
||||
.runtime-dot.ready { background: #6b7385; }
|
||||
.runtime-dot.connected { background: var(--st-work); }
|
||||
.runtime-dot.thinking { background: var(--a-blue); }
|
||||
.runtime-dot.blocked { background: var(--st-block); }
|
||||
.runtime-dot.stale { background: var(--st-queue); }
|
||||
.runtime-dot.error { background: var(--st-block); }
|
||||
.runtime-dot.unsupported { background: var(--st-queue); }
|
||||
.runtime-dot.ready { background: var(--tx-3); }
|
||||
.runtime-model {
|
||||
margin-left: auto;
|
||||
max-width: 46%;
|
||||
@@ -514,12 +514,12 @@ onMounted(loadMissionControl)
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
color: #6f788b;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
.runtime-detail {
|
||||
margin: 0 0 10px;
|
||||
min-height: 28px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -561,7 +561,7 @@ onMounted(loadMissionControl)
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: #6b7385;
|
||||
color: var(--tx-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
transition: color 0.15s;
|
||||
|
||||
Reference in New Issue
Block a user