Ports the nine remaining design-handoff screens to typed TSX and wires them into the shell, retiring the placeholders for every primary view. - The pot (#17 / P3-4): BoardScreen 5-column kanban with live search + empty state, Tabs into GanttView (state bars, critical inset rules, dotted 80% tails, today rule) and DepsGraph (layered DAG, bezier edges, spruce critical path, milestone terminal). - Runway (#18 / P3-5): RunwayScreen (range bars via RunwayBar, capacity, calibration teaser), CalibrationScreen (scatter + honest diagonal + ×1.18 fit, per-label/per-person bias), MilestoneScreen (stats strip, cone, grouped issues). - Issue + Inbox (#19 / P3-6): IssueScreen (human intent left, machine- derived lifecycle/forecast/deps right, "writes as you" composer), InboxScreen (day-grouped, filter tabs, unread dots, mark-all-read). - Capture (#20 / P3-7): CaptureScreen dump→interview→review→filed state machine with running clock. Shell: openIssue now carries an IssueRef; adds readIds (inbox) + issue state; routes board/runway/calibration/milestone/issue/inbox/capture and the runway→calibration/milestone + issue back-stack. Focus/Standup pass IssueRefs. Select/Input gain defaultValue (Capture's editable tray). Fixtures mirrored from data.js. typecheck + 11 e2e green; all nine screens screenshot-verified in light. Closes P3-4, P3-5, P3-6, P3-7. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
51 lines
1.9 KiB
TypeScript
51 lines
1.9 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. Scoped to the Primary rail so
|
|
* it never collides with in-screen breadcrumb buttons of the same name, and
|
|
* matches by prefix so count badges (e.g. "Inbox 3") still resolve. */
|
|
nav(label: string): Locator {
|
|
return this.page.getByRole('navigation', { name: 'Primary' }).getByRole('button', { name: label })
|
|
}
|
|
|
|
/** 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.
|
|
* `animations: 'disabled'` fast-forwards finite CSS animations to their end
|
|
* state, so fade-in screens (e.g. Standup) capture settled, not mid-fade. */
|
|
async screenshot(name: string): Promise<string> {
|
|
const path = join(SCREENS_DIR, `${name}.png`)
|
|
await this.page.screenshot({ path, fullPage: true, animations: 'disabled' })
|
|
return path
|
|
}
|
|
}
|