open/ms-ai-architect
1
0
Fork 0
Code Issues Releases 4 Activity
ms-ai-architect/docs/playground.md
Kjell Tore Guttormsen 2ed24add12
 fix(screenshots): regenerate screenshots from the current demo, remove older sets 
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>
2026-09-23 14:43:42 +02:00

12 KiB
Raw Blame History

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-systems docs/vendoring-and-re-sync.md.
  • source_commit i MANIFEST.json er nå sann og nåbar. Feltet sier efaa3d0e79f1b06976735831e5bf8cab42f7e6a9 — playground-design-systems 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/.