feat(desktop): app shell — rail, chat panel, routing, states (#15)

Reimplements the handoff Shell in React/TS: 208px left rail (nav +
connection dot + Evening service theme switch), max-1120 main column,
330px Reginald chat panel. Routing across top-level views with an
issue drill-in + back-stack of one; data-theme owned by the shell.

- ChatPanel: fixture write-path — echoes a canned reply so layout +
  interactions are real; model router wiring lands in P4.
- states.tsx: EmptyState / OfflineBanner / ModelAwayState + the States
  specimen gallery, ported from the handoff.
- PlaceholderScreen stands in for not-yet-built views (P3-3+), keeping
  navigation live; it also exposes the issue drill-in for now.
- Gallery loses its own theme toggle (shell owns data-theme); reachable
  via a Primitives rail entry as a living reference.

Fixtures mirrored from the handoff's data.js. typecheck + 7 e2e green
(nav, theme, offline banner + disabled composer, chat echo, drill-in
back-stack); light/dark/states screenshots verified.

Closes P3-2.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Croissant Le Doux
2026-07-08 12:32:05 -04:00
parent 635025113c
commit f18c6d1078
10 changed files with 802 additions and 45 deletions

View File

@@ -15,13 +15,19 @@ const SCREENS_DIR = join(here, '..', '.artifacts', 'screens')
export class AppPage {
constructor(readonly page: Page) {}
get heading(): Locator {
return this.page.getByRole('heading', { name: 'CommiTea' })
/** The rail wordmark — present on every in-app view. */
get wordmark(): Locator {
return this.page.getByText('CommiTea', { exact: true })
}
/** Navigate via a left-rail entry by its label. */
nav(label: string): Locator {
return this.page.getByRole('button', { name: label, exact: true })
}
/** Assert the shell has rendered. */
async expectLoaded(): Promise<void> {
await expect(this.heading).toBeVisible()
await expect(this.wordmark).toBeVisible()
}
/** Read the `commitea` preload API surface from the renderer. */