feat(theme): dark/light mode with a Radix Colors-based palette

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 <html> 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.
This commit is contained in:
2026-07-31 10:54:31 +07:00
parent 4905d63b97
commit b673363351
82 changed files with 3776 additions and 2578 deletions
+58 -58
View File
@@ -577,7 +577,7 @@ export function SessionDetail() {
if (error || !session) {
return (
<div className="text-center py-20">
<p className="text-red-400 mb-2">{error || t("detail.notFound")}</p>
<p className="text-status-danger mb-2">{error || t("detail.notFound")}</p>
<button onClick={goBack} className="btn-ghost mt-4">
<ArrowLeft className="w-4 h-4" /> {t("detail.backToSessions")}
</button>
@@ -594,7 +594,7 @@ export function SessionDetail() {
</button>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h2 className="text-xl font-semibold text-gray-100">
<h2 className="text-xl font-semibold text-fg-primary">
{session.name || `${t("defaultName")}${session.id.slice(0, 8)}`}
</h2>
<SessionStatusBadge
@@ -603,34 +603,34 @@ export function SessionDetail() {
/>
</div>
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1">
<span className="inline-flex items-center gap-1 text-xs text-gray-500 font-mono bg-surface-2 px-2 py-1 rounded">
<span className="inline-flex items-center gap-1 text-xs text-fg-muted font-mono bg-surface-2 px-2 py-1 rounded">
<span title={session.id}>{session.id.slice(0, 16)}</span>
<CopyButton text={session.id} />
</span>
{session.model && (
<span className="inline-flex items-center gap-1.5 text-xs text-gray-400 bg-surface-2 px-2 py-1 rounded">
<Cpu className="w-3 h-3 text-gray-500" />
<span className="inline-flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-2 px-2 py-1 rounded">
<Cpu className="w-3 h-3 text-fg-muted" />
{formatModelName(session.model)}
</span>
)}
<span className="inline-flex items-center gap-1.5 text-xs text-gray-400 bg-surface-2 px-2 py-1 rounded">
<Clock className="w-3 h-3 text-gray-500" />
<span className="inline-flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-2 px-2 py-1 rounded">
<Clock className="w-3 h-3 text-fg-muted" />
{formatDateTime(session.started_at)}
{session.ended_at && (
<span className="text-gray-500 ml-1">
<span className="text-fg-muted ml-1">
({formatDuration(session.started_at, session.ended_at)})
</span>
)}
</span>
{cost && cost.total_cost > 0 && (
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded">
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-status-success bg-status-success/10 px-2 py-1 rounded">
<DollarSign className="w-3 h-3" />
{fmtCostFull(cost.total_cost).slice(1)}
</span>
)}
</div>
{session.cwd && (
<div className="flex items-center gap-1.5 text-xs text-gray-500 mt-2 min-w-0">
<div className="flex items-center gap-1.5 text-xs text-fg-muted mt-2 min-w-0">
<FolderOpen className="w-3 h-3 flex-shrink-0" />
<span className="font-mono truncate" title={session.cwd}>
{session.cwd}
@@ -660,35 +660,35 @@ export function SessionDetail() {
<div
className={`flex items-center gap-3 rounded-lg border px-4 py-2.5 ${
urgent
? "border-amber-500/40 bg-amber-500/[0.08]"
? "border-status-warning/40 bg-status-warning/[0.08]"
: "border-yellow-500/25 bg-yellow-500/[0.05]"
}`}
>
<span
className={`w-7 h-7 rounded-md inline-flex items-center justify-center flex-shrink-0 border ${
urgent
? "bg-amber-500/15 border-amber-500/30"
? "bg-status-warning/15 border-status-warning/30"
: "bg-yellow-500/10 border-yellow-500/25"
}`}
>
<ReasonIcon
className={`w-3.5 h-3.5 ${urgent ? "text-amber-300" : "text-yellow-300"}`}
className={`w-3.5 h-3.5 ${urgent ? "text-status-warning" : "text-yellow-300"}`}
/>
</span>
<div className="flex-1 min-w-0">
<div
className={`text-sm font-medium ${urgent ? "text-amber-200" : "text-yellow-200"}`}
className={`text-sm font-medium ${urgent ? "text-status-warning" : "text-yellow-200"}`}
>
{t("detail.waitingBanner.title")}
{cfg && (
<span className={urgent ? "text-amber-300/90" : "text-yellow-300/80"}>
<span className={urgent ? "text-status-warning/90" : "text-yellow-300/80"}>
{" · "}
{t(cfg.labelKey)}
</span>
)}
</div>
<div
className={`text-[11px] ${urgent ? "text-amber-400/70" : "text-yellow-400/60"}`}
className={`text-[11px] ${urgent ? "text-status-warning/70" : "text-yellow-400/60"}`}
>
{cfg ? t(cfg.descKey) : t("detail.waitingBanner.generic")}
</div>
@@ -696,12 +696,12 @@ export function SessionDetail() {
{session.awaiting_input_since && (
<span
className={`text-[11px] flex-shrink-0 flex items-center gap-1.5 ${
urgent ? "text-amber-300/80" : "text-yellow-400/70"
urgent ? "text-status-warning/80" : "text-yellow-400/70"
}`}
>
<span
className={`w-1.5 h-1.5 rounded-full animate-pulse-dot ${
urgent ? "bg-amber-400" : "bg-yellow-400"
urgent ? "bg-status-warning" : "bg-yellow-400"
}`}
aria-hidden="true"
/>
@@ -715,23 +715,23 @@ export function SessionDetail() {
{isDashboardRun && (
<Link
to={`/run?session=${encodeURIComponent(id || "")}`}
className="flex items-center gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/[0.06] hover:bg-emerald-500/[0.12] hover:border-emerald-500/50 px-4 py-2.5 transition-colors group"
className="flex items-center gap-3 rounded-lg border border-status-success/30 bg-status-success/[0.06] hover:bg-status-success/[0.12] hover:border-status-success/50 px-4 py-2.5 transition-colors group"
>
<span className="w-7 h-7 rounded-md bg-emerald-500/15 border border-emerald-500/30 inline-flex items-center justify-center flex-shrink-0">
<Play className="w-3.5 h-3.5 text-emerald-300" />
<span className="w-7 h-7 rounded-md bg-status-success/15 border border-status-success/30 inline-flex items-center justify-center flex-shrink-0">
<Play className="w-3.5 h-3.5 text-status-success" />
</span>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-emerald-200">
<div className="text-sm font-medium text-status-success">
{t("detail.dashboardRun.title", "This session is being driven from the Run page")}
</div>
<div className="text-[11px] text-emerald-400/70">
<div className="text-[11px] text-status-success/70">
{t(
"detail.dashboardRun.body",
"Send follow-ups, watch streaming output, or stop the run from there."
)}
</div>
</div>
<ExternalLink className="w-4 h-4 text-emerald-300/70 group-hover:text-emerald-200 flex-shrink-0" />
<ExternalLink className="w-4 h-4 text-status-success/70 group-hover:text-status-success flex-shrink-0" />
</Link>
)}
@@ -745,7 +745,7 @@ export function SessionDetail() {
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
activeTab === "agents"
? "border-violet-500 text-violet-400"
: "border-transparent text-gray-500 hover:text-gray-300"
: "border-transparent text-fg-muted hover:text-fg-secondary"
}`}
>
<Bot className="w-4 h-4" />
@@ -759,7 +759,7 @@ export function SessionDetail() {
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
activeTab === "conversation"
? "border-violet-500 text-violet-400"
: "border-transparent text-gray-500 hover:text-gray-300"
: "border-transparent text-fg-muted hover:text-fg-secondary"
}`}
>
<MessageSquare className="w-4 h-4" />
@@ -773,7 +773,7 @@ export function SessionDetail() {
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
activeTab === "timeline"
? "border-violet-500 text-violet-400"
: "border-transparent text-gray-500 hover:text-gray-300"
: "border-transparent text-fg-muted hover:text-fg-secondary"
}`}
>
<List className="w-4 h-4" />
@@ -783,12 +783,12 @@ export function SessionDetail() {
{/* Tab Content */}
{transcriptNotFound && (
<div className="flex items-center gap-2 px-4 py-2.5 mb-3 text-sm text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded-lg">
<div className="flex items-center gap-2 px-4 py-2.5 mb-3 text-sm text-status-warning bg-status-warning/10 border border-status-warning/20 rounded-lg">
<AlertCircle className="w-4 h-4 flex-shrink-0" />
<span>{t("detail.transcriptNotFound")}</span>
<button
onClick={() => setTranscriptNotFound(false)}
className="ml-auto text-amber-400/60 hover:text-amber-400 transition-colors"
className="ml-auto text-status-warning/60 hover:text-status-warning transition-colors"
>
<List className="w-3.5 h-3.5" />
</button>
@@ -801,23 +801,23 @@ export function SessionDetail() {
{workflows.length > 0 && (
<div className="mb-4">
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 flex items-center gap-1.5">
<h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-2 flex items-center gap-1.5">
<Workflow className="w-3.5 h-3.5 text-violet-400" />
{wfT("runs.sessionTitle")}
<span className="text-gray-600 font-mono">· {workflows.length}</span>
<span className="text-fg-muted font-mono">· {workflows.length}</span>
</h3>
<WorkflowRunsPanel runs={workflows} hideSessionLink />
</div>
)}
{agents.length === 0 ? (
<p className="text-sm text-gray-500">{t("detail.noAgents")}</p>
<p className="text-sm text-fg-muted">{t("detail.noAgents")}</p>
) : (
<>
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-1.5">
<h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-3 flex items-center gap-1.5">
<Bot className="w-3.5 h-3.5 text-violet-400" />
{t("detail.agents")}
<span className="text-gray-600 font-mono">· {agents.length}</span>
<span className="text-fg-muted font-mono">· {agents.length}</span>
</h3>
<div className="space-y-2" data-testid="agent-tree">
{(() => {
@@ -880,7 +880,7 @@ export function SessionDetail() {
{hasChildren && (
<button
onClick={toggleExpanded}
className="p-1 text-gray-500 hover:text-gray-300 transition-colors flex-shrink-0"
className="p-1 text-fg-muted hover:text-fg-secondary transition-colors flex-shrink-0"
aria-label={isExpanded ? "Collapse subagents" : "Expand subagents"}
aria-expanded={isExpanded}
>
@@ -966,7 +966,7 @@ export function SessionDetail() {
{/* Orphaned subagents */}
{orphans.length > 0 && (
<div className="mt-4">
<p className="text-[11px] text-gray-500 mb-2 uppercase tracking-wider">
<p className="text-[11px] text-fg-muted mb-2 uppercase tracking-wider">
{t("detail.unparented")}
</p>
<div className="space-y-1">
@@ -984,7 +984,7 @@ export function SessionDetail() {
{/* Cost Breakdown - shown under Agents tab */}
{cost && cost.breakdown.length > 0 && cost.total_cost > 0 && (
<div className="mt-8">
<h3 className="text-sm font-medium text-gray-300 mb-4 flex items-center gap-2">
<h3 className="text-sm font-medium text-fg-secondary mb-4 flex items-center gap-2">
<DollarSign className="w-4 h-4" />
{t("detail.costBreakdown")}
</h3>
@@ -992,22 +992,22 @@ export function SessionDetail() {
<table className="w-full min-w-[600px]">
<thead>
<tr className="border-b border-border text-left">
<th className="px-5 py-2.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wider">
<th className="px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
{t("common:cost.model")}
</th>
<th className="px-5 py-2.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wider text-right">
<th className="px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right">
{t("common:token.input")}
</th>
<th className="px-5 py-2.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wider text-right">
<th className="px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right">
{t("common:token.output")}
</th>
<th className="px-5 py-2.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wider text-right">
<th className="px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right">
{t("common:token.cacheRead")}
</th>
<th className="px-5 py-2.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wider text-right">
<th className="px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right">
{t("common:token.cacheWrite")}
</th>
<th className="px-5 py-2.5 text-[11px] font-semibold text-gray-500 uppercase tracking-wider text-right">
<th className="px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right">
{t("common:cost.cost")}
</th>
</tr>
@@ -1015,31 +1015,31 @@ export function SessionDetail() {
<tbody className="divide-y divide-border">
{cost.breakdown.map((row) => (
<tr key={row.model} className="hover:bg-surface-4 transition-colors">
<td className="px-5 py-2.5 text-sm font-mono text-gray-300">
<td className="px-5 py-2.5 text-sm font-mono text-fg-secondary">
{formatModelName(row.model)}
</td>
<td className="px-5 py-2.5 text-sm text-gray-400 text-right font-mono">
<td className="px-5 py-2.5 text-sm text-fg-secondary text-right font-mono">
{row.input_tokens.toLocaleString()}
</td>
<td className="px-5 py-2.5 text-sm text-gray-400 text-right font-mono">
<td className="px-5 py-2.5 text-sm text-fg-secondary text-right font-mono">
{row.output_tokens.toLocaleString()}
</td>
<td className="px-5 py-2.5 text-sm text-gray-400 text-right font-mono">
<td className="px-5 py-2.5 text-sm text-fg-secondary text-right font-mono">
{row.cache_read_tokens.toLocaleString()}
</td>
<td className="px-5 py-2.5 text-sm text-gray-400 text-right font-mono">
<td className="px-5 py-2.5 text-sm text-fg-secondary text-right font-mono">
{row.cache_write_tokens.toLocaleString()}
</td>
<td className="px-5 py-2.5 text-sm text-emerald-400 text-right font-mono font-medium">
<td className="px-5 py-2.5 text-sm text-status-success text-right font-mono font-medium">
{fmtCostFull(row.cost, 4)}
</td>
</tr>
))}
<tr className="bg-surface-2">
<td className="px-5 py-2.5 text-sm font-medium text-gray-200" colSpan={5}>
<td className="px-5 py-2.5 text-sm font-medium text-fg-secondary" colSpan={5}>
{t("common:total")}
</td>
<td className="px-5 py-2.5 text-sm text-emerald-400 text-right font-mono font-semibold">
<td className="px-5 py-2.5 text-sm text-status-success text-right font-mono font-semibold">
{fmtCostFull(cost.total_cost, 4)}
</td>
</tr>
@@ -1071,7 +1071,7 @@ export function SessionDetail() {
/>
</div>
{events.length === 0 ? (
<p className="text-sm text-gray-500">
<p className="text-sm text-fg-muted">
{isEmptyFilters(filters) ? t("detail.noEvents") : t("common:eventFilters.noResults")}
</p>
) : (
@@ -1092,12 +1092,12 @@ export function SessionDetail() {
className="w-full text-left px-5 py-3 flex items-center gap-4 hover:bg-surface-4 transition-colors min-w-0 cursor-pointer"
>
<span
className={`text-gray-500 text-[10px] w-3 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
className={`text-fg-muted text-[10px] w-3 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
aria-hidden="true"
>
▶
</span>
<div className="w-16 text-[11px] text-gray-600 font-mono flex-shrink-0">
<div className="w-16 text-[11px] text-fg-muted font-mono flex-shrink-0">
{timeAgo(event.created_at)}
</div>
<AgentStatusBadge status={statusFromEventType(event.event_type)} />
@@ -1115,10 +1115,10 @@ export function SessionDetail() {
agentOriginLabel(event.agent_id, agentInfoById)
);
return (
<span className="text-sm text-gray-300 flex-1 truncate">
<span className="text-sm text-fg-secondary flex-1 truncate">
{origin && (
<span
className="text-gray-500 mr-1"
className="text-fg-muted mr-1"
title={event.agent_id ?? undefined}
>
{origin} ·
@@ -1129,7 +1129,7 @@ export function SessionDetail() {
);
})()}
{event.tool_name && (
<span className="text-[11px] px-2 py-0.5 bg-surface-2 rounded text-gray-500 font-mono">
<span className="text-[11px] px-2 py-0.5 bg-surface-2 rounded text-fg-muted font-mono">
{event.tool_name}
</span>
)}
@@ -1149,7 +1149,7 @@ export function SessionDetail() {
)}
{events.length < eventsTotal && (
<div className="flex items-center justify-between mt-3 px-1">
<span className="text-xs text-gray-500">
<span className="text-xs text-fg-muted">
{t("common:eventFilters.showing", { shown: events.length, total: eventsTotal })}
</span>
<button