@stigmer/react 3.2.2 → 3.3.0

package/src/workflow/WorkflowExecutionViewer.tsx

@@ -27,15 +27,7 @@ import {
   FILE_CHANGE_DOCUMENT_ENTRY_ID,
   fileChangeTabPath,
 } from "../execution/file-change-document.js";
-import {
-  AGENT_EXECUTION_DOCUMENT_ENTRY_ID,
-  parseAgentExecutionTabPath,
-} from "../execution/agent-execution-document.js";
 import { FileChangeDiff } from "../execution/FileChangesView.js";
-import {
-  WorkflowAgentExecutionDocument,
-  type WorkflowAgentExecutionHitl,
-} from "./WorkflowAgentExecutionDocument.js";
 import {
   WorkspaceSurface,
   type SurfaceVirtualDocument,
@@ -281,14 +273,15 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
     onSuccess: refetchExecution,
   });
 
-  // The child-gate HITL wiring — ONE bundle from the single actions
-  // instance, narrowed to the six child-gate fields, consumed by the
-  // in-place transcript documents (S5, as `WorkflowAgentExecutionHitl`), so
-  // a gate's spinner/error is pixel-identical on every surface. Deps are
-  // the individual fields (DD-010): the bundle's ref must survive unrelated
-  // churn on `actions` (a lifecycle action's isSubmitting flip), so
-  // consumers re-render only when a gate's own in-flight/error state moves.
-  const childGateHitl = useMemo<WorkflowAgentExecutionHitl>(
+  // The thread's HITL bundle (T06/T07) — ONE bundle from the single actions
+  // instance, covering all three gate kinds: the child-gate fields (which
+  // the thread hands to gating agent-call cards' inline transcripts, as the
+  // `WorkflowAgentExecutionHitl` subset) plus the task-level (human_input)
+  // approval wiring. Deps are the individual fields (DD-010): the bundle's
+  // ref must survive unrelated churn on `actions` (a lifecycle action's
+  // isSubmitting flip), and the thread scopes it to gating cards, so a
+  // decision's in-flight flip re-renders the gating card only.
+  const threadHitl = useMemo<WorkflowThreadHitl>(
     () => ({
       submitApproval: actions.submitApproval,
       approvalSubmittingToolCallIds: actions.approvalSubmittingToolCallIds,
@@ -296,6 +289,9 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
       submitFileDecision: actions.submitFileDecision,
       fileDecisionSubmittingKeys: actions.fileDecisionSubmittingKeys,
       fileDecisionErrorsByKey: actions.fileDecisionErrorsByKey,
+      submitTaskApproval: actions.submitTaskApproval,
+      taskApprovalSubmittingTaskNames: actions.taskApprovalSubmittingTaskNames,
+      taskApprovalErrorsByTaskName: actions.taskApprovalErrorsByTaskName,
     }),
     [
       actions.submitApproval,
@@ -304,24 +300,6 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
       actions.submitFileDecision,
       actions.fileDecisionSubmittingKeys,
       actions.fileDecisionErrorsByKey,
-    ],
-  );
-
-  // The thread's HITL bundle (T06): the child-gate fields PLUS the
-  // task-level (human_input) approval wiring — since the gating card is
-  // the only decision surface, the thread carries all three gate kinds.
-  // A separate memo from `childGateHitl` so a human_input decision's
-  // in-flight flip re-renders the gating card, never the open transcript
-  // documents (DD-010).
-  const threadHitl = useMemo<WorkflowThreadHitl>(
-    () => ({
-      ...childGateHitl,
-      submitTaskApproval: actions.submitTaskApproval,
-      taskApprovalSubmittingTaskNames: actions.taskApprovalSubmittingTaskNames,
-      taskApprovalErrorsByTaskName: actions.taskApprovalErrorsByTaskName,
-    }),
-    [
-      childGateHitl,
       actions.submitTaskApproval,
       actions.taskApprovalSubmittingTaskNames,
       actions.taskApprovalErrorsByTaskName,
@@ -586,13 +564,12 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
             taskStates={effectiveTaskStates}
             totalTasks={effectiveTotalTasks}
             isRunning={isRunning}
-            onOpenAgentExecution={panel.openAgentExecution}
-            // In-card HITL (S10/T06): all three gate kinds decide on the
-            // gating card, backed by the snapshot gate lists (kept fresh
-            // by the approval boundary's refetch above).
+            onNavigateToAgentExecution={onNavigateToAgentExecution}
+            // In-card HITL (S10/T06/T07): all three gate kinds decide on
+            // the gating card — human_input on the card itself, child tool
+            // approvals and file reviews inside the card's inline child
+            // transcript (which streams them from the child directly).
             hitl={threadHitl}
-            pendingApprovals={execution?.status?.pendingApprovals}
-            pendingFileReviews={execution?.status?.pendingFileReviews}
             // Full per-task I/O for the card bodies (T04) — an O(1)
             // per-card snapshot lookup.
             taskSnapshotsByName={taskSnapshotsByName}
@@ -632,9 +609,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
               fileChangesState={fileChangesState}
               costSummary={costSummary}
               taskStates={effectiveTaskStates}
-              onNavigateToAgentExecution={onNavigateToAgentExecution}
               onApplyFix={onNavigateToWorkflowEditor ? handleApplyFix : undefined}
-              transcriptHitl={childGateHitl}
             />
           ) : null
         }
@@ -654,8 +629,9 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
  * open-editor group (keeping that subscription out of the streaming owner),
  * assembles the rail facets, and resolves open virtual-document tabs back to
  * their records (artifact tabs → `Artifact`, file-change tabs → the current
- * net `FileChange`, transcript tabs → their child id, the diagnosis tab →
- * `WorkflowRepairCard`).
+ * net `FileChange`, the diagnosis tab → `WorkflowRepairCard`). Child
+ * transcripts are NOT a document family here — since T07 they render inline
+ * in the thread's agent-call cards.
  */
 function ExecutionWorkspacePanel({
   panel,
@@ -665,9 +641,7 @@ function ExecutionWorkspacePanel({
   fileChangesState,
   costSummary,
   taskStates,
-  onNavigateToAgentExecution,
   onApplyFix,
-  transcriptHitl,
 }: {
   readonly panel: WorkflowExecutionPanelController;
   readonly executionId: string;
@@ -676,11 +650,8 @@ function ExecutionWorkspacePanel({
   readonly fileChangesState: UseWorkflowExecutionFileChangesReturn;
   readonly costSummary: DerivedCostSummary;
   readonly taskStates: ReadonlyMap<string, DerivedTaskState>;
-  readonly onNavigateToAgentExecution?: (agentExecutionId: string) => void;
   /** "Apply Fix" from the diagnosis document — host-routed (DD-004). */
   readonly onApplyFix?: (yaml: string) => void;
-  /** Workflow-level HITL wiring for open transcript documents (S5). */
-  readonly transcriptHitl: WorkflowAgentExecutionHitl;
 }) {
   const { editors, activeFile } = useWorkspaceEditors(panel.editorsStore);
 
@@ -732,7 +703,6 @@ function ExecutionWorkspacePanel({
           (editor) =>
             editor.entryId === ARTIFACT_DOCUMENT_ENTRY_ID ||
             editor.entryId === FILE_CHANGE_DOCUMENT_ENTRY_ID ||
-            editor.entryId === AGENT_EXECUTION_DOCUMENT_ENTRY_ID ||
             editor.entryId === DIAGNOSIS_DOCUMENT_ENTRY_ID,
         )
         .map((editor) => {
@@ -761,30 +731,6 @@ function ExecutionWorkspacePanel({
               ),
             };
           }
-          if (editor.entryId === AGENT_EXECUTION_DOCUMENT_ENTRY_ID) {
-            // The tab path CARRIES the child id (no lookup map — unlike the
-            // artifact/change families, a transcript needs only its id to
-            // fetch/stream itself). The suffix is the AGENT_CALL task name;
-            // its live state provides the agent slug for the header.
-            const childExecutionId = parseAgentExecutionTabPath(editor.path);
-            const taskName = editor.path.slice(childExecutionId.length + 1);
-            return {
-              entryId: AGENT_EXECUTION_DOCUMENT_ENTRY_ID,
-              path: editor.path,
-              // Keyed by tab path so the mounted fetch/stream survives
-              // unrelated editors churn while this tab stays active.
-              content: (
-                <WorkflowAgentExecutionDocument
-                  key={editor.path}
-                  childExecutionId={childExecutionId}
-                  taskName={taskName}
-                  agentSlug={taskStates.get(taskName)?.agentSlug || undefined}
-                  onNavigateToAgentExecution={onNavigateToAgentExecution}
-                  hitl={transcriptHitl}
-                />
-              ),
-            };
-          }
           if (editor.entryId === FILE_CHANGE_DOCUMENT_ENTRY_ID) {
             const change = fileChangeByTabPath.get(editor.path);
             return {
@@ -814,9 +760,6 @@ function ExecutionWorkspacePanel({
       editors,
       artifactByTabPath,
       fileChangeByTabPath,
-      taskStates,
-      onNavigateToAgentExecution,
-      transcriptHitl,
       executionId,
       org,
       onApplyFix,

package/src/workflow/WorkflowTaskApprovalSummary.tsx

@@ -7,7 +7,11 @@ import { cn } from "@stigmer/theme";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS } from "../internal/markdown-components.js";
 import { formatDuration, formatTimestamp } from "./format-utils.js";
 import type { TaskOutcome } from "./WorkflowTaskApprovalCard.js";
-import type { TaskDetailApprovalDecision } from "./task-detail/task-approval.js";
+import {
+  deriveTaskReviewer,
+  type TaskDetailApprovalDecision,
+  type TaskReviewerView,
+} from "./task-detail/task-approval.js";
 
 /** Props for {@link WorkflowTaskApprovalSummary}. */
 export interface WorkflowTaskApprovalSummaryProps {
@@ -82,6 +86,11 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
 
   const formEntries = useMemo(() => extractFormEntries(decision?.formData ?? null), [decision]);
 
+  const reviewer = useMemo(
+    () => (decision ? deriveTaskReviewer(decision) : null),
+    [decision],
+  );
+
   return (
     <div
       role="group"
@@ -116,20 +125,16 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
       {/* Reviewer + timing */}
       {!isFinalizing && (
         <div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 text-[11px] text-muted-foreground">
-          {decision!.reviewer && (
-            <span>
-              by <span className="font-medium text-foreground">{decision!.reviewer}</span>
-            </span>
-          )}
+          {reviewer && <ReviewerChip reviewer={reviewer} />}
           {decision!.respondedAt && (
             <>
-              {decision!.reviewer && <Dot />}
+              {reviewer && <Dot />}
               <span className="tabular-nums">{formatTimestamp(decision!.respondedAt)}</span>
             </>
           )}
           {decision!.waitDurationMs > 0 && (
             <>
-              {(decision!.reviewer || decision!.respondedAt) && <Dot />}
+              {(reviewer || decision!.respondedAt) && <Dot />}
               <span className="tabular-nums">waited {formatDuration(decision!.waitDurationMs)}</span>
             </>
           )}
@@ -178,6 +183,38 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
   );
 });
 
+// ---------------------------------------------------------------------------
+// Reviewer chip
+// ---------------------------------------------------------------------------
+
+/**
+ * `by <avatar> Ada Lovelace` — the reviewer's display identity, following
+ * the platform's actor pattern (see `WorkflowVersionTimeline`). The email
+ * rides as a native tooltip when it is not already the visible label. A
+ * label that fell through to the raw identity (legacy records) renders
+ * de-emphasized — internal IDs are never presented as if they were names.
+ */
+function ReviewerChip({ reviewer }: { readonly reviewer: TaskReviewerView }) {
+  return (
+    <span className="flex items-center gap-1">
+      by{" "}
+      {reviewer.avatar && (
+        <img src={reviewer.avatar} alt="" className="size-3.5 rounded-full" />
+      )}
+      <span
+        className={cn(
+          reviewer.isRawId
+            ? "font-mono text-[10px] text-muted-foreground"
+            : "font-medium text-foreground",
+        )}
+        title={reviewer.email || undefined}
+      >
+        {reviewer.label}
+      </span>
+    </span>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Tone (visual treatment of the chosen outcome)
 // ---------------------------------------------------------------------------

package/src/workflow/WorkflowYamlEditor.tsx

@@ -1,271 +1,7 @@
-"use client";
+// The schema-aware YAML editor started life here (T10) and was promoted to
+// the manifest domain when resource YAML editing became a cross-kind
+// concern. These aliases keep the original workflow-scoped names stable —
+// both are public API (exported from the package index).
 
-import {
-  useRef,
-  useEffect,
-  memo,
-  type CSSProperties,
-} from "react";
-import { cn } from "@stigmer/theme";
-import { EditorState, Compartment } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection, highlightSpecialChars } from "@codemirror/view";
-import { yaml } from "@codemirror/lang-yaml";
-import { syntaxHighlighting, HighlightStyle, bracketMatching, indentOnInput, foldGutter } from "@codemirror/language";
-import { tags } from "@lezer/highlight";
-import { lintGutter, type Diagnostic, setDiagnostics } from "@codemirror/lint";
-import { defaultKeymap, indentWithTab, history, historyKeymap } from "@codemirror/commands";
-import { autocompletion } from "@codemirror/autocomplete";
-
-/** Props for {@link WorkflowYamlEditor}. */
-export interface WorkflowYamlEditorProps {
-  /** Current YAML content. */
-  readonly value: string;
-  /** Called when the editor content changes. */
-  readonly onChange?: (value: string) => void;
-  /** Validation diagnostics to display as inline markers. */
-  readonly diagnostics?: readonly Diagnostic[];
-  /** Whether the editor is read-only. @default false */
-  readonly readOnly?: boolean;
-  /** Additional CSS class names for the root container. */
-  readonly className?: string;
-  /** Additional inline styles for the root container. */
-  readonly style?: CSSProperties;
-}
-
-/**
- * Schema-aware YAML editor built on CodeMirror 6.
- *
- * Provides syntax highlighting, line numbers, bracket matching,
- * code folding, undo/redo, and inline diagnostic markers driven by
- * external validation (via the `diagnostics` prop).
- *
- * Themed via `--stgm-*` CSS custom properties to respect the host
- * application's design tokens.
- *
- * This is an optional SDK component — it requires CodeMirror peer
- * dependencies which are tree-shaken when not imported (DD-013).
- *
- * @example
- * ```tsx
- * <WorkflowYamlEditor
- *   value={yaml}
- *   onChange={setYaml}
- *   diagnostics={diagnostics}
- * />
- * ```
- *
- * @since T10 (YAML Editor with Graph Preview)
- */
-export const WorkflowYamlEditor = memo(function WorkflowYamlEditor({
-  value,
-  onChange,
-  diagnostics,
-  readOnly = false,
-  className,
-  style,
-}: WorkflowYamlEditorProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const viewRef = useRef<EditorView | null>(null);
-  const readOnlyCompartment = useRef(new Compartment());
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-
-  const isInternalUpdate = useRef(false);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const updateListener = EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        isInternalUpdate.current = true;
-        onChangeRef.current?.(update.state.doc.toString());
-      }
-    });
-
-    const state = EditorState.create({
-      doc: value,
-      extensions: [
-        lineNumbers(),
-        highlightActiveLine(),
-        highlightSpecialChars(),
-        drawSelection(),
-        bracketMatching(),
-        indentOnInput(),
-        foldGutter(),
-        history(),
-        yaml(),
-        syntaxHighlighting(stigmerHighlightStyle, { fallback: true }),
-        autocompletion(),
-        lintGutter(),
-        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-        readOnlyCompartment.current.of(EditorState.readOnly.of(readOnly)),
-        stigmerTheme,
-        updateListener,
-      ],
-    });
-
-    const view = new EditorView({
-      state,
-      parent: containerRef.current,
-    });
-
-    viewRef.current = view;
-
-    return () => {
-      view.destroy();
-      viewRef.current = null;
-    };
-  }, []);
-
-  // Sync external value changes into the editor
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-
-    if (isInternalUpdate.current) {
-      isInternalUpdate.current = false;
-      return;
-    }
-
-    const currentDoc = view.state.doc.toString();
-    if (currentDoc !== value) {
-      view.dispatch({
-        changes: {
-          from: 0,
-          to: currentDoc.length,
-          insert: value,
-        },
-      });
-    }
-  }, [value]);
-
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-
-    view.dispatch({
-      effects: readOnlyCompartment.current.reconfigure(
-        EditorState.readOnly.of(readOnly),
-      ),
-    });
-  }, [readOnly]);
-
-  // Sync diagnostics into CodeMirror's lint system
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-
-    const cmDiags: Diagnostic[] = diagnostics
-      ? diagnostics.map((d) => ({
-          ...d,
-          from: Math.min(d.from, view.state.doc.length),
-          to: Math.min(d.to, view.state.doc.length),
-        }))
-      : [];
-
-    view.dispatch(setDiagnostics(view.state, cmDiags));
-  }, [diagnostics]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn(
-        "stgm-yaml-editor overflow-auto rounded-md border border-border bg-background font-mono text-sm",
-        className,
-      )}
-      style={style}
-    />
-  );
-});
-
-// ---------------------------------------------------------------------------
-// Syntax highlighting: maps lezer tags to --stgm-syntax-* CSS variables
-// ---------------------------------------------------------------------------
-
-const stigmerHighlightStyle = HighlightStyle.define([
-  { tag: tags.propertyName, color: "var(--stgm-syntax-property, #0550ae)" },
-  { tag: tags.tagName, color: "var(--stgm-syntax-tag, #cf222e)" },
-  { tag: tags.keyword, color: "var(--stgm-syntax-keyword, #8250df)", fontWeight: "bold" },
-  { tag: tags.string, color: "var(--stgm-syntax-string, #0a3069)" },
-  { tag: tags.number, color: "var(--stgm-syntax-number, #953800)" },
-  { tag: [tags.bool, tags.null], color: "var(--stgm-syntax-bool, #8250df)" },
-  { tag: tags.atom, color: "var(--stgm-syntax-atom, #cf222e)" },
-  { tag: tags.comment, color: "var(--stgm-syntax-comment, #6e7781)", fontStyle: "italic" },
-  { tag: tags.meta, color: "var(--stgm-syntax-meta, #8250df)" },
-  { tag: tags.name, color: "var(--stgm-foreground, #1a1a2e)" },
-  { tag: tags.definition(tags.name), color: "var(--stgm-syntax-property, #0550ae)" },
-  { tag: tags.separator, color: "var(--stgm-muted-foreground, #737373)" },
-  { tag: tags.punctuation, color: "var(--stgm-muted-foreground, #737373)" },
-]);
-
-// ---------------------------------------------------------------------------
-// CodeMirror theme bridge: maps --stgm-* tokens to editor styles
-// ---------------------------------------------------------------------------
-
-const stigmerTheme = EditorView.theme({
-  "&": {
-    height: "100%",
-    backgroundColor: "var(--stgm-background, #fff)",
-    color: "var(--stgm-foreground, #1a1a2e)",
-    fontSize: "13px",
-  },
-  ".cm-content": {
-    caretColor: "var(--stgm-foreground, #1a1a2e)",
-    fontFamily: "var(--stgm-font-mono, ui-monospace, monospace)",
-    padding: "8px 0",
-  },
-  ".cm-cursor, .cm-dropCursor": {
-    borderLeftColor: "var(--stgm-foreground, #1a1a2e)",
-  },
-  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-    {
-      backgroundColor: "var(--stgm-accent, #e0e7ff)",
-    },
-  ".cm-gutters": {
-    backgroundColor: "var(--stgm-muted, #f5f5f5)",
-    color: "var(--stgm-muted-foreground, #737373)",
-    border: "none",
-    borderRight: "1px solid var(--stgm-border, #e5e5e5)",
-  },
-  ".cm-activeLineGutter": {
-    backgroundColor: "var(--stgm-accent, #e0e7ff)",
-  },
-  ".cm-activeLine": {
-    backgroundColor: "color-mix(in srgb, var(--stgm-accent, #e0e7ff) 30%, transparent)",
-  },
-  ".cm-foldPlaceholder": {
-    backgroundColor: "var(--stgm-muted, #f5f5f5)",
-    border: "1px solid var(--stgm-border, #e5e5e5)",
-    color: "var(--stgm-muted-foreground, #737373)",
-  },
-  ".cm-tooltip": {
-    backgroundColor: "var(--stgm-popover, #fff)",
-    color: "var(--stgm-popover-foreground, #1a1a2e)",
-    border: "1px solid var(--stgm-border, #e5e5e5)",
-    borderRadius: "6px",
-    boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
-  },
-  ".cm-tooltip-autocomplete": {
-    "& > ul > li[aria-selected]": {
-      backgroundColor: "var(--stgm-accent, #e0e7ff)",
-      color: "var(--stgm-accent-foreground, #1a1a2e)",
-    },
-  },
-  ".cm-diagnostic-error": {
-    borderLeft: "3px solid var(--stgm-destructive, #ef4444)",
-  },
-  ".cm-diagnostic-warning": {
-    borderLeft: "3px solid var(--stgm-warning, #f59e0b)",
-  },
-  ".cm-diagnostic-info": {
-    borderLeft: "3px solid var(--stgm-primary, #6366f1)",
-  },
-  ".cm-lint-marker-error": {
-    content: "'●'",
-    color: "var(--stgm-destructive, #ef4444)",
-  },
-  ".cm-lint-marker-warning": {
-    content: "'●'",
-    color: "var(--stgm-warning, #f59e0b)",
-  },
-});
+export { YamlEditor as WorkflowYamlEditor } from "../manifest/YamlEditor.js";
+export type { YamlEditorProps as WorkflowYamlEditorProps } from "../manifest/YamlEditor.js";

package/src/workflow/__tests__/WorkflowAgentCallTranscript.liveregion.test.tsx

@@ -0,0 +1,124 @@
+// The T07 stacked-live-region check: several inline transcripts mount
+// several REAL MessageThreads, each carrying its own `role="log"
+// aria-live="polite"` scroller, under the viewer's one task-state
+// announcer. This pins the a11y-relevant facts that make the stack
+// acceptable rather than noisy:
+//
+// - each live region is scoped to ITS transcript (announcements name their
+//   own child's content, never a sibling's);
+// - `polite` regions only announce on CONTENT CHANGE — a settled child's
+//   transcript never mutates, so it is permanently silent;
+// - the viewport gate (useInViewport → useLiveAgentExecution's `live`)
+//   pauses off-screen streams, so at most the on-screen running children
+//   mutate concurrently.
+//
+// If a live round ever proves this noisy in real screen readers, the
+// planned fallback is a backward-compatible `ariaLive` opt-out prop on
+// MessageThread (DD-011) — not committed speculatively.
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup, within, screen } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  AgentExecutionSchema,
+  AgentExecutionStatusSchema,
+  type AgentExecution,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/metadata_pb";
+import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import {
+  ExecutionPhase,
+  MessageType,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+vi.mock("../../execution/useLiveAgentExecution", () => ({
+  useLiveAgentExecution: vi.fn(),
+}));
+
+import { useLiveAgentExecution } from "../../execution/useLiveAgentExecution";
+import { WorkflowAgentCallTranscript } from "../WorkflowAgentCallTranscript";
+
+const mockUseLiveAgentExecution = vi.mocked(useLiveAgentExecution);
+
+function executionWithMessage(id: string, text: string): AgentExecution {
+  const exec = create(AgentExecutionSchema);
+  exec.metadata = create(ApiResourceMetadataSchema, { id });
+  exec.status = create(AgentExecutionStatusSchema, {
+    phase: ExecutionPhase.EXECUTION_COMPLETED,
+    messages: [
+      create(AgentMessageSchema, {
+        type: MessageType.MESSAGE_AI,
+        content: text,
+      }),
+    ],
+  });
+  return exec;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  // MessageThread's auto-scroll + the transcript's viewport gate both need
+  // observers happy-dom lacks.
+  vi.stubGlobal(
+    "IntersectionObserver",
+    vi.fn(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+      takeRecords: vi.fn(() => []),
+    })),
+  );
+  vi.stubGlobal(
+    "ResizeObserver",
+    vi.fn(() => ({ observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() })),
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("WorkflowAgentCallTranscript — stacked live regions (T07 a11y)", () => {
+  it("scopes each transcript's polite log region to its own child's content, under the viewer-style announcer", () => {
+    mockUseLiveAgentExecution.mockImplementation((id) => ({
+      execution: executionWithMessage(id!, `report from ${id}`),
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      isLoading: false,
+      isStreaming: false,
+      isReconnecting: false,
+      error: null,
+      reconnect: vi.fn(),
+    }));
+
+    const { container } = render(
+      <div>
+        {/* The viewer's single always-visible task-state announcer. */}
+        <div role="log" aria-live="polite" data-testid="viewer-announcer" />
+        <WorkflowAgentCallTranscript childExecutionId="aex_a" agentSlug="alpha" />
+        <WorkflowAgentCallTranscript childExecutionId="aex_b" agentSlug="beta" />
+      </div>,
+    );
+
+    // Three polite regions coexist: the announcer + one per transcript.
+    const regions = Array.from(
+      container.querySelectorAll('[aria-live="polite"]'),
+    );
+    expect(regions).toHaveLength(3);
+    for (const region of regions) {
+      expect(region.getAttribute("aria-live")).toBe("polite");
+    }
+
+    // Scoping: each transcript's log carries ONLY its own child's content —
+    // an announcement can never attribute one agent's words to another.
+    const transcriptA = screen.getByRole("group", {
+      name: "Transcript of agent alpha",
+    });
+    const transcriptB = screen.getByRole("group", {
+      name: "Transcript of agent beta",
+    });
+    expect(within(transcriptA).getByText("report from aex_a")).toBeTruthy();
+    expect(within(transcriptA).queryByText("report from aex_b")).toBeNull();
+    expect(within(transcriptB).getByText("report from aex_b")).toBeTruthy();
+  });
+});