feat(swift): implementeer medical scribe system prompt (E3.S3)

Epic 3 Story 3 compleet: Volledige medical scribe prompt v1.0 geïmplementeerd. E3.S3 - Medical Scribe System Prompt (3 SP) - buildMedicalScribePrompt() functie (243 regels) - Intent detection voor P1 intents: dagnotitie, zoeken, overdracht - P2 intents: rapportage, agenda - Confidence thresholds (>0.9, 0.7-0.9, 0.5-0.7, <0.5) - JSON action object format met artifact prefill - Context injection (activePatient, shift) - Verduidelijkingsvragen en error handling - Nederlands tone of voice (vriendelijk, professioneel, to-the-point) - 4 voorbeelden: happy path, zoeken, verduidelijking, onduidelijke intent Key Features: - Intent herkenning met triggers en entities - Automatische category detection (medicatie/adl/gedrag/incident/observatie) - Slim gebruik van context (activePatient als default) - Follow-up conversatie support - Error handling met Nederlandse messages Prompt Structuur: - Je rol: medical scribe voor Swift GGZ EPD - Wat je doet: intents herkennen, verduidelijken, actions genereren - Wat je NIET doet: medisch advies, aannames, lange uitleg - Context: activePatient, shift injection - Voorbeelden: 4 concrete user flows Components Updated: - app/api/swift/chat/route.ts: buildMedicalScribePrompt() functie Documentatie: - docs/swift/e0-medical-scribe-system-prompt.md (519 regels) - docs/swift/e0-design-tokens-and-components.md (E0.S1 & E0.S2) - docs/swift/bouwplan-swift-v3.md: E3.S3 ✅ compleet Build Status: - ✅ pnpm build succesvol (geen type errors) - Alleen bekende Supabase realtime warnings Voortgang: 41 SP / 85 SP (48%) - E3.S3 compleet 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-27 14:46:26 +01:00
parent a51acf6214
commit 8efac8483f
4 changed files with 1219 additions and 26 deletions
--- a/docs/swift/e0-design-tokens-and-components.md
+++ b/docs/swift/e0-design-tokens-and-components.md
@@ -0,0 +1,426 @@
+# Epic 0 — Design Tokens & Component Inventory
+
+**Datum:** 27-12-2024
+**Auteur:** AI Assistant
+**Status:** ✅ Completed
+
+---
+
+## E0.S1 — Design Tokens Audit
+
+🎯 **Doel:** Alle kleuren, spacing, typography gedocumenteerd voor v3.0 gebruik.
+
+### Colors (blijven hetzelfde voor v3.0)
+
+#### Base Colors
+```css
+--color-bg: #F8FAFC;              /* App background */
+--color-surface: #FFFFFF;          /* Cards, blocks, surfaces */
+--color-surface-secondary: #F1F5F9; /* Secondary surfaces */
+--color-text: #0F172A;             /* Primary text (slate-900) */
+--color-text-secondary: #475569;   /* Secondary text (slate-600) */
+--color-border: #E2E8F0;           /* Borders (slate-200) */
+```
+
+#### Brand Colors (Teal-first Design System)
+```css
+--color-brand: #0F766E;            /* teal-700 - PRIMARY (5.47:1 WCAG AA) */
+--color-brand-hover: #115E59;      /* teal-800 */
+--color-brand-active: #0D9488;     /* teal-600 */
+--color-brand-subtle: #F0FDFA;     /* teal-50 */
+```
+
+#### AI Feature Colors (Amber)
+```css
+--color-ai: #D97706;               /* amber-600 - PRIMARY AI (3.19:1 WCAG AA large) */
+--color-ai-hover: #B45309;         /* amber-700 */
+--color-ai-subtle: #FFFBEB;        /* amber-50 */
+```
+
+#### Status & Feedback Colors
+```css
+--color-success: #16A34A;          /* green-600 */
+--color-success-subtle: #ECFDF5;   /* green-50 */
+--color-warning: #EAB308;          /* yellow-500 */
+--color-warning-subtle: #FEFCE8;   /* yellow-50 */
+--color-error: #DC2626;            /* red-600 */
+--color-error-subtle: #FEF2F2;     /* red-50 */
+--color-info: #0F766E;             /* teal-700 - Brand consistency */
+--color-info-subtle: #CCFBF1;      /* teal-100 */
+```
+
+#### Form/Input Colors
+```css
+--color-input-bg: #FFFFFF;
+--color-input-text: #0F172A;
+--color-input-placeholder: #94A3B8; /* slate-400 */
+--color-input-border: #CBD5E1;      /* slate-300 */
+--color-input-border-hover: #94A3B8;
+--color-input-focus: #0F766E;       /* teal-700 */
+--color-input-focus-border: #115E59; /* teal-800 */
+--color-input-disabled-bg: #F1F5F9;
+--color-input-disabled-text: #94A3B8;
+```
+
+---
+
+### 🆕 NEW: Chat Message Colors (v3.0 only)
+
+Voor de nieuwe chat interface:
+
+```css
+/* User messages (rechts, amber tint) */
+--chat-user-bg: #FFFBEB;           /* amber-50 */
+--chat-user-border: #FED7AA;       /* amber-200 */
+--chat-user-text: #0F172A;         /* text-primary */
+
+/* Assistant messages (links, slate tint) */
+--chat-assistant-bg: #F1F5F9;      /* slate-100 */
+--chat-assistant-border: #CBD5E1;  /* slate-300 */
+--chat-assistant-text: #0F172A;    /* text-primary */
+
+/* System messages (centered, subtle) */
+--chat-system-text: #64748B;       /* slate-500 */
+
+/* Error messages (links, red tint) */
+--chat-error-bg: #FEF2F2;          /* red-50 */
+--chat-error-border: #FECACA;      /* red-200 */
+--chat-error-text: #991B1B;        /* red-800 */
+```
+
+**Tailwind classes voor chat messages:**
+```tsx
+const MESSAGE_STYLES = {
+  user: {
+    container: 'self-end bg-amber-50 border border-amber-200 text-slate-900',
+    borderRadius: 'rounded-2xl rounded-tr-sm',
+  },
+  assistant: {
+    container: 'self-start bg-slate-100 border border-slate-300 text-slate-900',
+    borderRadius: 'rounded-2xl rounded-tl-sm',
+  },
+  system: {
+    container: 'self-center text-slate-500 text-sm',
+    borderRadius: '',
+  },
+  error: {
+    container: 'self-start bg-red-50 border border-red-200 text-red-800',
+    borderRadius: 'rounded-2xl',
+  },
+};
+```
+
+---
+
+### Verpleegkundig Category Colors (blijven hetzelfde)
+
+Gebruikt in DagnotatieBlock, OverdrachtBlock:
+
+```typescript
+export const CATEGORY_CONFIG = {
+  medicatie: {
+    label: 'Medicatie',
+    icon: 'Pill',
+    bgColor: 'bg-blue-100',      // #DBEAFE
+    textColor: 'text-blue-700',  // #1D4ED8
+  },
+  adl: {
+    label: 'ADL/verzorging',
+    icon: 'Utensils',
+    bgColor: 'bg-green-100',     // #DCFCE7
+    textColor: 'text-green-700', // #15803D
+  },
+  gedrag: {
+    label: 'Gedragsobservatie',
+    icon: 'User',
+    bgColor: 'bg-purple-100',    // #F3E8FF
+    textColor: 'text-purple-700', // #7E22CE
+  },
+  incident: {
+    label: 'Incident',
+    icon: 'AlertTriangle',
+    bgColor: 'bg-red-100',       // #FEE2E2
+    textColor: 'text-red-700',   // #B91C1C
+  },
+  observatie: {
+    label: 'Observatie',
+    icon: 'Eye',
+    bgColor: 'bg-slate-100',     // #F1F5F9
+    textColor: 'text-slate-700', // #334155
+  },
+};
+```
+
+---
+
+### Swift Shift Colors (blijven hetzelfde)
+
+Gebruikt in ContextBar:
+
+```typescript
+const SHIFT_CONFIG = {
+  ochtend: {
+    icon: Sunrise,
+    label: 'Ochtenddienst',
+    color: 'text-amber-600',     // #D97706
+  },
+  middag: {
+    icon: Sun,
+    label: 'Middagdienst',
+    color: 'text-yellow-600',    // #CA8A04
+  },
+  avond: {
+    icon: Sunset,
+    label: 'Avonddienst',
+    color: 'text-orange-600',    // #EA580C
+  },
+  nacht: {
+    icon: Moon,
+    label: 'Nachtdienst',
+    color: 'text-indigo-600',    // #4F46E5
+  },
+};
+```
+
+---
+
+### Shadows (blijven hetzelfde)
+
+```css
+--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+--shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
+--shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);
+```
+
+**Tailwind classes:**
+- `shadow-sm` — Subtle shadows (cards, inputs)
+- `shadow-md` — Medium shadows (dropdowns, popovers)
+- `shadow-lg` — Large shadows (modals, dialogs)
+
+---
+
+### Border Radius (blijven hetzelfde)
+
+```css
+--radius: 0.625rem;  /* 10px - base radius */
+```
+
+**Tailwind classes:**
+- `rounded-sm` — 4px (small elements)
+- `rounded-md` — 8px (buttons, inputs)
+- `rounded-lg` — 10px (cards, blocks)
+- `rounded-2xl` — 16px (chat bubbles, large cards)
+- `rounded-full` — 9999px (avatars, badges)
+
+---
+
+### Typography Scale
+
+```css
+/* Font sizes */
+--text-xs: 0.75rem;    /* 12px */
+--text-sm: 0.875rem;   /* 14px */
+--text-base: 1rem;     /* 16px */
+--text-lg: 1.125rem;   /* 18px */
+--text-xl: 1.25rem;    /* 20px */
+
+/* Line heights */
+--line-height-tight: 1.2;     /* Headings */
+--line-height-relaxed: 1.8;   /* Body text */
+```
+
+**Tailwind classes:**
+- `text-xs` — Metadata, labels
+- `text-sm` — Secondary text, descriptions
+- `text-base` — Body text (default)
+- `text-lg` — Input fields, chat messages
+- `text-xl` — Headings, titles
+
+---
+
+### Spacing Scale (blijven hetzelfde)
+
+```css
+--space-1: 0.25rem;   /* 4px */
+--space-2: 0.5rem;    /* 8px */
+--space-3: 0.75rem;   /* 12px */
+--space-4: 1rem;      /* 16px */
+--space-6: 1.5rem;    /* 24px */
+--space-8: 2rem;      /* 32px */
+--space-12: 3rem;     /* 48px */
+--space-16: 4rem;     /* 64px */
+```
+
+**Tailwind classes:**
+- `p-2` / `m-2` — 8px padding/margin
+- `p-4` / `m-4` — 16px (most common)
+- `p-6` / `m-6` — 24px (cards, blocks)
+- `gap-4` — 16px gap in flex/grid
+
+---
+
+### 🎨 Design Token Usage in v3.0
+
+#### Chat Panel
+- Background: `bg-white` (`--color-surface`)
+- Border right: `border-r border-slate-200` (`--color-border`)
+- Width: `w-[40%]` (desktop), `w-full` (mobile)
+
+#### Chat Messages
+- User: `bg-amber-50 border-amber-200` (NEW)
+- Assistant: `bg-slate-100 border-slate-300` (NEW)
+- Padding: `p-3` (12px) of `p-4` (16px)
+- Border radius: `rounded-2xl` met accent `rounded-tr-sm` (user) of `rounded-tl-sm` (assistant)
+
+#### Artifact Area
+- Background: `bg-slate-50` (`--color-surface-secondary`)
+- Width: `w-[60%]` (desktop), `w-full` (mobile)
+
+#### Artifact Container (bestaande blocks blijven ongewijzigd)
+- Background: `bg-white`
+- Border: `border border-slate-200`
+- Border radius: `rounded-lg`
+- Shadow: `shadow-lg`
+- Padding: `p-6`
+
+---
+
+## E0.S2 — Component Inventory
+
+🎯 **Doel:** Lijst van alle blocks die herbruikbaar zijn vs. nieuwe componenten voor v3.0.
+
+### ✅ Bestaande Components (blijven ongewijzigd)
+
+Deze components werken in v3.0 zonder wijzigingen (alleen de wrapper wijzigt):
+
+| Component | Locatie | Functie | Wijzigingen v3.0 |
+|-----------|---------|---------|------------------|
+| **ContextBar** | `components/swift/command-center/context-bar.tsx` | Dienst, patient selector, user info | ✅ Geen wijzigingen |
+| **OfflineBanner** | `components/swift/command-center/offline-banner.tsx` | Offline detectie en banner | ✅ Geen wijzigingen |
+| **DagnotatieBlock** | `components/swift/blocks/dagnotitie-block.tsx` | Dagnotitie maken | ✅ Geen wijzigingen |
+| **ZoekenBlock** | `components/swift/blocks/zoeken-block.tsx` | Patient zoeken | ✅ Geen wijzigingen |
+| **OverdrachtBlock** | `components/swift/blocks/overdracht-block.tsx` | Dienst overdracht | ⚠️ Uitbreiding: AI-filtering (E5.S1) |
+| **PatientContextCard** | `components/swift/blocks/patient-context-card.tsx` | Patient overzicht | ✅ Geen wijzigingen |
+| **FallbackPicker** | `components/swift/blocks/fallback-picker.tsx` | Intent fallback | ✅ Geen wijzigingen |
+| **BlockContainer** | `components/swift/blocks/block-container.tsx` | Generic wrapper voor blocks | ✅ Geen wijzigingen |
+
+**Total:** 8 components blijven werken zoals ze zijn (behalve OverdrachtBlock met uitbreiding in E5).
+
+---
+
+### 🔄 Components die WIJZIGEN
+
+| Component | Locatie | v2.1 Functie | v3.0 Wijziging |
+|-----------|---------|--------------|----------------|
+| **CommandCenter** | `components/swift/command-center/command-center.tsx` | 4-zone layout (context, canvas, recent, input) | → Split-screen layout (40/60) |
+| **CommandInput** | `components/swift/command-center/command-input.tsx` | Single-line command input | → Multi-line chat input (onderaan chat panel) |
+| **CanvasArea** | `components/swift/command-center/canvas-area.tsx` | Centered block display | → Vervangen door ArtifactArea (rechts, 60%) |
+| **RecentStrip** | `components/swift/command-center/recent-strip.tsx` | Recent actions strip | → Verwijderen of integreren in chat history |
+
+**Total:** 4 components wijzigen.
+
+---
+
+### 🆕 Nieuwe Components voor v3.0
+
+Deze components moeten worden gebouwd:
+
+| Component | Locatie | Functie | Epic | Story Points |
+|-----------|---------|---------|------|--------------|
+| **ChatPanel** | `components/swift/chat/chat-panel.tsx` | Scrollable message list, auto-scroll | E2 | 5 SP |
+| **ChatMessage** | `components/swift/chat/chat-message.tsx` | Message bubble (user/assistant/system/error) | E2 | 3 SP |
+| **ChatInput** | `components/swift/chat/chat-input.tsx` | Multi-line input onderaan chat | E2 | 2 SP |
+| **StreamingIndicator** | `components/swift/chat/streaming-indicator.tsx` | Pulsating dots tijdens AI response | E2 | 1 SP |
+| **ChatActionLink** | `components/swift/chat/chat-action-link.tsx` | Klikbare action links in chat | E3 | 1 SP |
+| **ArtifactArea** | `components/swift/artifacts/artifact-area.tsx` | Right-side area (60%) voor blocks | E1 | 2 SP |
+| **ArtifactContainer** | `components/swift/artifacts/artifact-container.tsx` | Wrapper met tabs (max 3 artifacts) | E4 | 5 SP |
+| **ArtifactTab** | `components/swift/artifacts/artifact-tab.tsx` | Tab component voor artifact switching | E4 | 2 SP |
+| **ArtifactPlaceholder** | `components/swift/artifacts/artifact-placeholder.tsx` | Placeholder: "Artifacts verschijnen hier" | E4 | 1 SP |
+| **LinkedEvidence** | `components/swift/shared/linked-evidence.tsx` | Bronnotitie links met hover preview | E5 | 3 SP |
+
+**Total:** 10 nieuwe components, **25 Story Points**
+
+---
+
+### 📊 Component Architecture (v3.0)
+
+```
+components/swift/
+├── command-center/
+│   ├── command-center.tsx         🔄 WIJZIGT - Split-screen layout
+│   ├── context-bar.tsx            ✅ BLIJFT
+│   └── offline-banner.tsx         ✅ BLIJFT
+│
+├── chat/                           🆕 NIEUW
+│   ├── chat-panel.tsx
+│   ├── chat-message.tsx
+│   ├── chat-input.tsx
+│   ├── streaming-indicator.tsx
+│   └── chat-action-link.tsx
+│
+├── artifacts/                      🆕 NIEUW
+│   ├── artifact-area.tsx
+│   ├── artifact-container.tsx
+│   ├── artifact-tab.tsx
+│   └── artifact-placeholder.tsx
+│
+├── blocks/                         ✅ BLIJVEN
+│   ├── dagnotitie-block.tsx
+│   ├── zoeken-block.tsx
+│   ├── overdracht-block.tsx       ⚠️ + AI-filtering (E5)
+│   ├── patient-context-card.tsx
+│   ├── fallback-picker.tsx
+│   └── block-container.tsx
+│
+└── shared/                         🆕 NIEUW (partial)
+    └── linked-evidence.tsx
+```
+
+---
+
+### 🎯 Component Reuse Strategy
+
+**Maximize reuse:**
+1. ✅ **Alle blocks blijven werken** — Geen refactor nodig
+2. ✅ **Context Bar blijft** — Shift colors, patient selector unchanged
+3. ✅ **Offline Banner blijft** — Error handling unchanged
+4. ✅ **Block styling blijft** — Category colors, sizes, shadows unchanged
+
+**Minimize new code:**
+1. 🆕 **Chat components** — 10 nieuwe components, maar simpel (message bubbles, input)
+2. 🆕 **Artifact wrapper** — 4 components voor tab management
+3. 🔄 **Layout refactor** — Alleen CommandCenter wijzigt naar split-screen
+
+**Total new code estimate:**
+- **New components:** ~600 LOC (10 components × ~60 LOC average)
+- **Modified components:** ~200 LOC (4 components × ~50 LOC changes)
+- **Total:** ~800 LOC (reasonable scope)
+
+---
+
+### ✅ E0.S1 & E0.S2 Complete
+
+**E0.S1 - Design Tokens Audit:** ✅ Compleet
+- Alle kleuren gedocumenteerd
+- Chat message colors toegevoegd (NEW)
+- Spacing, shadows, typography verified
+- Verpleegkundig category colors verified
+- Shift colors verified
+
+**E0.S2 - Component Inventory:** ✅ Compleet
+- 8 bestaande components blijven werken
+- 4 components wijzigen (layout refactor)
+- 10 nieuwe components nodig (~25 SP)
+- Architecture diagram gemaakt
+
+**Next:** E0.S3 - Medical scribe system prompt
+
+---
+
+## Referenties
+
+- `app/globals.css` — Design tokens definitie
+- `tailwind.config.ts` — Tailwind color palette
+- `lib/types/report.ts` — Category config
+- `components/swift/command-center/context-bar.tsx` — Shift config
+- `components/swift/blocks/` — Bestaande blocks