From b6733633511dbe3079a26eaea49b0d0de2434398 Mon Sep 17 00:00:00 2001 From: nntrivi2001 Date: Fri, 31 Jul 2026 10:54:31 +0700 Subject: [PATCH] feat(theme): dark/light mode with a Radix Colors-based palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a working Dark/Light toggle (next to the language switcher, same row as EN/VI) and re-themes the whole dashboard, not just the handful of components that already used semantic tokens. - Tailwind darkMode:"class" + CSS-variable color tokens (client/src/index.css, tailwind.config.js): surface.0-5, border/border-light, accent/accent-hover, fg.primary/secondary/muted, status.success/danger/warning. One class flip on re-themes everything — no per-element dark: variant pairs. - useTheme() hook: localStorage-persisted, defaults to dark, no prefers-color-scheme fallback (client/src/hooks/useTheme.ts). - Mechanical, table-driven migration (scripts/migrate-color-tokens.mjs, scripts/tokenize-status-colors.mjs, scripts/darken-status-colors.mjs) of every raw neutral/gray/slate + emerald/red/amber Tailwind utility across client/src onto the new tokens, so every badge/button/component pulls the same shade per status/role instead of each picking its own. - Palette values are the literal Radix Colors (radix-ui.com/colors) scale constants — slate/blue/green/red/amber steps 1-12 — adopted after three rounds of hand-picked values that kept overshooting (flat, then too dark, then glaring); see docs/superpowers/specs/2026-07-31-color-redesign- dark-light-mode-design.md for the full history and role mapping. - PipelineMap: done/current/failed/passed-no-evidence/detected share one visual language (border + text + translucent wash of the same status color); `current` alone stays a solid accent fill, the one state that gets to look bolder ("you are here"). - LaneCard: removed the stage/kind/auto-stage chips that duplicated the Workspace lane-detail header already showing them. Categorical/decorative hues (violet, indigo, cyan, teal, sky, rose, pink, orange, yellow, and blue where it plays a role-coloring part e.g. message bubbles) are deliberately out of scope — collapsing those onto shared tokens would erase the distinction between different kinds of thing, not a status. --- ARCHITECTURE.md | 2 +- client/README.md | 9 +- client/src/components/AgentCard.tsx | 10 +- client/src/components/AlertsNotifications.tsx | 66 +- client/src/components/Checkbox.tsx | 4 +- client/src/components/ConfirmModal.tsx | 12 +- client/src/components/DateTimePicker.tsx | 20 +- client/src/components/EmptyState.tsx | 6 +- client/src/components/EventDetail.tsx | 26 +- client/src/components/EventFilters.tsx | 16 +- client/src/components/EventFiltersInfo.tsx | 26 +- client/src/components/FieldHelp.tsx | 10 +- client/src/components/ImportHistory.tsx | 122 +- client/src/components/RemoteSources.tsx | 83 +- client/src/components/Select.tsx | 8 +- client/src/components/SessionCard.tsx | 10 +- client/src/components/SessionOverview.tsx | 87 +- client/src/components/Sidebar.tsx | 210 ++- client/src/components/StatCard.tsx | 6 +- client/src/components/StatusBadge.tsx | 2 +- client/src/components/Tabby/TabbyPanel.tsx | 36 +- client/src/components/Tip.tsx | 2 +- client/src/components/UpdateNotifier.tsx | 20 +- client/src/components/WebhookSettings.tsx | 78 +- .../components/__tests__/AgentCard.test.tsx | 2 +- .../components/__tests__/StatCard.test.tsx | 4 +- .../components/__tests__/StatusBadge.test.tsx | 4 +- .../src/components/conversation/CodeBlock.tsx | 22 +- .../conversation/ConversationView.tsx | 28 +- .../conversation/MarkdownContent.tsx | 44 +- .../components/conversation/MessageList.tsx | 84 +- .../components/conversation/ToolCallBlock.tsx | 36 +- .../src/components/event-views/primitives.tsx | 70 +- .../src/components/event-views/tool-views.tsx | 4 +- client/src/components/lanes/AddLaneModal.tsx | 18 +- .../components/lanes/DestructiveLaneModal.tsx | 26 +- client/src/components/lanes/LaneCard.tsx | 218 ++- client/src/components/lanes/LaneStripCard.tsx | 28 +- client/src/components/lanes/PipelineMap.tsx | 37 +- .../lanes/__tests__/LaneCard.test.tsx | 75 +- .../lanes/__tests__/PipelineMap.test.tsx | 11 +- client/src/components/run/RunConsole.tsx | 102 +- client/src/components/run/RunHistory.tsx | 54 +- client/src/components/run/RunSetup.tsx | 67 +- .../workflows/AgentCollaborationNetwork.tsx | 10 +- .../components/workflows/CompactionImpact.tsx | 20 +- .../workflows/ConcurrencyTimeline.tsx | 16 +- .../workflows/ErrorPropagationMap.tsx | 39 +- .../workflows/ModelDelegationFlow.tsx | 2 +- .../components/workflows/OrchestrationDAG.tsx | 18 +- .../workflows/SessionComplexityScatter.tsx | 14 +- .../components/workflows/SessionDrillIn.tsx | 92 +- .../workflows/SubagentEffectiveness.tsx | 18 +- .../workflows/ToolExecutionFlow.tsx | 4 +- .../components/workflows/WorkflowPatterns.tsx | 36 +- .../workflows/WorkflowRunsPanel.tsx | 94 +- .../components/workflows/WorkflowStats.tsx | 26 +- client/src/hooks/__tests__/useTheme.test.ts | 49 + client/src/hooks/useTheme.ts | 60 + client/src/i18n/locales/en/lanes.json | 9 +- client/src/i18n/locales/en/nav.json | 6 + client/src/i18n/locales/vi/lanes.json | 7 +- client/src/i18n/locales/vi/nav.json | 6 + client/src/index.css | 89 +- client/src/pages/ActivityFeed.tsx | 42 +- client/src/pages/Analytics.tsx | 204 +-- client/src/pages/CcConfig.tsx | 488 +++---- client/src/pages/Dashboard.tsx | 220 +-- client/src/pages/KanbanBoard.tsx | 24 +- client/src/pages/NotFound.tsx | 6 +- client/src/pages/SessionDetail.tsx | 116 +- client/src/pages/Sessions.tsx | 66 +- client/src/pages/Settings.tsx | 324 ++--- client/src/pages/Workflows.tsx | 56 +- client/src/pages/Workspace.tsx | 246 ++-- .../screens.snapshot.test.tsx.snap | 1208 ++++++++--------- client/tailwind.config.js | 39 +- ...26-07-31-color-redesign-dark-light-mode.md | 489 +++++++ ...1-color-redesign-dark-light-mode-design.md | 149 ++ scripts/darken-status-colors.mjs | 78 ++ scripts/migrate-color-tokens.mjs | 111 ++ scripts/tokenize-status-colors.mjs | 68 + 82 files changed, 3776 insertions(+), 2578 deletions(-) create mode 100644 client/src/hooks/__tests__/useTheme.test.ts create mode 100644 client/src/hooks/useTheme.ts create mode 100644 docs/superpowers/plans/2026-07-31-color-redesign-dark-light-mode.md create mode 100644 docs/superpowers/specs/2026-07-31-color-redesign-dark-light-mode-design.md create mode 100644 scripts/darken-status-colors.mjs create mode 100644 scripts/migrate-color-tokens.mjs create mode 100644 scripts/tokenize-status-colors.mjs diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 205cf79..6f9f0ae 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -2896,7 +2896,7 @@ Claude Code invokes this command on each update, piping a JSON payload to stdin. | **ws** | Fastest, most lightweight WebSocket library for Node. No Socket.IO overhead needed since we only push JSON messages | | **React 18** | Stable, widely known, strong TypeScript support. No need for Server Components or RSC given this is a client-rendered SPA | | **Vite** | Fast builds, native ESM, excellent dev experience. Proxy config handles the dev server split cleanly | -| **Tailwind CSS** | Utility-first approach keeps styles colocated with markup. No CSS module boilerplate. Custom theme config for the dark UI | +| **Tailwind CSS** | Utility-first approach keeps styles colocated with markup. No CSS module boilerplate. Colors are CSS-variable-backed tokens (`darkMode: "class"`) so the Dark/Light toggle re-themes the app with one class flip rather than per-component `dark:` variants | | **React Router 6** | Standard routing for React SPAs. Layout routes with `` give clean shell composition | | **Lucide React** | Tree-shakeable icon library. Only imports what's used (~20 icons) | | **TypeScript Strict** | Catches null/undefined bugs at compile time. `noUncheckedIndexedAccess` prevents array bounds issues | diff --git a/client/README.md b/client/README.md index 6747623..1734df0 100644 --- a/client/README.md +++ b/client/README.md @@ -54,7 +54,7 @@ The client is a single-page application (SPA) built with modern web technologies - **React 18.3** - Component-based UI with hooks and concurrent features - **TypeScript 5.7** - Full type safety across components, utilities, and API contracts - **Vite 6.1** - Lightning-fast HMR during development, optimized production builds -- **Tailwind CSS 3.4** - Utility-first CSS framework for rapid UI development +- **Tailwind CSS 3.4** - Utility-first CSS framework; colors are CSS-variable-backed tokens (`darkMode: "class"`) so a Dark/Light toggle (next to the language switcher in the sidebar, `useTheme` hook) re-themes the whole app by flipping one class - **React Router 6.28** - Client-side routing with nested layouts - **WebSocket** - Real-time event streaming from server - **Lucide Icons** - Modern, consistent icon set @@ -203,17 +203,18 @@ client/ │ │ │ ├── hooks/ │ │ ├── useWebSocket.ts # Auto-reconnecting WebSocket hook -│ │ └── useNotifications.ts # Browser push notification triggers +│ │ ├── useNotifications.ts # Browser push notification triggers +│ │ └── useTheme.ts # Dark/light mode: toggles the `dark` class, persists to localStorage │ │ │ ├── i18n/ # Internationalization (en / zh / vi / ko) │ ├── App.tsx # Root component + router setup │ ├── main.tsx # Entry point -│ └── index.css # Tailwind + custom utilities +│ └── index.css # Tailwind + CSS-variable color tokens (dark/light) │ ├── public/ # Static assets (sw.js service worker) ├── index.html # HTML template ├── vite.config.ts # Vite + proxy config -├── tailwind.config.js # Custom dark theme +├── tailwind.config.js # Dark/light color tokens (`darkMode: "class"`, CSS-variable-backed) ├── tsconfig.json # Strict TypeScript config └── package.json ``` diff --git a/client/src/components/AgentCard.tsx b/client/src/components/AgentCard.tsx index 19f9378..4c176ef 100644 --- a/client/src/components/AgentCard.tsx +++ b/client/src/components/AgentCard.tsx @@ -194,14 +194,14 @@ export function AgentCard({ agent, session, label, onClick }: AgentCardProps) { {isMain ? : }
-

+

{/* Auto-generated main-agent titles (e.g. "Main Agent - Session 229d93fd" or "Main Agent - work - e3f8e613") swap the placeholder for the real session name when one exists; custom (sub)agent names are left untouched. */} {isMain ? mainAgentDisplayName(agent.name, realSessionName) : agent.name}

- {subtitle &&

{subtitle}

} + {subtitle &&

{subtitle}

}
{/* compact: cards are narrow — inline reason chip would squeeze the @@ -210,10 +210,10 @@ export function AgentCard({ agent, session, label, onClick }: AgentCardProps) { {agent.task && ( -

{agent.task}

+

{agent.task}

)} -
+
{agent.current_tool && ( @@ -243,7 +243,7 @@ export function AgentCard({ agent, session, label, onClick }: AgentCardProps) { {t("ran")} {formatDuration(agent.started_at, agent.ended_at)} - {timeAgo(agent.ended_at)} + {timeAgo(agent.ended_at)} ) : ( diff --git a/client/src/components/AlertsNotifications.tsx b/client/src/components/AlertsNotifications.tsx index f5b04a5..719b474 100644 --- a/client/src/components/AlertsNotifications.tsx +++ b/client/src/components/AlertsNotifications.tsx @@ -403,8 +403,8 @@ export function AlertsNotifications() { onClick={() => setTab(tb.key)} className={`inline-flex items-center gap-2 text-xs font-medium px-3.5 py-2 rounded-lg transition-colors ${ active - ? "bg-surface-4 text-gray-100 shadow-sm" - : "text-gray-500 hover:text-gray-300 hover:bg-surface-3" + ? "bg-surface-4 text-fg-primary shadow-sm" + : "text-fg-muted hover:text-fg-secondary hover:bg-surface-3" }`} > @@ -413,10 +413,10 @@ export function AlertsNotifications() { {tb.badge} @@ -432,8 +432,8 @@ export function AlertsNotifications() {
-

{t("rules.title")}

-

{ts("alertsHub.rulesHint")}

+

{t("rules.title")}

+

{ts("alertsHub.rulesHint")}

- {formError &&

{formError}

} + {formError &&

{formError}

}
)} @@ -680,7 +680,7 @@ export function AlertsNotifications() {
{rule.name} @@ -688,7 +688,7 @@ export function AlertsNotifications() { {t(`ruleTypes.${rule.rule_type}`)}
-

+

{describeRule(rule, t)} ·{" "} {t("rules.cooldown", { seconds: rule.cooldown_seconds })}

@@ -698,8 +698,8 @@ export function AlertsNotifications() { onClick={() => onToggleRule(rule)} className={`text-xs px-2.5 py-1.5 rounded-md border transition-colors ${ rule.enabled - ? "border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" - : "border-border text-gray-500 hover:text-gray-300 hover:bg-surface-3" + ? "border-status-success/30 text-status-success hover:bg-status-success/10" + : "border-border text-fg-muted hover:text-fg-secondary hover:bg-surface-3" }`} title={rule.enabled ? t("rules.disable") : t("rules.enable")} > @@ -707,7 +707,7 @@ export function AlertsNotifications() { @@ -222,11 +222,11 @@ export function DateTimePicker({ onClick={() => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)) } - className="p-1 hover:bg-surface-2 rounded text-gray-400 hover:text-white" + className="p-1 hover:bg-surface-2 rounded text-fg-secondary hover:text-white" > - + {viewDate.toLocaleString(undefined, { month: "long", year: "numeric" })} @@ -244,7 +244,7 @@ export function DateTimePicker({
{["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ( -
+
{day}
))} @@ -254,7 +254,7 @@ export function DateTimePicker({ {/* Time Picker */}
-
+
Time
@@ -262,7 +262,7 @@ export function DateTimePicker({ type="time" value={timeValue} onChange={handleTimeChange} - className="bg-surface-2 border border-border rounded px-2 py-1 text-xs text-gray-200 focus:outline-none focus:border-accent w-[85px] time-input-custom" + className="bg-surface-2 border border-border rounded px-2 py-1 text-xs text-fg-secondary focus:outline-none focus:border-accent w-[85px] time-input-custom" />
diff --git a/client/src/components/EmptyState.tsx b/client/src/components/EmptyState.tsx index 5b5aac6..063c3c2 100644 --- a/client/src/components/EmptyState.tsx +++ b/client/src/components/EmptyState.tsx @@ -91,10 +91,10 @@ export function EmptyState({ icon: Icon, title, description, action }: EmptyStat return (
- +
-

{title}

-

{description}

+

{title}

+

{description}

{action}
); diff --git a/client/src/components/EventDetail.tsx b/client/src/components/EventDetail.tsx index 4239ad5..a2ec15a 100644 --- a/client/src/components/EventDetail.tsx +++ b/client/src/components/EventDetail.tsx @@ -284,7 +284,7 @@ function SummaryBlock({ return (
- + {t("eventDetail.summary")}
@@ -293,19 +293,19 @@ function SummaryBlock({ - + {summary.headline}
{summary.bullets.length > 0 && ( -