#20317: feat(webchat): add toggle to hide tool calls and thinking blocks

## Summary Adds a toggle button (🔧) to the webchat UI toolbar that lets users show/hide tool calls and tool results in the chat thread. Includes a mobile-optimized gear menu in the topbar for accessing all chat controls on small screens. Closes #12097 ## Problem The webchat UI displays all tool calls and tool results inline with conversation messages. For everyday use this creates significant noise — users often just want to see the conversation without implementation details. ## Solution ### Desktop A wrench toggle (🔧) in the chat toolbar alongside the existing brain (thinking) and focus toggles: - **🔧 ON (default):** Shows tool calls and tool results (current behavior) - **🔧 OFF:** Hides tool calls and tool results — clean conversation view ### Mobile (≤600px) A gear icon (⚙) in the **topbar** that opens a dropdown with all chat controls (session selector, thinking toggle, tool calls toggle, focus toggle). This eliminates the content-header row on mobile, maximizing vertical space for chat content. ### Toggle Independence The tool calls toggle and thinking toggle operate **independently** — each controls its own visibility without coupling. The preference is persisted in `localStorage` so it survives page reloads. ## Changes | File | Change | |------|--------| | `ui/src/ui/storage.ts` | Added `chatShowToolCalls: boolean` to `UiSettings` (default: `true`) | | `ui/src/ui/app-render.helpers.ts` | Added wrench icon toggle in desktop controls; new `renderChatMobileToggle()` for mobile gear + dropdown | | `ui/src/ui/app-render.ts` | Wired `showToolCalls` state; render mobile toggle in topbar | | `ui/src/ui/views/chat.ts` | Added `showToolCalls` prop; filters tool messages independently from thinking toggle | | `ui/src/ui/chat/grouped-render.ts` | Accepts `showToolCalls` option; suppresses tool card extraction when OFF | | `ui/src/i18n/locales/en.ts` | Added `toolCallsToggle` i18n string | | `ui/src/styles/layout.css` | Base hiding rules for mobile controls (load order before mobile overrides) | | `ui/src/styles/layout.mobile.css` | Mobile: hide content-header, show gear in topbar with dropdown | | `ui/src/styles/chat/layout.css` | Desktop chat control styles | ## The Look ### Mobile    ### Desktop <img width="1298" height="277" alt="Screenshot 2026-02-19 at 16 53 24" src="https://github.com/user-attachments/assets/4cda11fc-b5c3-4bdb-9dde-d4c174bed455" /> <img width="1274" height="508" alt="Screenshot 2026-02-19 at 16 54 22" src="https://github.com/user-attachments/assets/6cdf20e5-0948-4fab-9b28-61c83de14cfd" /> <img width="1276" height="468" alt="Screenshot 2026-02-19 at 16 54 30" src="https://github.com/user-attachments/assets/f8f6343c-4b9c-4dcb-9c26-fb7847c6b141" /> ## Testing - Toggle persists across page reloads (localStorage) - Default is ON (no behavior change for existing users) - When OFF, tool calls/results are hidden from the chat thread - When ON, all messages render as before - Tool calls and thinking toggles work independently - Mobile: gear icon in topbar, dropdown opens/closes on tap - Desktop: no gear icon visible, controls inline in content header - No impact on actual agent behavior — purely a UI filter <!-- greptile_comment --> <h3>Greptile Summary</h3> Added a toggle button (🔧) to show/hide tool calls and tool results in the webchat UI. The toggle operates independently from the thinking toggle (🧠) and persists preference via localStorage (default: ON to maintain current behavior). **Key changes:** - Added `chatShowToolCalls` boolean to `UiSettings` with proper validation in `storage.ts` - Implemented wrench icon toggle in desktop controls alongside existing brain and focus toggles - Created mobile-optimized gear menu (⚙) in topbar with dropdown containing all chat controls - Modified `buildChatItems()` in `chat.ts` to filter toolResult messages and toolMessages array based on `showToolCalls` state - Updated `grouped-render.ts` to conditionally extract tool cards when `showToolCalls` is enabled - Added comprehensive CSS for mobile dropdown behavior with proper z-index and positioning - Test coverage added for new `showToolCalls` property in test helpers The implementation is clean and follows existing patterns. Tests have been updated with the new required property. <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with no blocking issues - The implementation is straightforward and well-tested. It adds a new toggle feature that operates independently, maintains backward compatibility (default ON preserves current behavior), and follows existing code patterns. The test coverage has been properly updated, and the changes are isolated to UI rendering logic with no impact on business logic or data handling. - No files require special attention _{Last reviewed commit: 421b27b} <!-- greptile_other_comments_section --> <!-- /greptile_comment -->