@omniradiology/omnirad 0.1.3

package/components/admin/AuditLogTable.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+
+interface AuditEntry {
+    id: string;
+    actorName: string;
+    actorRole: string;
+    actorType: string;
+    action: string;
+    resourceType: string;
+    resourceId: string | null;
+    patientId: string | null;
+    ipAddress: string;
+    success: boolean;
+    reason: string | null;
+    metadata: Record<string, any> | null;
+    createdAt: string;
+}
+
+interface Pagination {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+}
+
+const ACTION_COLORS: Record<string, string> = {
+    "auth.login.success": "#22c55e",
+    "auth.login.failed": "#ef4444",
+    "patient.create": "#3b82f6",
+    "patient.view": "#8b5cf6",
+    "patient.update": "#f59e0b",
+    "patient.delete": "#ef4444",
+    "patient.export": "#06b6d4",
+    "patient.anonymize": "#dc2626",
+    "patient.restrict": "#f97316",
+    "report.create": "#3b82f6",
+    "report.view": "#8b5cf6",
+    "report.update": "#f59e0b",
+    "report.finalize": "#22c55e",
+    "report.delete": "#ef4444",
+    "settings.update": "#f59e0b",
+    "data.clear": "#dc2626",
+    "data.wipe": "#dc2626",
+    "user.create": "#3b82f6",
+    "user.update": "#f59e0b",
+    "user.delete": "#ef4444",
+    "compliance.settings.update": "#06b6d4",
+    "copilot.message": "#8b5cf6",
+    "segmentation.request": "#8b5cf6",
+};
+
+export default function AuditLogTable() {
+    const [entries, setEntries] = useState<AuditEntry[]>([]);
+    const [pagination, setPagination] = useState<Pagination>({ page: 1, limit: 25, total: 0, totalPages: 0 });
+    const [loading, setLoading] = useState(true);
+    const [filters, setFilters] = useState({
+        action: "",
+        resourceType: "",
+        startDate: "",
+        endDate: "",
+        success: "" as "" | "true" | "false",
+    });
+
+    const fetchLogs = useCallback(async (page = 1) => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            params.set("page", String(page));
+            params.set("limit", "25");
+            if (filters.action) params.set("action", filters.action);
+            if (filters.resourceType) params.set("resourceType", filters.resourceType);
+            if (filters.startDate) params.set("startDate", filters.startDate);
+            if (filters.endDate) params.set("endDate", filters.endDate);
+            if (filters.success) params.set("success", filters.success);
+
+            const res = await fetch(`/api/compliance/audit?${params.toString()}`);
+            if (res.ok) {
+                const data = await res.json();
+                setEntries(data.data);
+                setPagination(data.pagination);
+            }
+        } catch (err) {
+            console.error("Failed to fetch audit logs:", err);
+        } finally {
+            setLoading(false);
+        }
+    }, [filters]);
+
+    useEffect(() => {
+        fetchLogs(1);
+    }, [fetchLogs]);
+
+    const formatDate = (iso: string) => {
+        try {
+            return new Date(iso).toLocaleString();
+        } catch { return iso; }
+    };
+
+    const getActionColor = (action: string) => ACTION_COLORS[action] || "#6b7280";
+
+    return (
+        <div style={{ width: "100%" }}>
+            {/* Filters */}
+            <div style={{
+                display: "flex", gap: "10px", marginBottom: "16px", flexWrap: "wrap",
+                padding: "12px", borderRadius: "8px",
+                background: "var(--card-bg, rgba(255,255,255,0.05))",
+                border: "1px solid var(--border-color, rgba(255,255,255,0.1))"
+            }}>
+                <input
+                    placeholder="Filter by action..."
+                    value={filters.action}
+                    onChange={(e) => setFilters(f => ({ ...f, action: e.target.value }))}
+                    style={filterInputStyle}
+                />
+                <select
+                    value={filters.resourceType}
+                    onChange={(e) => setFilters(f => ({ ...f, resourceType: e.target.value }))}
+                    style={filterInputStyle}
+                >
+                    <option value="">All Resources</option>
+                    <option value="patient">Patient</option>
+                    <option value="report">Report</option>
+                    <option value="auth">Auth</option>
+                    <option value="config">Config</option>
+                    <option value="ai">AI</option>
+                    <option value="fhir">FHIR</option>
+                    <option value="user">User</option>
+                </select>
+                <select
+                    value={filters.success}
+                    onChange={(e) => setFilters(f => ({ ...f, success: e.target.value as any }))}
+                    style={filterInputStyle}
+                >
+                    <option value="">All Results</option>
+                    <option value="true">Success</option>
+                    <option value="false">Failed</option>
+                </select>
+                <input
+                    type="date"
+                    value={filters.startDate}
+                    onChange={(e) => setFilters(f => ({ ...f, startDate: e.target.value }))}
+                    style={filterInputStyle}
+                    title="Start date"
+                />
+                <input
+                    type="date"
+                    value={filters.endDate}
+                    onChange={(e) => setFilters(f => ({ ...f, endDate: e.target.value }))}
+                    style={filterInputStyle}
+                    title="End date"
+                />
+            </div>
+
+            {/* Table */}
+            <div style={{ overflowX: "auto", borderRadius: "8px", border: "1px solid var(--border-color, rgba(255,255,255,0.1))" }}>
+                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "13px" }}>
+                    <thead>
+                        <tr style={{ background: "var(--card-bg, rgba(255,255,255,0.05))" }}>
+                            <th style={thStyle}>Timestamp</th>
+                            <th style={thStyle}>User</th>
+                            <th style={thStyle}>Action</th>
+                            <th style={thStyle}>Resource</th>
+                            <th style={thStyle}>Status</th>
+                            <th style={thStyle}>IP</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {loading ? (
+                            <tr><td colSpan={6} style={{ padding: "24px", textAlign: "center", opacity: 0.5 }}>Loading...</td></tr>
+                        ) : entries.length === 0 ? (
+                            <tr><td colSpan={6} style={{ padding: "24px", textAlign: "center", opacity: 0.5 }}>No audit logs found</td></tr>
+                        ) : entries.map((entry) => (
+                            <tr key={entry.id} style={{
+                                borderBottom: "1px solid var(--border-color, rgba(255,255,255,0.06))",
+                                transition: "background 0.15s",
+                            }}
+                            onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(255,255,255,0.03)")}
+                            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+                            >
+                                <td style={tdStyle}>{formatDate(entry.createdAt)}</td>
+                                <td style={tdStyle}>
+                                    <div style={{ fontWeight: 500 }}>{entry.actorName}</div>
+                                    <div style={{ fontSize: "11px", opacity: 0.6 }}>{entry.actorRole}</div>
+                                </td>
+                                <td style={tdStyle}>
+                                    <span style={{
+                                        background: `${getActionColor(entry.action)}20`,
+                                        color: getActionColor(entry.action),
+                                        padding: "2px 8px",
+                                        borderRadius: "12px",
+                                        fontSize: "12px",
+                                        fontWeight: 500,
+                                    }}>
+                                        {entry.action}
+                                    </span>
+                                </td>
+                                <td style={tdStyle}>
+                                    <span style={{ opacity: 0.7 }}>{entry.resourceType}</span>
+                                    {entry.resourceId && (
+                                        <span style={{ fontSize: "11px", opacity: 0.4, marginLeft: "4px" }}>
+                                            {entry.resourceId.substring(0, 8)}...
+                                        </span>
+                                    )}
+                                </td>
+                                <td style={tdStyle}>
+                                    <span style={{
+                                        color: entry.success ? "#22c55e" : "#ef4444",
+                                        fontWeight: 500,
+                                    }}>
+                                        {entry.success ? "✓" : "✗"}
+                                    </span>
+                                    {entry.reason && (
+                                        <span style={{ fontSize: "11px", opacity: 0.5, marginLeft: "4px" }}>
+                                            {entry.reason.substring(0, 30)}
+                                        </span>
+                                    )}
+                                </td>
+                                <td style={{ ...tdStyle, fontSize: "11px", opacity: 0.5, fontFamily: "monospace" }}>
+                                    {entry.ipAddress}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Pagination */}
+            {pagination.totalPages > 1 && (
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "12px", fontSize: "13px" }}>
+                    <span style={{ opacity: 0.6 }}>
+                        Showing {((pagination.page - 1) * pagination.limit) + 1}–{Math.min(pagination.page * pagination.limit, pagination.total)} of {pagination.total}
+                    </span>
+                    <div style={{ display: "flex", gap: "6px" }}>
+                        <button
+                            onClick={() => fetchLogs(pagination.page - 1)}
+                            disabled={pagination.page <= 1}
+                            style={paginationBtnStyle}
+                        >
+                            ← Prev
+                        </button>
+                        <button
+                            onClick={() => fetchLogs(pagination.page + 1)}
+                            disabled={pagination.page >= pagination.totalPages}
+                            style={paginationBtnStyle}
+                        >
+                            Next →
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const thStyle: React.CSSProperties = {
+    padding: "10px 12px",
+    textAlign: "left",
+    fontWeight: 600,
+    fontSize: "12px",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    opacity: 0.7,
+    borderBottom: "1px solid var(--border-color, rgba(255,255,255,0.1))",
+};
+
+const tdStyle: React.CSSProperties = {
+    padding: "10px 12px",
+    verticalAlign: "middle",
+};
+
+const filterInputStyle: React.CSSProperties = {
+    padding: "6px 10px",
+    borderRadius: "6px",
+    border: "1px solid var(--border-color, rgba(255,255,255,0.15))",
+    background: "var(--input-bg, rgba(255,255,255,0.05))",
+    color: "inherit",
+    fontSize: "13px",
+    flex: "1",
+    minWidth: "120px",
+};
+
+const paginationBtnStyle: React.CSSProperties = {
+    padding: "6px 12px",
+    borderRadius: "6px",
+    border: "1px solid var(--border-color, rgba(255,255,255,0.15))",
+    background: "var(--card-bg, rgba(255,255,255,0.05))",
+    color: "inherit",
+    cursor: "pointer",
+    fontSize: "13px",
+};

package/components/copilot/ActivityIndicator.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useState, useEffect, useRef, useMemo } from "react";
+import { ActivityState } from "@/types/copilot";
+import {
+    Brain,
+    Search,
+    FileText,
+    GitCompare,
+    BarChart3,
+    Monitor,
+    Crosshair,
+    PenTool,
+    Check,
+    Loader2,
+    Bot,
+} from "lucide-react";
+
+// ─── Status → Icon mapping ──────────────────────────────────────────────────
+const STATUS_ICONS: Record<string, React.ReactNode> = {
+    thinking: <Brain size={14} />,
+    searching: <Search size={14} />,
+    fetching: <FileText size={14} />,
+    comparing: <GitCompare size={14} />,
+    analyzing: <BarChart3 size={14} />,
+    viewer: <Monitor size={14} />,
+    segmenting: <Crosshair size={14} />,
+    generating: <PenTool size={14} />,
+    working: <Loader2 size={14} />,
+};
+
+// ─── Status → gradient color mapping ────────────────────────────────────────
+const STATUS_COLORS: Record<string, { from: string; to: string; glow: string }> = {
+    thinking: { from: "#a78bfa", to: "#818cf8", glow: "rgba(167,139,250,0.3)" },
+    searching: { from: "#38bdf8", to: "#22d3ee", glow: "rgba(56,189,248,0.3)" },
+    fetching: { from: "#34d399", to: "#10b981", glow: "rgba(52,211,153,0.3)" },
+    comparing: { from: "#fb923c", to: "#f97316", glow: "rgba(251,146,60,0.3)" },
+    analyzing: { from: "#60a5fa", to: "#3b82f6", glow: "rgba(96,165,250,0.3)" },
+    viewer: { from: "#a78bfa", to: "#8b5cf6", glow: "rgba(167,139,250,0.3)" },
+    segmenting: { from: "#f472b6", to: "#ec4899", glow: "rgba(244,114,182,0.3)" },
+    generating: { from: "#34d399", to: "#10b981", glow: "rgba(52,211,153,0.3)" },
+    working: { from: "#94a3b8", to: "#64748b", glow: "rgba(148,163,184,0.3)" },
+};
+
+// Inject keyframe animations once
+const STYLE_ID = "activity-indicator-styles";
+function ensureStyles() {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+        @keyframes actStepFadeIn {
+            from { opacity: 0; transform: translateX(-4px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        @keyframes actIconPulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.1); opacity: 0.85; }
+        }
+        @keyframes actDotBounce {
+            0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+            40% { opacity: 1; transform: scale(1.2); }
+        }
+        @keyframes actFadeIn {
+            from { opacity: 0; }
+            to { opacity: 0.6; }
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+interface ActivityIndicatorProps {
+    activityState: ActivityState;
+}
+
+export default function ActivityIndicator({ activityState }: ActivityIndicatorProps) {
+    const { isActive, currentStatus, currentLabel, completedSteps, startedAt } = activityState;
+    const [elapsed, setElapsed] = useState(0);
+    const [isCollapsing, setIsCollapsing] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Inject keyframe styles on mount
+    useEffect(() => { ensureStyles(); }, []);
+
+    // Animate in when becoming active
+    useEffect(() => {
+        if (isActive) {
+            setIsCollapsing(false);
+            requestAnimationFrame(() => setIsVisible(true));
+        } else if (isVisible) {
+            setIsCollapsing(true);
+            const timer = setTimeout(() => {
+                setIsVisible(false);
+                setIsCollapsing(false);
+            }, 400);
+            return () => clearTimeout(timer);
+        }
+    }, [isActive]);
+
+    // Elapsed timer
+    useEffect(() => {
+        if (!isActive || !startedAt) {
+            setElapsed(0);
+            return;
+        }
+        const interval = setInterval(() => {
+            setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [isActive, startedAt]);
+
+    const colors = useMemo(
+        () => STATUS_COLORS[currentStatus] || STATUS_COLORS.working,
+        [currentStatus]
+    );
+    const icon = STATUS_ICONS[currentStatus] || STATUS_ICONS.working;
+
+    if (!isVisible && !isActive) return null;
+
+    const formatElapsed = (s: number) => {
+        if (s < 60) return `${s}s`;
+        return `${Math.floor(s / 60)}m ${s % 60}s`;
+    };
+
+    return (
+        <div className="flex gap-3">
+            {/* Bot avatar */}
+            <div className="shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-emerald-500/20 to-cyan-500/20 flex items-center justify-center">
+                <Bot size={16} className="text-emerald-400" />
+            </div>
+
+            {/* Activity card */}
+            <div
+                style={{
+                    opacity: isCollapsing ? 0 : 1,
+                    transform: isCollapsing ? "translateY(-8px) scale(0.95)" : "translateY(0) scale(1)",
+                    maxHeight: isCollapsing ? "0px" : "300px",
+                    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+                    overflow: "hidden",
+                }}
+                className="bg-bg-panel border border-border-card rounded-2xl rounded-bl-md min-w-[200px] max-w-[320px]"
+            >
+                <div className="flex flex-col gap-1.5 px-4 py-3">
+                    {/* Completed steps */}
+                    {completedSteps.length > 0 && (
+                        <div className="flex flex-col gap-1">
+                            {completedSteps.map((step, i) => (
+                                <div
+                                    key={i}
+                                    className="flex items-center gap-2"
+                                    style={{
+                                        animation: `actStepFadeIn 0.3s ease-out ${i * 50}ms forwards`,
+                                        opacity: 0,
+                                    }}
+                                >
+                                    <span className="flex items-center justify-center w-[18px] h-[18px] rounded-full shrink-0"
+                                        style={{ background: "rgba(52, 211, 153, 0.15)" }}>
+                                        <Check size={10} strokeWidth={3} className="text-emerald-400" />
+                                    </span>
+                                    <span className="text-xs text-text-muted line-through"
+                                        style={{ textDecorationColor: "rgba(100, 116, 139, 0.3)" }}>
+                                        {step.label}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Current active step */}
+                    {currentLabel && (
+                        <div className="flex items-center gap-2 py-1">
+                            <span
+                                className="flex items-center justify-center w-[22px] h-[22px] rounded-md text-white shrink-0"
+                                style={{
+                                    background: `linear-gradient(135deg, ${colors.from}, ${colors.to})`,
+                                    boxShadow: `0 0 12px ${colors.glow}`,
+                                    animation: "actIconPulse 2s ease-in-out infinite",
+                                }}
+                            >
+                                {icon}
+                            </span>
+                            <span className="text-[13px] font-medium text-text-primary whitespace-nowrap">
+                                {currentLabel}
+                            </span>
+                            <span className="flex gap-[3px] items-center ml-0.5">
+                                {[0, 200, 400].map(delay => (
+                                    <span
+                                        key={delay}
+                                        className="w-1 h-1 rounded-full bg-text-muted"
+                                        style={{ animation: `actDotBounce 1.4s ease-in-out ${delay}ms infinite` }}
+                                    />
+                                ))}
+                            </span>
+                        </div>
+                    )}
+
+                    {/* Elapsed timer — shows after 2 seconds */}
+                    {elapsed > 2 && (
+                        <div
+                            className="text-[10px] text-text-muted text-right mt-0.5"
+                            style={{
+                                fontVariantNumeric: "tabular-nums",
+                                animation: "actFadeIn 0.5s ease-out",
+                                opacity: 0.6,
+                            }}
+                        >
+                            {formatElapsed(elapsed)}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/components/copilot/ChatHistoryPanel.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Clock, MessageSquare, Trash2, ChevronRight, User } from "lucide-react";
+
+interface SessionHistory {
+    sessionId: string;
+    patientId: string | null;
+    patientName: string | null;
+    lastMessage: string;
+    messageCount: number;
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface ChatHistoryPanelProps {
+    onSelectSession: (sessionId: string) => void;
+    onClose: () => void;
+}
+
+export default function ChatHistoryPanel({ onSelectSession, onClose }: ChatHistoryPanelProps) {
+    const [sessions, setSessions] = useState<SessionHistory[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const fetchHistory = () => {
+        setIsLoading(true);
+        fetch("/api/copilot/history")
+            .then(res => res.json())
+            .then(data => {
+                if (Array.isArray(data)) {
+                    setSessions(data);
+                }
+            })
+            .catch(err => console.error("Error fetching copilot history:", err))
+            .finally(() => setIsLoading(false));
+    };
+
+    useEffect(() => {
+        fetchHistory();
+    }, []);
+
+    const handleClearAll = async () => {
+        if (!confirm("Are you sure you want to clear all Copilot chat history? This cannot be undone.")) return;
+        
+        try {
+            await fetch("/api/copilot/history", { method: "DELETE" });
+            setSessions([]);
+        } catch (err) {
+            console.error("Error clearing history:", err);
+            alert("Failed to clear history.");
+        }
+    };
+
+    // Format relative time (e.g., "2 hours ago")
+    const getRelativeTime = (dateStr: string) => {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+        
+        if (diffInSeconds < 60) return "Just now";
+        if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+        if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+        if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
+        return date.toLocaleDateString();
+    };
+
+    return (
+        <div className="absolute inset-0 z-50 bg-bg-surface flex flex-col animate-in slide-in-from-right-4 duration-200">
+            {/* Header */}
+            <div className="shrink-0 px-5 py-4 border-b border-border-primary flex items-center justify-between bg-bg-panel/50">
+                <div className="flex items-center gap-2">
+                    <button 
+                        onClick={onClose}
+                        className="p-1 -ml-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-black/5 transition-all"
+                    >
+                        <ChevronRight size={20} className="rotate-180" />
+                    </button>
+                    <h3 className="text-sm font-bold text-text-heading flex items-center gap-2">
+                        <Clock size={16} className="text-primary" />
+                        Chat History
+                    </h3>
+                </div>
+                {sessions.length > 0 && (
+                    <button
+                        onClick={handleClearAll}
+                        className="text-xs flex items-center gap-1.5 text-text-muted hover:text-red-500 transition-colors px-2 py-1 rounded"
+                    >
+                        <Trash2 size={14} />
+                        Clear All
+                    </button>
+                )}
+            </div>
+
+            {/* List */}
+            <div className="flex-1 overflow-y-auto p-3 space-y-2">
+                {isLoading ? (
+                    <div className="flex justify-center p-8 text-text-muted">
+                        <div className="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
+                    </div>
+                ) : sessions.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center p-12 text-center text-text-muted">
+                        <MessageSquare size={32} className="opacity-20 mb-3" />
+                        <p className="text-sm">No chat history found.</p>
+                    </div>
+                ) : (
+                    sessions.map(session => (
+                        <button
+                            key={session.sessionId}
+                            onClick={() => onSelectSession(session.sessionId)}
+                            className="w-full text-left p-3 rounded-xl border border-border-card bg-bg-panel hover:border-primary/30 hover:bg-primary/5 transition-all group"
+                        >
+                            <div className="flex justify-between items-start mb-1.5">
+                                <div className="flex items-center gap-1.5 text-xs font-semibold text-text-heading">
+                                    <MessageSquare size={12} className="text-primary" />
+                                    {session.messageCount} messages
+                                </div>
+                                <span className="text-[10px] text-text-muted font-medium">
+                                    {getRelativeTime(session.updatedAt)}
+                                </span>
+                            </div>
+                            
+                            <p className="text-sm text-text-primary line-clamp-2 leading-relaxed mb-2">
+                                {session.lastMessage || "No text"}
+                            </p>
+                            
+                            {session.patientId && (
+                                <div className="flex items-center gap-1.5 text-xs text-text-secondary bg-black/5 dark:bg-white/5 w-fit px-2 py-1 rounded-md">
+                                    <User size={12} />
+                                    <span className="truncate max-w-[150px]">
+                                        {session.patientName || session.patientId}
+                                    </span>
+                                </div>
+                            )}
+                        </button>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}