@omniradiology/omnirad 0.1.3

package/app/api/settings/test-supabase/route.ts

@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@supabase/supabase-js";
+
+/**
+ * POST /api/settings/test-supabase
+ *
+ * Tests a Supabase connection with the provided URL and anon key.
+ * Returns success status, report count, and whether the patients table exists.
+ */
+export async function POST(request: NextRequest) {
+    try {
+        const { supabaseUrl, supabaseAnonKey } = await request.json();
+
+        if (!supabaseUrl?.trim() || !supabaseAnonKey?.trim()) {
+            return NextResponse.json(
+                { success: false, error: "Both Project URL and Anon Key are required." },
+                { status: 400 }
+            );
+        }
+
+        // Validate URL format
+        try {
+            const url = new URL(supabaseUrl.trim());
+            if (url.protocol !== "http:" && url.protocol !== "https:") {
+                throw new Error("Invalid protocol");
+            }
+        } catch {
+            return NextResponse.json(
+                { success: false, error: "Invalid URL format. Expected https://your-project.supabase.co" },
+                { status: 400 }
+            );
+        }
+
+        const client = createClient(supabaseUrl.trim(), supabaseAnonKey.trim());
+
+        // 1. Test: query the reports table
+        let reportCount = 0;
+        let reportsTableExists = false;
+        const { data: reports, error: reportsError } = await client
+            .from("reports")
+            .select("id", { count: "exact", head: true });
+
+        if (reportsError) {
+            // Check if the error is "table doesn't exist" vs auth/network error
+            const msg = reportsError.message?.toLowerCase() || "";
+            const code = reportsError.code || "";
+
+            if (msg.includes("does not exist") || code === "42P01") {
+                // Table doesn't exist yet — connection works but schema not set up
+                return NextResponse.json({
+                    success: true,
+                    connected: true,
+                    reportsTableExists: false,
+                    patientsTableExists: false,
+                    reportCount: 0,
+                    message: "Connected to Supabase, but the reports table does not exist yet. Please run the SQL setup script.",
+                });
+            }
+
+            // Auth or network error
+            return NextResponse.json({
+                success: false,
+                error: `Connection failed: ${reportsError.message}`,
+                hint: reportsError.hint || undefined,
+            });
+        }
+
+        reportsTableExists = true;
+        // The count is returned via the response header when using head: true
+        // We need to use a different approach to get the count
+        const { count } = await client
+            .from("reports")
+            .select("*", { count: "exact", head: true });
+        reportCount = count ?? 0;
+
+        // 2. Test: check if patients table exists
+        let patientsTableExists = false;
+        const { error: patientsError } = await client
+            .from("patients")
+            .select("id", { count: "exact", head: true });
+
+        if (!patientsError) {
+            patientsTableExists = true;
+        }
+
+        return NextResponse.json({
+            success: true,
+            connected: true,
+            reportsTableExists,
+            patientsTableExists,
+            reportCount,
+            message: patientsTableExists
+                ? `Connected! ${reportCount} report(s) in cloud.`
+                : `Connected! ${reportCount} report(s) found. Patients table missing — run the full SQL setup for patient sync.`,
+        });
+    } catch (err) {
+        console.error("[API] test-supabase error:", err);
+        return NextResponse.json(
+            { success: false, error: `Unexpected error: ${err instanceof Error ? err.message : String(err)}` },
+            { status: 500 }
+        );
+    }
+}

package/app/api/upload/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+import path from "path";
+import fs from "fs";
+
+const UPLOAD_DIR = path.join(process.cwd(), "public", "uploads");
+const MAX_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/svg+xml", "image/webp"];
+
+export async function POST(request: NextRequest) {
+    try {
+        const formData = await request.formData();
+        const file = formData.get("file") as File | null;
+
+        if (!file) {
+            return NextResponse.json({ error: "No file provided" }, { status: 400 });
+        }
+
+        if (!ALLOWED_TYPES.includes(file.type)) {
+            return NextResponse.json({ error: "Invalid file type. Only images are allowed." }, { status: 400 });
+        }
+
+        if (file.size > MAX_SIZE) {
+            return NextResponse.json({ error: "File too large. Maximum size is 5MB." }, { status: 400 });
+        }
+
+        // Ensure upload directory exists
+        if (!fs.existsSync(UPLOAD_DIR)) {
+            fs.mkdirSync(UPLOAD_DIR, { recursive: true });
+        }
+
+        // Generate unique filename
+        const ext = path.extname(file.name) || ".png";
+        const baseName = path.basename(file.name, ext).replace(/[^a-zA-Z0-9_-]/g, "_");
+        const uniqueName = `${baseName}_${Date.now()}${ext}`;
+        const filePath = path.join(UPLOAD_DIR, uniqueName);
+
+        // Write file
+        const bytes = await file.arrayBuffer();
+        fs.writeFileSync(filePath, Buffer.from(bytes));
+
+        // Return the public URL path
+        const publicUrl = `/uploads/${uniqueName}`;
+        return NextResponse.json({ success: true, url: publicUrl, filename: uniqueName });
+    } catch (error) {
+        console.error("[API] Upload error:", error);
+        return NextResponse.json({ error: "Upload failed" }, { status: 500 });
+    }
+}

package/app/copilot/page.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import WorkspaceLayout from "@/components/copilot/WorkspaceLayout";
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+
+function CopilotContent() {
+    const searchParams = useSearchParams();
+    const patientId = searchParams.get("patientId") || undefined;
+    const reportId = searchParams.get("reportId") || undefined;
+
+    return (
+        <WorkspaceLayout
+            initialPatientId={patientId}
+            initialReportId={reportId}
+        />
+    );
+}
+
+export default function CopilotPage() {
+    return (
+        <Suspense fallback={
+            <div className="flex items-center justify-center h-full">
+                <div className="text-text-muted animate-pulse">Loading AI Copilot...</div>
+            </div>
+        }>
+            <CopilotContent />
+        </Suspense>
+    );
+}

package/app/globals.css

@@ -0,0 +1,141 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    /* Background Colors (Soft Light Mode - No Pure White) */
+    --bg-primary: #e2e8f0;
+    /* Slate 200 */
+    --bg-surface: #f1f5f9;
+    /* Slate 100 */
+    --bg-panel: #cbd5e1;
+    /* Slate 300 for inputs/inner panels */
+
+    /* Text Colors (Light Mode - using Dark Mode background colors for harmony) */
+    --text-heading: #0B1A2A;
+    /* Dark mode bg-panel */
+    --text-primary: #0F1E33;
+    /* Dark mode bg-primary */
+    --text-secondary: #23324A;
+    /* Dark mode border-card */
+    --text-muted: #4b5563;
+    /* Gray 600 */
+
+    /* Border Colors (Light Mode) */
+    --border-primary: #94a3b8;
+    /* Slate 400 */
+    --border-card: #cbd5e1;
+    /* Slate 300 */
+  }
+
+  .dark {
+    /* Background Colors (Dark Mode) */
+    --bg-primary: #0F1E33;
+    --bg-surface: #111827;
+    --bg-panel: #0B1A2A;
+
+    /* Text Colors (Dark Mode) */
+    --text-heading: #FFFFFF;
+    --text-primary: #E5E7EB;
+    --text-secondary: #9CA3AF;
+    --text-muted: #6B7280;
+
+    /* Border Colors (Dark Mode) */
+    --border-primary: #1F2937;
+    --border-card: #23324A;
+  }
+}
+
+@theme {
+  /* Brand Colors */
+  --color-primary: #3B82F6;
+  --color-primary-hover: #2563EB;
+  --color-primary-main: var(--color-primary);
+  --color-primary-dark: var(--color-primary-hover);
+
+  /* Status Colors */
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-danger: #EF4444;
+  --color-info: #38BDF8;
+
+  /* Background Colors */
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-panel: var(--bg-panel);
+
+  /* Text Colors */
+  --color-text-heading: var(--text-heading);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted: var(--text-muted);
+
+  /* Border Colors */
+  --color-border-primary: var(--border-primary);
+  --color-border-card: var(--border-card);
+
+  /* Overrides for PDF Generation Compatibility (html2canvas) */
+  /* Blue */
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+
+  /* Green */
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+
+  /* Red */
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+
+  /* Yellow/Orange */
+  --color-yellow-100: #fef9c3;
+  --color-yellow-500: #eab308;
+  --color-yellow-800: #854d0e;
+  --color-orange-600: #ea580c;
+
+  /* Gray */
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-700: #374151;
+}
+
+/* Custom Base Styles */
+body {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Scrollbar Styling for Dark Theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-surface);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-card);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}

package/app/history/page.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import { getReports } from "@/lib/api";
+import { ReportData } from "@/types";
+import { Button } from "@/components/ui/basic";
+import { Badge } from "@/components/ui/badge";
+import { FileText, Calendar, User, Clock, ChevronRight, Search, Filter, Database } from "lucide-react";
+import { ReportView } from "@/components/dashboard/ReportView";
+
+export default function HistoryPage() {
+    const [reports, setReports] = React.useState<any[]>([]);
+    const [loading, setLoading] = React.useState(true);
+    const [selectedReportId, setSelectedReportId] = React.useState<string | null>(null);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [sourceFilter, setSourceFilter] = React.useState<string>("Local SQLite");
+    React.useEffect(() => {
+        loadReports();
+    }, []);
+
+    const loadReports = async () => {
+        setLoading(true);
+        try {
+            const allReports = await getReports();
+
+            // Sort by Date DESC (Newest First)
+            allReports.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+
+            setReports(allReports || []);
+        } catch (err) {
+            console.error("Error loading reports:", err);
+            setReports([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Filter reports based on search and source
+    const filteredReports = reports.filter(report => {
+        const reportData = report.report_data;
+        if (!reportData) return false;
+
+        // Search filter
+        const matchesSearch = searchQuery === "" ||
+            reportData.patient?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            reportData.study?.examination?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            reportData.study?.modality?.toLowerCase().includes(searchQuery.toLowerCase());
+
+        // Source filter
+        let matchesSource = false;
+        if (sourceFilter === "Local SQLite") {
+            // Include 'Local' and 'Synced' (since Synced means it's available locally too)
+            matchesSource = report._source === 'Local' || report._source === 'Synced';
+        } else if (sourceFilter === "Supabase Cloud") {
+            // Include 'Supabase' and 'Synced' (since Synced means it's available in cloud too)
+            matchesSource = report._source === 'Supabase' || report._source === 'Synced';
+        }
+
+        return matchesSearch && matchesSource;
+    });
+
+    const selectedReportObj = reports.find(r => r.id === selectedReportId);
+
+    if (selectedReportObj) {
+        return (
+            <div className="h-full flex flex-col p-4 bg-bg-primary overflow-hidden">
+                <Button variant="ghost" onClick={() => setSelectedReportId(null)} className="mb-2 self-start gap-2 text-text-secondary hover:text-text-primary">
+                    ← Back to History
+                </Button>
+                <div className="flex-1 overflow-hidden rounded-xl border border-border-primary bg-bg-surface shadow-sm">
+                    <ReportView
+                        report={selectedReportObj.report_data}
+                        onNewPatient={() => setSelectedReportId(null)}
+                        reportId={selectedReportObj.id}
+                        onStatusChange={loadReports}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-6 h-full flex flex-col gap-6 overflow-hidden bg-bg-primary text-text-primary font-sans">
+            {/* Header Section */}
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <div>
+                    <h2 className="text-2xl font-bold text-text-heading tracking-tight">Report History</h2>
+                    <p className="text-text-secondary text-sm">Manage and view your generated radiology reports.</p>
+                </div>
+            </div>
+
+            {/* Controls Bar */}
+            <div className="flex flex-col md:flex-row gap-4">
+                <div className="flex-1 relative group">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted group-focus-within:text-primary-main transition-colors" />
+                    <input
+                        type="text"
+                        placeholder="Search patient, modality, or exam..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="w-full pl-10 pr-4 py-2.5 bg-bg-surface border border-border-primary rounded-lg text-sm text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary-main/20 focus:border-primary-main transition-all shadow-sm"
+                    />
+                </div>
+                <div className="relative w-full md:w-56">
+                    <Database className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+                    <select
+                        value={sourceFilter}
+                        onChange={(e) => setSourceFilter(e.target.value)}
+                        className="w-full pl-10 pr-8 py-2.5 bg-bg-surface border border-border-primary rounded-lg text-sm text-text-primary appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-main/20 focus:border-primary-main shadow-sm"
+                    >
+                        <option value="Local SQLite">Local SQLite</option>
+                        <option value="Supabase Cloud">Supabase Cloud</option>
+                    </select>
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+                        <svg className="w-4 h-4 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
+                    </div>
+                </div>
+            </div>
+
+            {/* Table Section */}
+            <div className="flex-1 overflow-hidden bg-bg-surface rounded-xl border border-border-primary shadow-sm flex flex-col">
+                {/* Table Header */}
+                <div className="grid grid-cols-12 gap-4 px-6 py-3 bg-bg-panel border-b border-border-primary text-xs font-semibold text-text-muted uppercase tracking-wider">
+                    <div className="col-span-3">Patient</div>
+                    <div className="col-span-3">Examination</div>
+                    <div className="col-span-2">Date & Time</div>
+                    <div className="col-span-2">Urgency</div>
+                    <div className="col-span-2 text-right">Status & Source</div>
+                </div>
+
+                {/* Table Body */}
+                <div className="flex-1 overflow-y-auto">
+                    {loading ? (
+                        <div className="flex flex-col items-center justify-center h-48 gap-3 text-text-muted">
+                            <div className="w-6 h-6 border-2 border-primary-main border-t-transparent rounded-full animate-spin" />
+                            <p className="text-sm">Loading reports...</p>
+                        </div>
+                    ) : filteredReports.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-64 gap-4 text-center">
+                            <div className="p-4 bg-bg-panel rounded-full">
+                                <FileText className="w-8 h-8 text-text-muted" />
+                            </div>
+                            <div>
+                                <h3 className="text-base font-medium text-text-heading">No reports found</h3>
+                                <p className="text-sm text-text-secondary mt-1">
+                                    {searchQuery || sourceFilter !== "Local SQLite" ? "Try adjusting your filters" : "Generate a new report to get started"}
+                                </p>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="divide-y divide-border-primary/50">
+                            {filteredReports.map((report) => {
+                                const reportData = report.report_data;
+                                const status = reportData?.report_footer?.report_status || 'Pending';
+                                const urgency = reportData.urgency || 'Routine';
+                                const source = report._source || 'Local';
+
+                                return (
+                                    <div
+                                        key={report.id}
+                                        onClick={() => setSelectedReportId(report.id)}
+                                        className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-bg-panel/50 transition-colors cursor-pointer group"
+                                    >
+                                        {/* Patient Column (3) */}
+                                        <div className="col-span-3">
+                                            <div className="font-medium text-text-heading text-sm group-hover:text-primary-main transition-colors">
+                                                {reportData.patient?.name || report.patient_name || "Unknown Patient"}
+                                            </div>
+                                            <div className="flex items-center gap-1.5 mt-1 text-xs text-text-secondary">
+                                                <User size={12} />
+                                                <span>{reportData.patient.age}y</span>
+                                                <span className="w-0.5 h-0.5 bg-text-muted rounded-full" />
+                                                <span>{reportData.patient.gender}</span>
+                                            </div>
+                                        </div>
+
+                                        {/* Exam Column (3) */}
+                                        <div className="col-span-3">
+                                            <div className="font-medium text-text-primary text-sm flex items-center gap-2">
+                                                {reportData.study.modality}
+                                            </div>
+                                            <div className="text-xs text-text-secondary mt-1 truncate pr-4" title={reportData.study.examination}>
+                                                {reportData.study.examination}
+                                            </div>
+                                        </div>
+
+                                        {/* Date Column (2) */}
+                                        <div className="col-span-2">
+                                            <div className="flex items-center gap-1.5 text-sm text-text-primary">
+                                                <Calendar size={12} className="text-text-muted" />
+                                                {new Date(report.created_at).toLocaleDateString()}
+                                            </div>
+                                            <div className="flex items-center gap-1.5 mt-1 text-xs text-text-secondary">
+                                                <Clock size={12} />
+                                                {new Date(report.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                            </div>
+                                        </div>
+
+                                        {/* Urgency Column (2) */}
+                                        <div className="col-span-2">
+                                            <Badge
+                                                variant="outline"
+                                                className={`
+                                                    text-[10px] font-bold uppercase tracking-wider border px-2 py-0.5
+                                                    ${urgency === 'Critical' ? 'bg-red-600 text-white border-transparent' :
+                                                        urgency === 'Urgent' ? 'bg-orange-500 text-white border-transparent' :
+                                                            'bg-green-600 text-white border-transparent'}
+                                                `}
+                                            >
+                                                {urgency}
+                                            </Badge>
+                                        </div>
+
+                                        {/* Status & Source Column (2) */}
+                                        <div className="col-span-2 flex flex-col items-end justify-center gap-1.5">
+                                            <Badge
+                                                variant="outline"
+                                                className={`
+                                                    text-[10px] font-bold uppercase tracking-wider border px-2 py-0.5
+                                                    ${status === 'Approved' ? 'bg-green-50 text-green-700 border-green-200' :
+                                                        status === 'Rejected' ? 'bg-red-50 text-red-700 border-red-200' :
+                                                            'bg-gray-50 text-gray-600 border-gray-200'}
+                                                `}
+                                            >
+                                                {status}
+                                            </Badge>
+                                            
+                                            <div className="flex items-center gap-1 text-[9px] font-semibold tracking-wider text-text-muted">
+                                                <Database size={10} />
+                                                {source.toUpperCase()}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}