feat: Claude Code Monitor — lanes, pipelines and a merged workspace

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.
2026-07-29 17:07:45 +07:00
commit b291091e14
783 changed files with 221698 additions and 0 deletions
@@ -0,0 +1,92 @@
+/**
+ * @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>
+  );
+}