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
parent
660bd106ce
commit
abf2246ea1
5 changed files with 96 additions and 17 deletions
14
.gitleaks.toml
Normal file
14
.gitleaks.toml
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
title = "ktg-plugin-marketplace gitleaks config"
|
||||
|
||||
# Extend default rules
|
||||
[extend]
|
||||
useDefault = true
|
||||
|
||||
# Path-based allowlist: vendored design-system MANIFEST.json files
|
||||
# contain SHA-256 hashes per file by design (drift detection).
|
||||
# These are public file integrity hashes, not secrets.
|
||||
[[allowlists]]
|
||||
description = "Vendored design-system MANIFEST files (SHA-256 file hashes)"
|
||||
paths = [
|
||||
'''playground/vendor/playground-design-system/MANIFEST\.json$''',
|
||||
]
|
||||
|
|
@ -192,6 +192,8 @@ 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.
|
||||
|
||||
→ [Full documentation](plugins/ms-ai-architect/README.md)
|
||||
|
||||
---
|
||||
|
|
@ -254,6 +256,7 @@ Targets five plugins: `ms-ai-architect`, `okr`, `llm-security`, `ultraplan-local
|
|||
- **JSON schemas** — `finding.schema.json`, `okr-set.schema.json`, `ros-threat.schema.json` for cross-plugin data interchange
|
||||
- **Privacy-first** — all fonts self-hosted as woff2 in `fonts/`, zero external CDN requests, GDPR-safe for offentlig sektor, works offline / behind air-gapped firewalls
|
||||
- **Reference scenarios** — Lier kommune ROS-rapport (ms-ai-architect), Bærum kommune T2 OKR live-writer, Direktoratet for digital tjenesteutvikling ToxicSkills findings review (85 funn, BLOCK)
|
||||
- **Vendoring sync** — `scripts/sync-design-system.mjs <plugin>` copies the design-system into `plugins/<name>/playground/vendor/` so each plugin stays standalone. SHA-256 MANIFEST detects local drift; `--force` to override. First adopter: `ms-ai-architect` (2026-05-03).
|
||||
|
||||
→ [Full documentation](shared/playground-design-system/README.md) · [Browse showcase](shared/playground-examples/index.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue