ktg-plugin-marketplace/plugins/ms-ai-architect/docs/playground-ai-act-plan.md

Playground AI Act Integration — Sesjonplan

Kontekst

Playground (playground/azure-ai-playground.html, 1850L) har allerede en ai-act-high checkbox i Step 1 (intake) og Step 2 (filter). Når den er valgt, vises en gul "AI Act høy-risiko" compliance-sjekk i Step 3. Men dette er bare en passiv indikator — ingen risikonivåer, ingen rollevisning, ingen utvidet eksport.

Denne sesjonen utvider Step 3 og Step 5 med AI Act-bevissthet.

Hva som finnes i dag

Sted	Linje	Innhold
Step 1 (intake)	L356	<input type="checkbox" value="ai-act-high">
Step 2 (filter)	L455	<input type="checkbox" data-filter="compliance" value="ai-act-high">
Step 3 (getComplianceStatus())	L1449-1451	Gul status-badge: { label: 'AI Act hoy-risiko', status: 'yellow' }
Step 5 (prompt)	L1639	Compliance-krav inkluderer ai-act-high som tekst
Step 5 (JSON)	L1765	compliance: state.intake.compliance (inkluderer ai-act-high)

Endring 1: Step 1 — Utvid AI Act-valg fra checkbox til dropdown

Nå: Én checkbox (ai-act-high). Etter: Dropdown med 4 risikonivåer + "Ikke vurdert".

<!-- Erstatt L356 -->
<div class="param-input" style="margin-top:0.5rem">
  <label>EU AI Act risikonivå</label>
  <select onchange="updateAiActLevel(this.value)">
    <option value="">Ikke vurdert</option>
    <option value="minimal">Minimal risiko</option>
    <option value="limited">Begrenset risiko</option>
    <option value="high-risk">Høyrisiko (Annex III)</option>
    <option value="prohibited">Forbudt (Art. 5)</option>
  </select>
</div>
<div class="param-input">
  <label>Rolle i AI Act</label>
  <select onchange="state.intake.aiActRole=this.value">
    <option value="">Ikke bestemt</option>
    <option value="deployer">Deployer</option>
    <option value="provider">Provider</option>
    <option value="deployer-provider">Deployer + Provider</option>
  </select>
</div>

State-utvidelse:

// I state.intake (rundt L?? i init/state):
aiActLevel: '',    // '', 'minimal', 'limited', 'high-risk', 'prohibited'
aiActRole: '',     // '', 'deployer', 'provider', 'deployer-provider'

Ny funksjon:

function updateAiActLevel(level) {
  state.intake.aiActLevel = level;
  // Synk legacy compliance-array
  const idx = state.intake.compliance.indexOf('ai-act-high');
  if (level === 'high-risk' || level === 'prohibited') {
    if (idx === -1) state.intake.compliance.push('ai-act-high');
  } else {
    if (idx !== -1) state.intake.compliance.splice(idx, 1);
  }
}

Filter i Step 2 (L455): Behold eksisterende ai-act-high filter — den fungerer allerede.

Endring 2: Step 3 — Utvidet compliance-sjekk

Nå: getComplianceStatus() (L1410-1454) viser gul badge. Etter: AI Act-sjekken blir dynamisk basert på nivå og rolle.

Erstatt L1448-1451 med:

// AI Act
const aiLevel = state.intake.aiActLevel;
if (aiLevel === 'high-risk') {
  checks.push({ label: 'AI Act: Høyrisiko (Annex III)', status: 'red' });
  checks.push({ label: 'FRIA påkrevd (Art. 27)', status: 'red' });
  if (!hasObservability) {
    checks.push({ label: 'Logging min. 6 mnd påkrevd (Art. 12/26)', status: 'red' });
  }
} else if (aiLevel === 'limited') {
  checks.push({ label: 'AI Act: Begrenset risiko', status: 'yellow' });
  checks.push({ label: 'Transparensplikt (Art. 50)', status: 'yellow' });
} else if (aiLevel === 'minimal') {
  checks.push({ label: 'AI Act: Minimal risiko', status: 'green' });
} else if (aiLevel === 'prohibited') {
  checks.push({ label: 'AI Act: FORBUDT — kan ikke brukes', status: 'red' });
} else if (state.intake.compliance.includes('ai-act-high')) {
  // Legacy fallback
  checks.push({ label: 'AI Act høy-risiko', status: 'yellow' });
}

Endring 3: Step 3 — AI Act anbefalingspanel

Etter compliance-listen i renderConfigure() (L1396-1404), legg til et AI Act-panel som vises når nivå er satt:

// Etter complianceHtml i renderConfigure()
let aiActHtml = '';
if (state.intake.aiActLevel) {
  const level = state.intake.aiActLevel;
  const role = state.intake.aiActRole || 'deployer';
  const cmds = [];

  if (level === 'high-risk') {
    cmds.push({ cmd: '/architect:classify', desc: 'Bekreft klassifisering' });
    cmds.push({ cmd: '/architect:frimpact', desc: 'FRIA (obligatorisk offentlig sektor)' });
    cmds.push({ cmd: '/architect:dpia', desc: 'Personvernkonsekvensvurdering' });
    cmds.push({ cmd: '/architect:requirements', desc: 'Konkrete Art. 9-27 krav' });
  } else if (level === 'limited') {
    cmds.push({ cmd: '/architect:classify', desc: 'Bekreft klassifisering' });
    cmds.push({ cmd: '/architect:transparency', desc: 'Generer Art. 50 transparensnotis' });
  } else if (level === 'minimal') {
    cmds.push({ cmd: '/architect:classify', desc: 'Dokumenter klassifisering' });
  }

  aiActHtml = `
    <div class="param-group" style="border-left:3px solid ${level === 'high-risk' || level === 'prohibited' ? 'var(--red)' : level === 'limited' ? 'var(--accent4)' : 'var(--accent2)'}; padding-left:0.75rem">
      <h4>EU AI Act — Neste steg</h4>
      ${cmds.map(c => `<div style="font-size:0.82rem;margin:0.3rem 0"><code>${c.cmd}</code> — ${c.desc}</div>`).join('')}
      ${level === 'high-risk' ? '<div style="font-size:0.78rem;color:var(--text-dim);margin-top:0.5rem">Frist: 2. august 2026 (GPAI + Annex III)</div>' : ''}
    </div>`;
}

Inject aiActHtml etter compliance-listen i HTML-template.

Endring 4: Step 5 — AI Act i alle eksportformater

4a. Prompt (L1615-1654)

Etter compliance-krav-linjen (L1639), legg til:

if (state.intake.aiActLevel) {
  prompt += `EU AI Act risikonivå: ${state.intake.aiActLevel}.\n`;
  if (state.intake.aiActRole) prompt += `Rolle: ${state.intake.aiActRole}.\n`;
  if (state.intake.aiActLevel === 'high-risk') {
    prompt += 'NB: Høyrisiko — FRIA (Art. 27) og samsvarsvurdering (Art. 43) kreves.\n';
  }
}

4b. Pipeline (L1657-1687)

I generatePipelineTab(), legg til AI Act-commands etter standard pipeline:

// Etter pipeline.commands mapping
if (state.intake.aiActLevel === 'high-risk') {
  cmds += `
    <div style="margin:1rem 0 0.5rem;font-size:0.82rem;color:var(--text-dim);font-weight:600">EU AI Act compliance</div>
  `;
  const aiCmds = [
    { cmd: 'classify', desc: 'Bekreft AI Act-klassifisering' },
    { cmd: 'frimpact', desc: 'FRIA — obligatorisk for offentlig sektor' },
    { cmd: 'requirements', desc: 'Konkrete deployer/provider-krav' },
    { cmd: 'conformity', desc: 'Samsvarsvurdering (Annex IV)' }
  ];
  cmds += aiCmds.map((c, i) => `
    <div class="cmd-row">
      <span class="cmd-num">+${i + 1}</span>
      <div class="cmd-info">
        <div class="cmd-code">/architect:${c.cmd}</div>
        <div class="cmd-desc">${c.desc}</div>
      </div>
      <button class="cmd-copy" onclick="copyToClipboard('/architect:${c.cmd}')">Kopier</button>
    </div>
  `).join('');
}

4c. Brief Markdown (L1701-1737)

Etter dataresidens-linjen (L1716), legg til:

if (state.intake.aiActLevel) {
  md += `**EU AI Act:** ${state.intake.aiActLevel === 'high-risk' ? 'Høyrisiko (Annex III)' : state.intake.aiActLevel === 'limited' ? 'Begrenset risiko' : state.intake.aiActLevel === 'minimal' ? 'Minimal risiko' : 'Forbudt'}\n`;
  if (state.intake.aiActRole) md += `**Rolle:** ${state.intake.aiActRole}\n`;
}

Og etter prompt-seksjonen (L1734), legg til en AI Act-seksjon:

if (state.intake.aiActLevel === 'high-risk') {
  md += `\n## EU AI Act — Compliance-krav\n\n`;
  md += `- [ ] FRIA gjennomført (Art. 27) — /architect:frimpact\n`;
  md += `- [ ] Samsvarsvurdering (Art. 43) — /architect:conformity\n`;
  md += `- [ ] Transparensnotis (Art. 50) — /architect:transparency\n`;
  md += `- [ ] Logging min. 6 mnd (Art. 12/26)\n`;
  md += `- [ ] Menneskelig tilsyn formalisert (Art. 14)\n`;
  md += `\n**Frist:** 2. august 2026 (GPAI + Annex III høyrisiko)\n`;
}

4d. JSON Record (L1752-1803)

Legg til aiAct-objekt i returverdien:

aiAct: state.intake.aiActLevel ? {
  riskLevel: state.intake.aiActLevel,
  role: state.intake.aiActRole || null,
  requiresFRIA: state.intake.aiActLevel === 'high-risk',
  requiresConformity: state.intake.aiActLevel === 'high-risk',
  deadline: state.intake.aiActLevel === 'high-risk' ? '2026-08-02' : null
} : null,

Endring 5: CSS for AI Act-fargekoding

Legg til i <style>-seksjonen (rundt L200):

.compliance-item .status-red { color: #ef4444; }
.ai-act-panel { border-left: 3px solid var(--accent4); padding-left: 0.75rem; margin-top: 0.75rem; }

Rekkefølge

1. State-utvidelse (aiActLevel, aiActRole)
2. Step 1 UI (erstatt checkbox med dropdowns)
3. updateAiActLevel() funksjon
4. getComplianceStatus() oppdatering
5. renderConfigure() — AI Act-panel
6. Step 5: alle 4 eksportfunksjoner
7. CSS
8. Test i nettleser (åpne HTML, velg høyrisiko, gå gjennom alle steg)

Verifisering

• Velg "Høyrisiko" i Step 1 → compliance-sjekk viser rød badge + FRIA
• Velg "Minimal" → grønn badge
• Step 3 viser "Neste steg"-panel med relevante commands
• Step 5 Prompt inkluderer AI Act-nivå og rolle
• Step 5 Pipeline viser 4 ekstra AI Act-commands for høyrisiko
• Step 5 Brief har compliance-sjekkliste for høyrisiko
• Step 5 JSON har aiAct-objekt
• Legacy ai-act-high checkbox i Step 2 filter fungerer fortsatt
• "Ikke vurdert" → ingen AI Act-info i eksport
• Ingen regresjoner i øvrig funksjonalitet

Estimat

~50 netto nye linjer JS, ~10 HTML, ~5 CSS. Moderat risiko — endrer eksisterende funksjoner (getComplianceStatus, renderConfigure, 4 eksportfunksjoner). Én commit.