Kjell Tore Guttormsen
f1f27a4343
DS-repo restored scripts/sync-design-system.mjs with an explicit source allowlist and verified the command; ran their exact command (never one reconstructed locally). MANIFEST.json was rewritten by the script itself, never edited by hand. source_commit now reads efaa3d0 (playground-design-system's main on the public mirror), verified reachable via git ls-remote against the public remote and git cat-file -t locally — in contrast to the previous c1b7bad, which does not exist as a git object in that repo at all. 26/27 files byte-identical to the source; only their README.md content differs. Replaced the three stale prose points in README.md and docs/playground.md that described the missing command and the untrustworthy source_commit. Suite: 1070/1070 (tracked kb-update + kb-eval test files). [skip-docs]: README.md and docs/playground.md are the doc update this task required (vendoring section accuracy). CLAUDE.md's command/agent/skill surface is unaffected — no new commands, agents, or skills.
68 lines
11 KiB
Markdown
68 lines
11 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. v1.10.0/v1.11.0/v1.14.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".
|
||
|
||
## 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/`.
|