From cdd7b77248b17f43b4a54c65dbc9770f7883bd8a Mon Sep 17 00:00:00 2001
From: Pratik Gandhi <gandhipratik203@gmail.com>
Date: Thu, 20 Aug 2026 15:52:41 +0100
Subject: [PATCH 1/4] feat: render tool preview results

Signed-off-by: Pratik Gandhi <gandhipratik203@gmail.com>
---
 e2e/tools.spec.ts                             |  14 +-
 src/api/tools.ts                              |  27 ++
 .../tools/ToolPreviewResult.test.tsx          |  47 ++++
 src/components/tools/ToolPreviewResult.tsx    |  77 ++++--
 .../tools/ToolResultRenderer.test.tsx         |  85 ++++++
 src/components/tools/ToolResultRenderer.tsx   | 253 ++++++++++++++++++
 .../tools/toolResultContent.test.ts           |  72 +++++
 src/components/tools/toolResultContent.ts     | 206 ++++++++++++++
 src/i18n/locales/en-US/tools.json             |  14 +
 src/i18n/locales/es-ES/tools.json             |  14 +
 src/i18n/locales/pt-BR/tools.json             |  14 +
 11 files changed, 805 insertions(+), 18 deletions(-)
 create mode 100644 src/components/tools/ToolResultRenderer.test.tsx
 create mode 100644 src/components/tools/ToolResultRenderer.tsx
 create mode 100644 src/components/tools/toolResultContent.test.ts
 create mode 100644 src/components/tools/toolResultContent.ts

diff --git a/e2e/tools.spec.ts b/e2e/tools.spec.ts
index 727fe5a..faeb10e 100644
--- a/e2e/tools.spec.ts
+++ b/e2e/tools.spec.ts
@@ -317,9 +317,14 @@ test.describe("Tools page", () => {
         body: JSON.stringify({
           target: { kind: "local" },
           resolved_arguments: { query: "cloudflare", limit: 5 },
+          content: [
+            { type: "text", text: "Found 2 matching issues", mimeType: "text/plain" },
+            { type: "text", text: '{"total":2}', mimeType: "application/json" },
+          ],
+          structured_output: { total: 2, query: "cloudflare" },
           annotations: { readOnlyHint: true },
           pre_hooks_run: [],
-          warnings: [],
+          warnings: [{ code: "elicitation_skipped", hooks: ["approval_hook"] }],
         }),
       });
     });
@@ -346,6 +351,13 @@ test.describe("Tools page", () => {
     await previewButton.click();
 
     await expect(panel.getByText("Preview 200")).toBeVisible();
+    await expect(panel.getByText("Warnings")).toBeVisible();
+    await expect(
+      panel.getByText("Live invocation may request user input; preview skipped approval_hook."),
+    ).toBeVisible();
+    await expect(panel.getByText("Tool result")).toBeVisible();
+    await expect(panel.getByText("Found 2 matching issues")).toBeVisible();
+    await expect(panel.getByText("Structured output")).toBeVisible();
     await expect(panel.getByText("Resolved arguments")).toBeVisible();
     expect(previewBody).toEqual({ arguments: { query: "cloudflare", limit: 5 } });
     expect(previewHeaders["x-tenant-id"]).toBe("team-a");
diff --git a/src/api/tools.ts b/src/api/tools.ts
index 5beb407..d8ac29a 100644
--- a/src/api/tools.ts
+++ b/src/api/tools.ts
@@ -51,8 +51,35 @@ export interface ToolPreviewTarget {
   [key: string]: unknown;
 }
 
+export interface ToolResultResource {
+  uri?: string;
+  mimeType?: string;
+  mime_type?: string;
+  text?: string;
+  blob?: string;
+  data?: string;
+  [key: string]: unknown;
+}
+
+export interface ToolResultContentBlock {
+  type?: string;
+  text?: string;
+  data?: string;
+  blob?: string;
+  mimeType?: string;
+  mime_type?: string;
+  uri?: string;
+  resource?: ToolResultResource;
+  [key: string]: unknown;
+}
+
 export interface ToolPreviewResponse {
+  content?: ToolResultContentBlock[];
   resolved_arguments?: Record<string, unknown>;
+  structured_output?: unknown;
+  structuredOutput?: unknown;
+  isError?: boolean;
+  is_error?: boolean;
   target?: "local" | "federated" | ToolPreviewTarget | null;
   annotations?: Record<string, unknown> | null;
   pre_hooks_run?: unknown[] | number | null;
diff --git a/src/components/tools/ToolPreviewResult.test.tsx b/src/components/tools/ToolPreviewResult.test.tsx
index 6ca9e87..c7976d0 100644
--- a/src/components/tools/ToolPreviewResult.test.tsx
+++ b/src/components/tools/ToolPreviewResult.test.tsx
@@ -33,6 +33,7 @@ describe("ToolPreviewResult", () => {
             preview: {
               target: { kind: "federated", gateway_name: "github" },
               resolved_arguments: { query: "cloudflare" },
+              content: [{ type: "text", text: "found issue", mimeType: "text/plain" }],
               warnings: [{ code: "elicitation_skipped", message: "approval skipped" }],
             },
           },
@@ -45,6 +46,8 @@ describe("ToolPreviewResult", () => {
     expect(screen.getByText("federated: github")).toBeInTheDocument();
     expect(screen.getByText("Warnings")).toBeInTheDocument();
     expect(screen.getByText("approval skipped")).toBeInTheDocument();
+    expect(screen.getByText("Tool result")).toBeInTheDocument();
+    expect(screen.getByText("found issue")).toBeInTheDocument();
     expect(screen.getByText("Resolved arguments")).toBeInTheDocument();
     expect(screen.getByText("Raw preview response")).toBeInTheDocument();
   });
@@ -86,6 +89,50 @@ describe("ToolPreviewResult", () => {
     expect(screen.queryByText("Resolved arguments")).not.toBeInTheDocument();
   });
 
+  it("renders elicitation skipped warnings without backend messages", () => {
+    render(
+      <ToolPreviewResult
+        preview={previewProps({
+          hasRun: true,
+          result: {
+            status: 200,
+            renderTimeMs: 0,
+            preview: {
+              target: "local",
+              warnings: [{ code: "elicitation_skipped", hooks: ["approval_hook"] }],
+            },
+          },
+        })}
+      />,
+    );
+
+    expect(
+      screen.getByText("Live invocation may request user input; preview skipped approval_hook."),
+    ).toBeInTheDocument();
+  });
+
+  it("renders tool error results without treating the HTTP request as failed", () => {
+    render(
+      <ToolPreviewResult
+        preview={previewProps({
+          hasRun: true,
+          result: {
+            status: 200,
+            renderTimeMs: 5,
+            preview: {
+              content: [{ type: "text", text: "tool failed", mimeType: "text/plain" }],
+              isError: true,
+            },
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByText("Preview 200")).toBeInTheDocument();
+    expect(screen.getByText("Error response")).toBeInTheDocument();
+    expect(screen.getByText("tool failed")).toBeInTheDocument();
+  });
+
   it("renders generic failures without an HTTP status", () => {
     render(
       <ToolPreviewResult
diff --git a/src/components/tools/ToolPreviewResult.tsx b/src/components/tools/ToolPreviewResult.tsx
index bee89f6..0747af3 100644
--- a/src/components/tools/ToolPreviewResult.tsx
+++ b/src/components/tools/ToolPreviewResult.tsx
@@ -3,9 +3,17 @@ import { useIntl } from "react-intl";
 
 import { Badge } from "@/components/ui/badge";
 import { CodeBlock } from "@/components/ui/code-block";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
 import type { ToolPreviewState } from "@/hooks/useToolPreview";
-import type { ToolPreviewTarget } from "@/api/tools";
+import type { ToolPreviewTarget, ToolPreviewWarning } from "@/api/tools";
+import { ToolResultRenderer } from "./ToolResultRenderer";
+import { getToolResultIsError } from "./toolResultContent";
 
 export interface ToolPreviewResultProps {
   preview: Pick<ToolPreviewState, "result" | "error" | "hasRun">;
@@ -18,7 +26,10 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
   if (!hasRun) return null;
 
   const renderTimeMs = result?.renderTimeMs ?? error?.renderTimeMs ?? 0;
+  const response = result?.preview;
+  const toolResultIsError = response ? getToolResultIsError(response) : false;
   const succeeded = result !== null;
+  const statusOk = succeeded && !toolResultIsError;
   const statusCode = result?.status ?? error?.status ?? null;
   const statusLabel = succeeded
     ? intl.formatMessage({ id: "tools.details.preview.statusOk" }, { status: statusCode ?? 200 })
@@ -29,7 +40,6 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
         )
       : intl.formatMessage({ id: "tools.details.preview.statusError" });
 
-  const response = result?.preview;
   const target = response ? formatTarget(response.target) : null;
   const warnings = response?.warnings ?? [];
 
@@ -40,12 +50,12 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
         aria-live="polite"
         className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]"
       >
-        {succeeded ? (
+        {statusOk ? (
           <CheckCircle2 className="size-4 text-tool-status-active" />
         ) : (
           <AlertCircle className="size-4 text-destructive" />
         )}
-        <span className={cn("font-medium", succeeded ? "text-foreground" : "text-destructive")}>
+        <span className={cn("font-medium", statusOk ? "text-foreground" : "text-destructive")}>
           {statusLabel}
         </span>
         <span className="text-muted-foreground" aria-hidden="true">
@@ -70,15 +80,15 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
           <ul className="mt-2 space-y-1 text-muted-foreground">
             {warnings.map((warning, index) => (
               <li key={`${warning.code ?? "warning"}-${index}`}>
-                {warning.message ??
-                  warning.code ??
-                  intl.formatMessage({ id: "tools.details.preview.warnings.generic" })}
+                {formatWarning(warning, intl.formatMessage)}
               </li>
             ))}
           </ul>
         </div>
       )}
 
+      {response && <ToolResultRenderer response={response} />}
+
       {response?.resolved_arguments && (
         <section className="space-y-2">
           <h4 className="text-sm font-semibold text-foreground">
@@ -93,16 +103,21 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
       )}
 
       {response && (
-        <section className="space-y-2">
-          <h4 className="text-sm font-semibold text-foreground">
-            {intl.formatMessage({ id: "tools.details.preview.rawResponse" })}
-          </h4>
-          <CodeBlock
-            code={JSON.stringify(response, null, 2)}
-            language="json"
-            copyLabel={intl.formatMessage({ id: "tools.details.preview.copyRawResponse" })}
-          />
-        </section>
+        <Accordion type="single" collapsible className="rounded-md border border-border">
+          <AccordionItem value="raw-response" className="border-b-0 px-3">
+            <AccordionTrigger className="py-3 hover:no-underline">
+              {intl.formatMessage({ id: "tools.details.preview.rawResponse" })}
+            </AccordionTrigger>
+            <AccordionContent>
+              <CodeBlock
+                code={JSON.stringify(response, null, 2)}
+                language="json"
+                copyLabel={intl.formatMessage({ id: "tools.details.preview.copyRawResponse" })}
+                copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       )}
 
       {error && (
@@ -114,6 +129,34 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
   );
 }
 
+function formatWarning(
+  warning: ToolPreviewWarning,
+  formatMessage: (descriptor: { id: string }, values?: Record<string, string>) => string,
+) {
+  if (warning.code === "elicitation_skipped") {
+    const hooks = formatWarningHooks(warning);
+    return (
+      warning.message ??
+      formatMessage({ id: "tools.details.preview.warnings.elicitationSkipped" }, { hooks })
+    );
+  }
+
+  return (
+    warning.message ??
+    warning.code ??
+    formatMessage({ id: "tools.details.preview.warnings.generic" })
+  );
+}
+
+function formatWarningHooks(warning: ToolPreviewWarning) {
+  const hooks = [
+    typeof warning.hook === "string" ? warning.hook : null,
+    ...(Array.isArray(warning.hooks) ? warning.hooks : []),
+  ].filter((hook): hook is string => typeof hook === "string" && hook.length > 0);
+
+  return hooks.length > 0 ? hooks.join(", ") : "one or more hooks";
+}
+
 function formatTarget(target: ToolPreviewTarget | "local" | "federated" | null | undefined) {
   if (!target) return null;
   if (typeof target === "string") return target;
diff --git a/src/components/tools/ToolResultRenderer.test.tsx b/src/components/tools/ToolResultRenderer.test.tsx
new file mode 100644
index 0000000..f9edf30
--- /dev/null
+++ b/src/components/tools/ToolResultRenderer.test.tsx
@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders as render } from "@/test/test-utils";
+import { ToolResultRenderer } from "./ToolResultRenderer";
+import { TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES } from "./toolResultContent";
+
+describe("ToolResultRenderer", () => {
+  it("renders text, JSON, structured output, and error badges", () => {
+    const { container } = render(
+      <ToolResultRenderer
+        response={{
+          content: [
+            { type: "text", text: "plain result", mimeType: "text/plain" },
+            { type: "text", text: '{"ok":true}', mimeType: "application/json" },
+          ],
+          structured_output: { total: 2 },
+          isError: true,
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Tool result")).toBeInTheDocument();
+    expect(screen.getByText("Error response")).toBeInTheDocument();
+    expect(screen.getByText("Content block 1")).toBeInTheDocument();
+    expect(screen.getByText("Content block 2")).toBeInTheDocument();
+    expect(screen.getByText("Structured output")).toBeInTheDocument();
+    expect(container.textContent).toContain("plain result");
+    expect(container.textContent).toContain('"ok": true');
+    expect(container.textContent).toContain('"total": 2');
+  });
+
+  it("renders image content inline", () => {
+    render(
+      <ToolResultRenderer
+        response={{
+          content: [
+            {
+              type: "image",
+              data: "iVBORw0KGgo=",
+              mimeType: "image/png",
+            },
+          ],
+        }}
+      />,
+    );
+
+    const image = screen.getByRole("img", { name: "Tool result image 1" });
+    expect(image).toHaveAttribute("src", "data:image/png;base64,iVBORw0KGgo=");
+    expect(screen.getAllByText(/image\/png/).length).toBeGreaterThan(0);
+  });
+
+  it("renders binary content as a download action", () => {
+    render(
+      <ToolResultRenderer
+        response={{
+          content: [{ type: "blob", data: "AAECAw==", mimeType: "application/octet-stream" }],
+        }}
+      />,
+    );
+
+    expect(screen.getByRole("link", { name: /Download raw/i })).toHaveAttribute(
+      "href",
+      "data:application/octet-stream;base64,AAECAw==",
+    );
+  });
+
+  it("keeps large text collapsed until requested", async () => {
+    const user = userEvent.setup();
+    const hiddenText = `${"x".repeat(TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES)} hidden payload`;
+    const { container } = render(
+      <ToolResultRenderer
+        response={{ content: [{ type: "text", text: hiddenText, mimeType: "text/plain" }] }}
+      />,
+    );
+
+    expect(screen.getByText(/Large content hidden/)).toBeInTheDocument();
+    expect(container.textContent).not.toContain("hidden payload");
+
+    await user.click(screen.getByRole("button", { name: "View all" }));
+
+    expect(container.textContent).toContain("hidden payload");
+  });
+});
diff --git a/src/components/tools/ToolResultRenderer.tsx b/src/components/tools/ToolResultRenderer.tsx
new file mode 100644
index 0000000..874805c
--- /dev/null
+++ b/src/components/tools/ToolResultRenderer.tsx
@@ -0,0 +1,253 @@
+import { useState } from "react";
+import { Download, ExternalLink } from "lucide-react";
+import { useIntl } from "react-intl";
+
+import type { ToolPreviewResponse } from "@/api/tools";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CodeBlock } from "@/components/ui/code-block";
+import {
+  codeLanguageForMime,
+  formatTextForMime,
+  formatToolResultBytes,
+  getDataUrl,
+  getToolResultContentBlocks,
+  getToolResultIsError,
+  getToolStructuredOutput,
+  isTextualMime,
+  type NormalizedToolContentBlock,
+} from "./toolResultContent";
+
+export interface ToolResultRendererProps {
+  response: ToolPreviewResponse;
+}
+
+export function ToolResultRenderer({ response }: ToolResultRendererProps) {
+  const intl = useIntl();
+  const blocks = getToolResultContentBlocks(response);
+  const structuredOutput = getToolStructuredOutput(response);
+  const hasStructuredOutput = structuredOutput !== undefined;
+  const isError = getToolResultIsError(response);
+
+  if (blocks.length === 0 && !hasStructuredOutput) return null;
+
+  return (
+    <section className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <h4 className="text-sm font-semibold text-foreground">
+          {intl.formatMessage({ id: "tools.details.preview.result.title" })}
+        </h4>
+        {isError && (
+          <Badge variant="destructive" className="rounded-full px-2 py-0 text-[11px]">
+            {intl.formatMessage({ id: "tools.details.preview.result.errorBadge" })}
+          </Badge>
+        )}
+      </div>
+
+      {blocks.map((block, index) => (
+        <ToolResultBlock
+          key={`${block.type}-${block.mimeType}-${index}`}
+          block={block}
+          index={index}
+        />
+      ))}
+
+      {hasStructuredOutput && (
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue="structured-output"
+          className="rounded-md border border-border"
+        >
+          <AccordionItem value="structured-output" className="border-b-0 px-3">
+            <AccordionTrigger className="py-3 hover:no-underline">
+              {intl.formatMessage({ id: "tools.details.preview.result.structuredOutput" })}
+            </AccordionTrigger>
+            <AccordionContent>
+              <CodeBlock
+                code={stringifyJson(structuredOutput)}
+                language="json"
+                copyLabel={intl.formatMessage({
+                  id: "tools.details.preview.result.copyStructuredOutput",
+                })}
+                copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </section>
+  );
+}
+
+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 (
+    <article
+      aria-label={intl.formatMessage(
+        { id: "tools.details.preview.result.blockAriaLabel" },
+        { number: blockNumber },
+      )}
+      className="space-y-3 rounded-md border border-border bg-muted/20 p-3"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          <h5 className="text-[13px] font-semibold text-foreground">
+            {intl.formatMessage(
+              { id: "tools.details.preview.result.blockTitle" },
+              { number: blockNumber },
+            )}
+          </h5>
+          <Badge variant="outline" className="rounded-full px-2 py-0 text-[11px]">
+            {block.type}
+          </Badge>
+        </div>
+        <div className="flex flex-wrap items-center gap-2 text-[12px] text-muted-foreground">
+          <span>{block.mimeType}</span>
+          <span aria-hidden="true">-</span>
+          <span>{sizeLabel}</span>
+        </div>
+      </div>
+
+      {block.isLarge && !expanded ? (
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background p-3 text-[13px]">
+          <span className="text-muted-foreground">
+            {intl.formatMessage(
+              { id: "tools.details.preview.result.largeContent" },
+              { size: sizeLabel },
+            )}
+          </span>
+          <Button type="button" variant="outline" size="xs" onClick={() => setExpanded(true)}>
+            {intl.formatMessage({ id: "tools.details.preview.result.viewAll" })}
+          </Button>
+        </div>
+      ) : (
+        <RenderedBlock block={block} index={index} />
+      )}
+    </article>
+  );
+}
+
+function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; index: number }) {
+  const intl = useIntl();
+  const downloadHref = getDataUrl(block);
+
+  if (block.text !== undefined && isTextualMime(block.mimeType)) {
+    return (
+      <CodeBlock
+        code={formatTextForMime(block.text, block.mimeType)}
+        language={codeLanguageForMime(block.mimeType)}
+        copyLabel={intl.formatMessage({ id: "tools.details.preview.result.copyBlock" })}
+        copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
+      />
+    );
+  }
+
+  if (block.mimeType.toLowerCase().startsWith("image/") && downloadHref) {
+    return (
+      <figure className="space-y-2">
+        <img
+          src={downloadHref}
+          alt={intl.formatMessage(
+            { id: "tools.details.preview.result.imageAlt" },
+            { number: index + 1 },
+          )}
+          className="max-h-80 max-w-full rounded-md border border-border bg-background object-contain"
+        />
+        <figcaption className="text-[12px] text-muted-foreground">
+          {block.mimeType} - {formatToolResultBytes(block.byteSize)}
+        </figcaption>
+      </figure>
+    );
+  }
+
+  if (block.mimeType.toLowerCase() === "application/pdf" && downloadHref) {
+    return (
+      <BinaryActions
+        href={downloadHref}
+        downloadName={`tool-result-${index + 1}.pdf`}
+        openLabel={intl.formatMessage({ id: "tools.details.preview.result.openInNewTab" })}
+        downloadLabel={intl.formatMessage({ id: "tools.details.preview.result.downloadRaw" })}
+      />
+    );
+  }
+
+  if (downloadHref) {
+    return (
+      <BinaryActions
+        href={downloadHref}
+        downloadName={`tool-result-${index + 1}`}
+        downloadLabel={intl.formatMessage({ id: "tools.details.preview.result.downloadRaw" })}
+      />
+    );
+  }
+
+  if (block.uri) {
+    return (
+      <div className="rounded-md border border-border bg-background p-3 text-[13px]">
+        <div className="text-muted-foreground">
+          {intl.formatMessage({ id: "tools.details.preview.result.resourceUri" })}
+        </div>
+        <div className="mt-1 break-all font-mono text-[12px] text-foreground">{block.uri}</div>
+      </div>
+    );
+  }
+
+  return (
+    <CodeBlock
+      code={stringifyJson(block.raw)}
+      language="json"
+      copyLabel={intl.formatMessage({ id: "tools.details.preview.result.copyBlock" })}
+      copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
+    />
+  );
+}
+
+function BinaryActions({
+  href,
+  downloadName,
+  openLabel,
+  downloadLabel,
+}: {
+  href: string;
+  downloadName: string;
+  openLabel?: string;
+  downloadLabel: string;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-md border border-border bg-background p-3">
+      {openLabel && (
+        <Button asChild variant="outline" size="sm">
+          <a href={href} target="_blank" rel="noreferrer">
+            <ExternalLink className="size-4" />
+            {openLabel}
+          </a>
+        </Button>
+      )}
+      <Button asChild variant="outline" size="sm">
+        <a href={href} download={downloadName}>
+          <Download className="size-4" />
+          {downloadLabel}
+        </a>
+      </Button>
+    </div>
+  );
+}
+
+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..4018be5
--- /dev/null
+++ b/src/components/tools/toolResultContent.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+
+import type { ToolPreviewResponse } from "@/api/tools";
+import {
+  formatTextForMime,
+  formatToolResultBytes,
+  getDataUrl,
+  getToolResultContentBlocks,
+  getToolResultIsError,
+  getToolStructuredOutput,
+  TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES,
+} from "./toolResultContent";
+
+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("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("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" }],
+    });
+
+    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(formatTextForMime('{"ok":true}', "application/json")).toBe('{\n  "ok": true\n}');
+    expect(formatTextForMime("{bad", "application/json")).toBe("{bad");
+  });
+});
diff --git a/src/components/tools/toolResultContent.ts b/src/components/tools/toolResultContent.ts
new file mode 100644
index 0000000..f26f87c
--- /dev/null
+++ b/src/components/tools/toolResultContent.ts
@@ -0,0 +1,206 @@
+import type { ToolPreviewResponse, ToolResultContentBlock, ToolResultResource } from "@/api/tools";
+
+export const TOOL_RESULT_BLOCK_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 = "bash" | "json" | "tsx";
+
+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();
+  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 "tsx";
+  return "bash";
+}
+
+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) {
+    if (block.data.startsWith("data:")) return block.data;
+    return `data:${block.mimeType};base64,${block.data}`;
+  }
+
+  if (block.text) {
+    return `data:${block.mimeType};charset=utf-8,${encodeURIComponent(block.text)}`;
+  }
+
+  return null;
+}
+
+function getToolResultPayload(response: ToolPreviewResponse): Record<string, unknown> {
+  if (isToolResultPayload(response)) return response;
+
+  for (const key of ["result", "tool_result", "toolResult", "output"]) {
+    const candidate = response[key];
+    if (isRecord(candidate) && isToolResultPayload(candidate)) return candidate;
+  }
+
+  return response;
+}
+
+function isToolResultPayload(value: Record<string, unknown>): boolean {
+  return (
+    Array.isArray(value.content) ||
+    hasOwn(value, "structured_output") ||
+    hasOwn(value, "structuredOutput") ||
+    hasOwn(value, "isError") ||
+    hasOwn(value, "is_error")
+  );
+}
+
+function normalizeToolContentBlock(value: unknown): NormalizedToolContentBlock | null {
+  if (typeof value === "string") {
+    return buildNormalizedBlock({
+      type: "text",
+      mimeType: "text/plain",
+      text: value,
+      raw: value,
+    });
+  }
+
+  if (!isRecord(value)) return null;
+
+  const resource = isRecord(value.resource) ? (value.resource as ToolResultResource) : null;
+  const type = pickString(value, "type") ?? inferType(value, resource);
+  const mimeType =
+    pickString(value, "mimeType", "mime_type", "mime") ?? pickMimeFromResource(resource);
+  const text = pickString(value, "text", "content") ?? pickString(resource, "text");
+  const data = pickString(value, "data", "blob") ?? pickString(resource, "data", "blob");
+  const uri = pickString(value, "uri") ?? pickString(resource, "uri");
+
+  return buildNormalizedBlock({
+    type,
+    mimeType: mimeType ?? inferMimeType(type, text),
+    text,
+    data,
+    uri,
+    raw: value,
+  });
+}
+
+function buildNormalizedBlock(input: {
+  type: string;
+  mimeType: string;
+  text?: string;
+  data?: string;
+  uri?: string;
+  raw: ToolResultContentBlock | string;
+}): NormalizedToolContentBlock {
+  const byteSize = getBlockByteSize(input);
+  return {
+    ...input,
+    byteSize,
+    isLarge: byteSize > TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES,
+  };
+}
+
+function getBlockByteSize(input: {
+  text?: string;
+  data?: string;
+  raw: ToolResultContentBlock | string;
+}): number {
+  if (input.text !== undefined) return getStringByteSize(input.text);
+  if (input.data !== undefined) return getStringByteSize(input.data);
+  return getStringByteSize(JSON.stringify(input.raw));
+}
+
+function getStringByteSize(value: string | undefined): number {
+  if (!value) return 0;
+  return new Blob([value]).size;
+}
+
+function inferType(value: Record<string, unknown>, resource: ToolResultResource | null): string {
+  if (pickString(value, "text") || pickString(resource, "text")) return "text";
+  if (pickString(value, "data", "blob") || pickString(resource, "data", "blob")) return "blob";
+  if (resource) return "resource";
+  return "unknown";
+}
+
+function inferMimeType(type: string, text: string | undefined): string {
+  if (type === "text") return "text/plain";
+  if (type === "image") return "image/png";
+  if (text !== undefined) return "text/plain";
+  return DEFAULT_MIME_TYPE;
+}
+
+function pickMimeFromResource(resource: ToolResultResource | null): string | undefined {
+  return pickString(resource, "mimeType", "mime_type", "mime");
+}
+
+function pickString(value: Record<string, unknown> | null, ...keys: string[]): string | undefined {
+  if (!value) return undefined;
+  for (const key of keys) {
+    const field = value[key];
+    if (typeof field === "string") return field;
+  }
+  return undefined;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function hasOwn(value: Record<string, unknown>, key: string): boolean {
+  return Object.prototype.hasOwnProperty.call(value, key);
+}
diff --git a/src/i18n/locales/en-US/tools.json b/src/i18n/locales/en-US/tools.json
index da298c4..bba935d 100644
--- a/src/i18n/locales/en-US/tools.json
+++ b/src/i18n/locales/en-US/tools.json
@@ -73,8 +73,22 @@
   "tools.details.preview.renderMs": "{ms} ms",
   "tools.details.preview.warnings.title": "Warnings",
   "tools.details.preview.warnings.generic": "Preview returned a warning",
+  "tools.details.preview.warnings.elicitationSkipped": "Live invocation may request user input; preview skipped {hooks}.",
   "tools.details.preview.resolvedArguments": "Resolved arguments",
   "tools.details.preview.copyResolvedArguments": "Copy resolved arguments",
+  "tools.details.preview.result.title": "Tool result",
+  "tools.details.preview.result.errorBadge": "Error response",
+  "tools.details.preview.result.blockTitle": "Content block {number}",
+  "tools.details.preview.result.blockAriaLabel": "Tool result content block {number}",
+  "tools.details.preview.result.copyBlock": "Copy content block",
+  "tools.details.preview.result.imageAlt": "Tool result image {number}",
+  "tools.details.preview.result.largeContent": "Large content hidden ({size}).",
+  "tools.details.preview.result.viewAll": "View all",
+  "tools.details.preview.result.openInNewTab": "Open in new tab",
+  "tools.details.preview.result.downloadRaw": "Download raw",
+  "tools.details.preview.result.resourceUri": "Resource URI",
+  "tools.details.preview.result.structuredOutput": "Structured output",
+  "tools.details.preview.result.copyStructuredOutput": "Copy structured output",
   "tools.details.preview.rawResponse": "Raw preview response",
   "tools.details.preview.copyRawResponse": "Copy raw preview response",
   "tools.details.preview.copied": "Copied!",
diff --git a/src/i18n/locales/es-ES/tools.json b/src/i18n/locales/es-ES/tools.json
index 652aba0..f2f371e 100644
--- a/src/i18n/locales/es-ES/tools.json
+++ b/src/i18n/locales/es-ES/tools.json
@@ -73,8 +73,22 @@
   "tools.details.preview.renderMs": "{ms} ms",
   "tools.details.preview.warnings.title": "Advertencias",
   "tools.details.preview.warnings.generic": "La vista previa devolvió una advertencia",
+  "tools.details.preview.warnings.elicitationSkipped": "La invocación en vivo puede solicitar datos al usuario; la vista previa omitió {hooks}.",
   "tools.details.preview.resolvedArguments": "Argumentos resueltos",
   "tools.details.preview.copyResolvedArguments": "Copiar argumentos resueltos",
+  "tools.details.preview.result.title": "Resultado de la herramienta",
+  "tools.details.preview.result.errorBadge": "Respuesta de error",
+  "tools.details.preview.result.blockTitle": "Bloque de contenido {number}",
+  "tools.details.preview.result.blockAriaLabel": "Bloque de contenido de resultado de herramienta {number}",
+  "tools.details.preview.result.copyBlock": "Copiar bloque de contenido",
+  "tools.details.preview.result.imageAlt": "Imagen de resultado de herramienta {number}",
+  "tools.details.preview.result.largeContent": "Contenido grande oculto ({size}).",
+  "tools.details.preview.result.viewAll": "Ver todo",
+  "tools.details.preview.result.openInNewTab": "Abrir en una pestaña nueva",
+  "tools.details.preview.result.downloadRaw": "Descargar sin procesar",
+  "tools.details.preview.result.resourceUri": "URI del recurso",
+  "tools.details.preview.result.structuredOutput": "Salida estructurada",
+  "tools.details.preview.result.copyStructuredOutput": "Copiar salida estructurada",
   "tools.details.preview.rawResponse": "Respuesta sin procesar de la vista previa",
   "tools.details.preview.copyRawResponse": "Copiar respuesta sin procesar",
   "tools.details.preview.copied": "¡Copiado!",
diff --git a/src/i18n/locales/pt-BR/tools.json b/src/i18n/locales/pt-BR/tools.json
index 06b9819..0ccefd2 100644
--- a/src/i18n/locales/pt-BR/tools.json
+++ b/src/i18n/locales/pt-BR/tools.json
@@ -73,8 +73,22 @@
   "tools.details.preview.renderMs": "{ms} ms",
   "tools.details.preview.warnings.title": "Avisos",
   "tools.details.preview.warnings.generic": "A prévia retornou um aviso",
+  "tools.details.preview.warnings.elicitationSkipped": "A invocação em tempo real pode solicitar entrada do usuário; a prévia ignorou {hooks}.",
   "tools.details.preview.resolvedArguments": "Argumentos resolvidos",
   "tools.details.preview.copyResolvedArguments": "Copiar argumentos resolvidos",
+  "tools.details.preview.result.title": "Resultado da ferramenta",
+  "tools.details.preview.result.errorBadge": "Resposta de erro",
+  "tools.details.preview.result.blockTitle": "Bloco de conteúdo {number}",
+  "tools.details.preview.result.blockAriaLabel": "Bloco de conteúdo do resultado da ferramenta {number}",
+  "tools.details.preview.result.copyBlock": "Copiar bloco de conteúdo",
+  "tools.details.preview.result.imageAlt": "Imagem do resultado da ferramenta {number}",
+  "tools.details.preview.result.largeContent": "Conteúdo grande oculto ({size}).",
+  "tools.details.preview.result.viewAll": "Ver tudo",
+  "tools.details.preview.result.openInNewTab": "Abrir em nova aba",
+  "tools.details.preview.result.downloadRaw": "Baixar bruto",
+  "tools.details.preview.result.resourceUri": "URI do recurso",
+  "tools.details.preview.result.structuredOutput": "Saída estruturada",
+  "tools.details.preview.result.copyStructuredOutput": "Copiar saída estruturada",
   "tools.details.preview.rawResponse": "Resposta bruta da prévia",
   "tools.details.preview.copyRawResponse": "Copiar resposta bruta",
   "tools.details.preview.copied": "Copiado!",

From 7b71dc66f06d2c306d9c2b731f654ce3e345e96c Mon Sep 17 00:00:00 2001
From: Pratik Gandhi <gandhipratik203@gmail.com>
Date: Fri, 21 Aug 2026 13:14:09 +0100
Subject: [PATCH 2/4] test: cover tool result rendering branches

Signed-off-by: Pratik Gandhi <gandhipratik203@gmail.com>
---
 .../tools/ToolResultRenderer.test.tsx         | 60 ++++++++++++++++++
 .../tools/toolResultContent.test.ts           | 62 +++++++++++++++++++
 src/components/tools/toolResultContent.ts     |  2 +-
 3 files changed, 123 insertions(+), 1 deletion(-)

diff --git a/src/components/tools/ToolResultRenderer.test.tsx b/src/components/tools/ToolResultRenderer.test.tsx
index f9edf30..7aed341 100644
--- a/src/components/tools/ToolResultRenderer.test.tsx
+++ b/src/components/tools/ToolResultRenderer.test.tsx
@@ -66,6 +66,66 @@ describe("ToolResultRenderer", () => {
     );
   });
 
+  it("renders PDF content with open and download actions", () => {
+    render(
+      <ToolResultRenderer
+        response={{
+          content: [{ type: "blob", data: "JVBERi0=", mimeType: "application/pdf" }],
+        }}
+      />,
+    );
+
+    expect(screen.getByRole("link", { name: /Open in new tab/i })).toHaveAttribute(
+      "href",
+      "data:application/pdf;base64,JVBERi0=",
+    );
+    expect(screen.getByRole("link", { name: /Download raw/i })).toHaveAttribute(
+      "download",
+      "tool-result-1.pdf",
+    );
+  });
+
+  it("renders URI-only resources without download actions", () => {
+    render(
+      <ToolResultRenderer
+        response={{
+          content: [{ type: "resource", uri: "file://reports/result.csv" }],
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Resource URI")).toBeInTheDocument();
+    expect(screen.getByText("file://reports/result.csv")).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /Download raw/i })).not.toBeInTheDocument();
+  });
+
+  it("falls back to raw JSON for unknown content blocks", () => {
+    const { container } = render(
+      <ToolResultRenderer
+        response={{
+          content: [{ type: "custom", metadata: { fallback: true } }],
+        }}
+      />,
+    );
+
+    expect(container.textContent).toContain('"fallback": true');
+  });
+
+  it("renders structured output even when content is empty", () => {
+    const { container } = render(
+      <ToolResultRenderer response={{ structuredOutput: { status: "ok" } }} />,
+    );
+
+    expect(screen.getByText("Structured output")).toBeInTheDocument();
+    expect(container.textContent).toContain('"status": "ok"');
+  });
+
+  it("returns nothing when the response has no renderable result", () => {
+    const { container } = render(<ToolResultRenderer response={{ pre_hooks_run: [] }} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
   it("keeps large text collapsed until requested", async () => {
     const user = userEvent.setup();
     const hiddenText = `${"x".repeat(TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES)} hidden payload`;
diff --git a/src/components/tools/toolResultContent.test.ts b/src/components/tools/toolResultContent.test.ts
index 4018be5..f85ddc6 100644
--- a/src/components/tools/toolResultContent.test.ts
+++ b/src/components/tools/toolResultContent.test.ts
@@ -2,12 +2,14 @@ import { describe, expect, it } from "vitest";
 
 import type { ToolPreviewResponse } from "@/api/tools";
 import {
+  codeLanguageForMime,
   formatTextForMime,
   formatToolResultBytes,
   getDataUrl,
   getToolResultContentBlocks,
   getToolResultIsError,
   getToolStructuredOutput,
+  isTextualMime,
   TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES,
 } from "./toolResultContent";
 
@@ -46,6 +48,52 @@ describe("toolResultContent", () => {
     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: "<root />", 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: "<root />" },
+      { 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 }] });
@@ -69,4 +117,18 @@ describe("toolResultContent", () => {
     expect(formatTextForMime('{"ok":true}', "application/json")).toBe('{\n  "ok": true\n}');
     expect(formatTextForMime("{bad", "application/json")).toBe("{bad");
   });
+
+  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(codeLanguageForMime("application/json")).toBe("json");
+    expect(codeLanguageForMime("application/xml")).toBe("tsx");
+    expect(codeLanguageForMime("text/plain")).toBe("bash");
+  });
 });
diff --git a/src/components/tools/toolResultContent.ts b/src/components/tools/toolResultContent.ts
index f26f87c..3d8739d 100644
--- a/src/components/tools/toolResultContent.ts
+++ b/src/components/tools/toolResultContent.ts
@@ -171,7 +171,7 @@ function getStringByteSize(value: string | undefined): number {
 }
 
 function inferType(value: Record<string, unknown>, resource: ToolResultResource | null): string {
-  if (pickString(value, "text") || pickString(resource, "text")) return "text";
+  if (pickString(value, "text", "content") || pickString(resource, "text")) return "text";
   if (pickString(value, "data", "blob") || pickString(resource, "data", "blob")) return "blob";
   if (resource) return "resource";
   return "unknown";

From e7e4600041d42798eab504e1e11b0b7e358048d0 Mon Sep 17 00:00:00 2001
From: Pratik Gandhi <gandhipratik203@gmail.com>
Date: Fri, 21 Aug 2026 13:27:11 +0100
Subject: [PATCH 3/4] fix: align tool result copy labels

Signed-off-by: Pratik Gandhi <gandhipratik203@gmail.com>
---
 src/components/tools/ToolPreviewResult.tsx  | 1 -
 src/components/tools/ToolResultRenderer.tsx | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/src/components/tools/ToolPreviewResult.tsx b/src/components/tools/ToolPreviewResult.tsx
index 0747af3..9b0e4df 100644
--- a/src/components/tools/ToolPreviewResult.tsx
+++ b/src/components/tools/ToolPreviewResult.tsx
@@ -113,7 +113,6 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
                 code={JSON.stringify(response, null, 2)}
                 language="json"
                 copyLabel={intl.formatMessage({ id: "tools.details.preview.copyRawResponse" })}
-                copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
               />
             </AccordionContent>
           </AccordionItem>
diff --git a/src/components/tools/ToolResultRenderer.tsx b/src/components/tools/ToolResultRenderer.tsx
index 874805c..080b189 100644
--- a/src/components/tools/ToolResultRenderer.tsx
+++ b/src/components/tools/ToolResultRenderer.tsx
@@ -76,7 +76,6 @@ export function ToolResultRenderer({ response }: ToolResultRendererProps) {
                 copyLabel={intl.formatMessage({
                   id: "tools.details.preview.result.copyStructuredOutput",
                 })}
-                copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
               />
             </AccordionContent>
           </AccordionItem>
@@ -148,7 +147,6 @@ function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; in
         code={formatTextForMime(block.text, block.mimeType)}
         language={codeLanguageForMime(block.mimeType)}
         copyLabel={intl.formatMessage({ id: "tools.details.preview.result.copyBlock" })}
-        copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
       />
     );
   }
@@ -208,7 +206,6 @@ function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; in
       code={stringifyJson(block.raw)}
       language="json"
       copyLabel={intl.formatMessage({ id: "tools.details.preview.result.copyBlock" })}
-      copiedLabel={intl.formatMessage({ id: "tools.details.preview.copied" })}
     />
   );
 }

From 4b6a0401e2837cfeefb6279427b1b29a84080a52 Mon Sep 17 00:00:00 2001
From: Pratik Gandhi <gandhipratik203@gmail.com>
Date: Fri, 21 Aug 2026 13:52:03 +0100
Subject: [PATCH 4/4] fix: harden tool result rendering

Signed-off-by: Pratik Gandhi <gandhipratik203@gmail.com>
---
 e2e/tools.spec.ts                             |  10 +-
 .../tools/ToolPreviewResult.test.tsx          |  57 ++++++-
 src/components/tools/ToolPreviewResult.tsx    |  72 +++++++--
 .../tools/ToolResultRenderer.test.tsx         |  92 ++++++++++-
 src/components/tools/ToolResultRenderer.tsx   | 152 ++++++++++++++----
 .../tools/toolResultContent.test.ts           |  74 ++++++++-
 src/components/tools/toolResultContent.ts     | 149 ++++++++++++++++-
 src/i18n/locales/en-US/tools.json             |   2 +
 src/i18n/locales/es-ES/tools.json             |   2 +
 src/i18n/locales/pt-BR/tools.json             |   2 +
 10 files changed, 554 insertions(+), 58 deletions(-)

diff --git a/e2e/tools.spec.ts b/e2e/tools.spec.ts
index faeb10e..fcfc49a 100644
--- a/e2e/tools.spec.ts
+++ b/e2e/tools.spec.ts
@@ -320,6 +320,11 @@ test.describe("Tools page", () => {
           content: [
             { type: "text", text: "Found 2 matching issues", mimeType: "text/plain" },
             { type: "text", text: '{"total":2}', mimeType: "application/json" },
+            {
+              type: "image",
+              text: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"></svg>',
+              mimeType: "image/svg+xml",
+            },
           ],
           structured_output: { total: 2, query: "cloudflare" },
           annotations: { readOnlyHint: true },
@@ -351,12 +356,13 @@ test.describe("Tools page", () => {
     await previewButton.click();
 
     await expect(panel.getByText("Preview 200")).toBeVisible();
-    await expect(panel.getByText("Warnings")).toBeVisible();
+    await expect(panel.getByText("Warnings", { exact: true }).first()).toBeVisible();
     await expect(
       panel.getByText("Live invocation may request user input; preview skipped approval_hook."),
     ).toBeVisible();
     await expect(panel.getByText("Tool result")).toBeVisible();
-    await expect(panel.getByText("Found 2 matching issues")).toBeVisible();
+    await expect(panel.getByText("Found 2 matching issues").first()).toBeVisible();
+    await expect(panel.getByRole("img", { name: "Tool result image 3" })).toBeVisible();
     await expect(panel.getByText("Structured output")).toBeVisible();
     await expect(panel.getByText("Resolved arguments")).toBeVisible();
     expect(previewBody).toEqual({ arguments: { query: "cloudflare", limit: 5 } });
diff --git a/src/components/tools/ToolPreviewResult.test.tsx b/src/components/tools/ToolPreviewResult.test.tsx
index c7976d0..1743bff 100644
--- a/src/components/tools/ToolPreviewResult.test.tsx
+++ b/src/components/tools/ToolPreviewResult.test.tsx
@@ -1,9 +1,12 @@
 import { describe, expect, it } from "vitest";
 import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { renderWithProviders as render } from "@/test/test-utils";
 import { ToolPreviewResult } from "./ToolPreviewResult";
 import type { ToolPreviewState } from "@/hooks/useToolPreview";
+import type { ToolPreviewResponse } from "@/api/tools";
+import { TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES } from "./toolResultContent";
 
 function previewProps(
   overrides: Partial<Pick<ToolPreviewState, "result" | "error" | "hasRun">>,
@@ -23,7 +26,7 @@ describe("ToolPreviewResult", () => {
   });
 
   it("renders status, warnings, resolved arguments, and raw response for success", () => {
-    render(
+    const { container } = render(
       <ToolPreviewResult
         preview={previewProps({
           hasRun: true,
@@ -50,6 +53,8 @@ describe("ToolPreviewResult", () => {
     expect(screen.getByText("found issue")).toBeInTheDocument();
     expect(screen.getByText("Resolved arguments")).toBeInTheDocument();
     expect(screen.getByText("Raw preview response")).toBeInTheDocument();
+    expect(screen.getByLabelText("Copy raw preview response")).toBeVisible();
+    expect(container.textContent).toContain('"resolved_arguments"');
   });
 
   it("renders API failures", () => {
@@ -111,6 +116,56 @@ describe("ToolPreviewResult", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders localized fallback hook labels for elicitation warnings", () => {
+    render(
+      <ToolPreviewResult
+        preview={previewProps({
+          hasRun: true,
+          result: {
+            status: 200,
+            renderTimeMs: 0,
+            preview: {
+              warnings: [{ code: "elicitation_skipped" }],
+            },
+          },
+        })}
+      />,
+    );
+
+    expect(
+      screen.getByText(
+        "Live invocation may request user input; preview skipped one or more hooks.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps large raw responses collapsed until requested", async () => {
+    const user = userEvent.setup();
+    const marker = "hidden raw marker";
+    const preview = {
+      debug: `${"x".repeat(TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES)} ${marker}`,
+    } as unknown as ToolPreviewResponse;
+    const { container } = render(
+      <ToolPreviewResult
+        preview={previewProps({
+          hasRun: true,
+          result: {
+            status: 200,
+            renderTimeMs: 0,
+            preview,
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByText(/Large content hidden/)).toBeInTheDocument();
+    expect(container.textContent).not.toContain(marker);
+
+    await user.click(screen.getByRole("button", { name: "View all" }));
+
+    expect(container.textContent).toContain(marker);
+  });
+
   it("renders tool error results without treating the HTTP request as failed", () => {
     render(
       <ToolPreviewResult
diff --git a/src/components/tools/ToolPreviewResult.tsx b/src/components/tools/ToolPreviewResult.tsx
index 9b0e4df..b44f7ee 100644
--- a/src/components/tools/ToolPreviewResult.tsx
+++ b/src/components/tools/ToolPreviewResult.tsx
@@ -1,7 +1,9 @@
+import { useState } from "react";
 import { AlertCircle, CheckCircle2, Info } from "lucide-react";
 import { useIntl } from "react-intl";
 
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { CodeBlock } from "@/components/ui/code-block";
 import {
   Accordion,
@@ -11,9 +13,14 @@ import {
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
 import type { ToolPreviewState } from "@/hooks/useToolPreview";
-import type { ToolPreviewTarget, ToolPreviewWarning } from "@/api/tools";
+import type { ToolPreviewResponse, ToolPreviewTarget, ToolPreviewWarning } from "@/api/tools";
 import { ToolResultRenderer } from "./ToolResultRenderer";
-import { getToolResultIsError } from "./toolResultContent";
+import {
+  estimateJsonByteSize,
+  formatToolResultBytes,
+  getToolResultIsError,
+  TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES,
+} from "./toolResultContent";
 
 export interface ToolPreviewResultProps {
   preview: Pick<ToolPreviewState, "result" | "error" | "hasRun">;
@@ -103,17 +110,18 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
       )}
 
       {response && (
-        <Accordion type="single" collapsible className="rounded-md border border-border">
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue="raw-response"
+          className="rounded-md border border-border"
+        >
           <AccordionItem value="raw-response" className="border-b-0 px-3">
             <AccordionTrigger className="py-3 hover:no-underline">
               {intl.formatMessage({ id: "tools.details.preview.rawResponse" })}
             </AccordionTrigger>
             <AccordionContent>
-              <CodeBlock
-                code={JSON.stringify(response, null, 2)}
-                language="json"
-                copyLabel={intl.formatMessage({ id: "tools.details.preview.copyRawResponse" })}
-              />
+              <RawPreviewResponse response={response} />
             </AccordionContent>
           </AccordionItem>
         </Accordion>
@@ -128,12 +136,49 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
   );
 }
 
+function RawPreviewResponse({ response }: { response: ToolPreviewResponse }) {
+  const intl = useIntl();
+  const byteSize = estimateJsonByteSize(
+    response,
+    TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES + 1,
+  );
+  const isLarge = byteSize > TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES;
+  const [expanded, setExpanded] = useState(!isLarge);
+  const sizeLabel = isLarge
+    ? `>${formatToolResultBytes(TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES)}`
+    : formatToolResultBytes(byteSize);
+
+  if (isLarge && !expanded) {
+    return (
+      <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background p-3 text-[13px]">
+        <span className="text-muted-foreground">
+          {intl.formatMessage(
+            { id: "tools.details.preview.result.largeContent" },
+            { size: sizeLabel },
+          )}
+        </span>
+        <Button type="button" variant="outline" size="xs" onClick={() => setExpanded(true)}>
+          {intl.formatMessage({ id: "tools.details.preview.result.viewAll" })}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <CodeBlock
+      code={JSON.stringify(response, null, 2)}
+      language="json"
+      copyLabel={intl.formatMessage({ id: "tools.details.preview.copyRawResponse" })}
+    />
+  );
+}
+
 function formatWarning(
   warning: ToolPreviewWarning,
   formatMessage: (descriptor: { id: string }, values?: Record<string, string>) => string,
 ) {
   if (warning.code === "elicitation_skipped") {
-    const hooks = formatWarningHooks(warning);
+    const hooks = formatWarningHooks(warning, formatMessage);
     return (
       warning.message ??
       formatMessage({ id: "tools.details.preview.warnings.elicitationSkipped" }, { hooks })
@@ -147,13 +192,18 @@ function formatWarning(
   );
 }
 
-function formatWarningHooks(warning: ToolPreviewWarning) {
+function formatWarningHooks(
+  warning: ToolPreviewWarning,
+  formatMessage: (descriptor: { id: string }) => string,
+) {
   const hooks = [
     typeof warning.hook === "string" ? warning.hook : null,
     ...(Array.isArray(warning.hooks) ? warning.hooks : []),
   ].filter((hook): hook is string => typeof hook === "string" && hook.length > 0);
 
-  return hooks.length > 0 ? hooks.join(", ") : "one or more hooks";
+  return hooks.length > 0
+    ? hooks.join(", ")
+    : formatMessage({ id: "tools.details.preview.warnings.unspecifiedHooks" });
 }
 
 function formatTarget(target: ToolPreviewTarget | "local" | "federated" | null | undefined) {
diff --git a/src/components/tools/ToolResultRenderer.test.tsx b/src/components/tools/ToolResultRenderer.test.tsx
index 7aed341..7a75668 100644
--- a/src/components/tools/ToolResultRenderer.test.tsx
+++ b/src/components/tools/ToolResultRenderer.test.tsx
@@ -4,7 +4,11 @@ import userEvent from "@testing-library/user-event";
 
 import { renderWithProviders as render } from "@/test/test-utils";
 import { ToolResultRenderer } from "./ToolResultRenderer";
-import { TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES } from "./toolResultContent";
+import {
+  TOOL_RESULT_BLOCK_COUNT_LIMIT,
+  TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES,
+  TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES,
+} from "./toolResultContent";
 
 describe("ToolResultRenderer", () => {
   it("renders text, JSON, structured output, and error badges", () => {
@@ -51,6 +55,28 @@ describe("ToolResultRenderer", () => {
     expect(screen.getAllByText(/image\/png/).length).toBeGreaterThan(0);
   });
 
+  it("renders SVG text content inline as an image", () => {
+    render(
+      <ToolResultRenderer
+        response={{
+          content: [
+            {
+              type: "image",
+              text: '<svg xmlns="http://www.w3.org/2000/svg"></svg>',
+              mimeType: "image/svg+xml",
+            },
+          ],
+        }}
+      />,
+    );
+
+    expect(screen.getByRole("img", { name: "Tool result image 1" })).toHaveAttribute(
+      "src",
+      expect.stringContaining("data:image/svg+xml;charset=utf-8,"),
+    );
+    expect(screen.queryByText(/<svg/)).not.toBeInTheDocument();
+  });
+
   it("renders binary content as a download action", () => {
     render(
       <ToolResultRenderer
@@ -126,6 +152,47 @@ describe("ToolResultRenderer", () => {
     expect(container.firstChild).toBeNull();
   });
 
+  it("limits aggregate block rendering until requested", async () => {
+    const user = userEvent.setup();
+    const blocks = Array.from({ length: TOOL_RESULT_BLOCK_COUNT_LIMIT + 2 }, (_, index) => ({
+      type: "text",
+      text: `aggregate block ${index + 1}`,
+      mimeType: "text/plain",
+    }));
+    const { container } = render(<ToolResultRenderer response={{ content: blocks }} />);
+
+    expect(container.textContent).toContain(`aggregate block ${TOOL_RESULT_BLOCK_COUNT_LIMIT}`);
+    expect(container.textContent).not.toContain(
+      `aggregate block ${TOOL_RESULT_BLOCK_COUNT_LIMIT + 1}`,
+    );
+    expect(screen.getByText(/Showing 20 of 22 content blocks/)).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "View all" }));
+
+    expect(container.textContent).toContain(`aggregate block ${TOOL_RESULT_BLOCK_COUNT_LIMIT + 2}`);
+  });
+
+  it("keeps large structured output collapsed until requested", async () => {
+    const user = userEvent.setup();
+    const marker = "hidden structured marker";
+    const { container } = render(
+      <ToolResultRenderer
+        response={{
+          structuredOutput: {
+            payload: `${"x".repeat(TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES)} ${marker}`,
+          },
+        }}
+      />,
+    );
+
+    expect(screen.getByText(/Large content hidden/)).toBeInTheDocument();
+    expect(container.textContent).not.toContain(marker);
+
+    await user.click(screen.getByRole("button", { name: "View all" }));
+
+    expect(container.textContent).toContain(marker);
+  });
+
   it("keeps large text collapsed until requested", async () => {
     const user = userEvent.setup();
     const hiddenText = `${"x".repeat(TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES)} hidden payload`;
@@ -142,4 +209,27 @@ describe("ToolResultRenderer", () => {
 
     expect(container.textContent).toContain("hidden payload");
   });
+
+  it("resets block expansion state when a new preview response renders", () => {
+    const smallResponse = {
+      content: [{ type: "text", text: "small payload", mimeType: "text/plain" }],
+    };
+    const largeResponse = {
+      content: [
+        {
+          type: "text",
+          text: `${"x".repeat(TOOL_RESULT_BLOCK_SIZE_LIMIT_BYTES)} rerun hidden payload`,
+          mimeType: "text/plain",
+        },
+      ],
+    };
+    const { container, rerender } = render(<ToolResultRenderer response={smallResponse} />);
+
+    expect(container.textContent).toContain("small payload");
+
+    rerender(<ToolResultRenderer response={largeResponse} />);
+
+    expect(screen.getByText(/Large content hidden/)).toBeInTheDocument();
+    expect(container.textContent).not.toContain("rerun hidden payload");
+  });
 });
diff --git a/src/components/tools/ToolResultRenderer.tsx b/src/components/tools/ToolResultRenderer.tsx
index 080b189..f2cb137 100644
--- a/src/components/tools/ToolResultRenderer.tsx
+++ b/src/components/tools/ToolResultRenderer.tsx
@@ -14,13 +14,16 @@ import { Button } from "@/components/ui/button";
 import { CodeBlock } from "@/components/ui/code-block";
 import {
   codeLanguageForMime,
+  estimateJsonByteSize,
   formatTextForMime,
   formatToolResultBytes,
   getDataUrl,
+  getToolResultBlockWindow,
   getToolResultContentBlocks,
   getToolResultIsError,
   getToolStructuredOutput,
   isTextualMime,
+  TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES,
   type NormalizedToolContentBlock,
 } from "./toolResultContent";
 
@@ -28,12 +31,16 @@ export interface ToolResultRendererProps {
   response: ToolPreviewResponse;
 }
 
+const resultRenderKeys = new WeakMap<object, number>();
+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;
 
@@ -50,38 +57,55 @@ export function ToolResultRenderer({ response }: ToolResultRendererProps) {
         )}
       </div>
 
-      {blocks.map((block, index) => (
+      <ToolResultBlocks key={`blocks-${resultKey}`} blocks={blocks} resultKey={resultKey} />
+
+      {hasStructuredOutput && (
+        <StructuredOutput key={`structured-${resultKey}`} value={structuredOutput} />
+      )}
+    </section>
+  );
+}
+
+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) => (
         <ToolResultBlock
-          key={`${block.type}-${block.mimeType}-${index}`}
+          key={`${resultKey}-${block.type}-${block.mimeType}-${index}`}
           block={block}
           index={index}
         />
       ))}
 
-      {hasStructuredOutput && (
-        <Accordion
-          type="single"
-          collapsible
-          defaultValue="structured-output"
-          className="rounded-md border border-border"
-        >
-          <AccordionItem value="structured-output" className="border-b-0 px-3">
-            <AccordionTrigger className="py-3 hover:no-underline">
-              {intl.formatMessage({ id: "tools.details.preview.result.structuredOutput" })}
-            </AccordionTrigger>
-            <AccordionContent>
-              <CodeBlock
-                code={stringifyJson(structuredOutput)}
-                language="json"
-                copyLabel={intl.formatMessage({
-                  id: "tools.details.preview.result.copyStructuredOutput",
-                })}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+      {!showAll && blockWindow.isLimited && (
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background p-3 text-[13px]">
+          <span className="text-muted-foreground">
+            {intl.formatMessage(
+              { id: "tools.details.preview.result.aggregateContent" },
+              {
+                visible: blockWindow.visibleBlocks.length,
+                total: blocks.length,
+                size: formatToolResultBytes(blockWindow.totalByteSize),
+              },
+            )}
+          </span>
+          <Button type="button" variant="outline" size="xs" onClick={() => setShowAll(true)}>
+            {intl.formatMessage({ id: "tools.details.preview.result.viewAll" })}
+          </Button>
+        </div>
       )}
-    </section>
+    </>
   );
 }
 
@@ -141,16 +165,6 @@ function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; in
   const intl = useIntl();
   const downloadHref = getDataUrl(block);
 
-  if (block.text !== undefined && isTextualMime(block.mimeType)) {
-    return (
-      <CodeBlock
-        code={formatTextForMime(block.text, block.mimeType)}
-        language={codeLanguageForMime(block.mimeType)}
-        copyLabel={intl.formatMessage({ id: "tools.details.preview.result.copyBlock" })}
-      />
-    );
-  }
-
   if (block.mimeType.toLowerCase().startsWith("image/") && downloadHref) {
     return (
       <figure className="space-y-2">
@@ -169,6 +183,16 @@ function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; in
     );
   }
 
+  if (block.text !== undefined && isTextualMime(block.mimeType)) {
+    return (
+      <CodeBlock
+        code={formatTextForMime(block.text, block.mimeType)}
+        language={codeLanguageForMime(block.mimeType)}
+        copyLabel={intl.formatMessage({ id: "tools.details.preview.result.copyBlock" })}
+      />
+    );
+  }
+
   if (block.mimeType.toLowerCase() === "application/pdf" && downloadHref) {
     return (
       <BinaryActions
@@ -210,6 +234,64 @@ function RenderedBlock({ block, index }: { block: NormalizedToolContentBlock; in
   );
 }
 
+function StructuredOutput({ value }: { value: unknown }) {
+  const intl = useIntl();
+  const byteSize = estimateJsonByteSize(value, TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES + 1);
+  const isLarge = byteSize > TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES;
+  const [expanded, setExpanded] = useState(!isLarge);
+  const sizeLabel = isLarge
+    ? `>${formatToolResultBytes(TOOL_RESULT_STRUCTURED_OUTPUT_SIZE_LIMIT_BYTES)}`
+    : formatToolResultBytes(byteSize);
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      defaultValue="structured-output"
+      className="rounded-md border border-border"
+    >
+      <AccordionItem value="structured-output" className="border-b-0 px-3">
+        <AccordionTrigger className="py-3 hover:no-underline">
+          {intl.formatMessage({ id: "tools.details.preview.result.structuredOutput" })}
+        </AccordionTrigger>
+        <AccordionContent>
+          {isLarge && !expanded ? (
+            <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background p-3 text-[13px]">
+              <span className="text-muted-foreground">
+                {intl.formatMessage(
+                  { id: "tools.details.preview.result.largeContent" },
+                  { size: sizeLabel },
+                )}
+              </span>
+              <Button type="button" variant="outline" size="xs" onClick={() => setExpanded(true)}>
+                {intl.formatMessage({ id: "tools.details.preview.result.viewAll" })}
+              </Button>
+            </div>
+          ) : (
+            <CodeBlock
+              code={stringifyJson(value)}
+              language="json"
+              copyLabel={intl.formatMessage({
+                id: "tools.details.preview.result.copyStructuredOutput",
+              })}
+            />
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+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,
diff --git a/src/components/tools/toolResultContent.test.ts b/src/components/tools/toolResultContent.test.ts
index f85ddc6..736bf1c 100644
--- a/src/components/tools/toolResultContent.test.ts
+++ b/src/components/tools/toolResultContent.test.ts
@@ -3,16 +3,36 @@ 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> = {},
+): 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({
@@ -104,6 +124,24 @@ describe("toolResultContent", () => {
     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" }],
@@ -111,13 +149,43 @@ describe("toolResultContent", () => {
     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);
@@ -126,9 +194,11 @@ describe("toolResultContent", () => {
     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("tsx");
-    expect(codeLanguageForMime("text/plain")).toBe("bash");
+    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
index 3d8739d..d96b654 100644
--- a/src/components/tools/toolResultContent.ts
+++ b/src/components/tools/toolResultContent.ts
@@ -1,6 +1,10 @@
 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";
 
@@ -15,7 +19,14 @@ export interface NormalizedToolContentBlock {
   isLarge: boolean;
 }
 
-export type ToolCodeLanguage = "bash" | "json" | "tsx";
+export type ToolCodeLanguage = CodeBlockLanguage;
+
+export interface ToolResultBlockWindow {
+  visibleBlocks: NormalizedToolContentBlock[];
+  hiddenBlockCount: number;
+  totalByteSize: number;
+  isLimited: boolean;
+}
 
 export function getToolResultContentBlocks(
   response: ToolPreviewResponse,
@@ -43,6 +54,7 @@ export function getToolResultIsError(response: ToolPreviewResponse): boolean {
 
 export function isTextualMime(mimeType: string): boolean {
   const normalized = mimeType.toLowerCase();
+  if (normalized.startsWith("image/")) return false;
   return (
     normalized.startsWith("text/") ||
     normalized.includes("json") ||
@@ -56,8 +68,9 @@ export function isTextualMime(mimeType: string): boolean {
 export function codeLanguageForMime(mimeType: string): ToolCodeLanguage {
   const normalized = mimeType.toLowerCase();
   if (normalized.includes("json")) return "json";
-  if (normalized.includes("xml")) return "tsx";
-  return "bash";
+  if (normalized.includes("xml")) return "xml";
+  if (normalized.includes("markdown") || normalized.includes("md")) return "markdown";
+  return "text";
 }
 
 export function formatToolResultBytes(bytes: number): string {
@@ -76,18 +89,111 @@ export function formatTextForMime(text: string, mimeType: string): string {
 }
 
 export function getDataUrl(block: NormalizedToolContentBlock): string | null {
-  if (block.data) {
+  if (block.data !== undefined) {
     if (block.data.startsWith("data:")) return block.data;
     return `data:${block.mimeType};base64,${block.data}`;
   }
 
-  if (block.text) {
+  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<object>();
+  let total = 0;
+
+  function add(text: string) {
+    total += getStringByteSize(text);
+  }
+
+  function visit(current: unknown) {
+    if (total > byteLimit) return;
+
+    if (current === null) {
+      add("null");
+      return;
+    }
+
+    switch (typeof current) {
+      case "string":
+        add(JSON.stringify(current));
+        return;
+      case "number":
+      case "boolean":
+        add(String(current));
+        return;
+      case "undefined":
+      case "function":
+      case "symbol":
+        add("null");
+        return;
+      case "object":
+        break;
+    }
+
+    if (seen.has(current)) {
+      add('"[Circular]"');
+      return;
+    }
+    seen.add(current);
+
+    if (Array.isArray(current)) {
+      add("[");
+      current.forEach((item, index) => {
+        if (index > 0) add(",");
+        visit(item);
+      });
+      add("]");
+      return;
+    }
+
+    add("{");
+    let index = 0;
+    for (const [key, item] of Object.entries(current)) {
+      if (index > 0) add(",");
+      add(JSON.stringify(key));
+      add(":");
+      visit(item);
+      index += 1;
+    }
+    add("}");
+  }
+
+  visit(value);
+  return total;
+}
+
 function getToolResultPayload(response: ToolPreviewResponse): Record<string, unknown> {
   if (isToolResultPayload(response)) return response;
 
@@ -161,7 +267,7 @@ function getBlockByteSize(input: {
   raw: ToolResultContentBlock | string;
 }): number {
   if (input.text !== undefined) return getStringByteSize(input.text);
-  if (input.data !== undefined) return getStringByteSize(input.data);
+  if (input.data !== undefined) return getDataByteSize(input.data);
   return getStringByteSize(JSON.stringify(input.raw));
 }
 
@@ -170,6 +276,37 @@ function getStringByteSize(value: string | undefined): number {
   return new Blob([value]).size;
 }
 
+function getDataByteSize(value: string): number {
+  if (value.startsWith("data:")) {
+    const commaIndex = value.indexOf(",");
+    if (commaIndex === -1) return getStringByteSize(value);
+
+    const metadata = value.slice(5, commaIndex).toLowerCase();
+    const payload = value.slice(commaIndex + 1);
+    if (metadata.split(";").includes("base64")) {
+      return getBase64ByteSize(payload) ?? getStringByteSize(payload);
+    }
+
+    try {
+      return getStringByteSize(decodeURIComponent(payload));
+    } catch {
+      return getStringByteSize(payload);
+    }
+  }
+
+  return getBase64ByteSize(value) ?? getStringByteSize(value);
+}
+
+function getBase64ByteSize(value: string): number | null {
+  const normalized = value.replace(/\s/g, "");
+  if (normalized.length === 0) return 0;
+  if (normalized.length % 4 === 1) return null;
+  if (!/^[A-Za-z0-9+/]*={0,2}$/.test(normalized)) return null;
+
+  const padding = normalized.endsWith("==") ? 2 : normalized.endsWith("=") ? 1 : 0;
+  return Math.max(0, Math.floor((normalized.length * 3) / 4) - padding);
+}
+
 function inferType(value: Record<string, unknown>, resource: ToolResultResource | null): string {
   if (pickString(value, "text", "content") || pickString(resource, "text")) return "text";
   if (pickString(value, "data", "blob") || pickString(resource, "data", "blob")) return "blob";
diff --git a/src/i18n/locales/en-US/tools.json b/src/i18n/locales/en-US/tools.json
index bba935d..bba8838 100644
--- a/src/i18n/locales/en-US/tools.json
+++ b/src/i18n/locales/en-US/tools.json
@@ -74,6 +74,7 @@
   "tools.details.preview.warnings.title": "Warnings",
   "tools.details.preview.warnings.generic": "Preview returned a warning",
   "tools.details.preview.warnings.elicitationSkipped": "Live invocation may request user input; preview skipped {hooks}.",
+  "tools.details.preview.warnings.unspecifiedHooks": "one or more hooks",
   "tools.details.preview.resolvedArguments": "Resolved arguments",
   "tools.details.preview.copyResolvedArguments": "Copy resolved arguments",
   "tools.details.preview.result.title": "Tool result",
@@ -83,6 +84,7 @@
   "tools.details.preview.result.copyBlock": "Copy content block",
   "tools.details.preview.result.imageAlt": "Tool result image {number}",
   "tools.details.preview.result.largeContent": "Large content hidden ({size}).",
+  "tools.details.preview.result.aggregateContent": "Showing {visible} of {total} content blocks ({size} total).",
   "tools.details.preview.result.viewAll": "View all",
   "tools.details.preview.result.openInNewTab": "Open in new tab",
   "tools.details.preview.result.downloadRaw": "Download raw",
diff --git a/src/i18n/locales/es-ES/tools.json b/src/i18n/locales/es-ES/tools.json
index f2f371e..8982a78 100644
--- a/src/i18n/locales/es-ES/tools.json
+++ b/src/i18n/locales/es-ES/tools.json
@@ -74,6 +74,7 @@
   "tools.details.preview.warnings.title": "Advertencias",
   "tools.details.preview.warnings.generic": "La vista previa devolvió una advertencia",
   "tools.details.preview.warnings.elicitationSkipped": "La invocación en vivo puede solicitar datos al usuario; la vista previa omitió {hooks}.",
+  "tools.details.preview.warnings.unspecifiedHooks": "uno o más hooks",
   "tools.details.preview.resolvedArguments": "Argumentos resueltos",
   "tools.details.preview.copyResolvedArguments": "Copiar argumentos resueltos",
   "tools.details.preview.result.title": "Resultado de la herramienta",
@@ -83,6 +84,7 @@
   "tools.details.preview.result.copyBlock": "Copiar bloque de contenido",
   "tools.details.preview.result.imageAlt": "Imagen de resultado de herramienta {number}",
   "tools.details.preview.result.largeContent": "Contenido grande oculto ({size}).",
+  "tools.details.preview.result.aggregateContent": "Mostrando {visible} de {total} bloques de contenido ({size} en total).",
   "tools.details.preview.result.viewAll": "Ver todo",
   "tools.details.preview.result.openInNewTab": "Abrir en una pestaña nueva",
   "tools.details.preview.result.downloadRaw": "Descargar sin procesar",
diff --git a/src/i18n/locales/pt-BR/tools.json b/src/i18n/locales/pt-BR/tools.json
index 0ccefd2..f17770c 100644
--- a/src/i18n/locales/pt-BR/tools.json
+++ b/src/i18n/locales/pt-BR/tools.json
@@ -74,6 +74,7 @@
   "tools.details.preview.warnings.title": "Avisos",
   "tools.details.preview.warnings.generic": "A prévia retornou um aviso",
   "tools.details.preview.warnings.elicitationSkipped": "A invocação em tempo real pode solicitar entrada do usuário; a prévia ignorou {hooks}.",
+  "tools.details.preview.warnings.unspecifiedHooks": "um ou mais hooks",
   "tools.details.preview.resolvedArguments": "Argumentos resolvidos",
   "tools.details.preview.copyResolvedArguments": "Copiar argumentos resolvidos",
   "tools.details.preview.result.title": "Resultado da ferramenta",
@@ -83,6 +84,7 @@
   "tools.details.preview.result.copyBlock": "Copiar bloco de conteúdo",
   "tools.details.preview.result.imageAlt": "Imagem do resultado da ferramenta {number}",
   "tools.details.preview.result.largeContent": "Conteúdo grande oculto ({size}).",
+  "tools.details.preview.result.aggregateContent": "Mostrando {visible} de {total} blocos de conteúdo ({size} no total).",
   "tools.details.preview.result.viewAll": "Ver tudo",
   "tools.details.preview.result.openInNewTab": "Abrir em nova aba",
   "tools.details.preview.result.downloadRaw": "Baixar bruto",