From b76a7955aa945bdcd425a7c46faeb669eb7024cf Mon Sep 17 00:00:00 2001 From: scotttong Date: Mon, 6 Jul 2026 16:19:16 -0700 Subject: [PATCH] refactor(ui): decouple chat liveness blue from status token via --liveness-blue (A6) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit IssueChatThread's human-message bubble reused --status-task-in_progress (Batch 1; the shared #2563eb is a semantic coincidence, not a real dependency). Mint --liveness-blue: #2563eb in the extracted-tokens block and re-point the bubble class plus the lockstep negative assertion in IssueChatThread.test.tsx, so a future status-hue change no longer drags the chat bubble along. Same value today — zero rendered-output change. Co-Authored-By: Claude Fable 5 --- ui/src/components/IssueChatThread.test.tsx | 4 ++-- ui/src/components/IssueChatThread.tsx | 5 +++-- ui/src/index.css | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx index ebe5e2d8aa..93ff00880c 100644 --- a/ui/src/components/IssueChatThread.test.tsx +++ b/ui/src/components/IssueChatThread.test.tsx @@ -1756,8 +1756,8 @@ describe("IssueChatThread", () => { expect(bubble?.textContent).toContain("Here is my agent reply."); expect(bubble?.className).toContain("max-w-(--sz-calc-7)"); expect(bubble?.className).toContain("sm:max-w-(--pct-85)"); - // Neutral, not the human liveness-blue bubble. - expect(bubble?.className).not.toContain("bg-(--status-task-in_progress)"); + // Neutral, not the human liveness-blue bubble (--liveness-blue, DECISION-SHEET.md A6). + expect(bubble?.className).not.toContain("bg-(--liveness-blue)"); act(() => { root.unmount(); diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx index 52703e8007..68559884ec 100644 --- a/ui/src/components/IssueChatThread.tsx +++ b/ui/src/components/IssueChatThread.tsx @@ -1447,8 +1447,9 @@ function IssueChatUserMessage({ : deleted ? "bg-muted/50 text-muted-foreground" : isCurrentUser - // Liveness blue (--status-task-in_progress) for the human's own messages (PAP-95 rev 5). - ? "bg-(--status-task-in_progress) text-white" + // Liveness blue (--liveness-blue, decoupled from --status-task-in_progress + // in DECISION-SHEET.md A6) for the human's own messages (PAP-95 rev 5). + ? "bg-(--liveness-blue) text-white" : "bg-muted", pending && "opacity-80", )} diff --git a/ui/src/index.css b/ui/src/index.css index 0c488b300f..23a47d9ef6 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -1465,6 +1465,7 @@ span.paperclip-mention-chip[data-mention-kind="external-object"] { --hex-10b981: #10b981; /* ActivityCharts.tsx — status 'done'; also the >=0.8 success-rate bar tint. */ --project-none: #64748b; /* Semantic rename of --hex-64748b (DECISION-SHEET.md A3, value unchanged). 'No project assigned' muted-slate fallback (TOKEN-AUDIT.md 1.3) across Routines/MarkdownEditor/RoutineRunVariablesDialog/RoutineList/IssueColumns/editable-sections; also ActivityCharts.tsx status 'backlog'. */ --project-seed: #6366f1; /* Semantic rename of --hex-6366f1 (DECISION-SHEET.md A3, value unchanged). Project-color-fallback indigo seed default (ProjectDetail/PipelineSettings/IssueProperties/NewIssueDialog) — new-project-color-picker-seed family per TOKEN-AUDIT.md 1.3. */ + --liveness-blue: #2563eb; /* DECISION-SHEET.md A6: IssueChatThread.tsx human-message 'liveness blue' bubble (PAP-95 rev 5). Same value as --status-task-in_progress by coincidence, decoupled on purpose so a future status-hue change doesn't drag the chat bubble along. */ --gradient-extract-1: linear-gradient(180deg,rgba(255,80,80,0.12),rgba(255,255,255,0.02)); /* Dashboard.tsx budget-alert card gradient. */ --gradient-extract-2: linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); /* Costs.tsx subtle white card gradient. */ --gradient-extract-3: radial-gradient(circle at top left,rgba(244,114,182,0.08),transparent 35%),radial-gradient(circle at bottom right,rgba(56,189,248,0.1),transparent 32%); /* AccountingModelCard.tsx decorative overlay. */