feat(cortex): implement activePatient fallback in various components

- Updated DagnotatieBlock to use activePatient for prefill if no patientId is provided. - Enhanced PatientDashboardBlock to fallback to activePatient for patientId and name. - Adjusted usePatientSelection to handle pending actions and re-route after patient selection. - Refined chat components to manage nudge messages and integrate them into the chat flow. - Improved UI elements for better patient selection experience. This update enhances user experience by ensuring that the active patient context is utilized across multiple components, streamlining workflows and reducing manual input.
2026-01-03 22:18:30 +01:00
parent 7040241f7d
commit 05836c5c6a
18 changed files with 472 additions and 93 deletions
--- a/app/login/components/login-form.tsx
+++ b/app/login/components/login-form.tsx
@@ -169,7 +169,7 @@ export function LoginForm() {
              <Zap className="w-5 h-5" />
              <div className="text-left">
                <div className="font-medium text-sm">Cortex</div>
-                <div className="text-xs opacity-70">Spraak & AI</div>
+                <div className="text-xs opacity-70">Je EPD dat meedenkt</div>
              </div>
            </button>
          </div>
--- a/components/cortex/artifacts/artifact-container.tsx
+++ b/components/cortex/artifacts/artifact-container.tsx
@@ -284,7 +284,7 @@ export function ArtifactContainer({
      </div>

      {artifacts.length > 1 && (
-        <div className="hidden lg:flex bg-white border-b border-slate-200">
+        <div className="hidden lg:flex bg-white border-b border-slate-200 justify-center">
          {artifacts.map((artifact) => (
            <ArtifactTab
              key={artifact.id}
@@ -298,9 +298,9 @@ export function ArtifactContainer({
      )}

      {/* Active artifact content */}
-      <div className="flex-1 flex items-center justify-center p-6 overflow-y-auto">
+      <div className="flex-1 flex items-center justify-center p-6 overflow-y-auto bg-slate-50">
        {activeArtifact ? (
-          <div key={activeArtifact.id} className="artifact-enter w-full">
+          <div key={activeArtifact.id} className="artifact-enter w-full flex justify-center">
            {renderArtifactBlock(activeArtifact, onCloseArtifact)}
          </div>
        ) : (
--- a/components/cortex/blocks/dagnotitie-block.tsx
+++ b/components/cortex/blocks/dagnotitie-block.tsx
@@ -26,6 +26,7 @@ import { Loader2, Search, User, RefreshCw } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { safeFetch, getErrorInfo, retryFetch } from '@/lib/cortex/error-handler';
 import { evaluateNudge } from '@/lib/cortex/nudge';
+import { formatPatientName as formatPatientNameFromDb } from '@/lib/fhir/patient-mapper';

 interface DagnotitieBlockProps {
  prefill?: BlockPrefillData;
@@ -40,20 +41,25 @@ interface Patient {

 export function DagnotatieBlock({ prefill }: DagnotitieBlockProps) {
  const config = BLOCK_CONFIGS.dagnotitie;
-  const { closeBlock, addSuggestion } = useCortexStore();
+  const { closeBlock, addChatMessage, activePatient } = useCortexStore();
  const { toast } = useToast();

-  // Form state
-  const [patientId, setPatientId] = useState<string>(prefill?.patientId || '');
-  const [patientName, setPatientName] = useState<string>(prefill?.patientName || '');
+  // E3.S1: Determine initial patient from prefill OR activePatient
+  const initialPatientId = prefill?.patientId || activePatient?.id || '';
+  const initialPatientName = prefill?.patientName || (activePatient ? formatPatientNameFromDb(activePatient) : '');
+  const hasPrefillPatient = Boolean(prefill?.patientId);
+
+  // Form state - E3.S1: Use activePatient as fallback
+  const [patientId, setPatientId] = useState<string>(initialPatientId);
+  const [patientName, setPatientName] = useState<string>(initialPatientName);
  const [category, setCategory] = useState<VerpleegkundigCategory>(
    prefill?.category || 'observatie'
  );
  const [content, setContent] = useState<string>(prefill?.content || '');
  const [includeInHandover, setIncludeInHandover] = useState<boolean>(false);

-  // Patient search state
-  const [searchQuery, setSearchQuery] = useState<string>(prefill?.patientName || '');
+  // Patient search state - E3.S1: Use activePatient as fallback
+  const [searchQuery, setSearchQuery] = useState<string>(initialPatientName);
  const [patients, setPatients] = useState<Patient[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [showPatientDropdown, setShowPatientDropdown] = useState(false);
@@ -61,18 +67,33 @@ export function DagnotatieBlock({ prefill }: DagnotitieBlockProps) {
  const searchTimeoutRef = useRef<NodeJS.Timeout>();
  const dropdownRef = useRef<HTMLDivElement>(null);

-  // Prefill patient if patientId is provided
+  // E3.S1: Prefill patient from prefill OR activePatient
  useEffect(() => {
+    // Priority 1: Explicit prefill
    if (prefill?.patientId && prefill?.patientName) {
      setPatientId(prefill.patientId);
      setPatientName(prefill.patientName);
+      setSearchQuery(prefill.patientName);
      setSelectedPatient({
        id: prefill.patientId,
        name_family: prefill.patientName.split(' ').pop(),
        name_given: prefill.patientName.split(' ').slice(0, -1),
      });
    }
-  }, [prefill]);
+    // Priority 2: activePatient (only if no prefill patient)
+    else if (!hasPrefillPatient && activePatient) {
+      const name = formatPatientNameFromDb(activePatient);
+      setPatientId(activePatient.id);
+      setPatientName(name);
+      setSearchQuery(name);
+      setSelectedPatient({
+        id: activePatient.id,
+        name_family: activePatient.name_family || undefined,
+        name_given: activePatient.name_given || [],
+        identifier_bsn: activePatient.identifier_bsn || undefined,
+      });
+    }
+  }, [prefill, activePatient, hasPrefillPatient]);

  // Patient search with debouncing
  const searchPatients = useCallback(async (query: string) => {
@@ -223,6 +244,7 @@ export function DagnotatieBlock({ prefill }: DagnotitieBlockProps) {
      });

      // E4: Evaluate nudge after successful save
+      // Now adds nudges as chat messages instead of toast
      const nudges = evaluateNudge({
        intent: 'dagnotitie',
        actionId: data.id || `dagnotitie-${Date.now()}`,
@@ -233,10 +255,14 @@ export function DagnotatieBlock({ prefill }: DagnotitieBlockProps) {
        content: content.trim(),
      });

-      // Add nudge suggestions to store
+      // Add nudge suggestions as chat messages
      nudges.forEach((nudge) => {
-        addSuggestion(nudge);
-        console.log('[DagnotatieBlock] Nudge triggered:', nudge.suggestion.message);
+        addChatMessage({
+          type: 'nudge',
+          content: nudge.suggestion.message,
+          nudge: nudge,
+        });
+        console.log('[DagnotatieBlock] Nudge chat message:', nudge.suggestion.message);
      });

      // Close block after short delay
@@ -259,7 +285,7 @@ export function DagnotatieBlock({ prefill }: DagnotitieBlockProps) {
    } finally {
      setIsSubmitting(false);
    }
-  }, [patientId, content, category, includeInHandover, patientName, toast, closeBlock, addSuggestion]);
+  }, [patientId, content, category, includeInHandover, patientName, toast, closeBlock, addChatMessage]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
--- a/components/cortex/blocks/patient-dashboard-block.tsx
+++ b/components/cortex/blocks/patient-dashboard-block.tsx
@@ -23,9 +23,11 @@ import { safeFetch, getErrorInfo } from '@/lib/cortex/error-handler';
 import { useToast } from '@/hooks/use-toast';
 import { BLOCK_CONFIGS } from '@/lib/cortex/types';
 import type { BlockPrefillData } from '@/stores/cortex-store';
+import { useCortexStore } from '@/stores/cortex-store';
 import type { FHIRPatient } from '@/lib/fhir';
 import type { Intake } from '@/lib/types/intake';
 import { cn } from '@/lib/utils';
+import { formatPatientName } from '@/lib/fhir/patient-mapper';

 interface PatientDashboardBlockProps {
  prefill?: BlockPrefillData;
@@ -103,9 +105,13 @@ function getPatientBsn(patient?: FHIRPatient): string | null {

 export function PatientDashboardBlock({ prefill }: PatientDashboardBlockProps) {
  const config = BLOCK_CONFIGS['patient-dashboard'];
-  const patientId = prefill?.patientId;
+  const { activePatient } = useCortexStore();
  const { toast } = useToast();

+  // E3.S2: Use activePatient as fallback for patientId
+  const patientId = prefill?.patientId || activePatient?.id;
+  const patientNameFromPrefill = prefill?.patientName || (activePatient ? formatPatientName(activePatient) : undefined);
+
  const [data, setData] = useState<PatientDashboardResponse | null>(null);
  const [isLoading, setIsLoading] = useState(Boolean(patientId));
  const [error, setError] = useState<string | null>(null);
@@ -178,8 +184,9 @@ export function PatientDashboardBlock({ prefill }: PatientDashboardBlockProps) {
    ? data?.carePlan?.activities.length
    : 0;

-  const title = prefill?.patientName
-    ? `${config.title} - ${prefill.patientName}`
+  // E3.S2: Use patientNameFromPrefill for title
+  const title = patientNameFromPrefill
+    ? `${config.title} - ${patientNameFromPrefill}`
    : config.title;

  return (
--- a/components/cortex/chat/chat-empty-state.tsx
+++ b/components/cortex/chat/chat-empty-state.tsx
@@ -102,7 +102,7 @@ export function ChatEmptyState({ onSelectAction, activePatientName }: ChatEmptyS
          Welkom bij Cortex Assistent
        </h2>
        <p className="text-sm text-slate-500 max-w-md">
-          Typ of spreek wat je wilt doen. Klik op een kaart om snel te starten.
+          Jij zorgt. Ik regel de rest.
        </p>
      </motion.div>

--- a/components/cortex/chat/chat-message.tsx
+++ b/components/cortex/chat/chat-message.tsx
@@ -47,6 +47,12 @@ interface ChatMessageProps {
 }

 export function ChatMessage({ message, showTimestamp = false }: ChatMessageProps) {
+  // Nudge messages are handled by NudgeChatMessage component
+  // This shouldn't be called for nudge type, but guard just in case
+  if (message.type === 'nudge') {
+    return null;
+  }
+
  const styles = MESSAGE_STYLES[message.type];

  // Don't show border for system messages
--- a/components/cortex/chat/chat-panel.tsx
+++ b/components/cortex/chat/chat-panel.tsx
@@ -14,13 +14,14 @@ import { useRef, useEffect, useState, useCallback } from 'react';
 import { ArrowDown } from 'lucide-react';
 import { AnimatePresence } from 'framer-motion';
 import { ChatMessage } from './chat-message';
+import { NudgeChatMessage } from './nudge-chat-message';
 import { ChatInput, ChatInputHandle } from './chat-input';
 import { ChatSuggestions } from './chat-suggestions';
 import { ChatEmptyState } from './chat-empty-state';
 import { ActionChainCard } from './action-chain-card';
 import { ClarificationCard } from './clarification-card';
 import { ProcessingIndicator } from './processing-indicator';
-import { useCortexStore } from '@/stores/cortex-store';
+import { useCortexStore, type ChatMessage as ChatMessageType } from '@/stores/cortex-store';
 import { sendChatMessage } from '@/lib/cortex/chat-api';
 import { parseActionFromResponse, shouldOpenArtifact, routeIntentToArtifact, getDefaultConfirmationMessage } from '@/lib/cortex/action-parser';
 import { evaluateNudge } from '@/lib/cortex/nudge';
@@ -48,9 +49,12 @@ export function ChatPanel() {
  const setPendingClarification = useCortexStore((s) => s.setPendingClarification);
  const resolveClarification = useCortexStore((s) => s.resolveClarification);

-  // Artifact & Nudge state (E5.S2)
+  // Artifact state (E5.S2)
  const openArtifact = useCortexStore((s) => s.openArtifact);
-  const addSuggestion = useCortexStore((s) => s.addSuggestion);
+
+  // Nudge state (chat-based nudges)
+  const acceptSuggestion = useCortexStore((s) => s.acceptSuggestion);
+  const dismissSuggestion = useCortexStore((s) => s.dismissSuggestion);

  // Refs for scrolling
  const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -165,6 +169,7 @@ export function ChatPanel() {
    updateActionStatus(actionId, 'success');

    // E5.S2: Trigger nudge evaluation after successful action
+    // Now adds nudges as chat messages instead of toast
    if (isFeatureEnabled('CORTEX_NUDGE')) {
      const suggestions = evaluateNudge({
        intent: action.intent,
@@ -174,11 +179,18 @@ export function ChatPanel() {
      });

      if (suggestions.length > 0) {
-        console.log('[ChatPanel] Nudge suggestions:', suggestions.length);
-        suggestions.forEach((suggestion) => addSuggestion(suggestion));
+        console.log('[ChatPanel] Nudge suggestions (chat-based):', suggestions.length);
+        suggestions.forEach((suggestion) => {
+          // Add as chat message with nudge type
+          addChatMessage({
+            type: 'nudge',
+            content: suggestion.suggestion.message,
+            nudge: suggestion,
+          });
+        });
      }
    }
-  }, [activeChain, updateActionStatus, openArtifact, addSuggestion]);
+  }, [activeChain, updateActionStatus, openArtifact, addChatMessage]);

  const handleSkipAction = useCallback((actionId: string) => {
    console.log('[ChatPanel] Skipping action:', actionId);
@@ -210,6 +222,35 @@ export function ChatPanel() {
    setPendingClarification(null);
  }, [setPendingClarification]);

+  // Nudge handlers (chat-based nudges)
+  const handleAcceptNudge = useCallback((suggestionId: string, suggestion: ChatMessageType['nudge']) => {
+    console.log('[ChatPanel] Nudge accepted:', suggestionId);
+    acceptSuggestion(suggestionId);
+
+    if (suggestion) {
+      // Route to artifact with prefilled entities
+      const artifact = routeIntentToArtifact(
+        suggestion.suggestion.intent,
+        suggestion.suggestion.entities,
+        0.9 // High confidence for nudge-initiated actions
+      );
+
+      if (artifact) {
+        console.log('[ChatPanel] Opening artifact from nudge:', artifact.type);
+        openArtifact({
+          type: artifact.type,
+          prefill: artifact.prefill,
+          title: artifact.title,
+        });
+      }
+    }
+  }, [acceptSuggestion, openArtifact]);
+
+  const handleDismissNudge = useCallback((suggestionId: string) => {
+    console.log('[ChatPanel] Nudge dismissed:', suggestionId);
+    dismissSuggestion(suggestionId);
+  }, [dismissSuggestion]);
+
  // E5.S2: Sequential chain execution - auto-advance to next action
  useEffect(() => {
    if (!activeChain) return;
@@ -258,7 +299,16 @@ export function ChatPanel() {
        {hasMessages ? (
          <div className="flex flex-col space-y-3">
            {chatMessages.map((message) => (
-              <ChatMessage key={message.id} message={message} showTimestamp />
+              message.type === 'nudge' && message.nudge ? (
+                <NudgeChatMessage
+                  key={message.id}
+                  suggestion={message.nudge}
+                  onAccept={(id) => handleAcceptNudge(id, message.nudge)}
+                  onDismiss={handleDismissNudge}
+                />
+              ) : (
+                <ChatMessage key={message.id} message={message} showTimestamp />
+              )
            ))}

            {/* V2: Processing indicator while AI is thinking */}
@@ -366,9 +416,18 @@ export function ChatPanel() {
              shift,
            },
            (chunk) => {
-              // On each chunk, append to accumulated content and update last message
+              // On each chunk, append to accumulated content
              accumulatedContent += chunk;
-              updateLastMessage(accumulatedContent);
+
+              // Filter out JSON blocks during streaming - users don't need to see the raw JSON
+              // Show "Verwerken..." when JSON is being generated but no readable text yet
+              const displayContent = accumulatedContent
+                .replace(/```json[\s\S]*?```/g, '') // Remove complete JSON blocks
+                .replace(/```json[\s\S]*$/g, '')    // Remove incomplete JSON block at end
+                .trim();
+
+              // If we have displayable content, show it; otherwise show processing message
+              updateLastMessage(displayContent || 'Verwerken...');
            },
            () => {
              // On done - parse action from complete response
--- a/components/cortex/chat/nudge-chat-message.tsx
+++ b/components/cortex/chat/nudge-chat-message.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+/**
+ * NudgeChatMessage Component
+ *
+ * Displays a protocol-based nudge suggestion in the chat.
+ * Shows protocol metadata, clinical rationale, and accept/dismiss buttons.
+ *
+ * Epic: E4 (Nudge)
+ */
+
+import { useEffect, useState, useCallback } from 'react';
+import { Lightbulb, BookOpen, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { NudgeSuggestion } from '@/lib/cortex/types';
+
+interface NudgeChatMessageProps {
+  suggestion: NudgeSuggestion;
+  onAccept: (suggestionId: string) => void;
+  onDismiss: (suggestionId: string) => void;
+}
+
+/**
+ * Priority-based styling for the nudge message
+ */
+const PRIORITY_STYLES = {
+  low: {
+    container: 'bg-slate-50 border-slate-200',
+    badge: 'bg-slate-100 text-slate-700',
+    text: 'text-slate-700',
+    icon: 'text-slate-500',
+    progress: 'bg-slate-300',
+  },
+  medium: {
+    container: 'bg-amber-50 border-amber-200',
+    badge: 'bg-amber-100 text-amber-800',
+    text: 'text-amber-900',
+    icon: 'text-amber-600',
+    progress: 'bg-amber-400',
+  },
+  high: {
+    container: 'bg-red-50 border-red-200',
+    badge: 'bg-red-100 text-red-800',
+    text: 'text-red-900',
+    icon: 'text-red-600',
+    progress: 'bg-red-400',
+  },
+};
+
+/**
+ * Get button text based on suggested intent
+ */
+function getAcceptButtonText(intent: string): string {
+  switch (intent) {
+    case 'create_appointment':
+      return 'Ja, inplannen';
+    case 'dagnotitie':
+      return 'Ja, notitie maken';
+    case 'cancel_appointment':
+      return 'Ja, annuleren';
+    default:
+      return 'Ja, uitvoeren';
+  }
+}
+
+export function NudgeChatMessage({
+  suggestion,
+  onAccept,
+  onDismiss,
+}: NudgeChatMessageProps) {
+  const [progress, setProgress] = useState(100);
+  const styles = PRIORITY_STYLES[suggestion.priority];
+  const protocol = suggestion.suggestion.protocol;
+
+  // Memoize dismiss handler
+  const handleDismiss = useCallback(() => {
+    onDismiss(suggestion.id);
+  }, [onDismiss, suggestion.id]);
+
+  // Countdown effect
+  useEffect(() => {
+    if (!suggestion.expiresAt) return;
+
+    const expiresAt = new Date(suggestion.expiresAt).getTime();
+    const createdAt = new Date(suggestion.createdAt).getTime();
+    const total = expiresAt - createdAt;
+
+    const interval = setInterval(() => {
+      const now = Date.now();
+      const remaining = expiresAt - now;
+
+      if (remaining <= 0) {
+        handleDismiss();
+        clearInterval(interval);
+        return;
+      }
+
+      setProgress((remaining / total) * 100);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [suggestion.expiresAt, suggestion.createdAt, handleDismiss]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10, scale: 0.98 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -5, scale: 0.98 }}
+      transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+      className={cn(
+        'self-start max-w-[90%] rounded-2xl rounded-tl-sm border p-4',
+        styles.container
+      )}
+    >
+      {/* Header with icon and dismiss */}
+      <div className="flex items-start justify-between gap-3 mb-3">
+        <div className="flex items-center gap-2">
+          <Lightbulb className={cn('w-5 h-5', styles.icon)} />
+          <span className={cn('text-sm font-medium', styles.text)}>
+            Protocol Suggestie
+          </span>
+        </div>
+        <button
+          onClick={handleDismiss}
+          className={cn(
+            'p-1 rounded-md hover:bg-black/5 transition-colors',
+            styles.text
+          )}
+          aria-label="Sluiten"
+        >
+          <X className="w-4 h-4 opacity-50 hover:opacity-100" />
+        </button>
+      </div>
+
+      {/* Protocol badge */}
+      {protocol && (
+        <div className="mb-3">
+          <div
+            className={cn(
+              'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium',
+              styles.badge
+            )}
+          >
+            <BookOpen className="w-3.5 h-3.5" />
+            <span>{protocol.name}</span>
+            {protocol.reference && (
+              <span className="opacity-75">{protocol.reference}</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Suggestion message */}
+      <p className={cn('font-medium mb-2', styles.text)}>
+        {suggestion.suggestion.message}
+      </p>
+
+      {/* Clinical rationale */}
+      {protocol?.rationale && (
+        <p className={cn('text-sm opacity-80 mb-4', styles.text)}>
+          {protocol.rationale}
+        </p>
+      )}
+
+      {/* Action buttons */}
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          onClick={() => onAccept(suggestion.id)}
+          className="bg-teal-600 hover:bg-teal-700 text-white"
+        >
+          {getAcceptButtonText(suggestion.suggestion.intent)}
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={handleDismiss}
+          className={styles.text}
+        >
+          Later
+        </Button>
+      </div>
+
+      {/* Countdown progress bar */}
+      <div className="mt-3 h-1 bg-white/50 rounded-full overflow-hidden">
+        <motion.div
+          className={cn('h-full rounded-full', styles.progress)}
+          initial={{ width: '100%' }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 1, ease: 'linear' }}
+        />
+      </div>
+    </motion.div>
+  );
+}
--- a/components/cortex/command-center/command-center.tsx
+++ b/components/cortex/command-center/command-center.tsx
@@ -20,6 +20,8 @@ import { useEffect, useCallback, useRef } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import { useCortexStore } from '@/stores/cortex-store';
 import { cn } from '@/lib/utils';
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { useMediaQuery } from '@/hooks/use-media-query';
 import { ContextBar } from './context-bar';
 import { OfflineBanner } from './offline-banner';
 import { NudgeToast } from './nudge-toast';
@@ -143,20 +145,42 @@ export function CommandCenter() {

      {/* Split-screen container - flex-1 */}
      <div className="flex-1 flex overflow-hidden relative">
-        {/* Chat Panel - 40% (desktop), 100% (mobile) */}
-        <div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col h-full">
-          <ChatPanel />
-        </div>
+        {/* Mobile View / Desktop Resizable View Toggle */}
+        <PanelGroup direction="horizontal" className="flex-1 hidden lg:flex">
+          {/* Chat Panel Panel */}
+          <Panel defaultSize={40} minSize={20} className="flex flex-col h-full border-r border-slate-200">
+            <ChatPanel />
+          </Panel>

-        {/* Artifact Area - 60% (desktop), overlay on mobile */}
-        <div
-          className={cn(
-            "lg:flex lg:w-[60%] flex-col bg-white transition-transform duration-300 ease-in-out lg:transform-none lg:static absolute inset-0 z-20",
-            // On mobile: hidden by default, visible (slide in) when openArtifacts > 0
-            openArtifacts.length > 0 ? "translate-x-0" : "translate-x-full lg:translate-x-0"
-          )}
-        >
-          <ArtifactArea />
+          {/* Resize Handle - Premium feel */}
+          <PanelResizeHandle className="w-1.5 hover:w-2 group relative transition-all duration-300 ease-in-out bg-slate-50 hover:bg-slate-100 flex items-center justify-center">
+            {/* Visual indicator (line) */}
+            <div className="h-12 w-1 rounded-full bg-slate-200 group-hover:bg-amber-400 group-active:bg-amber-500 transition-colors" />
+
+            {/* Interaction Area (Invisible width boost) */}
+            <div className="absolute inset-y-0 -left-1 -right-1 cursor-col-resize" />
+          </PanelResizeHandle>
+
+          {/* Artifact Area Panel */}
+          <Panel defaultSize={60} minSize={30} className="flex flex-col bg-white">
+            <ArtifactArea />
+          </Panel>
+        </PanelGroup>
+
+        {/* Mobile-only Layout (Legacy overlay behavior) */}
+        <div className="lg:hidden flex flex-1 overflow-hidden relative">
+          <div className="w-full flex flex-col h-full">
+            <ChatPanel />
+          </div>
+
+          <div
+            className={cn(
+              "flex flex-col bg-white transition-transform duration-300 ease-in-out absolute inset-0 z-20",
+              openArtifacts.length > 0 ? "translate-x-0" : "translate-x-full"
+            )}
+          >
+            <ArtifactArea />
+          </div>
        </div>
      </div>

--- a/components/cortex/patient-sidebar/patient-sidebar.tsx
+++ b/components/cortex/patient-sidebar/patient-sidebar.tsx
@@ -12,8 +12,9 @@
 import { useEffect, useRef } from 'react';
 import { X, Search, Clock, Users } from 'lucide-react';
 import { useCortexStore } from '@/stores/cortex-store';
-import { usePatientSearch, type PatientSearchResult } from '@/lib/cortex/hooks/use-patient-search';
+import { usePatientSearch } from '@/lib/cortex/hooks/use-patient-search';
 import { usePatientSelection } from '@/lib/cortex/hooks/use-patient-selection';
+import { dbPatientToSearchResult } from '@/lib/fhir/patient-mapper';
 import {
  PatientListItem,
  PatientListEmpty,
@@ -78,16 +79,6 @@ export function PatientSidebar() {
  const showResults = query.length >= 2;
  const showRecent = !showResults && recentPatients.length > 0;

-  // Map DB patient to search result format for PatientListItem
-  const mapPatientToSearchResult = (patient: typeof recentPatients[0]): PatientSearchResult => ({
-    id: patient.id,
-    name: `${patient.name_given?.[0] || ''} ${patient.name_family || ''}`.trim() || 'Onbekend',
-    birthDate: patient.birth_date || '',
-    identifier_bsn: patient.identifier_bsn || undefined,
-    identifier_client_number: patient.identifier_client_number || undefined,
-    matchScore: 1,
-  });
-
  const handleBackdropClick = () => {
    setPatientSidebarOpen(false);
    clearResults();
@@ -177,7 +168,7 @@ export function PatientSidebar() {
              </h3>
              <div className="space-y-1.5">
                {recentPatients.map((patient) => {
-                  const searchResult = mapPatientToSearchResult(patient);
+                  const searchResult = dbPatientToSearchResult(patient);
                  return (
                    <PatientListItem
                      key={patient.id}
--- a/components/cortex/shared/patient-list-item.tsx
+++ b/components/cortex/shared/patient-list-item.tsx
@@ -12,7 +12,7 @@
 import { Loader2, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { PatientSearchResult } from '@/lib/cortex/hooks/use-patient-search';
-import { getPatientInitials } from '@/lib/fhir/patient-mapper';
+import { getPatientInitials, calculatePatientAge } from '@/lib/fhir/patient-mapper';

 interface PatientListItemProps {
  /** Patient data */
@@ -29,26 +29,6 @@ interface PatientListItemProps {
  className?: string;
 }

-/**
- * Calculate age from birth date string
- */
-function calculateAge(birthDate: string): number | null {
-  if (!birthDate) return null;
-
-  const birth = new Date(birthDate);
-  if (isNaN(birth.getTime())) return null;
-
-  const today = new Date();
-  let age = today.getFullYear() - birth.getFullYear();
-  const monthDiff = today.getMonth() - birth.getMonth();
-
-  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
-    age--;
-  }
-
-  return age;
-}
-
 export function PatientListItem({
  patient,
  isLoading = false,
@@ -57,7 +37,7 @@ export function PatientListItem({
  showIdentifiers = true,
  className,
 }: PatientListItemProps) {
-  const age = calculateAge(patient.birthDate);
+  const age = calculatePatientAge(patient.birthDate);
  const initials = getPatientInitials(patient.name);

  const isSm = size === 'sm';
--- a/content/nl/documentatie/release-notes-system.mdx
+++ b/content/nl/documentatie/release-notes-system.mdx
@@ -58,6 +58,7 @@ Releases zijn georganiseerd op functionaliteit, niet op chronologische volgorde.
 **Groepen:**
 - **Foundation** - Basis setup (Auth, Database, Environment)
 - **Core Features** - EPD functionaliteit (Dashboard, Clients, AI)
+- **Cortex Intent driven EPD** - Een EPD dat de intentie van de zorgprofessional herkent en meedenkt.
 - **Infrastructure** - Ondersteunend (Hosting, Design, Performance)

 **Features:**
--- a/docs/intent/patient-search/bouwplan-patient-selectie-v1.md
+++ b/docs/intent/patient-search/bouwplan-patient-selectie-v1.md
@@ -1,8 +1,9 @@
-# Bouwplan Patient Selectie v1.4
+# Bouwplan Patient Selectie v1.5 ✅ COMPLEET

 **Projectnaam:** Patient Selectie UX Verbetering
-**Versie:** v1.4
+**Versie:** v1.5
 **Datum:** 03-01-2025
+**Status:** ✅ 100% Compleet (19/19 SP)
 **Auteur:** Colin Lit

 ---
@@ -104,11 +105,11 @@ Dit kost tijd en zorgt voor context verlies. De nieuwe aanpak introduceert:
 | E0 | Refactor & Extract | DRY: extract bestaande code naar hooks | ✅ Done | 4 | 4 SP |
 | E1 | Patient Sidebar | Collapsible overlay sidebar | ✅ Done | 4 | 6 SP |
 | E2 | @Mention Systeem | Inline patient selectie in chat | ✅ Done | 3 | 4 SP |
-| E3 | Smart Defaults | ActivePatient auto-use in blocks | ⏳ To Do | 3 | 5 SP |
+| E3 | Smart Defaults | ActivePatient auto-use in blocks | ✅ Done | 3 | 5 SP |

 **Totaal:** 14 stories, **19 Story Points**

-**Voortgang:** E0 ✅ + E1 ✅ + E2 ✅ = **14/19 SP (74%)**
+**Voortgang:** E0 ✅ + E1 ✅ + E2 ✅ + E3 ✅ = **19/19 SP (100%)** - COMPLEET

 ---

@@ -903,9 +904,9 @@ const handleSubmit = async () => {

 | Story ID | Beschrijving | Acceptatiecriteria | Status | Afhankelijkheden | Story Points |
 |----------|--------------|---------------------|--------|------------------|--------------|
-| E3.S1 | DagnotatieBlock auto-prefill | Als geen prefill patient, gebruik activePatient | ⏳ | E2.S5 | 2 |
-| E3.S2 | Andere blocks activePatient | OverdrachtBlock, Appointment blocks | ⏳ | E3.S1 | 2 |
-| E3.S3 | Re-route na patient selectie | Gebruik `pendingAction` voor re-route | ⏳ | E3.S2 | 1 |
+| E3.S1 | DagnotatieBlock auto-prefill | Als geen prefill patient, gebruik activePatient | ✅ | E2.S5 | 2 |
+| E3.S2 | Andere blocks activePatient | OverdrachtBlock, PatientDashboardBlock | ✅ | E3.S1 | 2 |
+| E3.S3 | Re-route na patient selectie | Gebruik `pendingAction` voor re-route | ✅ | E3.S2 | 1 |

 **Technical Notes:**

@@ -959,10 +960,11 @@ if (pendingAction && !pendingAction.entities.patientId) {
 }
 ```

-**Deliverables E3:**
- DagnotatieBlock update met activePatient fallback
- Andere blocks update (OverdrachtBlock, CreateAppointmentBlock, etc.)
- usePatientSelection update voor pendingAction re-route
+**Deliverables E3:** ✅ Completed 03-01-2025
+- `components/cortex/blocks/dagnotitie-block.tsx` - activePatient fallback voor prefill
+- `components/cortex/blocks/patient-dashboard-block.tsx` - activePatient fallback voor patientId
+- `lib/cortex/hooks/use-patient-selection.ts` - pendingAction re-route na selectie
+- OverdrachtBlock was al correct geïmplementeerd (geen wijziging nodig)

 ---

@@ -994,9 +996,9 @@ if (pendingAction && !pendingAction.entities.patientId) {
 - [ ] Mention data in API payload

 **Epic 3 - Smart Defaults:**
- [ ] DagnotatieBlock prefilled met activePatient
- [ ] Andere blocks prefilled
- [ ] pendingAction re-route werkt
+- [x] DagnotatieBlock prefilled met activePatient
+- [x] Andere blocks prefilled (PatientDashboardBlock, OverdrachtBlock)
+- [x] pendingAction re-route werkt

 ---

@@ -1034,3 +1036,4 @@ if (pendingAction && !pendingAction.entities.patientId) {
 | v1.2 | 03-01-2025 | Colin Lit | Epic 0 compleet: 4 stories done, ZoekenBlock refactored (-64% code) |
 | v1.3 | 03-01-2025 | Claude Code | Epic 1 compleet: Patient Sidebar met Cmd+P, search, recent patients |
 | v1.4 | 03-01-2025 | Claude Code | Epic 2 compleet: @Mention systeem (YAGNI: 8→4 SP, 5→3 stories) |
+| v1.5 | 03-01-2025 | Claude Code | Epic 3 compleet: Smart Defaults - DagnotatieBlock, PatientDashboardBlock, pendingAction re-route. **BOUWPLAN 100% COMPLEET** |
--- a/lib/cortex/hooks/use-patient-selection.ts
+++ b/lib/cortex/hooks/use-patient-selection.ts
@@ -7,6 +7,7 @@
 * Extracted from ZoekenBlock for DRY compliance.
 *
 * Epic: E0.S4 (Patient Selectie - Refactor)
+ * Epic: E3.S3 (Smart Defaults - Re-route after patient selection)
 */

 import { useState, useCallback } from 'react';
@@ -25,6 +26,8 @@ interface UsePatientSelectionOptions {
  trackRecentAction?: boolean;
  /** Show toast on success (default: true) */
  showSuccessToast?: boolean;
+  /** Handle pending action after selection (default: true) */
+  handlePendingAction?: boolean;
 }

 interface UsePatientSelectionReturn {
@@ -46,13 +49,15 @@ export function usePatientSelection(
    onError,
    trackRecentAction = true,
    showSuccessToast = true,
+    handlePendingAction = true,
  } = options;

  const [isSelecting, setIsSelecting] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const { toast } = useToast();

-  const { setActivePatient, addRecentAction } = useCortexStore();
+  // E3.S3: Get pendingAction and openArtifact for re-route functionality
+  const { setActivePatient, addRecentAction, pendingAction, setPendingAction, openArtifact } = useCortexStore();

  const selectPatient = useCallback(
    async (patient: PatientSearchResult): Promise<Patient | null> => {
@@ -91,6 +96,30 @@ export function usePatientSelection(
          });
        }

+        // E3.S3: Handle pending action - re-route to artifact with patient info
+        if (handlePendingAction && pendingAction && !pendingAction.entities.patientId) {
+          const artifactType = pendingAction.artifact?.type || pendingAction.intent;
+
+          // Only open artifact if the type is valid (not 'unknown')
+          if (artifactType !== 'unknown') {
+            // Open artifact with patient info merged into prefill
+            openArtifact({
+              type: artifactType,
+              title: `${pendingAction.intent} - ${patient.name}`,
+              prefill: {
+                ...pendingAction.entities,
+                patientId: dbPatient.id,
+                patientName: patient.name,
+              },
+            });
+
+            console.log('[usePatientSelection] E3.S3: Re-routed pendingAction to', artifactType);
+          }
+
+          // Clear pending action regardless
+          setPendingAction(null);
+        }
+
        // Call success callback
        onSuccess?.(dbPatient, patient.name);

@@ -113,7 +142,7 @@ export function usePatientSelection(
        setSelectedId(null);
      }
    },
-    [setActivePatient, addRecentAction, toast, trackRecentAction, showSuccessToast, onSuccess, onError]
+    [setActivePatient, addRecentAction, toast, trackRecentAction, showSuccessToast, handlePendingAction, pendingAction, setPendingAction, openArtifact, onSuccess, onError]
  );

  const clearSelection = useCallback(() => {
--- a/lib/cortex/nudge.ts
+++ b/lib/cortex/nudge.ts
@@ -10,6 +10,7 @@ import type {
  ExtractedEntities,
  NudgePriority,
  NudgeSuggestion,
+  ProtocolMetadata,
 } from './types';

 // -----------------------------------------------------------------------------
@@ -51,6 +52,8 @@ export interface ProtocolRule {
    /** Function to prefill entities from source action */
    prefillEntities: (source: ExtractedEntities) => Partial<ExtractedEntities>;
  };
+  /** Protocol metadata for clinical context (optional) */
+  protocol?: ProtocolMetadata;
  /** Priority for sorting multiple suggestions */
  priority: NudgePriority;
  /** Whether this rule is active */
@@ -153,6 +156,7 @@ export function evaluateNudge(input: NudgeEvaluationInput): NudgeSuggestion[] {
          entities: rule.suggestion.prefillEntities(input.entities),
          message: rule.suggestion.message,
          rationale: rule.name,
+          protocol: rule.protocol,
        },
        status: 'pending',
        priority: rule.priority,
@@ -205,6 +209,11 @@ export const PROTOCOL_RULES: ProtocolRule[] = [
        appointmentType: 'follow-up',
      }),
    },
+    protocol: {
+      name: 'V&VN Richtlijn Wondzorg',
+      reference: '§4.2 Controlefrequentie',
+      rationale: 'Vroege hercontrole na wondverzorging verkleint het risico op infectie en bevordert optimale wondgenezing.',
+    },
    priority: 'medium',
    enabled: true,
    expiresAfterMs: DEFAULT_EXPIRY_MS,
--- a/lib/cortex/types.ts
+++ b/lib/cortex/types.ts
@@ -282,6 +282,16 @@ export type NudgePriority = 'low' | 'medium' | 'high';
 /** Nudge suggestion status */
 export type NudgeStatus = 'pending' | 'accepted' | 'dismissed' | 'expired';

+/** Protocol metadata for clinical context */
+export interface ProtocolMetadata {
+  /** Official protocol name (e.g., "V&VN Richtlijn Wondzorg") */
+  name: string;
+  /** Specific section reference (e.g., "§4.2 Controlefrequentie") */
+  reference?: string;
+  /** Clinical rationale/justification for the suggestion */
+  rationale: string;
+}
+
 /** Proactive suggestion after action completion */
 export interface NudgeSuggestion {
  id: string;
@@ -295,6 +305,8 @@ export interface NudgeSuggestion {
    entities: Partial<ExtractedEntities>;
    message: string;
    rationale: string;
+    /** Protocol metadata for clinical context (optional) */
+    protocol?: ProtocolMetadata;
  };
  status: NudgeStatus;
  priority: NudgePriority;
--- a/lib/fhir/patient-mapper.ts
+++ b/lib/fhir/patient-mapper.ts
@@ -156,3 +156,36 @@ export function getPatientInitials(name: string): string {
    .slice(0, 2)
    .toUpperCase();
 }
+
+/**
+ * PatientSearchResult interface (duplicated to avoid circular import)
+ * Matches the interface in use-patient-search.ts
+ */
+export interface PatientSearchResult {
+  id: string;
+  name: string;
+  birthDate: string;
+  identifier_bsn?: string;
+  identifier_client_number?: string;
+  matchScore: number;
+}
+
+/**
+ * Converts a database Patient to PatientSearchResult format
+ *
+ * Used for displaying recent patients in sidebar/dropdown
+ * where we have full Patient data but need search result format.
+ *
+ * @param patient - Database Patient object
+ * @returns PatientSearchResult for UI components
+ */
+export function dbPatientToSearchResult(patient: Patient): PatientSearchResult {
+  return {
+    id: patient.id,
+    name: formatPatientName(patient) || 'Onbekend',
+    birthDate: patient.birth_date || '',
+    identifier_bsn: patient.identifier_bsn || undefined,
+    identifier_client_number: patient.identifier_client_number || undefined,
+    matchScore: 1,
+  };
+}
--- a/stores/cortex-store.ts
+++ b/stores/cortex-store.ts
@@ -56,7 +56,7 @@ export interface ChatEntities {
 }

 // Chat types (v3.0)
-export type ChatMessageType = 'user' | 'assistant' | 'system' | 'error';
+export type ChatMessageType = 'user' | 'assistant' | 'system' | 'error' | 'nudge';

 export interface ChatMessage {
  id: string;
@@ -64,6 +64,8 @@ export interface ChatMessage {
  content: string;
  timestamp: Date;
  action?: ChatAction;
+  /** Nudge suggestion data (only for type='nudge') */
+  nudge?: NudgeSuggestion;
 }

 export interface ChatAction {