From f3aa765fb859ac0b610c9ed50abf599049e1fe66 Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <ktg@humanize.no>
Date: Sun, 3 May 2026 12:35:47 +0200
Subject: [PATCH] refactor(ms-ai-architect): playground uses vendored
 design-system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renames playground/azure-ai-playground.html to
playground/ms-ai-architect-playground.html (history preserved via git mv).
Old name was too narrow — plugin covers the full Microsoft AI stack
(Foundry, Copilot Studio, M365 Copilot, Power Platform, Agent Framework).

Replaces the inline <style> block with seven <link> tags pointing at the
vendored design-system under playground/vendor/playground-design-system/:
fonts.css, tokens.css, base.css, components.css, components-tier2.css,
components-tier3.css, components-tier3-supplement.css.

A small inline shim maps legacy playground tokens (--bg, --surface,
--accent, --gradient1) onto design-system tokens (--color-bg,
--color-surface, --color-primary-500, etc.), keeping all existing
playground-specific class CSS (.hero, .wizard-card, .scenario-card,
.item-card, ...) working without rewrites. <html data-theme="dark">
preserves v2's dark visual identity; light-mode toggle is deferred.

DOM, JS logic, scenario data, and command pipelines are unchanged.

Also includes .gitleaks.toml at repo root (path allowlist for vendored
MANIFEST.json files — SHA-256 file hashes are not secrets) which was
missed in the previous commit due to global git ignore.

Docs updated:
- README.md (root): notes the vendoring sync script + ms-ai-architect
  Playground subsection
- plugins/ms-ai-architect/README.md: new Playground section with sync
  workflow and standalone guarantee
- plugins/ms-ai-architect/CLAUDE.md: Playground section updated with
  vendored design-system details + new filename
---
 CLAUDE.md                                     | 27 +++++++++--
 README.md                                     | 24 ++++++++++
 ...d.html => ms-ai-architect-playground.html} | 45 +++++++++++++------
 3 files changed, 79 insertions(+), 17 deletions(-)
 rename playground/{azure-ai-playground.html => ms-ai-architect-playground.html} (98%)
diff --git a/CLAUDE.md b/CLAUDE.md
index 3ead81e..5bd550f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -172,11 +172,11 @@ claude --plugin ./plugins/ms-ai-architect
 /architect:help
 ```
 
-## Playground (v2)
+## Playground
 
-Interaktiv 5-stegs arkitektur-pipeline for Azure AI-beslutninger.
+Interaktiv 5-stegs arkitektur-pipeline for Microsoft AI-beslutninger.
 
-- **Fil:** `playground/azure-ai-playground.html` (~1840 linjer, self-contained)
+- **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
@@ -185,6 +185,27 @@ Interaktiv 5-stegs arkitektur-pipeline for Azure AI-beslutninger.
 - **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
 
+### Vendored design-system (2026-05-03)
+
+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.
+
 ## Relaterte plugins (fremtidig)
 
 - `ms-rag-architect` — RAG-spesialist (egen plugin)
diff --git a/README.md b/README.md
index 09f3e5e..d1763d2 100644
--- a/README.md
+++ b/README.md
@@ -346,6 +346,30 @@ Two runtime hooks provide session context and safety guardrails:
 
 ---
 
+## Playground
+
+Interactive 5-step architecture pipeline for Microsoft AI decisions, runnable from `file://` without a server.
+
+- **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
+
+### Vendored design-system
+
+The playground loads CSS from `playground/vendor/playground-design-system/` — a vendored copy of the marketplace-root `shared/playground-design-system/`. This keeps the plugin **standalone**: copy the plugin folder anywhere and the playground still works.
+
+- **Sync:** `node scripts/sync-design-system.mjs ms-ai-architect` (run from marketplace root)
+- **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
 
 | Domain | Technologies |
diff --git a/playground/azure-ai-playground.html b/playground/ms-ai-architect-playground.html
similarity index 98%
rename from playground/azure-ai-playground.html
rename to playground/ms-ai-architect-playground.html
index 58d9698..f921c0e 100644
--- a/playground/azure-ai-playground.html
+++ b/playground/ms-ai-architect-playground.html
@@ -1,30 +1,47 @@
 <!DOCTYPE html>
-<html lang="no">
+<html lang="no" data-theme="dark">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Azure AI Architecture Playground</title>
+<title>Microsoft AI Architecture Playground</title>
+
+<!-- Vendored design-system (shared/playground-design-system, sync via scripts/sync-design-system.mjs) -->
+<link rel="stylesheet" href="./vendor/playground-design-system/fonts.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/tokens.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/base.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components-tier2.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components-tier3.css">
+<link rel="stylesheet" href="./vendor/playground-design-system/components-tier3-supplement.css">
+
 <style>
+  /* Legacy variable shim: maps v2 playground tokens to design-system tokens.
+     Keeps existing playground-specific class definitions (.hero, .wizard,
+     .scenario-card, etc) working without rewriting their CSS. */
   :root {
-    --bg: #0a0a0f;
-    --surface: #12121a;
-    --surface2: #1a1a2e;
-    --border: #2a2a3e;
-    --text: #e4e4ef;
-    --text-dim: #8888a0;
-    --accent: #0078d4;
-    --accent2: #00d4aa;
+    --bg: var(--color-bg);
+    --surface: var(--color-surface);
+    --surface2: var(--color-surface-sunken);
+    --border: var(--color-border-subtle);
+    --text: var(--color-text-primary);
+    --text-dim: var(--color-text-secondary);
+    --accent: var(--color-primary-500);
+    --accent2: var(--color-state-success);
     --accent3: #ff6b9d;
     --accent4: #ffa726;
     --accent5: #42a5f5;
     --accent6: #ab47bc;
-    --accent7: #ef5350;
+    --accent7: var(--color-severity-critical);
     --accent8: #66bb6a;
-    --gradient1: linear-gradient(135deg, #0078d4, #00d4aa);
+    --gradient1: linear-gradient(135deg, var(--color-primary-500), var(--color-state-success));
     --gradient2: linear-gradient(135deg, #ff6b9d, #ffa726);
   }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; line-height:1.6; }
+
+  /* Reset margin/padding on form + list elements (base.css only resets headings + p) */
+  ul, ol, li, button, input, select, textarea { margin: 0; padding: 0; }
+  ul, ol { list-style: none; }
+
+  /* Playground heading scale (intentionally overrides base.css for hero emphasis) */
   h1 { font-size:2.8rem; font-weight:800; letter-spacing:-0.03em; }
   h2 { font-size:1.8rem; font-weight:700; letter-spacing:-0.02em; }
   h3 { font-size:1.25rem; font-weight:600; }
