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).
This commit is contained in:
Kjell Tore Guttormsen 2026-05-08 21:20:08 +02:00
commit 041e3cc6b3
31 changed files with 88 additions and 51 deletions

View file

@ -187,9 +187,9 @@ claude --plugin ./plugins/ms-ai-architect
/architect:help
```
## Playground (v3 / v1.13.1)
## Playground (v3 / v1.14.0)
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. 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 (PARALLEL-CSS-migrasjon til DS-konvensjon, inline `<style>`-trim 37%, severity-coded card borders, app-header-restruktur, `.stack-lg` body spacing, AI Act-pyramide bredde-fix). v1.13.0 leverer fix-pakke som speiler llm-security v7.6.1 — 5 visuelle bugs fikset: `renderFindingsBlock`/`renderRequirements` outer-wrapper bytter `<div class="findings">` (DS grid 360px+1fr klemte indre struktur) til `<section class="report-meta">`; lokal `.report-table` CSS for 6+ rapporter; ROS-matrise-bobler bytter `<span>``<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabell-rad; `renderRadarSvg` bumpet 300×300→380×380 med dynamisk `text-anchor` for å unngå label-overlap ved 6+ akser; `recommendation-card__body` overflow-wrap.
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. 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 (PARALLEL-CSS-migrasjon til DS-konvensjon, inline `<style>`-trim 37%, severity-coded card borders, app-header-restruktur, `.stack-lg` body spacing, AI Act-pyramide bredde-fix). v1.13.0/.1 patchet 10+ symptomatiske visuelle bugs. v1.14.0 leverer root-cause refaktor over 6 sesjoner: B-DS-1/2/3 fikset i shared/ DS v0.4.0 (kanban-card word-break, expansion title-block, matrix-bubble cursor); 3 risk-renderere (renderDpia/Security/Ros) til DS-summary-grid + ros-layout; 6 compliance/govern-renderere bytter lokal `.report-meta`-wrapper mot DS-konvensjon; renderMigrate + renderPoc til expansion-list per fase (slett `.phase-detail`-CSS); 5b-fixes: renderCost p50/p90-objekter ekstrahert via `.monthly` (var "[object Object]"), renderCompare distinctive-token-matching erstatter firstWord-heuristikk, renderUtredning droppet misvisende `role="tab"`. Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon). Alle 17 renderere PASS visuell QA.
- **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 (25 commands gruppert i 5 expansion-grupper med søk) → Project (per-prosjekt tabs, command-form-prefill fra felles state, paste-back-import med rapport-visualisering)
@ -200,14 +200,15 @@ Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Erst
- **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.10.0-tall)
### Validering (v1.14.0-tall)
| Test | Kommando | Dekning |
|------|----------|---------|
| Statisk struktur | `bash tests/test-playground-v3.sh` | 202 PASS — vendored CSS, surfaces, 25 commands, 14 parsere, 17 renderers (felles grunnskjelett), design-system-klasser, action-handlers, Tier 3-bruk, onboarding field-distribution |
| Parser-fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser-routing |
| Migrasjon | `bash tests/test-playground-migrations.sh` | 7 PASS — v1→v2 idempotent migrasjon |
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | statisk + parser-suiter |
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | 272 PASS — statisk + parser-suiter |
| Plugin-validering | `bash tests/validate-plugin.sh` | 219 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 |
@ -215,9 +216,9 @@ Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Erst
`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, og navigerer til project-surface med 17 pre-importerte rapporter. `rehydratePasteImports()` kjøres via `queueMicrotask` etter project-surface render — fyller textareas fra `project.reports[id].raw_markdown` og kaller `handlePasteImport` for hver. `handlePasteImport` har equal-value-guard for å unngå render-loop.
`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, retina, fullPage) under `playground/screenshots/v1.11.0/` (v1.10.0 beholdt som historisk referanse). Disse committes så forkere ser pluginen uten å installere noe. Demo-org er "Acme Kommune" og demo-prosjekt er "Acme: Kunde-chatbot" — konsistente navn på tvers av alle 17 fixtures (etter v1.11.0 rename fra "Acme AS" / "Demosystem").
`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, retina, fullPage) under `playground/screenshots/v1.14.0/` (v1.10.0 + v1.11.0 beholdt som historisk referanse). Disse committes så forkere ser pluginen uten å installere noe. Demo-org er "Acme Kommune" og demo-prosjekt er "Acme: Kunde-chatbot" — konsistente navn på tvers av alle 17 fixtures (etter v1.11.0 rename fra "Acme AS" / "Demosystem").
### Design-system 100%-adoption (v1.11.0)
### 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`
@ -229,7 +230,9 @@ Sesjon 3-5 la til inline CSS i `playground/ms-ai-architect-playground.html`. v1.
- `.suppressed-panel`
- `.screen-tabs` / `.screen-tab` / `.screen[data-active]`
Alle PARALLEL-CSS-navngrupper migrert til DS-konvensjon. Inline `<style>`-blokk trimmet 202 → 127 linjer (~37%). `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.
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: re-sync via `node scripts/sync-design-system.mjs ms-ai-architect`. Dette er endringer i delt asset — krever drift-deteksjon-handling per `MANIFEST.json`.