Kjell Tore Guttormsen
2ed24add12
tests/screenshot/run.mjs now clears PNGs a previous run left in its output directory and writes playground/screenshots/MANIFEST.json (output directory, sha256 per PNG, sha256 of the demo state rendered). One run produced the 24 PNGs in playground/screenshots/v1.15.0/ (12 surfaces x 2 themes, including the dark onboarding view removed in 1.18.1).
Removed the v1.10.0, v1.11.0, v1.14.0 and v2-mockup sets (77 PNGs) and tests/screenshot/shoot-mockup.local.mjs. Chose regenerate for the set the runner writes and delete for the rest, because the current runner cannot reproduce the older layouts, and the mockup script reads an HTML file that is not in the repository, so its output could never be regenerated from a clone.
README gallery, docs/playground.md and tests/screenshot/README.md now point at v1.15.0 and describe the 12 surfaces the runner captures. The manifest gate goes green: 4/4.
OCR (Apple Vision, local): 0 of 24 PNGs in the tree carry text from the older demo; known positives from 715950b were found (2 of 2).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
12 KiB
Markdown
68 lines
12 KiB
Markdown
# ms-ai-architect — Playground (v3 / v1.16.1)
|
||
|
||
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Imported from `CLAUDE.md` via pointer.
|
||
|
||
Erstatter v2 5-stegs-pipelinen med en multi-surface-app som persisterer state og visualiserer importerte rapporter inline. Spec: v3-arkitektur dokumentert under `.claude/projects/2026-05-03-playground-v3-architecture/`. v1.10.0-utvidelser dokumentert under `.claude/projects/2026-05-03-ms-ai-architect-v1-10-playground/`. v1.11.0 leverer design-system 100%-adoption. v1.13.0/.1 patchet 10+ symptomatiske visuelle bugs. v1.14.0 leverer root-cause refaktor over 6 sesjoner (DS-konvensjon-adopsjon på 14 renderere, lokal CSS halvert).
|
||
|
||
**v1.15.0 (sesjon 5 av ~8 i v2-prosjektet):** Project-surface byttet fra v2 `renderProjectSurface` (screen-tabs + category-tabs + per-command paste-cards) til v3 `renderProjectView` (sidebar med 17 artifacts + main-area + import-modal overlay). `renderActive()` ruter `project`-surface til `renderProjectSurfaceV3()` som wrapper renderProjectView + topbar + app-shell. V2-surface helt fjernet: `renderProjectSurface` (152 linjer), `renderCommandSubCard` (87 linjer), `rehydratePasteImports` (15 linjer), `currentProjectScreen`, `ACTIONS['project-screen']`, 5 v2-CSS-klasser. Zombie-handlers beholdt for test-back-compat: `currentProjectTab`, `ACTIONS['project-tab']`, `ACTIONS['parse']`, `handlePasteImport`, `window.__handlePasteImport`. 2 fingerprint-gap lukket: requirements.headers + license.headers. `migrateDataVersion` utvidet med `parserFor` → demo-state (kun `raw_markdown`) auto-parses til `project.artifacts[cid]`. Ship-QA-bugfixes: `components-tier4-project-view.css` lagt til i `<link>`-kjeden (manglet → modal-overlay og two-column layout virket ikke); `renderImportModal` setter `data-open="true"` (DS-kontrakt).
|
||
|
||
- **Fil:** `playground/ms-ai-architect-playground.html` (~3870+ linjer, single-file v3-arkitektur)
|
||
- **4 surfaces:** Onboarding (18 felles felt — 4 strukturerte / 14 fritekst etter v1.10.0) → Home (prosjekt-liste + 3 entry-tracks) → Catalog (29 commands gruppert i 5 expansion-grupper med søk) → **Project v3** (sidebar med 17 artifacts gruppert i 4 kategorier + søk + main-area med per-artifact view eller overview med top-risks/next-actions + import-modal som DS-overlay)
|
||
- **Persistens:** IndexedDB-primær med localStorage-fallback. Schema-versjonert (`STATE_KEY = 'ms-ai-architect-state-v1'`) med eager `MIGRATIONS`-pipeline. v1.10.0 introduserer `dataVersion v1→v2`-migrasjon (idempotent) som backfill-er `verdict`+`keyStats`.
|
||
- **17 rapport-renderers (felles grunnskjelett):** Alle wrapper output via `renderPageShell()` med eyebrow + h1 + valgfri verdict-pill + valgfri key-stats-grid + arketype-spesifikk body. Parser → struktur → HTML rutet via kanonisk archetype-routing-tabell.
|
||
- **Foundation-helpers:** `renderPageShell`, `renderVerdictPill`, `renderKeyStatsGrid`, `inferVerdict`, `inferKeyStats`, `KEY_STATS_CONFIG`.
|
||
- **Tier 3-adopsjon:** kanban (conformity, review), mat-ladder (migrate, poc), screen-tabs (utredning, project surface), scenario-card-grid (license, compare), residual-pair (dpia, ros), top-risks (ros), recommendation-card (security, ros), suppressed-panel (review), critique-card (adr), read-more (utredning, summary), traffic-light (poc).
|
||
- **Theme:** Mørk default + lys theme-toggle med Aksel-tokens i begge moduser (lagt til i v1.10.0). Persistert i `localStorage('ms-ai-architect-theme')`. Theme-bootstrap-script i `<head>` unngår FOUC.
|
||
- **Eksport/import:** JSON Decision Record-envelope (Blob + FileReader), schema-versjon-bevisst på import.
|
||
|
||
## Validering (v1.16.0-tall, uendret i v1.16.1 — playground-koden uendret siden v1.15.0)
|
||
|
||
| Test | Kommando | Dekning |
|
||
|------|----------|---------|
|
||
| Statisk struktur | `bash tests/test-playground-v3.sh` | 223 PASS, 2 WARN (pre-eks.) — vendored CSS, surfaces, 29 commands, 14 parsere, 17 renderers via PROJECT_VIEW_CONFIG.renderers-routing, action-handlers |
|
||
| Parser-fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser-routing |
|
||
| Migrasjon | `bash tests/test-playground-migrations.sh` | 16 PASS — v1→v2 + v2→v3 idempotent migrasjon |
|
||
| Fingerprints | `bash tests/test-playground-fingerprints.sh` | 32 PASS — 17-fixture true-positive + 4 anti-match + API-sanity |
|
||
| Project-view | `bash tests/test-playground-projectview.sh` | 30 PASS — 4 view-states + nav-søk + null-guard |
|
||
| ACTIONS | `bash tests/test-playground-actions.sh` | 19 PASS — 6 pure-state-handlers + projectViewUiState |
|
||
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | 390 PASS, 0 FAIL, 2 WARN |
|
||
| Plugin-validering | `bash tests/validate-plugin.sh` | 239 PASS |
|
||
| Manuell A11Y QA | Se `playground/MANUAL-CHECKLIST.md` | 10 seksjoner inkl. axe-core-kjøring per surface |
|
||
| A11Y-rapport | `playground/A11Y-RAPPORT.md` | Statisk vurdering klar — browser-axe-kjøring pending |
|
||
|
||
## Demo system (v1.11.0 → v1.15.0)
|
||
|
||
`scripts/build-demo-state.mjs` leser alle 17 fixture-filer fra `playground/test-fixtures/` og injiserer dem som en `<script type="application/json" id="demo-state-v1">`-blokk i playground HTML (idempotent — erstatter eksisterende blokk). "Last inn demo-data"-knappen på onboarding-overflaten kaller `ACTIONS['load-demo']` som leser blokken, erstatter alle state-grener via Proxy-mutasjon, kjører `migrateDataVersion` (v2→v3 auto-parser raw_markdown til artifacts), og navigerer til project-surface. Demo viser 17 artifacts gruppert i sidebar med severity-badges, aggregate verdict (BLOKKERT), top-risks-liste, og fungerende re-importer/slett-knapper per artifact.
|
||
|
||
`tests/screenshot/` inneholder en frittstående Playwright-runner med egen `package.json` (gitignored `node_modules`). `node run.mjs` produserer 24 PNG-er (12 surfaces × 2 tema) under `playground/screenshots/v1.15.0/`. v1.15.0-surfaces: onboarding-empty, project-overview, project-artifact-{classify,security,ros,cost,summary}, project-import-modal (viewport-only — modal er position:fixed overlay), project-search, home, catalog, onboarding-prefilled. Runneren sletter PNG-er en tidligere kjøring la igjen, og skriver `playground/screenshots/MANIFEST.json` (sha256 per PNG + sha256 av demo-state-blokken). `tests/kb-update/test-screenshots-manifest.test.mjs` feiler når et PNG i treet ikke er output fra siste kjøring, eller demoen er endret etter at bildene ble tatt — kjør `node run.mjs` på nytt. Eldre sett (v1.10.0, v1.11.0, v1.14.0, v2-mockup) er fjernet i 1.18.2. Disse committes så forkere ser pluginen uten å installere noe. Demo-org er "Acme Kommune" og demo-prosjekt er "Acme: Kunde-chatbot".
|
||
|
||
## Design-system 100%-adoption (v1.11.0 → v1.14.0)
|
||
|
||
Sesjon 3-5 la til inline CSS i `playground/ms-ai-architect-playground.html`. v1.11.0 hoisted alle generiske komponenter til `shared/playground-design-system/components-tier3-supplement.css` (DS v0.3.0):
|
||
- `.pyramide-desc` / `.pyramide-desc__item`
|
||
- `.scenario-card-grid` / `.scenario-card`
|
||
- `.residual-pair` / `__cell` / `__cell-label/__cell-value/__cell-meta` / `__arrow`
|
||
- `.read-more` / `.read-more__trigger` / `.read-more__chev` / `.read-more__body`
|
||
- `.top-risks` / `.top-risk[data-severity]`
|
||
- `.recommendation-card`
|
||
- `.suppressed-panel`
|
||
- `.screen-tabs` / `.screen-tab` / `.screen[data-active]`
|
||
|
||
v1.14.0 (DS v0.4.0): root-cause fix for tre DS-bugs som tidligere ble symptomatisk patchet i lokal CSS — `.kanban-card__name` (break-word + overflow-wrap; var break-all), `.expansion__title-main/sub` (display: block), `.matrix__bubble` (cursor + hover/focus). Fix-en re-syncet til vendored DS, og tilsvarende lokal-overrides slettet. Plus: 14 renderere refaktorert til DS-konvensjon (3 risk-renderere → DS-summary-grid + ros-layout, 6 compliance/govern-renderere → DS-konvensjon, renderMigrate + renderPoc → expansion-list per fase). Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon siden v1.13.1).
|
||
|
||
Alle PARALLEL-CSS-navngrupper migrert til DS-konvensjon. `renderPageShell` + `renderKeyStatsGrid` refaktorert til DS markup. Severity-coded card-borders på rapport-cards, app-header-restruktur, `.stack-lg` body spacing på home/project/catalog, AI Act-pyramide bredde-fix, eyebrow-label på home-projects.
|
||
|
||
Ved videre hoisting: dette er endringer i et delt asset og krever drift-deteksjons-håndtering per `MANIFEST.json`. En re-sync-kommando finnes nå og er verifisert (2026-08-27) — se «Vendored design-system» under for kommando og verifiseringslogg.
|
||
|
||
## Vendored design-system
|
||
|
||
Playground laster CSS fra `playground/vendor/playground-design-system/` — en vendored kopi av det delte playground-designsystemet (27 filer + `MANIFEST.json`). Dette holder pluginen **standalone**: HTML-filen kan åpnes fra `file://` uavhengig av marketplace-roten.
|
||
|
||
- **Re-sync-kommando finnes og er verifisert (2026-08-27).** Designsystem-repoet har restaurert `scripts/sync-design-system.mjs` med en eksplisitt kilde-allowlist (`DELIVERED_FILES`), fordi deres repo-rot inneholder designsystemet **pluss** repo-apparatet (`STATE.md`, `.git/`, `docs/` m.m.) som en naiv gjennomgang ville vendoret med — pinnet av `tests/sync-source-boundary.test.mjs` i deres repo. Kommando, kjørt fra en sjekket-ut `playground-design-system` ved siden av dette repoet: `node scripts/sync-design-system.mjs ms-ai-architect --target ../ms-ai-architect` (legg til `--check` for en skrivefri integritetssjekk). Denne økten kjørte den; `MANIFEST.json` ble skrevet av skriptet selv, aldri redigert for hånd. Full protokoll: `playground-design-system`s `docs/vendoring-and-re-sync.md`.
|
||
- **`source_commit` i `MANIFEST.json` er nå sann og nåbar.** Feltet sier `efaa3d0e79f1b06976735831e5bf8cab42f7e6a9` — `playground-design-system`s `main` på det offentlige speilet, bekreftet med `git ls-remote` mot `git.fromaitochitta.com/open/playground-design-system.git` (ikke bare en lokal ref). Ulikt forrige `c1b7bad`, som ikke finnes som git-objekt i det repoet i det hele tatt (`git cat-file -t c1b7bad…` → `fatal: could not get object info`, bekreftet her med en kjent-positiv kontroll der `efaa3d0` slår opp som `commit`). Feltet kommer fra `git rev-parse HEAD` i kilde-sjekkouten ved synk-tidspunktet — designsystem-repoet har dokumentert at en re-sync kjørt **før** deres egen commit når det offentlige speilet, reproduserer nøyaktig samme falske-peker-defekt, så en framtidig re-sync bør bekrefte at `git -C playground-design-system rev-parse HEAD` matcher `origin/main` først.
|
||
- **Hva du kan sjekke i dag, uten skriptet:** re-hash det vendorede treet mot `MANIFEST.json`. Målt 2026-08-27 — **27/27 matcher**, så ingenting her er redigert lokalt, og **26 av 27 filer er byte-identiske** med designsystem-repoets nåværende innhold, 3,5 måned etter siste sync. Eneste avvik er deres egen `README.md`, som beskriver systemet framfor å være en del av det. Ved manuell sammenligning: se bort fra første linje i hver vendored CSS-fil — generated-headeren legges på av syncen, så en rå `diff` melder alle ni CSS-filer som avvikende når ingen av dem er det.
|
||
- **Drift-deteksjon:** `MANIFEST.json` lagrer SHA-256 per fil, så lokal endring av en vendored fil er detekterbar.
|
||
- **Lastes i HTML:** `<link>`-tags til `fonts.css`, `tokens.css`, `base.css`, `components.css`, `components-tier2.css`, `components-tier3.css`, `components-tier3-supplement.css` (i den rekkefølgen).
|
||
- **Aldri rediger** filer under `vendor/playground-design-system/` direkte. Oppstrøms-endringer hører hjemme i designsystem-repoet — men se punktene over: veien tilbake hit finnes ikke som kommando ennå.
|
||
|
||
> v2-spec under `docs/playground-v2-spec.md` er beholdt som historisk referanse, men er IKKE gjeldende kontrakt. v3-arkitekturen er dokumentert i `.claude/projects/2026-05-03-playground-v3-architecture/`.
|