Skip to content

feat: view flow screenshots and plan (issue #226)#304

Open
Kosinkadink wants to merge 3 commits into
mainfrom
feat/view-flow-screenshots
Open

feat: view flow screenshots and plan (issue #226)#304
Kosinkadink wants to merge 3 commits into
mainfrom
feat/view-flow-screenshots

Conversation

@Kosinkadink

Copy link
Copy Markdown
Member

Phase 1 of View/Modal Flow Documentation (#226)

Adds automated screenshot capture for all major views and modals in the launcher UI, plus a plan document for the full 4-phase effort.

What's included

Playwright e2e test (e2e/view-flow-screenshots.spec.ts):

  • Launches the real Electron app in an isolated temp environment
  • Captures 10 screenshots covering all 6 tab views and 4 modals:
    • Dashboard, Installation List, Running, Models, Media, Settings
    • New Install, Track Existing, Load Snapshot, Quick Install
  • Screenshots saved to docs/screenshots/

Plan document (docs/view-flow-plan.md):

  • Phase 1: Automated screenshot capture (this PR)
  • Phase 2: Flow graph generator script (parse emits to Mermaid diagram)
  • Phase 3: Figma integration (plugin to import screenshots + edges)
  • Phase 4: CI integration (auto-regenerate on view changes)

Notes

  • Currently captures empty/welcome states since the app launches with no installation data
  • Populated states (DetailModal, ConsoleModal, ProgressModal) will be added once mock installation data seeding is implemented
  • All pre-commit checks pass: typecheck, lint, build, 437 unit tests

Kosinkadink and others added 3 commits March 24, 2026 23:39
Phase 1 of the view-flow documentation effort:
- Add Playwright e2e test that captures screenshots of all 6 tab views
  and 4 modals (Dashboard, Installs, Running, Models, Media, Settings,
  New Install, Track Existing, Load Snapshot, Quick Install)
- Add docs/view-flow-plan.md with the full 4-phase plan
- Screenshots saved to docs/screenshots/ for use by the flow-graph
  generator (Phase 2) and Figma plugin (Phase 3)

Amp-Thread-ID: https://ampcode.com/threads/T-019d2342-103c-71fa-a493-9e945e234649
Co-authored-by: Amp <amp@ampcode.com>
- Replace all waitForTimeout calls with proper Playwright waiters
- Fail on missing modal buttons instead of silently skipping
- Split monolithic test into individual test() blocks
- Remove committed PNGs and gitignore docs/screenshots/
- Clarify Phase 1 screenshot count in plan doc
- Use fileURLToPath instead of __dirname for ESM compat

Amp-Thread-ID: https://ampcode.com/threads/T-019d23e9-30cf-755f-8ed3-a7038aafe01e
Co-authored-by: Amp <amp@ampcode.com>
Add scripts/generate-view-flow.mjs that parses App.vue to extract the
view→modal navigation graph and outputs a Mermaid diagram to
docs/view-flow.md.

- Extracts @event bindings from App.vue template
- Resolves handlers to target views/modals
- Parses emit() calls in child views for cross-references
- Generates Mermaid flowchart with 14 nodes and 30 edges
- Adds pnpm run generate:view-flow convenience script

Amp-Thread-ID: https://ampcode.com/threads/T-019d23e9-30cf-755f-8ed3-a7038aafe01e
Co-authored-by: Amp <amp@ampcode.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant