Skip to content
Persyk

Session-window Storybook

For private PR deployments, changed-only screenshot reports and selected videos, see Private UI previews.

Terminal window
pnpm install
pnpm storybook           # http://localhost:6006
pnpm build-storybook     # static site in storybook-static/
pnpm exec playwright install chromium
pnpm test:storybook      # owns its server; leave port 6006 free

Use Node 22.13+ or a current supported release. Storybook uses the official SvelteKit integration and Svelte CSF; the browser preview never loads application layouts, provider clients, persisted settings, or native services.

Stories and interactions

src/stories/SessionPanel.stories.svelte renders the real SessionPanel through an instance-local SessionPanelPreview. Shared component stories cover TranscriptSegments, AudioActivity, and Button. Session scenarios cover empty history/listening, streaming, paused capture, finishing/incomplete outcomes, removal pending/failure/retry, saved/reopened history, long content and constrained window presentation. They do not redesign or simulate native window ownership.

Choose Windows → SessionPanel → Simulation. Playback starts stopped. Play advances one event per second; Pause simulation stops playback, not recording. Step stops playback and advances one event. Reset restores the initial snapshot. The sequence includes recording pause/resume and finishing. Controls sit outside [data-testid="session-window"], the screenshot target.

Removal interaction stories use real panel callbacks and an explicitly settled, instance-local promise. Reject deletion produces a retryable error; Resolve deletion completes removal. Story play functions and browser tests exercise pending mutation guards, failure and successful retry. Reload/remount starts a fresh instance; no timers or promises are shared between previews.

The browser suite discovers all story entries from /index.json, rejects an empty index, and requires the registered capture flows to exist. Both the capture CLI and browser tests execute scripts/visual-preview/capture-flows.mjs; add scripted interactions there rather than duplicating selectors. To test a static build: STORYBOOK_URL=http://localhost:8080 pnpm test:storybook.

Appearance and standalone captures

The toolbar’s light/dark selector changes the iframe’s actual color-scheme and prefers-color-scheme media query, not just its background. Disable DevTools forced-appearance overrides when inspecting it.

Chrome-free URLs:

  • http://localhost:6006/preview.html?id=windows-sessionpanel--empty-listening&appearance=light
  • http://localhost:6006/preview.html?id=windows-sessionpanel--several-completed-segments&appearance=dark
  • http://localhost:6006/preview.html?id=windows-sessionpanel--simulation&appearance=light

Use colorScheme: null in Playwright when testing iframe appearance propagation, reducedMotion: 'reduce', and capture page.frameLocator('iframe').getByTestId('session-window') with animations disabled. Example PNGs go into the browser suite’s test-results/ directory. Shared AudioActivity stories cover motion and reduced-motion behavior.

Browser previews do not qualify macOS vibrancy, WKWebView fidelity, focus, Spaces/monitor placement, microphone permission or capture. Those remain explicit native acceptance requirements, independently of story or build success.