@stigmer/react 1.0.4 → 2.0.1

package/src/workflow/__tests__/extract-workflow-yaml.test.ts

@@ -0,0 +1,152 @@
+import { describe, it, expect } from "vitest";
+import { extractWorkflowYaml } from "../extract-workflow-yaml";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+function makeExecution(messages: Array<{ type: number; content: string }>) {
+  return { status: { messages } } as any;
+}
+
+describe("extractWorkflowYaml", () => {
+  it("extracts YAML from single code block", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content:
+          "Here is the workflow:\n```yaml\nname: test\nversion: 1.0\n```\nEnjoy!",
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.yaml).toBe("name: test\nversion: 1.0");
+    expect(result!.explanation).toContain("Here is the workflow:");
+    expect(result!.explanation).toContain("Enjoy!");
+  });
+
+  it("takes last block when multiple YAML blocks present", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content:
+          "First:\n```yaml\nfirst: block\n```\nSecond:\n```yaml\nsecond: block\n```\nDone.",
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.yaml).toBe("second: block");
+  });
+
+  it("accepts ```yml variant", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content: "Here:\n```yml\nname: test\n```",
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.yaml).toBe("name: test");
+  });
+
+  it("returns null when no YAML block in AI message", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content: "Just some prose without any code blocks.",
+      },
+    ]);
+    expect(extractWorkflowYaml(exec)).toBeNull();
+  });
+
+  it("returns null when only human messages", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_HUMAN,
+        content: "```yaml\nname: test\n```",
+      },
+    ]);
+    expect(extractWorkflowYaml(exec)).toBeNull();
+  });
+
+  it("returns null for null execution", () => {
+    expect(extractWorkflowYaml(null)).toBeNull();
+  });
+
+  it("returns null for empty messages array", () => {
+    const exec = makeExecution([]);
+    expect(extractWorkflowYaml(exec)).toBeNull();
+  });
+
+  it("returns null when AI message has empty content", () => {
+    const exec = makeExecution([
+      { type: MessageType.MESSAGE_AI, content: "" },
+    ]);
+    expect(extractWorkflowYaml(exec)).toBeNull();
+  });
+
+  it("skips AI messages without YAML scanning in reverse", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content: "```yaml\nname: early\n```",
+      },
+      {
+        type: MessageType.MESSAGE_AI,
+        content: "This AI message has no YAML blocks at all.",
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.yaml).toBe("name: early");
+  });
+
+  it("finds YAML from last AI message", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content: "Just prose here, no fenced blocks.",
+      },
+      {
+        type: MessageType.MESSAGE_AI,
+        content: "```yaml\nname: latest\nversion: 2.0\n```",
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.yaml).toBe("name: latest\nversion: 2.0");
+  });
+
+  it("extracts explanation from surrounding prose", () => {
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content:
+          "I created a workflow for you.\nHere it is:\n```yaml\nname: test\n```\nLet me know if you need changes.",
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.explanation).toContain("I created a workflow for you.");
+    expect(result!.explanation).toContain("Let me know if you need changes.");
+    expect(result!.explanation).not.toContain("```");
+
+    const lines = result!.explanation.split("\n");
+    for (const line of lines) {
+      expect(line.trim().length).toBeGreaterThan(0);
+    }
+  });
+
+  it("handles special regex characters in YAML content", () => {
+    const yamlContent =
+      'env:\n  pattern: ".*"\n  value: ${VAR}\n  keys: [key1, key2]\n  path: file.txt';
+    const exec = makeExecution([
+      {
+        type: MessageType.MESSAGE_AI,
+        content: `Here:\n\`\`\`yaml\n${yamlContent}\n\`\`\`\nDone.`,
+      },
+    ]);
+    const result = extractWorkflowYaml(exec);
+    expect(result).not.toBeNull();
+    expect(result!.yaml).toBe(yamlContent);
+    expect(result!.explanation).toContain("Done.");
+  });
+});

package/src/workflow/__tests__/format-utils.test.ts

@@ -0,0 +1,159 @@
+import { describe, it, expect } from "vitest";
+import {
+  formatDuration,
+  formatDurationSec,
+  formatMicroUsd,
+  formatTokenCount,
+  formatBytes,
+  formatTimestamp,
+  formatMetaChips,
+} from "../format-utils";
+
+describe("formatDuration", () => {
+  it("formats sub-second durations in milliseconds", () => {
+    expect(formatDuration(0)).toBe("0ms");
+    expect(formatDuration(42)).toBe("42ms");
+    expect(formatDuration(999)).toBe("999ms");
+  });
+
+  it("formats seconds with one decimal place", () => {
+    expect(formatDuration(1000)).toBe("1.0s");
+    expect(formatDuration(1500)).toBe("1.5s");
+    expect(formatDuration(59_999)).toBe("60.0s");
+  });
+
+  it("formats minutes with remaining seconds", () => {
+    expect(formatDuration(60_000)).toBe("1m");
+    expect(formatDuration(90_000)).toBe("1m 30s");
+    expect(formatDuration(3_599_000)).toBe("59m 59s");
+  });
+
+  it("formats hours with remaining minutes", () => {
+    expect(formatDuration(3_600_000)).toBe("1h");
+    expect(formatDuration(5_400_000)).toBe("1h 30m");
+    expect(formatDuration(7_260_000)).toBe("2h 1m");
+  });
+});
+
+describe("formatMicroUsd", () => {
+  it("returns $0.0000 for zero", () => {
+    expect(formatMicroUsd(BigInt(0))).toBe("$0.0000");
+  });
+
+  it("uses 4 decimal places for sub-cent amounts", () => {
+    expect(formatMicroUsd(BigInt(100))).toBe("$0.0001");
+    expect(formatMicroUsd(BigInt(5000))).toBe("$0.0050");
+    expect(formatMicroUsd(BigInt(9999))).toBe("$0.0100");
+  });
+
+  it("uses 2 decimal places for cent-or-more amounts", () => {
+    expect(formatMicroUsd(BigInt(10_000))).toBe("$0.01");
+    expect(formatMicroUsd(BigInt(190_000))).toBe("$0.19");
+    expect(formatMicroUsd(BigInt(1_000_000))).toBe("$1.00");
+    expect(formatMicroUsd(BigInt(4_500_000))).toBe("$4.50");
+  });
+
+  it("handles large amounts", () => {
+    expect(formatMicroUsd(BigInt(123_456_789))).toBe("$123.46");
+  });
+});
+
+describe("formatTokenCount", () => {
+  it("formats small numbers with locale separators", () => {
+    expect(formatTokenCount(BigInt(0))).toBe("0");
+    expect(formatTokenCount(BigInt(999))).toBe("999");
+  });
+
+  it("abbreviates thousands as K", () => {
+    expect(formatTokenCount(BigInt(1_000))).toBe("1.0K");
+    expect(formatTokenCount(BigInt(12_400))).toBe("12.4K");
+    expect(formatTokenCount(BigInt(999_999))).toBe("1000.0K");
+  });
+
+  it("abbreviates millions as M", () => {
+    expect(formatTokenCount(BigInt(1_000_000))).toBe("1.0M");
+    expect(formatTokenCount(BigInt(2_500_000))).toBe("2.5M");
+  });
+});
+
+describe("formatBytes", () => {
+  it("formats bytes", () => {
+    expect(formatBytes(BigInt(0))).toBe("0 B");
+    expect(formatBytes(BigInt(512))).toBe("512 B");
+    expect(formatBytes(BigInt(1023))).toBe("1023 B");
+  });
+
+  it("formats kilobytes", () => {
+    expect(formatBytes(BigInt(1024))).toBe("1.0 KB");
+    expect(formatBytes(BigInt(4_300))).toBe("4.2 KB");
+  });
+
+  it("formats megabytes", () => {
+    expect(formatBytes(BigInt(1_048_576))).toBe("1.0 MB");
+    expect(formatBytes(BigInt(1_572_864))).toBe("1.5 MB");
+  });
+});
+
+describe("formatTimestamp", () => {
+  it("returns empty string for empty input", () => {
+    expect(formatTimestamp("")).toBe("");
+  });
+
+  it("formats ISO timestamps to HH:MM:SS", () => {
+    const result = formatTimestamp("2026-05-23T14:30:15.123Z");
+    expect(result).toMatch(/\d{2}:\d{2}:\d{2}/);
+  });
+
+  it("returns raw string on invalid date", () => {
+    expect(formatTimestamp("not-a-date")).toBe("not-a-date");
+  });
+});
+
+describe("formatMetaChips", () => {
+  it("returns null when all values are empty", () => {
+    expect(formatMetaChips({})).toBeNull();
+    expect(formatMetaChips({ durationMs: 0, costMicros: BigInt(0), tokens: BigInt(0) })).toBeNull();
+  });
+
+  it("formats duration only", () => {
+    expect(formatMetaChips({ durationMs: 1500 })).toBe("1.5s");
+  });
+
+  it("formats all three metrics joined by ·", () => {
+    const result = formatMetaChips({
+      durationMs: 1500,
+      costMicros: BigInt(190_000),
+      tokens: BigInt(12_400),
+    });
+    expect(result).toBe("1.5s · $0.19 · 12,400 tok");
+  });
+
+  it("omits zero values", () => {
+    const result = formatMetaChips({
+      durationMs: 1500,
+      costMicros: BigInt(0),
+      tokens: BigInt(5000),
+    });
+    expect(result).toBe("1.5s · 5,000 tok");
+  });
+});
+
+describe("formatDurationSec", () => {
+  it("formats sub-minute durations in seconds", () => {
+    expect(formatDurationSec(0)).toBe("0s");
+    expect(formatDurationSec(42)).toBe("42s");
+    expect(formatDurationSec(59.4)).toBe("59s");
+  });
+
+  it("formats minutes with remaining seconds", () => {
+    expect(formatDurationSec(60)).toBe("1m");
+    expect(formatDurationSec(90)).toBe("1m 30s");
+    expect(formatDurationSec(3599)).toBe("59m 59s");
+  });
+
+  it("formats hours with remaining minutes", () => {
+    expect(formatDurationSec(3600)).toBe("1h");
+    expect(formatDurationSec(5400)).toBe("1h 30m");
+    expect(formatDurationSec(7260)).toBe("2h 1m");
+  });
+});

package/src/workflow/__tests__/inspector-commands.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect } from "vitest";
+import type { JsonObject } from "@bufbuild/protobuf";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+import type { WorkflowGraphModel, WorkflowGraphNode } from "../workflow-graph-model";
+import { ToggleNodeDisabledCommand, WrapInTryCatchCommand } from "../graph-commands";
+import { taskToYaml } from "../inspector/task-to-yaml";
+
+function makeModel(nodes: WorkflowGraphNode[]): WorkflowGraphModel {
+  return {
+    document: { dsl: "1.0.0", namespace: "ns", name: "wf", version: "0.1.0" },
+    nodes: [
+      { id: "__start__", taskName: "__start__", kind: WorkflowTaskKind.workflow_task_kind_unspecified, category: "start", config: {}, position: { x: 0, y: 0 } },
+      ...nodes,
+      { id: "__end__", taskName: "__end__", kind: WorkflowTaskKind.workflow_task_kind_unspecified, category: "end", config: {}, position: { x: 0, y: 200 } },
+    ],
+    edges: [
+      { id: "e1", source: "__start__", target: nodes[0]?.id ?? "__end__" },
+      ...(nodes[0] ? [{ id: "e2", source: nodes[0].id, target: "__end__" }] : []),
+    ],
+  };
+}
+
+function makeNode(overrides?: Partial<WorkflowGraphNode>): WorkflowGraphNode {
+  return {
+    id: "my_task",
+    taskName: "my_task",
+    kind: WorkflowTaskKind.agent_call,
+    category: "ai",
+    config: { agent: "test-agent", message: "Hello" } as unknown as JsonObject,
+    position: { x: 100, y: 100 },
+    ...overrides,
+  };
+}
+
+describe("ToggleNodeDisabledCommand", () => {
+  it("enables disabled flag on a node without it", () => {
+    const node = makeNode();
+    const model = makeModel([node]);
+    const cmd = new ToggleNodeDisabledCommand("my_task", "my_task");
+
+    const result = cmd.apply(model);
+    const updatedNode = result.nodes.find((n) => n.id === "my_task")!;
+    expect((updatedNode.config as Record<string, unknown>)["x-stigmer-disabled"]).toBe(true);
+  });
+
+  it("disables the flag on a node that has it", () => {
+    const node = makeNode({
+      config: { agent: "test-agent", "x-stigmer-disabled": true } as unknown as JsonObject,
+    });
+    const model = makeModel([node]);
+    const cmd = new ToggleNodeDisabledCommand("my_task", "my_task");
+
+    const result = cmd.apply(model);
+    const updatedNode = result.nodes.find((n) => n.id === "my_task")!;
+    expect((updatedNode.config as Record<string, unknown>)["x-stigmer-disabled"]).toBeUndefined();
+  });
+
+  it("undo restores the previous state", () => {
+    const node = makeNode();
+    const model = makeModel([node]);
+    const cmd = new ToggleNodeDisabledCommand("my_task", "my_task");
+
+    const applied = cmd.apply(model);
+    const undone = cmd.undo(applied);
+    const restoredNode = undone.nodes.find((n) => n.id === "my_task")!;
+    expect((restoredNode.config as Record<string, unknown>)["x-stigmer-disabled"]).toBeUndefined();
+  });
+});
+
+describe("WrapInTryCatchCommand", () => {
+  it("replaces the target node with a try_catch container", () => {
+    const node = makeNode();
+    const model = makeModel([node]);
+    const cmd = new WrapInTryCatchCommand("my_task", "my_task", "try_catch_1");
+
+    const result = cmd.apply(model);
+    expect(result.nodes.find((n) => n.id === "my_task")).toBeUndefined();
+    expect(result.nodes.find((n) => n.id === "try_catch_1")).toBeTruthy();
+  });
+
+  it("preserves edge connectivity through the container", () => {
+    const node = makeNode();
+    const model = makeModel([node]);
+    const cmd = new WrapInTryCatchCommand("my_task", "my_task", "try_catch_1");
+
+    const result = cmd.apply(model);
+    const inbound = result.edges.find((e) => e.target === "try_catch_1");
+    const outbound = result.edges.find((e) => e.source === "try_catch_1");
+    expect(inbound).toBeTruthy();
+    expect(outbound).toBeTruthy();
+  });
+
+  it("undo restores the original node and edges", () => {
+    const node = makeNode();
+    const model = makeModel([node]);
+    const cmd = new WrapInTryCatchCommand("my_task", "my_task", "try_catch_1");
+
+    const applied = cmd.apply(model);
+    const undone = cmd.undo(applied);
+    expect(undone.nodes.find((n) => n.id === "my_task")).toBeTruthy();
+    expect(undone.nodes.find((n) => n.id === "try_catch_1")).toBeUndefined();
+  });
+});
+
+describe("taskToYaml", () => {
+  it("serializes a basic agent_call node", () => {
+    const node = makeNode();
+    const yaml = taskToYaml(node);
+    expect(yaml).toContain("name: my_task");
+    expect(yaml).toContain("kind: agent_call");
+    expect(yaml).toContain("agent: test-agent");
+    expect(yaml).toContain("message: Hello");
+  });
+
+  it("includes export when present", () => {
+    const node = makeNode({ export: { as: "${ . }" } });
+    const yaml = taskToYaml(node);
+    expect(yaml).toContain("export:");
+    expect(yaml).toContain('as: "${ . }"');
+  });
+
+  it("includes flow.then when present", () => {
+    const node = makeNode({ flow: { then: "next_task" } });
+    const yaml = taskToYaml(node);
+    expect(yaml).toContain("flow:");
+    expect(yaml).toContain("then: next_task");
+  });
+});

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

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import type { JsonObject } from "@bufbuild/protobuf";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+import type { WorkflowGraphNode } from "../workflow-graph-model";
+import { AgentCallForm } from "../inspector/forms/AgentCallForm";
+import { HttpCallForm } from "../inspector/forms/HttpCallForm";
+
+afterEach(cleanup);
+
+function makeNode(kind: WorkflowTaskKind, config: Record<string, unknown>): WorkflowGraphNode {
+  return {
+    id: "test_task",
+    taskName: "test_task",
+    kind,
+    category: "ai",
+    config: config as JsonObject,
+    position: { x: 0, y: 0 },
+  };
+}
+
+describe("AgentCallForm", () => {
+  it("renders agent input field", () => {
+    const node = makeNode(WorkflowTaskKind.agent_call, { agent: "my-agent" });
+    render(<AgentCallForm node={node} onFieldChange={vi.fn()} />);
+    const input = screen.getByTestId("agent-call-agent-input") as HTMLInputElement;
+    expect(input.value).toBe("my-agent");
+  });
+
+  it("renders message textarea", () => {
+    const node = makeNode(WorkflowTaskKind.agent_call, { message: "Hello world" });
+    render(<AgentCallForm node={node} onFieldChange={vi.fn()} />);
+    const textarea = screen.getByTestId("agent-call-message-input") as HTMLTextAreaElement;
+    expect(textarea.value).toBe("Hello world");
+  });
+
+  it("renders model input from nested config", () => {
+    const node = makeNode(WorkflowTaskKind.agent_call, {
+      agent: "x",
+      message: "y",
+      config: { model: "claude-sonnet-4", timeout: 120 },
+    });
+    render(<AgentCallForm node={node} onFieldChange={vi.fn()} />);
+    const input = screen.getByTestId("agent-call-model-input") as HTMLInputElement;
+    expect(input.value).toBe("claude-sonnet-4");
+  });
+
+  it("shows structured output section when output is present", () => {
+    const node = makeNode(WorkflowTaskKind.agent_call, {
+      agent: "x",
+      message: "y",
+      output: { schema: { type: "object" }, on_invalid: "ON_INVALID_RETRY", max_retries: 2 },
+    });
+    render(<AgentCallForm node={node} onFieldChange={vi.fn()} />);
+    expect(screen.getByText("On invalid")).toBeTruthy();
+    expect(screen.getByText("Max retries")).toBeTruthy();
+  });
+
+  it("calls onFieldChange when agent input changes", () => {
+    const onFieldChange = vi.fn();
+    const node = makeNode(WorkflowTaskKind.agent_call, { agent: "old" });
+    render(<AgentCallForm node={node} onFieldChange={onFieldChange} />);
+
+    const input = screen.getByTestId("agent-call-agent-input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "new-agent" } });
+    expect(onFieldChange).toHaveBeenCalledWith("agent", "new-agent");
+  });
+
+  it("renders harness radio buttons", () => {
+    const node = makeNode(WorkflowTaskKind.agent_call, { agent: "x", message: "y", harness: "cursor" });
+    render(<AgentCallForm node={node} onFieldChange={vi.fn()} />);
+    expect(screen.getByText("Native")).toBeTruthy();
+    expect(screen.getByText("Cursor")).toBeTruthy();
+  });
+});
+
+describe("HttpCallForm", () => {
+  it("renders method dropdown and URL input", () => {
+    const node = makeNode(WorkflowTaskKind.http_call, {
+      method: "POST",
+      endpoint: { uri: "https://api.example.com" },
+    });
+    render(<HttpCallForm node={node} onFieldChange={vi.fn()} />);
+
+    const select = screen.getByTestId("http-call-method-select") as HTMLSelectElement;
+    expect(select.value).toBe("POST");
+
+    const urlInput = screen.getByTestId("http-call-url-input") as HTMLInputElement;
+    expect(urlInput.value).toBe("https://api.example.com");
+  });
+
+  it("shows body editor for POST method", () => {
+    const node = makeNode(WorkflowTaskKind.http_call, {
+      method: "POST",
+      endpoint: { uri: "https://api.example.com" },
+    });
+    render(<HttpCallForm node={node} onFieldChange={vi.fn()} />);
+    expect(screen.getByTestId("http-call-body-input")).toBeTruthy();
+  });
+
+  it("hides body editor for GET method", () => {
+    const node = makeNode(WorkflowTaskKind.http_call, {
+      method: "GET",
+      endpoint: { uri: "https://api.example.com" },
+    });
+    render(<HttpCallForm node={node} onFieldChange={vi.fn()} />);
+    expect(screen.queryByTestId("http-call-body-input")).toBeNull();
+  });
+
+  it("renders Add header button", () => {
+    const node = makeNode(WorkflowTaskKind.http_call, {
+      method: "GET",
+      endpoint: { uri: "https://api.example.com" },
+    });
+    render(<HttpCallForm node={node} onFieldChange={vi.fn()} />);
+    expect(screen.getByText("+ Add header")).toBeTruthy();
+  });
+
+  it("calls onFieldChange when method changes", () => {
+    const onFieldChange = vi.fn();
+    const node = makeNode(WorkflowTaskKind.http_call, {
+      method: "GET",
+      endpoint: { uri: "https://api.example.com" },
+    });
+    render(<HttpCallForm node={node} onFieldChange={onFieldChange} />);
+
+    const select = screen.getByTestId("http-call-method-select") as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: "PUT" } });
+    expect(onFieldChange).toHaveBeenCalledWith("method", "PUT");
+  });
+});

package/src/workflow/__tests__/inspector-tabs.test.ts

@@ -0,0 +1,116 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useInspectorTabs } from "../inspector/useInspectorTabs";
+import type { TaskKindDescriptor } from "../types";
+
+function makeDescriptor(overrides?: Partial<TaskKindDescriptor>): TaskKindDescriptor {
+  return {
+    kind: "agent_call",
+    displayName: "Agent Call",
+    description: "Invoke an AI agent",
+    category: "ai",
+    icon: "brain",
+    configProtoType: "AgentCallTaskConfig",
+    fields: [],
+    fieldGroups: [],
+    configJsonSchema: {},
+    documentationUrl: "/docs/agent-call",
+    isAiNative: true,
+    requiresExternalService: false,
+    ...overrides,
+  };
+}
+
+describe("useInspectorTabs", () => {
+  it("returns empty tabs when kindString is null", () => {
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: null, descriptor: undefined, mode: "design", nodeId: null }),
+    );
+    expect(result.current.tabs).toHaveLength(0);
+  });
+
+  it("returns empty tabs in execution mode", () => {
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: "agent_call", descriptor: makeDescriptor(), mode: "execution", nodeId: "n1" }),
+    );
+    expect(result.current.tabs).toHaveLength(0);
+  });
+
+  it("shows Configure, Data, Runtime, Advanced, Docs for agent_call with docs", () => {
+    const desc = makeDescriptor({ yamlExamples: ["example: yaml"] });
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: "agent_call", descriptor: desc, mode: "design", nodeId: "n1" }),
+    );
+    const ids = result.current.tabs.map((t) => t.id);
+    expect(ids).toEqual(["configure", "data", "runtime", "advanced", "docs"]);
+  });
+
+  it("shows Configure, Data, Runtime, Advanced for http_call without docs", () => {
+    const desc = makeDescriptor({
+      kind: "http_call",
+      category: "invocation",
+      documentationUrl: "",
+      yamlExamples: undefined,
+    });
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: "http_call", descriptor: desc, mode: "design", nodeId: "n2" }),
+    );
+    const ids = result.current.tabs.map((t) => t.id);
+    expect(ids).toEqual(["configure", "data", "runtime", "advanced"]);
+  });
+
+  it("shows Configure, Data, Advanced for set_vars (no Runtime)", () => {
+    const desc = makeDescriptor({
+      kind: "set_vars",
+      category: "data",
+      documentationUrl: "",
+    });
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: "set_vars", descriptor: desc, mode: "design", nodeId: "n3" }),
+    );
+    const ids = result.current.tabs.map((t) => t.id);
+    expect(ids).toEqual(["configure", "data", "advanced"]);
+  });
+
+  it("shows Runtime for fork (container kind)", () => {
+    const desc = makeDescriptor({ kind: "fork", category: "control_flow", documentationUrl: "" });
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: "fork", descriptor: desc, mode: "design", nodeId: "n4" }),
+    );
+    const ids = result.current.tabs.map((t) => t.id);
+    expect(ids).toContain("runtime");
+  });
+
+  it("defaults to configure tab", () => {
+    const { result } = renderHook(() =>
+      useInspectorTabs({ kindString: "agent_call", descriptor: makeDescriptor(), mode: "design", nodeId: "n1" }),
+    );
+    expect(result.current.activeTab).toBe("configure");
+  });
+
+  it("resets to configure when nodeId changes", () => {
+    const { result, rerender } = renderHook(
+      ({ nodeId }) =>
+        useInspectorTabs({ kindString: "agent_call", descriptor: makeDescriptor(), mode: "design", nodeId }),
+      { initialProps: { nodeId: "n1" } },
+    );
+
+    act(() => result.current.setActiveTab("advanced"));
+    expect(result.current.activeTab).toBe("advanced");
+
+    rerender({ nodeId: "n2" });
+    expect(result.current.activeTab).toBe("configure");
+  });
+
+  it("preserves tab when nodeId stays the same on rerender", () => {
+    const { result, rerender } = renderHook(
+      ({ nodeId }) =>
+        useInspectorTabs({ kindString: "agent_call", descriptor: makeDescriptor(), mode: "design", nodeId }),
+      { initialProps: { nodeId: "n1" } },
+    );
+
+    act(() => result.current.setActiveTab("data"));
+    rerender({ nodeId: "n1" });
+    expect(result.current.activeTab).toBe("data");
+  });
+});