feat: show blank slate on first load instead of demo graph

Remove the demo brain anatomy visualization from initial state.
New users now see:
- Completely empty neural mesh on login
- Empty state message: 'Neural Mesh Idle - Start talking to build'
- Graph builds in real-time as user chats
- True 'baby brain' learning experience

The brain learns from scratch as the user interacts, not from predefined anatomy.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/src/components/KnowledgeGraph.css

@@ -279,3 +279,67 @@
   line-height: 1.8;
   opacity: 0.7;
 }
+
+/* ── Empty State ── */
+.graph-empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+  background: linear-gradient(135deg, rgba(245, 242, 236, 0.5) 0%, rgba(250, 250, 248, 0.5) 100%);
+}
+
+[data-theme="dark"] .graph-empty-state {
+  background: linear-gradient(135deg, rgba(15, 15, 24, 0.5) 0%, rgba(22, 22, 31, 0.5) 100%);
+}
+
+.empty-state-content {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 20px;
+  padding: 40px 60px;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+[data-theme="dark"] .empty-state-content {
+  background: rgba(25, 25, 40, 0.65);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.empty-state-icon {
+  font-size: 3.5rem;
+  opacity: 0.6;
+  animation: gentle-float 3s ease-in-out infinite;
+}
+
+@keyframes gentle-float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-12px); }
+}
+
+.empty-state-content h3 {
+  font-family: var(--font-display);
+  font-size: 1.2rem;
+  color: var(--text-0);
+  letter-spacing: 0.02em;
+}
+
+.empty-state-content p {
+  font-size: 0.85rem;
+  color: var(--text-1);
+  margin: 0;
+}
+
+.empty-state-subtext {
+  font-size: 0.75rem;
+  color: var(--text-2);
+  font-style: italic;
+}

frontend/src/components/KnowledgeGraph.jsx

@@ -125,11 +125,11 @@ function KnowledgeGraph({ highlightedNodes = [], currentUser, refreshTick }) {
       const data = await res.json();
 
       if (data.status === 'offline' || data.nodes.length === 0) {
-        // Show brain anatomy demo so the graph is never empty
-        setIsDemo(true);
-        setGraphStatus('demo');
-        setGraphData(DEMO_GRAPH);
-        setStats({ nodes: DEMO_GRAPH.nodes.length, edges: DEMO_GRAPH.links.length });
+        // Blank slate - no demo, just empty until user learns
+        setIsDemo(false);
+        setGraphStatus('empty');
+        setGraphData({ nodes: [], links: [] });
+        setStats({ nodes: 0, edges: 0 });
       } else {
         setIsDemo(false);
         setGraphStatus('online');
@@ -150,10 +150,11 @@ function KnowledgeGraph({ highlightedNodes = [], currentUser, refreshTick }) {
         setStats({ nodes: data.nodes.length, edges: data.edges.length });
       }
     } catch {
-      setIsDemo(true);
-      setGraphStatus('demo');
-      setGraphData(DEMO_GRAPH);
-      setStats({ nodes: DEMO_GRAPH.nodes.length, edges: DEMO_GRAPH.links.length });
+      // Blank slate on error
+      setIsDemo(false);
+      setGraphStatus('empty');
+      setGraphData({ nodes: [], links: [] });
+      setStats({ nodes: 0, edges: 0 });
     }
     setLoading(false);
     // Recenter camera once force simulation has settled
@@ -330,6 +331,18 @@ function KnowledgeGraph({ highlightedNodes = [], currentUser, refreshTick }) {
         </div>
       </div>
 
+      {/* Empty state - blank slate waiting to learn */}
+      {!loading && graphData.nodes.length === 0 && (
+        <div className="graph-empty-state">
+          <div className="empty-state-content">
+            <div className="empty-state-icon">🧠</div>
+            <h3>Neural Mesh Idle</h3>
+            <p>Start talking to build your knowledge graph</p>
+            <p className="empty-state-subtext">Your brain learns as you interact</p>
+          </div>
+        </div>
+      )}
+
       {/* Loading */}
       {loading && (
         <div className="graph-loading">