feat(clients): MCP app approvals say what the tool does instead of printing raw JSON

apps/mobile/src/features/threads/McpAppWebView.tsx

@@ -8,6 +8,7 @@ import {
   type McpAppHost,
   type McpAppHostContext,
 } from "@t3tools/client-runtime/mcp-apps";
+import { summarizeMcpAppToolCall } from "@t3tools/client-runtime/mcp-apps/tool-call";
 import { scopeThreadRef } from "@t3tools/client-runtime/environment";
 import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
 import { CommandId, MessageId } from "@t3tools/contracts";
@@ -84,6 +85,40 @@ const commandFailure = (result: {
   );
 };
 
+/**
+ * Asks before an app runs a tool: the tool's own description first, with the
+ * raw arguments one tap away rather than in the alert body.
+ */
+const confirmToolCall = (
+  server: string,
+  name: string,
+  info: { readonly title?: string; readonly tool?: unknown },
+  args: Record<string, unknown>,
+): Promise<boolean> => {
+  const { question, description } = summarizeMcpAppToolCall({
+    server,
+    name,
+    title: info.title,
+    tool: info.tool,
+  });
+  const request = JSON.stringify(args, null, 2);
+  return new Promise<boolean>((resolve) => {
+    Alert.alert(
+      question,
+      description ?? "",
+      [
+        { text: "Cancel", style: "cancel", onPress: () => resolve(false) },
+        {
+          text: "Show request",
+          onPress: () => void confirm(question, request, "Allow").then(resolve),
+        },
+        { text: "Allow", onPress: () => resolve(true) },
+      ],
+      { cancelable: true, onDismiss: () => resolve(false) },
+    );
+  });
+};
+
 const confirm = (title: string, message: string, action: string) =>
   new Promise<boolean>((resolve) => {
     Alert.alert(
@@ -329,14 +364,7 @@ export function ThreadMcpApp(props: {
         const info = await latest.current.toolInfo({ environmentId, input: { ...input, name } });
         if (info._tag !== "Success") throw commandFailure(info);
         if (!info.value.callable) throw new McpAppHostRefusal("This app cannot call that tool.");
-        if (
-          !info.value.readOnly &&
-          !(await confirm(
-            `Allow ${app.server} to run ${info.value.title ?? name}?`,
-            JSON.stringify(args, null, 2),
-            "Allow",
-          ))
-        ) {
+        if (!info.value.readOnly && !(await confirmToolCall(app.server, name, info.value, args))) {
           throw new McpAppHostRefusal("Declined by the user.");
         }
         const result = await latest.current.callTool({

apps/web/src/components/ConfirmDialogHost.tsx

@@ -17,6 +17,7 @@ import {
   AlertDialogTitle,
 } from "./ui/alert-dialog";
 import { Button } from "./ui/button";
+import { ToolCallRequest } from "./ToolCallRequest";
 
 type ConfirmationCopy = {
   readonly title: string;
@@ -60,7 +61,12 @@ export function ConfirmDialogHost() {
 
   useEffect(() => registerConfirmDialogHost(), []);
 
-  const copy = resolveConfirmDialogCopy(state.status === "idle" ? "" : state.message);
+  const message = state.status === "idle" ? "" : state.message;
+  const toolCall = state.status === "idle" ? undefined : state.toolCall;
+  // A tool call's message is already the question; its description is the tool's.
+  const copy: ConfirmationCopy = toolCall
+    ? { title: message, description: toolCall.description ?? null }
+    : resolveConfirmDialogCopy(message);
   const confirmVariant = state.status === "idle" ? "default" : state.variant;
   const onCancel = () => respondToConfirmDialog(false);
   const onConfirm = () => respondToConfirmDialog(true);
@@ -83,6 +89,12 @@ export function ConfirmDialogHost() {
               {copy.description}
             </AlertDialogDescription>
           ) : null}
+          {toolCall ? (
+            <ToolCallRequest
+              arguments={toolCall.arguments}
+              argumentDescriptions={toolCall.argumentDescriptions}
+            />
+          ) : null}
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>

apps/web/src/components/ToolCallRequest.logic.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  countRequestItemTypes,
+  formatRequestSize,
+  parseEmbeddedJson,
+  previewRequestScalar,
+  summarizeRequestValue,
+} from "./ToolCallRequest.logic";
+
+describe("parseEmbeddedJson", () => {
+  it("unpacks a string that holds a JSON object or list", () => {
+    expect(parseEmbeddedJson('{\n  "type": "excalidraw"\n}')).toEqual({ type: "excalidraw" });
+    expect(parseEmbeddedJson(" [1, 2]")).toEqual([1, 2]);
+  });
+
+  it("leaves other values alone", () => {
+    expect(parseEmbeddedJson("hello")).toBe("hello");
+    expect(parseEmbeddedJson("{not json")).toBe("{not json");
+    expect(parseEmbeddedJson("42")).toBe("42");
+    expect(parseEmbeddedJson(42)).toBe(42);
+  });
+});
+
+describe("summarizeRequestValue", () => {
+  it("names an item by the fields that usually say what it is", () => {
+    expect(summarizeRequestValue({ id: "a1", type: "arrow", x: 160 })).toBe("arrow · a1");
+    expect(summarizeRequestValue({ type: "text", text: "Browser", id: "browser-label" })).toBe(
+      "text · Browser",
+    );
+  });
+
+  it("counts fields or items when nothing names it", () => {
+    expect(summarizeRequestValue({ gridSize: 20, viewBackgroundColor: "#fff" })).toBe("2 fields");
+    expect(summarizeRequestValue({})).toBe("empty");
+    expect(summarizeRequestValue([1])).toBe("1 item");
+  });
+});
+
+describe("countRequestItemTypes", () => {
+  it("groups typed items", () => {
+    expect(
+      countRequestItemTypes([{ type: "text" }, { type: "rectangle" }, { type: "text" }, 3]),
+    ).toBe("text ×2, rectangle ×1");
+  });
+
+  it("says nothing for untyped lists", () => {
+    expect(countRequestItemTypes([1, "a", { name: "x" }])).toBeUndefined();
+  });
+});
+
+describe("previewRequestScalar", () => {
+  it("cuts long text to one line and notes its length", () => {
+    const preview = previewRequestScalar("x".repeat(5000));
+    expect(preview.startsWith("x".repeat(120) + "…")).toBe(true);
+    expect(preview).toContain("5,000 characters");
+  });
+
+  it("shows short values as they are", () => {
+    expect(previewRequestScalar("http://localhost:5855")).toBe("http://localhost:5855");
+    expect(previewRequestScalar(null)).toBe("null");
+    expect(previewRequestScalar(false)).toBe("false");
+  });
+});
+
+describe("formatRequestSize", () => {
+  it("measures the serialized arguments", () => {
+    expect(formatRequestSize({ a: 1 })).toBe("7 B");
+    expect(formatRequestSize({ json: "x".repeat(15_000) })).toBe("14.7 KB");
+  });
+});

apps/web/src/components/ToolCallRequest.logic.ts

@@ -0,0 +1,58 @@
+import * as Predicate from "effect/Predicate";
+
+// Fields that usually name what an item is, in the order a summary uses them.
+const SUMMARY_FIELDS = ["type", "kind", "name", "title", "text", "label", "id"] as const;
+const PREVIEW_LENGTH = 120;
+
+/**
+ * A string argument that holds JSON, such as a serialized document, reads as
+ * the data it carries. Anything else stays as it is.
+ */
+export function parseEmbeddedJson(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  const text = value.trim();
+  if (!text.startsWith("{") && !text.startsWith("[")) return value;
+  try {
+    return JSON.parse(text) as unknown;
+  } catch {
+    return value;
+  }
+}
+
+/** One line for an object or list: what it is, not everything in it. */
+export function summarizeRequestValue(value: unknown): string {
+  if (Array.isArray(value)) return value.length === 1 ? "1 item" : `${value.length} items`;
+  if (!Predicate.isObject(value)) return previewRequestScalar(value);
+  const named = SUMMARY_FIELDS.map((field) => value[field])
+    .filter((field): field is string => typeof field === "string" && field.trim().length > 0)
+    .slice(0, 2);
+  if (named.length > 0) return named.join(" · ");
+  const size = Object.keys(value).length;
+  if (size === 0) return "empty";
+  return size === 1 ? "1 field" : `${size} fields`;
+}
+
+/** For a list of typed items, how many of each: "text ×6, rectangle ×5". */
+export function countRequestItemTypes(items: ReadonlyArray<unknown>): string | undefined {
+  const counts = new Map<string, number>();
+  for (const item of items) {
+    if (Predicate.isObject(item) && typeof item.type === "string") {
+      counts.set(item.type, (counts.get(item.type) ?? 0) + 1);
+    }
+  }
+  if (counts.size === 0) return undefined;
+  return [...counts].map(([type, count]) => `${type} ×${count}`).join(", ");
+}
+
+/** A scalar on one line, with long text cut short and its full length noted. */
+export function previewRequestScalar(value: unknown): string {
+  const text = typeof value === "string" ? value : (JSON.stringify(value) ?? String(value));
+  if (text.length <= PREVIEW_LENGTH) return text;
+  return `${text.slice(0, PREVIEW_LENGTH)}… (${text.length.toLocaleString()} characters)`;
+}
+
+export function formatRequestSize(value: unknown): string {
+  const bytes = new TextEncoder().encode(JSON.stringify(value) ?? "").byteLength;
+  if (bytes < 1024) return `${bytes} B`;
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}

apps/web/src/components/ToolCallRequest.tsx

@@ -0,0 +1,146 @@
+import { ChevronRightIcon } from "lucide-react";
+import * as Predicate from "effect/Predicate";
+import { useState } from "react";
+
+import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
+import { cn } from "~/lib/utils";
+import { Button } from "./ui/button";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./ui/collapsible";
+import {
+  countRequestItemTypes,
+  formatRequestSize,
+  parseEmbeddedJson,
+  previewRequestScalar,
+  summarizeRequestValue,
+} from "./ToolCallRequest.logic";
+
+// Past this many, a list shows the first ones and a count of the rest.
+const LIST_LIMIT = 100;
+
+/**
+ * A tool call's arguments, folded behind "Show request" and laid out as data:
+ * each argument labeled from the tool's schema, JSON inside strings unpacked,
+ * and every object or list closed until it is opened.
+ */
+export function ToolCallRequest(props: {
+  readonly arguments: Readonly<Record<string, unknown>>;
+  readonly argumentDescriptions: Readonly<Record<string, string>>;
+}) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard();
+  const entries = Object.entries(props.arguments);
+  const size = formatRequestSize(props.arguments);
+
+  return (
+    <Collapsible className="text-left">
+      <CollapsibleTrigger className="group/request flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground">
+        <ChevronRightIcon className="size-3.5 transition-transform group-data-panel-open/request:rotate-90" />
+        Show request · {size}
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <div className="mt-2 rounded-lg border bg-muted/72">
+          <div className="max-h-[min(16rem,40dvh)] overflow-y-auto overscroll-contain p-3 text-xs">
+            {entries.length === 0 ? (
+              <p className="text-muted-foreground">No arguments.</p>
+            ) : (
+              entries.map(([name, value]) => (
+                <div key={name} className="not-first:mt-3">
+                  <div className="flex flex-wrap items-baseline gap-2">
+                    <span className="font-mono">{name}</span>
+                    {props.argumentDescriptions[name] ? (
+                      <span className="text-muted-foreground">
+                        {props.argumentDescriptions[name]}
+                      </span>
+                    ) : null}
+                  </div>
+                  <RequestValue value={value} defaultOpen />
+                </div>
+              ))
+            )}
+          </div>
+          <div className="flex items-center justify-between gap-2 border-t px-3 py-1.5 text-muted-foreground text-xs">
+            <span>
+              {entries.length === 1 ? "1 argument" : `${entries.length} arguments`} · {size}
+            </span>
+            <Button
+              variant="link"
+              size="xs"
+              onClick={() => copyToClipboard(JSON.stringify(props.arguments, null, 2))}
+            >
+              {isCopied ? "Copied" : "Copy raw JSON"}
+            </Button>
+          </div>
+        </div>
+      </CollapsiblePanel>
+    </Collapsible>
+  );
+}
+
+function RequestValue(props: {
+  readonly name?: string;
+  readonly value: unknown;
+  readonly defaultOpen?: boolean;
+}) {
+  const value = parseEmbeddedJson(props.value);
+  const unpacked = value !== props.value;
+  const [open, setOpen] = useState(props.defaultOpen === true);
+
+  if (!Array.isArray(value) && !Predicate.isObject(value)) {
+    return (
+      <div className="flex min-w-0 items-baseline gap-2 py-0.5 pl-4">
+        {props.name === undefined ? null : (
+          <span className="shrink-0 font-mono text-muted-foreground">{props.name}</span>
+        )}
+        <span className="min-w-0 truncate">{previewRequestScalar(value)}</span>
+      </div>
+    );
+  }
+
+  const items = Array.isArray(value) ? value : undefined;
+  const types = items === undefined ? undefined : countRequestItemTypes(items);
+  return (
+    <div className="min-w-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        className="flex w-full min-w-0 cursor-pointer items-baseline gap-2 py-0.5 text-left"
+        onClick={() => setOpen((current) => !current)}
+      >
+        <ChevronRightIcon
+          className={cn(
+            "size-3 shrink-0 self-center text-muted-foreground transition-transform",
+            open && "rotate-90",
+          )}
+        />
+        {props.name === undefined ? null : (
+          <span className="shrink-0 font-mono text-muted-foreground">{props.name}</span>
+        )}
+        <span className="min-w-0 truncate text-muted-foreground">
+          {summarizeRequestValue(value)}
+        </span>
+        {unpacked ? (
+          <span className="shrink-0 rounded border px-1 font-mono text-3xs text-muted-foreground">
+            JSON
+          </span>
+        ) : null}
+      </button>
+      {open ? (
+        <div className="pl-4">
+          {types === undefined ? null : <p className="py-0.5 text-muted-foreground">{types}</p>}
+          {items === undefined
+            ? Object.entries(value).map(([key, child]) => (
+                <RequestValue key={key} name={key} value={child} />
+              ))
+            : items.slice(0, LIST_LIMIT).map((child, index) => (
+                // oxlint-disable-next-line react/no-array-index-key -- A request never reorders; items may be identical.
+                <RequestValue key={index} value={child} />
+              ))}
+          {items !== undefined && items.length > LIST_LIMIT ? (
+            <p className="py-0.5 text-muted-foreground">
+              {(items.length - LIST_LIMIT).toLocaleString()} more
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}