ktg-plugin-marketplace/plugins/ms-ai-architect/tests/screenshot
Kjell Tore Guttormsen 041e3cc6b3 feat(ms-ai-architect): playground v1.14.0 — root-cause refaktor mot 10+ visuelle bugs
DS-konvensjon-adopsjon på 14 renderere over 6 sesjoner. Etter v1.13.0/.1
patchet 10+ symptomatiske visuelle bugs (191 linjer lokal CSS, 21
fix-kommentarer), grep v1.14.0 root-cause via DS v0.4.0 + per-renderer
refaktor.

Sesjon 2 — DS v0.4.0:
- B-DS-1: kanban-card word-break (break-all → break-word)
- B-DS-2: expansion title-main/sub display:block (var inline)
- B-DS-3: matrix-bubble cursor + hover/focus

Sesjon 3 — risk-renderere til DS-summary-grid + ros-layout
(renderDpia, renderSecurity, renderRos)

Sesjon 4 — 6 compliance/govern-renderere bytter .report-meta-wrapper
mot DS-konvensjon (renderAiActPyramid, renderRequirements,
renderConformity, renderTransparency, renderFria, renderReview)

Sesjon 5 — phase-renderere til expansion-list per fase
(renderMigrate, renderPoc — slett .phase-detail-CSS)

Sesjon 5b — lavt-scope renderer-fixes:
- renderCost: ekstraher .monthly fra p50/p90-objekter
  (key-stats viste \"[object Object]\")
- renderCompare: distinctive-token-matching erstatter firstWord-heuristikk
- renderUtredning: droppet misvisende role=\"tab\"

Sesjon 6 — ship: kommentar-kompaksjon (145 → 122 linjer), 24 screenshots
regenerert til v1.14.0/, dokumentasjon (3 nivåer), versjonsbump,
mellomfiler slettet.

Lokal style-blokk: 191 → 122 effektive linjer (~36% reduksjon)
DS bumpet til v0.4.0 (delt mellom plugins, andre re-syncer på eget tempo)
17 renderere PASS visuell QA mot demo-data i begge themes
219 plugin-validering, 272 E2E playground, 7 migrations PASS

Refs V1.14.0-PLAN + V1.14.0-AUDIT (slettet ved ship per plan).
2026-05-08 21:20:08 +02:00
..
.gitignore feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery 2026-05-04 09:24:02 +02:00
package.json feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery 2026-05-04 09:24:02 +02:00
README.md feat(ms-ai-architect): release v1.10.1 — demo system + screenshot gallery 2026-05-04 09:24:02 +02:00
run.mjs feat(ms-ai-architect): playground v1.14.0 — root-cause refaktor mot 10+ visuelle bugs 2026-05-08 21:20:08 +02:00

Playground screenshot tooling

Standalone Playwright runner that captures playground screenshots for documentation.

Usage

cd tests/screenshot
npm install
npx playwright install chromium   # one-time, ~150 MB
node run.mjs

Output goes to ../../playground/screenshots/v1.10.0/.

What it captures

For each theme (dark, light):

# Surface Screen / tab
01 Onboarding Empty state
02 Project Rapporter / Regulatory (default)
03 Project Rapporter / each of 4 other tabs
04-06 Project Oversikt / Kontekst / Eksport
07 Home Project list with demo-prosjekt
08 Catalog All 5 expansion-grupper
09 Onboarding Prefilled from demo-state

= ~18 PNGs, captured with deviceScaleFactor: 2 (retina-crisp), fullPage: true.

How the demo state works

The screenshot script clicks [data-action="load-demo"] which reads the inline <script type="application/json" id="demo-state-v1"> block from the playground HTML. That block is generated by scripts/build-demo-state.mjs and includes one demo project ("Demo: Innbygger-chatbot for byggesak") with all 17 fixture markdowns pre-loaded as raw_markdown. After load, the project surface re-runs handlePasteImport for each report so the visualizations render automatically.

Regenerating demo state

If playground/test-fixtures/*.md changes:

node scripts/build-demo-state.mjs

This rewrites the <script id="demo-state-v1"> block in the playground HTML.

Commit policy

  • Commit playground/screenshots/v1.10.0/*.png so forkers see what the plugin looks like without running anything.
  • Don't commit node_modules/ (gitignored).