@stigmer/react 3.1.16 → 3.2.0

package/src/execution/FileChangesView.tsx

@@ -14,6 +14,7 @@ import { DiffFileList } from "../version-history/DiffFileList.js";
 import { DiffSummary } from "../version-history/DiffSummary.js";
 import { UnifiedDiffView } from "../version-history/UnifiedDiffView.js";
 import type { DiffHunk, FileDiffEntry } from "../version-history/types.js";
+import { countHunks, toFileDiffEntry } from "./deriveExecutionFileChanges.js";
 import { FilePathLink } from "./FilePathLink.js";
 import { EmptyChangeNotice } from "./EmptyChangeNotice.js";
 import { useFileChangeContent } from "./useFileChangeContent.js";
@@ -326,72 +327,6 @@ function Notice({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function countHunks(hunks: readonly DiffHunk[]): {
-  additions: number;
-  deletions: number;
-} {
-  let additions = 0;
-  let deletions = 0;
-  for (const hunk of hunks) {
-    for (const line of hunk.lines) {
-      if (line.type === "added") additions++;
-      else if (line.type === "removed") deletions++;
-    }
-  }
-  return { additions, deletions };
-}
-
-/**
- * Projects a {@link FileChange} into a {@link FileDiffEntry} for the file list.
- *
- * Counts: hunk-only uses the runner's authoritative numbers; whole-file inline
- * is derived from the content (identical to the runner's capture-time counts by
- * construction — same diff algorithm). A whole-file side with no synchronous
- * content (offloaded / binary) falls back to the runner's capture-time
- * `linesAdded`/`linesRemoved` — zero when no count exists, which the list
- * renders as no stat.
- */
-function toFileDiffEntry(change: FileChange): FileDiffEntry {
-  const changeType =
-    change.changeType === FileChangeType.CREATE
-      ? "added"
-      : change.changeType === FileChangeType.DELETE
-        ? "removed"
-        : "modified";
-
-  if (change.captureLevel === FileChangeCaptureLevel.HUNK_ONLY) {
-    return {
-      path: change.path,
-      changeType,
-      additions: change.linesAdded,
-      deletions: change.linesRemoved,
-    };
-  }
-
-  const before = inlineSide(change.before);
-  const after = inlineSide(change.after);
-  if (before !== null && after !== null) {
-    const { additions, deletions } = countHunks(computeDiff(before, after));
-    return { path: change.path, changeType, additions, deletions };
-  }
-
-  return {
-    path: change.path,
-    changeType,
-    additions: change.linesAdded,
-    deletions: change.linesRemoved,
-  };
-}
-
-/** Inline text of a side, or null when absent/offloaded/binary. */
-function inlineSide(
-  side: FileChange["before"],
-): string | null {
-  if (!side) return "";
-  if (side.isBinary) return null;
-  return side.body.case === "inline" ? side.body.value : null;
-}
+// countHunks / toFileDiffEntry moved to deriveExecutionFileChanges.ts — shared
+// with the workflow panel's Changes facet, which projects the same net
+// FileChange list into its rail file list.

package/src/execution/SubAgentSection.tsx

@@ -17,7 +17,6 @@ import { MessageEntry } from "./MessageEntry.js";
 import { ToolCallGroup } from "./ToolCallGroup.js";
 import { ApprovalContext } from "./ApprovalContext.js";
 import { isInternalTool } from "./tool-categories.js";
-import { useThreadSelection } from "./useThreadSelection.js";
 import {
   TodoList,
   TodoInProgressIcon,
@@ -86,14 +85,9 @@ export const SubAgentSection = memo(function SubAgentSection({
   const StatusIcon = statusInfo.icon;
   const isFailed = sub.status === SubAgentStatus.SUB_AGENT_FAILED;
   const threadItems = buildSubAgentThreadItems(sub.id, sub.messages);
-  const selection = useThreadSelection("sub-agent", sub.id);
 
   const displayLabel = sub.subject || sub.name;
 
-  const selectionClassName = selection?.isSelected
-    ? "ring-1 ring-primary/40"
-    : undefined;
-
   if (!collapsible) {
     return (
       <FlatContent
@@ -103,7 +97,7 @@ export const SubAgentSection = memo(function SubAgentSection({
         duration={duration}
         isFailed={isFailed}
         threadItems={threadItems}
-        className={cn(selectionClassName, className)}
+        className={className}
       />
     );
   }
@@ -116,8 +110,7 @@ export const SubAgentSection = memo(function SubAgentSection({
       duration={duration}
       isFailed={isFailed}
       threadItems={threadItems}
-      selection={selection}
-      className={cn(selectionClassName, className)}
+      className={className}
     />
   );
 });
@@ -133,7 +126,6 @@ interface CollapsibleCardProps {
   readonly duration: string | null;
   readonly isFailed: boolean;
   readonly threadItems: SubAgentThreadItem[];
-  readonly selection?: { readonly isSelected: boolean; readonly select: () => void } | null;
   readonly className?: string;
 }
 
@@ -144,7 +136,6 @@ function CollapsibleCard({
   duration,
   isFailed,
   threadItems,
-  selection,
   className,
 }: CollapsibleCardProps) {
   const hasTodos =
@@ -235,23 +226,6 @@ function CollapsibleCard({
             </span>
           )
         )}
-        {selection && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              selection.select();
-            }}
-            className={cn(
-              "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
-              selection.isSelected && "text-primary",
-            )}
-            aria-label="Inspect sub-agent"
-            aria-pressed={selection.isSelected}
-          >
-            <SubAgentInspectIcon />
-          </button>
-        )}
         <ChevronIcon expanded={expanded} />
       </button>
 
@@ -632,14 +606,6 @@ function BotIcon() {
   );
 }
 
-function SubAgentInspectIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="5.5" cy="5.5" r="3.5" />
-      <path d="M8 8L10.5 10.5" />
-    </svg>
-  );
-}
 
 function ChevronIcon({ expanded }: { expanded: boolean }) {
   return (

package/src/execution/ToolCallItem.tsx

@@ -11,6 +11,17 @@ import { cn } from "@stigmer/theme";
 import { useRenderTracer } from "../internal/dev/index.js";
 import { useAutoDisclosure } from "../internal/useAutoDisclosure.js";
 import { useIsTextTruncated } from "../internal/useIsTextTruncated.js";
+import {
+  ThreadCardShell,
+  ThreadCardHeader,
+  ThreadCardBody,
+  SpinnerIcon,
+  ClockIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  DotIcon,
+  SlashCircleIcon,
+} from "../internal/thread-card/index.js";
 import { ToolCallDetail, formatDuration } from "./ToolCallDetail.js";
 import { SubAgentSection } from "./SubAgentSection.js";
 import { ApprovalCardBody } from "./ApprovalCard.js";
@@ -20,7 +31,6 @@ import type { FileReviewRowState } from "./file-review-status.js";
 import { FilePathLink } from "./FilePathLink.js";
 import { isFileCategory, type ToolCategory } from "./tool-categories.js";
 import { useToolPresentation } from "./tool-presenter.js";
-import { useThreadSelection } from "./useThreadSelection.js";
 
 /** Props for {@link ToolCallItem}. */
 export interface ToolCallItemProps {
@@ -135,8 +145,6 @@ export const ToolCallItem = memo(function ToolCallItem({
   const reviewState = useFileReviewRowState(toolCall.fileChangeSetId, primaryArg);
   const reviewBadge = reviewState ? REVIEW_BADGE[reviewState] : null;
 
-  const selection = useThreadSelection("tool-call", toolCall.id);
-
   // Search/list show their query/path as the header subtitle (truncated). Track
   // whether it actually clips so the expanded detail can restate the full,
   // wrapping value only when needed — avoiding a redundant repeat of a short
@@ -146,28 +154,15 @@ export const ToolCallItem = memo(function ToolCallItem({
   const { ref: subtitleRef, isTruncated: primaryArgTruncated } =
     useIsTextTruncated<HTMLSpanElement>(measuresSubtitle);
 
-  // Cursor-style chrome: each tool call is its own self-contained card — a thin
-  // rounded neutral border. A pending gate carries a restrained left accent on
-  // the card itself (warning, or destructive for a delete); that accent is the
-  // only "awaiting you" cue now that the amber fill is gone. Nested inside a
-  // folded run chip the card degrades to a divider-separated row (via
-  // `bordered={false}`) so we never draw a card inside a card.
-  const cardClass = bordered
-    ? cn(
-        // border-prominent (not border): a transparent card needs a line the eye
-        // actually catches — the default border token is white at 14% opacity,
-        // which vanishes on the dark thread surface.
-        "rounded-lg border border-border-prominent overflow-hidden",
-        approval != null &&
-          (category === "delete"
-            ? "border-l-2 border-l-destructive"
-            : "border-l-2 border-l-warning"),
-        selection?.isSelected && "ring-1 ring-primary/40",
-      )
-    : cn(
-        "border-b border-border-muted last:border-b-0",
-        selection?.isSelected && "ring-1 ring-primary/40 rounded-sm",
-      );
+  // Cursor-style chrome via the shared ThreadCardShell (T05): each tool call
+  // is its own self-contained card — a thin rounded neutral border. A pending
+  // gate carries a restrained left accent on the card itself (warning, or
+  // destructive for a delete); that accent is the only "awaiting you" cue now
+  // that the amber fill is gone. Nested inside a folded run chip the card
+  // degrades to a divider-separated row (via `bordered={false}`) so we never
+  // draw a card inside a card.
+  const gateAccent =
+    approval != null ? (category === "delete" ? "destructive" : "warning") : null;
 
   // Completed/skipped Read items are non-expandable — the clickable
   // path in the row is the complete information. Failed reads remain
@@ -221,36 +216,18 @@ export const ToolCallItem = memo(function ToolCallItem({
           {duration}
         </span>
       )}
-
-      {selection && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            selection.select();
-          }}
-          className={cn(
-            "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
-            selection.isSelected && "text-primary",
-          )}
-          aria-label="Inspect tool call"
-          aria-pressed={selection.isSelected}
-        >
-          <InspectIcon />
-        </button>
-      )}
     </>
   );
 
   if (isNonExpandableRead) {
     return (
-      <div
-        data-cursor-target="tool-call-row"
-        className={cn(cardClass, className)}
+      <ThreadCardShell
+        bordered={bordered}
+        accent={gateAccent}
+        cursorTarget="tool-call-row"
+        className={className}
       >
-        <div
-          className="flex w-full items-center gap-2 px-2.5 py-1.5 text-xs"
-        >
+        <ThreadCardHeader>
           <span className="shrink-0 text-muted-foreground" aria-hidden="true">
             <CategoryIcon />
           </span>
@@ -265,8 +242,8 @@ export const ToolCallItem = memo(function ToolCallItem({
           </span>
 
           {trailingContent}
-        </div>
-      </div>
+        </ThreadCardHeader>
+      </ThreadCardShell>
     );
   }
 
@@ -357,56 +334,36 @@ export const ToolCallItem = memo(function ToolCallItem({
   if (isPreviewCategory) {
     const showBody = approval != null || result.type !== "empty";
     return (
-      <div
-        data-cursor-target="tool-call-row"
-        className={cn(cardClass, className)}
+      <ThreadCardShell
+        bordered={bordered}
+        accent={gateAccent}
+        cursorTarget="tool-call-row"
+        className={className}
       >
-        <div className="flex w-full items-center gap-2 px-2.5 py-1.5 text-xs">
-          {headerInner}
-        </div>
+        <ThreadCardHeader>{headerInner}</ThreadCardHeader>
         {showBody && (
-          <div className="px-2.5 pb-2.5 pt-1" data-cursor-target="tool-preview">
-            {body}
-          </div>
+          <ThreadCardBody cursorTarget="tool-preview">{body}</ThreadCardBody>
         )}
-      </div>
+      </ThreadCardShell>
     );
   }
 
   // Summary / sub-agent layout: a chevron-gated header disclosing a body hidden
-  // by default. The header is a div[role=button], not a <button>, because it
-  // carries the nested "Inspect tool call" <button> (a <button> may not contain
-  // another); Enter/Space drive the toggle for keyboard parity.
+  // by default. The shell's `expand` gesture renders the div[role=button]
+  // header with Enter/Space keyboard parity and the chevron.
   return (
-    <div
-      data-cursor-target="tool-call-row"
-      className={cn(cardClass, className)}
+    <ThreadCardShell
+      bordered={bordered}
+      accent={gateAccent}
+      cursorTarget="tool-call-row"
+      className={className}
     >
-      <div
-        role="button"
-        tabIndex={0}
-        aria-expanded={expanded}
-        onClick={handleToggle}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleToggle();
-          }
-        }}
-        className={cn(
-          "flex w-full cursor-pointer items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors",
-          "hover:bg-muted-subtle",
-          // ring-inset so the card's overflow-hidden does not clip the focus ring.
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          expanded && "bg-muted-faint",
-        )}
-      >
+      <ThreadCardHeader gesture={{ kind: "expand", expanded, onToggle: handleToggle }}>
         {headerInner}
-        <ChevronIcon expanded={expanded} />
-      </div>
+      </ThreadCardHeader>
 
-      {expanded && <div className="px-2.5 pb-2.5 pt-1">{body}</div>}
-    </div>
+      {expanded && <ThreadCardBody>{body}</ThreadCardBody>}
+    </ThreadCardShell>
   );
 });
 
@@ -624,7 +581,7 @@ function McpPlugIcon() {
 }
 
 // ---------------------------------------------------------------------------
-// Status icons
+// Status icons — the shared thread-card glyph set (T05)
 // ---------------------------------------------------------------------------
 
 const STATUS_ICON: Record<ItemStatus, () => React.JSX.Element> = {
@@ -635,87 +592,3 @@ const STATUS_ICON: Record<ItemStatus, () => React.JSX.Element> = {
   pending: DotIcon,
   interrupted: SlashCircleIcon,
 };
-
-function SpinnerIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="animate-spin">
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function ClockIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M6 3.5V6L7.5 7.5" />
-    </svg>
-  );
-}
-
-function CheckCircleIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M4 6L5.5 7.5L8 4.5" />
-    </svg>
-  );
-}
-
-function XCircleIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M4.5 4.5L7.5 7.5M7.5 4.5L4.5 7.5" />
-    </svg>
-  );
-}
-
-function DotIcon() {
-  return (
-    <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
-      <circle cx="4" cy="4" r="2.5" />
-    </svg>
-  );
-}
-
-/** Slashed circle for an interrupted call — settled, neutral, visibly "cut short". */
-function SlashCircleIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M2.8 9.2L9.2 2.8" />
-    </svg>
-  );
-}
-
-function InspectIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="5.5" cy="5.5" r="3.5" />
-      <path d="M8 8L10.5 10.5" />
-    </svg>
-  );
-}
-
-function ChevronIcon({ expanded }: { expanded: boolean }) {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
-      )}
-      aria-hidden="true"
-    >
-      <path d="M3.5 2L6.5 5L3.5 8" />
-    </svg>
-  );
-}

package/src/execution/__tests__/ArtifactFileContent.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { ArtifactFileContent } from "../ArtifactFileContent";
+
+function renderContent(
+  overrides: Partial<React.ComponentProps<typeof ArtifactFileContent>> = {},
+) {
+  return render(
+    <ArtifactFileContent
+      fileName="notes.txt"
+      content={null}
+      contentType={null}
+      isLoading={false}
+      error={null}
+      isTruncated={false}
+      {...overrides}
+    />,
+  );
+}
+
+afterEach(cleanup);
+
+describe("ArtifactFileContent — state machine", () => {
+  it("shows the loading skeleton while the fetch is in flight", () => {
+    renderContent({ isLoading: true });
+    expect(screen.getByLabelText("Loading content")).toBeTruthy();
+  });
+
+  it("shows the error message when the fetch failed", () => {
+    renderContent({ error: new Error("storage unreachable") });
+    expect(screen.getByText("storage unreachable")).toBeTruthy();
+  });
+
+  it("shows the honest unavailable state for null content (binary / unfetched)", () => {
+    renderContent({ content: null });
+    expect(screen.getByText("Content not available for preview.")).toBeTruthy();
+  });
+
+  it("renders text content through the shared renderer", () => {
+    renderContent({ content: "hello world", contentType: "text/plain" });
+    expect(screen.getByText("hello world")).toBeTruthy();
+  });
+
+  it("surfaces the truncation notice for truncated content", () => {
+    renderContent({
+      content: "partial…",
+      contentType: "text/plain",
+      isTruncated: true,
+    });
+    // ArtifactContentRenderer owns the truncation copy; assert its presence
+    // rather than exact wording so this test tracks behavior, not prose.
+    expect(screen.getByText(/truncated/i)).toBeTruthy();
+  });
+
+  it("loading wins over stale content (no content flash during refetch)", () => {
+    renderContent({ content: "old body", isLoading: true });
+    expect(screen.getByLabelText("Loading content")).toBeTruthy();
+    expect(screen.queryByText("old body")).toBeNull();
+  });
+});

package/src/execution/__tests__/ArtifactRowView.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ArtifactRowView } from "../ArtifactRowView";
+import type { ArtifactRowItem } from "../artifact-row-item";
+
+const fileItem: ArtifactRowItem = {
+  name: "report.json",
+  tooltip: "report.json",
+  subtitlePath: null,
+  sizeBytes: 2048n,
+  isDirectory: false,
+};
+
+function renderView(
+  overrides: Partial<React.ComponentProps<typeof ArtifactRowView>> = {},
+) {
+  const props = {
+    item: fileItem,
+    onOpen: vi.fn(),
+    onDownload: vi.fn(),
+    isDownloading: false,
+    ...overrides,
+  };
+  render(
+    <ul>
+      <ArtifactRowView {...props} />
+    </ul>,
+  );
+  return props;
+}
+
+afterEach(cleanup);
+
+describe("ArtifactRowView — the shared row primitive", () => {
+  it("renders name, formatted size, and a file-type icon", () => {
+    renderView();
+    const open = screen.getByText("report.json").closest("button")!;
+    expect(open.querySelector("svg")).toBeTruthy();
+    expect(screen.getByText("2.0 KB")).toBeTruthy();
+  });
+
+  it("renders the disambiguation subtitle when present", () => {
+    renderView({ item: { ...fileItem, subtitlePath: "analyze_code" } });
+    expect(screen.getByText("analyze_code")).toBeTruthy();
+  });
+
+  it("keeps Download a SIBLING of the open button (WCAG 4.1.2)", () => {
+    renderView();
+    const open = screen.getByText("report.json").closest("button")!;
+    const download = screen.getByLabelText("Download report.json");
+    expect(download.tagName).toBe("BUTTON");
+    expect(open.contains(download)).toBe(false);
+  });
+
+  it("wires open (click), activate (double-click), and download", () => {
+    const props = renderView({ onActivate: vi.fn() });
+    fireEvent.click(screen.getByText("report.json"));
+    expect(props.onOpen).toHaveBeenCalledTimes(1);
+    fireEvent.doubleClick(screen.getByText("report.json"));
+    expect(props.onActivate).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByLabelText("Download report.json"));
+    expect(props.onDownload).toHaveBeenCalledTimes(1);
+  });
+
+  it("disables Download while a download is in flight", () => {
+    renderView({ isDownloading: true });
+    const download = screen.getByLabelText("Preparing report.json");
+    expect((download as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("renders directory affordances (slash suffix, ZIP download title)", () => {
+    renderView({
+      item: { ...fileItem, name: "bundle", tooltip: "bundle", isDirectory: true },
+    });
+    expect(screen.getByText("bundle/")).toBeTruthy();
+    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+  });
+});

package/src/execution/__tests__/agent-execution-document.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest";
+import {
+  AGENT_EXECUTION_DOCUMENT_ENTRY_ID,
+  agentExecutionTabPath,
+  parseAgentExecutionTabPath,
+} from "../agent-execution-document";
+import { ARTIFACT_DOCUMENT_ENTRY_ID } from "../artifact-document";
+import { FILE_CHANGE_DOCUMENT_ENTRY_ID } from "../file-change-document";
+
+describe("agent-execution-document identity", () => {
+  it("has a distinct family id from the other virtual-document families", () => {
+    expect(AGENT_EXECUTION_DOCUMENT_ENTRY_ID).not.toBe(ARTIFACT_DOCUMENT_ENTRY_ID);
+    expect(AGENT_EXECUTION_DOCUMENT_ENTRY_ID).not.toBe(FILE_CHANGE_DOCUMENT_ENTRY_ID);
+    // NUL-namespaced so it can never alias a real workspace entry id.
+    expect(AGENT_EXECUTION_DOCUMENT_ENTRY_ID.startsWith("\u0000")).toBe(true);
+  });
+
+  it("labels the tab with the task name (path basename)", () => {
+    const path = agentExecutionTabPath("aex_abc123", "summarize-report");
+    expect(path).toBe("aex_abc123/summarize-report");
+    expect(path.split("/").pop()).toBe("summarize-report");
+  });
+
+  it("round-trips the child execution id", () => {
+    const path = agentExecutionTabPath("aex_abc123", "summarize-report");
+    expect(parseAgentExecutionTabPath(path)).toBe("aex_abc123");
+  });
+
+  it("round-trips the id when the task name itself contains a separator", () => {
+    const path = agentExecutionTabPath("aex_abc123", "stage/publish");
+    expect(parseAgentExecutionTabPath(path)).toBe("aex_abc123");
+  });
+
+  it("keeps two calls to the same agent distinct (per-child identity)", () => {
+    const first = agentExecutionTabPath("aex_1", "call-agent");
+    const second = agentExecutionTabPath("aex_2", "call-agent");
+    expect(first).not.toBe(second);
+    expect(parseAgentExecutionTabPath(first)).toBe("aex_1");
+    expect(parseAgentExecutionTabPath(second)).toBe("aex_2");
+  });
+
+  it("degrades to the whole path when no separator is present", () => {
+    expect(parseAgentExecutionTabPath("aex_bare")).toBe("aex_bare");
+  });
+});