nntrivi2001
9413462bca
Internal SmartGift build of a Claude Code monitoring dashboard. Lanes: a durable unit of parallel agent work, one per working directory, tracked across session restarts. Managed lanes are git worktrees the dashboard provisions and can reset or remove behind a three-check destroy guard and a counted preflight; adopted lanes are directories you already own and are never destroyable. Pipelines: a lane moves through pipeline stages. A stage the agent declares with evidence renders green; a stage inferred from the tool-event stream renders dashed amber and never counts as done. Detection is forward-only within a 30-minute window, and never writes the declared stage. Workspace: one page at /run with a lane grid, the selected lane's pipeline, and a full Claude console behind a disclosure.
93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
/**
|
|
* @file The compact lane tile used in the Workspace carousel. It carries only
|
|
* what you need to pick a lane — which lane, is it alive, what stage, how far —
|
|
* because the full card, its controls and its working-copy facts live in the
|
|
* detail panel below. Keeping the tile small is what lets a dozen lanes stay
|
|
* scannable in one horizontal row.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
import type { Lane } from "../../lib/types";
|
|
|
|
const LIVENESS_DOT: Record<Lane["liveness"], string> = {
|
|
active: "bg-emerald-400",
|
|
idle: "bg-neutral-500",
|
|
dead: "bg-red-500",
|
|
};
|
|
|
|
/** Whether the inferred stage sits ahead of the declared one in node order. */
|
|
function detectionLeads(lane: Lane): boolean {
|
|
if (!lane.detected_stage) return false;
|
|
const ids = lane.pipeline_nodes.map((n) => n.id);
|
|
return ids.indexOf(lane.detected_stage) > ids.indexOf(lane.stage);
|
|
}
|
|
|
|
export default function LaneStripCard({
|
|
lane,
|
|
selected,
|
|
onSelect,
|
|
}: {
|
|
lane: Lane;
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
}) {
|
|
const { t } = useTranslation(["lanes"]);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-testid={`lane-tile-${lane.id}`}
|
|
data-selected={selected ? "true" : undefined}
|
|
aria-pressed={selected}
|
|
onClick={onSelect}
|
|
title={lane.cwd}
|
|
className={`w-56 shrink-0 snap-start rounded-lg border p-3 text-left transition-colors ${
|
|
selected
|
|
? "border-blue-400/70 bg-blue-500/[0.07]"
|
|
: "border-neutral-800 bg-neutral-900/60 hover:border-neutral-700"
|
|
}`}
|
|
>
|
|
<div className="mb-1.5 flex items-center gap-1.5">
|
|
<span className={`h-2 w-2 shrink-0 rounded-full ${LIVENESS_DOT[lane.liveness]}`} />
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
|
|
{t("cardId", { id: lane.id })}
|
|
</span>
|
|
{lane.needs_action && (
|
|
<span className="ml-auto text-amber-400" title={lane.needs_action}>
|
|
⚠
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-2 truncate text-[13px] font-medium text-neutral-100">
|
|
{lane.title || lane.cwd}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5 text-[11px]">
|
|
<span className="truncate rounded bg-neutral-800 px-1.5 py-0.5 text-neutral-300">
|
|
{lane.stage}
|
|
</span>
|
|
{detectionLeads(lane) && (
|
|
<span
|
|
data-testid={`lane-tile-auto-${lane.id}`}
|
|
title={lane.detected_signal || undefined}
|
|
className="shrink-0 rounded border border-dashed border-amber-500 px-1 text-amber-300"
|
|
>
|
|
{lane.detected_stage}
|
|
</span>
|
|
)}
|
|
{lane.progress > 0 && (
|
|
<span className="ml-auto shrink-0 tabular-nums text-neutral-500">{lane.progress}%</span>
|
|
)}
|
|
</div>
|
|
|
|
{lane.progress > 0 && (
|
|
<div className="mt-1.5 h-0.5 overflow-hidden rounded-full bg-neutral-800">
|
|
<div className="h-full rounded-full bg-blue-500" style={{ width: `${lane.progress}%` }} />
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|