feat(chat): interactive tool-call UI for agent tools

components/VercelChat/MessageParts.tsx

@@ -2,6 +2,7 @@ import {
   ToolUIPart,
   UIMessage,
   isToolOrDynamicToolUIPart,
+  getToolOrDynamicToolName,
   UIMessagePart,
   UIDataTypes,
   UITools,
@@ -11,6 +12,8 @@ import { cn } from "@/lib/utils";
 import ViewingMessage from "./ViewingMessage";
 import EditingMessage from "./EditingMessage";
 import { getToolCallComponent, getToolResultComponent } from "./ToolComponents";
+import { ToolCall } from "./tools/agent/ToolCall";
+import { isAgentToolName } from "./tools/agent/renderTool";
 import MessageFileViewer from "./message-file-viewer";
 import { EnhancedReasoning } from "@/components/reasoning/EnhancedReasoning";
 import { Actions, Action } from "@/components/actions";
@@ -71,7 +74,7 @@ export function MessageParts({ message, mode, setMode }: MessagePartsProps) {
                       {
                         "justify-start": message.role === "assistant",
                         "justify-end": message.role === "user",
-                      }
+                      },
                     )}
                   >
                     {message.role === "user" && (
@@ -106,14 +109,26 @@ export function MessageParts({ message, mode, setMode }: MessagePartsProps) {
           }
 
           if (isToolOrDynamicToolUIPart(part)) {
-            const { state } = part as ToolUIPart;
-            if (state !== "output-available") {
-              return getToolCallComponent(part as ToolUIPart);
+            const toolPart = part as ToolUIPart;
+            if (isAgentToolName(getToolOrDynamicToolName(toolPart))) {
+              return (
+                <ToolCall
+                  key={key}
+                  part={toolPart}
+                  isStreaming={
+                    status === "streaming" &&
+                    partIndex === message.parts.length - 1
+                  }
+                />
+              );
+            }
+            if (toolPart.state !== "output-available") {
+              return getToolCallComponent(toolPart);
             } else {
-              return getToolResultComponent(part as ToolUIPart);
+              return getToolResultComponent(toolPart);
             }
           }
-        }
+        },
       )}
     </div>
   );

components/VercelChat/tools/agent/ApprovalButtons.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export type ApprovalButtonsProps = {
+  approvalId: string;
+  onApprove?: (id: string) => void;
+  onDeny?: (id: string, reason?: string) => void;
+};
+
+export function ApprovalButtons({
+  approvalId,
+  onApprove,
+  onDeny,
+}: ApprovalButtonsProps) {
+  return (
+    <div className="mt-3 flex items-center gap-2 pl-5">
+      <Button
+        size="sm"
+        variant="outline"
+        className="h-7 border-green-600 text-green-600 hover:bg-green-600 hover:text-white"
+        onClick={() => onApprove?.(approvalId)}
+      >
+        Approve
+      </Button>
+      <Button
+        size="sm"
+        variant="outline"
+        className="h-7 border-red-600 text-red-600 hover:bg-red-600 hover:text-white"
+        onClick={() => onDeny?.(approvalId)}
+      >
+        Deny
+      </Button>
+    </div>
+  );
+}

components/VercelChat/tools/agent/AskUserQuestionRenderer.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { MessageCircleQuestion } from "lucide-react";
+import { ToolLayout } from "./ToolLayout";
+import type { ToolRendererProps } from "./renderTool";
+
+type Question = { question?: string };
+type AskInput = { questions?: Question[] };
+type AskOutput = {
+  declined?: boolean;
+  answers?: Record<string, string | string[]> | null;
+};
+
+export function AskUserQuestionRenderer({ part, state }: ToolRendererProps) {
+  const input = part.input as AskInput | undefined;
+  const output =
+    part.state === "output-available"
+      ? (part.output as AskOutput | undefined)
+      : undefined;
+  const questions = input?.questions ?? [];
+
+  const isWaitingForInput = part.state === "input-available";
+  const isStreaming = part.state === "input-streaming";
+  const hasOutput = part.state === "output-available";
+  const isDeclined = hasOutput && output?.declined === true;
+  const hasAnswers = hasOutput && output?.answers != null;
+
+  const summary = isStreaming
+    ? "Generating questions"
+    : isWaitingForInput
+      ? "Waiting for user input"
+      : isDeclined
+        ? "User declined to answer"
+        : hasAnswers
+          ? "Answered"
+          : state.denied
+            ? "Cancelled"
+            : "Questions";
+
+  const questionCount = questions.length;
+  const meta =
+    questionCount > 0
+      ? `${questionCount} question${questionCount === 1 ? "" : "s"}`
+      : undefined;
+
+  const answers = output?.answers;
+  const expandedContent =
+    hasAnswers && answers ? (
+      <div className="space-y-2">
+        {questions.map((q) => {
+          if (!q?.question) return null;
+          const answer = answers[q.question];
+          const answerStr = Array.isArray(answer)
+            ? answer.join(", ")
+            : (answer ?? "(not answered)");
+          return (
+            <div key={q.question} className="space-y-0.5">
+              <p className="text-sm text-foreground">{q.question}</p>
+              <p className="text-sm text-muted-foreground">
+                <span className="text-green-500">&rarr;</span> {answerStr}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    ) : undefined;
+
+  const displayState = isWaitingForInput
+    ? { ...state, interrupted: false }
+    : state;
+
+  return (
+    <ToolLayout
+      name="Ask user"
+      summary={summary}
+      meta={meta}
+      state={displayState}
+      icon={<MessageCircleQuestion className="h-3.5 w-3.5" />}
+      nameClassName={state.denied || isDeclined ? "text-red-500" : undefined}
+      expandedContent={expandedContent}
+      defaultExpanded={false}
+    />
+  );
+}

components/VercelChat/tools/agent/BashRenderer.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { Terminal } from "lucide-react";
+import { ToolLayout } from "./ToolLayout";
+import type { ToolRendererProps } from "./renderTool";
+
+type BashInput = { command?: string; cwd?: string; detached?: boolean };
+type BashOutput = {
+  success?: boolean;
+  exitCode?: number | null;
+  stdout?: string;
+  stderr?: string;
+};
+
+export function BashRenderer({
+  part,
+  state,
+  onApprove,
+  onDeny,
+}: ToolRendererProps) {
+  const input = part.input as BashInput | undefined;
+  const command = String(input?.command ?? "");
+  const isDetached = input?.detached === true;
+
+  const output =
+    part.state === "output-available"
+      ? (part.output as BashOutput | undefined)
+      : undefined;
+  const exitCode = output?.exitCode;
+  const stdout = output?.stdout;
+  const stderr = output?.stderr;
+  const hasOutput = Boolean(stdout || stderr);
+  const toolFailed = output?.success === false;
+  const isError =
+    toolFailed || (typeof exitCode === "number" && exitCode !== 0);
+
+  const combinedOutput = [stdout, stderr].filter(Boolean).join("\n").trim();
+  const hasExpandableContent = part.state === "output-available" || isDetached;
+
+  // When bash errors, route through ToolLayout's standard error UI.
+  const mergedState =
+    isError && !state.error
+      ? { ...state, error: `Exit code ${exitCode ?? "unknown"}` }
+      : state;
+
+  const meta = isDetached ? (
+    <span className="rounded bg-blue-500/15 px-1.5 py-0.5 text-[11px] font-medium text-blue-500">
+      detached
+    </span>
+  ) : undefined;
+
+  const errorMetaContent =
+    isError && exitCode !== undefined && exitCode !== null
+      ? `exit ${exitCode}`
+      : undefined;
+
+  const expandedContent = hasExpandableContent ? (
+    isError ? (
+      hasOutput ? (
+        <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-md border border-red-500/20 bg-red-500/5 px-3 py-2 font-mono text-xs leading-relaxed text-red-400">
+          {combinedOutput}
+        </pre>
+      ) : undefined
+    ) : (
+      <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-md border border-border bg-muted/50 p-3 font-mono text-xs leading-relaxed text-muted-foreground">
+        {hasOutput ? combinedOutput : "(No output)"}
+      </pre>
+    )
+  ) : undefined;
+
+  return (
+    <ToolLayout
+      name="Bash"
+      summary={command || "..."}
+      summaryClassName="font-mono"
+      meta={meta}
+      errorMeta={errorMetaContent}
+      state={mergedState}
+      icon={<Terminal className="h-3.5 w-3.5" />}
+      expandedContent={expandedContent}
+      onApprove={onApprove}
+      onDeny={onDeny}
+    />
+  );
+}

components/VercelChat/tools/agent/EditRenderer.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Pencil } from "lucide-react";
+import { useMemo } from "react";
+import { ToolLayout } from "./ToolLayout";
+import { FileNamePill } from "./FileNamePill";
+import type { ToolRendererProps } from "./renderTool";
+
+type EditInput = { filePath?: string; oldString?: string; newString?: string };
+type EditOutput = { success?: boolean; error?: string };
+
+export function EditRenderer({
+  part,
+  state,
+  onApprove,
+  onDeny,
+}: ToolRendererProps) {
+  const input = part.input as EditInput | undefined;
+  const filePath = input?.filePath ?? "...";
+  const oldString = input?.oldString ?? "";
+  const newString = input?.newString ?? "";
+
+  const { additions, removals } = useMemo(() => {
+    const oldLines = oldString.split("\n");
+    const newLines = newString.split("\n");
+
+    const oldCounts = new Map<string, number>();
+    for (const line of oldLines) {
+      oldCounts.set(line, (oldCounts.get(line) ?? 0) + 1);
+    }
+    const newCounts = new Map<string, number>();
+    for (const line of newLines) {
+      newCounts.set(line, (newCounts.get(line) ?? 0) + 1);
+    }
+
+    let add = 0;
+    for (const [line, count] of newCounts) {
+      add += Math.max(0, count - (oldCounts.get(line) ?? 0));
+    }
+    let remove = 0;
+    for (const [line, count] of oldCounts) {
+      remove += Math.max(0, count - (newCounts.get(line) ?? 0));
+    }
+    return { additions: add, removals: remove };
+  }, [oldString, newString]);
+
+  const output =
+    part.state === "output-available"
+      ? (part.output as EditOutput | undefined)
+      : undefined;
+  const outputError =
+    output?.success === false ? (output?.error ?? "Edit failed") : undefined;
+
+  const mergedState = outputError
+    ? { ...state, error: state.error ?? outputError }
+    : state;
+
+  const showDiff =
+    mergedState.approvalRequested ||
+    (!mergedState.running && !mergedState.error && !mergedState.denied);
+
+  const expandedContent =
+    showDiff && !mergedState.denied && (oldString || newString) ? (
+      <div className="max-h-96 overflow-auto rounded-md border border-border bg-muted/50 p-3 font-mono text-xs leading-relaxed">
+        {oldString
+          .split("\n")
+          .filter((_, i, arr) => !(arr.length === 1 && arr[0] === ""))
+          .map((line, i) => (
+            <div key={`old-${i}`} className="whitespace-pre-wrap text-red-400">
+              <span className="select-none text-red-500">- </span>
+              {line}
+            </div>
+          ))}
+        {newString
+          .split("\n")
+          .filter((_, i, arr) => !(arr.length === 1 && arr[0] === ""))
+          .map((line, i) => (
+            <div
+              key={`new-${i}`}
+              className="whitespace-pre-wrap text-green-400"
+            >
+              <span className="select-none text-green-500">+ </span>
+              {line}
+            </div>
+          ))}
+      </div>
+    ) : undefined;
+
+  const meta =
+    showDiff && !mergedState.denied ? (
+      <span className="inline-flex items-center gap-1.5">
+        <span className="text-green-500">+{additions}</span>
+        <span className="text-red-500">-{removals}</span>
+      </span>
+    ) : undefined;
+
+  return (
+    <ToolLayout
+      name="Update"
+      icon={<Pencil className="h-3.5 w-3.5" />}
+      summary={
+        filePath === "..." ? (
+          filePath
+        ) : (
+          <FileNamePill
+            filePath={filePath}
+            error={Boolean(mergedState.error)}
+          />
+        )
+      }
+      meta={meta}
+      errorMeta={mergedState.error ? "failed" : undefined}
+      state={mergedState}
+      expandedContent={expandedContent}
+      onApprove={onApprove}
+      onDeny={onDeny}
+    />
+  );
+}