Create src/app/dashboard/page.tsx

src/app/dashboard/page.tsx

@@ -0,0 +1,108 @@
+'use client';
+import { useEffect, useState } from 'react';
+
+const INSIGHTS = [
+  { title: 'Emotional Authority', desc: 'Wait for emotional clarity before major decisions. Your wave is the oracle.', gate: '6' },
+  { title: 'Splenic Awareness', desc: 'In-the-moment intuition is your strongest signal. Trust the first impulse.', gate: '57' },
+  { title: 'Root Pressure', desc: 'You transmit urgency to others. Ground before engaging.', gate: '52' },
+];
+
+const METRICS = [
+  { label: 'System Load', value: 78, unit: '%', color: 'bg-violet-500' },
+  { label: 'Signal Clarity', value: 91, unit: '%', color: 'bg-cyan-500' },
+  { label: 'Coherence', value: 64, unit: '%', color: 'bg-amber-500' },
+  { label: 'Safety', value: 85, unit: '%', color: 'bg-green-500' },
+];
+
+export default function DashboardPage() {
+  const [user, setUser] = useState<Record<string,string> | null>(null);
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    const stored = localStorage.getItem('defrag_user');
+    if (stored) setUser(JSON.parse(stored));
+    const id = setInterval(() => setTick(t => t + 1), 3000);
+    return () => clearInterval(id);
+  }, []);
+
+  const currentGate = 10 + (tick % 54);
+
+  return (
+    <div className="min-h-screen p-6 max-w-6xl mx-auto">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-8">
+        <div>
+          <p className="text-xs font-mono text-slate-600 tracking-widest uppercase mb-1">System Status</p>
+          <h1 className="text-3xl font-light text-slate-100">
+            {user?.name ? `${user.name}'s` : 'Your'} Dashboard
+          </h1>
+          {user?.hdType && (
+            <p className="text-sm text-violet-400 font-mono mt-1">{user.hdType} • {user.sunGate || 'Gate Unknown'}</p>
+          )}
+        </div>
+        <div className="text-right">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-950 border border-green-800 text-green-400 text-xs font-mono">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+            ONLINE
+          </div>
+          <p className="text-xs text-slate-700 font-mono mt-1">Gate {currentGate} active</p>
+        </div>
+      </div>
+
+      {/* Metrics grid */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        {METRICS.map(m => (
+          <div key={m.label} className="p-4 rounded-lg border border-[#1e1e2e] bg-[#0d0d14]">
+            <p className="text-xs font-mono text-slate-600 uppercase tracking-wider mb-3">{m.label}</p>
+            <div className="flex items-end gap-1 mb-2">
+              <span className="text-3xl font-mono text-slate-100">{m.value}</span>
+              <span className="text-slate-600 text-sm mb-0.5">{m.unit}</span>
+            </div>
+            <div className="h-1 bg-slate-900 rounded-full overflow-hidden">
+              <div className={`h-full ${m.color} rounded-full transition-all duration-1000`} style={{ width: `${m.value}%` }} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Insight cards */}
+      <div className="mb-8">
+        <p className="text-xs font-mono text-slate-600 tracking-widest uppercase mb-4">Active Insights</p>
+        <div className="grid md:grid-cols-3 gap-4">
+          {INSIGHTS.map(ins => (
+            <div key={ins.title} className="p-5 rounded-lg border border-[#1e1e2e] bg-[#0d0d14] hover:border-violet-800/50 transition-colors">
+              <div className="flex items-start justify-between mb-3">
+                <span className="text-xs font-mono text-violet-400 tracking-wider">{ins.title}</span>
+                <span className="text-xs font-mono text-slate-700 border border-slate-800 px-1.5 py-0.5 rounded">
+                  G{ins.gate}
+                </span>
+              </div>
+              <p className="text-sm text-slate-400 leading-relaxed">{ins.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Quick nav */}
+      <div className="grid md:grid-cols-3 gap-4">
+        {[
+          { href: '/relationships', label: 'Relational Map', sub: 'View connection geometry' },
+          { href: '/oracle', label: 'Oracle Guidance', sub: 'Spoken AI insights' },
+          { href: '/onboarding', label: 'Update Profile', sub: 'Recalibrate your node' },
+        ].map(nav => (
+          <a
+            key={nav.href}
+            href={nav.href}
+            className="p-4 rounded-lg border border-[#1e1e2e] bg-[#0d0d14] hover:border-violet-800/50 flex items-center justify-between group transition-colors"
+          >
+            <div>
+              <p className="text-sm text-slate-200 group-hover:text-violet-400 transition-colors">{nav.label}</p>
+              <p className="text-xs text-slate-600">{nav.sub}</p>
+            </div>
+            <span className="text-slate-700 group-hover:text-violet-400 transition-colors">→</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}