Upload project files

src/components/consciousness-gauge.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface ConsciousnessGaugeProps {
+  value: number; // 0-1
+  label: string;
+  color: string;
+  size?: number;
+}
+
+export function ConsciousnessGauge({
+  value,
+  label,
+  color,
+  size = 72,
+}: ConsciousnessGaugeProps) {
+  const strokeWidth = 4;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - Math.min(Math.max(value, 0), 1));
+  const center = size / 2;
+
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg
+          width={size}
+          height={size}
+          className="-rotate-90"
+          viewBox={`0 0 ${size} ${size}`}
+        >
+          {/* Background circle */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            className="text-muted/30"
+          />
+          {/* Progress circle */}
+          <motion.circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            initial={{ strokeDashoffset: circumference }}
+            animate={{ strokeDashoffset: offset }}
+            transition={{ duration: 1, ease: "easeOut" }}
+            style={{
+              filter: `drop-shadow(0 0 4px ${color}80)`,
+            }}
+          />
+        </svg>
+        {/* Center value */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-[10px] font-mono font-bold" style={{ color }}>
+            {Math.round(value * 100)}
+          </span>
+        </div>
+      </div>
+      <span className="text-[9px] text-muted-foreground font-medium text-center leading-tight max-w-[72px] truncate">
+        {label}
+      </span>
+    </div>
+  );
+}