Render structured agent tool results

Translate ACP diffs and file locations into typed extension views so tool
results remain compact, navigable, and consistent with the rest of the app.

Keep raw output available when a result cannot be represented structurally.

Author: mehmetozguldev

src/features/ai/components/chat/chat-activity-line.tsx

@@ -20,6 +20,7 @@ interface ChatActivityLineProps {
   state?: ActivityState;
   actions?: ReactNode;
   children?: ReactNode;
+  detailsVariant?: "text" | "content";
 }
 
 export function ChatActivityLine({
@@ -29,6 +30,7 @@ export function ChatActivityLine({
   state = "info",
   actions,
   children,
+  detailsVariant = "text",
 }: ChatActivityLineProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const canExpand = Boolean(children);
@@ -61,10 +63,12 @@ export function ChatActivityLine({
         </Marker>
         {actions ? <span className="shrink-0">{actions}</span> : null}
       </div>
-      {canExpand && isExpanded ? (
+      {canExpand && isExpanded && detailsVariant === "text" ? (
         <pre className="mt-1 max-h-64 overflow-auto whitespace-pre-wrap pl-6 font-mono ui-text-sm text-subtle-foreground/55">
           {children}
         </pre>
+      ) : canExpand && isExpanded ? (
+        <div className="mt-1 min-w-0 pl-6">{children}</div>
       ) : null}
     </div>
   );

src/features/ai/components/messages/tool-call-display.tsx

@@ -3,11 +3,25 @@ import {
   GitDiffIcon as GitDiff,
   TerminalWindowIcon as TerminalSquare,
 } from "@/ui/icons";
-import { getAcpDiffOutputs, openAcpDiffOutput } from "@/features/ai/lib/acp-diff-output";
+import {
+  createAcpDiffViewNode,
+  getAcpDiffOutputs,
+  openAcpDiffOutput,
+  stripAcpDiffOutputs,
+} from "@/features/ai/lib/acp-diff-output";
+import {
+  getStructuredToolViews,
+  isStructuredToolViewEnvelope,
+  stripStructuredToolViews,
+} from "@/features/ai/lib/structured-tool-view";
 import {
   getAcpTerminalOutputs,
   openAcpTerminalOutput,
 } from "@/features/ai/lib/acp-terminal-output";
+import {
+  createAcpToolLocationTree,
+  OPEN_TOOL_LOCATION_COMMAND,
+} from "@/features/ai/lib/acp-tool-location-tree";
 import type { ToolCall } from "@/features/ai/types/ai-chat.types";
 import type {
   AcpToolCallLocation,
@@ -19,6 +33,8 @@ import { readFileContent } from "@/features/file-system/controllers/file-operati
 import { getFileDiff } from "@/features/git/api/git-diff-api";
 import { useProjectStore } from "@/features/window/stores/project.store";
 import { Button } from "@/ui/button";
+import { GenerativeUIRenderer } from "@/extensions/ui/components/generative-ui-renderer";
+import { ExtensionViewRenderer } from "@/extensions/ui/components/extension-view-renderer";
 import { getBaseName, joinPath } from "@/utils/path-helpers";
 import { ChatActivityLine } from "../chat/chat-activity-line";
 
@@ -174,12 +190,6 @@ function formatDiffText(item: Record<string, unknown>): string {
     .join("\n");
 }
 
-function formatAcpDiffText(item: ReturnType<typeof getAcpDiffOutputs>[number]): string {
-  return [`diff: ${item.path}`, "--- before", item.oldText, "+++ after", item.newText]
-    .filter((line) => line.length > 0)
-    .join("\n");
-}
-
 function getOutputSummary(output: unknown): string | null {
   const diffItems = getDiffItems(output);
   if (diffItems.length > 0) {
@@ -192,14 +202,18 @@ function getOutputSummary(output: unknown): string | null {
     return terminalItems.length === 1 ? "terminal output" : `${terminalItems.length} terminals`;
   }
 
+  if (getStructuredToolViews(output).length > 0) return "interactive result";
+
   return null;
 }
 
 function getOutputText(output: unknown): string {
+  if (isStructuredToolViewEnvelope(output)) return "";
   if (!Array.isArray(output)) return formatValue(output);
 
   return output
     .map((item) => {
+      if (isStructuredToolViewEnvelope(item)) return "";
       if (!isRecord(item)) return formatValue(item);
       if (item.type === "content") return getContentText(item);
       if (item.type === "diff") return formatDiffText(item);
@@ -251,7 +265,7 @@ export function ToolCallGroupDisplay({
   const detail = getLatestToolSummary(latestToolCall, isStreaming);
 
   return (
-    <ChatActivityLine title={title} detail={detail}>
+    <ChatActivityLine title={title} detail={detail} detailsVariant="content">
       <div className="space-y-1">
         {toolCalls.map((toolCall, toolIndex) => (
           <ToolCallDisplay
@@ -283,17 +297,26 @@ function ToolCallDisplay({
 }: ToolCallDisplayProps) {
   const state = getStatus(isStreaming, error, protocolStatus);
   const detail = getToolCallDetail(toolName, input, output, state, protocolStatus);
+  const structuredViews = getStructuredToolViews(output);
+  const displayOutput = stripStructuredToolViews(output);
+  const hasStructuredViews = structuredViews.length > 0;
   const hasDetails =
     Boolean(input) ||
-    Boolean(output) ||
+    Boolean(displayOutput) ||
+    hasStructuredViews ||
     Boolean(error) ||
     Boolean(kind && kind !== "other") ||
     Boolean(locations?.length);
-  const diffItems = getDiffItems(output);
+  const diffItems = getDiffItems(displayOutput);
   const hasDiffOutput = diffItems.length > 0;
-  const terminalItems = getTerminalItems(output);
+  const nonDiffOutput = stripAcpDiffOutputs(displayOutput);
+  const diffViews = diffItems.map((item) =>
+    createAcpDiffViewNode(item, useProjectStore.getState().rootFolderPath),
+  );
+  const terminalItems = getTerminalItems(displayOutput);
   const hasTerminalOutput = terminalItems.length > 0;
   const toolPath = resolveToolPath(locations, input);
+  const locationTree = locations ? createAcpToolLocationTree(locations) : undefined;
   const hasActions = Boolean(toolPath || hasTerminalOutput);
   const actionButtons = hasActions ? (
     <span className="flex items-center gap-1">
@@ -341,27 +364,61 @@ function ToolCallDisplay({
       ) : null}
     </span>
   ) : null;
+  const detailText = [
+    kind && kind !== "other" ? `kind: ${kind}\n` : "",
+    locations?.length && !locationTree
+      ? `locations:\n${locations
+          .map((location) => `  ${location.path}${location.line ? `:${location.line}` : ""}`)
+          .join("\n")}\n`
+      : "",
+    input ? `input:\n${formatValue(input)}\n` : "",
+    nonDiffOutput ? `output:\n${getOutputText(nonDiffOutput)}\n` : "",
+    error ? `error:\n${error}` : "",
+  ].join("");
 
   return (
-    <ChatActivityLine title={toolName} detail={detail} state={state} actions={actionButtons}>
+    <ChatActivityLine
+      title={toolName}
+      detail={detail}
+      state={state}
+      actions={actionButtons}
+      detailsVariant={hasStructuredViews || hasDiffOutput || locationTree ? "content" : "text"}
+    >
       {hasDetails ? (
-        <>
-          {kind && kind !== "other" ? `kind: ${kind}\n` : ""}
-          {locations?.length
-            ? `locations:\n${locations
-                .map((location) => `  ${location.path}${location.line ? `:${location.line}` : ""}`)
-                .join("\n")}\n`
-            : ""}
-          {input ? `input:\n${formatValue(input)}\n` : ""}
-          {output
-            ? `output:\n${
-                hasDiffOutput
-                  ? diffItems.map(formatAcpDiffText).join("\n\n")
-                  : getOutputText(output)
-              }\n`
-            : ""}
-          {error ? `error:\n${error}` : ""}
-        </>
+        hasStructuredViews || hasDiffOutput || locationTree ? (
+          <div className="flex min-w-0 flex-col gap-2">
+            {detailText ? (
+              <pre className="max-h-64 overflow-auto whitespace-pre-wrap font-mono ui-text-sm text-subtle-foreground/55">
+                {detailText}
+              </pre>
+            ) : null}
+            {diffViews.map((view, index) => (
+              <ExtensionViewRenderer
+                key={`${view.filePath}-diff-${index}`}
+                node={view}
+                execute={() => undefined}
+                surface="embedded"
+              />
+            ))}
+            {locationTree ? (
+              <ExtensionViewRenderer
+                node={locationTree}
+                execute={(action) => {
+                  const path = action.args?.[0];
+                  if (action.command === OPEN_TOOL_LOCATION_COMMAND && typeof path === "string") {
+                    return openToolPath(path);
+                  }
+                }}
+                surface="embedded"
+              />
+            ) : null}
+            {structuredViews.map((view, index) => (
+              <GenerativeUIRenderer key={`${toolName}-ui-${index}`} component={view} />
+            ))}
+          </div>
+        ) : (
+          detailText
+        )
       ) : null}
     </ChatActivityLine>
   );

src/features/ai/lib/acp-diff-output.ts

@@ -1,19 +1,27 @@
 import { useBufferStore } from "@/features/editor/stores/buffer.store";
+import { EXTENSION_VIEW_LIMITS } from "@/extensions/ui/services/extension-view-schema";
+import type { ExtensionViewNode } from "@/extensions/ui/types/extension-view";
 import type { MultiFileDiff } from "@/features/git/types/git-diff.types";
 import type { GitDiff, GitDiffLine } from "@/features/git/types/git.types";
 import { countDiffStats } from "@/features/git/utils/git-diff-helpers";
 import { useProjectStore } from "@/features/window/stores/project.store";
 
-interface AcpDiffOutput {
+export interface AcpDiffOutput {
   path: string;
   oldText: string;
   newText: string;
 }
 
+type ExtensionDiffNode = Extract<ExtensionViewNode, { type: "diff" }>;
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return Boolean(value) && typeof value === "object";
 }
 
+function isAcpDiffOutput(value: unknown): value is Record<string, unknown> & { path: string } {
+  return isRecord(value) && value.type === "diff" && typeof value.path === "string";
+}
+
 function normalizePath(path: string): string {
   return path.replace(/\\/g, "/").replace(/^file:\/\//, "");
 }
@@ -31,17 +39,29 @@ function getBaseName(path: string): string {
   return path.split("/").pop() || path;
 }
 
+function getLanguageHint(path: string): string | undefined {
+  const fileName = getBaseName(path);
+  const separator = fileName.lastIndexOf(".");
+  return separator > 0 && separator < fileName.length - 1
+    ? fileName.slice(separator + 1)
+    : undefined;
+}
+
 export function getAcpDiffOutputs(output: unknown): AcpDiffOutput[] {
-  if (!Array.isArray(output)) return [];
-
-  return output
-    .filter(isRecord)
-    .filter((item) => item.type === "diff" && typeof item.path === "string")
-    .map((item) => ({
-      path: item.path as string,
-      oldText: typeof item.oldText === "string" ? item.oldText : "",
-      newText: typeof item.newText === "string" ? item.newText : "",
-    }));
+  const items = Array.isArray(output) ? output : [output];
+
+  return items.filter(isAcpDiffOutput).map((item) => ({
+    path: item.path as string,
+    oldText: typeof item.oldText === "string" ? item.oldText : "",
+    newText: typeof item.newText === "string" ? item.newText : "",
+  }));
+}
+
+export function stripAcpDiffOutputs(output: unknown): unknown {
+  if (isAcpDiffOutput(output)) return undefined;
+  if (!Array.isArray(output)) return output;
+  const remaining = output.filter((item) => !isAcpDiffOutput(item));
+  return remaining.length > 0 ? remaining : undefined;
 }
 
 function createHunkHeader(oldLines: string[], newLines: string[]): GitDiffLine {
@@ -77,6 +97,56 @@ function createDiffLines(oldText: string, newText: string): GitDiffLine[] {
   return lines;
 }
 
+function previewLineBudget(removedCount: number, addedCount: number) {
+  const contentBudget = EXTENSION_VIEW_LIMITS.maxDiffLines - 1;
+  if (removedCount + addedCount <= contentBudget) {
+    return { removed: removedCount, added: addedCount };
+  }
+
+  let removed = Math.min(removedCount, Math.floor(contentBudget / 2));
+  let added = Math.min(addedCount, contentBudget - removed);
+  const unused = contentBudget - removed - added;
+  if (unused > 0) {
+    const extraRemoved = Math.min(unused, removedCount - removed);
+    removed += extraRemoved;
+    added += Math.min(unused - extraRemoved, addedCount - added);
+  }
+  return { removed, added };
+}
+
+export function createAcpDiffViewNode(
+  diff: AcpDiffOutput,
+  rootFolderPath?: string | null,
+): ExtensionDiffNode {
+  const oldLines = diff.oldText.length > 0 ? diff.oldText.split("\n") : [];
+  const newLines = diff.newText.length > 0 ? diff.newText.split("\n") : [];
+  const budget = previewLineBudget(oldLines.length, newLines.length);
+  const lines: ExtensionDiffNode["lines"] = [
+    {
+      type: "header",
+      content: `-1,${Math.max(oldLines.length, 1)} +1,${Math.max(newLines.length, 1)}`,
+    },
+    ...oldLines.slice(0, budget.removed).map((content, index) => ({
+      type: "removed" as const,
+      content,
+      oldLine: index + 1,
+    })),
+    ...newLines.slice(0, budget.added).map((content, index) => ({
+      type: "added" as const,
+      content,
+      newLine: index + 1,
+    })),
+  ];
+
+  return {
+    type: "diff",
+    filePath: toRelativeDisplayPath(diff.path, rootFolderPath),
+    language: getLanguageHint(diff.path),
+    lines,
+    truncated: budget.removed < oldLines.length || budget.added < newLines.length,
+  };
+}
+
 function toGitDiff(diff: AcpDiffOutput, rootFolderPath?: string | null): GitDiff {
   const displayPath = toRelativeDisplayPath(diff.path, rootFolderPath);
   const isNew = diff.oldText.length === 0 && diff.newText.length > 0;