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

refactor(ms-ai-architect): playground v1.14.0 sesjon 4 — compliance/govern til DS-konvensjon

Browse source 
- renderAiActPyramid: 2x <aside class="card"> (rolle/begrunnelse + obligations)
  med <dl class="adr-meta"> og <ol class="stack-sm"> erstatter .report-meta-wrapper
- renderRequirements: outer .report-meta fjernet, bruker <div class="stack-sm">
- renderConformity: timeline standalone i <section class="aiact-timeline-section">
- renderTransparency/renderFria/renderReview: verifisert (DS allerede riktig)
- Slettet .report-meta-CSS-blokk (~14 linjer) + .aiact-timeline + .suppressed-panel +
  .kanban-board + .report-meta fra defensiv layout
- La til .adr-meta-grid + .aiact-timeline-section konsolidert med findings-section
- Style-blokk: 188 -> 178 effektive linjer

Refs V1.14.0-AUDIT.local.md sub-batch A.
This commit is contained in:
Kjell Tore Guttormsen 2026-05-08 20:27:02 +02:00
commit 5c5c7b40a9
1 changed files with 31 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

62
plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
View file

@ -190,24 +190,14 @@
.ros-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); align-items: start; margin-block: var(--space-5); }
.summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: start; margin-block: var(--space-5); }
@media (max-width: 980px) { .ros-layout, .summary-grid { grid-template-columns: 1fr; } }
.findings-section, .small-multiples-section { margin-block: var(--space-5); }
.findings-section > h3, .small-multiples-section > h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.findings-section, .small-multiples-section, .aiact-timeline-section { margin-block: var(--space-5); }
.findings-section > h3, .small-multiples-section > h3, .aiact-timeline-section > h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.findings__items--standalone { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
/* v1.13.1 fix (B7): .report-meta er ikke definert i vendored DS — vi bruker
<section class="report-meta"> som outer-wrapper i flere rendrere. Browser-
defaults for <dl><dd><ul> gir uforutsigbare indents (Forpliktelser-bullet-
liste i renderAiActPyramid, expansion__body-dl i renderRequirements).
Lokal reset gir konsistent venstre-justering uavhengig av nestelse.
MERKNAD: .report-meta-mønsteret fjernes i sesjon 4 (V1.14.0) — erstattes
av <aside class="card"> + <dl class="adr-meta"> per renderer. */
.report-meta { display: block; margin-block: var(--space-4); }
.report-meta > h4 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.report-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.report-meta dt { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.report-meta dd { margin: 0; color: var(--color-text-primary); }
.report-meta > ul { padding-left: var(--space-5); margin: 0; }
.report-meta > ul > li { margin-bottom: var(--space-1); color: var(--color-text-primary); }
/* v1.14.0 sesjon 4: .adr-meta erstatter .report-meta dl-pattern. Brukes i renderAdr og renderAiActPyramid. */
.adr-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.adr-meta dt { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.adr-meta dd { margin: 0; color: var(--color-text-primary); }
/* B-DS-1, B-DS-2, B-DS-3 (v1.14.0 sesjon 2): tre lokal-overrides slettet.
Fixes nå i shared/playground-design-system/ v0.4.0:
@ -219,11 +209,11 @@
seksjoner som kan ha overflow-issues mot foregående grid-elementer
(.small-multiples, .kanban-board, .mat-ladder). Sikrer eksplisitt
block-flow + clear så de ikke leker grid-celler eller flyter.
v1.14.0 sesjon 3: .top-risks fjernet (ligger nå i .card med riktig DS block-flow). */
.suppressed-panel,
v1.14.0 sesjon 3: .top-risks fjernet (ligger nå i .card med riktig DS block-flow).
v1.14.0 sesjon 4: .aiact-timeline + .kanban-board + .report-meta + .suppressed-panel
fjernet (kanban-board → aiact-timeline-section / details.suppressed-panel stacker
naturlig som block-level <section>/<details>; .report-meta-mønsteret er borte). */
.phase-detail,
.aiact-timeline,
.kanban-board + .report-meta,
.mat-ladder + .phase-detail,
.phase-detail + .phase-detail { display: block; clear: both; width: 100%; }
.phase-detail { margin-top: var(--space-5); }
@ -3468,15 +3458,23 @@
'</details>';
}).join('') + '</div>';
// v1.14.0 sesjon 4: <aside class="card"> med <dl class="adr-meta"> for rolle/begrunnelse
// og <ol class="stack-sm"> for obligations. Erstatter tidligere .report-meta-wrapper.
const meta = '<aside class="card">' +
'<h3>Rolle og begrunnelse</h3>' +
'<dl class="adr-meta">' +
'<dt>Rolle</dt><dd>' + escapeHtml(data.role || '—') + '</dd>' +
(data.reasoning ? '<dt>Begrunnelse</dt><dd>' + escapeHtml(data.reasoning).slice(0, 800) + '</dd>' : '') +
'</dl>' +
'</aside>';
const obligationsHtml = (data.obligations || []).length
? '<section class="report-meta"><h4>Forpliktelser</h4><ul>' +
data.obligations.map(function (o) { return '<li>' + escapeHtml(o) + '</li>'; }).join('') +
'</ul></section>'
? '<aside class="card">' +
'<h3>Forpliktelser</h3>' +
'<ol class="stack-sm">' +
data.obligations.map(function (o) { return '<li>' + escapeHtml(o) + '</li>'; }).join('') +
'</ol>' +
'</aside>'
: '';
const meta = '<section class="report-meta"><dl>' +
'<dt>Rolle</dt><dd>' + escapeHtml(data.role || '—') + '</dd>' +
(data.reasoning ? '<dt>Begrunnelse</dt><dd>' + escapeHtml(data.reasoning).slice(0, 800) + '</dd>' : '') +
'</dl></section>';
const body = '<div class="pyramide">' + tiersHtml + '</div>' + tierDescsHtml + meta + obligationsHtml;
slot.innerHTML = renderPageShell({
eyebrow: 'KLASSIFISERING',
@ -3540,9 +3538,9 @@
'</div>';
}).join('') : '';
// v1.13.0 fix (B1): bytt .findings-outer til .report-meta-wrapper
// (DS' .findings er grid 360px+1fr, klemmer expansion-list til 360px).
const body = cardsHtml + (expansionsHtml ? '<section class="report-meta">' + expansionsHtml + '</section>' : '');
// v1.14.0 sesjon 4: stack-sm rundt expansion-list (etter B-DS-2 fix gir
// expansion__title-main/sub display: block, så vertikal stacking er ren).
const body = cardsHtml + (expansionsHtml ? '<div class="stack-sm">' + expansionsHtml + '</div>' : '');
slot.innerHTML = renderPageShell({
eyebrow: 'KRAV',
title: data.title || 'AI Act-krav per risiko og rolle',
@ -3654,8 +3652,10 @@
'</div>' +
'</div>';
}).join('');
// v1.14.0 sesjon 4: timeline-section standalone (uten .report-meta-wrapper).
timelineHtml =
'<section class="report-meta"><h4>Frister</h4>' +
'<section class="aiact-timeline-section">' +
'<h3>Frister</h3>' +
'<div class="aiact-timeline">' +
'<div class="aiact-timeline__track">' +
'<div class="aiact-timeline__progress" style="width: 0%"></div>' +