open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/plugins/ms-ai-architect/docs/playground.md
Kjell Tore Guttormsen f460814fe9 chore: WIP marketplace doc adjustments across plugins 
Pre-trekexecute snapshot of in-progress CLAUDE.md/SKILL.md edits and
extracted docs/ files. Captured as one commit so /trekexecute claude-design
can run against a clean working tree.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-18 12:04:02 +02:00

8.8 KiB
Raw Blame History

ms-ai-architect — Playground (v3 / v1.15.0)

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 (25 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.15.0-tall)

Test Kommando Dekning
Statisk struktur bash tests/test-playground-v3.sh 219 PASS, 2 WARN (pre-eks.) — vendored CSS, surfaces, 25 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 386 PASS, 0 FAIL, 2 WARN
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

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: 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.

Vendored design-system

Playground laster CSS fra playground/vendor/playground-design-system/ — en vendored kopi av marketplace-rotens shared/playground-design-system/. Dette holder pluginen standalone: HTML-filen kan åpnes fra file:// uavhengig av marketplace-roten.

  • Sync-skript: node scripts/sync-design-system.mjs ms-ai-architect (ved marketplace-rot)
  • Drift-deteksjon: MANIFEST.json lagrer SHA-256 per fil. Re-sync feiler hvis vendored fil er endret lokalt — --force overstyrer.
  • 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 — endringer går i shared/, deretter re-sync.

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/.