feat(showcase-dashboard): D6 rollup counter in AdaptiveStatsBar

Author: jpr5

showcase/shell-dashboard/src/app/page.tsx

@@ -20,7 +20,8 @@ import { BaselineTab } from "@/components/baseline-tab";
 import { DiscoveryAuthBanner } from "@/components/discovery-auth-banner";
 import type { ParityTier } from "@/components/parity-badge";
 import { getDocsStatus } from "@/lib/docs-status";
-import type { DepthDistribution } from "@/components/adaptive-stats-bar";
+import { resolveCell } from "@/lib/live-status";
+import type { DepthDistribution, D6Stats } from "@/components/adaptive-stats-bar";
 import catalog from "@/data/catalog.json";
 import type { CatalogData } from "@/data/catalog-types";
 
@@ -171,6 +172,29 @@ export default function Page() {
     return dist;
   }, [liveStatus]);
 
+  // Compute D6 (parity-vs-reference) rollup counts across wired cells.
+  const d6Stats = useMemo((): D6Stats => {
+    let green = 0;
+    let gray = 0;
+    let red = 0;
+    for (const cell of catalogData.cells) {
+      if (cell.status !== "wired" || cell.feature === null) continue;
+      const state = resolveCell(liveStatus, cell.integration, cell.feature);
+      switch (state.d6.tone) {
+        case "green":
+          green++;
+          break;
+        case "red":
+          red++;
+          break;
+        default:
+          gray++;
+          break;
+      }
+    }
+    return { green, gray, red };
+  }, [liveStatus]);
+
   // renderCell callback wrapping UnifiedCell + buildCellModel.
   // buildCellModel is the single source of truth for cell state — it handles
   // not-supported features, ceiling detection, and chip color derivation.
@@ -259,6 +283,7 @@ export default function Page() {
                 parityStats={parityStats}
                 docsStats={docsStats}
                 depthDistribution={depthDistribution}
+                d6Stats={d6Stats}
               />
             </div>
             <FeatureGrid

showcase/shell-dashboard/src/components/__tests__/overlay-selector-integration.test.tsx

@@ -352,7 +352,7 @@ describe("Overlay selector integration — real UI components", () => {
     const { getByTestId, getByText } = render(
       <ComposedCell
         ctx={ctx}
-        overlays={overlaySet("links", "depth", "health", "docs", "parity")}
+        overlays={overlaySet("links", "depth", "health", "docs", "parity", "d6")}
         catalogCell={catalogCell}
       />,
     );
@@ -370,7 +370,7 @@ describe("Overlay selector integration — real UI components", () => {
     // Verify stacking order: links, depth, health, docs
     const composedCell = getByTestId("composed-cell");
     const children = Array.from(composedCell.children);
-    expect(children.length).toBe(4); // parity adds no content layer
+    expect(children.length).toBe(4); // parity and d6 add no content layer
 
     // First child: links (contains "Demo")
     expect(children[0]?.textContent).toContain("Demo");

showcase/shell-dashboard/src/components/__tests__/overlay-toggle-bar.test.tsx

@@ -29,7 +29,7 @@ function renderBar(
 }
 
 describe("OverlayToggleBar", () => {
-  it("renders all 5 overlay pills", () => {
+  it("renders all 6 overlay pills", () => {
     const { getByTestId } = renderBar();
     for (const overlay of ALL_OVERLAYS) {
       expect(getByTestId(`overlay-pill-${overlay}`)).toBeTruthy();

showcase/shell-dashboard/src/components/adaptive-stats-bar.tsx

@@ -20,6 +20,13 @@ export interface DepthDistribution {
   d0: number;
 }
 
+/** D6 (parity-vs-reference) rollup counts. */
+export interface D6Stats {
+  green: number;
+  gray: number;
+  red: number;
+}
+
 export interface AdaptiveStatsBarProps {
   overlays: Set<Overlay>;
   catalog: CatalogData;
@@ -31,6 +38,8 @@ export interface AdaptiveStatsBarProps {
   docsStats?: { ok: number; missing: number; notFound: number; error: number };
   /** Depth distribution across wired cells (computed externally) */
   depthDistribution?: DepthDistribution;
+  /** D6 parity-vs-reference counts (computed externally) */
+  d6Stats?: D6Stats;
 }
 
 /* ------------------------------------------------------------------ */
@@ -243,6 +252,37 @@ function ParitySection({ stats }: { stats: Record<ParityTier, number> }) {
   );
 }
 
+function D6Section({ stats }: { stats: D6Stats }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="flex items-center gap-1">
+        <Dot color="var(--ok)" />
+        <MiniStat
+          value={stats.green}
+          label="green"
+          colorClass="text-[var(--ok)]"
+        />
+      </span>
+      <span className="flex items-center gap-1">
+        <Dot color="var(--text-muted)" />
+        <MiniStat
+          value={stats.gray}
+          label="gray"
+          colorClass="text-[var(--text-muted)]"
+        />
+      </span>
+      <span className="flex items-center gap-1">
+        <Dot color="var(--danger)" />
+        <MiniStat
+          value={stats.red}
+          label="red"
+          colorClass="text-[var(--danger)]"
+        />
+      </span>
+    </div>
+  );
+}
+
 function DocsSection({
   stats,
 }: {
@@ -281,6 +321,7 @@ export function AdaptiveStatsBar({
   parityStats,
   docsStats,
   depthDistribution,
+  d6Stats,
 }: AdaptiveStatsBarProps) {
   const sections: React.ReactNode[] = [];
 
@@ -311,6 +352,10 @@ export function AdaptiveStatsBar({
     sections.push(<DocsSection key="docs" stats={docsStats} />);
   }
 
+  if (overlays.has("d6") && d6Stats) {
+    sections.push(<D6Section key="d6" stats={d6Stats} />);
+  }
+
   return (
     <div
       data-testid="adaptive-stats-bar"

showcase/shell-dashboard/src/components/overlay-toggle-bar.tsx

@@ -21,6 +21,7 @@ export const ALL_OVERLAYS: readonly Overlay[] = [
   "health",
   "parity",
   "docs",
+  "d6",
 ];
 
 export const PRESETS: readonly OverlayPreset[] = [
@@ -39,6 +40,7 @@ const OVERLAY_LABELS: Record<Overlay, string> = {
   health: "Health",
   parity: "Parity",
   docs: "Docs",
+  d6: "D6",
 };
 
 export interface OverlayToggleBarProps {

showcase/shell-dashboard/src/lib/overlay-types.ts

@@ -1,4 +1,4 @@
-export type Overlay = "links" | "depth" | "health" | "parity" | "docs";
+export type Overlay = "links" | "depth" | "health" | "parity" | "docs" | "d6";
 export type OverlaySet = Set<Overlay>;
 
 export const ALL_OVERLAYS: readonly Overlay[] = [
@@ -7,6 +7,7 @@ export const ALL_OVERLAYS: readonly Overlay[] = [
   "health",
   "parity",
   "docs",
+  "d6",
 ] as const;
 
 export const DEFAULT_OVERLAYS: readonly Overlay[] = [