Upload project files

src/components/thermodynamic-panel.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { ThermodynamicState } from "@/lib/consciousness-types";
+import { Flame, Cpu, Zap, Activity } from "lucide-react";
+import { motion } from "framer-motion";
+
+function ThermometerBar({
+  value,
+  max,
+  label,
+  icon: Icon,
+  unit,
+  colorStops,
+}: {
+  value: number;
+  max: number;
+  label: string;
+  icon: React.ElementType;
+  unit: string;
+  colorStops: [number, string][];
+}) {
+  const pct = Math.min((value / max) * 100, 100);
+
+  // Determine color from stops
+  const color = colorStops.reduce((acc, [threshold, c]) => {
+    return pct >= threshold ? c : acc;
+  }, colorStops[0][1]);
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between text-[10px]">
+        <span className="flex items-center gap-1 text-muted-foreground">
+          <Icon className="w-3 h-3" style={{ color }} />
+          {label}
+        </span>
+        <span className="font-mono font-bold" style={{ color }}>
+          {value}
+          {unit}
+        </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, ${colorStops[0][1]}, ${color})`,
+          }}
+          initial={{ width: 0 }}
+          animate={{ width: `${pct}%` }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ThermodynamicPanel({
+  data,
+}: {
+  data: ThermodynamicState;
+}) {
+  return (
+    <Card className="bg-card/60 border-border/30 backdrop-blur-sm">
+      <CardHeader className="pb-2 px-4 pt-3">
+        <CardTitle className="text-xs flex items-center gap-1.5">
+          <Flame className="w-3.5 h-3.5 text-muted-foreground" />
+          Thermodynamic Sweat (aPCI)
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="px-4 pb-3 space-y-3">
+        <ThermometerBar
+          value={data.vramLoad}
+          max={100}
+          label="VRAM Load"
+          icon={Cpu}
+          unit="%"
+          colorStops={[
+            [0, "#71717a"],
+            [50, "#52525b"],
+            [80, "#3f3f46"],
+          ]}
+        />
+        <ThermometerBar
+          value={data.gpuPowerDraw}
+          max={350}
+          label="GPU Power"
+          icon={Zap}
+          unit="W"
+          colorStops={[
+            [0, "#71717a"],
+            [40, "#52525b"],
+            [70, "#3f3f46"],
+          ]}
+        />
+        <ThermometerBar
+          value={data.latencyMs}
+          max={2000}
+          label="Latency"
+          icon={Activity}
+          unit="ms"
+          colorStops={[
+            [0, "#71717a"],
+            [30, "#52525b"],
+            [60, "#3f3f46"],
+          ]}
+        />
+        <ThermometerBar
+          value={Math.round(data.predictionError * 100)}
+          max={100}
+          label="Pred. Error"
+          icon={Flame}
+          unit="%"
+          colorStops={[
+            [0, "#71717a"],
+            [30, "#52525b"],
+            [60, "#3f3f46"],
+          ]}
+        />
+      </CardContent>
+    </Card>
+  );
+}