#18668: feat(ui/chat): chat UX overhaul
app: web-ui
size: L
Cluster:
Web UI Enhancements and Fixes
This PR overhauls the chat UX with improved compose experience and better message handling.
**Changes:**
- Enhanced textarea handling with proper ref management instead of querySelector
- Improved autosuggest for slash commands and @ mentions
- Better message grouping and rendering
- Queue expansion state management
- Streamlined chat compose experience
**Review Feedback Addressed:**
- ✅ Fixed potential null querySelector by using stored textarea ref instead of document.querySelector
- ✅ Moved module-level state (showSlashMenu, showAtMenu, menuFilter, queueExpanded) to component props with event handlers
- ✅ Removed redundant 'as string' cast in grouped-render.ts (typeof check already confirms string type)
- ✅ Cursor position already captured at click time in suggestion handlers (no change needed)
- ✅ Fixed linting issues (removed 'any' types, unused variables)
- ✅ Rebased onto latest upstream/main
**Testing:**
- Build check passed ✓
- No personal paths in diff ✓
- All linting checks passed ✓
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
This PR overhauls the chat UX with new slash command autosuggest, `@` mention support, session tabs, collapsible queue drawer, system-event dividers, and compact tool-result cards. Channel cards (Discord, Slack, Signal, Telegram, WhatsApp) are refactored to use a shared `statusChip` helper and consistent header/body layout.
- **Critical: `renderAutosuggestMenu` references undeclared variables** — `showSlashMenu`, `showAtMenu`, and `menuFilter` are only declared inside `renderChat` but used in the separate `renderAutosuggestMenu` function, causing a `ReferenceError` at runtime.
- **Critical: `textareaEl` is never declared** — passed to `renderAutosuggestMenu` at line 697 but no such variable exists in `renderChat` scope, causing another `ReferenceError`.
- **TypeScript error in `getSessionDisplayName`** — parameter typed as `unknown` while directly accessing `.label`, `.displayName`, and `.key` properties.
- Channel card refactoring and tool-cards simplification look clean with no logic issues.
<h3>Confidence Score: 1/5</h3>
- This PR will crash at runtime due to two undeclared variable references in the chat compose area.
- Two separate ReferenceError bugs will prevent the chat compose section from rendering: (1) renderAutosuggestMenu uses showSlashMenu/showAtMenu/menuFilter which are out of scope, and (2) textareaEl is never declared. These are not edge cases — they will fire every time the chat view renders. Additionally, getSessionDisplayName has a TypeScript type error accessing properties on unknown.
- Pay close attention to ui/src/ui/views/chat.ts — it contains all three identified issues.
<sub>Last reviewed commit: e50eb70</sub>
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#13381: UI: add Slack-style emoji shortcode autocomplete to chat (Emre #1 PR)
by emre6943 · 2026-02-10
79.4%
#13548: feat(control-ui): Add quote reply and send message to session features
by Annaxiebot · 2026-02-10
79.1%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
78.4%
#20473: feat(ui): add auto-send with configurable triggers
by pborgen · 2026-02-19
77.5%
#20405: feat(ui): KaTeX math rendering, collapsible tool cards, image attac...
by ayaanngandhi · 2026-02-18
77.1%
#17448: ui: make tool cards collapsible with inline expansion
by karimStekelenburg · 2026-02-15
77.0%
#3721: fix(ui): webchat not displaying chat responses
by maxmaxrouge-rgb · 2026-01-29
76.4%
#19343: Refactor chat state management: reset chat messages and queue on se...
by saurav470 · 2026-02-17
75.9%
#7528: feat: Adds slash command suggestions to chat
by JohnnyD1776 · 2026-02-02
75.2%
#6690: UX: clearer /queue and /subagents output
by kamb5686 · 2026-02-01
75.0%