();
+let nextResultRenderKey = 1;
+
+export function ToolResultRenderer({ response }: ToolResultRendererProps) {
+ const intl = useIntl();
+ const blocks = getToolResultContentBlocks(response);
+ const structuredOutput = getToolStructuredOutput(response);
+ const hasStructuredOutput = structuredOutput !== undefined;
+ const isError = getToolResultIsError(response);
+ const resultKey = getResultRenderKey(response);
+
+ if (blocks.length === 0 && !hasStructuredOutput) return null;
+
+ return (
+
+
+
+ {intl.formatMessage({ id: "tools.details.preview.result.title" })}
+
+ {isError && (
+
+ {intl.formatMessage({ id: "tools.details.preview.result.errorBadge" })}
+
+ )}
+
+
+
+
+ {hasStructuredOutput && (
+
+ )}
+
+ );
+}
+
+function ToolResultBlocks({
+ blocks,
+ resultKey,
+}: {
+ blocks: NormalizedToolContentBlock[];
+ resultKey: string;
+}) {
+ const intl = useIntl();
+ const [showAll, setShowAll] = useState(false);
+ const blockWindow = getToolResultBlockWindow(blocks);
+ const visibleBlocks = showAll ? blocks : blockWindow.visibleBlocks;
+
+ return (
+ <>
+ {visibleBlocks.map((block, index) => (
+
+ ))}
+
+ {!showAll && blockWindow.isLimited && (
+
+
+ {intl.formatMessage(
+ { id: "tools.details.preview.result.aggregateContent" },
+ {
+ visible: blockWindow.visibleBlocks.length,
+ total: blocks.length,
+ size: formatToolResultBytes(blockWindow.totalByteSize),
+ },
+ )}
+
+
+
+ )}
+
+ );
+}
+
+function ToolResultBlock({ block, index }: { block: NormalizedToolContentBlock; index: number }) {
+ const intl = useIntl();
+ const [expanded, setExpanded] = useState(!block.isLarge);
+ const blockNumber = index + 1;
+ const sizeLabel = formatToolResultBytes(block.byteSize);
+
+ return (
+
+
+
+
+ {intl.formatMessage(
+ { id: "tools.details.preview.result.blockTitle" },
+ { number: blockNumber },
+ )}
+
+
+ {block.type}
+
+
+
+ {block.mimeType}
+ -
+ {sizeLabel}
+
+
+
+ {intl.formatMessage(
+ { id: "tools.details.preview.result.largeContent" },
+ { size: sizeLabel },
+ )}
+
+
+
+ ) : (
+
+ )}
+
+ );
+}
+
+function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; index: number }) {
+ const intl = useIntl();
+ const downloadHref = getDataUrl(block);
+
+ if (block.mimeType.toLowerCase().startsWith("image/") && downloadHref) {
+ return (
+
+ 
+
+ {block.mimeType} - {formatToolResultBytes(block.byteSize)}
+
+
+ );
+ }
+
+ if (block.text !== undefined && isTextualMime(block.mimeType)) {
+ return (
+
+ );
+ }
+
+ if (block.mimeType.toLowerCase() === "application/pdf" && downloadHref) {
+ return (
+
+ );
+ }
+
+ if (downloadHref) {
+ return (
+
+ );
+ }
+
+ if (block.uri) {
+ return (
+
+
+ {intl.formatMessage({ id: "tools.details.preview.result.resourceUri" })}
+
+
{block.uri}
+
+
+ {intl.formatMessage(
+ { id: "tools.details.preview.result.largeContent" },
+ { size: sizeLabel },
+ )}
+
+
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
+
+function getResultRenderKey(response: ToolPreviewResponse): string {
+ const cached = resultRenderKeys.get(response);
+ if (cached !== undefined) return String(cached);
+
+ const nextKey = nextResultRenderKey;
+ nextResultRenderKey += 1;
+ resultRenderKeys.set(response, nextKey);
+ return String(nextKey);
+}
+
+function BinaryActions({
+ href,
+ downloadName,
+ openLabel,
+ downloadLabel,
+}: {
+ href: string;
+ downloadName: string;
+ openLabel?: string;
+ downloadLabel: string;
+}) {
+ return (
+
+ );
+}
+
+function stringifyJson(value: unknown): string {
+ try {
+ return JSON.stringify(value, null, 2) ?? "undefined";
+ } catch {
+ return String(value);
+ }
+}
diff --git a/src/components/tools/toolResultContent.test.ts b/src/components/tools/toolResultContent.test.ts
new file mode 100644
index 0000000..736bf1c
--- /dev/null
+++ b/src/components/tools/toolResultContent.test.ts
@@ -0,0 +1,204 @@
+import { describe, expect, it } from "vitest";
+
+import type { ToolPreviewResponse } from "@/api/tools";
+import {
+ codeLanguageForMime,
+ estimateJsonByteSize,
+ formatTextForMime,
+ formatToolResultBytes,
+ getDataUrl,
+ getToolResultBlockWindow,
+ getToolResultContentBlocks,
+ getToolResultIsError,
+ getToolStructuredOutput,
+ isTextualMime,
+ type NormalizedToolContentBlock,
+ TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES,
+ TOOL_RESULT_BLOCK_COUNT_LIMIT,
+} from "./toolResultContent";
+
+function makeBlock(
+ id: number,
+ byteSize: number,
+ overrides: Partial = {},
+): NormalizedToolContentBlock {
+ return {
+ type: "text",
+ mimeType: "text/plain",
+ text: `block ${id}`,
+ raw: `block ${id}`,
+ byteSize,
+ isLarge: byteSize > TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES,
+ ...overrides,
+ };
+}
+
+describe("toolResultContent", () => {
+ it("normalizes direct content blocks", () => {
+ const blocks = getToolResultContentBlocks({
+ content: [
+ { type: "text", text: "hello", mimeType: "text/plain" },
+ { type: "resource", resource: { uri: "file://a", text: '{"ok":true}' } },
+ ],
+ });
+
+ expect(blocks).toMatchObject([
+ { type: "text", mimeType: "text/plain", text: "hello", byteSize: 5, isLarge: false },
+ {
+ type: "resource",
+ mimeType: "text/plain",
+ text: '{"ok":true}',
+ uri: "file://a",
+ isLarge: false,
+ },
+ ]);
+ });
+
+ it("normalizes wrapped result payloads for live-invoke reuse", () => {
+ const response = {
+ result: {
+ content: [{ type: "text", text: "wrapped" }],
+ structured_output: { count: 1 },
+ isError: true,
+ },
+ } as ToolPreviewResponse;
+
+ expect(getToolResultContentBlocks(response)).toHaveLength(1);
+ expect(getToolStructuredOutput(response)).toEqual({ count: 1 });
+ expect(getToolResultIsError(response)).toBe(true);
+ });
+
+ it("normalizes alternate block shapes and skips invalid content entries", () => {
+ const response = {
+ tool_result: {
+ content: [
+ "string block",
+ null,
+ 7,
+ { content: "", mime: "application/xml" },
+ { blob: "data:text/plain;base64,Zm9v", mimeType: "text/plain" },
+ { resource: { uri: "file://report.pdf", mime_type: "application/pdf" } },
+ { metadata: { fallback: true } },
+ ],
+ is_error: true,
+ },
+ } as ToolPreviewResponse;
+
+ const blocks = getToolResultContentBlocks(response);
+
+ expect(blocks).toMatchObject([
+ { type: "text", mimeType: "text/plain", text: "string block" },
+ { type: "text", mimeType: "application/xml", text: "" },
+ { type: "blob", mimeType: "text/plain", data: "data:text/plain;base64,Zm9v" },
+ { type: "resource", mimeType: "application/pdf", uri: "file://report.pdf" },
+ { type: "unknown", mimeType: "application/octet-stream" },
+ ]);
+ expect(getToolResultIsError(response)).toBe(true);
+ expect(getDataUrl(blocks[2]!)).toBe("data:text/plain;base64,Zm9v");
+ expect(getDataUrl(blocks[3]!)).toBeNull();
+ });
+
+ it("handles empty payloads and alternate structured output names", () => {
+ expect(
+ getToolResultContentBlocks({ content: "not an array" } as unknown as ToolPreviewResponse),
+ ).toEqual([]);
+ expect(getToolResultContentBlocks({ output: { content: [] } } as ToolPreviewResponse)).toEqual(
+ [],
+ );
+ expect(
+ getToolStructuredOutput({
+ output: { structuredOutput: { status: "ok" } },
+ } as ToolPreviewResponse),
+ ).toEqual({ status: "ok" });
+ expect(getToolStructuredOutput({} as ToolPreviewResponse)).toBeUndefined();
+ expect(getToolResultIsError({ is_error: false } as ToolPreviewResponse)).toBe(false);
+ });
+
+ it("marks large blocks and formats byte sizes", () => {
+ const text = "x".repeat(TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES + 1);
+ const [block] = getToolResultContentBlocks({ content: [{ type: "text", text }] });
+
+ expect(block?.isLarge).toBe(true);
+ expect(formatToolResultBytes(100)).toBe("100 B");
+ expect(formatToolResultBytes(2 * 1024)).toBe("2 KB");
+ expect(formatToolResultBytes(2 * 1024 * 1024)).toBe("2.0 MB");
+ });
+
+ it("uses decoded binary sizes for data blocks", () => {
+ const [base64Block] = getToolResultContentBlocks({
+ content: [{ type: "blob", data: "AAECAw==", mimeType: "application/octet-stream" }],
+ });
+ const [dataUrlBlock] = getToolResultContentBlocks({
+ content: [
+ {
+ type: "image",
+ data: "data:image/png;base64,AAECAw==",
+ mimeType: "image/png",
+ },
+ ],
+ });
+
+ expect(base64Block?.byteSize).toBe(4);
+ expect(dataUrlBlock?.byteSize).toBe(4);
+ });
+
+ it("builds data URLs and pretty-prints JSON text", () => {
+ const [imageBlock] = getToolResultContentBlocks({
+ content: [{ type: "image", data: "abc", mimeType: "image/png" }],
+ });
+ const [textBlock] = getToolResultContentBlocks({
+ content: [{ type: "text", text: "plain" }],
+ });
+ const [emptyDataBlock] = getToolResultContentBlocks({
+ content: [{ type: "blob", data: "", mimeType: "application/octet-stream" }],
+ });
+
+ expect(imageBlock ? getDataUrl(imageBlock) : null).toBe("data:image/png;base64,abc");
+ expect(textBlock ? getDataUrl(textBlock) : null).toBe("data:text/plain;charset=utf-8,plain");
+ expect(emptyDataBlock ? getDataUrl(emptyDataBlock) : null).toBe(
+ "data:application/octet-stream;base64,",
+ );
+ expect(formatTextForMime('{"ok":true}', "application/json")).toBe('{\n "ok": true\n}');
+ expect(formatTextForMime("{bad", "application/json")).toBe("{bad");
+ });
+
+ it("limits visible blocks by count and aggregate size", () => {
+ const countLimited = getToolResultBlockWindow(
+ Array.from({ length: TOOL_RESULT_BLOCK_COUNT_LIMIT + 2 }, (_, index) => makeBlock(index, 1)),
+ );
+ const sizeLimited = getToolResultBlockWindow(
+ [makeBlock(1, 120), makeBlock(2, 120), makeBlock(3, 120)],
+ { maxTotalBytes: 250 },
+ );
+
+ expect(countLimited.visibleBlocks).toHaveLength(TOOL_RESULT_BLOCK_COUNT_LIMIT);
+ expect(countLimited.hiddenBlockCount).toBe(2);
+ expect(countLimited.isLimited).toBe(true);
+ expect(sizeLimited.visibleBlocks).toHaveLength(2);
+ expect(sizeLimited.hiddenBlockCount).toBe(1);
+ expect(sizeLimited.totalByteSize).toBe(360);
+ });
+
+ it("estimates JSON byte size with a cap", () => {
+ const value = { rows: ["alpha", "beta", "gamma"] };
+
+ expect(estimateJsonByteSize(value)).toBe(new Blob([JSON.stringify(value)]).size);
+ expect(estimateJsonByteSize({ value: "x".repeat(100) }, 10)).toBeGreaterThan(10);
+ });
+
+ it("classifies textual MIME types and code languages", () => {
+ expect(isTextualMime("text/csv")).toBe(true);
+ expect(isTextualMime("application/json")).toBe(true);
+ expect(isTextualMime("application/xml")).toBe(true);
+ expect(isTextualMime("application/javascript")).toBe(true);
+ expect(isTextualMime("application/x-yaml")).toBe(true);
+ expect(isTextualMime("application/yaml")).toBe(true);
+ expect(isTextualMime("image/png")).toBe(false);
+ expect(isTextualMime("image/svg+xml")).toBe(false);
+
+ expect(codeLanguageForMime("application/json")).toBe("json");
+ expect(codeLanguageForMime("application/xml")).toBe("xml");
+ expect(codeLanguageForMime("text/markdown")).toBe("markdown");
+ expect(codeLanguageForMime("text/plain")).toBe("text");
+ });
+});
diff --git a/src/components/tools/toolResultContent.ts b/src/components/tools/toolResultContent.ts
new file mode 100644
index 0000000..d96b654
--- /dev/null
+++ b/src/components/tools/toolResultContent.ts
@@ -0,0 +1,343 @@
+import type { ToolPreviewResponse, ToolResultContentBlock, ToolResultResource } from "@/api/tools";
+import type { CodeBlockLanguage } from "@/components/ui/code-block";
+
+export const TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES = 256 * 1024;
+export const TOOL_RESULT_TOTAL_SIZE_LIMIT_BYTES = 512 * 1024;
+export const TOOL_RESULT_BLOCK_COUNT_LIMIT = 20;
+export const TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES = 256 * 1024;
+
+const DEFAULT_MIME_TYPE = "application/octet-stream";
+
+export interface NormalizedToolContentBlock {
+ type: string;
+ mimeType: string;
+ text?: string;
+ data?: string;
+ uri?: string;
+ raw: ToolResultContentBlock | string;
+ byteSize: number;
+ isLarge: boolean;
+}
+
+export type ToolCodeLanguage = CodeBlockLanguage;
+
+export interface ToolResultBlockWindow {
+ visibleBlocks: NormalizedToolContentBlock[];
+ hiddenBlockCount: number;
+ totalByteSize: number;
+ isLimited: boolean;
+}
+
+export function getToolResultContentBlocks(
+ response: ToolPreviewResponse,
+): NormalizedToolContentBlock[] {
+ const payload = getToolResultPayload(response);
+ const content = payload.content;
+ if (!Array.isArray(content)) return [];
+
+ return content
+ .map((block) => normalizeToolContentBlock(block))
+ .filter((block): block is NormalizedToolContentBlock => block !== null);
+}
+
+export function getToolStructuredOutput(response: ToolPreviewResponse): unknown {
+ const payload = getToolResultPayload(response);
+ if (hasOwn(payload, "structured_output")) return payload.structured_output;
+ if (hasOwn(payload, "structuredOutput")) return payload.structuredOutput;
+ return undefined;
+}
+
+export function getToolResultIsError(response: ToolPreviewResponse): boolean {
+ const payload = getToolResultPayload(response);
+ return payload.isError === true || payload.is_error === true;
+}
+
+export function isTextualMime(mimeType: string): boolean {
+ const normalized = mimeType.toLowerCase();
+ if (normalized.startsWith("image/")) return false;
+ return (
+ normalized.startsWith("text/") ||
+ normalized.includes("json") ||
+ normalized.includes("xml") ||
+ normalized === "application/javascript" ||
+ normalized === "application/x-yaml" ||
+ normalized === "application/yaml"
+ );
+}
+
+export function codeLanguageForMime(mimeType: string): ToolCodeLanguage {
+ const normalized = mimeType.toLowerCase();
+ if (normalized.includes("json")) return "json";
+ if (normalized.includes("xml")) return "xml";
+ if (normalized.includes("markdown") || normalized.includes("md")) return "markdown";
+ return "text";
+}
+
+export function formatToolResultBytes(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+ return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function formatTextForMime(text: string, mimeType: string): string {
+ if (!mimeType.toLowerCase().includes("json")) return text;
+ try {
+ return JSON.stringify(JSON.parse(text), null, 2);
+ } catch {
+ return text;
+ }
+}
+
+export function getDataUrl(block: NormalizedToolContentBlock): string | null {
+ if (block.data !== undefined) {
+ if (block.data.startsWith("data:")) return block.data;
+ return `data:${block.mimeType};base64,${block.data}`;
+ }
+
+ if (block.text !== undefined) {
+ return `data:${block.mimeType};charset=utf-8,${encodeURIComponent(block.text)}`;
+ }
+
+ return null;
+}
+
+export function getToolResultBlockWindow(
+ blocks: NormalizedToolContentBlock[],
+ limits: {
+ maxBlocks?: number;
+ maxTotalBytes?: number;
+ } = {},
+): ToolResultBlockWindow {
+ const maxBlocks = limits.maxBlocks ?? TOOL_RESULT_BLOCK_COUNT_LIMIT;
+ const maxTotalBytes = limits.maxTotalBytes ?? TOOL_RESULT_TOTAL_SIZE_LIMIT_BYTES;
+ const totalByteSize = blocks.reduce((total, block) => total + block.byteSize, 0);
+ const visibleBlocks: NormalizedToolContentBlock[] = [];
+ let visibleByteSize = 0;
+
+ for (const block of blocks) {
+ if (visibleBlocks.length >= maxBlocks) break;
+ if (visibleBlocks.length > 0 && visibleByteSize + block.byteSize > maxTotalBytes) break;
+ visibleBlocks.push(block);
+ visibleByteSize += block.byteSize;
+ }
+
+ return {
+ visibleBlocks,
+ hiddenBlockCount: blocks.length - visibleBlocks.length,
+ totalByteSize,
+ isLimited: visibleBlocks.length < blocks.length,
+ };
+}
+
+export function estimateJsonByteSize(value: unknown, byteLimit = Infinity): number {
+ const seen = new WeakSet