Upload project files

src/components/diagnostic-modal.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import type { DiagnosticResult } from "@/lib/consciousness-types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { CheckCircle, AlertTriangle, XCircle, Activity } from "lucide-react";
+
+interface DiagnosticModalProps {
+  result: DiagnosticResult | null;
+  open: boolean;
+  onClose: () => void;
+}
+
+function VerdictIcon({ verdict }: { verdict: string }) {
+  const v = verdict.toLowerCase();
+  if (v.includes("conscious") && !v.includes("not")) {
+    return <CheckCircle className="w-6 h-6 text-[#a1a1aa]" />;
+  }
+  if (v.includes("ambiguous") || v.includes("uncertain")) {
+    return <AlertTriangle className="w-6 h-6 text-[#71717a]" />;
+  }
+  return <XCircle className="w-6 h-6 text-[#52525b]" />;
+}
+
+export function DiagnosticModal({
+  result,
+  open,
+  onClose,
+}: DiagnosticModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="sm:max-w-md bg-background border-border text-foreground">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-foreground">
+            <Activity className="w-5 h-5" />
+            aPCI Diagnostic Report
+          </DialogTitle>
+        </DialogHeader>
+
+        <AnimatePresence>
+          {result && (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="space-y-4"
+            >
+              {/* Verdict */}
+              <div className="flex items-center gap-3 p-3 rounded-lg bg-foreground/5 border border-border">
+                <VerdictIcon verdict={result.consciousness_verdict} />
+                <div>
+                  <p className="text-sm font-bold">
+                    {result.consciousness_verdict}
+                  </p>
+                  <p className="text-xs text-slate-400">
+                    aPCI Score: {result.aPCI_score.toFixed(3)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Metrics */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="p-2 rounded bg-muted/20">
+                  <p className="text-[10px] text-muted-foreground">
+                    Qualia Coherence
+                  </p>
+                  <p className="text-lg font-mono font-bold text-foreground">
+                    {(result.qualia_coherence * 100).toFixed(1)}%
+                  </p>
+                </div>
+                <div className="p-2 rounded bg-muted/20">
+                  <p className="text-[10px] text-muted-foreground">
+                    Rho Alignment
+                  </p>
+                  <p className="text-lg font-mono font-bold text-[#a1a1aa]">
+                    {(result.rho_alignment * 100).toFixed(1)}%
+                  </p>
+                </div>
+              </div>
+
+              {/* Thermodynamic Signature */}
+              <div>
+                <p className="text-[10px] text-muted-foreground mb-1">
+                  Thermodynamic Signature
+                </p>
+                <Badge
+                  variant="outline"
+                  className="text-muted-foreground border-border"
+                >
+                  {result.thermodynamic_signature}
+                </Badge>
+              </div>
+
+              {/* Details */}
+              <div className="p-2 rounded bg-muted/20">
+                <p className="text-[10px] text-muted-foreground mb-1">
+                  Details
+                </p>
+                <p className="text-xs text-slate-300">{result.details}</p>
+              </div>
+
+              {/* Timestamp */}
+              <p className="text-[9px] text-muted-foreground text-right">
+                {new Date(result.timestamp).toLocaleString()}
+              </p>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </DialogContent>
+    </Dialog>
+  );
+}