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>
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { dirname, join } from 'node:path'
|
|
import { fileURLToPath } from 'node:url'
|
|
|
|
import { expect, type Locator, type Page } from '@playwright/test'
|
|
|
|
const here = dirname(fileURLToPath(import.meta.url))
|
|
/** Where `screenshot()` drops PNGs — gitignored, readable for visual review. */
|
|
const SCREENS_DIR = join(here, '..', '.artifacts', 'screens')
|
|
|
|
/**
|
|
* Page Object over the CommiTea app shell. As real screens land (P3), add
|
|
* per-screen page objects and accessor methods here; keep locators
|
|
* user-facing (getByRole/getByText), never CSS/DOM structure.
|
|
*/
|
|
export class AppPage {
|
|
constructor(readonly page: Page) {}
|
|
|
|
/** 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.wordmark).toBeVisible()
|
|
}
|
|
|
|
/** Read the `commitea` preload API surface from the renderer. */
|
|
async preloadApi(): Promise<Record<string, unknown> | undefined> {
|
|
return this.page.evaluate(
|
|
() => (globalThis as unknown as { commitea?: Record<string, unknown> }).commitea,
|
|
)
|
|
}
|
|
|
|
/** Capture a full-page screenshot for visual review; returns the path. */
|
|
async screenshot(name: string): Promise<string> {
|
|
const path = join(SCREENS_DIR, `${name}.png`)
|
|
await this.page.screenshot({ path, fullPage: true })
|
|
return path
|
|
}
|
|
}
|