@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/__tests__/execution-graph.test.ts

@@ -0,0 +1,308 @@
+import { describe, test, expect } from "vitest";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+import { applyDagreLayout } from "../layout";
+import type { DagreLayoutConfig } from "../canvas-constants";
+import { DAGRE_CONFIG, EXECUTION_DAGRE_CONFIG } from "../canvas-constants";
+import type { WorkflowGraphModel } from "../workflow-graph-model";
+import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model";
+import type { NodeExecutionState, CanvasTaskNodeData } from "../workflow-graph-conversions";
+import { toReactFlowElements, yamlToGraph } from "../workflow-graph-conversions";
+import type { DerivedTaskState } from "../../internal/store/workflow-execution-event-store";
+
+// ---------------------------------------------------------------------------
+// applyDagreLayout
+// ---------------------------------------------------------------------------
+
+describe("applyDagreLayout", () => {
+  const minimalGraph: WorkflowGraphModel = {
+    document: { name: "test", dsl: "1.0.0", namespace: "default", version: "0.0.1" },
+    nodes: [
+      { id: START_NODE_ID, taskName: "Start", kind: WorkflowTaskKind.workflow_task_kind_unspecified, category: "start", config: {}, position: { x: 0, y: 0 } },
+      { id: "task_1", taskName: "task_1", kind: WorkflowTaskKind.agent_call, category: "ai", config: {}, position: { x: 0, y: 0 } },
+      { id: END_NODE_ID, taskName: "End", kind: WorkflowTaskKind.workflow_task_kind_unspecified, category: "end", config: {}, position: { x: 0, y: 0 } },
+    ],
+    edges: [
+      { id: "e1", source: START_NODE_ID, target: "task_1" },
+      { id: "e2", source: "task_1", target: END_NODE_ID },
+    ],
+  };
+
+  test("positions all nodes with non-zero coordinates", () => {
+    const result = applyDagreLayout(minimalGraph);
+    for (const node of result.nodes) {
+      expect(typeof node.position.x).toBe("number");
+      expect(typeof node.position.y).toBe("number");
+      expect(node.position.x !== 0 || node.position.y !== 0).toBe(true);
+    }
+  });
+
+  test("produces deterministic layout (same input = same output)", () => {
+    const a = applyDagreLayout(minimalGraph);
+    const b = applyDagreLayout(minimalGraph);
+    for (let i = 0; i < a.nodes.length; i++) {
+      expect(a.nodes[i].position).toEqual(b.nodes[i].position);
+    }
+  });
+
+  test("maintains top-to-bottom ordering (Start above task_1 above End)", () => {
+    const result = applyDagreLayout(minimalGraph);
+    const startY = result.nodes.find((n) => n.id === START_NODE_ID)!.position.y;
+    const taskY = result.nodes.find((n) => n.id === "task_1")!.position.y;
+    const endY = result.nodes.find((n) => n.id === END_NODE_ID)!.position.y;
+    expect(startY).toBeLessThan(taskY);
+    expect(taskY).toBeLessThan(endY);
+  });
+
+  test("uses visual registry dimensions for non-sentinel nodes", () => {
+    const result = applyDagreLayout(minimalGraph);
+    const start = result.nodes.find((n) => n.id === START_NODE_ID)!;
+    const task = result.nodes.find((n) => n.id === "task_1")!;
+    expect(start.position.x).not.toEqual(task.position.x);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// mergeExecutionState logic (inline test of the merge pattern from hook)
+// ---------------------------------------------------------------------------
+
+describe("mergeExecutionState", () => {
+  function mergeExecutionState(
+    nodes: ReturnType<typeof toReactFlowElements>["nodes"],
+    taskStates: ReadonlyMap<string, DerivedTaskState>,
+  ) {
+    return nodes.map((node) => {
+      const nodeData = node.data as CanvasTaskNodeData;
+      if (nodeData.isSentinel) return node;
+
+      const taskState = taskStates.get(nodeData.taskName);
+      const executionState: NodeExecutionState = taskState
+        ? {
+            status: taskState.status,
+            durationMs: taskState.durationMs,
+            costMicros: taskState.costMicros,
+            attemptNumber: taskState.attemptNumber,
+            error: taskState.error || undefined,
+          }
+        : { status: "not_reached" };
+
+      return {
+        ...node,
+        data: { ...nodeData, executionState },
+      };
+    });
+  }
+
+  const yaml = `
+apiVersion: agentic.stigmer.ai/v1
+kind: Workflow
+metadata:
+  name: test-wf
+  org: acme
+spec:
+  document:
+    dsl: "1.0.0"
+    name: test-wf
+    namespace: default
+    version: "0.0.1"
+  tasks:
+    - name: fetch_data
+      kind: http_call
+    - name: analyze
+      kind: agent_call
+`;
+
+  test("marks tasks without event state as not_reached", () => {
+    const graph = yamlToGraph(yaml);
+    const laidOut = applyDagreLayout(graph);
+    const elements = toReactFlowElements(laidOut);
+    const taskStates = new Map<string, DerivedTaskState>();
+
+    const merged = mergeExecutionState(elements.nodes, taskStates);
+    const analyzeNode = merged.find(
+      (n) => (n.data as CanvasTaskNodeData).taskName === "analyze",
+    );
+    expect((analyzeNode!.data as CanvasTaskNodeData).executionState?.status).toBe(
+      "not_reached",
+    );
+  });
+
+  test("maps DerivedTaskState status to node executionState", () => {
+    const graph = yamlToGraph(yaml);
+    const laidOut = applyDagreLayout(graph);
+    const elements = toReactFlowElements(laidOut);
+
+    const taskStates = new Map<string, DerivedTaskState>([
+      [
+        "fetch_data",
+        {
+          taskName: "fetch_data",
+          taskKind: WorkflowTaskKind.http_call,
+          status: "completed",
+          durationMs: 1234,
+          costMicros: BigInt(0),
+          tokensUsed: BigInt(0),
+          attemptNumber: 1,
+          error: "",
+          childExecutionId: "",
+          agentSlug: "",
+          currentToolName: "",
+          messagesCount: 0,
+          toolCallsCount: 0,
+        },
+      ],
+      [
+        "analyze",
+        {
+          taskName: "analyze",
+          taskKind: WorkflowTaskKind.agent_call,
+          status: "running",
+          durationMs: 500,
+          costMicros: BigInt(150000),
+          tokensUsed: BigInt(4500),
+          attemptNumber: 1,
+          error: "",
+          childExecutionId: "",
+          agentSlug: "",
+          currentToolName: "",
+          messagesCount: 0,
+          toolCallsCount: 0,
+        },
+      ],
+    ]);
+
+    const merged = mergeExecutionState(elements.nodes, taskStates);
+
+    const fetchNode = merged.find(
+      (n) => (n.data as CanvasTaskNodeData).taskName === "fetch_data",
+    );
+    expect((fetchNode!.data as CanvasTaskNodeData).executionState?.status).toBe("completed");
+    expect((fetchNode!.data as CanvasTaskNodeData).executionState?.durationMs).toBe(1234);
+
+    const analyzeNode = merged.find(
+      (n) => (n.data as CanvasTaskNodeData).taskName === "analyze",
+    );
+    expect((analyzeNode!.data as CanvasTaskNodeData).executionState?.status).toBe("running");
+  });
+
+  test("sentinel nodes are not modified", () => {
+    const graph = yamlToGraph(yaml);
+    const laidOut = applyDagreLayout(graph);
+    const elements = toReactFlowElements(laidOut);
+    const taskStates = new Map<string, DerivedTaskState>();
+
+    const merged = mergeExecutionState(elements.nodes, taskStates);
+    const startNode = merged.find(
+      (n) => (n.data as CanvasTaskNodeData).isSentinel && (n.data as CanvasTaskNodeData).taskName === "Start",
+    );
+    expect((startNode!.data as CanvasTaskNodeData).executionState).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// applyDagreLayout — custom config parameter
+// ---------------------------------------------------------------------------
+
+describe("applyDagreLayout with custom config", () => {
+  const graph: WorkflowGraphModel = {
+    document: { name: "test", dsl: "1.0.0", namespace: "default", version: "0.0.1" },
+    nodes: [
+      { id: START_NODE_ID, taskName: "Start", kind: WorkflowTaskKind.workflow_task_kind_unspecified, category: "start", config: {}, position: { x: 0, y: 0 } },
+      { id: "a", taskName: "a", kind: WorkflowTaskKind.agent_call, category: "ai", config: {}, position: { x: 0, y: 0 } },
+      { id: "b", taskName: "b", kind: WorkflowTaskKind.http_call, category: "invocation", config: {}, position: { x: 0, y: 0 } },
+      { id: END_NODE_ID, taskName: "End", kind: WorkflowTaskKind.workflow_task_kind_unspecified, category: "end", config: {}, position: { x: 0, y: 0 } },
+    ],
+    edges: [
+      { id: "e1", source: START_NODE_ID, target: "a" },
+      { id: "e2", source: START_NODE_ID, target: "b" },
+      { id: "e3", source: "a", target: END_NODE_ID },
+      { id: "e4", source: "b", target: END_NODE_ID },
+    ],
+  };
+
+  test("uses default DAGRE_CONFIG when no config is provided", () => {
+    const withDefault = applyDagreLayout(graph);
+    const withExplicit = applyDagreLayout(graph, DAGRE_CONFIG);
+    for (let i = 0; i < withDefault.nodes.length; i++) {
+      expect(withDefault.nodes[i].position).toEqual(withExplicit.nodes[i].position);
+    }
+  });
+
+  test("EXECUTION_DAGRE_CONFIG produces more spread-out positions", () => {
+    const standard = applyDagreLayout(graph, DAGRE_CONFIG);
+    const execution = applyDagreLayout(graph, EXECUTION_DAGRE_CONFIG);
+
+    const standardA = standard.nodes.find((n) => n.id === "a")!;
+    const standardB = standard.nodes.find((n) => n.id === "b")!;
+    const executionA = execution.nodes.find((n) => n.id === "a")!;
+    const executionB = execution.nodes.find((n) => n.id === "b")!;
+
+    const standardSpan = Math.abs(standardB.position.x - standardA.position.x);
+    const executionSpan = Math.abs(executionB.position.x - executionA.position.x);
+    expect(executionSpan).toBeGreaterThan(standardSpan);
+  });
+
+  test("custom config with larger ranksep increases vertical spacing", () => {
+    const wideConfig: DagreLayoutConfig = { rankdir: "TB", ranksep: 200, nodesep: 30 };
+    const standard = applyDagreLayout(graph, DAGRE_CONFIG);
+    const wide = applyDagreLayout(graph, wideConfig);
+
+    const standardStartY = standard.nodes.find((n) => n.id === START_NODE_ID)!.position.y;
+    const standardEndY = standard.nodes.find((n) => n.id === END_NODE_ID)!.position.y;
+    const wideStartY = wide.nodes.find((n) => n.id === START_NODE_ID)!.position.y;
+    const wideEndY = wide.nodes.find((n) => n.id === END_NODE_ID)!.position.y;
+
+    const standardHeight = standardEndY - standardStartY;
+    const wideHeight = wideEndY - wideStartY;
+    expect(wideHeight).toBeGreaterThan(standardHeight);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// toReactFlowElements — draggable flags on nodes
+// ---------------------------------------------------------------------------
+
+describe("toReactFlowElements draggable flags", () => {
+  const yaml = `
+apiVersion: agentic.stigmer.ai/v1
+kind: Workflow
+metadata:
+  name: test-wf
+  org: acme
+spec:
+  document:
+    dsl: "1.0.0"
+    name: test-wf
+    namespace: default
+    version: "0.0.1"
+  tasks:
+    - name: my_task
+      kind: agent_call
+`;
+
+  test("sentinel nodes have draggable: false", () => {
+    const graph = yamlToGraph(yaml);
+    const laidOut = applyDagreLayout(graph);
+    const elements = toReactFlowElements(laidOut);
+
+    const startNode = elements.nodes.find(
+      (n) => (n.data as CanvasTaskNodeData).isSentinel && (n.data as CanvasTaskNodeData).taskName === "Start",
+    );
+    const endNode = elements.nodes.find(
+      (n) => (n.data as CanvasTaskNodeData).isSentinel && (n.data as CanvasTaskNodeData).taskName === "End",
+    );
+
+    expect(startNode!.draggable).toBe(false);
+    expect(endNode!.draggable).toBe(false);
+  });
+
+  test("non-sentinel nodes have draggable: true from toReactFlowElements", () => {
+    const graph = yamlToGraph(yaml);
+    const laidOut = applyDagreLayout(graph);
+    const elements = toReactFlowElements(laidOut);
+
+    const taskNode = elements.nodes.find(
+      (n) => (n.data as CanvasTaskNodeData).taskName === "my_task",
+    );
+    expect(taskNode!.draggable).toBe(true);
+  });
+});

package/src/workflow/__tests__/execution-inspector.test.tsx

@@ -0,0 +1,332 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { ExecutionInspector } from "../execution-inspector/ExecutionInspector";
+import { useExecutionTaskDetail } from "../execution-inspector/useExecutionTaskDetail";
+import type { TaskDetail } from "../execution-inspector/derive-task-detail";
+import type { DerivedTaskState } from "../../internal/store/workflow-execution-event-store";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+
+vi.mock("../execution-inspector/useExecutionTaskDetail", () => ({
+  useExecutionTaskDetail: vi.fn(),
+}));
+
+vi.mock("../kind-metadata", () => ({
+  kindToDisplayName: (kind: string) => kind || "unknown",
+}));
+
+vi.mock("../execution-inspector/SummaryTab", () => ({
+  SummaryTab: () => <div data-testid="summary-tab-content">Summary content</div>,
+}));
+
+vi.mock("../execution-inspector/InputOutputTab", () => ({
+  InputOutputTab: ({ label }: { label: string }) => (
+    <div data-testid={`${label.toLowerCase()}-tab-content`}>{label} content</div>
+  ),
+}));
+
+vi.mock("../execution-inspector/ErrorTab", () => ({
+  ErrorTab: ({ childExecutionId, onNavigateToAgentExecution }: { childExecutionId?: string; onNavigateToAgentExecution?: (id: string) => void }) => (
+    <div data-testid="error-tab-content">
+      Error content
+      {childExecutionId && <span data-testid="error-tab-child-exec-id">{childExecutionId}</span>}
+      {onNavigateToAgentExecution && <span data-testid="error-tab-has-nav">nav</span>}
+    </div>
+  ),
+}));
+
+vi.mock("../execution-inspector/RetriesTab", () => ({
+  RetriesTab: () => <div data-testid="retries-tab-content">Retries content</div>,
+}));
+
+vi.mock("../execution-inspector/AgentCallTab", () => ({
+  AgentCallTab: () => <div data-testid="agent-tab-content">Agent content</div>,
+}));
+
+vi.mock("../execution-inspector/EventLogTab", () => ({
+  EventLogTab: () => <div data-testid="events-tab-content">Events content</div>,
+}));
+
+const mockedUseExecutionTaskDetail = vi.mocked(useExecutionTaskDetail);
+
+function makeDetail(overrides: Partial<TaskDetail> = {}): TaskDetail {
+  return {
+    taskName: "my-task",
+    taskKind: WorkflowTaskKind.workflow_task_kind_unspecified,
+    displayName: "Set Vars",
+    status: "completed",
+    summary: {
+      startedAt: "2026-01-01T00:00:00Z",
+      completedAt: "2026-01-01T00:00:05Z",
+      durationMs: 5000,
+      costMicros: BigInt(0),
+      inputTokens: BigInt(0),
+      outputTokens: BigInt(0),
+      totalTokens: BigInt(0),
+      attemptNumber: 1,
+    },
+    input: null,
+    output: null,
+    error: null,
+    retries: null,
+    agentCall: null,
+    approval: null,
+    eventLog: [],
+    ...overrides,
+  };
+}
+
+const defaultProps = {
+  selectedTaskName: null as string | null,
+  events: [] as any[],
+  taskStates: new Map() as ReadonlyMap<string, DerivedTaskState>,
+};
+
+describe("ExecutionInspector", () => {
+  afterEach(cleanup);
+
+  it("renders empty state when selectedTaskName is null", () => {
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail: null });
+
+    render(<ExecutionInspector {...defaultProps} selectedTaskName={null} />);
+
+    expect(screen.getByText("Click a node to view execution details")).toBeTruthy();
+  });
+
+  it("renders empty state when detail is null", () => {
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail: null });
+
+    render(<ExecutionInspector {...defaultProps} selectedTaskName="some-task" />);
+
+    expect(screen.getByText("Click a node to view execution details")).toBeTruthy();
+  });
+
+  it("renders Summary tab by default for a completed task", () => {
+    const detail = makeDetail({ status: "completed" });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+    render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+    expect(screen.getByRole("tab", { name: "Summary" }).getAttribute("aria-selected")).toBe("true");
+    expect(screen.getByTestId("summary-tab-content")).toBeTruthy();
+  });
+
+  it("auto-selects Error tab when task status is failed", () => {
+    const detail = makeDetail({
+      status: "failed",
+      error: { message: "boom", attemptNumber: 1, maxAttempts: 3, willRetry: false, durationMs: 100, category: null, detail: null },
+    });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+    render(<ExecutionInspector {...defaultProps} selectedTaskName="failed-task" />);
+
+    expect(screen.getByRole("tab", { name: "Error" }).getAttribute("aria-selected")).toBe("true");
+    expect(screen.getByTestId("error-tab-content")).toBeTruthy();
+  });
+
+  it("resets to Summary when selectedTaskName changes to a non-failed task", () => {
+    const failedDetail = makeDetail({
+      status: "failed",
+      error: { message: "err", attemptNumber: 1, maxAttempts: 1, willRetry: false, durationMs: 50, category: null, detail: null },
+    });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail: failedDetail });
+
+    const { rerender } = render(
+      <ExecutionInspector {...defaultProps} selectedTaskName="task-a" />,
+    );
+
+    expect(screen.getByRole("tab", { name: "Error" }).getAttribute("aria-selected")).toBe("true");
+
+    const completedDetail = makeDetail({ status: "completed" });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail: completedDetail });
+
+    rerender(<ExecutionInspector {...defaultProps} selectedTaskName="task-b" />);
+
+    expect(screen.getByRole("tab", { name: "Summary" }).getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("auto-selects Error tab when status transitions to failed on same task", () => {
+    const runningDetail = makeDetail({ status: "running" });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail: runningDetail });
+
+    const { rerender } = render(
+      <ExecutionInspector {...defaultProps} selectedTaskName="my-task" />,
+    );
+
+    expect(screen.getByRole("tab", { name: "Summary" }).getAttribute("aria-selected")).toBe("true");
+
+    const failedDetail = makeDetail({
+      status: "failed",
+      error: { message: "crash", attemptNumber: 1, maxAttempts: 1, willRetry: false, durationMs: 200, category: null, detail: null },
+    });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail: failedDetail });
+
+    // Pass a new taskStates reference to reflect that status data changed —
+    // in production, the event store updates this Map when a task fails,
+    // which is what triggers memo to allow the re-render.
+    rerender(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" taskStates={new Map()} />);
+
+    expect(screen.getByRole("tab", { name: "Error" }).getAttribute("aria-selected")).toBe("true");
+  });
+
+  describe("tab visibility", () => {
+    it("shows only Summary and Events tabs for a minimal completed task", () => {
+      const detail = makeDetail({ status: "completed" });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.getByRole("tab", { name: "Summary" })).toBeTruthy();
+      expect(screen.getByRole("tab", { name: "Events" })).toBeTruthy();
+      expect(screen.queryByRole("tab", { name: "Input" })).toBeFalsy();
+      expect(screen.queryByRole("tab", { name: "Output" })).toBeFalsy();
+      expect(screen.queryByRole("tab", { name: "Error" })).toBeFalsy();
+      expect(screen.queryByRole("tab", { name: "Retries" })).toBeFalsy();
+      expect(screen.queryByRole("tab", { name: "Agent" })).toBeFalsy();
+    });
+
+    it("shows Input tab when detail.input is present", () => {
+      const detail = makeDetail({
+        input: { data: { key: "value" }, summary: null, artifactIds: [], source: "snapshot" },
+      });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.getByRole("tab", { name: "Input" })).toBeTruthy();
+    });
+
+    it("shows Output tab when detail.output is present", () => {
+      const detail = makeDetail({
+        output: { data: { result: "ok" }, summary: null, artifactIds: [], source: "snapshot" },
+      });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.getByRole("tab", { name: "Output" })).toBeTruthy();
+    });
+
+    it("shows Error tab when detail.error is present", () => {
+      const detail = makeDetail({
+        status: "failed",
+        error: { message: "fail", attemptNumber: 1, maxAttempts: 1, willRetry: false, durationMs: 0, category: null, detail: null },
+      });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.getByRole("tab", { name: "Error" })).toBeTruthy();
+    });
+
+    it("shows Retries tab only when attempts > 1", () => {
+      const detail = makeDetail({
+        retries: {
+          currentAttempt: 2,
+          attempts: [
+            { attemptNumber: 1, status: "failed", durationMs: 100, error: "err", delayBeforeMs: 0, startedAt: "" },
+            { attemptNumber: 2, status: "completed", durationMs: 200, error: "", delayBeforeMs: 500, startedAt: "" },
+          ],
+        },
+      });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.getByRole("tab", { name: "Retries" })).toBeTruthy();
+    });
+
+    it("does not show Retries tab when only 1 attempt", () => {
+      const detail = makeDetail({
+        retries: {
+          currentAttempt: 1,
+          attempts: [
+            { attemptNumber: 1, status: "completed", durationMs: 100, error: "", delayBeforeMs: 0, startedAt: "" },
+          ],
+        },
+      });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.queryByRole("tab", { name: "Retries" })).toBeFalsy();
+    });
+
+    it("shows Agent tab when detail.agentCall is present", () => {
+      const detail = makeDetail({
+        agentCall: {
+          childExecutionId: "child-1",
+          agentSlug: "my-agent",
+          agentPhase: "3",
+          messagesCount: 5,
+          toolCallsCount: 2,
+          tokensConsumed: BigInt(1000),
+          costMicros: BigInt(500),
+          error: "",
+          currentToolName: "",
+        },
+      });
+      mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+      render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+      expect(screen.getByRole("tab", { name: "Agent" })).toBeTruthy();
+    });
+  });
+
+  it("displays task name in the header", () => {
+    const detail = makeDetail({ taskName: "classify_input" });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+    render(<ExecutionInspector {...defaultProps} selectedTaskName="classify_input" />);
+
+    expect(screen.getByText("classify_input")).toBeTruthy();
+  });
+
+  it("has an accessible tablist with aria-label", () => {
+    const detail = makeDetail();
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+    render(<ExecutionInspector {...defaultProps} selectedTaskName="my-task" />);
+
+    expect(screen.getByRole("tablist", { name: "Task execution details" })).toBeTruthy();
+  });
+
+  it("passes childExecutionId and onNavigateToAgentExecution to ErrorTab for failed agent_call tasks", () => {
+    const onNavigate = vi.fn();
+    const detail = makeDetail({
+      status: "failed",
+      error: {
+        message: "Cursor run failed",
+        attemptNumber: 1,
+        maxAttempts: 1,
+        willRetry: false,
+        durationMs: 47000,
+        category: null,
+        detail: null,
+      },
+      agentCall: {
+        childExecutionId: "aex_test_123",
+        agentSlug: "notification-analyst",
+        agentPhase: "",
+        messagesCount: 0,
+        toolCallsCount: 0,
+        tokensConsumed: BigInt(0),
+        costMicros: BigInt(0),
+        error: "Cursor run failed",
+        currentToolName: "",
+      },
+    });
+    mockedUseExecutionTaskDetail.mockReturnValue({ detail });
+
+    render(
+      <ExecutionInspector
+        {...defaultProps}
+        selectedTaskName="analyze_player_data"
+        onNavigateToAgentExecution={onNavigate}
+      />,
+    );
+
+    expect(screen.getByTestId("error-tab-child-exec-id")?.textContent).toBe("aex_test_123");
+    expect(screen.getByTestId("error-tab-has-nav")).toBeTruthy();
+  });
+});