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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user