fix(showcase): extend depth ladder to D5/D6 with emerald chips

jpr5 · jpr5 · commit 616a45bb1d98 · 2026-04-29T00:42:17.000-07:00
Depth system was capped at D4 — D5/D6 PocketBase rows existed but
the chip never advanced past D4. Extends deriveDepth() through D6
with proper short-circuit gating, adds isD5Green() for multi-key
CATALOG_TO_D5_KEY resolution, and colors D5/D6 chips emerald to
distinguish from D3/D4 blue.
diff --git a/showcase/shell-dashboard/src/components/__tests__/depth-chip.test.tsx b/showcase/shell-dashboard/src/components/__tests__/depth-chip.test.tsx
@@ -1,17 +1,20 @@
 /**
- * Unit tests for DepthChip — renders correct text + class for D0-D4,
+ * Unit tests for DepthChip — renders correct text + class for D0-D6,
  * unshipped, and regression states.
  */
 import { describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
 import { DepthChip } from "../depth-chip";
 
 describe("DepthChip", () => {
-  it.each([0, 1, 2, 3, 4])(
+  it.each([0, 1, 2, 3, 4, 5, 6])(
     "renders D%i for depth=%i with wired status",
     (depth) => {
       const { getByTestId } = render(
-        <DepthChip depth={depth as 0 | 1 | 2 | 3 | 4} status="wired" />,
+        <DepthChip
+          depth={depth as 0 | 1 | 2 | 3 | 4 | 5 | 6}
+          status="wired"
+        />,
       );
       const chip = getByTestId("depth-chip");
       expect(chip.textContent).toBe(`D${depth}`);
@@ -48,6 +51,18 @@ describe("DepthChip", () => {
     expect(chip.className).toContain("accent");
   });
 
+  it("renders D5 with emerald background class", () => {
+    const { getByTestId } = render(<DepthChip depth={5} status="wired" />);
+    const chip = getByTestId("depth-chip");
+    expect(chip.className).toContain("emerald");
+  });
+
+  it("renders D6 with emerald background class", () => {
+    const { getByTestId } = render(<DepthChip depth={6} status="wired" />);
+    const chip = getByTestId("depth-chip");
+    expect(chip.className).toContain("emerald");
+  });
+
   it("renders '--' for unshipped status with dashed border", () => {
     const { getByTestId } = render(<DepthChip depth={0} status="unshipped" />);
     const chip = getByTestId("depth-chip");
diff --git a/showcase/shell-dashboard/src/components/__tests__/depth-utils.test.ts b/showcase/shell-dashboard/src/components/__tests__/depth-utils.test.ts
@@ -1,6 +1,6 @@
 /**
  * Unit tests for depth derivation utility.
- * Parameterized: all D0-D4 combos, short-circuit on red, unshipped returns D0.
+ * Parameterized: all D0-D6 combos, short-circuit on red, unshipped returns D0.
  */
 import { describe, it, expect } from "vitest";
 import { deriveDepth } from "../depth-utils";
@@ -207,4 +207,96 @@ describe("deriveDepth", () => {
     expect(result.isRegression).toBe(true);
   });
 
+  it("returns D5 when D0-D4 green plus D5 green (via CATALOG_TO_D5_KEY)", () => {
+    const c = cell("lgp", "agentic-chat");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/agentic-chat", "e2e", "green"),
+      row("chat:lgp", "chat", "green"),
+      row("d5:lgp/agentic-chat", "d5", "green"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(5);
+  });
+
+  it("returns D4 when D5 row is red", () => {
+    const c = cell("lgp", "agentic-chat");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/agentic-chat", "e2e", "green"),
+      row("chat:lgp", "chat", "green"),
+      row("d5:lgp/agentic-chat", "d5", "red"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(4);
+  });
+
+  it("returns D4 when D5 row is missing", () => {
+    const c = cell("lgp", "agentic-chat");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/agentic-chat", "e2e", "green"),
+      row("chat:lgp", "chat", "green"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(4);
+  });
+
+  it("returns D5 for multi-key D5 mapping (shared-state-read-write)", () => {
+    const c = cell("lgp", "shared-state-read-write");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/shared-state-read-write", "e2e", "green"),
+      row("tools:lgp", "tools", "green"),
+      row("d5:lgp/shared-state-read", "d5", "green"),
+      row("d5:lgp/shared-state-write", "d5", "green"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(5);
+  });
+
+  it("returns D4 when one of multi-key D5 rows is red", () => {
+    const c = cell("lgp", "shared-state-read-write");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/shared-state-read-write", "e2e", "green"),
+      row("tools:lgp", "tools", "green"),
+      row("d5:lgp/shared-state-read", "d5", "green"),
+      row("d5:lgp/shared-state-write", "d5", "red"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(4);
+  });
+
+  it("returns D6 when D0-D5 green plus D6 green", () => {
+    const c = cell("lgp", "agentic-chat");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/agentic-chat", "e2e", "green"),
+      row("chat:lgp", "chat", "green"),
+      row("d5:lgp/agentic-chat", "d5", "green"),
+      row("d6:lgp/agentic-chat", "d6", "green"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(6);
+  });
+
+  it("returns D4 for feature with no D5 mapping", () => {
+    const c = cell("lgp", "unknown-feature");
+    const live = mapOf([
+      row("health:lgp", "health", "green"),
+      row("agent:lgp", "agent", "green"),
+      row("e2e:lgp/unknown-feature", "e2e", "green"),
+      row("chat:lgp", "chat", "green"),
+    ]);
+    const result = deriveDepth(c, live);
+    expect(result.achieved).toBe(4);
+  });
+
 });
diff --git a/showcase/shell-dashboard/src/components/__tests__/overlay-selector-integration.test.tsx b/showcase/shell-dashboard/src/components/__tests__/overlay-selector-integration.test.tsx
@@ -521,10 +521,8 @@ describe("Overlay selector integration — real UI components", () => {
     expect(getByTestId("depth-layer")).toBeInTheDocument();
     expect(getByTestId("depth-chip")).toBeInTheDocument();
 
-    // No health badges
-    expect(queryByText("E2E")).not.toBeInTheDocument();
-    expect(queryByText("D5")).not.toBeInTheDocument();
-    expect(queryByText("D6")).not.toBeInTheDocument();
+    // No health badges (health overlay not active)
+    expect(queryByTestId("health-layer")).not.toBeInTheDocument();
 
     // No docs
     expect(queryByText("docs-og")).not.toBeInTheDocument();
@@ -572,6 +570,6 @@ describe("Overlay selector integration — real UI components", () => {
     // health+agent+e2e+chat all green, deriveDepth should yield D4
     const depthAttr = chip.getAttribute("data-depth");
     expect(depthAttr).toBeTruthy();
-    expect(chip.textContent).toMatch(/^D[0-4]$/);
+    expect(chip.textContent).toMatch(/^D[0-6]$/);
   });
 });
diff --git a/showcase/shell-dashboard/src/components/depth-chip.tsx b/showcase/shell-dashboard/src/components/depth-chip.tsx
@@ -1,8 +1,9 @@
 "use client";
 /**
- * DepthChip — colored chip showing achieved depth D0-D4.
+ * DepthChip — colored chip showing achieved depth D0-D6.
  *
  * Color mapping:
+ *   D5-D6 = emerald — deep multi-turn e2e + parity coverage
  *   D3-D4 = blue (accent) — meaningful e2e + interaction coverage
  *   D1-D2 = amber — basic health and agent checks
  *   D0    = gray — exists but no live probe data
@@ -11,7 +12,7 @@
  */
 
 export interface DepthChipProps {
-  depth: 0 | 1 | 2 | 3 | 4;
+  depth: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   status: "wired" | "stub" | "unshipped";
   /** When true, chip renders in red regardless of depth. */
   regression?: boolean;
@@ -23,6 +24,9 @@ function depthColorClass(depth: number, regression?: boolean): string {
     return "bg-[var(--danger)] text-white";
   }
   switch (depth) {
+    case 5:
+    case 6:
+      return "bg-emerald-600 text-white";
     case 3:
     case 4:
       return "bg-[var(--accent)] text-white";
diff --git a/showcase/shell-dashboard/src/components/depth-utils.ts b/showcase/shell-dashboard/src/components/depth-utils.ts
@@ -1,17 +1,19 @@
 /**
- * Pure depth-derivation utility for the D0-D4 depth ladder.
+ * Pure depth-derivation utility for the D0-D6 depth ladder.
  *
- * Walks D0 through D4 checking PocketBase live-status rows:
+ * Walks D0 through D6 checking PocketBase live-status rows:
  *   D0 = cell exists with status wired or stub (static, no PB)
  *   D1 = health:<slug> green (integration-scoped)
  *   D2 = agent:<slug> green (integration-scoped)
  *   D3 = e2e:<slug>/<featureId> green (per-cell)
  *   D4 = chat:<slug> OR tools:<slug> green (integration-scoped)
+ *   D5 = d5:<slug>/<d5FeatureType> green (per-cell, mapped via CATALOG_TO_D5_KEY)
+ *   D6 = d6:<slug>/<featureId> green (per-cell)
  *
  * Achieved depth = highest D where ALL lower depths are also green.
  * Short-circuits: if any level is not green, stop there.
  */
-import { keyFor, type LiveStatusMap } from "@/lib/live-status";
+import { keyFor, CATALOG_TO_D5_KEY, type LiveStatusMap } from "@/lib/live-status";
 
 /** Minimal catalog cell shape consumed by depth derivation. */
 export interface CatalogCell {
@@ -27,11 +29,11 @@ export interface CatalogCell {
   category_name: string | null;
 }
 
-/** Achieved depth on the D0-D4 ladder. */
-export type AchievedDepth = 0 | 1 | 2 | 3 | 4;
+/** Achieved depth on the D0-D6 ladder. */
+export type AchievedDepth = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export interface DepthResult {
-  /** Highest contiguous depth achieved (0-4). */
+  /** Highest contiguous depth achieved (0-6). */
   achieved: AchievedDepth;
   /** Whether achieved depth is below the historical high-water mark (max_depth). */
   isRegression: boolean;
@@ -42,11 +44,27 @@ function isGreen(live: LiveStatusMap, key: string): boolean {
   return row?.state === "green";
 }
 
+/**
+ * Check whether all D5 PB rows for a given (slug, catalogFeatureId) are green.
+ * Returns false if the feature has no D5 mapping or any mapped row is missing/non-green.
+ */
+function isD5Green(
+  live: LiveStatusMap,
+  slug: string,
+  featureId: string,
+): boolean {
+  const d5Keys = CATALOG_TO_D5_KEY[featureId];
+  if (!d5Keys || d5Keys.length === 0) {
+    return isGreen(live, keyFor("d5", slug, featureId));
+  }
+  return d5Keys.every((d5Key) => isGreen(live, keyFor("d5", slug, d5Key)));
+}
+
 /**
  * Derive the achieved depth for a single catalog cell.
  *
  * The walk is contiguous: if D1 is not green, achieved = D0 regardless
- * of D2/D3/D4 status (short-circuit).
+ * of D2/D3/D4/D5/D6 status (short-circuit).
  */
 export function deriveDepth(
   cell: CatalogCell,
@@ -73,7 +91,7 @@ export function deriveDepth(
   achieved = 2;
 
   // D3: e2e:<slug>/<featureId> green (per-cell)
-  // Guard: skip D3 if feature is null (no per-cell e2e to evaluate).
+  // Guard: skip D3+ if feature is null (no per-cell e2e to evaluate).
   if (cell.feature === null) {
     return { achieved, isRegression: achieved < cell.max_depth };
   }
@@ -85,8 +103,20 @@ export function deriveDepth(
   // D4: chat:<slug> OR tools:<slug> green (integration-scoped)
   const chatGreen = isGreen(live, keyFor("chat", cell.integration));
   const toolsGreen = isGreen(live, keyFor("tools", cell.integration));
-  if (chatGreen || toolsGreen) {
-    achieved = 4;
+  if (!(chatGreen || toolsGreen)) {
+    return { achieved, isRegression: achieved < cell.max_depth };
+  }
+  achieved = 4;
+
+  // D5: d5:<slug>/<d5FeatureType> green (per-cell, mapped via CATALOG_TO_D5_KEY)
+  if (!isD5Green(live, cell.integration, cell.feature)) {
+    return { achieved, isRegression: achieved < cell.max_depth };
+  }
+  achieved = 5;
+
+  // D6: d6:<slug>/<featureId> green (per-cell)
+  if (isGreen(live, keyFor("d6", cell.integration, cell.feature))) {
+    achieved = 6;
   }
 
   return { achieved, isRegression: achieved < cell.max_depth };
diff --git a/showcase/shell-dashboard/src/components/ref-depth-column.tsx b/showcase/shell-dashboard/src/components/ref-depth-column.tsx
@@ -12,7 +12,7 @@ import { DepthChip } from "@/components/depth-chip";
 export function RefDepthHeader() {
   return (
     <th
-      className="sticky left-[260px] top-0 z-30 px-3 py-3 text-left border-b border-r-2 border-r-[#c4b5fd] border-l border-[var(--border)] font-normal"
+      className="sticky left-[260px] top-0 z-30 px-1.5 py-1.5 text-left border-b border-r-2 border-r-[#c4b5fd] border-l border-[var(--border)] font-normal"
       style={{ backgroundColor: "#f5f0ff" }}
     >
       <div className="text-[9px] font-semibold uppercase tracking-wider text-[#7c3aed] leading-tight">
@@ -29,7 +29,7 @@ export function RefDepthHeader() {
 /* ------------------------------------------------------------------ */
 
 export interface RefDepthCellProps {
-  depth: 0 | 1 | 2 | 3 | 4;
+  depth: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   status: "wired" | "stub" | "unshipped";
   /** When true, chip renders in red regardless of depth. */
   regression?: boolean;
@@ -38,7 +38,7 @@ export interface RefDepthCellProps {
 export function RefDepthCell({ depth, status, regression }: RefDepthCellProps) {
   return (
     <td
-      className="sticky left-[260px] z-10 px-3 py-2 border-r-2 border-r-[#c4b5fd] border-l border-[var(--border)] align-top"
+      className="sticky left-[260px] z-10 px-1.5 py-1 border-r-2 border-r-[#c4b5fd] border-l border-[var(--border)] align-top"
       style={{ backgroundColor: "#f5f0ff" }}
     >
       <DepthChip depth={depth} status={status} regression={regression} />
diff --git a/showcase/shell-dashboard/src/lib/live-status.ts b/showcase/shell-dashboard/src/lib/live-status.ts
@@ -104,7 +104,7 @@ export function keyFor(
  *
  * Mirrors `REGISTRY_TO_D5` in `harness/src/probes/helpers/d5-feature-mapping.ts`.
  */
-const CATALOG_TO_D5_KEY: Readonly<Record<string, readonly string[]>> = {
+export const CATALOG_TO_D5_KEY: Readonly<Record<string, readonly string[]>> = {
   "agentic-chat": ["agentic-chat"],
   "tool-rendering": ["tool-rendering"],
   "tool-rendering-default-catchall": ["tool-rendering"],
@@ -127,7 +127,9 @@ function resolveD5Row(
   featureId: string,
 ): StatusRow | null {
   const d5Keys = CATALOG_TO_D5_KEY[featureId];
-  if (!d5Keys) return null;
+  if (!d5Keys) {
+    return live.get(keyFor("d5", slug, featureId)) ?? null;
+  }
   let worst: StatusRow | null = null;
   for (const d5Key of d5Keys) {
     const row = live.get(keyFor("d5", slug, d5Key)) ?? null;
