From a5caecbfdad7dfa47181285843de9eae066a8d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Tue, 21 Apr 2026 14:34:36 -0400 Subject: [PATCH] refactor(design): remove multi-hue color bars, unify to ink blue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The kanban board, performance metric cards, workspace list, and wait banner all leaked second and third chromatic hues into the UI: red bars on critical tasks, amber on in-review columns, green on done / running / selected workspace rows, colored icon tiles and colored headline values on metric cards. kami rule 2 allows one accent (ink blue) at no more than 5% of the surface; these surfaces were spending 30-60%. KanbanBoard.tsx - Drop the tone/dotColor fields from KANBAN_COLUMNS; column headers are plain eyebrows, no colored status dot. - Delete priorityColors map and border-l-[3px] on cards; cards are flat bordered rectangles. Priority order still drives the sort, but stops painting the chrome. - CRITICAL/HIGH small-caps label routes through text-primary (ink blue) instead of text-destructive / text-warning. - "Running" status dot + text switches from text-success / bg-success to text-primary / bg-primary. - Hover changes from hover:shadow-sm (banned by kami rule 8) to hover:bg-muted/40. MetricsGrid.tsx + Dashboard.tsx - Drop the tone prop and its toneMap / bgMap / borderMap trio. A MetricCard renders one way: ivory card, ink-blue-tinted icon tile (bg-accent), ink-blue glyph, near-black value. No left border color stripe, no hover shadow, no translate-y. - Dashboard.tsx stops passing tone on the four performance cards. Semantics that used to live in tone (pending approvals warn, all agents running success) are intentionally dropped; those affordances can come back through typography or a subtle indicator when kami allows, not through a second color. WorkspaceList.tsx / WorkspaceInspector.tsx - Replace every border-l / text / group-hover reference to var(--success) with var(--primary). Selected + hover states now carry kami's ink blue signal; the three "X count" spans that used text-success as a decorative pop become text-primary for the same reason. WaitStateIndicator.tsx - The wait banner (wait-for-reply / approval) flips from warning amber (border-warning, bg-warning-muted, text-warning, bg-warning button) to primary ink blue across border / bg / text / button. The banner still reads as an attention signal — the icon shape (Hourglass) carries the semantic, color no longer has to shout. feedback.tsx (Alert) and Toast.tsx retain their tone-based colors: they are accessibility-critical transient state surfaces where a single ink-blue lane would collapse success / warn / danger into an undifferentiated stack. They are out of scope for this pass. Typecheck and build:verify clean. Grep confirms no remaining border-l-[color:var(--success|warning|destructive|caution)] in dashboard or execution modules. --- .../communication/WaitStateIndicator.tsx | 8 ++--- .../components/dashboard/Dashboard.tsx | 3 -- .../components/dashboard/KanbanBoard.tsx | 34 +++++++------------ .../components/dashboard/MetricsGrid.tsx | 33 +++--------------- .../execution/WorkspaceInspector.tsx | 18 +++++----- .../components/execution/WorkspaceList.tsx | 4 +-- 6 files changed, 32 insertions(+), 68 deletions(-) diff --git a/src/renderer/components/communication/WaitStateIndicator.tsx b/src/renderer/components/communication/WaitStateIndicator.tsx index 5296e34f..6c6b4378 100644 --- a/src/renderer/components/communication/WaitStateIndicator.tsx +++ b/src/renderer/components/communication/WaitStateIndicator.tsx @@ -35,8 +35,8 @@ export default function WaitStateIndicator({ waitState, onReply, onNavigateAppro const duration = timeAgo(waitState.createdAt) return ( -
- +
+

{waitState.reason}

{t("wait.waitingSince")} {duration}

@@ -44,7 +44,7 @@ export default function WaitStateIndicator({ waitState, onReply, onNavigateAppro {isApproval && onNavigateApproval ? ( diff --git a/src/renderer/components/execution/WorkspaceInspector.tsx b/src/renderer/components/execution/WorkspaceInspector.tsx index 9f7a8b65..18d4b0b9 100644 --- a/src/renderer/components/execution/WorkspaceInspector.tsx +++ b/src/renderer/components/execution/WorkspaceInspector.tsx @@ -34,15 +34,15 @@ export function WorkspaceInspector({ workspace, agents, tasks, runs, documents:
{t("exec.assignedAgents")} - {wAgents.length} + {wAgents.length}
{wAgents.length === 0 ? (
{t("exec.noAgentsBound")}
) : (
{wAgents.map((a) => ( -
- +
+
{a.name}
{a.role}
@@ -56,15 +56,15 @@ export function WorkspaceInspector({ workspace, agents, tasks, runs, documents:
{t("exec.openTasks")} - {wTasks.length} + {wTasks.length}
{wTasks.length === 0 ? (
{t("exec.noTasksTarget")}
) : (
{wTasks.slice(0, 6).map((tk) => ( -
- +
+
@@ -80,15 +80,15 @@ export function WorkspaceInspector({ workspace, agents, tasks, runs, documents:
{t("exec.recentRuns")} - {wRuns.length} + {wRuns.length}
{wRuns.length === 0 ? (
{t("exec.noRunsExecuted")}
) : (
{wRuns.slice(0, 6).map((r) => ( -
- +
+
{r.summary || `Run ${r.id.slice(0, 8)}`}
{formatTime(r.startedAt)} → {formatTime(r.finishedAt)}
diff --git a/src/renderer/components/execution/WorkspaceList.tsx b/src/renderer/components/execution/WorkspaceList.tsx index 7877689d..05e157dd 100644 --- a/src/renderer/components/execution/WorkspaceList.tsx +++ b/src/renderer/components/execution/WorkspaceList.tsx @@ -27,8 +27,8 @@ export function WorkspaceList({ workspaces, projects, companyId, selectedWorkspa {(() => { const isSelected = selectedWorkspaceId === workspace.id; return ( -
- +
+
{workspace.name}