fix(showcase): improve cell drilldown dialog UX (CopilotKit#4535)

jpr5 · web-flow · commit 6abb87ee2bfa · 2026-04-30T14:17:33.000-07:00
## Summary

- Widen dialog from `w-72` (288px) to `w-[480px]` so error details are
not cramped
- Extract key signal fields (`errorDesc`, `error`, `failureSummary`,
`backendUrl`, `apiRequestCount`, `step`) as readable key-value pairs
instead of raw JSON
- Deduplicate `errorDesc` and `error` when both present (first match
wins)
- Make raw signal payload collapsible ("Raw Signal" toggle) for
debugging
- Remove duplicate tooltip text that repeated status/timing info already
conveyed by badge color and failure metadata
- Compact fail_count and first_failure_at into a single inline row

## Test plan

- [x] All 11 cell-drilldown tests pass (4 new tests added for extracted
fields, collapsible toggle, deduplication, and wider width)
- [x] No new TS errors introduced
- [x] Pre-existing test/TS failures in other files are unrelated
diff --git a/showcase/shell-dashboard/src/components/__tests__/cell-drilldown.test.tsx b/showcase/shell-dashboard/src/components/__tests__/cell-drilldown.test.tsx
@@ -118,12 +118,16 @@ describe("CellDrilldown", () => {
     expect(healthBadge.textContent).toContain("Apr");
   });
 
-  it("shows signal payload for red badges", () => {
+  it("extracts signal fields as readable text for red badges", () => {
     const live = mapOf([
       row("e2e:lgp/agentic-chat", "e2e", "red", {
         fail_count: 2,
         first_failure_at: "2026-04-18T12:00:00Z",
-        signal: { error: "assertion failed", step: "login" },
+        signal: {
+          errorDesc: "Agent returned empty response",
+          backendUrl: "https://lgp.example.com",
+          apiRequestCount: 3,
+        },
       }),
     ]);
     const { getByTestId } = render(
@@ -136,6 +140,40 @@ describe("CellDrilldown", () => {
         onClose={() => {}}
       />,
     );
+    // Extracted fields should be visible without expanding raw signal
+    expect(
+      getByTestId("signal-field-error").textContent,
+    ).toBe("Agent returned empty response");
+    expect(
+      getByTestId("signal-field-backend-url").textContent,
+    ).toBe("https://lgp.example.com");
+    expect(
+      getByTestId("signal-field-api-requests").textContent,
+    ).toBe("3");
+  });
+
+  it("shows raw signal payload behind collapsible toggle", () => {
+    const live = mapOf([
+      row("e2e:lgp/agentic-chat", "e2e", "red", {
+        fail_count: 2,
+        first_failure_at: "2026-04-18T12:00:00Z",
+        signal: { error: "assertion failed", step: "login" },
+      }),
+    ]);
+    const { getByTestId, queryByTestId } = render(
+      <CellDrilldown
+        slug="lgp"
+        featureId="agentic-chat"
+        integrationName="LangGraph Python"
+        featureName="Agentic Chat"
+        liveStatus={live}
+        onClose={() => {}}
+      />,
+    );
+    // Raw signal should be collapsed by default
+    expect(queryByTestId("signal-payload")).toBeNull();
+    // Click the toggle to expand
+    fireEvent.click(getByTestId("signal-toggle"));
     const signalEl = getByTestId("signal-payload");
     expect(signalEl.textContent).toContain("assertion failed");
     expect(signalEl.textContent).toContain("login");
@@ -195,4 +233,48 @@ describe("CellDrilldown", () => {
     const strikethroughEl = healthBadge.querySelector(".line-through");
     expect(strikethroughEl).not.toBeNull();
   });
+
+  it("deduplicates errorDesc and error (only shows first match)", () => {
+    const live = mapOf([
+      row("e2e:lgp/agentic-chat", "e2e", "red", {
+        fail_count: 1,
+        signal: {
+          errorDesc: "Agent timed out",
+          error: "timeout",
+        },
+      }),
+    ]);
+    const { getByTestId, queryAllByTestId } = render(
+      <CellDrilldown
+        slug="lgp"
+        featureId="agentic-chat"
+        integrationName="LangGraph Python"
+        featureName="Agentic Chat"
+        liveStatus={live}
+        onClose={() => {}}
+      />,
+    );
+    // errorDesc wins — only one "Error:" line
+    expect(
+      getByTestId("signal-field-error").textContent,
+    ).toBe("Agent timed out");
+    // Should not have a second error field
+    expect(queryAllByTestId("signal-field-error").length).toBe(1);
+  });
+
+  it("uses wider dialog (480px)", () => {
+    const { getByTestId } = render(
+      <CellDrilldown
+        slug="lgp"
+        featureId="agentic-chat"
+        integrationName="LangGraph Python"
+        featureName="Agentic Chat"
+        liveStatus={new Map()}
+        onClose={() => {}}
+      />,
+    );
+    const dialog = getByTestId("cell-drilldown");
+    expect(dialog.className).toContain("w-[480px]");
+    expect(dialog.className).not.toContain("w-72");
+  });
 });
diff --git a/showcase/shell-dashboard/src/components/cell-drilldown.tsx b/showcase/shell-dashboard/src/components/cell-drilldown.tsx
@@ -4,9 +4,10 @@
  * single (integration, feature) cell.
  *
  * Renders all badge dimensions (d2/API, d5/CV, e2e/RT, health, smoke) with
- * tone, label, tooltip, and — for red/amber badges — failure metadata:
- * fail_count, first_failure_at, and the signal payload.
+ * tone, label, and — for red/amber badges — failure metadata presented as
+ * readable key-value pairs with the full signal collapsible for debugging.
  */
+import { useState } from "react";
 import { resolveCell } from "@/lib/live-status";
 import type {
   CellState,
@@ -44,6 +45,47 @@ function formatTimestamp(ts: string | null): string {
   return formatTs(ts);
 }
 
+/**
+ * Keys we extract from the signal object and display as readable
+ * key-value pairs rather than raw JSON. Ordered by display priority.
+ */
+const SIGNAL_DISPLAY_KEYS: ReadonlyArray<{
+  key: string;
+  label: string;
+}> = [
+  { key: "errorDesc", label: "Error" },
+  { key: "error", label: "Error" },
+  { key: "failureSummary", label: "Failure" },
+  { key: "backendUrl", label: "Backend URL" },
+  { key: "apiRequestCount", label: "API Requests" },
+  { key: "step", label: "Step" },
+];
+
+/**
+ * Extract human-readable fields from a signal object. Returns an array
+ * of { label, value } pairs for display. Deduplicates the "Error" label
+ * so that `errorDesc` and `error` don't both render when present.
+ */
+function extractSignalFields(
+  signal: unknown,
+): Array<{ label: string; value: string }> {
+  if (signal == null || typeof signal !== "object" || Array.isArray(signal))
+    return [];
+  const obj = signal as Record<string, unknown>;
+  const fields: Array<{ label: string; value: string }> = [];
+  const usedLabels = new Set<string>();
+  for (const { key, label } of SIGNAL_DISPLAY_KEYS) {
+    if (usedLabels.has(label)) continue;
+    const val = obj[key];
+    if (val == null) continue;
+    const str = typeof val === "string" ? val : String(val);
+    if (str.length === 0) continue;
+    fields.push({ label, value: str });
+    usedLabels.add(label);
+  }
+  return fields;
+}
+
 function formatSignal(signal: unknown): string | null {
   if (signal == null) return null;
   if (typeof signal === "string") return signal || null;
@@ -60,9 +102,37 @@ function formatSignal(signal: unknown): string | null {
   return String(signal) || null;
 }
 
+function CollapsibleSignal({ text }: { text: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="mt-1">
+      <button
+        type="button"
+        data-testid="signal-toggle"
+        onClick={() => setOpen(!open)}
+        className="text-[10px] text-[var(--text-muted)] hover:text-[var(--text)] cursor-pointer flex items-center gap-1"
+      >
+        <span className="text-[9px]">{open ? "▼" : "▶"}</span>
+        Raw Signal
+      </button>
+      {open && (
+        <pre
+          data-testid="signal-payload"
+          className="mt-1 p-2 rounded bg-[var(--bg-muted)] text-[10px] text-[var(--text)] overflow-x-auto max-h-40 whitespace-pre-wrap break-all"
+        >
+          {text}
+        </pre>
+      )}
+    </div>
+  );
+}
+
 function BadgeRow({ badge, label }: { badge: BadgeRender; label: string }) {
   const isFailure = badge.tone === "red" || badge.tone === "amber";
   const signalText = badge.row ? formatSignal(badge.row.signal) : null;
+  const signalFields = badge.row
+    ? extractSignalFields(badge.row.signal)
+    : [];
 
   return (
     <div
@@ -90,41 +160,52 @@ function BadgeRow({ badge, label }: { badge: BadgeRender; label: string }) {
           </span>
         )}
       </div>
-      <p className="mt-0.5 text-[10px] text-[var(--text-muted)] leading-tight">
-        {badge.tooltip}
-      </p>
       {isFailure && badge.row && (
-        <div className="mt-1.5 pl-4 space-y-0.5">
-          {badge.row.fail_count > 0 && (
-            <div className="text-[10px]">
-              <span className="text-[var(--text-muted)]">Failures:</span>{" "}
-              <span
-                data-testid="fail-count"
-                className="text-[var(--danger)] font-semibold tabular-nums"
-              >
-                {badge.row.fail_count}
-              </span>
+        <div className="mt-1.5 pl-4 space-y-1">
+          {/* Extracted signal fields — readable key-value pairs */}
+          {signalFields.length > 0 && (
+            <div className="space-y-0.5">
+              {signalFields.map(({ label: fieldLabel, value }) => (
+                <div key={fieldLabel} className="text-xs">
+                  <span className="text-[var(--text-muted)]">
+                    {fieldLabel}:
+                  </span>{" "}
+                  <span
+                    data-testid={`signal-field-${fieldLabel.toLowerCase().replace(/\s+/g, "-")}`}
+                    className={`font-medium ${badge.tone === "red" ? "text-[var(--danger)]" : "text-[var(--amber)]"}`}
+                  >
+                    {value}
+                  </span>
+                </div>
+              ))}
             </div>
           )}
-          {badge.row.first_failure_at && (
-            <div className="text-[10px]">
-              <span className="text-[var(--text-muted)]">First failure:</span>{" "}
-              <span data-testid="first-failure" className="text-[var(--text)]">
-                {formatTimestamp(badge.row.first_failure_at)}
+          <div className="flex items-center gap-3 text-[10px] text-[var(--text-muted)]">
+            {badge.row.fail_count > 0 && (
+              <span>
+                Failures:{" "}
+                <span
+                  data-testid="fail-count"
+                  className="text-[var(--danger)] font-semibold tabular-nums"
+                >
+                  {badge.row.fail_count}
+                </span>
               </span>
-            </div>
-          )}
-          {signalText && (
-            <div className="text-[10px]">
-              <span className="text-[var(--text-muted)]">Signal:</span>
-              <pre
-                data-testid="signal-payload"
-                className="mt-0.5 p-1.5 rounded bg-[var(--bg-muted)] text-[9px] text-[var(--text)] overflow-x-auto max-h-24 whitespace-pre-wrap break-all"
-              >
-                {signalText}
-              </pre>
-            </div>
-          )}
+            )}
+            {badge.row.first_failure_at && (
+              <span>
+                Since{" "}
+                <span
+                  data-testid="first-failure"
+                  className="text-[var(--text)]"
+                >
+                  {formatTimestamp(badge.row.first_failure_at)}
+                </span>
+              </span>
+            )}
+          </div>
+          {/* Raw signal — collapsible for debugging */}
+          {signalText && <CollapsibleSignal text={signalText} />}
         </div>
       )}
     </div>
@@ -145,32 +226,32 @@ export function CellDrilldown({
   return (
     <div
       data-testid="cell-drilldown"
-      className="absolute z-50 mt-1 w-72 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg"
+      className="absolute z-50 mt-1 w-[480px] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg"
       role="dialog"
       aria-label={`${integrationName} / ${featureName} detail`}
     >
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--border)] bg-[var(--bg-muted)] rounded-t-lg">
+      <div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--border)] bg-[var(--bg-muted)] rounded-t-lg">
         <div className="min-w-0">
-          <div className="text-xs font-semibold text-[var(--text)] truncate">
+          <div className="text-sm font-semibold text-[var(--text)] truncate">
             {integrationName}
           </div>
-          <div className="text-[10px] text-[var(--text-muted)] truncate">
+          <div className="text-xs text-[var(--text-muted)] truncate">
             {featureName}
           </div>
         </div>
         <button
           type="button"
           data-testid="drilldown-close"
           onClick={onClose}
-          className="ml-2 p-0.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] text-sm leading-none cursor-pointer"
+          className="ml-2 p-1 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] text-sm leading-none cursor-pointer"
           aria-label="Close"
         >
           x
         </button>
       </div>
       {/* Rollup */}
-      <div className="px-3 py-1.5 flex items-center gap-2 border-b border-[var(--border)]">
+      <div className="px-4 py-2 flex items-center gap-2 border-b border-[var(--border)]">
         <span className="text-[10px] text-[var(--text-muted)] uppercase tracking-wider">
           Rollup
         </span>
@@ -182,7 +263,7 @@ export function CellDrilldown({
         </span>
       </div>
       {/* Badge rows */}
-      <div className="px-3 py-1">
+      <div className="px-4 py-1">
         {DIMENSIONS.map((dim) => (
           <BadgeRow key={dim.key} badge={cell[dim.key]} label={dim.label} />
         ))}
