feat(web): render structured tool payloads

2026-09-07 07:51:42 +01:00
parent 8c151a5fb2
commit 4a2f7e98b4
4 changed files with 425 additions and 45 deletions
@@ -171,19 +171,107 @@ describe("buildTranscriptRow: tool calls", () => {
    expect(head.getAttribute("aria-expanded")).toBe("false");
  });

-  it("shows raw command, input, and output as separately copyable details", () => {
+  it("renders command fields and keeps the exact JSON available", () => {
    const el = buildTranscriptRow(
      row("tool_call", {
        title: "Bash(test)",
-        rawInput: { command: "printf ok", timeout_ms: 1000 },
-        rawOutput: { stdout: "ok", exit_code: 0 },
+        rawInput: { command: "printf ok", cwd: "/workspace", timeout_ms: 1000 },
+        rawOutput: { formatted_output: "ok", exit_code: 0 },
      }),
    );
    (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
-    const labels = [...el.querySelectorAll(".st-tool-detail-label")].map((node) => node.textContent);
-    expect(labels).toEqual(["Command", "Input", "Output"]);
    expect(el.querySelector(".st-tool-detail pre")!.textContent).toBe("printf ok");
-    expect(el.querySelectorAll(".st-tool-detail pre[role=button]")).toHaveLength(3);
+    expect(el.querySelector(".st-tool-fact")!.textContent).toBe("Exit code0");
+    const raw = el.querySelector(".st-tool-raw") as HTMLDetailsElement;
+    expect(raw.open).toBe(false);
+    expect(raw.textContent).toContain('"timeout_ms": 1000');
+    expect(raw.textContent).toContain('"exit_code": 0');
+  });
+
+  it("renders MCP arguments and results without hiding the source payload", () => {
+    const el = buildTranscriptRow(
+      row("tool_call", {
+        title: "mcp.github.search",
+        rawInput: { server: "github", tool: "search", arguments: { query: "ACP" } },
+        rawOutput: { result: { count: 2 }, error: null },
+      }),
+    );
+    (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
+    const labels = [
+      ...el.querySelectorAll(
+        ".st-tool-out > .st-disclosure-clip > .st-disclosure-inner > .st-tool-detail",
+      ),
+    ].map((node) => node.querySelector(".st-tool-detail-label")?.textContent);
+    expect(labels).toEqual(["Arguments", "Result"]);
+    expect(el.querySelector(".st-tool-raw")!.textContent).toContain('"server": "github"');
+  });
+
+  it("renders a recognized web search query", () => {
+    const el = buildTranscriptRow(
+      row("tool_call", {
+        title: "Search the web",
+        rawInput: { type: "webSearch", query: "Agent Client Protocol", action: { type: "search" } },
+      }),
+    );
+    (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
+    expect(el.querySelector(".st-tool-detail-label")!.textContent).toBe("Query");
+    expect(el.querySelector(".st-tool-detail pre")!.textContent).toBe("Agent Client Protocol");
+  });
+
+  it("falls back to raw JSON for an unknown provider shape", () => {
+    const el = buildTranscriptRow(
+      row("tool_call", { title: "Custom", rawInput: { peculiar: [1, 2] }, rawOutput: "done" }),
+    );
+    (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
+    expect(
+      el.querySelectorAll(
+        ".st-tool-out > .st-disclosure-clip > .st-disclosure-inner > .st-tool-detail",
+      ),
+    ).toHaveLength(0);
+    expect(el.querySelector(".st-tool-raw")!.textContent).toContain('"peculiar"');
+    expect(el.querySelector(".st-tool-raw")!.textContent).toContain('"done"');
+  });
+
+  it("renders standardized content before provider-specific and raw data", () => {
+    const el = buildTranscriptRow(
+      row("tool_call", {
+        title: "Bash(test)",
+        content: [
+          { type: "content", content: { type: "text", text: "typed result" } },
+          { type: "content", content: { type: "resource_link", name: "report", uri: "file:///tmp/report" } },
+          { type: "terminal", terminalId: "term-1" },
+        ],
+        rawInput: { command: "test" },
+        rawOutput: { formatted_output: "typed result", exit_code: 0 },
+      }),
+    );
+    (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
+    const inner = el.querySelector(".st-tool-out > .st-disclosure-clip > .st-disclosure-inner")!;
+    expect([...inner.children].map((node) => node.className)).toEqual([
+      "st-tool-text st-copyable",
+      "st-tool-resource",
+      "st-tool-terminal",
+      "st-tool-detail",
+      "st-tool-fact",
+      "st-tool-raw",
+    ]);
+    expect(el.querySelector(".st-tool-resource")!.textContent).toContain("file:///tmp/report");
+    expect(el.querySelector(".st-tool-terminal")!.textContent).toBe("Terminal · term-1");
+  });
+
+  it("renders safe typed image and audio blocks as media controls", () => {
+    const el = buildTranscriptRow(
+      row("tool_call", {
+        title: "Media",
+        content: [
+          { type: "content", content: { type: "image", mimeType: "image/png", data: "aW1hZ2U=" } },
+          { type: "content", content: { type: "audio", mimeType: "audio/mpeg", data: "YXVkaW8=" } },
+        ],
+      }),
+    );
+    (el.querySelector(".st-tool-head") as HTMLButtonElement).click();
+    expect((el.querySelector(".st-tool-image") as HTMLImageElement).src).toBe("data:image/png;base64,aW1hZ2U=");
+    expect((el.querySelector(".st-tool-audio") as HTMLAudioElement).src).toBe("data:audio/mpeg;base64,YXVkaW8=");
  });
 });