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&hellip;"). This approach has several problems:</p> <ul> <li><strong>Not scalable</strong> &mdash; every new tool or agent requires a new hard-coded mapping</li> <li><strong>Not transparent</strong> &mdash; users can't see what the AI actually did, only a generic label</li> <li><strong>Not debuggable</strong> &mdash; 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> &mdash; 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&amp;p=f&amp;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