+ {activeTab === 'profile' &&
+
+ {/* Header */}
+
+
+
+
+
+ {/* Content */}
+ Settings
+
+ {/* Sidebar Tabs */}
+
+
+ {/* Main Content */}
+
+
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/app/page.tsx b/web_platform/frontend/app/page.tsx
new file mode 100644
index 0000000..73f89dc
--- /dev/null
+++ b/web_platform/frontend/app/page.tsx
@@ -0,0 +1,37 @@
+/**
+ * Root Page
+ *
+ * Redirects to /app (main application).
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '../lib/store/authStore';
+import { Spinner } from '../components/ui/Spinner';
+
+export default function RootPage() {
+ const router = useRouter();
+ const { isAuthenticated, isLoading, initialize } = useAuthStore();
+
+ useEffect(() => {
+ initialize();
+ }, [initialize]);
+
+ useEffect(() => {
+ if (!isLoading) {
+ if (isAuthenticated) {
+ router.push('/app');
+ } else {
+ router.push('/login');
+ }
+ }
+ }, [isLoading, isAuthenticated, router]);
+
+ return (
+
+ {/* Logo/Title */}
+
+
+
+
+ {/* Login Card */}
+ MedRAX Platform
+Medical Reasoning Agent
+
+
+ Login
+ + + +
+ Don't have an account?{' '}
+
+ Register
+
+
+
+
+ );
+}
diff --git a/web_platform/frontend/app/register/page.tsx b/web_platform/frontend/app/register/page.tsx
new file mode 100644
index 0000000..0de8c0c
--- /dev/null
+++ b/web_platform/frontend/app/register/page.tsx
@@ -0,0 +1,141 @@
+/**
+ * Register Page
+ *
+ * Simple registration with name and password.
+ */
+
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Button } from '../../components/ui/Button';
+import { Input } from '../../components/ui/Input';
+import { registerDoctor } from '../../lib/api/auth';
+import { useAuthStore } from '../../lib/store/authStore';
+import { validation } from '../../lib/utils/validation';
+
+export default function RegisterPage() {
+ const router = useRouter();
+ const setAuth = useAuthStore((state) => state.setAuth);
+
+ const [name, setName] = useState('');
+ const [password, setPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+ setError('');
+
+ // Basic validation
+ const nameError = validation.doctorName(name);
+ if (nameError) {
+ setError(nameError);
+ return;
+ }
+
+ const passwordError = validation.password(password);
+ if (passwordError) {
+ setError(passwordError);
+ return;
+ }
+
+ if (password !== confirmPassword) {
+ setError('Passwords do not match');
+ return;
+ }
+
+ setIsLoading(true);
+
+ try {
+ const session = await registerDoctor({ name, password });
+ setAuth(session.doctor, session.token);
+ router.push('/app');
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Registration failed. Please try again.');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/auth/ApiSecretGate.tsx b/web_platform/frontend/components/auth/ApiSecretGate.tsx
new file mode 100644
index 0000000..1231e54
--- /dev/null
+++ b/web_platform/frontend/components/auth/ApiSecretGate.tsx
@@ -0,0 +1,197 @@
+/**
+ * ApiSecretGate Component
+ *
+ * Guards the entire application with API secret validation.
+ * Users must enter the correct API secret before accessing any features.
+ * This is the FIRST layer of security (before user login).
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { API_CONFIG, API_SECRET_CONFIG } from '@/lib/config/api';
+import { Button } from '../ui/Button';
+import { Input } from '../ui/Input';
+import { Card } from '../ui/Card';
+import { Lock, AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ApiSecretGateProps {
+ children: React.ReactNode;
+}
+
+export function ApiSecretGate({ children }: ApiSecretGateProps) {
+ const [secret, setSecret] = useState('');
+ const [isValidating, setIsValidating] = useState(false);
+ const [error, setError] = useState('');
+ const [isValidated, setIsValidated] = useState(false);
+ const [isChecking, setIsChecking] = useState(true);
+
+ // Check if secret is already stored
+ useEffect(() => {
+ const storedSecret = API_SECRET_CONFIG.getSecret();
+ if (storedSecret) {
+ // Validate the stored secret
+ validateStoredSecret(storedSecret);
+ } else {
+ setIsChecking(false);
+ }
+ }, []);
+
+ const validateStoredSecret = async (storedSecret: string) => {
+ try {
+ const response = await fetch(`${API_CONFIG.baseURL}/api/system/validate-secret`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-API-Secret': storedSecret, // Send in header, not body!
+ },
+ });
+
+ const data = await response.json();
+
+ if (data.valid) {
+ setIsValidated(true);
+ } else {
+ // Stored secret is invalid, clear it
+ API_SECRET_CONFIG.clearSecret();
+ }
+ } catch (err) {
+ console.error('Failed to validate stored secret:', err);
+ // On error, assume invalid and clear
+ API_SECRET_CONFIG.clearSecret();
+ } finally {
+ setIsChecking(false);
+ }
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+ setIsValidating(true);
+
+ try {
+ const response = await fetch(`${API_CONFIG.baseURL}/api/system/validate-secret`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-API-Secret': secret, // Send in header, not body!
+ },
+ });
+
+ const data = await response.json();
+
+ if (data.valid) {
+ // Store the valid secret
+ API_SECRET_CONFIG.setSecret(secret);
+ setIsValidated(true);
+ } else {
+ setError('Invalid API secret. Please try again.');
+ }
+ } catch (err) {
+ setError('Failed to validate secret. Please check your connection.');
+ console.error('Validation error:', err);
+ } finally {
+ setIsValidating(false);
+ }
+ };
+
+ const handleClearSecret = () => {
+ API_SECRET_CONFIG.clearSecret();
+ setIsValidated(false);
+ setSecret('');
+ setError('');
+ };
+
+ // Show loading while checking stored secret
+ if (isChecking) {
+ return (
+
+ {/* Logo/Title */}
+
+
+
+
+ {/* Register Card */}
+ MedRAX Platform
+Medical Reasoning Agent
+
+
+ Register
+ + + +
+ Already have an account?{' '}
+
+ Login
+
+
+
+
+ );
+ }
+
+ // If validated, render the app
+ if (isValidated) {
+ return <>{children};
+ }
+
+ // Show API secret entry form
+ return (
+
+
+
+ Checking credentials...
+
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/auth/AuthGuard.tsx b/web_platform/frontend/components/auth/AuthGuard.tsx
new file mode 100644
index 0000000..0224da5
--- /dev/null
+++ b/web_platform/frontend/components/auth/AuthGuard.tsx
@@ -0,0 +1,56 @@
+/**
+ * AuthGuard Component
+ *
+ * Protects routes that require authentication.
+ * Redirects to login if not authenticated.
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '../../lib/store/authStore';
+import { Spinner } from '../ui/Spinner';
+
+/**
+ * AuthGuard Component Props
+ * @property children - Protected content to render when authenticated
+ */
+interface AuthGuardProps {
+ /** Protected content to render when authenticated */
+ children: React.ReactNode;
+}
+
+export function AuthGuard({ children }: AuthGuardProps) {
+ const router = useRouter();
+ const { isAuthenticated, isLoading, initialize } = useAuthStore();
+
+ useEffect(() => {
+ // Initialize auth state from localStorage
+ initialize();
+ }, [initialize]);
+
+ useEffect(() => {
+ // Redirect to login if not authenticated
+ if (!isLoading && !isAuthenticated) {
+ router.push('/login');
+ }
+ }, [isLoading, isAuthenticated, router]);
+
+ // Show loading spinner while checking auth
+ if (isLoading) {
+ return (
+
+
+
+
+
+
+
+ API Access Required
++ Enter the API secret key to access MedRAX platform +
+
+
+
+ {/* Developer helper */}
+
+
+
+
+ Security Note:
+The API secret is stored locally in your browser and sent with every request to verify access to the backend API.
+
+
+
+
+
+ );
+ }
+
+ // Don't render children if not authenticated
+ if (!isAuthenticated) {
+ return null;
+ }
+
+ return <>{children};
+}
+
diff --git a/web_platform/frontend/components/chat/ChatInput.tsx b/web_platform/frontend/components/chat/ChatInput.tsx
new file mode 100644
index 0000000..251d1dd
--- /dev/null
+++ b/web_platform/frontend/components/chat/ChatInput.tsx
@@ -0,0 +1,269 @@
+/**
+ * ChatInput Component
+ *
+ * Input area with:
+ * - Textarea for message
+ * - Upload button
+ * - Send button
+ */
+
+'use client';
+
+import { useState, useRef, KeyboardEvent, useEffect } from 'react';
+import { Send, Paperclip, Loader2, X } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Modal } from '../ui/Modal';
+import { ScanUploadZone } from '../scans/ScanUploadZone';
+import { classNames } from '../../lib/utils';
+import { getImageUrl } from '../../lib/utils/image';
+import type { Scan } from '../../lib/types/scan';
+
+/**
+ * ChatInput Component Props
+ * @property chatId - The current chat ID (required for uploads)
+ * @property onSend - Callback when user sends a message (required, async)
+ * @property disabled - Whether input is disabled (default: false)
+ * @property placeholder - Custom placeholder text
+ */
+interface ChatInputProps {
+ /** The current chat ID (required for uploads) */
+ chatId: string;
+ /** Callback when user sends a message (async) */
+ onSend: (content: string, scanIds?: string[]) => Promise
+
+
+ {/* Upload Modal */}
+
+ {/* Upload Button */}
+
+
+ {/* Textarea */}
+
+
+ {/* Send Button */}
+
+
+
+ {/* Error Message */}
+ {sendError && (
+
+ {sendError}
+
+ )}
+
+ {/* Helper text or Image Previews */}
+ {uploadedScans.length === 0 ? (
+ + Press Enter to send, Shift+Enter for new line +
+ ) : ( +
+
+ )}
+
+
+ + {uploadedScans.length} scan{uploadedScans.length > 1 ? 's' : ''} ready to attach +
+ +
+ {uploadedScans.map((scan) => {
+ const imageUrl = getImageUrl(scan.displayPath);
+ return (
+
+
+ {imageUrl ? (
+ <>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
{
+ e.currentTarget.style.display = 'none';
+ const container = e.currentTarget.parentElement;
+ if (container) {
+ const errorMsg = document.createElement('div');
+ errorMsg.className = 'h-20 w-20 flex items-center justify-center bg-red-900/20 border border-red-800 rounded-lg text-red-400 text-xs p-1 text-center';
+ errorMsg.textContent = 'Failed to load';
+ container.insertBefore(errorMsg, e.currentTarget);
+ }
+ }}
+ />
+
+ ) : (
+
+ );
+ })}
+
+ No preview
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ + Welcome to MedRAX +
++ Select a patient and chat from the sidebar to begin medical image analysis. +
+
+
+
+
+
+ Ask Questions
+
+
+ Get AI Analysis
+
+
+ {/* Chat Header */}
+ {currentChat && (
+
+
+ {/* Rename Chat Modal */}
+
+
+ )}
+
+ {/* Messages Area - Scrollable */}
+
+
+
+
+ {currentChat.name}
++ {currentChat.messageCount} messages · {currentChat.scanCount} scans +
+
+
+
+ {/* Bottom Section - Fixed at bottom, never scrolls away */}
+
+ {isLoadingMessages ? (
+ handleShowToolDetails(message.id)}
+ />
+ ))}
+
+
+ ) : (
+
+
+
+ ) : error ? (
+
+
+ ) : chatMessages.length > 0 ? (
+ <>
+ {chatMessages.map((message) => (
+ {error}
+
+ No messages yet. Start the conversation below.
+
+ )}
+
+ {/* Suggested Questions */}
+
+
+ setChatNameInput(e.target.value)}
+ placeholder="Enter chat name"
+ autoFocus
+ />
+
+
+
+
+
+
+
+ ) : memoryStats ? (
+
+
+ ) : (
+
+
+
+
+ Messages
+ {memoryStats.messageCount}
+
+
+ Scans
+ {memoryStats.scanCount}
+
+
+ Tool Runs
+ {memoryStats.toolExecutionCount}
+
+
+ Context Status
+
+ {memoryStats.hasContext ? (
+ ✓ Active conversation context
+ ) : (
+ No context (fresh start)
+ )}
+
+
+ Chat ID: {memoryStats.chatId.substring(0, 8)}...
+
+
+ Failed to load memory stats
+
+ )}
+
+ setIsModalOpen(false)}
+ />
+
+ );
+}
+
diff --git a/web_platform/frontend/components/chat/MessageActivity.tsx b/web_platform/frontend/components/chat/MessageActivity.tsx
new file mode 100644
index 0000000..e271251
--- /dev/null
+++ b/web_platform/frontend/components/chat/MessageActivity.tsx
@@ -0,0 +1,158 @@
+/**
+ * MessageActivity Component
+ *
+ * Shows tool executions inline with the message:
+ * - Compact list of tools used
+ * - Click to see detailed tool history
+ */
+
+'use client';
+
+import { Wrench, CheckCircle, XCircle, Loader2 } from 'lucide-react';
+import type { ToolExecution } from '../../lib/types/tool';
+import { Badge } from '../ui/Badge';
+
+/**
+ * MessageActivity Component Props
+ * @property executions - Array of tool executions for this message (required)
+ * @property onShowDetails - Optional callback when user wants to see all tool execution details
+ */
+interface MessageActivityProps {
+ /** Array of tool executions for this message */
+ executions: ToolExecution[];
+ /** Optional callback when user wants to see all tool execution details */
+ onShowDetails?: () => void;
+}
+
+export function MessageActivity({ executions, onShowDetails }: MessageActivityProps) {
+ if (!executions || executions.length === 0) return null;
+
+ // Format duration helper: prefer ms for sub-second, otherwise seconds with 2 decimals
+ const formatDuration = (durationMs: number): string => {
+ if (durationMs < 1000) {
+ return `${Math.max(0, Math.round(durationMs))}ms`;
+ }
+ return `${(durationMs / 1000).toFixed(2)}s`;
+ };
+
+ // Compute duration with fallback: use provided executionTimeMs, else derive from timestamps
+ const getDurationMs = (e: ToolExecution): number | null => {
+ if (e.executionTimeMs != null) return e.executionTimeMs;
+ if (e.startedAt && e.completedAt) {
+ const start = new Date(e.startedAt).getTime();
+ const end = new Date(e.completedAt).getTime();
+ if (!Number.isNaN(start) && !Number.isNaN(end) && end >= start) {
+ return end - start;
+ }
+ }
+ return null;
+ };
+
+ // Calculate summary stats
+ const completed = executions.filter(e => e.status === 'completed').length;
+ const failed = executions.filter(e => e.status === 'failed').length;
+ const running = executions.filter(e => e.status === 'running').length;
+
+ return (
+
+ {/* Avatar */}
+
+
+ {/* Image Modal */}
+
+ {isUser ? (
+
+
+ {/* Content */}
+
+
+
+ {/* Render message content as Markdown for assistant, plain text for user */}
+ {isUser ? (
+
+
+ {/* Tool Activity */}
+ {message.toolExecutions && message.toolExecutions.length > 0 && (
+ {message.content}
+ ) : ( +
+
+ )}
+
+ {/* Attached Scans (User messages) */}
+ {message.attachedScans && message.attachedScans.length > 0 && (
+
+
+ )}
+
+ {/* Final Generated Images (Assistant messages) */}
+ {finalImages.length > 0 && (
+ Attached Scans:
+
+ {message.attachedScans.map((scan, idx) => {
+ const scanUrl = getImageUrl(scan.displayPath);
+ console.log('Scan display:', { scan, displayPath: scan.displayPath, scanUrl });
+ const hasFailed = !scanUrl || failedImages.has(scanUrl);
+
+ return (
+
+ {
+ if (!hasFailed && scanUrl && message.attachedScans) {
+ openImageModal(
+ message.attachedScans.map(s => getImageUrl(s.displayPath)).filter((url): url is string => url !== null),
+ idx
+ );
+ }
+ }}
+ >
+ {hasFailed ? (
+ 
handleImageError(scanUrl)}
+ />
+
+
+ );
+ })}
+
+ ⚠️ Failed to load
+
+ ) : (
+ <>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+ Click to enlarge
+
+
+ )}
+
+
+ )}
+ Generated Result:
+
+ {finalImages.map((imagePath, idx) => {
+ const imageUrl = getImageUrl(imagePath);
+ const hasFailed = !imageUrl || failedImages.has(imageUrl);
+
+ return (
+
+ {
+ if (!hasFailed && imageUrl) {
+ openImageModal(
+ finalImages.map(path => getImageUrl(path)).filter((url): url is string => url !== null),
+ idx
+ );
+ }
+ }}
+ >
+ {hasFailed ? (
+ handleImageError(imageUrl)}
+ />
+
+
+ );
+ })}
+
+ ⚠️ Failed to load result
+
+ ) : (
+ <>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+ Click to enlarge
+
+
+ )}
+
+ {formatDateTime(message.createdAt)}
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/chat/SuggestedQuestions.tsx b/web_platform/frontend/components/chat/SuggestedQuestions.tsx
new file mode 100644
index 0000000..707b629
--- /dev/null
+++ b/web_platform/frontend/components/chat/SuggestedQuestions.tsx
@@ -0,0 +1,65 @@
+/**
+ * SuggestedQuestions Component
+ *
+ * Floating chips above the chat input showing:
+ * - Default predefined questions
+ * - Doctor's custom frequent questions
+ */
+
+'use client';
+
+import type { SuggestedQuestion } from '../../lib/types/question';
+
+/**
+ * SuggestedQuestions Component Props
+ * @property questions - Array of suggested questions to display (required)
+ * @property onSelect - Callback when user selects a question (required)
+ * @property onManage - Optional callback to open questions management settings
+ */
+interface SuggestedQuestionsProps {
+ /** Array of suggested questions to display */
+ questions: SuggestedQuestion[];
+ /** Callback when user selects a question */
+ onSelect: (question: string) => void;
+ /** Optional callback to open questions management settings */
+ onManage?: () => void;
+}
+
+export function SuggestedQuestions({
+ questions,
+ onSelect,
+ onManage,
+}: SuggestedQuestionsProps) {
+ if (!questions || questions.length === 0) return null;
+
+ return (
+
+
+
+
+
+
+ {completed > 0 && (
+ ✓ {completed}
+ )}
+ {failed > 0 && (
+ ✗ {failed}
+ )}
+ {running > 0 && (
+ ⟳ {running}
+ )}
+
+
+ {executions.map((execution, index) => {
+ // Determine icon based on status
+ const getStatusIcon = () => {
+ switch (execution.status) {
+ case 'completed':
+ return
+
+ {onShowDetails && (
+
+ )}
+
+
+ );
+ })}
+
+ {/* Execution order number */}
+
+ {index + 1}
+
+
+ {getStatusIcon()}
+
+
+ {execution.toolDisplayName}
+
+
+
+
+ {(() => {
+ const durationMs = getDurationMs(execution);
+ if (durationMs != null) {
+ return (
+
+ {formatDuration(durationMs)}
+
+ );
+ }
+ return null;
+ })()}
+
+ {execution.status}
+
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/layout/AppLayout.tsx b/web_platform/frontend/components/layout/AppLayout.tsx
new file mode 100644
index 0000000..6a2e20a
--- /dev/null
+++ b/web_platform/frontend/components/layout/AppLayout.tsx
@@ -0,0 +1,43 @@
+/**
+ * AppLayout Component
+ *
+ * Main application layout with:
+ * - Header at top
+ * - Left sidebar (patients/chats)
+ * - Center content (chat interface)
+ * - Right panel (tool outputs - conditionally shown)
+ */
+
+'use client';
+
+import { AuthGuard } from '../auth/AuthGuard';
+import { Header } from './Header';
+import { Sidebar } from './Sidebar';
+import { ChatInterface } from '../chat/ChatInterface';
+import { ToolOutputPanel } from '../tool-outputs/ToolOutputPanel';
+
+export function AppLayout() {
+ return (
+
+
+ Suggested Questions
+
+ {onManage && (
+
+ )}
+
+
+
+ {(questions || []).map((question) => (
+
+ ))}
+
+
+ {/* Header */}
+
+
+ {/* Left Sidebar: Patients & Chats */}
+
+
+
+ {/* Right: Tool Outputs (conditionally rendered) */}
+
+
+
+
+ {/* Right: Profile + Settings */}
+ MedRAX
+ Medical Reasoning Agent
+
+ {/* Settings Button */}
+
+
+ {/* Profile Dropdown */}
+
+
+
+
+ ) : error ? (
+ {error}
+ ) : scans.length > 0 ? (
+
+ {/* Scan Grid */}
+
+ ) : (
+
+ {scans.map((scan) => {
+ const imageUrl = getImageUrl(scan.displayPath);
+ return (
+
+
+ {/* Selected Scan Detail */}
+ {selectedScan && (() => {
+ const selectedImageUrl = getImageUrl(selectedScan.displayPath);
+ return (
+ setSelectedScan(scan)}
+ >
+ {!imageUrl || failedImages.has(imageUrl) ? (
+ handleImageError(imageUrl)}
+ />
+ )}
+
+ {/* Overlay on hover */}
+
+ );
+ })}
+
+ ⚠️ Failed to load scan
+
+ ) : (
+ /* eslint-disable-next-line @next/next/no-img-element -- Dynamic medical images from backend */
+
+
+
+
+
+ {/* Scan Info */}
+
+
+ + {formatDateTime(scan.uploadedAt)} +
+{scan.fileType.toUpperCase()}
+
+ 
handleImageError(selectedImageUrl)}
+ />
+ )}
+
+
+ );
+ })()}
+
+
+
+ {!selectedImageUrl || failedImages.has(selectedImageUrl) ? (
+ Scan Details
+ +
+ ⚠️ Failed to load scan image
+
+ ) : (
+ /* eslint-disable-next-line @next/next/no-img-element -- Dynamic medical images from backend */
+
+
+
+
+
+ Uploaded:
+ {formatDateTime(selectedScan.uploadedAt)}
+
+
+ Format:
+ {selectedScan.fileType.toUpperCase()}
+
+
+ Type:
+
+ {selectedScan.fileType.toUpperCase()}
+
+
+
+
+ )}
+ No scans uploaded yet
+
+ {/* Drop Zone */}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/settings/ProfileSettings.tsx b/web_platform/frontend/components/settings/ProfileSettings.tsx
new file mode 100644
index 0000000..7f53e7a
--- /dev/null
+++ b/web_platform/frontend/components/settings/ProfileSettings.tsx
@@ -0,0 +1,193 @@
+/**
+ * ProfileSettings Component
+ *
+ * Allows doctor to update:
+ * - Name
+ * - Password
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useAuthStore } from '../../lib/store/authStore';
+import { updateDoctor, updatePassword } from '../../lib/api/doctors';
+import { Input } from '../ui/Input';
+import { Button } from '../ui/Button';
+import { Card } from '../ui/Card';
+import { validation } from '../../lib/utils/validation';
+
+export function ProfileSettings() {
+ const { doctor, setAuth } = useAuthStore();
+
+ // Name Update State
+ const [name, setName] = useState(doctor?.name || '');
+ const [nameError, setNameError] = useState
+
+
+ {/* Selected Files */}
+ {selectedFiles.length > 0 && (
+
+
+ + Drag and drop scans here, or click to browse +
++ Supports DICOM, JPG, PNG (max {UI_CONFIG.maxFileSize / (1024 * 1024)}MB) +
+ + + +
+
+ )}
+
+ {/* Error Message */}
+ {error && (
+
+
+
+ + Selected Files ({selectedFiles.length}) +
+ +
+ {selectedFiles.map((file, index) => (
+
+
+ {/* Upload Button */}
+
+
+
+ ))}
+
+
+
+
+
+ {file.name}
++ {(file.size / 1024).toFixed(1)} KB +
+
+ {error}
+
+ )}
+
+
+
+
+ {/* Password Update */}
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/settings/QuestionsSettings.tsx b/web_platform/frontend/components/settings/QuestionsSettings.tsx
new file mode 100644
index 0000000..19f7c8c
--- /dev/null
+++ b/web_platform/frontend/components/settings/QuestionsSettings.tsx
@@ -0,0 +1,165 @@
+/**
+ * QuestionsSettings Component
+ *
+ * Manage suggested questions:
+ * - View all questions (default + custom)
+ * - Add custom questions
+ * - Remove custom questions
+ * - Reorder questions
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, X, GripVertical } from 'lucide-react';
+import { getQuestions, createQuestion, deleteQuestion } from '../../lib/api/questions';
+import { Card } from '../ui/Card';
+import { Button } from '../ui/Button';
+import { Input } from '../ui/Input';
+import { Spinner } from '../ui/Spinner';
+import { Badge } from '../ui/Badge';
+import type { SuggestedQuestion } from '../../lib/types/question';
+
+export function QuestionsSettings() {
+ const [questions, setQuestions] = useState
+
+
+ {/* Name Update */}
+ Profile Settings
++ Update your personal information and security settings +
+Update Name
+ +Change Password
+ +
+
+ );
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ return (
+
+
+
+
+ {/* Questions List */}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/settings/ToolsSettings.tsx b/web_platform/frontend/components/settings/ToolsSettings.tsx
new file mode 100644
index 0000000..1a051a1
--- /dev/null
+++ b/web_platform/frontend/components/settings/ToolsSettings.tsx
@@ -0,0 +1,636 @@
+/**
+ * ToolsSettings Component
+ *
+ * Manage medical imaging tools:
+ * - View available tools grouped by category
+ * - Load/unload tools dynamically with real-time SSE progress
+ * - View tool status, dependencies, and info
+ * - Bulk load tools with SSE for each tool
+ */
+
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Wrench, Loader2, Info, Download, Check, X, AlertCircle } from 'lucide-react';
+import { getTools, loadTool, unloadTool, bulkLoadTools, Tool } from '../../lib/api/toolManagement';
+import { ToolLoadingProgress } from '../tools/ToolLoadingProgress';
+import { Card } from '../ui/Card';
+import { Button } from '../ui/Button';
+import { Spinner } from '../ui/Spinner';
+import { Badge } from '../ui/Badge';
+import { API_CONFIG } from '../../lib/config/api';
+import { AUTH_CONFIG } from '../../lib/config/app';
+
+interface ToolsByCategory {
+ [category: string]: Tool[];
+}
+
+interface ToolLoadingState {
+ progress: number;
+ message: string;
+}
+
+const CATEGORY_DISPLAY_NAMES: { [key: string]: string } = {
+ 'classification': 'Classification',
+ 'vqa': 'Visual Question Answering',
+ 'segmentation': 'Segmentation',
+ 'generation': 'Generation',
+ 'grounding': 'Grounding',
+ 'processing': 'Image Processing',
+ 'retrieval': 'Retrieval & Search',
+ 'execution': 'Code Execution',
+};
+
+const CATEGORY_DESCRIPTIONS: { [key: string]: string } = {
+ 'classification': 'Identify pathologies and conditions in medical images',
+ 'vqa': 'Answer questions about medical images using AI',
+ 'segmentation': 'Segment and identify regions in medical images',
+ 'generation': 'Generate reports and synthetic medical images',
+ 'grounding': 'Locate specific findings in medical images',
+ 'processing': 'Process and convert medical image formats',
+ 'retrieval': 'Search medical knowledge and web resources',
+ 'execution': 'Execute Python code for custom analysis',
+};
+
+export function ToolsSettings() {
+ const [tools, setTools] = useState
+
+
+ {/* Add New Question */}
+ Suggested Questions
++ Manage the questions that appear as quick options in the chat interface +
+Add New Question
+ +
+ {(questions || []).map((question) => (
+
+
+ ))}
+
+
+ {(!questions || questions.length === 0) && (
+
+
+
+ Default
+ )}
+
+
+ {!question.isDefault && (
+
+ )}
+
+ No questions added yet. Add your first question above!
+
+ )}
+
+
+ );
+ }
+
+ const toolsByCategory = groupToolsByCategory();
+ const stats = getToolStats();
+ const hasActiveSSE = loadingTools.size > 0;
+
+ return (
+
+ {/* Header */}
+
+
+
+ {/* Real-time SSE Loading Indicator */}
+ {hasActiveSSE && (
+
+
+ )}
+
+ {/* Installation Info */}
+ {stats.unavailable > 0 && (
+
+
+ )}
+
+ {/* Error Display */}
+ {error && (
+
+
+ )}
+
+ {/* Tools by Category */}
+ {(!tools || tools.length === 0) ? (
+
+
+ ) : (
+
+ );
+}
diff --git a/web_platform/frontend/components/sidebar/ChatListItem.tsx b/web_platform/frontend/components/sidebar/ChatListItem.tsx
new file mode 100644
index 0000000..98b8110
--- /dev/null
+++ b/web_platform/frontend/components/sidebar/ChatListItem.tsx
@@ -0,0 +1,57 @@
+/**
+ * ChatListItem Component
+ *
+ * Individual chat item in the patient's chat list.
+ */
+
+'use client';
+
+import { MessageCircle } from 'lucide-react';
+import type { Chat } from '../../lib/types/chat';
+import { classNames } from '../../lib/utils';
+
+/**
+ * ChatListItem Component Props
+ * @property chat - Chat data to display (required)
+ * @property isSelected - Whether this chat is currently selected (required)
+ * @property onClick - Callback when user clicks the chat item (required)
+ */
+interface ChatListItemProps {
+ /** Chat data to display */
+ chat: Chat;
+ /** Whether this chat is currently selected */
+ isSelected: boolean;
+ /** Callback when user clicks the chat item */
+ onClick: () => void;
+}
+
+export function ChatListItem({ chat, isSelected, onClick }: ChatListItemProps) {
+ return (
+
+ );
+}
+
diff --git a/web_platform/frontend/components/sidebar/NewPatientModal.tsx b/web_platform/frontend/components/sidebar/NewPatientModal.tsx
new file mode 100644
index 0000000..a6b2034
--- /dev/null
+++ b/web_platform/frontend/components/sidebar/NewPatientModal.tsx
@@ -0,0 +1,81 @@
+/**
+ * NewPatientModal Component
+ *
+ * Modal for creating a new patient.
+ * Name is optional (can be anonymous).
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { Modal } from '../ui/Modal';
+import { Input } from '../ui/Input';
+import { Button } from '../ui/Button';
+
+/**
+ * NewPatientModal Component Props
+ * @property isOpen - Controls modal visibility (required)
+ * @property onClose - Callback when modal should close (required)
+ * @property onSubmit - Callback when user submits new patient (required, async)
+ */
+interface NewPatientModalProps {
+ /** Controls modal visibility */
+ isOpen: boolean;
+ /** Callback when modal should close */
+ onClose: () => void;
+ /** Callback when user submits new patient (async) */
+ onSubmit: (name: string | null) => Promise
+
+
+ {/* Stats */}
+
+
+
+
+
+
+ + Load and unload medical imaging analysis tools dynamically +
+
+
+
+
+
+
+
+
+
+ {stats.total}
+ Total Tools
+
+
+ {stats.available}
+ Available
+
+
+ {stats.loaded}
+ Loaded
+
+
+ {stats.loading}
+ Loading
+
+
+ {stats.unavailable}
+ Unavailable
+
+
+
+
+ Real-time Tool Loading (SSE)
++ {loadingTools.size} tool{loadingTools.size !== 1 ? 's are' : ' is'} loading with live progress updates via Server-Sent Events. +
++ ⓘ Progress shows estimated completion. First-time downloads may take several minutes. +
+
+
+
+
+ Missing Dependencies
++ {stats.unavailable} tool{stats.unavailable !== 1 ? 's are' : ' is'} unavailable due to missing dependencies. +
+
+ cd backend && source venv/bin/activate && pip install -r requirements.txt
+
+ + After installation, restart the backend server for changes to take effect. +
+
+
+ {error}
+No tools available
+
+ {Object.entries(toolsByCategory).map(([category, categoryTools]) => (
+
+ {/* Category Header */}
+
+
+ {/* Category Tools */}
+ {expandedCategories.has(category) && (
+
+ ))}
+
+ )}
+
+ {categoryTools.map((tool) => {
+ const toolLoadingState = loadingTools.get(tool.id);
+ const hasSSE = toolLoadingState !== undefined;
+
+ return (
+
+ )}
+
+
+ );
+ })}
+
+ {/* Tool Info */}
+
+
+
+
+ {/* Action Buttons */}
+
+ toggleSelectTool(tool.id)}
+ disabled={tool.status === 'loading' || tool.status === 'loaded'}
+ aria-label={`Select ${tool.name}`}
+ />
+
+
+ {getStatusIcon(tool.status)}
+ {tool.status}
+
+
+ {tool.requires_gpu && (
+ GPU Required
+ )}
+ {hasSSE && (
+ 📡 SSE
+ )}
+
+
+ + {tool.name} +
++ {tool.description} +
+ + {/* Real-time SSE progress bar */} + {hasSSE && ( +
+
+ )}
+
+ {tool.loaded_at && (
+ + ⓘ Real-time progress via SSE (estimated completion) +
++ Loaded at: {new Date(tool.loaded_at).toLocaleString()} +
+ )} + + {tool.error_message && ( ++ {tool.error_message} +
+ )} + + {tool.dependencies && tool.dependencies.length > 0 && ( +
+
+ {selectedTool?.id === tool.id && (
+
+ )}
+
+ {tool.dependencies.join(', ')}
+
+ )}
+
+ {tool.status === 'loading' ? (
+
+ ) : tool.status === 'loaded' ? (
+
+ ) : tool.status === 'unavailable' ? (
+
+ ) : (
+
+ )}
+
+
+ setName(e.target.value)}
+ placeholder="Leave blank for anonymous"
+ autoFocus
+ helperText="Patient name is optional. Leave blank to create an anonymous patient."
+ />
+
+
+
+
+
+
+
+ {/* Patient Header */}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/sidebar/RenamePatientModal.tsx b/web_platform/frontend/components/sidebar/RenamePatientModal.tsx
new file mode 100644
index 0000000..232af1e
--- /dev/null
+++ b/web_platform/frontend/components/sidebar/RenamePatientModal.tsx
@@ -0,0 +1,92 @@
+/**
+ * RenamePatientModal Component
+ *
+ * Modal for renaming a patient.
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Modal } from '../ui/Modal';
+import { Input } from '../ui/Input';
+import { Button } from '../ui/Button';
+import type { Patient } from '../../lib/types/patient';
+
+/**
+ * RenamePatientModal Component Props
+ * @property isOpen - Controls modal visibility (required)
+ * @property patient - Patient to rename (null = no patient selected)
+ * @property onClose - Callback when modal should close (required)
+ * @property onSubmit - Callback when user submits new name (required, async)
+ */
+interface RenamePatientModalProps {
+ /** Controls modal visibility */
+ isOpen: boolean;
+ /** Patient to rename (null = no patient selected) */
+ patient: Patient | null;
+ /** Callback when modal should close */
+ onClose: () => void;
+ /** Callback when user submits new name (async) */
+ onSubmit: (patientId: string, name: string | null) => Promise
+
+
+ {/* Actions Menu */}
+
+
+
+ {/* Chat List (when expanded) */}
+ {isExpanded && (
+
+ {isLoading ? (
+ onChatSelect(chat.id)}
+ />
+ ))
+ ) : (
+
+ )}
+
+
+ ) : patientChats.length > 0 ? (
+ patientChats.map((chat) => (
+
+ No chats yet
+
+ )}
+
+ setName(e.target.value)}
+ placeholder="Leave blank for anonymous"
+ autoFocus
+ helperText="Leave blank to make patient anonymous."
+ />
+
+
+
+
+
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/tool-outputs/ToolOutputPanel.tsx b/web_platform/frontend/components/tool-outputs/ToolOutputPanel.tsx
new file mode 100644
index 0000000..b44a407
--- /dev/null
+++ b/web_platform/frontend/components/tool-outputs/ToolOutputPanel.tsx
@@ -0,0 +1,118 @@
+/**
+ * ToolOutputPanel Component
+ *
+ * Right panel showing detailed tool execution information.
+ * Opens when user clicks "Show detailed tool history" in a message.
+ */
+
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { useAppStore } from '../../lib/store/appStore';
+import { getToolExecutionDetail } from '../../lib/api/tools';
+import { Spinner } from '../ui/Spinner';
+import { ToolExecutionTimeline } from './ToolExecutionTimeline';
+import { ToolResultCard } from './ToolResultCard';
+import type { ToolExecution, ToolExecutionLog, ToolExecutionResult } from '../../lib/types/tool';
+
+export function ToolOutputPanel() {
+ const {
+ isToolPanelOpen,
+ selectedToolExecutionId,
+ closeToolPanel,
+ } = useAppStore();
+
+ const [execution, setExecution] = useStateExecution Logs
+ +
+ {(logs || []).map((log) => (
+
+
+
+ ))}
+ {getLogIcon(log.logLevel)}
+
+
+
+
+ {log.logLevel}
+
+
+ {formatDateTime(log.timestamp)}
+
+
+ {log.message}
+
+
+ );
+ };
+
+ // Render VQA answer prominently
+ const renderVQAAnswer = () => {
+ if (!isVQATool || !data) return null;
+
+ const dataObj = isPlainObject(data) ? data : null;
+ if (!dataObj) return null;
+
+ const answer = dataObj.answer || dataObj.response || dataObj.text;
+ if (!answer || typeof answer !== 'string') return null;
+
+ return (
+ Pathology Predictions:
+
+ {sortedPathologies.map(([pathology, probability]) => {
+ const prob = typeof probability === 'number' ? probability : 0;
+ const percentage = (prob * 100).toFixed(1);
+ const isHighProbability = prob > 0.5;
+
+ return (
+
+
+
+ {pathology.replace(/_/g, ' ')}
+
+
+ );
+ })}
+
+
+
+
+
+ {percentage}%
+
+
+ );
+ };
+
+ // Render report sections
+ const renderReport = () => {
+ if (!isReportTool || !data) return null;
+
+ const dataObj = isPlainObject(data) ? data : null;
+ if (!dataObj) return null;
+
+ const findingsRaw = dataObj.findings || dataObj.Findings;
+ const impressionRaw = dataObj.impression || dataObj.Impression;
+
+ // Convert to strings safely
+ const findings = typeof findingsRaw === 'string' ? findingsRaw : null;
+ const impression = typeof impressionRaw === 'string' ? impressionRaw : null;
+
+ if (!findings && !impression) return null;
+
+ return (
+ Answer:
+
+
+ {answer}
+
+ {findings && (
+
+ );
+ };
+
+ // Render search results (DuckDuckGo, Web Browser)
+ const renderSearchResults = () => {
+ if (!isSearchTool || !data) return null;
+
+ const dataObj = isPlainObject(data) ? data : null;
+ if (!dataObj) return null;
+
+ // Handle error state
+ if (dataObj.error || dataObj.error_details) {
+ const errorMsg = dataObj.error || dataObj.error_details;
+ const queryText = typeof dataObj.query === 'string' ? dataObj.query : '';
+ return (
+
+
+ )}
+ {impression && (
+ Findings:
+
+
+ {findings}
+
+
+ )}
+ Impression:
+
+
+ {impression}
+
+
+ );
+ }
+
+ // Extract results array
+ const results = dataObj.results;
+ if (!Array.isArray(results) || results.length === 0) {
+ const queryText = typeof dataObj.query === 'string' ? dataObj.query : '';
+ return (
+ ❌ Search Failed
+{typeof errorMsg === 'string' ? errorMsg : 'An error occurred during search'}
+ {queryText &&Query: {queryText}
} +
+
+ );
+ }
+
+ const messageText = typeof dataObj.message === 'string' ? dataObj.message : '';
+ return (
+ No search results found.
+ {queryText &&Query: {queryText}
} +
+
+ );
+ };
+
+ return (
+ + 🔍 Search Results {messageText && ({messageText})} +
+
+ {results.map((result: { title?: string; link?: string; url?: string; snippet?: string; source?: string }, idx: number) => (
+
+ ))}
+
+
+ {/* Tool-specific formatted results */}
+ {renderClassificationResults()}
+ {renderVQAAnswer()}
+ {renderReport()}
+ {renderSearchResults()}
+
+ {/* Generated Images / Visualizations */}
+ {imagePaths.length > 0 && (
+
+ );
+}
diff --git a/web_platform/frontend/components/tools/ToolLoadingProgress.tsx b/web_platform/frontend/components/tools/ToolLoadingProgress.tsx
new file mode 100644
index 0000000..7e22d3d
--- /dev/null
+++ b/web_platform/frontend/components/tools/ToolLoadingProgress.tsx
@@ -0,0 +1,46 @@
+/**
+ * Tool Loading Progress Component
+ *
+ * Shows real-time progress during tool loading via SSE.
+ */
+
+import React from 'react';
+
+export interface ToolLoadingProgressProps {
+ progress: number; // 0-100
+ message: string;
+ isError?: boolean;
+}
+
+export function ToolLoadingProgress({
+ progress,
+ message,
+ isError = false
+}: ToolLoadingProgressProps) {
+ return (
+
+
+ )}
+
+ {/* Raw Result Data (collapsible for debugging) */}
+ {data && (
+ + {isSegmentationTool ? 'Segmentation Masks:' : + isGroundingTool ? 'Grounding Visualizations:' : + 'Generated Images:'} +
+ {/* Segmentation metadata summary if available */} + {isSegmentationTool && metadata && ( +
+ {Array.isArray(metadata.requested_organs) && metadata.requested_organs.length > 0 && (
+
+ )}
+ Requested: {metadata.requested_organs.join(', ')}
+ )}
+ {Array.isArray(metadata.processed_organs) && (
+ Detected: {metadata.processed_organs.length > 0 ? metadata.processed_organs.join(', ') : 'none'}
+ )}
+ {typeof metadata.pixel_spacing_mm === 'number' && (
+ Pixel spacing: {metadata.pixel_spacing_mm} mm
+ )}
+ {typeof metadata.threshold_used === 'number' && (
+ Threshold: {metadata.threshold_used}
+ )}
+
+ {imagePaths.map((imagePath, idx) => {
+ const imageUrl = getImageUrl(imagePath);
+ const hasFailed = !imageUrl || failedImages.has(imageUrl);
+
+ return (
+
+
+ {hasFailed ? (
+ handleImageError(imageUrl)}
+ onClick={() => imageUrl && setPreviewImage(imageUrl)}
+ />
+
+
+ )}
+
+ );
+ })}
+
+ ⚠️ Failed to load result image
+
+ ) : (
+ <>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ {/* Segmentation-specific summary (metrics or mask summary) */}
+ {isSegmentationTool && isPlainObject(data) && (
+
+ )}
+
+ {/* Image preview modal */}
+ {previewImage && (
+
+ {'metrics' in data && isPlainObject(data.metrics) ? (
+ <>
+
+ )}
+ {showRawData && (
+ Segmentation Metrics:
+ {Object.keys(data.metrics).length > 0 ? ( +
+ {Object.entries(data.metrics).map(([organ, metrics]) => {
+ const m = isPlainObject(metrics) ? metrics : {};
+ const areaCm2 = typeof m.area_cm2 === 'number' ? m.area_cm2.toFixed(2) : undefined;
+ const conf = typeof m.confidence_score === 'number' ? (m.confidence_score * 100).toFixed(1) : undefined;
+ const mean = typeof m.mean_intensity === 'number' ? m.mean_intensity.toFixed(1) : undefined;
+ return (
+
+ ) : (
+
+
+ );
+ })}
+ {organ}
+
+ {areaCm2 && Area: {areaCm2} cm²}
+ {conf && Conf: {conf}%}
+ {mean && Mean Intensity: {mean}}
+
+
+
+ )}
+
+ ) : ('mask_summary' in data || 'confidence_scores' in data) ? (
+ <>
+
+ No organ masks detected at the current threshold. The overlay image above may look unchanged.
+
+
+ 💡 Recommendation:
+ Use MedSAM2 instead - it's more robust and works with a wider variety of X-ray images. MedSAM2 uses advanced segmentation that doesn't rely on pre-trained organ detection.
+
+ Segmentation Summary:
+
+ {'mask_summary' in data && isPlainObject(data.mask_summary) && typeof data.mask_summary.total_masks === 'number' && (
+
+
+ ) : (
+ Total Masks: {data.mask_summary.total_masks}
+ )}
+ {'best_mask_score' in data && typeof data.best_mask_score === 'number' && (
+ Best Mask Score: {(data.best_mask_score * 100).toFixed(1)}%
+ )}
+ No structured segmentation metrics available.
+ )}
+
+
+ )}
+
+ {JSON.stringify(data ?? result.resultData, null, 2)}
+
+ setPreviewImage(null)}
+ >
+
+ )}
+ e.stopPropagation()}
+ >
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+ {/* Progress bar */}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Avatar.tsx b/web_platform/frontend/components/ui/Avatar.tsx
new file mode 100644
index 0000000..8cdfed3
--- /dev/null
+++ b/web_platform/frontend/components/ui/Avatar.tsx
@@ -0,0 +1,72 @@
+/**
+ * Avatar Component
+ *
+ * User/patient avatar with initials fallback.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { cn, getInitials } from '../../lib/utils/helpers';
+
+/**
+ * Avatar Component Props
+ * @property name - Name to generate initials from (required, can be null for anonymous)
+ * @property imageUrl - Optional image URL to display instead of initials
+ * @property size - Avatar size (default: 'md')
+ * @property className - Additional CSS classes
+ */
+export interface AvatarProps {
+ /** Name to generate initials from (can be null for anonymous) */
+ name: string | null;
+ /** Optional image URL to display instead of initials */
+ imageUrl?: string;
+ /** Avatar size */
+ size?: 'sm' | 'md' | 'lg' | 'xl';
+ /** Additional CSS classes */
+ className?: string;
+}
+
+export function Avatar({
+ name,
+ imageUrl,
+ size = 'md',
+ className,
+}: AvatarProps) {
+ const [imageError, setImageError] = useState(false);
+
+ const sizeStyles = {
+ sm: 'w-8 h-8 text-xs',
+ md: 'w-10 h-10 text-sm',
+ lg: 'w-12 h-12 text-base',
+ xl: 'w-16 h-16 text-xl',
+ };
+
+ const initials = getInitials(name);
+
+ // Show image if URL exists and no error, otherwise show initials
+ const shouldShowImage = imageUrl && !imageError;
+
+ return (
+
+
+
+
+ {/* Message and percentage */}
+
+
+ {message}
+
+
+ {Math.round(progress)}%
+
+
+
+ {shouldShowImage ? (
+ // eslint-disable-next-line @next/next/no-img-element -- Dynamic user-provided avatar URLs, not static assets
+ setImageError(true)}
+ />
+ ) : (
+ {initials}
+ )}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Badge.tsx b/web_platform/frontend/components/ui/Badge.tsx
new file mode 100644
index 0000000..5a6b64b
--- /dev/null
+++ b/web_platform/frontend/components/ui/Badge.tsx
@@ -0,0 +1,62 @@
+/**
+ * Badge Component
+ *
+ * Small label or tag.
+ */
+
+'use client';
+
+import React from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Badge Component Props
+ * @property children - Badge content (required)
+ * @property variant - Color/semantic variant (default: 'default')
+ * @property size - Badge size (default: 'md')
+ * @property className - Additional CSS classes
+ */
+export interface BadgeProps {
+ /** Badge content (required) */
+ children: React.ReactNode;
+ /** Color/semantic variant */
+ variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+ /** Badge size */
+ size?: 'sm' | 'md';
+ /** Additional CSS classes */
+ className?: string;
+}
+
+export function Badge({
+ children,
+ variant = 'default',
+ size = 'md',
+ className,
+}: BadgeProps) {
+ const variantStyles = {
+ default: 'bg-zinc-800 text-zinc-300',
+ success: 'bg-green-900 text-green-300',
+ warning: 'bg-yellow-900 text-yellow-300',
+ error: 'bg-red-900 text-red-300',
+ info: 'bg-blue-900 text-blue-300',
+ };
+
+ const sizeStyles = {
+ sm: 'px-2 py-0.5 text-xs',
+ md: 'px-2.5 py-1 text-sm',
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Button.tsx b/web_platform/frontend/components/ui/Button.tsx
new file mode 100644
index 0000000..325fcea
--- /dev/null
+++ b/web_platform/frontend/components/ui/Button.tsx
@@ -0,0 +1,109 @@
+/**
+ * Button Component
+ *
+ * Reusable button with multiple variants and sizes.
+ */
+
+'use client';
+
+import React from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Button Component Props
+ * @property variant - Visual style variant (default: 'primary')
+ * @property size - Button size (default: 'md')
+ * @property isLoading - Shows loading spinner and disables interaction
+ * @property leftIcon - Optional icon on the left side
+ * @property rightIcon - Optional icon on the right side
+ * @property children - Button content (required)
+ * @extends React.ButtonHTMLAttributes
+ {children}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Drawer.tsx b/web_platform/frontend/components/ui/Drawer.tsx
new file mode 100644
index 0000000..c492f71
--- /dev/null
+++ b/web_platform/frontend/components/ui/Drawer.tsx
@@ -0,0 +1,126 @@
+/**
+ * Drawer Component
+ *
+ * Slide-in panel from the side of the screen.
+ */
+
+'use client';
+
+import React, { useEffect } from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Drawer Component Props
+ * @property isOpen - Controls drawer visibility (required)
+ * @property onClose - Callback when drawer should close (required)
+ * @property title - Optional title displayed at top of drawer
+ * @property children - Drawer content (required)
+ * @property side - Which side drawer slides from (default: 'right')
+ * @property size - Drawer width size (default: 'md')
+ */
+export interface DrawerProps {
+ /** Controls drawer visibility */
+ isOpen: boolean;
+ /** Callback when drawer should close */
+ onClose: () => void;
+ /** Optional title displayed at top */
+ title?: string;
+ /** Drawer content (required) */
+ children: React.ReactNode;
+ /** Which side drawer slides from */
+ side?: 'left' | 'right';
+ /** Drawer width size */
+ size?: 'sm' | 'md' | 'lg';
+}
+
+export function Drawer({
+ isOpen,
+ onClose,
+ title,
+ children,
+ side = 'right',
+ size = 'md',
+}: DrawerProps) {
+ // Handle ESC key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && isOpen) {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleEscape);
+ document.body.style.overflow = 'hidden';
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape);
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen, onClose]);
+
+ if (!isOpen) return null;
+
+ const sizeStyles = {
+ sm: 'w-80',
+ md: 'w-96',
+ lg: 'w-1/2',
+ };
+
+ const slideStyles = {
+ left: 'left-0',
+ right: 'right-0',
+ };
+
+ return (
+
+ {/* Overlay */}
+
+
+ {/* Drawer */}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/ImageModal.tsx b/web_platform/frontend/components/ui/ImageModal.tsx
new file mode 100644
index 0000000..1fc1ea7
--- /dev/null
+++ b/web_platform/frontend/components/ui/ImageModal.tsx
@@ -0,0 +1,258 @@
+'use client';
+
+/**
+ * Full-Screen Image Modal Component
+ *
+ * Displays images in full-screen with zoom, pan, and navigation controls.
+ */
+
+import { useEffect, useCallback, useState } from 'react';
+import { Button } from './Button';
+
+export interface ImageModalProps {
+ /** Array of image URLs to display */
+ images: string[];
+ /** Index of initially selected image */
+ initialIndex?: number;
+ /** Callback when modal is closed */
+ onClose: () => void;
+ /** Whether the modal is open */
+ isOpen: boolean;
+}
+
+/**
+ * Full-screen image modal with zoom and navigation controls.
+ */
+export function ImageModal({ images, initialIndex = 0, onClose, isOpen }: ImageModalProps) {
+ const [currentIndex, setCurrentIndex] = useState(initialIndex);
+ const [zoom, setZoom] = useState(1);
+ const [pan, setPan] = useState({ x: 0, y: 0 });
+ const [isDragging, setIsDragging] = useState(false);
+ const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+
+ // Reset state when modal opens/closes and lock body scroll
+ useEffect(() => {
+ if (isOpen) {
+ // Validate initialIndex is within bounds
+ const validIndex = Math.max(0, Math.min(initialIndex, images.length - 1));
+ setCurrentIndex(validIndex);
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+
+ // Lock body scroll when modal is open
+ const originalOverflow = document.body.style.overflow;
+ document.body.style.overflow = 'hidden';
+
+ return () => {
+ document.body.style.overflow = originalOverflow;
+ };
+ }
+ }, [isOpen, initialIndex, images.length]);
+
+ // Handle keyboard shortcuts
+ const handleKeyDown = useCallback((e: KeyboardEvent) => {
+ if (!isOpen || images.length === 0) return;
+
+ switch (e.key) {
+ case 'Escape':
+ onClose();
+ break;
+ case 'ArrowLeft':
+ if (images.length > 1) {
+ setCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));
+ }
+ break;
+ case 'ArrowRight':
+ if (images.length > 1) {
+ setCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));
+ }
+ break;
+ case '+':
+ case '=':
+ setZoom((prev) => Math.min(prev + 0.5, 5));
+ break;
+ case '-':
+ case '_':
+ setZoom((prev) => Math.max(prev - 0.5, 0.5));
+ break;
+ case '0':
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+ break;
+ }
+ }, [isOpen, images.length, onClose]);
+
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [handleKeyDown]);
+
+ // Handle mouse drag for panning
+ const handleMouseDown = (e: React.MouseEvent) => {
+ if (zoom > 1) {
+ setIsDragging(true);
+ setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+ }
+ };
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (isDragging) {
+ setPan({
+ x: e.clientX - dragStart.x,
+ y: e.clientY - dragStart.y
+ });
+ }
+ };
+
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ };
+
+ // Handle wheel zoom
+ const handleWheel = (e: React.WheelEvent) => {
+ e.preventDefault();
+ const delta = e.deltaY > 0 ? -0.1 : 0.1;
+ setZoom((prev) => Math.max(0.5, Math.min(5, prev + delta)));
+ };
+
+ const handleNext = () => {
+ if (images.length > 1) {
+ setCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+ }
+ };
+
+ const handlePrevious = () => {
+ if (images.length > 1) {
+ setCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+ }
+ };
+
+ const handleZoomIn = () => {
+ setZoom((prev) => Math.min(prev + 0.5, 5));
+ };
+
+ const handleZoomOut = () => {
+ setZoom((prev) => Math.max(prev - 0.5, 0.5));
+ };
+
+ const handleReset = () => {
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+ };
+
+ // Don't render if not open or no images
+ if (!isOpen || images.length === 0) return null;
+
+ // Ensure currentIndex is valid (defensive programming)
+ const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
+
+ return (
+
+ {/* Header */}
+ {title && (
+
+
+
+ )}
+
+ {/* Content */}
+ {title}
+ +
+ {children}
+
+
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Input.tsx b/web_platform/frontend/components/ui/Input.tsx
new file mode 100644
index 0000000..ddb068c
--- /dev/null
+++ b/web_platform/frontend/components/ui/Input.tsx
@@ -0,0 +1,93 @@
+/**
+ * Input Component
+ *
+ * Reusable text input with label and error handling.
+ */
+
+'use client';
+
+import React from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Input Component Props
+ * @property label - Optional label text displayed above the input
+ * @property error - Error message to display below input (also styles input red)
+ * @property helperText - Helper text shown below input when no error
+ * @property leftIcon - Optional icon/element shown on the left inside input
+ * @property rightIcon - Optional icon/element shown on the right inside input
+ * @extends React.InputHTMLAttributes e.stopPropagation()}
+ >
+ {/* Close Button */}
+
+
+ {/* Navigation Controls */}
+ {images.length > 1 && (
+ <>
+
+
+
+ )}
+
+ {/* Zoom Controls */}
+
+
+
+
+ {Math.round(zoom * 100)}%
+
+
+
+
+
+ {/* Image Counter */}
+ {images.length > 1 && (
+
+ {safeIndex + 1} / {images.length}
+
+ )}
+
+ {/* Image */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
1 ? (isDragging ? 'grabbing' : 'grab') : 'default'
+ }}
+ draggable={false}
+ onError={(e) => {
+ e.currentTarget.style.display = 'none';
+ const container = e.currentTarget.parentElement;
+ if (container) {
+ const errorMsg = document.createElement('div');
+ errorMsg.className = 'text-red-400 text-center p-8';
+ errorMsg.textContent = `⚠️ Failed to load image: ${images[safeIndex]}`;
+ container.appendChild(errorMsg);
+ }
+ }}
+ />
+
+
+ {/* Help Text */}
+
+ ← → Navigate • + − Zoom • 0 Reset • Esc Close
+
+
+ {label && (
+
+ )}
+
+
+ );
+ }
+);
+
+Input.displayName = 'Input';
+
diff --git a/web_platform/frontend/components/ui/MarkdownRenderer.tsx b/web_platform/frontend/components/ui/MarkdownRenderer.tsx
new file mode 100644
index 0000000..a5946ee
--- /dev/null
+++ b/web_platform/frontend/components/ui/MarkdownRenderer.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+/**
+ * Markdown Renderer Component
+ *
+ * Renders markdown content with syntax highlighting.
+ */
+
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+import 'highlight.js/styles/github-dark.css';
+import { getImageUrl } from '../../lib/utils/image';
+
+export interface MarkdownRendererProps {
+ /** Markdown content to render */
+ content: string;
+ /** Additional CSS classes */
+ className?: string;
+}
+
+/**
+ * Renders markdown content with GitHub Flavored Markdown and syntax highlighting.
+ */
+export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+ return (
+
+ {leftIcon && (
+
+
+ {error && (
+
+ {leftIcon}
+
+ )}
+
+
+
+ {rightIcon && (
+
+ {rightIcon}
+
+ )}
+ {error}
+ )} + + {helperText && !error && ( +{helperText}
+ )} +
+ (
+
+ ),
+ h2: (props) => (
+
+ ),
+ h3: (props) => (
+
+ ),
+ h4: (props) => (
+
+ ),
+ h5: (props) => (
+
+ ),
+ h6: (props) => (
+
+ ),
+
+ // Paragraph styles
+ p: (props) => (
+
+ ),
+
+ // List styles
+ ul: (props) => (
+
+ ), + + // Images (using img tag for dynamic markdown src) + img: ({ src, alt, ...props }) => { + // Normalize backend image paths to include API base URL + // src can be string or Blob - only process if string + const srcString = typeof src === 'string' ? src : undefined; + const resolvedSrc = srcString ? (getImageUrl(srcString) ?? srcString) : undefined; + return ( + /* eslint-disable-next-line @next/next/no-img-element */ +
{
+ // Handle broken images gracefully
+ const img = e.currentTarget;
+ img.style.display = 'none';
+ const parent = img.parentElement;
+ if (parent && !parent.querySelector('.image-error')) {
+ const errorDiv = document.createElement('div');
+ errorDiv.className = 'image-error bg-red-900/20 border border-red-800 rounded-lg p-3 my-4';
+ errorDiv.innerHTML = `
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Modal.tsx b/web_platform/frontend/components/ui/Modal.tsx
new file mode 100644
index 0000000..7ff79b6
--- /dev/null
+++ b/web_platform/frontend/components/ui/Modal.tsx
@@ -0,0 +1,124 @@
+/**
+ * Modal Component
+ *
+ * Modal dialog with overlay and customizable content.
+ */
+
+'use client';
+
+import React, { useEffect } from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Modal Component Props
+ * @property isOpen - Controls modal visibility (required)
+ * @property onClose - Callback when modal should close (required)
+ * @property title - Optional title displayed at top of modal
+ * @property children - Modal content (required)
+ * @property size - Modal width size (default: 'md')
+ * @property showCloseButton - Show X button in top right (default: true)
+ */
+export interface ModalProps {
+ /** Controls modal visibility */
+ isOpen: boolean;
+ /** Callback when modal should close */
+ onClose: () => void;
+ /** Optional title displayed at top */
+ title?: string;
+ /** Modal content (required) */
+ children: React.ReactNode;
+ /** Modal width size */
+ size?: 'sm' | 'md' | 'lg' | 'xl';
+ /** Show X button in top right */
+ showCloseButton?: boolean;
+}
+
+export function Modal({
+ isOpen,
+ onClose,
+ title,
+ children,
+ size = 'md',
+ showCloseButton = true,
+}: ModalProps) {
+ // Handle ESC key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && isOpen) {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleEscape);
+ document.body.style.overflow = 'hidden';
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape);
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen, onClose]);
+
+ if (!isOpen) return null;
+
+ const sizeStyles = {
+ sm: 'max-w-md',
+ md: 'max-w-lg',
+ lg: 'max-w-2xl',
+ xl: 'max-w-4xl',
+ };
+
+ return (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ );
+ },
+
+ // Blockquote
+ blockquote: (props) => (
+
+ ),
+
+ // Links
+ a: (props) => (
+
+ ),
+
+ // Strong (bold) text
+ strong: (props) => (
+
+ ),
+
+ // Emphasis (italic) text
+ em: (props) => (
+
+ ),
+
+ // Tables
+ table: (props) => (
+
+
+
+ ),
+ thead: (props) => (
+
+ ),
+ th: (props) => (
+ + ), + + // Images (using img tag for dynamic markdown src) + img: ({ src, alt, ...props }) => { + // Normalize backend image paths to include API base URL + // src can be string or Blob - only process if string + const srcString = typeof src === 'string' ? src : undefined; + const resolvedSrc = srcString ? (getImageUrl(srcString) ?? srcString) : undefined; + return ( + /* eslint-disable-next-line @next/next/no-img-element */ +
⚠️ Failed to load image: ${alt || src || 'unknown'}
`; + parent.appendChild(errorDiv); + } + }} + {...props} + /> + ); + }, + }} + > + {content} +
+ {/* Overlay */}
+
+
+ {/* Modal */}
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Spinner.tsx b/web_platform/frontend/components/ui/Spinner.tsx
new file mode 100644
index 0000000..3627cbe
--- /dev/null
+++ b/web_platform/frontend/components/ui/Spinner.tsx
@@ -0,0 +1,54 @@
+/**
+ * Spinner Component
+ *
+ * Loading spinner indicator.
+ */
+
+'use client';
+
+import React from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Spinner Component Props
+ * @property size - Spinner size (default: 'md')
+ * @property className - Additional CSS classes
+ */
+export interface SpinnerProps {
+ /** Spinner size */
+ size?: 'sm' | 'md' | 'lg';
+ /** Additional CSS classes */
+ className?: string;
+}
+
+export function Spinner({ size = 'md', className }: SpinnerProps) {
+ const sizeStyles = {
+ sm: 'w-4 h-4',
+ md: 'w-8 h-8',
+ lg: 'w-12 h-12',
+ };
+
+ return (
+
+ );
+}
+
diff --git a/web_platform/frontend/components/ui/Textarea.tsx b/web_platform/frontend/components/ui/Textarea.tsx
new file mode 100644
index 0000000..00b27da
--- /dev/null
+++ b/web_platform/frontend/components/ui/Textarea.tsx
@@ -0,0 +1,72 @@
+/**
+ * Textarea Component
+ *
+ * Reusable multiline text input.
+ */
+
+'use client';
+
+import React from 'react';
+import { cn } from '../../lib/utils/helpers';
+
+/**
+ * Textarea Component Props
+ * @property label - Optional label text displayed above the textarea
+ * @property error - Error message to display below textarea (also styles textarea red)
+ * @property helperText - Helper text shown below textarea when no error
+ * @extends React.TextareaHTMLAttributes e.stopPropagation()}
+ >
+ {/* Header */}
+ {(title || showCloseButton) && (
+
+
+ {title && (
+
+ )}
+
+ {/* Content */}
+ {title}
+ )} + {showCloseButton && ( + + )} +
+ {children}
+
+
+ {label && (
+
+ )}
+
+
+
+ {error && (
+
+ );
+ }
+);
+
+Textarea.displayName = 'Textarea';
+
diff --git a/web_platform/frontend/components/ui/index.ts b/web_platform/frontend/components/ui/index.ts
new file mode 100644
index 0000000..30acf8b
--- /dev/null
+++ b/web_platform/frontend/components/ui/index.ts
@@ -0,0 +1,35 @@
+/**
+ * UI Components Index
+ *
+ * Re-export all UI primitives.
+ */
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+
+export { Card } from './Card';
+export type { CardProps } from './Card';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+
+export { Spinner } from './Spinner';
+export { ImageModal } from './ImageModal';
+export { MarkdownRenderer } from './MarkdownRenderer';
+export type { SpinnerProps } from './Spinner';
+
diff --git a/web_platform/frontend/eslint.config.mjs b/web_platform/frontend/eslint.config.mjs
new file mode 100644
index 0000000..da4c5dd
--- /dev/null
+++ b/web_platform/frontend/eslint.config.mjs
@@ -0,0 +1,40 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends("next/core-web-vitals", "next/typescript"),
+ {
+ ignores: [
+ "node_modules/**",
+ ".next/**",
+ "out/**",
+ "build/**",
+ "next-env.d.ts",
+ "lib/types/openapi.d.ts", // Generated file
+ ],
+ },
+ {
+ rules: {
+ // Allow 'any' in transformer/API client code where we're bridging between
+ // OpenAPI-generated types and our UI types
+ "@typescript-eslint/no-explicit-any": ["warn", {
+ "ignoreRestArgs": true,
+ "fixToUnknown": false
+ }],
+ // Allow unescaped quotes in JSX
+ "react/no-unescaped-entities": "off",
+ // Allow img tags (we use them for dynamic backend-served images)
+ "@next/next/no-img-element": "warn",
+ },
+ },
+];
+
+export default eslintConfig;
diff --git a/web_platform/frontend/lib/api/auth.ts b/web_platform/frontend/lib/api/auth.ts
new file mode 100644
index 0000000..2984791
--- /dev/null
+++ b/web_platform/frontend/lib/api/auth.ts
@@ -0,0 +1,63 @@
+/**
+ * Auth API Functions
+ *
+ * API calls for authentication (login, register, logout).
+ */
+
+import { openapiClient, authHeaders } from '../openapi/client';
+import type {
+ Doctor,
+ DoctorRegistration,
+ DoctorLogin,
+ AuthSession,
+} from '../types/doctor';
+import type { ApiTokenResponse, ApiDoctorResponse } from '../types/api';
+import { toAuthSession, toUiDoctor } from '../openapi/transformers';
+
+/**
+ * Register a new doctor
+ */
+export async function registerDoctor(
+ data: DoctorRegistration
+): Promise{error}
+ )} + + {helperText && !error && ( +{helperText}
+ )} +