From fba0adf17c8c80282b630b44b9ab8ad94bf3a545 Mon Sep 17 00:00:00 2001 From: Kjell Tore Guttormsen Date: Tue, 5 May 2026 18:47:45 +0200 Subject: [PATCH] =?UTF-8?q?feat(llm-security):=20playground=20Fase=201=20?= =?UTF-8?q?=E2=80=94=20single-file=20SPA=20skjelett=20[skip-docs]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mirror av ms-ai-architect playground-arkitektur, tilpasset llm-security: - 4 overflater (onboarding/home/catalog/project) med surface-router - IndexedDB persistens (llm-security-playground-v1) + localStorage fallback - Theme-bootstrap med FOUC-prevention og localStorage-persist - 20 kommandoer i CATALOG (5 kategorier: discover/posture/findings-ops/ hardening/adversarial/mcp-ops) med full input_fields + report_archetype - 5-gruppers onboarding (organisasjon/scope/profil/plattform/compliance) med form-progress sidebar - Home: 3 tracks + fleet-grid prosjektliste + tom-state med demo-data - Katalog: ekspanderbare grupper med live-søk og forhåndsvisning - Prosjekt-stub: 4 screen-tabs + 6 kategori-tabs + per-kommando skjema/paste-import/rapport-soner - Demo-state: Direktoratet for digital tjenesteutvikling med 2 prosjekter - Eksport/import (JSON envelope), action-handlers (35), modal-portal PARSERS + RENDERERS er tomme routing-objekter — fylles i Fase 2 (10 høy-prio kommandoer) og Fase 3 (resterende 10). Paste-import viser «parser ikke implementert»-guide-panel for kommandoer uten parser, og lagrer rå markdown i state for fremtidig parsing. Vendor: 27 filer synket fra shared/playground-design-system/ (MANIFEST.json sjekksum-låst, source_commit 487f7ae). Verifisert: node --check OK (2737 linjer, 113733 char inline JS), HTML-tag-balanse OK. Manuell smoke-test gjenstår. Docs (plugin README, CLAUDE.md, rot-README) bumpes ved Fase 3-fullføring sammen med plugin.json v7.5.0. Derfor [skip-docs] her. Co-Authored-By: Claude Opus 4.7 --- .../playground/llm-security-playground.html | 2737 +++++++++++++++++ .../playground-design-system/CHANGELOG.md | 63 + .../playground-design-system/MANIFEST.json | 36 + .../vendor/playground-design-system/README.md | 234 ++ .../vendor/playground-design-system/base.css | 264 ++ .../components-tier2.css | 352 +++ .../components-tier3-supplement.css | 1455 +++++++++ .../components-tier3.css | 717 +++++ .../playground-design-system/components.css | 650 ++++ .../vendor/playground-design-system/fonts.css | 84 + .../fonts/Inter-Bold.woff2 | Bin 0 -> 111040 bytes .../fonts/Inter-Medium.woff2 | Bin 0 -> 111380 bytes .../fonts/Inter-Regular.woff2 | Bin 0 -> 108488 bytes .../fonts/Inter-SemiBold.woff2 | Bin 0 -> 111588 bytes .../fonts/JetBrainsMono-Medium.woff2 | Bin 0 -> 93824 bytes .../fonts/JetBrainsMono-Regular.woff2 | Bin 0 -> 92164 bytes .../fonts/JetBrainsMono-SemiBold.woff2 | Bin 0 -> 94472 bytes .../fonts/LICENSE-Inter.txt | 92 + .../fonts/LICENSE-JetBrainsMono.txt | 93 + .../fonts/LICENSE-SourceSerif4.md | 93 + .../fonts/LICENSES.md | 42 + .../fonts/SourceSerif4-Regular.woff2 | Bin 0 -> 107360 bytes .../fonts/SourceSerif4-Semibold.woff2 | Bin 0 -> 112520 bytes .../vendor/playground-design-system/print.css | 176 ++ .../schemas/finding.schema.json | 88 + .../schemas/okr-set.schema.json | 78 + .../schemas/ros-threat.schema.json | 59 + .../playground-design-system/tokens.css | 232 ++ 28 files changed, 7545 insertions(+) create mode 100644 plugins/llm-security/playground/llm-security-playground.html create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/CHANGELOG.md create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/MANIFEST.json create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/README.md create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/base.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/components-tier2.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/components-tier3-supplement.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/components-tier3.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/components.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/Inter-Bold.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/Inter-Medium.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/Inter-Regular.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/Inter-SemiBold.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/JetBrainsMono-Medium.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/JetBrainsMono-Regular.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/JetBrainsMono-SemiBold.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/LICENSE-Inter.txt create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/LICENSE-JetBrainsMono.txt create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/LICENSE-SourceSerif4.md create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/LICENSES.md create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/SourceSerif4-Regular.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/fonts/SourceSerif4-Semibold.woff2 create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/print.css create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/schemas/finding.schema.json create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/schemas/okr-set.schema.json create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/schemas/ros-threat.schema.json create mode 100644 plugins/llm-security/playground/vendor/playground-design-system/tokens.css diff --git a/plugins/llm-security/playground/llm-security-playground.html b/plugins/llm-security/playground/llm-security-playground.html new file mode 100644 index 0000000..81af42b --- /dev/null +++ b/plugins/llm-security/playground/llm-security-playground.html @@ -0,0 +1,2737 @@ + + + + + + llm-security — Playground v1 + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + + + + + + + + + + diff --git a/plugins/llm-security/playground/vendor/playground-design-system/CHANGELOG.md b/plugins/llm-security/playground/vendor/playground-design-system/CHANGELOG.md new file mode 100644 index 0000000..8ae80b3 --- /dev/null +++ b/plugins/llm-security/playground/vendor/playground-design-system/CHANGELOG.md @@ -0,0 +1,63 @@ +# playground-design-system — CHANGELOG + +## 0.3.0 — 2026-05-04 + +### Added — Playground/report-page foundation primitives (sections 13-25 in tier3-supplement) + +Generiske mønstre som tidligere ble definert inline i plugin-playgrounds (først i ms-ai-architect v1.10) er hoisted hit slik at alle 5 plugin-konsumenter (`ms-ai-architect`, `okr`, `llm-security`, `ultraplan-local`, `config-audit`) kan dele samme vokabular og visuelle profil. + +- **`.eyebrow` utility** — uppercase 11px monospace label med 0.08em letter-spacing. Bruk over seksjons-titler. +- **`.page__*` page-shell** (`.page__header`, `.page__header-main`, `.page__header-aside`, `.page__eyebrow`, `.page__title`, `.page__lede`, `.page__meta`) — standard rapport-side-header med eyebrow → h1 → lede → meta + verdict-slot side-by-side. Responsiv: kollapser til én kolonne under 720px. +- **`.key-stats` / `.key-stat`** — 2-5-kolonne responsivt grid av store tall-metrikker. `font-variant-numeric: tabular-nums`, `font-size-2xl` bold. Severity-modifiers (`.key-stat--critical/high/medium/low/positive/info`) tinter value-fargen. +- **`.verdict-pill-lg` 5-band utvidelse** — eksisterende `.verdict-pill-lg` aksepterer nå alle 5 severity-bånd: `critical/extreme/high/medium/low/positive` + neutral `n-a/info/neutral`. Bakoverkompatibel med eksisterende `block/warning/allow`. +- **`.tab-list` / `.tab` / `.tab-panel`** — generisk faneflate-komponent. ARIA-paritet: `role="tablist"`, `role="tab"`, `aria-current="true"`. `.tab__count` for badge-tall, `.tab-panel[hidden]` for skjuling. +- **`.top-risks` / `.top-risk[data-severity]`** — severity-ordnet liste over topp-risikoer med rank/desc/score-kolonner. Severity-attribut driver venstre-border + score-pill-bakgrunn. +- **`.recommendation-card[data-severity]`** — emphasized advisory-callout med label + body. 6 severity-modifiers. +- **`.card__*` subkomponenter** — komponerbare tillegg til eksisterende `.card` (base.css): `.card__head`, `.card__title`, `.card__desc`, `.card__id`, `.card__meta`, `.card__hint`, `.card__actions`, `.card__pill`. Pluss `.card--severity-{level}` for 4px venstre-border-modifier. +- **Form patterns** — `.field-row` (vertikal flex), `.field-label` (medium weight), `.field-help` (xs tertiary), `.required-mark` (severity-critical asterisk), `.multi-select` (fieldset reset), `.checkbox-row` (inline-flex med hover). Mirrors Aksel/Digdir form-konvensjoner. +- **Section-spacing utilities** — `.stack-lg` (margin-block: var(--space-8)), `.stack-md` (var(--space-5)), `.stack-sm` (var(--space-3)). Anvendes på parent for å gi konsistent vertikal rytme mellom barn-elementer. +- **`.pyramide-tier-detail`** — utvidbar `
`-blokk under `.pyramide`-visualisering. Custom chevron, ingen native marker. Brukes av AI Act-klassifiserings-renderer. +- **`.scenario-card-grid` / `.scenario-card[data-status="winner"]`** — auto-fit grid (minmax 240px) av scenario/alternativ-cards. Vinnerstatus får success-tinted bakgrunn + grønn count-pill. +- **`.app-shell` / `.app-shell--wide` / `.app-shell--narrow`** — sentralisert max-width page-wrapper. 1200/1400/880px varianter. + +### Notes for vendor consumers + +Versjon 0.3.0 er **rent additiv** — ingen eksisterende selector er endret eller fjernet. Alle eksisterende klasser (`.btn`, `.card`, `.expansion`, `.kanban-*`, `.mat-ladder`, `.read-more`, `.suppressed`, `.pair-before-after`, `.verdict-pill-lg` osv.) fungerer uendret. + +For å adoptere v0.3: +1. Re-sync via `node scripts/sync-design-system.mjs ` (kreves `--force` hvis eksisterende drift) +2. Oppdater plugin HTML til å bruke nye klasser i stedet for inline CSS +3. Andre plugins kan vente med adopsjon — eksisterende DS-bruk fortsetter å fungere + +Førsteadopter: `ms-ai-architect` v1.11.0 (planlagt 2026-05-04). + +## 0.2.0 — 2026-05-04 + +### Added +- `[data-theme="light"]`-blokk i `tokens.css` (Aksel-aligned, WCAG AA-validert). + Full mirror av dark-blokken (26 vars) — alle theme-overridable tokens som + finnes i dark-blokken finnes nå også i light-blokken, slik at renderers ikke + faller gjennom til udefinerte verdier ved theme-switch. +- `color-scheme` CSS-property satt eksplisitt på `:root`, `[data-theme="light"]` + og `[data-theme="dark"]` for korrekt native form-controls/scrollbar-styling. + +### Notes for vendor consumers + +Andre plugins som vendrer design-systemet +(`okr`, `llm-security`, `ultraplan-local`, `config-audit`) får tilgang til +light-tokens etter neste re-sync. Adopsjon er valgfri — eksisterende dark-only +oppførsel er bakoverkompatibel siden ingen eksisterende verdi er endret. + +For å adoptere light-mode i en konsument: +1. Re-sync via `node scripts/sync-design-system.mjs ` +2. Legg til en synkron `