Add run treemap visualization (#3)

* Add run treemap visualization

* Fix treemap duration and error states

Author: dutifulbob

apps/api/src/app.integration.test.ts

@@ -96,6 +96,123 @@ describe.runIf(runIntegration)("api integration", () => {
     });
     expect(stepResponse.statusCode).toBe(404);
     expect(stepResponse.json()).toMatchObject({ message: "Step not found" });
+
+    const treemapResponse = await app.inject({
+      method: "GET",
+      url: "/runs/00000000-0000-0000-0000-000000000001/treemap",
+    });
+    expect(treemapResponse.statusCode).toBe(404);
+    expect(treemapResponse.json()).toMatchObject({ message: "Run not found" });
+  }, 30_000);
+
+  it("returns a run treemap with step, file, and process nodes", async () => {
+    const createResponse = await app.inject({
+      method: "POST",
+      url: "/runs/manual",
+      payload: {
+        repositorySlug: "verge",
+        commitSha: "treemap-sha",
+        requestedStepKeys: ["test"],
+        disableReuse: true,
+      },
+    });
+
+    expect(createResponse.statusCode).toBe(200);
+    const createPayload = createResponse.json() as {
+      runId: string;
+      stepRunIds: string[];
+    };
+
+    const initialTreemapResponse = await app.inject({
+      method: "GET",
+      url: `/runs/${createPayload.runId}/treemap`,
+    });
+    expect(initialTreemapResponse.statusCode).toBe(200);
+    const initialTreemap = initialTreemapResponse.json() as {
+      runId: string;
+      tree: {
+        kind: string;
+        children?: Array<{
+          kind: string;
+          stepKey?: string | null;
+          children?: Array<{ kind: string; children?: Array<{ kind: string }> }>;
+        }>;
+      };
+    };
+
+    expect(initialTreemap.runId).toBe(createPayload.runId);
+    expect(initialTreemap.tree.kind).toBe("run");
+    const testStepNode = initialTreemap.tree.children?.find((node) => node.stepKey === "test");
+    expect(testStepNode?.kind).toBe("step");
+    expect(testStepNode?.children?.some((child) => child.kind === "file")).toBe(true);
+    expect(
+      testStepNode?.children?.some(
+        (child) =>
+          child.kind === "file" &&
+          child.children?.some((grandchild) => grandchild.kind === "process"),
+      ),
+    ).toBe(true);
+
+    const claimResponse = await app.inject({
+      method: "POST",
+      url: "/workers/claim",
+      payload: {
+        workerId: "treemap-worker",
+      },
+    });
+    expect(claimResponse.statusCode).toBe(200);
+    const assignment = claimResponse.json() as {
+      assignment: {
+        stepRunId: string;
+        processRunId: string;
+        processKey: string;
+      } | null;
+    };
+    expect(assignment.assignment?.stepRunId).toBe(createPayload.stepRunIds[0]);
+
+    await app.inject({
+      method: "POST",
+      url: `/workers/steps/${assignment.assignment?.stepRunId}/events`,
+      payload: {
+        workerId: "treemap-worker",
+        processRunId: assignment.assignment?.processRunId,
+        kind: "started",
+        message: "Started treemap process",
+      },
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 15));
+
+    await app.inject({
+      method: "POST",
+      url: `/workers/steps/${assignment.assignment?.stepRunId}/events`,
+      payload: {
+        workerId: "treemap-worker",
+        processRunId: assignment.assignment?.processRunId,
+        kind: "passed",
+        message: "Completed treemap process",
+      },
+    });
+
+    const finalTreemapResponse = await app.inject({
+      method: "GET",
+      url: `/runs/${createPayload.runId}/treemap`,
+    });
+    expect(finalTreemapResponse.statusCode).toBe(200);
+    const finalTreemap = finalTreemapResponse.json() as {
+      tree: {
+        children?: Array<{
+          children?: Array<{ children?: Array<{ processKey?: string | null; valueMs?: number }> }>;
+        }>;
+      };
+    };
+
+    const processNode = finalTreemap.tree.children
+      ?.flatMap((child) => child.children ?? [])
+      .flatMap((child) => child.children ?? [])
+      .find((node) => node.processKey === assignment.assignment?.processKey);
+
+    expect(processNode?.valueMs).toBeGreaterThan(0);
   }, 30_000);
 
   it("ingests GitHub webhooks idempotently and exposes pull request detail", async () => {

apps/api/src/routes/public.ts

@@ -8,6 +8,7 @@ import {
   getRepositoryBySlug,
   getRepositoryHealth,
   getRunDetail,
+  getRunTreemap,
   getStepRunDetail,
   listRepositories,
   listRepositoryRuns,
@@ -57,6 +58,17 @@ export const registerPublicRoutes = (app: FastifyInstance, context: ApiContext):
     return detail;
   });
 
+  app.get("/runs/:id/treemap", async (request, reply) => {
+    const treemap = await getRunTreemap(
+      context.connection.db,
+      (request.params as { id: string }).id,
+    );
+    if (!treemap) {
+      return reply.code(404).send({ message: "Run not found" });
+    }
+    return treemap;
+  });
+
   app.get("/runs/:runId/steps/:stepId", async (request, reply) => {
     const { runId, stepId } = request.params as { runId: string; stepId: string };
     const detail = await getStepRunDetail(context.connection.db, stepId);

apps/web/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@verge/contracts": "workspace:*",
+    "d3-hierarchy": "^3.1.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   }

apps/web/src/App.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { statusTone } from "./lib/format.js";
+import { formatDuration, statusTone } from "./lib/format.js";
 
 describe("statusTone", () => {
   it("maps successful states to the good tone", () => {
@@ -13,3 +13,14 @@ describe("statusTone", () => {
     expect(statusTone("stale")).toBe("bad");
   });
 });
+
+describe("formatDuration", () => {
+  it("falls back to live elapsed time when durationMs is null", () => {
+    const startedAt = new Date(Date.now() - 4_200).toISOString();
+    expect(formatDuration(startedAt, null, null)).toBe("4s");
+  });
+
+  it("prefers the stored duration when it exists", () => {
+    expect(formatDuration(null, null, 65_000)).toBe("1m 5s");
+  });
+});

apps/web/src/App.tsx

@@ -31,7 +31,7 @@ export const App = () => {
   const currentRepositorySlug = route.repositorySlug ?? preferredRepositorySlug;
   const { health, processSpecs, error: overviewError } = useOverviewData(currentRepositorySlug);
   const { runsPage, error: runsError } = useRunsPageData(route, currentRepositorySlug);
-  const { run, step, error: runError } = useRunDetailData(route);
+  const { run, treemap, step, error: runError, treemapError } = useRunDetailData(route);
 
   const [commitSha, setCommitSha] = useState("");
   const [branch, setBranch] = useState("main");
@@ -319,7 +319,9 @@ export const App = () => {
         />
       ) : null}
 
-      {route.name === "run" ? <RunDetailPage run={run} error={error} /> : null}
+      {route.name === "run" ? (
+        <RunDetailPage run={run} treemap={treemap} treemapError={treemapError} error={error} />
+      ) : null}
       {route.name === "step" ? <StepDetailPage run={run} step={step} error={error} /> : null}
     </main>
   );