@stigmer/react 3.2.2 → 3.2.3

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/__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();
+  });
+});