feat(frontend): header chrome with live connection status#82
Merged
ImpulseB23 merged 2 commits intomainfrom Apr 19, 2026
Merged
feat(frontend): header chrome with live connection status#82ImpulseB23 merged 2 commits intomainfrom
ImpulseB23 merged 2 commits intomainfrom
Conversation
Adds a top header bar showing the authenticated Twitch login alongside a live connection indicator driven by the supervisor's sidecar_status events (spawning, waiting_for_auth, backoff, running, unhealthy, terminated). The status→label/color mapping lives in a pure module (lib/sidecarStatus) so it can be unit-tested without pulling in Solid or Tauri bindings.
github-actions
bot
added
typescript
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Pull request overview
Adds a lightweight header “chrome” above the chat feed in the SolidJS frontend, showing Twitch identity plus a live sidecar connection indicator driven by existing sidecar_status events.
Changes:
- Added a pure
indicatorFor(state)mapping inlib/sidecarStatusto convert supervisor states into UI label/color (unit-testable without Solid/Tauri). - Added
Headercomponent that listens tosidecar_statusand renders a connection chip. - Updated
Appauth state handling to pass authenticated login through to the header and keep the SignIn flow working.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| apps/desktop/src/lib/sidecarStatus.ts | Introduces sidecar state → indicator label/color mapping and related types. |
| apps/desktop/src/lib/sidecarStatus.test.ts | Adds Vitest coverage for the indicator mapping behavior. |
| apps/desktop/src/components/Header.tsx | New presentational header component; listens to sidecar_status and renders connection chip. |
| apps/desktop/src/App.tsx | Integrates the header into the logged-in view and threads login through auth state. |
- discriminated AuthStatus so logged_in always carries login - Header.tsx no longer awaits inside onMount; tracks a disposed flag so a fast unmount doesn't leak the listener - listen() rejection is caught and logged instead of unhandled - sidecarStatus tests now assert color for every state
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a top header bar above the chat feed with:
Design
lib/sidecarStatusso it unit-tests without touching Solid/Tauri runtime.Tests
lib/sidecarStatus.test.tscovers each state transition and the pre-eventnullfallback.pnpm typecheck,pnpm lint,pnpm testall green locally.Roadmap
First slice of Phase 1 'UI chrome' from
docs/roadmap.md. Timestamps, badge chips, username color will land in follow-up PRs.