+ {/* Main row: sequence, icon, label, confidence */}
+
+ {/* Sequence badge */}
+
+ {sequence}
+
+
+ {/* Status icon */}
+
+ {STATUS_ICONS[action.status]}
+
+
+ {/* Intent label */}
+
+
+ {intentLabel}
+
+
+
+ {/* Confidence badge */}
+
+ {Math.round(action.confidence * 100)}%
+
+
+
+ {/* Entity summary */}
+
{entitySummary}
+
+ {/* Confirmation message and buttons */}
+ {isConfirming && (
+
+ {action.confirmationMessage && (
+
{action.confirmationMessage}
+ )}
+
+
+
+
+
+ )}
+
+ {/* Error state with retry option */}
+ {isFailed && action.error && (
+
+
{action.error.message}
+ {action.error.recoverable && (
+
+ )}
+
+ )}
+
+ {/* Completion time (optional, for completed actions) */}
+ {isCompleted && action.completedAt && (
+
+ {action.status === 'success' ? 'Voltooid' : 'Overgeslagen'}
+
+ )}
+
+ );
+}
diff --git a/components/cortex/chat/chat-panel.tsx b/components/cortex/chat/chat-panel.tsx
index 1f523cd..dfbe211 100644
--- a/components/cortex/chat/chat-panel.tsx
+++ b/components/cortex/chat/chat-panel.tsx
@@ -1,24 +1,30 @@
'use client';
/**
- * Chat Panel (v3.0)
+ * Chat Panel (v4.0)
*
* Chat interface met scrollable message list, auto-scroll, en scroll-lock detection.
+ * V2 integratie: ActionChainCard, ClarificationCard, ProcessingIndicator
*
- * Epic: E2 (Chat Panel & Messages)
- * Story: E2.S3 (ChatPanel component - scrolling)
+ * Epic: E2 (Chat Panel & Messages), E3 (UI Components)
+ * Story: E2.S3 (ChatPanel component - scrolling), E3 Integration
*/
import { useRef, useEffect, useState, useCallback } from 'react';
import { ArrowDown } from 'lucide-react';
+import { AnimatePresence } from 'framer-motion';
import { ChatMessage } from './chat-message';
import { ChatInput, ChatInputHandle } from './chat-input';
+import { ActionChainCard } from './action-chain-card';
+import { ClarificationCard } from './clarification-card';
+import { ProcessingIndicator } from './processing-indicator';
import { useCortexStore } from '@/stores/cortex-store';
import { sendChatMessage } from '@/lib/cortex/chat-api';
import { parseActionFromResponse, shouldOpenArtifact } from '@/lib/cortex/action-parser';
import { cn } from '@/lib/utils';
export function ChatPanel() {
+ // Chat state
const chatMessages = useCortexStore((s) => s.chatMessages);
const addChatMessage = useCortexStore((s) => s.addChatMessage);
const updateLastMessage = useCortexStore((s) => s.updateLastMessage);
@@ -28,6 +34,16 @@ export function ChatPanel() {
const activePatient = useCortexStore((s) => s.activePatient);
const shift = useCortexStore((s) => s.shift);
+ // V2 Chain state
+ const activeChain = useCortexStore((s) => s.activeChain);
+ const updateActionStatus = useCortexStore((s) => s.updateActionStatus);
+ const completeChain = useCortexStore((s) => s.completeChain);
+
+ // V2 Clarification state
+ const pendingClarification = useCortexStore((s) => s.pendingClarification);
+ const setPendingClarification = useCortexStore((s) => s.setPendingClarification);
+ const resolveClarification = useCortexStore((s) => s.resolveClarification);
+
// Refs for scrolling
const scrollContainerRef = useRef