fix(chat): adapt to main's coding cards, check-ins and shared tool names

Main moved tool names to shared/ and split out appToolName for approval
words (#929), added Claude Code's coding steps (#940), and gave user
preferences a check-ins switch. The chat branch now meets them:

- appToolName carries the call's state, so the person's own mail and
  calendar keep their running, done and plain words through it.
  approvalWords asks for the app's own action, so a task's waiting line
  still reads "send message on Mail" as main's does.
- A coding step carries plain, declined, alreadyWaiting, stopped and
  notYet, and a run of reads and searches counts every one that finished,
  as Claude Code counts them, with its issues beside it. A run where none
  worked reads "Listed 2 directories, didn't work".
- Imports of the old app tool-name path point at the shared one, and two
  sidebar tests seed the proactive preference.
- Main's approval-words and task-approval-buttons tests assert the
  redesigned card: titled with the action in its step's words, the app
  by its name, Decline and Allow once, and no Always allow here on a
  check-in task's approval.

Author: jerelvelarde

app/src/components/channels/tool-activity.tsx

@@ -385,6 +385,8 @@ export function stepDetails(step: ToolItem): StepDetails {
       refused: false,
       declined: false,
       alreadyWaiting: false,
+      stopped: false,
+      notYet: false,
       pages: 0,
       inputs: [],
       ...(output ? { output, verbatim: true } : {}),
@@ -514,13 +516,19 @@ export function summarise(steps: readonly StepDetails[]): string {
   const done = steps.filter(isDone);
   const of = (kind: StepKind) => done.filter((step) => step.kind === kind);
   const phrases: string[] = [];
-  // Claude Code's own words for a run of reads and searches.
-  const files = of("file").length;
+  /*
+   * Claude Code's own words for a run of reads and searches, which count every one that finished,
+   * as Claude Code counts them: one that didn't work is still counted here, and the issues beside
+   * the line say how many didn't.
+   */
+  const ran = (kind: StepKind) =>
+    steps.filter((step) => step.kind === kind && !step.pending);
+  const files = ran("file").length;
   if (files) phrases.push(`read ${plural(files, "file", "files")}`);
-  const patterns = of("pattern").length;
+  const patterns = ran("pattern").length;
   if (patterns)
     phrases.push(`searched for ${plural(patterns, "pattern", "patterns")}`);
-  const directories = of("directory").length;
+  const directories = ran("directory").length;
   if (directories)
     phrases.push(`listed ${plural(directories, "directory", "directories")}`);
   if (of("search").length) phrases.push("searched the web");

app/src/lib/approval-view.ts

@@ -1,6 +1,10 @@
 import type { ApprovalRequest } from "./approvals";
 import { BROWSER_STEP_PLAIN } from "./computers/step-names";
-import { connectorName, humanise, readToolName } from "./plugins/tool-name";
+import {
+  connectorName,
+  humanise,
+  readToolName,
+} from "@openbot/shared/tool-name";
 
 /**
  * How an approval request reads on its card: a title in plain words, the app it is for, the fields a

app/src/lib/channels/step.ts

@@ -10,7 +10,7 @@ import {
   ownToolLabel,
   personToolLabel,
   readToolName,
-} from "@/lib/plugins/tool-name";
+} from "@openbot/shared/tool-name";
 
 /**
  * What the line under a conversation's name may say about the step its Bot is on, where the step's

app/tests/approval-words.test.tsx

@@ -10,8 +10,8 @@ import { settleReactWork } from "./settle-react-work";
 /*
  * What an approval says it is waiting on. An app's tool is asked about as `<app>/<tool>` on the app,
  * and the card in the conversation once read "Waiting for your approval: requests/get request on
- * requests", the app's key twice and the tool's raw name, where a computer action reads "click on
- * example.com". Both places a person decides one in the browser: the card in the conversation, and
+ * requests", the app's key twice and the tool's raw name. The card is titled with the action in the
+ * words its step uses and names the app by its name. Both places a person decides one in the browser: the card in the conversation, and
  * the row on the Bot's page.
  */
 
@@ -111,27 +111,36 @@ test("in the conversation, an app's approval names the action in words and the a
       <InlineApproval toolCallId="call-computer" fallback={null} />
     </>,
   );
-  const cards = await view.findAllByRole("region", {
-    name: "Waiting for your approval",
-  });
+  await view.findAllByRole("button", { name: "Allow once" });
+  // Each card is named by its title, the action in the words its step uses.
+  const cards = view.getAllByRole("region");
   expect(cards.map((card) => card.querySelector("p")?.textContent)).toEqual([
-    "Waiting for your approval: get request on Requests",
-    "Waiting for your approval: send email on Gmail",
-    "Waiting for your approval: click on example.com",
+    "Get request",
+    "Send your email",
+    "Click on the page",
   ]);
+  // The app by its name, never its key; a computer action on the site it acts on.
+  expect(cards[0]?.textContent).toContain("Requests");
+  expect(cards[1]?.textContent).toContain("Gmail");
+  expect(cards[2]?.textContent).toContain("example.com");
+  for (const card of cards) {
+    expect(card.textContent).not.toContain("requests/");
+    expect(card.textContent).not.toContain("composio");
+  }
 });
 
-test("on the Bot's page, the row says what the Bot wants to do, over the app's name", async () => {
+test("on the Bot's page, the row says what the Bot wants to do, over the Bot and the app's name", async () => {
   serving();
   const view = draw(<WaitingForYou agentId="assistant" />);
-  const row = (await view.findByText("General Assistant wants to get request"))
-    .parentElement as HTMLElement;
-  expect(row.textContent).toContain("Requests");
+  const row = (await view.findByText("Get request")).closest(
+    "section",
+  ) as HTMLElement;
+  expect(row.textContent).toContain("General Assistant · Requests");
   expect(row.textContent).not.toContain("requests/");
   expect(
-    view.getByText("General Assistant wants to send email").parentElement
-      ?.textContent,
-  ).toContain("Gmail");
-  expect(view.getByText("General Assistant wants to click")).toBeTruthy();
+    (view.getByText("Send your email").closest("section") as HTMLElement)
+      .textContent,
+  ).toContain("General Assistant · Gmail");
+  expect(view.getByText("Click on the page")).toBeTruthy();
   expect(view.container.textContent).not.toContain("composio");
 });

app/tests/chat-step.test.tsx

@@ -17,7 +17,7 @@ import {
   useConversationStatus,
   useReportConversation,
 } from "@/components/channels/conversation-presence";
-import { readToolName } from "@/lib/plugins/tool-name";
+import { readToolName } from "@openbot/shared/tool-name";
 import { type StepApproval, stepFor, THINKING } from "@/lib/channels/step";
 import { settleReactWork } from "./settle-react-work";
 

app/tests/coding-tool-cards.test.tsx

@@ -312,7 +312,7 @@ test("a coding turn folds only its reads and searches, and keeps every change an
   ]);
   // A lone read keeps its own line; the two listings fold into one, which says both didn't work.
   expect(view.getByText("Read 39 lines")).toBeTruthy();
-  expect(view.getByText("Listed 2 directories")).toBeTruthy();
+  expect(view.getByText("Listed 2 directories, didn't work")).toBeTruthy();
   expect(view.getByText("2 issues")).toBeTruthy();
 });
 

app/tests/sidebar-row-actions.test.tsx

@@ -123,6 +123,7 @@ function renderSidebar(channels: ChannelSummary[], inbox?: unknown) {
     selfHostBannerDismissed: true,
     narration: null,
     skin: "openbot",
+    proactive: "on",
   });
   queryClient.setQueryData(agentKeys.list(false), []);
   queryClient.setQueryDefaults(botLifecycleKeys.attention, {

app/tests/sidebar-search-hotkey.test.tsx

@@ -101,6 +101,7 @@ function signedIn() {
     selfHostBannerDismissed: true,
     narration: null,
     skin: "openbot",
+    proactive: "on",
   });
   queryClient.setQueryData(agentKeys.list(false), []);
   queryClient.setQueryDefaults(botLifecycleKeys.attention, {

app/tests/task-approval-buttons.test.tsx

@@ -8,7 +8,7 @@ import { WaitingForYou } from "@/components/approvals/waiting";
 import { settleReactWork } from "./settle-react-work";
 
 /*
- * An approval a task started from a check-in raised offers Allow once and Deny, never "Always allow
+ * An approval a task started from a check-in raised offers Decline and Allow once, never "Always allow
  * here": tasks ask before every change whatever the person's rules say, so a rule saved from one
  * would be ignored the next time. Any other approval still offers it. Both places a person decides
  * one in the browser: the card in the conversation, and the row on the Bot's page.
@@ -99,7 +99,7 @@ const names = (scope: HTMLElement) =>
     .getAllByRole("button")
     .map((button) => button.textContent);
 
-test("in the conversation, a check-in task's approval offers Allow once and Deny, and no standing rule", async () => {
+test("in the conversation, a check-in task's approval offers Decline and Allow once, and no standing rule", async () => {
   serving();
   const view = draw(
     <>
@@ -111,37 +111,38 @@ test("in the conversation, a check-in task's approval offers Allow once and Deny
       </section>
     </>,
   );
-  await view.findAllByRole("region", { name: "Waiting for your approval" });
+  await view.findAllByRole("button", { name: "Allow once" });
   expect(names(view.getByRole("region", { name: "task" }))).toEqual([
+    "Decline",
     "Allow once",
-    "Deny",
   ]);
   expect(
     within(view.getByRole("region", { name: "task" })).getByText(
       "Tasks started from a check-in ask before every change.",
     ),
   ).toBeTruthy();
   expect(names(view.getByRole("region", { name: "own" }))).toEqual([
+    "Decline",
     "Allow once",
     "Always allow here",
-    "Deny",
   ]);
 });
 
 test("on the Bot's page, the same: the task's row has no Always allow here, the other row keeps it", async () => {
   serving();
   const view = draw(<WaitingForYou agentId="assistant" />);
+  // Each row is the conversation's approval card, a region named by its title.
   const row = async (path: string) =>
-    (await view.findByText(path, { exact: false })).closest(
-      "[data-slot=item]",
+    (await view.findAllByText(path, { exact: false }))[0]?.closest(
+      "section",
     ) as HTMLElement;
   expect(names(await row("deno-rollback-note.md"))).toEqual([
+    "Decline",
     "Allow once",
-    "Deny",
   ]);
   expect(names(await row("notes.md"))).toEqual([
+    "Decline",
     "Allow once",
     "Always allow here",
-    "Deny",
   ]);
 });

shared/tool-name.ts

@@ -37,14 +37,20 @@ export function readToolName(
   if (parts.length < 3 || parts[0] !== "mcp") return { label: name };
 
   const [, rawServer, ...rest] = parts;
-  return appToolName(rawServer ?? "", rest.join("__"));
+  return appToolName(rawServer ?? "", rest.join("__"), running);
 }
 
 /**
  * One app's tool, from its server key and the tool's own name: what `readToolName` reads out of an
  * `mcp__server__tool` name, and what an approval is asked about as `server/tool`.
  */
-export function appToolName(server: string, tool: string): ToolName {
+export function appToolName(
+  server: string,
+  tool: string,
+  running: ToolState = false,
+  /** Whether the person's own mail and calendar are named for what happened to them. */
+  personal = true,
+): ToolName {
   const broker = brokeredApp(server);
   /*
    * Research is named for what it did, not for who did it. `web_search_exa` would read "Web search
@@ -62,10 +68,10 @@ export function appToolName(server: string, tool: string): ToolName {
    * them, with the app beside the words so two mailboxes are still told apart. See `personalAction`
    * for which calls qualify.
    */
-  const personal = personalAction(server, tool);
-  if (personal)
+  const action = personal ? personalAction(server, tool) : null;
+  if (action)
     return {
-      label: PERSONAL_WORDS[personal][stateOf(running)],
+      label: PERSONAL_WORDS[action][stateOf(running)],
       detail: connectorName(server),
     };
   /*
@@ -143,7 +149,13 @@ export function approvalWords(action: { toolRef: string; scope: string }): {
   const slash = action.toolRef.indexOf("/");
   const app = action.toolRef.slice(0, slash);
   if (slash > 0 && app === action.scope) {
-    const { label } = appToolName(app, action.toolRef.slice(slash + 1));
+    // The app's own action, as a task's line and a chat card have always said it: "send message".
+    const { label } = appToolName(
+      app,
+      action.toolRef.slice(slash + 1),
+      "plain",
+      false,
+    );
     return {
       action: label.charAt(0).toLowerCase() + label.slice(1),
       place: connectorName(app),