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 9413462bca
781 changed files with 220593 additions and 0 deletions
@@ -0,0 +1,106 @@
+/**
+ * @file Rendering tests for the lane pipeline map: every node renders with a
+ * state-specific class so "done", "current" and "passed without evidence" stay
+ * visually distinguishable, and the amber state is never conflated with done.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import PipelineMap from "../PipelineMap";
+import type { LaneNode } from "../../../lib/types";
+
+const nodes: LaneNode[] = [
+  { id: "plan", label: "plan", icon: "🧭", gate: false, state: "done" },
+  { id: "implement", label: "implement", icon: "🛠", gate: false, state: "passed-no-evidence" },
+  { id: "review", label: "review", icon: "👀", gate: true, state: "current" },
+  { id: "gate", label: "gate", icon: "🚦", gate: true, state: "failed" },
+  { id: "done", label: "done", icon: "✅", gate: false, state: "pending" },
+];
+
+describe("PipelineMap", () => {
+  it("renders one element per node, labelled by state", () => {
+    render(<PipelineMap nodes={nodes} />);
+    expect(screen.getAllByTestId(/^pipeline-node-/)).toHaveLength(5);
+    expect(screen.getByTestId("pipeline-node-plan")).toHaveAttribute("data-state", "done");
+    expect(screen.getByTestId("pipeline-node-implement")).toHaveAttribute(
+      "data-state",
+      "passed-no-evidence"
+    );
+    expect(screen.getByTestId("pipeline-node-review")).toHaveAttribute("data-state", "current");
+    expect(screen.getByTestId("pipeline-node-gate")).toHaveAttribute("data-state", "failed");
+    expect(screen.getByTestId("pipeline-node-done")).toHaveAttribute("data-state", "pending");
+  });
+
+  it("gives amber nodes a different class from done nodes", () => {
+    render(<PipelineMap nodes={nodes} />);
+    const done = screen.getByTestId("pipeline-node-plan").className;
+    const amber = screen.getByTestId("pipeline-node-implement").className;
+    // The done node must contain emerald colour token and the amber node must contain amber token.
+    expect(done).toContain("emerald");
+    expect(amber).toContain("amber");
+    expect(done).not.toEqual(amber);
+  });
+
+  it("renders nothing but an empty hint when there are no nodes", () => {
+    render(<PipelineMap nodes={[]} />);
+    expect(screen.queryAllByTestId(/^pipeline-node-/)).toHaveLength(0);
+  });
+
+  describe("detected (inferred) nodes", () => {
+    const detectedNodes: LaneNode[] = [
+      { id: "intake", label: "intake", icon: "📥", gate: false, state: "pending", detected: true },
+      { id: "tests", label: "tests", icon: "🧪", gate: false, state: "pending", detected: true },
+      { id: "plan", label: "plan", icon: "🧭", gate: false, state: "done" },
+      {
+        id: "implement",
+        label: "implement",
+        icon: "🛠",
+        gate: false,
+        state: "passed-no-evidence",
+      },
+    ];
+
+    it("marks a detected node with data-detected and a dashed-border class token", () => {
+      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
+      const node = screen.getByTestId("pipeline-node-tests");
+      expect(node).toHaveAttribute("data-detected", "true");
+      expect(node.className).toContain("border-dashed");
+    });
+
+    it("gives a detected node a class different from both done and plain passed-no-evidence", () => {
+      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
+      const detected = screen.getByTestId("pipeline-node-tests").className;
+      const done = screen.getByTestId("pipeline-node-plan").className;
+      const amber = screen.getByTestId("pipeline-node-implement").className;
+      expect(detected).not.toEqual(done);
+      expect(detected).not.toEqual(amber);
+    });
+
+    it("names the signal in the detected node's tooltip", () => {
+      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
+      const node = screen.getByTestId("pipeline-node-tests");
+      expect(node).toHaveAttribute("title", "tests ← npm run test:server");
+    });
+
+    it("PREMISE GUARD: detected wins over state=done — dashed amber, never emerald", () => {
+      // The server never emits this pair, and this is the guard that says the
+      // component would not paint an inference green even if it did. Asserting
+      // against a fixture whose detected nodes are already `pending` would only
+      // re-assert the fixture.
+      const impossible: LaneNode[] = [
+        { id: "tests", label: "tests", icon: "🧪", gate: false, state: "done", detected: true },
+      ];
+      render(<PipelineMap nodes={impossible} detectedSignal="npm run test:server" />);
+      const node = screen.getByTestId("pipeline-node-tests");
+      expect(node.className).toContain("border-dashed");
+      expect(node.className).toContain("amber");
+      expect(node.className).not.toContain("emerald");
+    });
+
+    it("non-detected nodes carry no data-detected attribute", () => {
+      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
+      expect(screen.getByTestId("pipeline-node-plan")).not.toHaveAttribute("data-detected");
+    });
+  });
+});