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:
@@ -143,10 +143,10 @@ function formatModifiedAt(dateStr: string): string {
|
||||
|
||||
const statusColor = (status: string): string => {
|
||||
switch (status) {
|
||||
case 'Online': return '#51d49a'
|
||||
case 'Degraded': return '#e5b05e'
|
||||
case 'Offline': return '#e16e75'
|
||||
default: return '#7e8799'
|
||||
case 'Online': return 'var(--st-work)'
|
||||
case 'Degraded': return 'var(--st-queue)'
|
||||
case 'Offline': return 'var(--st-block)'
|
||||
default: return 'var(--tx-3)'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -612,15 +612,15 @@ onUnmounted(() => {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
background: var(--panel);
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
font-size: 10.5px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.back-link:hover {
|
||||
border-color: #443d7c;
|
||||
color: #d8dbe3;
|
||||
border-color: var(--line-3);
|
||||
color: var(--tx);
|
||||
}
|
||||
|
||||
.status-message {
|
||||
@@ -629,11 +629,11 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 48px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
font-size: 12px;
|
||||
}
|
||||
.status-message.error {
|
||||
color: #e16e75;
|
||||
color: var(--st-block);
|
||||
}
|
||||
.status-message.compact {
|
||||
padding: 20px;
|
||||
@@ -660,15 +660,15 @@ onUnmounted(() => {
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(139,124,246,.1);
|
||||
color: #8b7cf6;
|
||||
color: var(--a-mid);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.agent-avatar.iris { background: rgba(139,124,246,.15); color: #8b7cf6; }
|
||||
.agent-avatar.programmer { background: rgba(77,140,246,.15); color: #4d8cf6; }
|
||||
.agent-avatar.architekt { background: rgba(77,168,246,.15); color: #4da8f6; }
|
||||
.agent-avatar.reviewer { background: rgba(246,168,77,.15); color: #f6a84d; }
|
||||
.agent-avatar.researcher { background: rgba(139,77,246,.15); color: #8b4df6; }
|
||||
.agent-avatar.executor { background: rgba(77,246,212,.15); color: #4df6d4; }
|
||||
.agent-avatar.iris { background: rgba(139,124,246,.15); color: var(--a-mid); }
|
||||
.agent-avatar.programmer { background: rgba(77,140,246,.15); color: var(--a-blue); }
|
||||
.agent-avatar.architekt { background: rgba(77,168,246,.15); color: var(--a-blue); }
|
||||
.agent-avatar.reviewer { background: rgba(246,168,77,.15); color: var(--st-queue); }
|
||||
.agent-avatar.researcher { background: rgba(139,77,246,.15); color: var(--a-purple); }
|
||||
.agent-avatar.executor { background: rgba(77,246,212,.15); color: var(--st-think); }
|
||||
|
||||
.agent-header-info {
|
||||
flex: 1;
|
||||
@@ -678,7 +678,7 @@ onUnmounted(() => {
|
||||
font-size: 8.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
color: var(--accent, #7b6ef2);
|
||||
color: var(--a-mid);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@@ -686,7 +686,7 @@ onUnmounted(() => {
|
||||
margin: 0 0 4px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
}
|
||||
.agent-status-row {
|
||||
display: flex;
|
||||
@@ -702,18 +702,18 @@ onUnmounted(() => {
|
||||
}
|
||||
.status-label {
|
||||
font-size: 11px;
|
||||
color: #7e8799;
|
||||
color: var(--tx-3);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.status-label.muted { color: #6b7385; }
|
||||
.status-label.muted { color: var(--tx-3); }
|
||||
.status-label.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
|
||||
.status-sep { color: #3d4152; font-size: 11px; }
|
||||
.status-sep { color: var(--line-2); font-size: 11px; }
|
||||
|
||||
.thinking-section {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
border-radius: var(--r);
|
||||
background: var(--panel);
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
@@ -731,11 +731,11 @@ onUnmounted(() => {
|
||||
font-size: 8.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
color: var(--accent, #7b6ef2);
|
||||
color: var(--a-mid);
|
||||
}
|
||||
.section-head h2 {
|
||||
margin: 2px 0 0;
|
||||
color: #e8eaf0;
|
||||
color: var(--tx);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
@@ -744,7 +744,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.section-note {
|
||||
margin: 6px 0 0;
|
||||
color: #6f788b;
|
||||
color: var(--tx-3);
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
max-width: 560px;
|
||||
@@ -753,10 +753,10 @@ onUnmounted(() => {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: #6b7385;
|
||||
background: var(--tx-3);
|
||||
}
|
||||
.live-dot.on {
|
||||
background: #51d49a;
|
||||
background: var(--st-work);
|
||||
}
|
||||
.icon-button {
|
||||
width: 30px;
|
||||
@@ -764,7 +764,7 @@ onUnmounted(() => {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
background: rgba(255,255,255,.03);
|
||||
color: #9ba3b5;
|
||||
color: var(--tx-2);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
@@ -790,13 +790,13 @@ onUnmounted(() => {
|
||||
.summary-card small {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
color: #6f788b;
|
||||
color: var(--tx-3);
|
||||
font-size: 9.5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.summary-row span {
|
||||
display: block;
|
||||
color: #6f788b;
|
||||
color: var(--tx-3);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
@@ -804,7 +804,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.summary-row p {
|
||||
margin: 0;
|
||||
color: #cbd0dc;
|
||||
color: var(--tx-2);
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -821,20 +821,20 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
color: #6f788b;
|
||||
color: var(--tx-3);
|
||||
font-size: 10px;
|
||||
}
|
||||
.type-pill {
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(123,110,242,.24);
|
||||
color: #aaa1ff;
|
||||
color: var(--a-mid);
|
||||
background: rgba(123,110,242,.08);
|
||||
font-size: 9px;
|
||||
}
|
||||
.thinking-item p {
|
||||
margin: 0;
|
||||
color: #cbd0dc;
|
||||
color: var(--tx-2);
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
Reference in New Issue
Block a user