fix(showcase/dashboard): render Starter row-group in the live FeatureGrid (was in dead CellMatrix)

PR CopilotKit#5226 added the "Starter" pseudo-category row-group (StarterSection,
using resolveStarterRow/buildStarterBadge) only to CellMatrix in
cell-matrix.tsx. But the live DashboardPage renders the matrix tab via
FeatureGrid (feature-grid.tsx); CellMatrix is reached only through
cells-view.tsx, which no live route imports — it is dead/legacy. So the
Starter row shipped in code but could never render (the served prod bundle
had zero StarterSection/starter-row-/"no starter" strings).

Port the StarterSection into FeatureGrid: render the four fixed sub-rows
(health/agent/chat/interaction) after the feature categories, resolving
each cell via the existing S3 helpers (resolveStarterRow + buildStarterBadge,
5-state vocab) and structurally excluded from the feature rollup/column tally
(never calls renderCell/buildCellModel). Aligned to FeatureGrid's table
structure (Feature col + optional parity ref-depth spacer + categoryColSpan).
Remove the duplicate from the dead CellMatrix and move its dedicated tests
to feature-grid.test.tsx, which exercises the live registry-backed grid.

Render proof: production next build now bakes starter-row-/starter-cell-/
"no starter for this integration" into the served page.js (client + server)
bundles. Full dashboard suite green (815 passed, 1 skipped).

Author: jpr5

showcase/shell-dashboard/src/components/__tests__/cell-matrix.test.tsx

@@ -8,7 +8,7 @@ import { CellMatrix } from "../cell-matrix";
 import type { CatalogCell } from "../depth-utils";
 import type { LiveStatusMap, StatusRow } from "@/lib/live-status";
 import type { FeatureCategory } from "@/lib/registry";
-import { E2E_STALE_AFTER_MS, STARTER_STALE_AFTER_MS } from "@/lib/staleness";
+import { E2E_STALE_AFTER_MS } from "@/lib/staleness";
 
 // Mock localStorage
 const storageMap = new Map<string, string>();
@@ -712,88 +712,3 @@ describe("CellMatrix", () => {
     }
   });
 });
-
-/* ------------------------------------------------------------------ */
-/*  Starter row-group (spec §d)                                         */
-/* ------------------------------------------------------------------ */
-
-describe("CellMatrix — Starter row-group", () => {
-  // agno is a MAPPED starter column; ag2 is one of the 7 NOT-supported columns.
-  const starterIntegrations: IntegrationInfo[] = [
-    { slug: "agno", name: "Agno", tier: "at_parity" },
-    { slug: "ag2", name: "AG2", tier: "partial" },
-  ];
-
-  const renderMatrix = (live: LiveStatusMap) =>
-    render(
-      <CellMatrix
-        cells={[]}
-        categories={[]}
-        features={[]}
-        integrations={starterIntegrations}
-        liveStatus={live}
-        defaultOpenCategories={new Set()}
-        filter="all"
-        referenceSlug="agno"
-      />,
-    );
-
-  it("renders the Starter header and four fixed sub-rows", () => {
-    const { getByText, getByTestId } = renderMatrix(new Map());
-    expect(getByText("Starter")).toBeDefined();
-    for (const level of ["health", "agent", "chat", "interaction"]) {
-      expect(getByTestId(`starter-row-${level}`)).toBeDefined();
-    }
-  });
-
-  it("✓ green for a passing mapped starter cell", () => {
-    const live = mapOf([row("starter:agno/health", "starter", "green")]);
-    const { getByTestId } = renderMatrix(live);
-    const cell = getByTestId("starter-cell-agno-health");
-    expect(cell.textContent).toContain("✓");
-  });
-
-  it("red ✗ for a failed mapped starter cell", () => {
-    const live = mapOf([row("starter:agno/chat", "starter", "red")]);
-    const { getByTestId } = renderMatrix(live);
-    const cell = getByTestId("starter-cell-agno-chat");
-    expect(cell.textContent).toContain("✗");
-  });
-
-  it("gray ? for a mapped column with no row yet (not-yet-run)", () => {
-    const { getByTestId } = renderMatrix(new Map());
-    const cell = getByTestId("starter-cell-agno-agent");
-    expect(cell.textContent).toContain("?");
-  });
-
-  it("not-supported ✗ for an unmapped column, tooltip 'no starter for this integration'", () => {
-    const { getByTestId } = renderMatrix(new Map());
-    const cell = getByTestId("starter-cell-ag2-health");
-    // grey ✗ — the chip carries the tooltip title.
-    expect(cell.textContent).toContain("✗");
-    const chip = cell.querySelector("[title]");
-    expect(chip?.getAttribute("title")).toBe("no starter for this integration");
-  });
-
-  it("~ stale: a frozen-green starter row downgrades to amber ~", () => {
-    const staleAt = new Date(
-      Date.now() - STARTER_STALE_AFTER_MS - 1,
-    ).toISOString();
-    const live = mapOf([
-      {
-        id: "id-stale",
-        key: "starter:agno/interaction",
-        dimension: "starter",
-        state: "green" as const,
-        signal: {},
-        observed_at: staleAt,
-        transitioned_at: staleAt,
-        fail_count: 0,
-        first_failure_at: null,
-      },
-    ]);
-    const { getByTestId } = renderMatrix(live);
-    const cell = getByTestId("starter-cell-agno-interaction");
-    expect(cell.textContent).toContain("~");
-  });
-});

showcase/shell-dashboard/src/components/cell-matrix.tsx

@@ -15,23 +15,12 @@ import { DepthChip } from "./depth-chip";
 import { CellDrilldown } from "./cell-drilldown";
 import { IntegrationHeader } from "./integration-header";
 import { useCollapsible, CategoryHeaderRow } from "./collapsible-category";
-import { ToneChip } from "./badges";
 import { buildCellModel } from "@/lib/cell-model";
 import type { CatalogCell } from "./depth-utils";
 import type { ParityTier } from "./parity-badge";
 import type { FilterMode } from "./filter-chips";
-import {
-  resolveCell,
-  resolveStarterRow,
-  buildStarterBadge,
-  starterIsSupported,
-  STARTER_LEVELS,
-} from "@/lib/live-status";
-import type {
-  LiveStatusMap,
-  ConnectionStatus,
-  StarterLevel,
-} from "@/lib/live-status";
+import { resolveCell } from "@/lib/live-status";
+import type { LiveStatusMap, ConnectionStatus } from "@/lib/live-status";
 import type { FeatureCategory } from "@/lib/registry";
 
 /** Identifies a selected cell for drilldown. */
@@ -228,105 +217,6 @@ function CategorySection({
   );
 }
 
-/* ------------------------------------------------------------------ */
-/*  StarterSection — the "Starter" pseudo-category row-group (spec §d)  */
-/* ------------------------------------------------------------------ */
-
-/** Human-readable label per starter sub-row, in STARTER_LEVELS order. */
-const STARTER_LEVEL_LABEL: Record<StarterLevel, string> = {
-  health: "Health",
-  agent: "Agent",
-  chat: "Chat",
-  interaction: "Interaction",
-};
-
-interface StarterSectionProps {
-  visibleIntegrations: IntegrationInfo[];
-  liveStatus: LiveStatusMap;
-  defaultOpen: boolean;
-  connection: ConnectionStatus;
-  now: number;
-}
-
-/**
- * The "Starter" row-group: four fixed sub-rows (health/agent/chat/interaction)
- * keyed to the integration columns. Rendered like a `CategorySection`, but the
- * cells resolve via `resolveStarterRow` + `buildStarterBadge` (the full 5-state
- * §d vocabulary) instead of the depth model.
- *
- * INFORMATIONAL ONLY: this group never calls `resolveCell`, so starter rows
- * cannot contribute to the feature-cell `rollup` (spec §d) — the exclusion is
- * structural, not a filter.
- */
-function StarterSection({
-  visibleIntegrations,
-  liveStatus,
-  defaultOpen,
-  connection,
-  now,
-}: StarterSectionProps) {
-  const { isOpen, toggle } = useCollapsible({
-    name: "Starter",
-    defaultOpen,
-  });
-
-  const supportedCount = visibleIntegrations.filter((int) =>
-    starterIsSupported(int.slug),
-  ).length;
-
-  return (
-    <>
-      <CategoryHeaderRow
-        name="Starter"
-        count={`${supportedCount}/${visibleIntegrations.length}`}
-        colSpan={visibleIntegrations.length + 1}
-        isOpen={isOpen}
-        onToggle={toggle}
-      />
-      {isOpen &&
-        STARTER_LEVELS.map((level) => (
-          <tr
-            key={level}
-            data-testid={`starter-row-${level}`}
-            className="border-t border-[var(--border)] hover:bg-[var(--bg-hover)]"
-          >
-            <td className="sticky left-0 z-10 bg-[var(--bg-surface)] px-4 py-1.5 border-r border-[var(--border)] align-middle min-w-[200px]">
-              <span className="text-xs text-[var(--text)]">
-                {STARTER_LEVEL_LABEL[level]}
-              </span>
-            </td>
-            {visibleIntegrations.map((int) => {
-              const isSupported = starterIsSupported(int.slug);
-              const row = isSupported
-                ? resolveStarterRow(liveStatus, int.slug, level)
-                : null;
-              const badge = buildStarterBadge(
-                level,
-                isSupported,
-                row,
-                now,
-                connection,
-              );
-              return (
-                <td
-                  key={int.slug}
-                  data-testid={`starter-cell-${int.slug}-${level}`}
-                  className="border-l border-[var(--border)] px-3 py-1.5 align-middle text-center"
-                >
-                  <ToneChip
-                    tone={badge.tone}
-                    label={badge.label}
-                    title={badge.tooltip}
-                  />
-                </td>
-              );
-            })}
-          </tr>
-        ))}
-    </>
-  );
-}
-
 /* ------------------------------------------------------------------ */
 /*  CellMatrix                                                         */
 /* ------------------------------------------------------------------ */
@@ -515,20 +405,6 @@ export function CellMatrix({
               />
             );
           })}
-          {/*
-           * "Starter" pseudo-category row-group (spec §d). Informational
-           * smoke-health for the deployed starter services — rendered after
-           * the feature categories, never contributing to any feature cell's
-           * rollup (it does not call resolveCell). Shown across all filter
-           * modes since it is a health surface, not a feature-coverage row.
-           */}
-          <StarterSection
-            visibleIntegrations={visibleIntegrations}
-            liveStatus={liveStatus}
-            defaultOpen
-            connection={connection}
-            now={now}
-          />
         </tbody>
       </table>
     </div>

showcase/shell-dashboard/src/components/feature-grid.test.tsx

@@ -11,8 +11,15 @@ import { render } from "@testing-library/react";
 import { LiveIndicator, computeColumnTally, FeatureGrid } from "./feature-grid";
 import type { CellContext, CellRenderer } from "./feature-grid";
 import { urlsFor } from "./cell-pieces";
+import { getIntegrations } from "@/lib/registry";
+import { starterIsSupported, STARTER_LEVELS } from "@/lib/live-status";
 import type { Integration, Feature } from "@/lib/registry";
-import type { LiveStatusMap, StatusRow } from "@/lib/live-status";
+import type {
+  LiveStatusMap,
+  StatusRow,
+  ConnectionStatus,
+} from "@/lib/live-status";
+import { STARTER_STALE_AFTER_MS } from "@/lib/staleness";
 
 describe("LiveIndicator", () => {
   it("renders live → green solid dot", () => {
@@ -232,3 +239,101 @@ describe("computeColumnTally", () => {
     expect(t).toEqual({ green: 0, amber: 1, red: 0, unknown: false });
   });
 });
+
+/* ------------------------------------------------------------------ */
+/*  Starter row-group (spec §d) — must render in the LIVE FeatureGrid   */
+/*  (it was ported here from the dead CellMatrix, where it could never   */
+/*   reach the served dashboard).                                        */
+/* ------------------------------------------------------------------ */
+
+describe("FeatureGrid — Starter row-group", () => {
+  // FeatureGrid pulls from the REAL registry (getIntegrations), so the Starter
+  // section renders against live integration slugs. Resolve a mapped and an
+  // unmapped column from the registry itself rather than hardcoding slugs.
+  const integrations = getIntegrations();
+  const mapped = integrations.find((i) => starterIsSupported(i.slug));
+  const unmapped = integrations.find((i) => !starterIsSupported(i.slug));
+
+  const renderGrid = (
+    live: LiveStatusMap,
+    connection: ConnectionStatus = "live",
+  ) =>
+    render(
+      <FeatureGrid
+        title="Feature Matrix"
+        renderCell={() => null}
+        liveStatus={live}
+        connection={connection}
+        shellUrl="https://showcase.staging.copilotkit.ai"
+      />,
+    );
+
+  it("renders the Starter header and all four fixed sub-rows", () => {
+    const { getByText, getByTestId } = renderGrid(new Map());
+    expect(getByText("Starter")).toBeDefined();
+    for (const level of STARTER_LEVELS) {
+      expect(getByTestId(`starter-row-${level}`)).toBeDefined();
+    }
+  });
+
+  it("a mapped column with no row yet renders the gray ? no-data cell", () => {
+    expect(mapped, "registry must have ≥1 mapped starter column").toBeDefined();
+    const { getByTestId } = renderGrid(new Map());
+    const cell = getByTestId(`starter-cell-${mapped!.slug}-health`);
+    expect(cell.textContent).toContain("?");
+  });
+
+  it("an unmapped column renders the not-supported ✗ with the 'no starter' tooltip", () => {
+    expect(unmapped, "registry must have ≥1 unmapped column").toBeDefined();
+    const { getByTestId } = renderGrid(new Map());
+    const cell = getByTestId(`starter-cell-${unmapped!.slug}-health`);
+    expect(cell.textContent).toContain("✗");
+    const chip = cell.querySelector("[title]");
+    expect(chip?.getAttribute("title")).toBe("no starter for this integration");
+  });
+
+  it("✓ green for a passing mapped starter cell", () => {
+    expect(mapped).toBeDefined();
+    const key = `starter:${mapped!.slug}/health`;
+    const live: LiveStatusMap = new Map([[key, row(key, "starter", "green")]]);
+    const { getByTestId } = renderGrid(live);
+    const cell = getByTestId(`starter-cell-${mapped!.slug}-health`);
+    expect(cell.textContent).toContain("✓");
+  });
+
+  it("red ✗ for a failed mapped starter cell", () => {
+    expect(mapped).toBeDefined();
+    const key = `starter:${mapped!.slug}/chat`;
+    const live: LiveStatusMap = new Map([[key, row(key, "starter", "red")]]);
+    const { getByTestId } = renderGrid(live);
+    const cell = getByTestId(`starter-cell-${mapped!.slug}-chat`);
+    expect(cell.textContent).toContain("✗");
+  });
+
+  it("~ amber for a frozen-green starter row past the staleness window", () => {
+    expect(mapped).toBeDefined();
+    const key = `starter:${mapped!.slug}/interaction`;
+    const staleAt = new Date(
+      Date.now() - STARTER_STALE_AFTER_MS - 1,
+    ).toISOString();
+    const live: LiveStatusMap = new Map([
+      [
+        key,
+        {
+          id: "id-stale",
+          key,
+          dimension: "starter",
+          state: "green" as const,
+          signal: {},
+          observed_at: staleAt,
+          transitioned_at: staleAt,
+          fail_count: 0,
+          first_failure_at: null,
+        },
+      ],
+    ]);
+    const { getByTestId } = renderGrid(live);
+    const cell = getByTestId(`starter-cell-${mapped!.slug}-interaction`);
+    expect(cell.textContent).toContain("~");
+  });
+});