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' : '';