Implement tool call visibility UI in Canvas AI
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3575780. -->
Reported by: [afoster](https://www.drupal.org/user/594458)
>>>
<h2 id="problem-motivation">Problem/Motivation</h2>
<p>When a user sends a prompt in Canvas AI, the chat UI currently shows hard-coded text snippets mapped to specific tool calls (e.g., "Building your page…"). This approach has several problems:</p>
<ul>
<li><strong>Not scalable</strong> — every new tool or agent requires a new hard-coded mapping</li>
<li><strong>Not transparent</strong> — users can't see what the AI actually did, only a generic label</li>
<li><strong>Not debuggable</strong> — when something goes wrong (e.g., wrong context loaded, hallucinated tool use), there's no way to verify what happened</li>
<li><strong>Long wait times feel broken</strong> — complex operations can run for minutes with no meaningful feedback</li>
</ul>
<p>The tool call data (which tools ran, what inputs they received) is already available in the chat message output. It just isn't being rendered.</p>
<h2 id="proposed-resolution">Proposed resolution</h2>
<p>Replace the hard-coded tool call text with a dynamic tool call visibility UI, based on the designs in #3572362. The implementation should:</p>
<p><img src="https://www.drupal.org/files/issues/2026-02-25/Screenshot%202026-02-25%20at%2012.05.05%E2%80%AFPM.png" alt="Mockup of UI"></p>
<p><img src="https://www.drupal.org/files/issues/2026-02-25/Screenshot%202026-02-25%20at%2012.05.16%E2%80%AFPM.png" alt="mockup with context items"></p>
<ol>
<li><strong>Render actual tool calls</strong> from the chat message data instead of hard-coded snippets</li>
<li><strong>Show a collapsed state by default</strong> with a circle/spinner loading animation while processing</li>
<li><strong>Use checkmark icons</strong> as the default completed-step icon, with support for tools/agents to optionally provide a custom SVG icon (Phosphor icons at 16px)</li>
<li><strong>List loaded context items by name</strong> when the gathering-context tool runs (e.g., "Brand Guidelines (3)", "Landing Page Content Strategy")</li>
<li><strong>Support expand/collapse</strong> so users can see tool call details or keep the view compact</li>
</ol>
<p>Designs are available in the Figma linked from #3572362.</p>
<p><a href="https://www.figma.com/design/H1BM5r6pF41J06RqnFmgT1/Drupal-AI--Canvas-AI-Toolcalls?node-id=4-23814&p=f&t=LUi3U3qxuwikTmCT-11"></a></p>
<h3 id="out-of-scope-for-this-issue">Out of scope for this issue</h3>
<ul>
<li>Plan-and-execute mode rendering (future follow-up)</li>
<li>Debug/verbose mode toggle</li>
<li>Tool call summarization for high-volume calls (e.g., "Created 50 taxonomy terms")</li>
</ul>
> Related issue: [Issue #3572362](https://www.drupal.org/node/3572362)
issue