#15965: feat(ui): show inline token input on Chat page when auth fails
app: web-ui
stale
size: S
Cluster:
UI Enhancements and Security Fixes
## Problem
When opening the dashboard for the first time, users land on the Chat page and see a cryptic error:
> disconnected (1008): unauthorized: gateway token mismatch
There's no obvious way to fix it — the token input is only on the Overview page, which new users don't know to navigate to.
## Solution
Added an inline auth prompt directly on the Chat page when the connection fails due to an auth error. It shows:
- A clear "Gateway token required" message
- A token text input (with Enter-to-submit)
- A Connect button
- A link to the Overview page for full settings and docs
## Changes
- **`ui/src/ui/views/chat.ts`**: Added auth error detection and inline token form rendering
- **`ui/src/ui/app-render.ts`**: Passes `lastError`, `settings`, `onSettingsChange`, and `onConnect` to the chat view
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR adds an inline token input form on the Chat page that appears when users encounter gateway authentication errors. Previously, users would see a cryptic "disconnected (1008): unauthorized: gateway token mismatch" error with no obvious way to resolve it, as the token input was only available on the Overview page.
The implementation:
- Detects auth errors via the `isAuthError()` helper which checks for keywords like "unauthorized", "token mismatch", or "connect failed" in `lastError`
- Renders an inline card with a token input field, Enter-to-submit support, and a Connect button
- Only displays when disconnected and an auth error is present
- Passes the necessary state (`lastError`, `settings`) and handlers (`onSettingsChange`, `onConnect`) from `app-render.ts` to the chat view
- Provides helpful links to the Overview page and documentation
The changes improve first-time user experience by making token authentication immediately accessible from the landing page.
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk
- The implementation is straightforward and well-contained, only adding UI elements without modifying core authentication logic. The error detection uses simple string matching, the conditional rendering has proper guards to prevent display when not needed, and all new props are properly typed and optional. The change improves UX without introducing breaking changes or security concerns.
- No files require special attention
<sub>Last reviewed commit: 7a161e0</sub>
<!-- greptile_other_comments_section -->
<sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub>
<!-- /greptile_comment -->
Most Similar PRs
#17765: fix: add link to settings when chat shows auth error
by MisterGuy420 · 2026-02-16
84.7%
#18273: fix: extract token from URL query string for Control UI websocket auth
by MisterGuy420 · 2026-02-16
76.7%
#12417: feat(ui): Add Native Token Optimization Dashboard
by oneles · 2026-02-09
74.9%
#6352: fix(ux): update gateway token error message UI location
by Glucksberg · 2026-02-01
74.6%
#11527: feat(control-ui): UX improvements — Enter key, thinking icon, auto-...
by Annaxiebot · 2026-02-07
73.6%
#9440: fix(security): warn users when gateway token appears in URLs
by zenchantlive · 2026-02-05
72.8%
#10093: fix: import gateway token from URL param into localStorage
by devjiro76 · 2026-02-06
72.8%
#10800: fix(ui): apply token from URL param to settings
by callebtc · 2026-02-07
72.5%
#9218: Fix Control UI chat resync on gaps and terminal events
by figitaki · 2026-02-05
72.5%
#13548: feat(control-ui): Add quote reply and send message to session features
by Annaxiebot · 2026-02-10
72.3%