nntrivi2001
b673363351
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.
68 lines
3.2 KiB
TypeScript
68 lines
3.2 KiB
TypeScript
/**
|
|
* @file The lane pipeline map: a horizontal chain of stage nodes coloured by
|
|
* state. Layout is computed from the node list (flex + connectors), never from
|
|
* hardcoded coordinates, so a lane can use a longer or shorter template without
|
|
* touching this component. Every state but `current` shares one visual
|
|
* language — coloured border, coloured text, a translucent wash of the same
|
|
* colour — so status colour means the same thing everywhere in the app, not
|
|
* a different shade per component. `current` is the sole solid fill, in the
|
|
* app's own accent colour: the one state that gets to look bolder than the
|
|
* rest, because it answers "where am I right now". "passed without
|
|
* evidence" is its own colour: a stage the agent claimed but left no
|
|
* artifact for is not the same as a stage that is genuinely done. A
|
|
* `detected` node (the server's heuristic saw tool-event evidence but the
|
|
* agent never declared it) gets a FOURTH treatment — thin dashed warning,
|
|
* no fill — because it must never be mistaken for a real declaration.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import type { LaneNode } from "../../lib/types";
|
|
|
|
const STATE_CLASS: Record<LaneNode["state"], string> = {
|
|
done: "border-status-success/60 text-status-success bg-status-success/10",
|
|
current: "border-accent bg-accent text-white ring-2 ring-accent/30 shadow-sm",
|
|
"passed-no-evidence": "border-status-warning/60 text-status-warning bg-status-warning/10",
|
|
failed: "border-status-danger/60 text-status-danger bg-status-danger/10",
|
|
pending: "border-border-light text-fg-muted bg-transparent",
|
|
};
|
|
|
|
// Thin dashed border and no fill keep an inference visually lighter than
|
|
// every outlined state above — so it never reads as more certain than a claim.
|
|
const DETECTED_CLASS = "border-dashed border-status-warning/50 text-status-warning bg-transparent";
|
|
|
|
export default function PipelineMap({
|
|
nodes,
|
|
detectedSignal,
|
|
}: {
|
|
nodes: LaneNode[];
|
|
detectedSignal?: string | null;
|
|
}) {
|
|
if (!nodes.length) return <div className="text-xs text-fg-muted">no pipeline</div>;
|
|
return (
|
|
// The map spans the panel: every node takes an equal share and the
|
|
// connectors absorb the slack, so the pipeline reads as one track across
|
|
// the width rather than a short cluster hugging the left edge.
|
|
<div className="flex w-full items-center py-1">
|
|
{nodes.map((n, i) => (
|
|
<div key={n.id} className="flex min-w-0 flex-1 items-center">
|
|
<div
|
|
data-testid={`pipeline-node-${n.id}`}
|
|
data-state={n.state}
|
|
data-detected={n.detected ? "true" : undefined}
|
|
title={
|
|
n.detected && detectedSignal
|
|
? `${n.label} ← ${detectedSignal}`
|
|
: `${n.label} — ${n.state}`
|
|
}
|
|
className={`flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-full border px-2 py-1.5 text-[11px] ${n.detected ? DETECTED_CLASS : STATE_CLASS[n.state]}`}
|
|
>
|
|
<span className="shrink-0 text-[13px] leading-none">{n.icon}</span>
|
|
<span className="truncate">{n.label}</span>
|
|
</div>
|
|
{i < nodes.length - 1 && <div className="h-px w-2 shrink-0 bg-surface-3 sm:w-3" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|