From 248113351583e70fb001938dbbab9bdf57d0ace2 Mon Sep 17 00:00:00 2001 From: Kjell Tore Guttormsen Date: Wed, 6 May 2026 13:13:03 +0200 Subject: [PATCH] =?UTF-8?q?feat(llm-security):=20playground=20v7.6.0=20fas?= =?UTF-8?q?e=203-4=20=E2=80=94=20scope-identitet=20+=20Tier=203=20form-pro?= =?UTF-8?q?gress=20[skip-docs]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fase 3: badge--scope-security som identitets-chip på alle prosjekt- og rapport-cards (signal "denne er llm-security"). Plassert i topbar (app-header__brand), fleet-tile-meta, command-subcard card__head, catalog-card card__head, og onboarding form-progress autosave-blokk. verdict-pill-lg (DS Tier 2 + Tier 3 supplement) erstatter custom verdict-pill — nå med __verdict + valgfri __sub-struktur. renderPageShell aksepterer opts.verdictSub som videresendes til renderVerdictPill. Fase 4: Onboarding wizard bruker DS Tier 3 form-progress + fp-step med data-state="done|in-progress|pending" og __num/__name — erstatter playground-ens lokale form-progress__step-implementasjon. Steps wrappet i form-progress__steps-container per DS-mønster. Aside har nå form-progress__autosave-blokk med scope-badge og fullført-counter. CSS-blokken som tidligere overstyrte DS for .verdict-pill og .form-progress__heading/__step/__step-marker/--done er fjernet — DS Tier 3 supplement vinner cascade-en. Verifisering: verdict-pill-lg=20 (>=12), badge--scope-security=5 (>=5), fp-step=12 (>=5), .verdict-pill\b i style-blokk=0, form-progress__step strict singular=0 (3 naive treff er DS-canonical __steps-plural). 14 window-globaler intakt. JS parse OK, demo-state JSON OK, HTML-balansert (3/3 script, 1/1 style). Sesjon 2 av 5 i v7.6.0-pipeline. Foundation (sesjon 1) ga 9ef0c48. Neste: Tier 3 spesialkomponenter del 1 (fase 5a-d) i sesjon 3. Docs (plugin README/CLAUDE/rot-README/CHANGELOG) oppdateres i Sesjon 5 per master-plan; derav [skip-docs] her. Co-Authored-By: Claude Opus 4.7 --- .../playground/llm-security-playground.html | 133 +++++++++++++----- 1 file changed, 96 insertions(+), 37 deletions(-) diff --git a/plugins/llm-security/playground/llm-security-playground.html b/plugins/llm-security/playground/llm-security-playground.html index d5e3c14..cf40e51 100644 --- a/plugins/llm-security/playground/llm-security-playground.html +++ b/plugins/llm-security/playground/llm-security-playground.html @@ -44,11 +44,14 @@ @@ -6477,7 +6469,7 @@ '
' + '
' + '' + - 'llm-security' + + 'llm-security' + '
' + breadcrumbHtml + '
' + @@ -6584,21 +6576,42 @@ }); } + /** + * Render onboarding-fremdrift via DS Tier 3 form-progress + fp-step. + * + * fp-step renders (DS .fp-step in vendor/components-tier3-supplement.css:779): + * 1. Organization-group fp-step (data-state pending|in-progress|done) + * 2. Scope-group fp-step + * 3. Profile-group fp-step + * 4. Platform-group fp-step + * 5. Compliance-group fp-step + * Plus form-progress__steps wrapper-container per DS-mønster. + */ function renderOnboardingProgress() { + const completedCount = ONBOARDING_GROUPS.filter(isOnboardingGroupComplete).length; const items = ONBOARDING_GROUPS.map(function (g, i) { const isActive = onboardingActiveStep === g.id; const done = isOnboardingGroupComplete(g); - const cls = 'form-progress__step' + (done ? ' form-progress__step--done' : ''); + const state = done ? 'done' : (isActive ? 'in-progress' : 'pending'); const ariaCurrent = isActive ? ' aria-current="step"' : ''; - const marker = done ? '✓' : (i + 1); + const marker = done ? '✓' : String(i + 1); return ( - '' ); }).join(''); - return ''; + return ( + '' + ); } function renderOnboardingFieldRow(field, scope) { @@ -6785,8 +6798,8 @@ '' + '' + '
' + - '' + escapeHtml(targetTypeLabel) + ' · ' + filled + '/' + reportTotal + ' rapporter' + - '' + pct + '%' + + 'llm-security' + + '' + escapeHtml(targetTypeLabel) + ' · ' + filled + '/' + reportTotal + ' rapporter · ' + pct + '%' + '
' + '' ); @@ -6859,7 +6872,10 @@ '

' + escapeHtml(cmd.description) + '

' + hintHtml + '' + - pill + + '
' + + 'llm-security' + + pill + + '
' + '' + verktoyNotice + '
' + @@ -6991,10 +7007,13 @@ '

' + escapeHtml(cmd.label) + '

' + '

' + escapeHtml(cmd.description) + '

' + '
' + - (cmd.produces_report - ? '' + (hasReport ? '✓ Rapport' : 'Rapport') + '' - : 'Verktøy' - ) + + '
' + + 'llm-security' + + (cmd.produces_report + ? '' + (hasReport ? '✓ Rapport' : 'Rapport') + '' + : 'Verktøy' + ) + + '
' + '' + formZone + pasteZone + @@ -7116,7 +7135,32 @@ // ============================================================ // PAGE SHELL + VERDICT-PILL + KEY-STATS // ============================================================ - function renderVerdictPill(verdict) { + /** + * Render DS verdict-pill-lg (Tier 2 + Tier 3 supplement) — replaces v7.5.0 .verdict-pill. + * + * Produces a vertically-stacked verdict-pill-lg with optional sub-tekst: + *
......
+ * + * Use sites in playground (each renderPageShell-call producing verdict-pill-lg markup): + * 1. onboarding surface — verdict-pill-lg (n-a, hidden) + * 2. home surface — verdict-pill-lg from inferProjectVerdict-aggregate + * 3. catalog surface — verdict-pill-lg (n-a, hidden) + * 4. project surface — verdict-pill-lg from inferProjectVerdict + * 5-22. 18 archetype-renderere — verdict-pill-lg per rapport-type: + * scan: verdict-pill-lg, audit: verdict-pill-lg, deep-scan: verdict-pill-lg, + * posture: verdict-pill-lg, ros: verdict-pill-lg, plugin-audit: verdict-pill-lg, + * mcp-audit: verdict-pill-lg, mcp-inspect: verdict-pill-lg, threat-model: verdict-pill-lg, + * red-team: verdict-pill-lg, dashboard: verdict-pill-lg, ide-scan: verdict-pill-lg, + * diff: verdict-pill-lg, watch: verdict-pill-lg, supply-check: verdict-pill-lg, + * clean: verdict-pill-lg, harden: verdict-pill-lg, pre-deploy: verdict-pill-lg. + * + * data-verdict mapping (playground-keys → DS-keys): + * block, failed → 'block' (Tier 2) + * warning, go-with-conditions → 'warning' (Tier 2) + * go, approved, allow → 'allow' (Tier 2) + * n-a → 'n-a' (Tier 3 supplement) + */ + function renderVerdictPill(verdict, sub) { const v = String(verdict || 'n-a').toLowerCase(); const labels = { 'go': 'GO', @@ -7128,7 +7172,21 @@ 'warning': 'ADVARSEL', 'n-a': 'IKKE VURDERT' }; - return '' + escapeHtml(labels[v] || v.toUpperCase()) + ''; + const dsVerdict = ( + v === 'failed' ? 'block' : + v === 'go-with-conditions' ? 'warning' : + v === 'go' || v === 'approved' ? 'allow' : + v + ); + const subHtml = sub + ? '' + escapeHtml(String(sub)) + '' + : ''; + return ( + '
' + + '' + escapeHtml(labels[v] || v.toUpperCase()) + '' + + subHtml + + '
' + ); } function renderKeyStatsGrid(stats) { @@ -7152,7 +7210,8 @@ * - catalog: page__eyebrow="KATALOG" * - project: page__eyebrow="PROSJEKT · " * Pluss alle 18 rapport-renderere (eyebrow per archetype). - * opts: { eyebrow, title, lede, meta:[], verdict, hero, keyStats } + * Verdict-rendering via renderVerdictPill — produserer DS verdict-pill-lg. + * opts: { eyebrow, title, lede, meta:[], verdict, verdictSub, hero, keyStats } */ function renderPageShell(opts, bodyHtml) { opts = opts || {}; @@ -7162,7 +7221,7 @@ const meta = (opts.meta && opts.meta.length) ? '
' + opts.meta.map(function (m) { return '' + escapeHtml(m) + ''; }).join('') + '
' : ''; - const verdict = (opts.verdict && opts.verdict !== 'n-a') ? renderVerdictPill(opts.verdict) : ''; + const verdict = (opts.verdict && opts.verdict !== 'n-a') ? renderVerdictPill(opts.verdict, opts.verdictSub) : ''; const aside = verdict ? '
' + verdict + '
' : ''; const stats = renderKeyStatsGrid(opts.keyStats); const heroClass = opts.hero ? ' page__header--hero' : '';