Create src/components/defrag/constellation-graph.tsx

src/components/defrag/constellation-graph.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Lock, User, GitCommit, ArrowUpRight } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+// Demo Data (Archetypes)
+const NODES = [
+  {
+    id: "collab",
+    name: "The Collaborator",
+    role: "Creative Mirror",
+    metric: "Synergy",
+    value: 78,
+    status: "active",
+    desc: "Reflects the tension between shared purpose and sovereignty.",
+  },
+  {
+    id: "father",
+    name: "The Patriarch",
+    role: "Authority Figure",
+    metric: "Structure",
+    value: 45,
+    status: "locked",
+    desc: "Origin point of structural conditioning. Analysis required.",
+  },
+  {
+    id: "shadow",
+    name: "The Shadow",
+    role: "Repressed Self",
+    metric: "Integration",
+    value: 12,
+    status: "locked",
+    desc: "Hidden friction vectors. High potential energy if integrated.",
+  },
+];
+
+export function ConstellationGraph() {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {/* ROOT NODE (SELF) */}
+      <Card className="p-6 border-amber-500/50 bg-amber-500/5 relative overflow-hidden">
+        <div className="absolute top-0 right-0 p-20 bg-amber-500/10 blur-[80px] rounded-full" />
+        <div className="relative z-10">
+          <div className="text-[10px] font-mono uppercase text-amber-500 mb-2">Root Node</div>
+          <h3 className="text-2xl font-bold text-white">Subject</h3>
+          <div className="mt-8 flex items-center gap-2 text-xs text-white/50">
+             <User className="w-3 h-3" /> Status: <span className="text-white">Conscious</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* NODES */}
+      {NODES.map((node) => {
+        const isLocked = node.status === "locked";
+        return (
+          <motion.div key={node.id} whileHover={!isLocked ? { scale: 1.02 } : {}}>
+            <Card 
+              onClick={() => !isLocked && setSelected(node.id)}
+              className={cn(
+                "p-6 h-full relative cursor-pointer border-white/5 bg-white/5 hover:bg-white/10 transition-all",
+                isLocked && "opacity-60 cursor-not-allowed border-dashed"
+              )}
+            >
+              {isLocked && (
+                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/60 backdrop-blur-sm">
+                  <Lock className="w-6 h-6 text-white/30 mb-2" />
+                  <span className="text-[10px] uppercase font-mono tracking-widest text-white/50">
+                    Architect Access
+                  </span>
+                </div>
+              )}
+
+              <div className="flex justify-between items-start mb-4">
+                <span className="px-2 py-1 rounded border border-white/10 text-[10px] uppercase tracking-wider text-white/50">
+                  {node.role}
+                </span>
+                <div className="text-[10px] font-mono text-white/50">
+                  {node.metric}: <span className="text-white">{node.value}%</span>
+                </div>
+              </div>
+
+              <h3 className="text-xl font-medium text-white mb-2">{node.name}</h3>
+              <p className="text-xs text-white/50 leading-relaxed line-clamp-2">
+                {node.desc}
+              </p>
+
+              {!isLocked && (
+                <div className="mt-6 flex items-center text-[10px] text-amber-500 font-mono uppercase tracking-wider">
+                  Analyze Dynamic <ArrowUpRight className="w-3 h-3 ml-1" />
+                </div>
+              )}
+            </Card>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}