@stigmer/react 3.12.9 → 3.14.0-dev.20260910084630

package/src/sidebar/chrome.tsx

@@ -9,8 +9,9 @@ import { OrgSwitcher } from "../organization/OrgSwitcher.js";
 // ---------------------------------------------------------------------------
 // Shared sidebar chrome — the pieces WorkspaceSidebar and SettingsSidebar
 // have in common: the nav container, the top row (collapse toggle + org
-// switcher), the hairline separator, the footer band, and the one nav-row
-// class recipe. Internal to the sidebar domain; not exported from the SDK.
+// switcher), the hairline separator, the footer band, and the shared class
+// recipes (nav rows, section labels). Internal to the sidebar domain; not
+// exported from the SDK.
 //
 // Every class here is transcribed from the console's sidebars — this file
 // IS the console's chrome now, so a change here changes the console, the
@@ -107,23 +108,36 @@ export function SidebarSeparator() {
 }
 
 /**
- * The one nav-row class recipe both sidebars share: 14px medium labels,
- * 16px icons (sized by callers), 8px/6px padding, rounded row highlight.
+ * The one nav-row class recipe both sidebars share: 13px/16px regular
+ * labels, 16px icons (sized by callers), 8px/4px padding — 24px rows.
+ * The explicit `leading-4` is load-bearing: without it the inherited
+ * line-height (~1.5) pads every row to ~28px, and across a full column
+ * of rows that difference alone decides whether the sidebar breathes.
+ * 24px also stays exactly at the WCAG 2.5.8 minimum pointer-target size.
  *
- * `muted` renders the resting label in the muted sidebar tone — used by
- * "Back to Sessions", which is an exit, not a destination.
+ * Resting rows are muted so the navigation recedes and the content leads;
+ * the active row carries the accent fill, hover brightens to the accent
+ * foreground. Font weight is constant across states — state is expressed
+ * through color and fill only, so activating a row never shifts its text
+ * width. The muted-on-sidebar pairing is held to WCAG AA by the theme's
+ * contrast contract (sdk/theme/src/contract/pairs.ts) in every preset.
  */
-export function navRowClassName(
-  active: boolean,
-  { muted = false }: { muted?: boolean } = {},
-): string {
+export function navRowClassName(active: boolean): string {
   return cn(
-    "stg:flex stg:items-center stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+    "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:px-2 stg:py-1 stg:text-[13px] stg:leading-4 stg:transition-colors",
     active
       ? "stg:bg-sidebar-accent stg:text-sidebar-accent-foreground"
-      : cn(
-          muted ? "stg:text-sidebar-muted-foreground" : "stg:text-sidebar-foreground",
-          "stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground",
-        ),
+      : "stg:text-sidebar-muted-foreground stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground",
   );
 }
+
+/**
+ * The section-label recipe both sidebars share (settings group labels,
+ * the Recents heading): 11px/16px medium uppercase in the muted sidebar
+ * tone. Spacing around a label stays with the caller — it is a layout
+ * concern; this recipe owns only the typography, so the two sidebars
+ * cannot drift.
+ */
+export function sectionLabelClassName(): string {
+  return "stg:text-sidebar-muted-foreground stg:px-2 stg:text-[11px] stg:leading-4 stg:font-medium stg:tracking-wide stg:uppercase";
+}

package/src/workflow/__tests__/WorkflowExecutionViewer.reconciliation.test.tsx

@@ -383,19 +383,21 @@ describe("WorkflowExecutionViewer (center-column Thread|Graph toggle, S9)", () =
   it("a thread card offers no selection or drill-down gesture — the card IS the surface (T06)", () => {
     renderViewer();
 
-    // build-report has kind 0 (unspecified → summary disclosure): its header
-    // is the expand gesture, never a selection.
-    const header = screen.getByRole("button", { name: /^build-report/ });
-    expect(header.getAttribute("aria-expanded")).toBe("false");
-    expect(header.getAttribute("aria-pressed")).toBeNull();
+    // build-report renders from the snapshot fallback (no events): kind 0
+    // (unspecified → summary disclosure) with nothing beyond what its
+    // header row already carries — so it is a PLAIN row (stigmer#886): no
+    // expand chevron, no selection, no Inspect drill-down. (Expansion
+    // being card-local for content-bearing summary cards is pinned in
+    // WorkflowTaskThread.test.tsx.)
+    expect(
+      screen.queryByRole("button", { name: /^build-report/ }),
+    ).toBeNull();
     expect(
       screen.queryByRole("button", { name: "Inspect build-report" }),
     ).toBeNull();
 
-    fireEvent.click(header);
-
-    // Expansion is card-local; the panel never opens on a card gesture.
-    expect(header.getAttribute("aria-expanded")).toBe("true");
+    // Clicking the row is inert: the panel never opens on a card gesture.
+    fireEvent.click(screen.getByText("build-report"));
     expect(screen.queryByRole("radio", { name: "Inspect" })).toBeNull();
   });
 

package/src/workflow/__tests__/WorkflowTaskThread.test.tsx

@@ -451,6 +451,48 @@ describe("WorkflowTaskThread", () => {
     expect(screen.getByText(/at dial tcp 10\.0\.0\.1:443/)).toBeTruthy();
   });
 
+  it("a summary-kind card with a body-less detail renders no expand gesture (stigmer#886)", () => {
+    // A settled wait card with nothing the header cannot carry — no retry,
+    // no usage, no error, no I/O. Since R6-6 moved Status/Duration onto
+    // the header, its detail body would be empty, so the header is a plain
+    // row: offering a chevron that reveals nothing is worse than none.
+    render(
+      <WorkflowTaskThread
+        taskStates={statesOf(
+          taskState({ taskName: "blocking_wait", taskKind: WorkflowTaskKind.wait }),
+        )}
+        totalTasks={1}
+        isRunning={false}
+      />,
+    );
+
+    expect(screen.getByText("blocking_wait")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^blocking_wait/ })).toBeNull();
+  });
+
+  it("the expand gesture returns the moment the detail body has content (stigmer#886)", () => {
+    // The same wait card with a retry behind it: the Attempt row gives the
+    // body content, so the header is the expand gesture again.
+    render(
+      <WorkflowTaskThread
+        taskStates={statesOf(
+          taskState({
+            taskName: "blocking_wait",
+            taskKind: WorkflowTaskKind.wait,
+            attemptNumber: 2,
+          }),
+        )}
+        totalTasks={1}
+        isRunning={false}
+      />,
+    );
+
+    const header = screen.getByRole("button", { name: /^blocking_wait/ });
+    fireEvent.click(header);
+    expect(screen.getByText("Attempt")).toBeTruthy();
+    expect(screen.getByText("2")).toBeTruthy();
+  });
+
   it("shows the full error in a summary-kind card's expanded body", () => {
     render(
       <WorkflowTaskThread
@@ -471,9 +513,15 @@ describe("WorkflowTaskThread", () => {
   });
 
   it("keeps a card's expanded state across streaming updates (no remount)", () => {
+    // The wait card carries input so its detail body has content — a
+    // body-less summary card has no expand gesture at all (stigmer#886).
     const running = () =>
       statesOf(
-        taskState({ taskName: "settled", taskKind: WorkflowTaskKind.wait }),
+        taskState({
+          taskName: "settled",
+          taskKind: WorkflowTaskKind.wait,
+          inputSummary: { duration: "10s" },
+        }),
         taskState({ taskName: "live", status: "running", messagesCount: 1 }),
       );
     const { rerender } = render(
@@ -495,7 +543,11 @@ describe("WorkflowTaskThread", () => {
     rerender(
       <WorkflowTaskThread
         taskStates={statesOf(
-          taskState({ taskName: "settled", taskKind: WorkflowTaskKind.wait }),
+          taskState({
+            taskName: "settled",
+            taskKind: WorkflowTaskKind.wait,
+            inputSummary: { duration: "10s" },
+          }),
           taskState({ taskName: "live", status: "running", messagesCount: 2 }),
         )}
         totalTasks={2}

package/src/workflow/thread/WorkflowTaskThread.tsx

@@ -288,7 +288,12 @@ function ThreadEmptyState({ isRunning }: { readonly isRunning: boolean }) {
  *   card chevron — `BoundedContent` owns its own in-place reveal, so the
  *   old "expand, then Show more" double control never comes back).
  * - `"summary"` kinds expand from the header — the session card's own
- *   gesture, the chevron appended by the shell (T06).
+ *   gesture, the chevron appended by the shell (T06) — but ONLY when the
+ *   detail body would carry content (stigmer#886): since R6-6 moved
+ *   Status/Duration onto the header, a settled wait card often has
+ *   nothing left to reveal, and a chevron that opens an empty body is
+ *   worse than no chevron. The gate is the summary twin of
+ *   `showPreviewBody` below.
  * - AGENT_CALL cards with a spawned child render the child's inline
  *   transcript as the body (T07) — keyed on the VARIANT, not the
  *   disclosure, so a platform builder's presenter override can never route
@@ -362,6 +367,17 @@ const ThreadTaskCard = memo(function ThreadTaskCard({
     !showTranscript &&
     isPreview &&
     (outputIO !== null || !!item.error || showApprovalSummary);
+  // The summary twin of that gate (stigmer#886): the expand gesture exists
+  // only when `ThreadTaskDetail` would render something. Short-circuits
+  // before the row build for preview/transcript cards, which never render
+  // the detail body.
+  const summaryHasDetail =
+    !isPreview &&
+    !showTranscript &&
+    (taskDetailRows(item).length > 0 ||
+      !!item.error ||
+      inputIO !== null ||
+      outputIO !== null);
 
   const meta = formatMetaChips({
     durationMs: item.durationMs,
@@ -378,19 +394,19 @@ const ThreadTaskCard = memo(function ThreadTaskCard({
       accent={item.status === "waiting_approval" ? "warning" : null}
       cursorTarget="workflow-task-row"
     >
-      {/* The session card's gestures exactly (T06): summary rows expand
-          from the header (chevron appended by the shell); preview and
-          transcript rows' bodies are always visible, so the header is a
-          plain layout row. */}
+      {/* The session card's gestures exactly (T06): summary rows with a
+          content-bearing detail expand from the header (chevron appended
+          by the shell); preview, transcript, and body-less summary rows
+          are plain layout rows. */}
       <ThreadCardHeader
         gesture={
-          isPreview || showTranscript
-            ? { kind: "none" }
-            : {
+          summaryHasDetail
+            ? {
                 kind: "expand",
                 expanded,
                 onToggle: () => setExpanded((v) => !v),
               }
+            : { kind: "none" }
         }
       >
         <StatusGlyph status={item.status} />
@@ -486,7 +502,7 @@ const ThreadTaskCard = memo(function ThreadTaskCard({
         </ThreadCardBody>
       )}
 
-      {!isPreview && !showTranscript && expanded && (
+      {summaryHasDetail && expanded && (
         <ThreadCardBody>
           <ThreadTaskDetail item={item} inputIO={inputIO} outputIO={outputIO} />
         </ThreadCardBody>
@@ -630,19 +646,15 @@ function ThreadTaskPreviewBody({
   );
 }
 
-function ThreadTaskDetail({
-  item,
-  inputIO,
-  outputIO,
-}: {
-  readonly item: WorkflowThreadItem;
-  readonly inputIO: TaskDetailIO | null;
-  readonly outputIO: TaskDetailIO | null;
-}) {
-  // No Status/Duration rows (R6-6): the card header is the single source
-  // for both — the status glyph and the duration meta chip. The detail
-  // body carries only what the header cannot: attempt count, usage, the
-  // agent slug.
+/**
+ * The detail body's label/value rows. No Status/Duration rows (R6-6): the
+ * card header is the single source for both — the status glyph and the
+ * duration meta chip. The detail carries only what the header cannot:
+ * attempt count, usage, the agent slug. Shared with the card's
+ * `summaryHasDetail` gate so "would the body render anything?" can never
+ * drift from what the body actually renders (stigmer#886).
+ */
+function taskDetailRows(item: WorkflowThreadItem): Array<[string, string]> {
   const rows: Array<[string, string]> = [];
   if (item.attemptNumber > 1) rows.push(["Attempt", String(item.attemptNumber)]);
   const costChip = formatMetaChips({
@@ -653,6 +665,19 @@ function ThreadTaskDetail({
   if (item.variant === "agent-call" && item.agentSlug) {
     rows.push(["Agent", item.agentSlug]);
   }
+  return rows;
+}
+
+function ThreadTaskDetail({
+  item,
+  inputIO,
+  outputIO,
+}: {
+  readonly item: WorkflowThreadItem;
+  readonly inputIO: TaskDetailIO | null;
+  readonly outputIO: TaskDetailIO | null;
+}) {
+  const rows = taskDetailRows(item);
 
   return (
     <div className="stg:flex stg:flex-col stg:gap-2">