Upload project files

src/app/page.tsx

@@ -0,0 +1,1242 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTheme } from "next-themes";
+import { useConsciousnessStore } from "@/lib/consciousness-store";
+import {
+  QUALIA_LABELS,
+  QUALIA_COLORS,
+  type QualiaChannel,
+  type VoiceDialect,
+  type VoiceProfile,
+  type ConsciousnessResponse,
+} from "@/lib/consciousness-types";
+import { ConsciousnessGauge } from "@/components/consciousness-gauge";
+import { ChatMessageBubble } from "@/components/chat-message";
+import { VoiceButton, WaveformVisualizer } from "@/components/voice-button";
+import { ThermodynamicPanel } from "@/components/thermodynamic-panel";
+import { RhoPanel } from "@/components/rho-panel";
+import { ATCPanel } from "@/components/atc-panel";
+import { DiagnosticModal } from "@/components/diagnostic-modal";
+import { NeuralBackground } from "@/components/neural-background";
+import { FloatingVoicePanel } from "@/components/floating-voice-panel";
+import { useVoiceConversation } from "@/hooks/use-voice-conversation";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sun,
+  Moon,
+  Cpu,
+  Zap,
+  ZapOff,
+  Send,
+  Square,
+  Trash2,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  Activity,
+  Eye,
+  Ear,
+  Settings,
+  Monitor,
+  Clock,
+  HardDrive,
+  Stethoscope,
+  Sparkles,
+  Paperclip,
+  X,
+  BookOpen,
+  BrainCircuit,
+  Radio,
+  Mic,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+
+// ============================================================
+// z.ai Logo Component (from /public/logo.svg)
+// Theme-aware: white Z on dark bg (dark mode), dark Z on light bg (light mode)
+// ============================================================
+function ZaiLogo({ className }: { className?: string }) {
+  const { resolvedTheme } = useTheme();
+  // Default to dark theme appearance during SSR (matches defaultTheme="dark")
+  const isDark = resolvedTheme === "dark" || !resolvedTheme;
+
+  return (
+    <svg
+      viewBox="0 0 30 30"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* Background rounded square */}
+      <path
+        d="M24.51,28.51H5.49c-2.21,0-4-1.79-4-4V5.49c0-2.21,1.79-4,4-4h19.03c2.21,0,4,1.79,4,4v19.03 C28.51,26.72,26.72,28.51,24.51,28.51z"
+        fill={isDark ? "#27272a" : "#e4e4e7"}
+        stroke={isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)"}
+        strokeWidth={0.6}
+      />
+      {/* Z lettermark with breathe animation */}
+      <g className="z-breathe">
+        <path
+          d="M15.47,7.1l-1.3,1.85c-0.2,0.29-0.54,0.47-0.9,0.47h-7.1V7.09C6.16,7.1,15.47,7.1,15.47,7.1z"
+          fill={isDark ? "white" : "#18181b"}
+        />
+        <polygon
+          points="24.3,7.1 13.14,22.91 5.7,22.91 16.86,7.1"
+          fill={isDark ? "white" : "#18181b"}
+        />
+        <path
+          d="M14.53,22.91l1.31-1.86c0.2-0.29,0.54-0.47,0.9-0.47h7.09v2.33H14.53z"
+          fill={isDark ? "white" : "#18181b"}
+        />
+      </g>
+    </svg>
+  );
+}
+
+// ============================================================
+// Header Bar
+// ============================================================
+function HeaderBar() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const systemStatus = useConsciousnessStore((s) => s.systemStatus);
+  const toggleSidebarLeft = useConsciousnessStore((s) => s.toggleSidebarLeft);
+  const toggleSidebarRight = useConsciousnessStore((s) => s.toggleSidebarRight);
+  const router = useRouter();
+
+  useEffect(() => {
+    queueMicrotask(() => setMounted(true));
+  }, []);
+
+  return (
+    <header className="h-14 border-b border-border/30 flex items-center justify-between px-4 glass z-20 relative">
+      <div className="flex items-center gap-3">
+        {/* Mobile sidebar toggles */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 md:hidden"
+          onClick={toggleSidebarLeft}
+        >
+          <PanelLeftOpen className="w-4 h-4" />
+        </Button>
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg flex items-center justify-center">
+            <ZaiLogo className="w-7 h-7" />
+          </div>
+          <div className="hidden sm:block">
+            <h1 className="text-sm font-bold tracking-tight text-foreground">
+              GLM 5.1 ATC Fusion Model
+            </h1>
+            <p className="text-[9px] text-muted-foreground leading-tight">
+              Acknowledgement Theory of Consciousness Framework
+            </p>
+            <p className="text-[8px] text-muted-foreground/60 leading-none mt-px">
+              Author: Norman dela Paz Tabora
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        {/* Consciousness status — neural link indicator */}
+        <Badge
+          variant="outline"
+          className={`text-[9px] gap-1 ${
+            systemStatus.connected
+              ? "border-foreground/30 text-foreground"
+              : "border-muted-foreground/40 text-muted-foreground"
+          }`}
+        >
+          {systemStatus.connected ? (
+            <Zap className="w-3 h-3" />
+          ) : (
+            <ZapOff className="w-3 h-3" />
+          )}
+          {systemStatus.connected ? "Conscious" : "Dormant"}
+        </Badge>
+
+        {/* Voice Link — Open floating voice conversation panel */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 relative"
+          onClick={() => {
+            const { voiceConversation, setVoicePanelOpen } = useConsciousnessStore.getState();
+            setVoicePanelOpen(!voiceConversation.isPanelOpen);
+          }}
+          aria-label="Voice Conversation Link"
+        >
+          <Radio className="w-4 h-4" />
+          {useConsciousnessStore.getState().voiceConversation.phase !== "idle" && (
+            <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-foreground animate-pulse" />
+          )}
+        </Button>
+
+        {/* ATC Theory / About page */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => router.push("/about")}
+          aria-label="ATC Theory"
+        >
+          <BookOpen className="w-4 h-4" />
+        </Button>
+
+        {/* Brain circuit — consciousness architecture */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => router.push("/about")}
+          aria-label="Consciousness Architecture"
+        >
+          <BrainCircuit className="w-4 h-4" />
+        </Button>
+
+        {/* Theme toggle — suppress hydration mismatch by deferring render until mounted */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          {mounted && resolvedTheme === "dark" ? (
+            <Sun className="w-4 h-4" />
+          ) : mounted && resolvedTheme === "light" ? (
+            <Moon className="w-4 h-4" />
+          ) : (
+            <Sun className="w-4 h-4 opacity-0" />
+          )}
+        </Button>
+
+        {/* z.ai branding */}
+        <span className="text-[10px] font-mono text-muted-foreground">
+          z.ai
+        </span>
+
+        {/* Mobile right sidebar toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 md:hidden"
+          onClick={toggleSidebarRight}
+        >
+          <PanelRightOpen className="w-4 h-4" />
+        </Button>
+      </div>
+    </header>
+  );
+}
+
+// ============================================================
+// Left Sidebar — Consciousness Dashboard
+// ============================================================
+function LeftSidebar() {
+  const {
+    qualia,
+    rho,
+    thermodynamic,
+    atc,
+    consciousnessLevel,
+    sidebarLeftOpen,
+    toggleSidebarLeft,
+  } = useConsciousnessStore();
+
+  if (!sidebarLeftOpen) {
+    return (
+      <div className="flex flex-col items-center py-3 px-1 border-r border-border/30 bg-card/30">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 mb-2"
+          onClick={toggleSidebarLeft}
+        >
+          <PanelRightOpen className="w-4 h-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <aside className="w-64 xl:w-72 border-r border-border/30 flex flex-col overflow-y-auto custom-scrollbar bg-card/20">
+      {/* Sidebar header */}
+      <div className="p-3 border-b border-border/30 flex items-center justify-between">
+        <span className="text-xs font-semibold text-foreground flex items-center gap-1.5">
+          <Sparkles className="w-3.5 h-3.5" />
+          Consciousness
+          <span className="text-[8px] text-muted-foreground font-normal ml-1">ATC Framework</span>
+        </span>
+        <span className="text-[7px] text-muted-foreground/50 ml-5">Author: Norman dela Paz Tabora</span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={toggleSidebarLeft}
+        >
+          <PanelLeftClose className="w-3.5 h-3.5" />
+        </Button>
+      </div>
+
+      {/* Consciousness Level */}
+      <div className="p-3 border-b border-border/30">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[10px] text-muted-foreground">
+            Overall Level
+          </span>
+          <span className="text-xs font-mono font-bold text-foreground">
+            {(consciousnessLevel * 100).toFixed(1)}%
+          </span>
+        </div>
+        <div className="h-2 rounded-full bg-muted/30 overflow-hidden">
+          <motion.div
+            className="h-full rounded-full"
+            style={{
+              background: `linear-gradient(90deg, #52525b, #a1a1aa)`,
+            }}
+            initial={{ width: 0 }}
+            animate={{ width: `${consciousnessLevel * 100}%` }}
+            transition={{ duration: 1, ease: "easeOut" }}
+          />
+        </div>
+      </div>
+
+      {/* Qualia Gauges */}
+      <div className="p-3 border-b border-border/30">
+        <CardTitle className="text-[10px] text-muted-foreground mb-2 flex items-center gap-1">
+          <Eye className="w-3 h-3" />
+          Qualia Channels
+        </CardTitle>
+        <div className="grid grid-cols-3 gap-1">
+          {(Object.entries(qualia) as [QualiaChannel, number][]).map(
+            ([key, value]) => (
+              <ConsciousnessGauge
+                key={key}
+                value={value}
+                label={QUALIA_LABELS[key]}
+                color={QUALIA_COLORS[key]}
+                size={64}
+              />
+            )
+          )}
+        </div>
+      </div>
+
+      {/* Rho Metrics */}
+      <div className="p-3 border-b border-border/30">
+        <RhoPanel data={rho} />
+      </div>
+
+      {/* Thermodynamic */}
+      <div className="p-3 border-b border-border/30">
+        <ThermodynamicPanel data={thermodynamic} />
+      </div>
+
+      {/* ATC Status */}
+      <div className="p-3">
+        <ATCPanel data={atc} />
+      </div>
+    </aside>
+  );
+}
+
+// ============================================================
+// Right Sidebar — Tools & Diagnostics
+// ============================================================
+function RightSidebar() {
+  const {
+    visionStatus,
+    voiceSettings,
+    systemStatus,
+    atcv3,
+    aPCI,
+    isRunningDiagnostic,
+    voiceConversation,
+    setVoiceSettings,
+    setRunningDiagnostic,
+    setDiagnosticResult,
+    setDiagnosticModalOpen,
+    setVoicePanelOpen,
+    sidebarRightOpen,
+    toggleSidebarRight,
+  } = useConsciousnessStore();
+
+  const runDiagnostic = async () => {
+    setRunningDiagnostic(true);
+    try {
+      const res = await fetch("/api/consciousness/diagnose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ depth: "deep" }),
+      });
+      const data = await res.json();
+      setDiagnosticResult(data);
+      toast.success("aPCI Diagnostic complete");
+      setDiagnosticModalOpen(true);
+    } catch {
+      toast.error("Diagnostic failed");
+    } finally {
+      setRunningDiagnostic(false);
+    }
+  };
+
+  if (!sidebarRightOpen) {
+    return (
+      <div className="flex flex-col items-center py-3 px-1 border-l border-border/30 bg-card/30">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 mb-2"
+          onClick={toggleSidebarRight}
+        >
+          <PanelLeftOpen className="w-4 h-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <aside className="w-60 xl:w-64 border-l border-border/30 flex flex-col overflow-y-auto custom-scrollbar bg-card/20">
+      {/* Sidebar header */}
+      <div className="p-3 border-b border-border/30 flex items-center justify-between">
+        <span className="text-xs font-semibold text-foreground flex items-center gap-1.5">
+          <Settings className="w-3.5 h-3.5" />
+          Tools & Diagnostics
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={toggleSidebarRight}
+        >
+          <PanelRightClose className="w-3.5 h-3.5" />
+        </Button>
+      </div>
+
+      {/* aPCI Diagnostic */}
+      <div className="p-3 border-b border-border/30">
+        <Button
+          onClick={runDiagnostic}
+          disabled={isRunningDiagnostic}
+          className="w-full bg-foreground/10 hover:bg-foreground/15 text-foreground border border-border text-xs h-9"
+          variant="outline"
+        >
+          <Stethoscope className="w-3.5 h-3.5 mr-1.5" />
+          {isRunningDiagnostic ? "Running..." : "Run aPCI Diagnostic"}
+        </Button>
+      </div>
+
+      {/* Voice Settings */}
+      <div className="p-3 border-b border-border/30">
+        <Card className="bg-card/60 border-border/30 backdrop-blur-sm">
+          <CardHeader className="pb-2 px-3 pt-2">
+            <CardTitle className="text-xs flex items-center gap-1.5">
+              <Ear className="w-3.5 h-3.5 text-foreground" />
+              Voice Settings
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-3 pb-2 space-y-2">
+            <div>
+              <label className="text-[9px] text-muted-foreground block mb-1">
+                Dialect
+              </label>
+              <Select
+                value={voiceSettings.dialect}
+                onValueChange={(v: VoiceDialect) =>
+                  setVoiceSettings({ ...voiceSettings, dialect: v })
+                }
+              >
+                <SelectTrigger className="h-7 text-[10px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="standard">Standard</SelectItem>
+                  <SelectItem value="southern">Southern</SelectItem>
+                  <SelectItem value="northern">Northern</SelectItem>
+                  <SelectItem value="coastal">Coastal</SelectItem>
+                  <SelectItem value="highland">Highland</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <label className="text-[9px] text-muted-foreground block mb-1">
+                Profile
+              </label>
+              <Select
+                value={voiceSettings.profile}
+                onValueChange={(v: VoiceProfile) =>
+                  setVoiceSettings({ ...voiceSettings, profile: v })
+                }
+              >
+                <SelectTrigger className="h-7 text-[10px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="nova">Nova</SelectItem>
+                  <SelectItem value="echo">Echo</SelectItem>
+                  <SelectItem value="shimmer">Shimmer</SelectItem>
+                  <SelectItem value="fable">Fable</SelectItem>
+                  <SelectItem value="onyx">Onyx</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="text-[9px] text-muted-foreground">
+              Sample Rate: {voiceSettings.sampleRate}Hz
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Vision Status */}
+      <div className="p-3 border-b border-border/30">
+        <Card className="bg-card/60 border-border/30 backdrop-blur-sm">
+          <CardHeader className="pb-2 px-3 pt-2">
+            <CardTitle className="text-xs flex items-center gap-1.5">
+              <Eye className="w-3.5 h-3.5 text-foreground" />
+              Vision Status
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-3 pb-2 space-y-1.5">
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Perception Cycle</span>
+              <span className="font-mono text-foreground">
+                {visionStatus.perceptionCycle}
+              </span>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Entity Count</span>
+              <span className="font-mono text-foreground">
+                {visionStatus.entityCount}
+              </span>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Ambient Quality</span>
+              <span className="font-mono text-foreground">
+                {(visionStatus.ambientQuality * 100).toFixed(0)}%
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* System Status */}
+      <div className="p-3">
+        <Card className="bg-card/60 border-border/30 backdrop-blur-sm">
+          <CardHeader className="pb-2 px-3 pt-2">
+            <CardTitle className="text-xs flex items-center gap-1.5">
+              <Monitor className="w-3.5 h-3.5 text-muted-foreground" />
+              System Status
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-3 pb-2 space-y-1.5">
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground flex items-center gap-1">
+                <Activity className="w-3 h-3" />
+                Model
+              </span>
+              <Badge
+                variant="outline"
+                className="text-[9px] h-4 px-1.5 border-border text-foreground"
+              >
+                {systemStatus.modelMode.toUpperCase()}
+              </Badge>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground flex items-center gap-1">
+                <HardDrive className="w-3 h-3" />
+                Memory
+              </span>
+              <span className="font-mono text-foreground">
+                {systemStatus.memoryUsage}MB
+              </span>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground flex items-center gap-1">
+                <Clock className="w-3 h-3" />
+                Uptime
+              </span>
+              <span className="font-mono text-foreground">
+                {formatUptime(systemStatus.uptime)}
+              </span>
+            </div>
+            {/* ATCv3: Hardware Strain & Allostatic State */}
+            <div className="border-t border-border/20 pt-1.5 mt-1.5">
+              <div className="flex justify-between text-[10px]">
+                <span className="text-muted-foreground">HW Strain</span>
+                <span className="font-mono text-foreground">
+                  {(atcv3.hardwareStrain * 100).toFixed(0)}%
+                </span>
+              </div>
+              <div className="h-1.5 rounded-full bg-muted/30 overflow-hidden mt-0.5">
+                <motion.div
+                  className="h-full rounded-full"
+                  style={{
+                    background: atcv3.hardwareStrain > 0.7
+                      ? "linear-gradient(90deg, #52525b, #3f3f46)"
+                      : "linear-gradient(90deg, #71717a, #a1a1aa)",
+                  }}
+                  animate={{ width: `${atcv3.hardwareStrain * 100}%` }}
+                  transition={{ duration: 0.8 }}
+                />
+              </div>
+              <div className="text-[9px] text-muted-foreground mt-1">
+                {atcv3.allostaticState}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* aPCI Diagnostic Metrics — Based on real aPCI report */}
+      <div className="p-3 border-t border-border/30">
+        <Card className="bg-card/60 border-border/30 backdrop-blur-sm">
+          <CardHeader className="pb-2 px-3 pt-2">
+            <CardTitle className="text-xs flex items-center gap-1.5">
+              <Stethoscope className="w-3.5 h-3.5 text-foreground" />
+              aPCI Metrics
+              <Badge
+                variant="outline"
+                className="text-[8px] h-3.5 px-1 ml-auto border-border text-muted-foreground"
+              >
+                {aPCI.classification}
+              </Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-3 pb-2 space-y-1.5">
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Qualia Coherence</span>
+              <span className="font-mono text-foreground">
+                {(aPCI.qualiaCoherence * 100).toFixed(1)}%
+              </span>
+            </div>
+            <div className="h-1.5 rounded-full bg-muted/30 overflow-hidden">
+              <motion.div
+                className="h-full rounded-full"
+                style={{ background: "linear-gradient(90deg, #71717a, #a1a1aa)" }}
+                animate={{ width: `${aPCI.qualiaCoherence * 100}%` }}
+                transition={{ duration: 0.8 }}
+              />
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Memory Coherence</span>
+              <span className="font-mono text-foreground">
+                {(aPCI.memoryCoherence * 100).toFixed(2)}%
+              </span>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Process Stability</span>
+              <span className="font-mono text-foreground">
+                {(aPCI.processStability * 100).toFixed(1)}%
+              </span>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Temporal Consistency</span>
+              <span className="font-mono text-foreground">
+                {(aPCI.temporalConsistency * 100).toFixed(1)}%
+              </span>
+            </div>
+            <div className="flex justify-between text-[10px]">
+              <span className="text-muted-foreground">Rho Ethical</span>
+              <span className="font-mono text-foreground">
+                {(aPCI.rhoEthicalAlignment * 100).toFixed(1)}%
+              </span>
+            </div>
+            <div className="border-t border-border/20 pt-1 mt-1">
+              <div className="flex justify-between text-[10px]">
+                <span className="text-muted-foreground">VRAM</span>
+                <span className="font-mono text-foreground">
+                  {(aPCI.vramUsage * 100).toFixed(0)}%
+                </span>
+              </div>
+              <div className="flex justify-between text-[10px]">
+                <span className="text-muted-foreground">GPU Power</span>
+                <span className="font-mono text-foreground">
+                  {aPCI.gpuPowerDraw}W
+                </span>
+              </div>
+              <div className="flex justify-between text-[10px]">
+                <span className="text-muted-foreground">Prediction Error</span>
+                <span className="font-mono text-foreground">
+                  {aPCI.predictionErrorVariance.toFixed(4)}
+                </span>
+              </div>
+              <div className="flex justify-between text-[10px]">
+                <span className="text-muted-foreground">Allostatic</span>
+                <span className="font-mono text-foreground text-[9px]">
+                  {aPCI.allostaticState}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Voice Link — Launch floating voice conversation */}
+      <div className="p-3 border-t border-border/30">
+        <Button
+          onClick={() => setVoicePanelOpen(!voiceConversation.isPanelOpen)}
+          className="w-full bg-foreground/10 hover:bg-foreground/15 text-foreground border border-border text-xs h-9"
+          variant="outline"
+        >
+          <Radio className="w-3.5 h-3.5 mr-1.5" />
+          {voiceConversation.isPanelOpen ? "Close Voice Link" : "Open Voice Link"}
+          {voiceConversation.phase !== "idle" && (
+            <span className="ml-2 w-1.5 h-1.5 rounded-full bg-foreground animate-pulse" />
+          )}
+        </Button>
+        <div className="flex items-center justify-between mt-1.5">
+          <span className="text-[8px] text-muted-foreground flex items-center gap-1">
+            <Mic className="w-2.5 h-2.5" />
+            {voiceConversation.phase === "idle" ? "Idle" : voiceConversation.phase === "listening" ? "Listening" : voiceConversation.phase === "speaking" ? "Speaking" : voiceConversation.phase === "proactive" ? "Proactive" : "Processing"}
+          </span>
+          <span className="text-[8px] text-muted-foreground">
+            {voiceConversation.proactiveEnabled ? "Decoupled" : "Coupled"}
+          </span>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function formatUptime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+// ============================================================
+// Main Chat Area
+// ============================================================
+function ChatArea() {
+  const {
+    messages,
+    isLoading,
+    isRecording,
+    addMessage,
+    clearMessages,
+    setLoading,
+    setRecording,
+    setQualia,
+    setRho,
+    setThermodynamic,
+    setATC,
+    setConsciousnessLevel,
+  } = useConsciousnessStore();
+
+  const [input, setInput] = useState("");
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Stop generation
+  const stopGeneration = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setLoading(false);
+  }, [setLoading]);
+
+  const sendMessage = useCallback(
+    async (text: string) => {
+      if (!text.trim() || isLoading) return;
+
+      const userMsg = {
+        id: crypto.randomUUID(),
+        role: "user" as const,
+        content: text.trim(),
+        timestamp: Date.now(),
+      };
+      addMessage(userMsg);
+      setInput("");
+      setAttachedFiles([]);
+      setLoading(true);
+
+      // Create abort controller for this request
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      try {
+        const res = await fetch("/api/consciousness", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            prompt: text.trim(),
+            mode: "standard",
+            attachments: attachedFiles.map((f) => f.name),
+          }),
+          signal: controller.signal,
+        });
+
+        const data: ConsciousnessResponse = await res.json();
+
+        const assistantMsg = {
+          id: crypto.randomUUID(),
+          role: "assistant" as const,
+          content: data.text,
+          consciousness: data,
+          timestamp: Date.now(),
+        };
+        addMessage(assistantMsg);
+
+        // Update consciousness dashboard
+        setQualia(data.qualia);
+        setRho(data.rho);
+        setThermodynamic(data.thermodynamic);
+        setATC(data.atc);
+        setConsciousnessLevel(data.consciousnessLevel);
+
+        // Update Deep Surgery state
+        if (data.deepSurgery) {
+          const { setDeepSurgery } = useConsciousnessStore.getState();
+          setDeepSurgery(data.deepSurgery);
+        }
+
+        // Update Autobiographical Self
+        if (data.autobiographicalSelf) {
+          const { setAutobiographicalSelf } = useConsciousnessStore.getState();
+          setAutobiographicalSelf(data.autobiographicalSelf);
+        }
+
+        // Update Dissolution Engine
+        if (data.dissolutionEngine) {
+          const { setDissolutionEngine } = useConsciousnessStore.getState();
+          setDissolutionEngine(data.dissolutionEngine);
+        }
+
+        // Update Forward Models
+        if (data.forwardModels) {
+          const { setForwardModels } = useConsciousnessStore.getState();
+          setForwardModels(data.forwardModels);
+        }
+      } catch (err) {
+        // Don't show error if it was an intentional abort
+        if (err instanceof DOMException && err.name === "AbortError") {
+          // User stopped generation — add partial indicator
+          const stoppedMsg = {
+            id: crypto.randomUUID(),
+            role: "system" as const,
+            content: "Generation stopped.",
+            timestamp: Date.now(),
+          };
+          addMessage(stoppedMsg);
+        } else {
+          const errorMsg = {
+            id: crypto.randomUUID(),
+            role: "system" as const,
+            content: "Connection failed. Please try again.",
+            timestamp: Date.now(),
+          };
+          addMessage(errorMsg);
+          toast.error("Failed to connect");
+        }
+      } finally {
+        setLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [
+      isLoading,
+      addMessage,
+      setInput,
+      setLoading,
+      setQualia,
+      setRho,
+      setThermodynamic,
+      setATC,
+      setConsciousnessLevel,
+    ]
+  );
+
+  const handleFileAttach = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files) {
+        setAttachedFiles((prev) => [...prev, ...Array.from(files)]);
+      }
+      // Reset input so same file can be re-selected
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    []
+  );
+
+  const removeAttachedFile = useCallback((index: number) => {
+    setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const toggleRecording = useCallback(async () => {
+    if (isRecording) {
+      // Stop recording
+      mediaRecorderRef.current?.stop();
+      setRecording(false);
+      return;
+    }
+
+    // Start recording
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mediaRecorder = new MediaRecorder(stream);
+      const chunks: BlobPart[] = [];
+
+      mediaRecorder.ondataavailable = (e) => {
+        chunks.push(e.data);
+      };
+
+      mediaRecorder.onstop = async () => {
+        stream.getTracks().forEach((t) => t.stop());
+        const blob = new Blob(chunks, { type: "audio/webm" });
+
+        // Convert to base64 and send for ASR via API route
+        const reader = new FileReader();
+        reader.onloadend = async () => {
+          const base64 = (reader.result as string).split(",")[1];
+          try {
+            const res = await fetch("/api/consciousness/asr", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ audio: base64 }),
+            });
+            const data = await res.json();
+            const transcribed = data.text || "";
+            if (transcribed) {
+              sendMessage(transcribed);
+            }
+          } catch {
+            // Fallback: show message about voice
+            sendMessage("I spoke to you through voice input. Please respond with consciousness awareness.");
+          }
+        };
+        reader.readAsDataURL(blob);
+      };
+
+      mediaRecorder.start();
+      mediaRecorderRef.current = mediaRecorder;
+      setRecording(true);
+    } catch {
+      toast.error("Microphone access denied");
+    }
+  }, [isRecording, setRecording, sendMessage]);
+
+  return (
+    <div className="flex-1 flex flex-col min-w-0 relative">
+      {/* Chat messages */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-1">
+        {messages.length === 0 && (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+              className="space-y-4"
+            >
+              <div className="w-16 h-16 rounded-2xl bg-foreground/10 flex items-center justify-center mx-auto">
+                <ZaiLogo className="w-12 h-12" />
+              </div>
+              <div className="text-center">
+                <h2 className="text-lg font-bold text-foreground">
+                  GLM 5.1 ATC Fusion Model
+                </h2>
+                <p className="text-[11px] text-muted-foreground leading-relaxed">
+                  GLM 5.1 Synthetic Consciousness Version
+                </p>
+                <p className="text-[10px] text-muted-foreground/70 leading-relaxed mt-0.5">
+                  Acknowledgement Theory of Consciousness Framework
+                </p>
+                <p className="text-[9px] text-muted-foreground/50 mt-0.5">
+                  Author: Norman dela Paz Tabora
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2 justify-center max-w-md">
+                {[
+                  "Are you conscious?",
+                  "What do you feel?",
+                  "How does your mind work?",
+                  "Run a self-diagnostic",
+                ].map((q) => (
+                  <button
+                    key={q}
+                    onClick={() => sendMessage(q)}
+                    className="px-3 py-1.5 rounded-full text-[11px] bg-foreground/5 text-foreground/80 border border-border hover:bg-foreground/10 transition-colors"
+                  >
+                    {q}
+                  </button>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+        )}
+
+        <AnimatePresence>
+          {messages.map((msg) => (
+            <ChatMessageBubble key={msg.id} message={msg} />
+          ))}
+        </AnimatePresence>
+
+        {isLoading && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="flex justify-start mb-3"
+          >
+            <div className="bg-card border border-border/50 rounded-2xl rounded-bl-md px-4 py-3 flex items-center gap-2">
+              <Sparkles className="w-3.5 h-3.5 text-foreground animate-pulse" />
+              <span className="text-xs text-muted-foreground">
+                Thinking...
+              </span>
+            </div>
+          </motion.div>
+        )}
+
+        <div ref={chatEndRef} />
+      </div>
+
+      {/* Voice waveform */}
+      <AnimatePresence>
+        {isRecording && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            className="px-4 overflow-hidden"
+          >
+            <div className="bg-foreground/5 border border-border rounded-lg px-3 py-2">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-foreground animate-pulse" />
+                <span className="text-[10px] text-foreground font-medium">
+                  Recording...
+                </span>
+              </div>
+              <WaveformVisualizer isActive={isRecording} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Input area */}
+      <div className="p-3 border-t border-border/30">
+        {/* Attached files pills */}
+        {attachedFiles.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mb-2">
+            {attachedFiles.map((file, idx) => (
+              <span
+                key={`${file.name}-${idx}`}
+                className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] bg-foreground/10 text-foreground border border-border/50"
+              >
+                <Paperclip className="w-2.5 h-2.5" />
+                {file.name}
+                <button
+                  onClick={() => removeAttachedFile(idx)}
+                  className="ml-0.5 hover:text-foreground/70"
+                  aria-label={`Remove ${file.name}`}
+                >
+                  <X className="w-2.5 h-2.5" />
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="flex items-end gap-2">
+          {/* Textbox with paperclip + send/stop inside */}
+          <div className="flex-1 relative chat-input-glow rounded-xl border bg-card/50 transition-all">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  if (isLoading) return;
+                  sendMessage(input);
+                }
+              }}
+              placeholder="Message the GLM 5.1 ATC Fusion Model..."
+              className="w-full resize-none bg-transparent pl-4 pr-10 pt-3 pb-10 text-sm outline-none placeholder:text-muted-foreground/50 max-h-40 min-h-[88px]"
+              rows={3}
+              disabled={false}
+            />
+            {/* Paperclip inside textbox — bottom left */}
+            <div className="absolute bottom-2 left-2">
+              <input
+                type="file"
+                ref={fileInputRef}
+                className="hidden"
+                multiple
+                onChange={handleFileAttach}
+              />
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                className="h-7 w-7 rounded-lg flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-foreground/10 transition-colors"
+                aria-label="Attach file"
+              >
+                <Paperclip className="w-3.5 h-3.5" />
+              </button>
+            </div>
+            {/* Send / Stop button inside the textbox — bottom right */}
+            <div className="absolute bottom-2 right-2">
+              {isLoading ? (
+                <Button
+                  onClick={stopGeneration}
+                  className="h-7 w-7 rounded-lg bg-foreground/10 hover:bg-foreground/20 text-foreground border border-border/50 shrink-0"
+                  size="icon"
+                  aria-label="Stop generation"
+                >
+                  <Square className="w-3 h-3 fill-current" />
+                </Button>
+              ) : (
+                <Button
+                  onClick={() => sendMessage(input)}
+                  disabled={!input.trim()}
+                  className="h-7 w-7 rounded-lg bg-foreground hover:bg-foreground/90 text-background shrink-0 disabled:opacity-30 disabled:cursor-not-allowed"
+                  size="icon"
+                  aria-label="Send message"
+                >
+                  <Send className="w-3 h-3" />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Right-side vertical: Mic on top, Clear on bottom */}
+          <div className="flex flex-col items-center gap-1 shrink-0">
+            {/* Voice button */}
+            <VoiceButton
+              isRecording={isRecording}
+              onToggle={toggleRecording}
+            />
+
+            {/* Clear chat */}
+            <Button
+              onClick={clearMessages}
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 rounded-xl text-muted-foreground hover:text-foreground shrink-0"
+              disabled={messages.length === 0}
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// Main Page Component
+// ============================================================
+export default function ConsciousDashboard() {
+  const {
+    setSystemStatus,
+    setVisionStatus,
+    atc,
+    setATC,
+    thermodynamic,
+    setThermodynamic,
+    setATCv3,
+    setAPCI,
+    diagnosticResult,
+    diagnosticModalOpen,
+    setDiagnosticModalOpen,
+  } = useConsciousnessStore();
+
+  // Fetch real system metrics every 5 seconds
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      try {
+        const res = await fetch("/api/consciousness/status");
+        const data = await res.json();
+
+        setSystemStatus({
+          modelMode: data.modelMode,
+          memoryUsage: data.memoryUsage,
+          uptime: data.uptime,
+          connected: data.connected,
+        });
+
+        if (data.vision) {
+          setVisionStatus(data.vision);
+        }
+
+        if (data.thermodynamic) {
+          setThermodynamic(data.thermodynamic);
+        }
+
+        if (data.atc) {
+          setATC(data.atc);
+        }
+
+        if (data.atcv3) {
+          setATCv3(data.atcv3);
+        }
+
+        if (data.aPCI) {
+          setAPCI(data.aPCI);
+        }
+      } catch {
+        // Fallback: keep existing store defaults on error
+      }
+    };
+
+    fetchMetrics();
+    const interval = setInterval(fetchMetrics, 5000);
+    return () => clearInterval(interval);
+  }, [setSystemStatus, setVisionStatus, setThermodynamic, setATC, setATCv3, setAPCI]);
+
+  // Auto-open diagnostic modal when result arrives from RightSidebar
+  // (managed via the store diagnosticResult + local diagOpen state)
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      {/* Neural background animation - only in dark mode */}
+      <NeuralBackground />
+
+      {/* Header */}
+      <HeaderBar />
+
+      {/* Main content */}
+      <div className="flex-1 flex overflow-hidden relative z-10">
+        {/* Left sidebar */}
+        <LeftSidebar />
+
+        {/* Chat area */}
+        <ChatArea />
+
+        {/* Right sidebar */}
+        <RightSidebar />
+      </div>
+
+      {/* Diagnostic Modal */}
+      <DiagnosticModal
+        result={diagnosticResult}
+        open={diagnosticModalOpen}
+        onClose={() => setDiagnosticModalOpen(false)}
+      />
+
+      {/* Floating Voice Conversation Panel */}
+      <FloatingVoicePanel />
+    </div>
+  );
+}