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".

```html
<!-- 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:**
```javascript
// I state.intake (rundt L?? i init/state):
aiActLevel: '',    // '', 'minimal', 'limited', 'high-risk', 'prohibited'
aiActRole: '',     // '', 'deployer', 'provider', 'deployer-provider'
```

**Ny funksjon:**
```javascript
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:

```javascript
// 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:

```javascript
// 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:

```javascript
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:

```javascript
// 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:

```javascript
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:

```javascript
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:

```javascript
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):

```css
.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.