open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

24
plugins/ms-ai-architect/README.md
View file

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