feat(studio/frontend): #1177 #1178 #1179 #1135 — action panel, filter counts, play-graph color/click/zoom, a11y perf baseline

apps/studio/frontend/PERF.md

@@ -0,0 +1,56 @@
+# jsx-a11y ESLint Performance Baseline (#1135)
+
+Date: 2026-06-03
+
+## Methodology
+
+- Worktree: `show/lionagi-sweep/studio-frontend`
+- Directory: `apps/studio/frontend`
+- Runtime: Node `v25.6.0`, pnpm `10.15.0`
+- Commands:
+  - `pnpm lint` (`eslint .`)
+  - `pnpm build` (`next build`)
+- Timing method: `/usr/bin/time -p`, reporting wall-clock `real` seconds.
+- Repetitions: `n=3` per condition.
+- Build method: removed `.next` before each build; reused installed dependencies and toolchain caches.
+- Bundle-size metric: summed bytes for `.next/static` JavaScript and CSS files after each successful build.
+- jsx-a11y enabled condition: shipped `eslint.config.mjs`.
+- jsx-a11y disabled condition: temporary config removed the real `eslint-plugin-jsx-a11y` import and stripped active `jsx-a11y/*` rules from `eslint-config-next`. An inert local namespace was added only so existing `eslint-disable` comments for jsx-a11y rule IDs would parse; `eslint --print-config app/runs/page.tsx` showed no active `jsx-a11y/*` rules.
+- Restoration check: `eslint.config.mjs` SHA-256 before and after measurement was `0bc03ee3ef328ccf35124318873816b2351c7ee94e4cd54ac55c388c5dff1ea5`.
+
+## Lint Time
+
+| Condition         |    Runs, seconds | Mean | Stddev |    CV | Result                      |
+| ----------------- | ---------------: | ---: | -----: | ----: | --------------------------- |
+| jsx-a11y enabled  | 4.15, 6.33, 5.00 | 5.16 |   1.10 | 21.3% | pass, 0 errors / 3 warnings |
+| jsx-a11y disabled | 3.90, 3.97, 3.94 | 3.94 |   0.04 |  0.9% | pass, 0 errors / 7 warnings |
+
+Observed lint delta: enabled mean minus disabled mean = `+1.22s`. The enabled lint sample is noisy (`CV=21.3%`), so treat this as a local baseline rather than a statistically stable estimate.
+
+The disabled condition reports more warnings because existing `eslint-disable` comments for jsx-a11y rules become unused when those rules are inactive.
+
+## Build Time
+
+| Condition                   |       Runs, seconds |  Mean | Stddev |    CV | Result |
+| --------------------------- | ------------------: | ----: | -----: | ----: | ------ |
+| jsx-a11y enabled            | 13.80, 13.22, 21.13 | 16.05 |   4.41 | 27.5% | pass   |
+| jsx-a11y disabled           |    5.71, 5.65, 5.90 |  5.75 |   0.13 |  2.3% | pass   |
+| post-restore enabled sanity |                6.09 |  6.09 |    n/a |   n/a | pass   |
+
+The first enabled build group shows warmup/cache noise (`CV=27.5%`). Because `next build` does not execute the ESLint rule set here, the post-restore enabled sanity build is the better check for whether jsx-a11y affects build execution. It remained comparable to the disabled build timings.
+
+## Production Bundle Size
+
+| Condition                   | Static JS/CSS files | Static JS/CSS bytes | Delta vs enabled |
+| --------------------------- | ------------------: | ------------------: | ---------------: |
+| jsx-a11y enabled            |                  45 |           1,482,391 |                0 |
+| jsx-a11y disabled           |                  45 |           1,482,391 |                0 |
+| post-restore enabled sanity |                  45 |           1,482,391 |                0 |
+
+## Conclusion
+
+`eslint-plugin-jsx-a11y` has zero production-bundle impact in this frontend: the built `.next/static` JavaScript/CSS payload is byte-identical with and without active jsx-a11y ESLint rules.
+
+The only measured effect is on `pnpm lint`, where the local three-run mean was `5.16s` with jsx-a11y enabled versus `3.94s` without active jsx-a11y rules. Build-time differences are attributable to build cache/warmup variance, not the ESLint plugin.
+
+Config restoration: confirmed. `eslint.config.mjs` was restored to the original SHA-256 hash and has no git diff after measurement.

apps/studio/frontend/SUMMARY.md

@@ -0,0 +1,89 @@
+# Studio Frontend — Four UX Fixes Summary
+
+**Branch**: `show/lionagi-sweep/studio-frontend` (based on `main`)
+**Commit**: `18ab1d3f3` — `feat(studio/frontend): four Studio UX fixes (#1177 #1178 #1179 #1135)`
+**Status**: committed locally only — **NOT pushed, no PR opened**.
+**Critic verdict** (op-6): **APPROVE** — `CRIT:0 | MAJ:0 | MIN:2` (both MINOR are inherent-design
+notes that conform to the contracts; neither blocks).
+
+## Gate results (tester op-5, re-run and confirmed by critic op-6)
+
+| Gate      | Command                           | Result                                                                     |
+| --------- | --------------------------------- | -------------------------------------------------------------------------- |
+| Lint      | `pnpm lint`                       | **PASS** — exit 0, 0 errors (3 pre-existing warnings, none from this work) |
+| Typecheck | `pnpm typecheck` (`tsc --noEmit`) | **PASS** — exit 0, 0 type errors                                           |
+| Build     | `pnpm build` (`next build`)       | **PASS** — ✓ Compiled successfully, 18/18 static pages                     |
+
+> Pre-commit prettier hook reformatted the three `.tsx` files + `PERF.md` on first commit attempt;
+> changes are formatting-only, were re-staged, and the eslint/prettier hooks both passed on the
+> final commit.
+
+---
+
+## #1177 — Action panel auto-synthesize from failed plays
+
+**What changed**: On the Show-detail ACTION panel, when no explicit blocker/next-step is declared
+but failed plays exist (`rollup.failed.length > 0`), the panel now synthesizes a concrete next
+action — each failed play named with its exit code (`play.meta.exit_code`) and a remediation hint
+(exit 124 → "rerun with timeout override", otherwise → "inspect logs for details"). The literal
+"No blockers or next action declared in plan." is now only reachable when there are zero failed
+plays, so the misleading render is impossible.
+
+**Files touched**: `app/shows/[topic]/page.tsx` (lines ~577–599).
+
+**Gate**: lint 0 errors / typecheck clean / build green.
+
+---
+
+## #1178 — Filter chips show per-status counts
+
+**What changed**: Runs page filter chips now display per-status counts derived from the already-
+loaded runs via a `statusCounts` memo (recomputes on `[runs]`, seeds all `STATUS_FILTERS` to 0,
+maps canonical DB `"completed"` → `"done"` chip per ADR-0025). Counts render through `Button`'s
+existing `trailing` slot and are hidden during skeleton load. Active vs inactive distinction is
+provided by the existing `Button variant="toggle"` (filled green vs outlined).
+
+**Files touched**: `app/runs/page.tsx` (`statusCounts` memo ~342–356; chip render + call site).
+
+**Gate**: lint 0 errors / typecheck clean / build green.
+
+---
+
+## #1179 — Play graph: color, click, zoom, critical path
+
+**What changed** (ReactFlow extended, **not** swapped):
+
+- Node color by status — `statusBackground()`: failed/error = red, running = blue,
+  merged/completed/done = green, pending/blocked = neutral gray (all 5 CSS vars confirmed present
+  in `globals.css`).
+- Clickable nodes → inline expand of the matching play's table row (`onNodeClick` → `setExpanded`).
+- Zoom controls + fit-to-view via `<Controls>` and `fitView`/`fitViewOptions`; height 220→300px.
+- Critical-path highlight — Kahn topo-sort + DP longest-path (`criticalPathEdgeIds()`), critical
+  edges restyled (running-blue stroke, width 2).
+- `for...of` over Map replaced with `.forEach` for `target: es5`.
+
+**Files touched**: `app/shows/[topic]/components/PlayDag.tsx`.
+
+**Gate**: lint 0 errors / typecheck clean / build green; no graph regression.
+
+---
+
+## #1135 — jsx-a11y ESLint perf baseline
+
+**What changed**: Measurement + doc only (no code behavior change). One-shot n=3 audit of
+`pnpm lint` and `pnpm build` with/without the jsx-a11y plugin. Lint overhead ~+1.22s
+(enabled 5.16s vs disabled 3.94s); production bundle **byte-identical** at 1,482,391 bytes / 45
+files across all conditions (eslint is dev-only). eslint config restored to original
+SHA-256 `0bc03ee3ef…` (empty `git diff`).
+
+**Files touched**: `apps/studio/frontend/PERF.md` (new). **See `PERF.md` for the full #1135
+baseline numbers, methodology, and raw timings.**
+
+**Gate**: PERF.md present; config restored; lint pass.
+
+---
+
+## Disposition
+
+Four fixes implemented, committed to `show/lionagi-sweep/studio-frontend` as `18ab1d3f3`.
+All gates green. **Nothing pushed; no PR opened.**

apps/studio/frontend/app/runs/page.tsx

@@ -112,15 +112,25 @@
 
 function StatusFilterChip({
   value,
+  count,
   active,
   onClick,
 }: {
   value: string;
+  count?: number;
   active: boolean;
   onClick: () => void;
 }) {
   return (
-    <Button variant="toggle" size="sm" active={active} onClick={onClick}>
+    <Button
+      variant="toggle"
+      size="sm"
+      active={active}
+      onClick={onClick}
+      trailing={
+        count !== undefined ? <span className="tabular-nums opacity-70">{count}</span> : undefined
+      }
+    >
       {value}
     </Button>
   );
@@ -318,7 +328,7 @@
     });
   }
 
   const runs = data?.runs ?? [];
   const total = data?.total ?? 0;
   const totalPages = data?.total_pages ?? 1;
 
@@ -327,6 +337,22 @@
     [runs],
   );
 
+  // Per-status counts derived from the currently loaded runs.
+  // "completed" is the canonical DB value; "done" is the ADR-0025 backward-compat alias.
+  const statusCounts = useMemo<Record<string, number>>(() => {
+    const counts: Record<string, number> = {};
+    for (const s of STATUS_FILTERS) counts[s] = 0;
+    for (const run of runs) {
+      const st = run.status;
+      if (st === "completed") {
+        counts["done"] = (counts["done"] ?? 0) + 1;
+      } else if (st in counts) {
+        counts[st] = (counts[st] ?? 0) + 1;
+      }
+    }
+    return counts;
+  }, [runs]);
+
   return (
     <main className="mx-auto flex w-full max-w-7xl flex-col gap-5 px-4 py-6 animate-page-enter">
       <PageHeader
@@ -419,6 +445,7 @@
               <StatusFilterChip
                 key={s}
                 value={s}
+                count={loading ? undefined : statusCounts[s]}
                 active={statuses.includes(s)}
                 onClick={() => toggleStatus(s)}
               />

apps/studio/frontend/app/shows/[topic]/components/PlayDag.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import ReactFlow, { Background, Controls, MarkerType } from "reactflow";
-import type { Edge, Node } from "reactflow";
+import type { Edge, Node, NodeMouseHandler } from "reactflow";
 import "reactflow/dist/style.css";
 import { getLayoutedElements } from "@/components/canvas/useLayout";
 import type { ShowDetail } from "@/lib/types";
@@ -12,6 +12,7 @@ type Play = ShowDetail["plays"][number];
 interface PlayDagProps {
   plays: Play[];
   showMd?: string | null;
+  onNodeClick?: (playName: string) => void;
 }
 
 function parseShowMdDeps(showMd: string | null | undefined): Map<string, string[]> {
@@ -39,6 +40,23 @@ function parseShowMdDeps(showMd: string | null | undefined): Map<string, string[
   return deps;
 }
 
+function statusBackground(status: string): string {
+  if (
+    status === "merged" ||
+    status === "completed" ||
+    status === "done" ||
+    status === "director-managed-complete"
+  ) {
+    return "var(--status-success-bg)";
+  }
+  if (status === "running" || status === "director-managed") {
+    return "var(--status-running-bg)";
+  }
+  if (status === "failed" || status === "error") return "var(--status-error-bg)";
+  // pending, blocked, default → neutral surface
+  return "var(--surface-raised)";
+}
+
 function statusColor(status: string): string {
   if (
     status === "merged" ||
@@ -55,7 +73,75 @@ function statusColor(status: string): string {
   return "var(--edge-strong)";
 }
 
-export default function PlayDag({ plays, showMd }: PlayDagProps) {
+/** Returns the set of edge IDs on the longest path (by hop count) through the DAG. */
+function criticalPathEdgeIds(nodes: Node[], edges: Edge[]): Set<string> {
+  const outgoing = new Map<string, string[]>();
+  const inDegree = new Map<string, number>();
+  for (const n of nodes) {
+    outgoing.set(n.id, []);
+    inDegree.set(n.id, 0);
+  }
+  for (const e of edges) {
+    outgoing.get(e.source)?.push(e.target);
+    inDegree.set(e.target, (inDegree.get(e.target) ?? 0) + 1);
+  }
+
+  // Kahn's topological sort
+  const queue: string[] = [];
+  const deg = new Map(inDegree);
+  deg.forEach((d, id) => {
+    if (d === 0) queue.push(id);
+  });
+  const topo: string[] = [];
+  while (queue.length > 0) {
+    const u = queue.shift()!;
+    topo.push(u);
+    for (const v of outgoing.get(u) ?? []) {
+      const nd = (deg.get(v) ?? 0) - 1;
+      deg.set(v, nd);
+      if (nd === 0) queue.push(v);
+    }
+  }
+
+  // DP: longest path distance and predecessor tracking
+  const dist = new Map<string, number>(nodes.map((n) => [n.id, 0]));
+  const prev = new Map<string, string | null>(nodes.map((n) => [n.id, null]));
+  for (const u of topo) {
+    for (const v of outgoing.get(u) ?? []) {
+      if ((dist.get(u) ?? 0) + 1 > (dist.get(v) ?? 0)) {
+        dist.set(v, (dist.get(u) ?? 0) + 1);
+        prev.set(v, u);
+      }
+    }
+  }
+
+  // Find end of longest path
+  let maxDist = -1;
+  let endNode = "";
+  dist.forEach((d, id) => {
+    if (d > maxDist) {
+      maxDist = d;
+      endNode = id;
+    }
+  });
+
+  // Map "source→target" to edge id for fast lookup
+  const edgeByKey = new Map(edges.map((e) => [`${e.source}→${e.target}`, e.id]));
+
+  // Trace back from endNode to collect critical edge IDs
+  const critical = new Set<string>();
+  let cur = endNode;
+  let p = prev.get(cur);
+  while (p) {
+    const eid = edgeByKey.get(`${p}→${cur}`);
+    if (eid) critical.add(eid);
+    cur = p;
+    p = prev.get(cur);
+  }
+  return critical;
+}
+
+export default function PlayDag({ plays, showMd, onNodeClick }: PlayDagProps) {
   const { nodes, edges } = useMemo(() => {
     const depsMap = parseShowMdDeps(showMd);
     const playNames = new Set(plays.map((p) => p.name));
@@ -66,7 +152,7 @@ export default function PlayDag({ plays, showMd }: PlayDagProps) {
       position: { x: 0, y: 0 },
       data: { label: play.name },
       style: {
-        background: "var(--surface-raised)",
+        background: statusBackground(play.meta.status),
         border: `1px solid ${statusColor(play.meta.status)}`,
         color: "var(--content-primary)",
         fontSize: 10,
@@ -107,11 +193,29 @@ export default function PlayDag({ plays, showMd }: PlayDagProps) {
       }));
     }
 
-    return getLayoutedElements(rawNodes, rawEdges, "LR");
+    // Highlight the critical (longest) path with a distinct edge style
+    const criticalIds = criticalPathEdgeIds(rawNodes, rawEdges);
+    const highlightedEdges = rawEdges.map((e) =>
+      criticalIds.has(e.id)
+        ? { ...e, style: { ...e.style, stroke: "var(--status-running)", strokeWidth: 2 } }
+        : e,
+    );
+
+    return getLayoutedElements(rawNodes, highlightedEdges, "LR");
   }, [plays, showMd]);
 
+  const handleNodeClick: NodeMouseHandler = useCallback(
+    (_event, node) => {
+      onNodeClick?.(node.id);
+    },
+    [onNodeClick],
+  );
+
   return (
-    <div style={{ height: 220 }} className="rounded border border-edge bg-surface-base">
+    <div
+      style={{ height: 300 }}
+      className={`rounded border border-edge bg-surface-base${onNodeClick ? " [&_.react-flow__node]:cursor-pointer" : ""}`}
+    >
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -120,6 +224,7 @@ export default function PlayDag({ plays, showMd }: PlayDagProps) {
         nodesDraggable={false}
         nodesConnectable={false}
         elementsSelectable={false}
+        onNodeClick={onNodeClick ? handleNodeClick : undefined}
         proOptions={{ hideAttribution: true }}
         className="bg-surface-base"
       >