@stigmer/react 3.12.1 → 3.12.3

package/src/index.ts

@@ -1,5 +1,6 @@
 // Provider and context
 export { StigmerProvider, type StigmerProviderProps } from "./provider.js";
+export { type ApprovalDefaults } from "./approval-defaults-context.js";
 export { StigmerContext } from "./context.js";
 
 // Runner adapter
@@ -39,7 +40,9 @@ export {
   modelKey,
   parseModelKey,
   fetchModelRegistry,
+  fetchModelRegistryDocument,
   parseRegistryJson,
+  parseRegistryDocument,
   useModelRegistry,
   ModelRegistryContext,
   ModelSelector,
@@ -51,6 +54,7 @@ export {
 } from "./models/index.js";
 export type {
   ModelInfo,
+  ModelRegistryDocument,
   ModelRegistryState,
   ParsedModelKey,
   Provider,
@@ -60,6 +64,7 @@ export type {
   ModelSelectorProps,
   HarnessSelectorProps,
   HarnessOption,
+  VisionLimits,
 } from "./models/index.js";
 
 // Workspace — behavior hooks and styled components
@@ -215,6 +220,7 @@ export type {
   ExecutionTargetOption,
   RuntimeEnvProvider,
   SessionAudience,
+  SessionPanelMode,
   SetupTabProps,
   SetupTabMutationCallbacks,
 } from "./session/index.js";
@@ -257,6 +263,7 @@ export {
   ExecutionPhaseBadge,
   InteractionModeBadge,
   SetupProgress,
+  LivenessStatusLine,
   ExecutionProgress,
   TodoList,
   TodoCard,
@@ -279,6 +286,7 @@ export {
   ResultView,
   summarizeResultView,
   TerminalSession,
+  TerminalTail,
   useToolPresentation,
   registerToolPresenter,
   getToolPresenter,
@@ -288,6 +296,9 @@ export {
   toolKindToCategoryInfo,
   defaultDisclosureForCategory,
   extractPrimaryArg,
+  extractShellIntent,
+  extractShellIntentFromPreview,
+  SHELL_INTENT_ARG_FIELD,
   McpToolDetail,
   parseMcpResult,
   formatDuration,
@@ -296,6 +307,7 @@ export {
   SubAgentSection,
   MessageEntry,
   MessageThread,
+  ExecutionErrorNotice,
   ThreadSkeleton,
   FollowUpInput,
   ApprovalCard,
@@ -380,6 +392,7 @@ export type {
   ExecutionPhaseBadgeProps,
   InteractionModeBadgeProps,
   SetupProgressProps,
+  LivenessStatusLineProps,
   ExecutionProgressProps,
   TodoListProps,
   TodoCardProps,
@@ -398,6 +411,7 @@ export type {
   ToolCallDetailProps,
   ResultViewProps,
   TerminalSessionProps,
+  TerminalTailProps,
   ToolPresentation,
   ToolPresenter,
   ToolDisclosure,
@@ -409,6 +423,8 @@ export type {
   SubAgentSectionProps,
   MessageEntryProps,
   MessageThreadProps,
+  MessageThreadSlots,
+  ExecutionErrorNoticeProps,
   ThreadContentColumn,
   ThreadSkeletonProps,
   FollowUpInputProps,
@@ -466,13 +482,14 @@ export type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agent
 export { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 
 // Attachment — file upload behavior hook, styled chip list, clipboard paste,
-// and vision-resolution image preparation
+// vision-resolution image preparation, and vision preflight warnings
 export {
   useAttachments,
   AttachmentChipList,
   MAX_ATTACHMENT_BYTES,
   MAX_VISION_LONG_EDGE_PX,
   MAX_VISION_PIXELS,
+  assessVisionPreflight,
   detectContentType,
   exceedsVisionResolution,
   extractClipboardFiles,
@@ -481,15 +498,22 @@ export {
   prepareImageForVision,
   uniquifyFilename,
   validateAttachmentSize,
+  visionPreflightMessage,
 } from "./attachment/index.js";
 export type {
   AttachmentPhase,
   AttachmentEntry,
+  AssessVisionPreflightOptions,
   ClipboardFilesSource,
   UseAttachmentsOptions,
   UseAttachmentsReturn,
   AttachmentChipListProps,
   VisionFitSize,
+  VisionPreflight,
+  VisionPreflightAttachment,
+  VisionPreflightMessageOptions,
+  VisionPreflightReason,
+  VisionPreflightWarning,
 } from "./attachment/index.js";
 
 // File Reference — workspace file-reference behavior hook and styled chip list
@@ -1868,6 +1892,7 @@ export type {
   WorkflowTaskListProps,
   WorkflowDetailViewProps,
   WorkflowExecutionViewerProps,
+  WorkflowExecutionPanelMode,
   WorkflowExecutionHeaderProps,
   WorkflowExecutionPanelController,
   UseWorkflowExecutionPanelOptions,

package/src/internal/DecisionButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** The visual weight of a {@link DecisionButton}. */
 export type DecisionVariant = "primary" | "ghost" | "danger";
@@ -106,23 +107,3 @@ export function DecisionButton({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Inline SVG icon
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}

package/src/internal/DialogShell.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import type { MouseEvent, ReactNode, SyntheticEvent } from "react";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Width presets for {@link DialogShell}, mapping to Tailwind `max-w-*`
+ * utilities. Free-form sizes (e.g. a lightbox's `85vw`) ride `className`,
+ * which wins over the preset via `cn()`'s tailwind-merge.
+ */
+export type DialogShellWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+
+const WIDTH_CLASS: Record<DialogShellWidth, string> = {
+  sm: "stg:max-w-sm",
+  md: "stg:max-w-md",
+  lg: "stg:max-w-lg",
+  xl: "stg:max-w-xl",
+  "2xl": "stg:max-w-2xl",
+  "3xl": "stg:max-w-3xl",
+  "4xl": "stg:max-w-4xl",
+};
+
+/** Props for {@link DialogShell}. */
+export interface DialogShellProps {
+  /** Whether the dialog is open (controlled — the SDK dialog convention). */
+  readonly open: boolean;
+  /**
+   * Called with `false` when the dialog should close: Escape / the platform
+   * cancel gesture, or a native close the host did not drive (e.g. a
+   * `method="dialog"` form submit). The shell never closes itself — state
+   * stays authoritative, so a host that ignores the callback keeps the
+   * dialog open (matching the pre-extraction per-dialog behavior).
+   */
+  readonly onOpenChange: (open: boolean) => void;
+  /** Max-width preset (default `"md"`). See {@link DialogShellWidth}. */
+  readonly width?: DialogShellWidth;
+  /**
+   * Modal (default) renders in the top layer via `showModal()` — focus trap,
+   * Escape, and the token backdrop. `modal={false}` renders the dialog
+   * in-flow (`open` attribute, relative positioning, no backdrop, no focus
+   * trap) — the channel-dialog embedding mode.
+   */
+  readonly modal?: boolean;
+  /**
+   * Light dismiss: a click on the backdrop (the dialog element itself —
+   * clicks inside the content land on descendants) reports close intent.
+   * The house rule from the pre-extraction census: read-only viewers
+   * (diff/YAML/explain/lightbox/pickers) dismiss on backdrop, form dialogs
+   * do NOT — a stray click must never discard a half-filled form. Default
+   * `false`.
+   */
+  readonly dismissOnBackdrop?: boolean;
+  /**
+   * Merged after the shell's own chrome, so deliberate outliers (a
+   * lightbox's viewport sizing, a fullscreen graph's `h-[90vh]`, a
+   * `bg-background` surface) override the defaults per class.
+   */
+  readonly className?: string;
+  /** Dialog content. Lazy-mounting bodies (`{open && …}`) stay caller-owned. */
+  readonly children: ReactNode;
+  /** Accessible name, when no visible heading labels the dialog. */
+  readonly "aria-label"?: string;
+  /** Id of the visible heading that labels the dialog. */
+  readonly "aria-labelledby"?: string;
+}
+
+/**
+ * The one dialog shell (stigmer#653). Owns everything every modal dialog in
+ * the SDK used to re-transcribe by hand: the `<dialog>` element and its
+ * `showModal()`/`close()` lifecycle, cancel/Escape wiring, the token
+ * backdrop (`--stgm-backdrop`), the open animation, and the base
+ * positioning/chrome — parameterized by {@link DialogShellWidth}.
+ *
+ * Converged chrome: `rounded-xl` + `shadow-xl` on the `popover` token
+ * surface (the token family for top-layer content). Before the extraction
+ * the 24 hand-rolled shells had drifted across `rounded-lg/xl`,
+ * `shadow-lg/xl/2xl`, three background tokens, two hardcoded backdrops that
+ * escaped the #652 fence, and animation classes present on some dialogs and
+ * missing from others.
+ *
+ * Internal on purpose — not exported from the package until a host needs it.
+ * The `stigmer/no-handrolled-dialog` lint rule fences new `<dialog>`
+ * elements onto this shell.
+ *
+ * @example
+ * ```tsx
+ * <DialogShell open={open} onOpenChange={setOpen} width="lg" aria-labelledby={titleId}>
+ *   {open && <MyDialogBody titleId={titleId} onClose={() => setOpen(false)} />}
+ * </DialogShell>
+ * ```
+ */
+export function DialogShell({
+  open,
+  onOpenChange,
+  width = "md",
+  modal = true,
+  dismissOnBackdrop = false,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+}: DialogShellProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  // Sync the native top-layer state to the controlled prop. Runs on mount
+  // too, so a shell mounted with `open` already true shows immediately.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || !modal) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open, modal]);
+
+  // Escape / platform cancel: keep the native dialog open (preventDefault)
+  // and report the intent — the controlled `open` prop then drives the
+  // actual close through the effect above.
+  const handleCancel = useCallback(
+    (e: SyntheticEvent<HTMLDialogElement>) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  // A native close the effect did not perform (e.g. a `method="dialog"`
+  // form submit) must not leave the controlled state stranded open.
+  const handleClose = useCallback(() => {
+    if (open) onOpenChange(false);
+  }, [open, onOpenChange]);
+
+  // Backdrop clicks hit the <dialog> element itself; clicks anywhere in the
+  // content land on a descendant, so the target check is exact.
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLDialogElement>) => {
+      if (e.target === e.currentTarget) onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  return (
+    <dialog
+      ref={dialogRef}
+      open={modal ? undefined : open || undefined}
+      onCancel={modal ? handleCancel : undefined}
+      onClose={modal ? handleClose : undefined}
+      onClick={modal && dismissOnBackdrop ? handleClick : undefined}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      className={cn(
+        "stg:w-full stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-xl",
+        modal
+          ? cn(
+              "stg:fixed stg:inset-0 stg:z-50 stg:m-auto",
+              "stg:backdrop:bg-backdrop",
+              "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
+            )
+          : "stg:relative",
+        WIDTH_CLASS[width],
+        className,
+      )}
+    >
+      {children}
+    </dialog>
+  );
+}

package/src/internal/SpinnerIcon.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@stigmer/theme";
+
+/**
+ * The SDK's canonical in-flight spinner: a three-quarter arc on a 16×16
+ * grid, colored by `currentColor` so the consumer's text token drives it
+ * (never hardcoded values — Dont-Do #3). Extracted from ~33 identical
+ * per-component copies (stigmer-cloud#270); new busy states import this
+ * instead of pasting another one.
+ *
+ * `size` is the rendered box; the glyph scales from the same viewBox, so
+ * every size renders the identical shape. Decorative by contract
+ * (`aria-hidden`) — pair it with visible or `sr-only` text when the busy
+ * state itself must be announced.
+ *
+ * The thread-card rows deliberately use a finer quarter-arc micro-glyph
+ * instead — see `internal/thread-card/glyphs.tsx`.
+ *
+ * @internal Not part of the public API.
+ */
+export function SpinnerIcon({
+  size = 16,
+  className,
+}: {
+  readonly size?: number;
+  readonly className?: string;
+} = {}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className={cn("stg:animate-spin", className)}
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/internal/__tests__/DialogShell.test.tsx

@@ -0,0 +1,223 @@
+/**
+ * DialogShell (stigmer#653): the one modal shell — showModal lifecycle,
+ * cancel/Escape wiring with state authority, native-close sync, the token
+ * backdrop + converged chrome, and the non-modal in-flow mode.
+ */
+
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, cleanup, fireEvent } from "@testing-library/react";
+import { DialogShell } from "../DialogShell";
+
+// happy-dom does not implement the native dialog show/close methods.
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(cleanup);
+
+function dialogOf(container: HTMLElement): HTMLDialogElement {
+  return container.querySelector("dialog")!;
+}
+
+describe("DialogShell lifecycle", () => {
+  it("opens via showModal when the controlled prop flips true", () => {
+    const { container, rerender } = render(
+      <DialogShell open={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(false);
+
+    rerender(
+      <DialogShell open onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("shows immediately when mounted already open", () => {
+    const { container } = render(
+      <DialogShell open onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("closes the native dialog when the controlled prop flips false", () => {
+    const { container, rerender } = render(
+      <DialogShell open onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    rerender(
+      <DialogShell open={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(false);
+  });
+
+  it("Escape/cancel reports intent but never closes on its own — state stays authoritative", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent(dialogOf(container), new Event("cancel", { cancelable: true }));
+
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+    // The shell prevented the native close; the dialog stays open until the
+    // host flips the prop.
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("syncs the controlled state when something else closes the dialog natively", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    // e.g. a method="dialog" form submit closes without going through props.
+    const dialog = dialogOf(container);
+    dialog.close();
+    fireEvent(dialog, new Event("close"));
+
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it("does not re-report a close the host itself drove", () => {
+    const onOpenChange = vi.fn();
+    const { container, rerender } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    rerender(
+      <DialogShell open={false} onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    // The effect's own dialog.close() fires a native close event in real
+    // browsers — replay it against the now-false prop.
+    fireEvent(dialogOf(container), new Event("close"));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DialogShell chrome", () => {
+  it("carries the token backdrop, animation, positioning, and width preset", () => {
+    const { container } = render(
+      <DialogShell open onOpenChange={() => {}} width="3xl">
+        <p>body</p>
+      </DialogShell>,
+    );
+    const cls = dialogOf(container).className;
+
+    expect(cls).toContain("stg:backdrop:bg-backdrop");
+    expect(cls).toContain("stg:open:animate-in");
+    expect(cls).toContain("stg:fixed");
+    expect(cls).toContain("stg:m-auto");
+    expect(cls).toContain("stg:max-w-3xl");
+    expect(cls).toContain("stg:bg-popover");
+  });
+
+  it("className overrides the shell's own chrome per class (tailwind-merge)", () => {
+    const { container } = render(
+      <DialogShell
+        open
+        onOpenChange={() => {}}
+        className="stg:bg-background stg:max-w-[85vw]"
+      >
+        <p>body</p>
+      </DialogShell>,
+    );
+    const cls = dialogOf(container).className;
+
+    expect(cls).toContain("stg:bg-background");
+    expect(cls).not.toContain("stg:bg-popover");
+    expect(cls).toContain("stg:max-w-[85vw]");
+    expect(cls).not.toContain("stg:max-w-md");
+  });
+
+  it("labels the dialog for assistive tech", () => {
+    const { container } = render(
+      <DialogShell open onOpenChange={() => {}} aria-label="Confirm delete">
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).getAttribute("aria-label")).toBe("Confirm delete");
+  });
+});
+
+describe("DialogShell backdrop dismiss", () => {
+  it("dismissOnBackdrop: a click on the dialog element itself reports close intent", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange} dismissOnBackdrop>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent.click(dialogOf(container));
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it("dismissOnBackdrop: clicks on content descendants never dismiss", () => {
+    const onOpenChange = vi.fn();
+    const { container, getByText } = render(
+      <DialogShell open onOpenChange={onOpenChange} dismissOnBackdrop>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent.click(getByText("body"));
+    expect(onOpenChange).not.toHaveBeenCalled();
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("default: backdrop clicks are inert (form dialogs)", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent.click(dialogOf(container));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DialogShell non-modal mode", () => {
+  it("renders in-flow: open attribute, no backdrop, no fixed positioning", () => {
+    const { container, rerender } = render(
+      <DialogShell open modal={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    const dialog = dialogOf(container);
+
+    expect(dialog.open).toBe(true);
+    expect(dialog.className).toContain("stg:relative");
+    expect(dialog.className).not.toContain("stg:backdrop:bg-backdrop");
+    expect(dialog.className).not.toContain("stg:fixed");
+
+    rerender(
+      <DialogShell open={false} modal={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(false);
+  });
+});

package/src/internal/__tests__/ThreadCardShell.test.tsx

@@ -1,9 +1,9 @@
 // Contract tests for the shared thread-card shell (T05/T06): the chrome
-// axes (bordered vs divider row, gate accent), the header gestures
-// (`expand` / `none` — `select` died with the Inspect drill-down, T06)
-// with their ARIA semantics, and the nested-button keydown guard. The two
-// consuming threads pin their own compositions; this file pins what they
-// share.
+// tiers (card / nested divider row / quiet unboxed line, gate accent), the
+// header gestures (`expand` / `none` — `select` died with the Inspect
+// drill-down, T06) with their ARIA semantics, and the nested-button keydown
+// guard. The two consuming threads pin their own compositions; this file
+// pins what they share.
 
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
@@ -16,7 +16,7 @@ import {
 afterEach(cleanup);
 
 describe("ThreadCardShell chrome", () => {
-  it("renders a bordered card by default and a divider row when nested", () => {
+  it("renders a bordered card by default, a divider row when nested, and no chrome when quiet", () => {
     const { rerender, container } = render(
       <ThreadCardShell cursorTarget="row">
         <ThreadCardHeader>content</ThreadCardHeader>
@@ -27,12 +27,22 @@ describe("ThreadCardShell chrome", () => {
     expect(root().className).toContain("stg:border-border-prominent");
 
     rerender(
-      <ThreadCardShell cursorTarget="row" bordered={false}>
+      <ThreadCardShell cursorTarget="row" variant="row">
         <ThreadCardHeader>content</ThreadCardHeader>
       </ThreadCardShell>,
     );
     expect(root().className).toContain("stg:border-b");
     expect(root().className).not.toContain("stg:border-border-prominent");
+
+    rerender(
+      <ThreadCardShell cursorTarget="row" variant="quiet">
+        <ThreadCardHeader>content</ThreadCardHeader>
+      </ThreadCardShell>,
+    );
+    // The quiet tier is an unboxed line: no card border, no divider.
+    expect(root().className).not.toContain("stg:border-border-prominent");
+    expect(root().className).not.toContain("stg:border-b");
+    expect(root().className).not.toContain("stg:rounded-lg");
   });
 
   it("carries the gate accent", () => {
@@ -44,6 +54,19 @@ describe("ThreadCardShell chrome", () => {
     const root = container.querySelector('[data-cursor-target="row"]') as HTMLElement;
     expect(root.className).toContain("stg:border-l-warning");
   });
+
+  it("never draws the gate accent on a quiet shell — escalation is the caller's job", () => {
+    // The quiet tier deliberately ignores `accent`: a gated row must be
+    // escalated to variant="card" by its component, never rendered as an
+    // accented bare line (see ThreadCardVariant).
+    const { container } = render(
+      <ThreadCardShell cursorTarget="row" variant="quiet" accent="warning">
+        <ThreadCardHeader>content</ThreadCardHeader>
+      </ThreadCardShell>,
+    );
+    const root = container.querySelector('[data-cursor-target="row"]') as HTMLElement;
+    expect(root.className).not.toContain("stg:border-l-warning");
+  });
 });
 
 describe("ThreadCardHeader gestures", () => {
@@ -102,4 +125,17 @@ describe("ThreadCardBody", () => {
     render(<ThreadCardBody id="detail-1">body</ThreadCardBody>);
     expect(document.getElementById("detail-1")?.textContent).toBe("body");
   });
+
+  it("swaps the card padding for a left rail when the body is quiet-contained", () => {
+    const { rerender } = render(<ThreadCardBody id="detail-1">body</ThreadCardBody>);
+    const el = () => document.getElementById("detail-1")!;
+    expect(el().className).not.toContain("stg:border-l-2");
+
+    rerender(
+      <ThreadCardBody id="detail-1" rail>
+        body
+      </ThreadCardBody>,
+    );
+    expect(el().className).toContain("stg:border-l-2");
+  });
 });