← Back to PRs

#15965: feat(ui): show inline token input on Chat page when auth fails

by alextnetto open 2026-02-14 03:46 View on GitHub →
app: web-ui stale size: S
## 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