tool rows: past-tense verbs replace name chips; sheet bodies for all tools

Row format is now `<verb> <summary>` everywhere — muted past-tense verb,
darker object, red verb on failure — matching claude.ai/code's vocabulary
(live-probed 2026-06-12): Ran / Read / Edited / Created / Searched /
Searched web / Fetched / Ran agent / Used <name>. The uppercase ToolChip
is gone from both the transcript row and the sheet header; Bash's old
"Ran <description>" pattern is simply generalized. running rows render
past tense too (no -ing flicker mid-turn).

The tool-call sheet's default-null branch is gone with it — every detail
variant now has a body: web_search results as native text, web_fetch and
agent render their markdown output through ChunkedMarkdown (plus URL/
prompt sections), monitor reuses the Bash command+output view, ask_user
shows questions with answers, tasks/schedule_wakeup show labeled fields.

Agent rows surface the per-spawn model override when present (new
optional protocol field — additive, no version bump; the common
inherit-from-parent case has no model in input and is not
reconstructible). subagent_type follows the SDK in being optional, and
task_stop's summary drops its trailing "stopped" so the verb doesn't
read twice.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: yyq1025

packages/app/src/components/transcript/chat-panel.tsx

@@ -47,9 +47,9 @@ import {
 
 // ToolBlock row height, derived from its styles (keep in sync with
 // tool-block.tsx): Pressable py-1.5 (12) + one text-base line (lineHeight
-// 24, the tallest child — ToolChip is ~18). Both Bash and chip branches are
-// single-line by construction (numberOfLines={1}). The text line scales
-// with Dynamic Type; the vertical padding doesn't.
+// 24). The verb+summary row is single-line by construction
+// (numberOfLines={1}). The text line scales with Dynamic Type; the
+// vertical padding doesn't.
 const TOOL_ROW_PADDING_V = 12;
 const TOOL_ROW_LINE_HEIGHT = 24;
 

packages/app/src/components/transcript/tool-block.tsx

@@ -1,6 +1,7 @@
-import { Pressable, Text, View } from "react-native";
+import { Pressable, Text } from "react-native";
+import { toolVerb } from "@/lib/tool-verbs";
 import type { ToolRenderBlock } from "@/lib/transcript-blocks";
-import { ToolChip, useToolCallSheet } from "./tool-call-sheet";
+import { useToolCallSheet } from "./tool-call-sheet";
 
 /**
  * Trigger row for a paired tool_use+tool_result. Tap → opens the shared
@@ -19,50 +20,33 @@ import { ToolChip, useToolCallSheet } from "./tool-call-sheet";
  *      renderer (the Pierre webview) opened on demand — no per-row mounting,
  *      no virtualization pressure, no jitter.
  *
- * Bash gets a chip-less "Ran <description>" verb-led header to match
- * Claude Desktop. Other tools render `<chip> <summary>`.
+ * Row format = `<verb> <summary>` (claude.ai/code vocabulary, see
+ * tool-verbs.ts): muted past-tense verb + darker object, red verb on
+ * failure. Replaced the former uppercase tool-name chip (ToolChip) —
+ * Bash rows already rendered this way ("Ran <description>"); this is
+ * that pattern generalized to every tool.
  */
 export function ToolBlock({ block }: { block: ToolRenderBlock }) {
   const { openToolCall } = useToolCallSheet();
   const isError = block.status === "failed";
-  const isBash = block.name === "Bash";
 
   return (
-    <Pressable
-      onPress={() => openToolCall(block)}
-      className="flex-row items-center gap-2 px-4 py-1.5"
-    >
-      {isBash ? (
+    <Pressable onPress={() => openToolCall(block)} className="px-4 py-1.5">
+      <Text
+        numberOfLines={1}
+        className="text-base text-gray-700 dark:text-gray-300"
+      >
         <Text
-          numberOfLines={1}
-          className="flex-1 text-base text-gray-700 dark:text-gray-300"
+          className={
+            isError
+              ? "text-red-600 dark:text-red-400"
+              : "text-gray-500 dark:text-gray-400"
+          }
         >
-          <Text
-            className={
-              isError
-                ? "text-red-600 dark:text-red-400"
-                : "text-gray-500 dark:text-gray-400"
-            }
-          >
-            Ran{" "}
-          </Text>
-          {block.summary}
+          {toolVerb(block.detail)}
         </Text>
-      ) : (
-        <>
-          <ToolChip name={block.name} isError={isError} />
-          {block.summary ? (
-            <Text
-              numberOfLines={1}
-              className="flex-1 text-base text-gray-700 dark:text-gray-300"
-            >
-              {block.summary}
-            </Text>
-          ) : (
-            <View className="flex-1" />
-          )}
-        </>
-      )}
+        {block.summary ? ` ${block.summary}` : ""}
+      </Text>
     </Pressable>
   );
 }

packages/app/src/components/transcript/tool-call-sheet.tsx

@@ -23,6 +23,8 @@ import {
 import { KeyboardController } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useWorkingTreeDiff } from "@/hooks/use-working-tree-diff";
+import { ChunkedMarkdown } from "@/lib/markdown/chunked-markdown";
+import { toolVerb } from "@/lib/tool-verbs";
 import type { ToolRenderBlock } from "@/lib/transcript-blocks";
 import workerPortableAsset from "../../../assets/pierre/worker-portable.pwt";
 import PierreView from "./pierre-view";
@@ -290,22 +292,23 @@ export function ToolCallSheetProvider({ children }: { children: ReactNode }) {
         </View>
         <View className="flex-row items-center gap-2 border-b border-gray-200 px-4 py-3 dark:border-gray-800">
           {showing?.kind === "tool" ? (
-            <>
-              <ToolChip
-                name={showing.block.name}
-                isError={showing.block.status === "failed"}
-              />
-              {showing.block.summary ? (
-                <Text
-                  numberOfLines={1}
-                  className="flex-1 text-base text-gray-700 dark:text-gray-300"
-                >
-                  {showing.block.summary}
-                </Text>
-              ) : (
-                <View className="flex-1" />
-              )}
-            </>
+            // Same `<verb> <summary>` line as the transcript row (ToolBlock),
+            // so the sheet header reads as a continuation of the tapped row.
+            <Text
+              numberOfLines={1}
+              className="flex-1 text-base text-gray-700 dark:text-gray-300"
+            >
+              <Text
+                className={
+                  showing.block.status === "failed"
+                    ? "text-red-600 dark:text-red-400"
+                    : "text-gray-500 dark:text-gray-400"
+                }
+              >
+                {toolVerb(showing.block.detail)}
+              </Text>
+              {showing.block.summary ? ` ${showing.block.summary}` : ""}
+            </Text>
           ) : showing?.kind === "gitDiff" ? (
             <Text
               numberOfLines={1}
@@ -406,9 +409,11 @@ type Descriptor =
   | { mode: "native"; node: ReactNode };
 
 /**
- * Map a tool block to how its body renders. Diff/code go to the Pierre webview;
- * errors, `unknown`, and empty output render natively (plain Text — no
- * react-native-diffs). Mirrors the old `DetailBody` dispatch.
+ * Map a tool block to how its body renders. Diffs and code-shaped output
+ * (bash/read/grep/glob/monitor) go to the Pierre webview; everything else —
+ * errors, empty output, markdown-bearing tools (web_fetch/agent via
+ * ChunkedMarkdown), field-shaped tools (tasks, schedule_wakeup, ask_user),
+ * and `unknown` — renders natively inside the sheet's ScrollView.
  */
 function describeDetail(block: ToolRenderBlock): Descriptor {
   const isError = block.status === "failed";
@@ -450,6 +455,7 @@ function describeDetail(block: ToolRenderBlock): Descriptor {
     }
     case "grep":
     case "glob":
+      if (isError) return errorNative(error ?? "Tool failed.");
       return detail.output.length === 0
         ? NATIVE_EMPTY
         : {
@@ -460,15 +466,61 @@ function describeDetail(block: ToolRenderBlock): Descriptor {
             noHeader: true,
             noLineNumbers: true,
           };
+    case "web_search":
+      // Result list (title + URL per line) — plain native text, no need
+      // for the webview's tokenizer or horizontal code scroll.
+      if (isError) return errorNative(error ?? "Search failed.");
+      return detail.output.length === 0
+        ? NATIVE_EMPTY
+        : { mode: "native", node: <FieldText>{detail.output}</FieldText> };
+    case "monitor": {
+      // Monitor is a watch command — same command+output body as Bash.
+      const body = formatBashBody(detail.command, detail.output);
+      return body.length === 0
+        ? NATIVE_EMPTY
+        : {
+            mode: "webview",
+            kind: "code",
+            content: body,
+            name: "command.sh",
+            noHeader: true,
+            noLineNumbers: true,
+          };
+    }
+    case "web_fetch":
+      if (isError) return errorNative(error ?? "Fetch failed.");
+      return { mode: "native", node: <WebFetchDetail detail={detail} /> };
+    case "agent":
+      if (isError) return errorNative(error ?? "Agent failed.");
+      return { mode: "native", node: <AgentDetail detail={detail} /> };
+    case "ask_user":
+      return { mode: "native", node: <AskUserDetail detail={detail} /> };
+    case "task_create":
+      return labeledFields([
+        ["Subject", detail.subject],
+        ["Description", detail.description],
+        ["Active form", detail.activeForm],
+        ["Task ID", detail.taskId ? `#${detail.taskId}` : undefined],
+      ]);
+    case "task_update":
+      return labeledFields([
+        ["Task ID", `#${detail.taskId}`],
+        ["Status", detail.status],
+        ["Active form", detail.activeForm],
+      ]);
+    case "task_stop":
+      return labeledFields([["Task ID", `#${detail.taskId}`]]);
+    case "schedule_wakeup":
+      return labeledFields([
+        ["Delay", `${detail.delaySeconds}s`],
+        ["Reason", detail.reason],
+        ["Prompt", detail.prompt],
+      ]);
     case "unknown":
       return {
         mode: "native",
         node: <UnknownDetail detail={detail} isError={isError} error={error} />,
       };
-    default:
-      // Long-tail types not specially rendered in V0 (web_fetch, agent, etc.) —
-      // render nothing, matching the old switch's implicit fall-through.
-      return { mode: "native", node: null };
   }
 }
 
@@ -546,6 +598,120 @@ function UnknownDetail({
   );
 }
 
+/** Monospace-ish selectable text block, same chrome as UnknownDetail input. */
+function FieldText({ children }: { children: string }) {
+  return (
+    <Text
+      selectable
+      className="rounded bg-gray-100 p-2 text-xs text-gray-900 dark:bg-gray-900 dark:text-gray-100"
+    >
+      {children}
+    </Text>
+  );
+}
+
+/** Labeled-fields native body; skips empty/undefined values. */
+function labeledFields(
+  fields: Array<[label: string, value: string | undefined]>,
+): Descriptor {
+  const visible = fields.filter(
+    (f): f is [string, string] => f[1] !== undefined && f[1].length > 0,
+  );
+  if (visible.length === 0) return NATIVE_EMPTY;
+  return {
+    mode: "native",
+    node: (
+      <View>
+        {visible.map(([label, value], i) => (
+          <View key={label} className={i > 0 ? "mt-3" : undefined}>
+            <SectionLabel>{label}</SectionLabel>
+            <FieldText>{value}</FieldText>
+          </View>
+        ))}
+      </View>
+    ),
+  };
+}
+
+function WebFetchDetail({
+  detail,
+}: {
+  detail: Extract<ToolCallDetail, { type: "web_fetch" }>;
+}) {
+  return (
+    <View>
+      <SectionLabel>URL</SectionLabel>
+      <FieldText>{detail.url}</FieldText>
+      <View className="mt-3">
+        <SectionLabel>Prompt</SectionLabel>
+        <FieldText>{detail.prompt}</FieldText>
+      </View>
+      <View className="mt-3">
+        <SectionLabel>Output</SectionLabel>
+        {/* WebFetch output is the fetch-side model's prose summary —
+            markdown, not raw page text. Render it like chat. */}
+        {detail.output.length > 0 ? (
+          <ChunkedMarkdown markdown={detail.output} streamDone />
+        ) : (
+          <EmptyOutput />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function AgentDetail({
+  detail,
+}: {
+  detail: Extract<ToolCallDetail, { type: "agent" }>;
+}) {
+  return (
+    <View>
+      <SectionLabel>Prompt</SectionLabel>
+      <FieldText>{detail.prompt}</FieldText>
+      <View className="mt-3">
+        <SectionLabel>Output</SectionLabel>
+        {/* The subagent's final text — markdown prose, render like chat.
+            Its intermediate tool calls live in the subagent JSONL and are
+            not surfaced here (V0.5+ Background Tasks panel). */}
+        {detail.output.length > 0 ? (
+          <ChunkedMarkdown markdown={detail.output} streamDone />
+        ) : (
+          <EmptyOutput />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function AskUserDetail({
+  detail,
+}: {
+  detail: Extract<ToolCallDetail, { type: "ask_user" }>;
+}) {
+  return (
+    <View>
+      {detail.questions.map((q, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: questions are positional and static
+        <View key={i} className={i > 0 ? "mt-3" : undefined}>
+          <SectionLabel>{q.header || `Question ${i + 1}`}</SectionLabel>
+          <Text
+            selectable
+            className="mb-1 text-sm text-gray-900 dark:text-gray-100"
+          >
+            {q.question}
+          </Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            {detail.answers?.[i]
+              ? `Answered: ${detail.answers[i]}`
+              : "(unanswered)"}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
 function SectionLabel({
   children,
   error,
@@ -566,34 +732,6 @@ function SectionLabel({
   );
 }
 
-// ─── Shared chip (used by trigger row in tool-block.tsx and sheet header) ──
-
-export function ToolChip({
-  name,
-  isError,
-}: {
-  name: string;
-  isError: boolean;
-}) {
-  return (
-    <View
-      className={`rounded-md px-2 py-0.5 ${
-        isError ? "bg-red-100 dark:bg-red-900" : "bg-blue-100 dark:bg-blue-900"
-      }`}
-    >
-      <Text
-        className={`text-[11px] font-semibold uppercase tracking-wide ${
-          isError
-            ? "text-red-700 dark:text-red-200"
-            : "text-blue-700 dark:text-blue-200"
-        }`}
-      >
-        {name}
-      </Text>
-    </View>
-  );
-}
-
 // ─── Helpers ───────────────────────────────────────────────────────────────
 
 /**