refactor(ms-ai-architect): playground uses vendored design-system

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
This commit is contained in:
Kjell Tore Guttormsen 2026-05-03 12:35:47 +02:00
commit abf2246ea1
5 changed files with 96 additions and 17 deletions

View file

@ -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)