WIP: PWA chat: make a tool call say what it is doing, and make a failed one say what broke #606

Draft

toasterson wants to merge 1 commit from claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is into main

toasterson commented

2026-08-16 18:59:16 +00:00

Owner

Anima work item 019ff174-520b-7f52-9bfd-d961bb80adde.

anima-pwa/src/components/chat/ToolCallCard.tsx renders the same title text in every state and encodes the state only as colour: STATUS_DOT / STATUS_BORDER / STATUS_LABEL keyed on ToolCallStatus (pending | in_progress | completed | failed). Two problems follow.

First, the card never shifts tense. A read that is running and a read that finished both read "Read src/lib/acp.ts" and differ by a spinner glyph. The reference pattern (shadcn-ui/chatbot-template, components/parts/web-search-part.tsx) switches the COPY on state — "Searching the web for "x"…" while in flight, "Searched the web for "x"" once done. That is a free legibility win and it makes a stalled call obvious at a glance.

Second, and more important: a FAILED call gets a red dot and a red border on the same layout as a successful one. Its error is buried in the expanded content blocks — which do open by default for failures, but the header still says nothing went wrong. A failure and a success must not be one glyph apart. The template gives output-error its own destructive branch with the error text, not a recolour of the success layout.

WHAT TO BUILD

Per-status copy for the card header, derived from call.kind (read/edit/delete/move/search/execute/think/fetch/switch_mode/other) and call.status. Present-progressive while running, past tense once complete. Keep it terse — this is a one-line header, not a sentence.
A distinct failure presentation: the header states that the call failed and surfaces the reason inline, not only inside the expandable body. Take the reason from what the call actually carries (rawOutput, or the text content block); if there is nothing true to say, say the call failed without inventing a cause.
Respect call.title when the agent supplied a meaningful one — the agent's own wording beats our generated phrasing. The generated copy is the fallback and the tense/state carrier.

CONSTRAINTS

Keep the Record<Status, string> map style. No cva. Class strings stay static literals — the existing comment in the file explains why, honour it.
Do NOT change the open/collapse rule. open = override ?? (status === 'in_progress' || status === 'failed') with a sticky user override is deliberate and was written to fix a real bug; leave it.
Keep detailOf memoized on call. It runs the LCS diff and previously ran on every render of every card.

VERIFY: extend ToolCallCard.test.tsx to cover the tense shift per status and the failure header. npm run build + full npm test green.

Anima work item `019ff174-520b-7f52-9bfd-d961bb80adde`. `anima-pwa/src/components/chat/ToolCallCard.tsx` renders the same title text in every state and encodes the state only as colour: `STATUS_DOT` / `STATUS_BORDER` / `STATUS_LABEL` keyed on `ToolCallStatus` (`pending` | `in_progress` | `completed` | `failed`). Two problems follow. First, the card never shifts tense. A read that is running and a read that finished both read "Read src/lib/acp.ts" and differ by a spinner glyph. The reference pattern (`shadcn-ui/chatbot-template`, `components/parts/web-search-part.tsx`) switches the COPY on state — "Searching the web for "x"…" while in flight, "Searched the web for "x"" once done. That is a free legibility win and it makes a stalled call obvious at a glance. Second, and more important: a FAILED call gets a red dot and a red border on the same layout as a successful one. Its error is buried in the expanded content blocks — which do open by default for failures, but the header still says nothing went wrong. A failure and a success must not be one glyph apart. The template gives `output-error` its own destructive branch with the error text, not a recolour of the success layout. WHAT TO BUILD - Per-status copy for the card header, derived from `call.kind` (`read`/`edit`/`delete`/`move`/`search`/`execute`/`think`/`fetch`/`switch_mode`/`other`) and `call.status`. Present-progressive while running, past tense once complete. Keep it terse — this is a one-line header, not a sentence. - A distinct failure presentation: the header states that the call failed and surfaces the reason inline, not only inside the expandable body. Take the reason from what the call actually carries (`rawOutput`, or the text content block); if there is nothing true to say, say the call failed without inventing a cause. - Respect `call.title` when the agent supplied a meaningful one — the agent's own wording beats our generated phrasing. The generated copy is the fallback and the tense/state carrier. CONSTRAINTS - Keep the `Record<Status, string>` map style. No cva. Class strings stay static literals — the existing comment in the file explains why, honour it. - Do NOT change the open/collapse rule. `open = override ?? (status === 'in_progress' || status === 'failed')` with a sticky user override is deliberate and was written to fix a real bug; leave it. - Keep `detailOf` memoized on `call`. It runs the LCS diff and previously ran on every render of every card. VERIFY: extend `ToolCallCard.test.tsx` to cover the tense shift per status and the failure header. `npm run build` + full `npm test` green.

toasterson added 1 commit

2026-08-16 18:59:16 +00:00

PWA chat: make a tool call say what it is doing, and make a failed one say what broke 721487a510

Anima implementation session.

This pull request is marked as a work in progress.

This branch is out-of-date with the base branch

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is:claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

git switch claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main

git merge --no-ff claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

git switch claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

git rebase main

git switch main

git merge --ff-only claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

git switch claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

git rebase main

git switch main

git merge --no-ff claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is

git switch main

git merge --squash claude/wi-019ff174-pwa-chat-make-a-tool-call-say-what-it-is