feat(ms-ai-architect): replace playground v2 with v3 + docs update

Step 17 (Wave 5, final). Closes the v3 playground delivery (5-session run, 17 commits total). Pre-flight tests verified passing before deletion: - bash tests/validate-plugin.sh -> 215/215 PASS - bash tests/run-e2e.sh --playground -> 240/240 PASS (170 + 70) Changes: - DELETE playground/ms-ai-architect-v3.html - MOVE v3 content to playground/ms-ai-architect-playground.html (3867 lines). Replaces the deleted v2 file at the same canonical path so external references continue to resolve. - UPDATE tests/test-playground-v3.sh + tests/test-playground-parsers.sh to point at the renamed canonical file. - UPDATE plugin README.md (## Playground (v3) section): describes the 4-surface decision-builder + report-viewer architecture, persistent state model, 17 report renderers, theme toggle, and the validation matrix. - UPDATE plugin CLAUDE.md: replaces v2 5-step pipeline section with v3 architecture overview. Marks docs/playground-v2-spec.md as historical-only (no longer the contract); points at .claude/projects/2026-05-03-playground -v3-architecture/ for v3 spec. - UPDATE root README.md: marketplace listing for ms-ai-architect now describes v3 architecture (4 surfaces, persistence, 17 renderers, theme, 240-test validation) and references the test command. Verify (post-rename): - ! test -f playground/ms-ai-architect-v3.html: pass - test -f playground/ms-ai-architect-playground.html (>3000 lines): pass - grep -q "v3" in plugin README + plugin CLAUDE.md + root README: pass - bash tests/validate-plugin.sh: exit 0 (215/215) - bash tests/run-e2e.sh --playground: exit 0 (240/240)
2026-05-03 20:16:37 +02:00 · 2026-05-03 20:16:37 +02:00 · 2ad02ed002
commit 2ad02ed002
parent 68a2240aae
7 changed files with 3912 additions and 5882 deletions
--- a/README.md
+++ b/README.md
@ -192,7 +192,14 @@ Key commands: `/architect`, `/architect:ros`, `/architect:security`, `/architect

 12 specialized agents · 24 commands · 5 skills (387 reference docs) · 2 hooks · sitemap-based KB monitoring

-**Playground:** `playground/ms-ai-architect-playground.html` — interactive 5-step pipeline (Intake → Explore → Configure → Review → Export). Vendored copy of the shared design-system at `playground/vendor/`, kept in sync via `scripts/sync-design-system.mjs ms-ai-architect`. Standalone — opens from `file://` without server or marketplace dependency.
+**Playground (v3, 2026-05-03):** Replaces the prior v2 5-step pipeline with a multi-surface decision-builder + report viewer. The single-file HTML app lives at `playground/ms-ai-architect-playground.html` (~3870 lines).
+
+- **4 surfaces:** Onboarding (18 shared organization fields prefill all command forms) → Home (project list + 3 entry tracks) → Catalog (24 commands grouped in 5 expansion categories with search) → Project (per-project tabs, command-form prefill, paste-back report import + visualization)
+- **Persistence:** IndexedDB primary + localStorage fallback, schema-versioned (`STATE_KEY = 'ms-ai-architect-state-v1'`) with eager migrations pipeline
+- **17 inline report renderers** routed via canonical archetype-routing table: classify pyramid, ROS/security 5×5 + 6×5 risk matrices, radar, findings tables, cost distribution, capability matrix, phased plans, decision-record envelopes
+- **Light/dark theme toggle** persisted in `localStorage('ms-ai-architect-theme')`, FOUC-safe via `<head>`-bootstrap script
+- **Validation:** 240 PASS combined (`bash tests/run-e2e.sh --playground` runs static-structure + parser-fixture suites)
+- **Vendored design-system** at `playground/vendor/`, kept in sync via `scripts/sync-design-system.mjs ms-ai-architect`. Standalone — opens from `file://` without server or marketplace dependency.

 → [Full documentation](plugins/ms-ai-architect/README.md)

--- a/plugins/ms-ai-architect/CLAUDE.md
+++ b/plugins/ms-ai-architect/CLAUDE.md
@ -172,40 +172,46 @@ claude --plugin ./plugins/ms-ai-architect
 /architect:help
 ```

-## Playground
+## Playground (v3)

-Interaktiv 5-stegs arkitektur-pipeline for Microsoft AI-beslutninger.
+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/`.

- **Fil:** `playground/ms-ai-architect-playground.html` (~1990 linjer)
- **Spec:** `docs/playground-v2-spec.md`
- **Build:** `playground/build/` (7 deler, brukes kun under utvikling — slettes etter assembly)
- **Innhold:** 11 Azure AI-tjenester, 8 kategorier, 76 kapabiliteter, 8 scenarioer, 9 command pipelines
- **5-stegs pipeline:** Intake (wizard) -> Utforsk (filtrert katalog) -> Konfigurer (parametere + compliance) -> Gjennomgang (cost P10/P50/P90 + risiko) -> Eksporter (4 formater)
- **3 brukernivaer:** "Guide meg" (wizard), "La meg utforske" (browse), "Jeg vet hva jeg vil" (direkte)
- **4 eksport-formater:** Strukturert prompt, Command pipeline med per-command copy, Markdown brief, JSON Decision Record
- **Data extensions (vs v1):** `skill` (citizen/pro/devops), `setupDays`, `userRec` per item + `COMMAND_PIPELINES` per scenario
+- **Fil:** `playground/ms-ai-architect-playground.html` (~3870 linjer, single-file v3-arkitektur)
+- **4 surfaces:** Onboarding (18 felles felt fra `/architect:onboard`) → Home (prosjekt-liste + 3 entry-tracks) → Catalog (24 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)
+- **Persistens:** IndexedDB-primær med localStorage-fallback. Schema-versjonert (`STATE_KEY = 'ms-ai-architect-state-v1'`) med eager `MIGRATIONS`-pipeline for fremtidige skjema-endringer.
+- **17 rapport-renderers:** Hver rapport-produserende command har én markdown-parser (markdown → struktur) og én renderer (struktur → HTML-visualisering: pyramide, matrix, radar, findings, distribution, capability-matrix, m.fl.) rutet via en kanonisk archetype-routing-tabell.
+- **Theme:** Mørk default + lys theme-toggle, 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.

-### Vendored design-system (2026-05-03)
+### Validering
+
+| Test | Kommando | Dekning |
+|------|----------|---------|
+| Statisk struktur | `bash tests/test-playground-v3.sh` | 170 PASS — vendored CSS, surfaces, 24 commands, 14 parsere, 17 renderers, design-system-klasser, action-handlers |
+| Parser-fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser-routing |
+| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | begge over |
+| Manuell A11Y QA | Se `playground/MANUAL-CHECKLIST.md` | 10 seksjoner inkl. axe-core-kjøring per surface |
+| A11Y-rapport | `playground/A11Y-RAPPORT.md` | Skjelett — fylles ut etter kjøring |
+
+### 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-kilde:** `shared/playground-design-system/` (commit `f1fecf3` på sync-tidspunktet)
 - **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).
- **Legacy var-shim:** Inline `<style>` mapper v2-tokens (`--bg`, `--surface`, `--accent`)
-  til design-system-tokens (`--color-bg`, `--color-surface`, `--color-primary-500`)
-  så eksisterende klasser (`.hero`, `.wizard-card`, `.scenario-card`) fortsatt fungerer.
- **Tema:** `<html data-theme="dark">` beholder dark-mode-default fra v2.
-  Light-mode-toggle er ikke implementert (defer).
 - **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/`.
+
 ## Relaterte plugins (fremtidig)

 - `ms-rag-architect` — RAG-spesialist (egen plugin)
--- a/plugins/ms-ai-architect/README.md
+++ b/plugins/ms-ai-architect/README.md
@ -348,14 +348,30 @@ Two runtime hooks provide session context and safety guardrails:

 ---

-## Playground
+## Playground (v3)

-Interactive 5-step architecture pipeline for Microsoft AI decisions, runnable from `file://` without a server.
+Interactive **decision-builder + report viewer** for Microsoft AI architecture decisions, runnable from `file://` without a server. Replaces the v2 5-step pipeline with a multi-surface app that persists state across sessions and visualizes parsed reports inline.

- **File:** `playground/ms-ai-architect-playground.html`
- **Pipeline:** Intake (wizard) → Explore (filtered catalog) → Configure (parameters + compliance) → Review (cost P10/P50/P90 + risk) → Export (4 formats)
- **3 entry modes:** "Guide me" (wizard), "Let me explore" (browse), "I know what I want" (direct)
- **4 export formats:** Structured prompt, command pipeline (per-command copy), Markdown brief, JSON Decision Record
+- **File:** `playground/ms-ai-architect-playground.html` (~3870 lines, single-file v3 architecture)
+- **4 surfaces:** Onboarding (18 shared fields) → Home (project list + 3 entry tracks) → Catalog (24 commands grouped by 5 expansion categories with search) → Project (per-project tabs, command form prefill, paste-back report import + visualization)
+- **Persistent state:** IndexedDB primary store with localStorage fallback. Schema-versioned (`STATE_KEY = 'ms-ai-architect-state-v1'`) with eager `MIGRATIONS` pipeline.
+- **17 report renderers:** Each report-producing command has a parser (markdown → structured) and renderer (structured → HTML visualization: pyramid, matrix, radar, findings, distribution, capability-matrix, etc.) wired through a canonical archetype-routing table.
+- **Theme:** Dark default + light mode toggle, persisted in `localStorage('ms-ai-architect-theme')`.
+- **Export/import:** JSON Decision Record envelope (Blob + FileReader), schema-version-aware on import.
+
+```bash
+# Run playground locally
+open plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
+```
+
+### Validation
+
+| Test | Command | Coverage |
+|------|---------|----------|
+| Static structure | `bash tests/test-playground-v3.sh` | 170 PASS — vendored CSS, surfaces, 24 commands, 14 parsers, 17 renderers, design-system classes, action handlers |
+| Parser fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser routing |
+| Combined (E2E) | `bash tests/run-e2e.sh --playground` | both above |
+| Manual a11y QA | See `playground/MANUAL-CHECKLIST.md` | 10 sections incl. axe-core run per surface |

 ### Vendored design-system

@ -365,11 +381,6 @@ The playground loads CSS from `playground/vendor/playground-design-system/` —
 - **Drift detection:** `MANIFEST.json` records SHA-256 per file. Re-sync refuses to overwrite files modified locally — pass `--force` to override.
 - **Generated header:** Each vendored CSS file is prefixed with `/* Code generated by sync-design-system.mjs; DO NOT EDIT. */`. Edit `shared/`, then re-sync.

-```bash
-# Run playground locally
-open plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
-```
-
 ---

 ## Technology Coverage
--- a/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
+++ b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
--- a/plugins/ms-ai-architect/playground/ms-ai-architect-v3.html
+++ b/plugins/ms-ai-architect/playground/ms-ai-architect-v3.html
--- a/plugins/ms-ai-architect/tests/test-playground-parsers.sh
+++ b/plugins/ms-ai-architect/tests/test-playground-parsers.sh
@ -14,7 +14,7 @@
 set -euo pipefail

 PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-HTML_FILE="$PLUGIN_ROOT/playground/ms-ai-architect-v3.html"
+HTML_FILE="$PLUGIN_ROOT/playground/ms-ai-architect-playground.html"
 FIXTURES_DIR="$PLUGIN_ROOT/playground/test-fixtures"

 # shellcheck disable=SC1091
--- a/plugins/ms-ai-architect/tests/test-playground-v3.sh
+++ b/plugins/ms-ai-architect/tests/test-playground-v3.sh
@ -9,7 +9,7 @@
 set -euo pipefail

 PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-HTML_FILE="$PLUGIN_ROOT/playground/ms-ai-architect-v3.html"
+HTML_FILE="$PLUGIN_ROOT/playground/ms-ai-architect-playground.html"

 # Inkluder felles helpers (init_suite, pass, fail, warn, print_summary,
 # assert_min_lines, assert_matches_pattern). Disse aktiverer set -euo pipefail —
@ -28,7 +28,7 @@ if [ ! -f "$HTML_FILE" ]; then
  print_summary
  exit 1
 fi
-pass "HTML-fila eksisterer: playground/ms-ai-architect-v3.html"
+pass "HTML-fila eksisterer: playground/ms-ai-architect-playground.html"

 assert_min_lines "$HTML_FILE" 1500 "v3 HTML er >= 1500 linjer"