← Back to PRs

#19473: feat(ui): add ★ Main badge to session selector and sessions list

by EricGrill open 2026-02-17 21:03 View on GitHub →
app: web-ui size: XS
## Problem In the webchat UI, there's no visual indicator to distinguish the **main session** from sub-agent sessions, cron jobs, or channel sessions in the session dropdown (upper-right selector). Users have to run `/status` to confirm which session they're in. ## Solution Adds a **★** (star) badge to identify the main session in two places: 1. **Chat session dropdown** — the main session option is prefixed with `★` so it's instantly recognizable 2. **Sessions admin panel** — a `★` badge appears before the session key in the list Also exports an `isMainSession()` utility function for consistent detection across UI components, with full test coverage (6 new tests). ## Changes - `ui/src/ui/app-render.helpers.ts` — added `isMain` flag to session options + `isMainSession()` export + ★ prefix in dropdown rendering - `ui/src/ui/views/sessions.ts` — added ★ badge in the sessions list key column - `ui/src/ui/app-render.helpers.node.test.ts` — 6 new tests for `isMainSession()` ## Screenshots **Before:** All sessions look identical in the dropdown **After:** Main session shows `★ Main Session` — immediately identifiable --- _Feature suggested by a user who couldn't tell which session was the main one from the dropdown._ <!-- greptile_comment --> <h3>Greptile Summary</h3> This PR adds a ★ (star) badge to identify the main session in the chat session dropdown and the sessions admin panel, along with an exported `isMainSession()` utility and 6 new tests. The feature addresses a genuine UX gap where users couldn't distinguish the main session from other session types. Key observations from the review: - **Dropdown badge**: The dropdown implementation is correct — the `mainSessionKey` path in `resolveSessionOptions()` unconditionally sets `isMain: true` (line 361) regardless of the actual key value, so the star will always appear on the right entry in the dropdown. - **Sessions admin panel badge**: The `sessions.ts` view calls `isMainSession(row.key)` directly (line 248) with no knowledge of the resolved `mainSessionKey`. Since `isMainSession()` only checks for the two hardcoded values `"main"` and `"agent:main:main"`, the ★ badge will be absent in the admin panel for users with a custom `session.mainKey`, a non-default agent ID, or `session.scope: "global"` (key `"global"`). - **Missing CSS class**: The `session-main-badge` class used in `sessions.ts` is not defined in `ui/src/styles/components.css`, where all other session-specific styles (`.session-key-cell`, `.session-link`, `.session-key-display-name`) live. The badge renders as unstyled plain text. <h3>Confidence Score: 3/5</h3> - Safe to merge with minor issues; the dropdown works correctly but the sessions admin badge and styling are incomplete for non-default configurations. - The core feature works correctly for the standard case (default agent/key). Two issues prevent a higher score: (1) `isMainSession()` doesn't cover non-default main session key formats used in the sessions admin panel, causing the badge to silently not appear in some valid configurations; (2) the `session-main-badge` CSS class is missing from the stylesheet, leaving the star unstyled. Neither issue causes a runtime error or regression, but both represent incomplete implementation of the stated feature goal. - ui/src/ui/views/sessions.ts and ui/src/ui/app-render.helpers.ts (isMainSession logic), plus the missing CSS entry in ui/src/styles/components.css <sub>Last reviewed commit: b546439</sub> <!-- greptile_other_comments_section --> <sub>(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!</sub> <!-- /greptile_comment -->

Most Similar PRs