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>

apps/desktop/e2e/pages/app.page.ts

@@ -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. */

apps/desktop/e2e/smoke.spec.ts

@@ -1,33 +1,50 @@
 import { expect, test } from './fixtures.js'
 
-test('boots and renders the primitives gallery', async ({ app, window }) => {
-  await expect(window.getByRole('heading', { name: 'Primitives' })).toBeVisible()
-  await expect(window.getByRole('button', { name: 'Brew plan' })).toBeVisible()
-  await app.screenshot('primitives-light')
+test('boots into the shell: rail, main, and Reginald panel', async ({ app, window }) => {
+  await app.expectLoaded()
+  await expect(window.getByText('Reginald', { exact: true })).toBeVisible()
+  // default view is Morning service
+  await expect(window.getByRole('heading', { name: 'Morning service' })).toBeVisible()
+  await app.screenshot('shell-light')
 })
 
-test('primitives cover core, forms, and feedback', async ({ window }) => {
-  // section headings prove each cluster ported and rendered
-  for (const section of ['Button', 'Badge', 'Tag', 'Card', 'Input & Select', 'Feedback']) {
-    await expect(window.getByRole('heading', { name: section, exact: true })).toBeVisible()
-  }
-  // a mono label chip renders verbatim
-  await expect(window.getByText('deadline/hard')).toBeVisible()
+test('rail navigation switches the main view', async ({ app, window }) => {
+  await app.nav('The pot').click()
+  await expect(window.getByRole('heading', { name: 'The pot' })).toBeVisible()
+
+  await app.nav('States').click()
+  await expect(window.getByRole('heading', { name: 'States' })).toBeVisible()
+  await expect(window.getByText('The pot is empty')).toBeVisible()
+  await app.screenshot('shell-states')
 })
 
-test('dark theme toggle flips the document theme', async ({ app, window }) => {
-  await window.getByRole('button', { name: 'Switch to dark' }).click()
+test('Evening service toggle flips the document theme', async ({ app, window }) => {
+  // the switch's real input is visually hidden — click the label text to toggle
+  await window.getByText('Evening service', { exact: true }).click()
   await expect(window.locator('html')).toHaveAttribute('data-theme', 'dark')
-  await app.screenshot('primitives-dark')
+  await expect(window.getByRole('switch', { name: 'Evening service' })).toBeChecked()
+  await app.screenshot('shell-dark')
 })
 
-test('dialog opens on demand and closes on Escape', async ({ window }) => {
-  await window.getByRole('button', { name: 'Open dialog' }).click()
-  const dialog = window.getByRole('dialog')
-  await expect(dialog).toBeVisible()
-  await expect(dialog.getByText('Withdraw directive?')).toBeVisible()
-  await window.keyboard.press('Escape')
-  await expect(dialog).toBeHidden()
+test('offline sim shows the banner and disables the composer', async ({ window }) => {
+  await window.getByRole('button', { name: /Connection/ }).click()
+  await expect(window.getByText(/Gitea isn.t answering/)).toBeVisible()
+  await expect(window.getByRole('textbox')).toBeDisabled()
+})
+
+test('chat composer echoes a canned reply (fixture)', async ({ window }) => {
+  await window.getByRole('textbox').fill('Push pilots first')
+  await window.keyboard.press('Enter')
+  await expect(window.getByText('Push pilots first')).toBeVisible()
+  await expect(window.getByText(/Noted and logged as a directive/)).toBeVisible()
+})
+
+test('issue drill-in and back-stack of one', async ({ window }) => {
+  await window.getByRole('button', { name: 'Preview an issue page' }).click()
+  await expect(window.getByRole('heading', { name: 'Issue' })).toBeVisible()
+  await window.getByRole('button', { name: 'Back' }).click()
+  // returns to the view we drilled in from
+  await expect(window.getByRole('heading', { name: 'Morning service' })).toBeVisible()
 })
 
 test('exposes the commitea preload API', async ({ app }) => {