Create src/app/relationships/page.tsx

src/app/relationships/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+import { useState } from 'react';
+
+const DEMO_CONNECTIONS = [
+  {
+    name: 'Alex M.',
+    type: 'Generator',
+    gate: '34',
+    tension: 72,
+    harmony: 85,
+    channel: '34-57',
+    status: 'Active',
+    note: 'Electromagnetic channel: strong creative resonance. Watch for burnout loops.',
+  },
+  {
+    name: 'Jordan K.',
+    type: 'Projector',
+    gate: '13',
+    tension: 38,
+    harmony: 91,
+    channel: '13-33',
+    status: 'Dormant',
+    note: 'The Listener meets the Memory. Deep karmic recognition. Timing is everything.',
+  },
+  {
+    name: 'Sam R.',
+    type: 'Manifestor',
+    gate: '1',
+    tension: 88,
+    harmony: 44,
+    channel: '1-8',
+    status: 'Friction',
+    note: 'Both self-expression gates activated. Role conflict likely. Needs explicit agreements.',
+  },
+];
+
+const STATUS_COLORS: Record<string, string> = {
+  Active: 'text-green-400 border-green-800 bg-green-950',
+  Dormant: 'text-slate-500 border-slate-800 bg-slate-900',
+  Friction: 'text-amber-400 border-amber-800 bg-amber-950',
+};
+
+export default function RelationshipsPage() {
+  const [selected, setSelected] = useState<number | null>(null);
+
+  return (
+    <div className="min-h-screen p-6 max-w-5xl mx-auto">
+      <div className="mb-8">
+        <p className="text-xs font-mono text-slate-600 tracking-widest uppercase mb-1">Relational Geometry</p>
+        <h1 className="text-3xl font-light text-slate-100">Connection Map</h1>
+        <p className="text-sm text-slate-500 mt-1">Composite dynamics between your node and others</p>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-4 mb-8">
+        {DEMO_CONNECTIONS.map((c, i) => (
+          <button
+            key={c.name}
+            onClick={() => setSelected(selected === i ? null : i)}
+            className={`text-left p-5 rounded-xl border transition-all ${
+              selected === i
+                ? 'border-violet-600 bg-violet-950/30'
+                : 'border-[#1e1e2e] bg-[#0d0d14] hover:border-violet-800/40'
+            }`}
+          >
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <p className="text-slate-100 font-medium">{c.name}</p>
+                <p className="text-xs text-slate-600 font-mono">{c.type} · Gate {c.gate}</p>
+              </div>
+              <span className={`text-xs font-mono px-2 py-0.5 rounded border ${STATUS_COLORS[c.status]}`}>
+                {c.status}
+              </span>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <div>
+                <div className="flex justify-between text-xs text-slate-600 mb-1">
+                  <span>Harmony</span>
+                  <span>{c.harmony}%</span>
+                </div>
+                <div className="h-1 bg-slate-900 rounded-full">
+                  <div className="h-full bg-violet-500 rounded-full" style={{ width: `${c.harmony}%` }} />
+                </div>
+              </div>
+              <div>
+                <div className="flex justify-between text-xs text-slate-600 mb-1">
+                  <span>Tension</span>
+                  <span>{c.tension}%</span>
+                </div>
+                <div className="h-1 bg-slate-900 rounded-full">
+                  <div className="h-full bg-amber-500 rounded-full" style={{ width: `${c.tension}%` }} />
+                </div>
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {selected !== null && (
+        <div className="p-6 rounded-xl border border-violet-800/40 bg-violet-950/20">
+          <div className="flex items-start justify-between mb-4">
+            <div>
+              <p className="text-xs font-mono text-violet-400 uppercase tracking-widest mb-1">Composite Channel</p>
+              <h2 className="text-2xl font-light text-slate-100">{DEMO_CONNECTIONS[selected].channel}</h2>
+            </div>
+            <button onClick={() => setSelected(null)} className="text-slate-700 hover:text-slate-400 text-lg">×</button>
+          </div>
+          <p className="text-slate-400 leading-relaxed">{DEMO_CONNECTIONS[selected].note}</p>
+          <div className="mt-4 flex gap-3">
+            <a href="/oracle" className="px-4 py-2 text-xs font-mono rounded border border-violet-700 text-violet-400 hover:bg-violet-900/30 transition-colors">
+              Get Oracle Guidance
+            </a>
+          </div>
+        </div>
+      )}
+
+      <div className="mt-8 flex justify-end">
+        <a href="/onboarding" className="text-xs font-mono text-slate-600 hover:text-violet-400 transition-colors">
+          + Add Connection
+        </a>
+      </div>
+    </div>
+  );
+}