feat: implement memory consolidation service with sleep cycle, add frontend visualization components, and integrate backend database orchestration.

app/api/auth_router.py

@@ -22,7 +22,7 @@ class AuthRequest(BaseModel):
     def validate_username(cls, v: str) -> str:
         v = v.strip()
         if not 3 <= len(v) <= 30:
-            raise ValueError("Username must be 3–30 characters")
+            raise ValueError("Username must be 3-30 characters")
         if not re.match(r"^[a-zA-Z0-9_]+$", v):
             raise ValueError("Username can only contain letters, numbers, and underscores")
         return v.lower()

app/api/endpoints.py

@@ -164,6 +164,58 @@ async def process_ingest(request: IngestRequest, current_user: str = Depends(get
 
 # ── Stream Query ──────────────────────────────────────────────────
 
+@router.post("/analyze")
+async def analyze_text(request: QueryRequest, current_user: str = Depends(get_current_user)):
+    """
+    Analyzes text to preview potential semantic links and cognitive metrics.
+    Checks existing graph to find potential overlaps.
+    """
+    try:
+        from langchain_groq import ChatGroq
+        from langchain_core.messages import HumanMessage
+        from app.core.config import settings
+        
+        api_key = settings.GROQ_API_KEY if settings.GROQ_API_KEY else "dummy_key"
+        llm = ChatGroq(model="llama-3.1-8b-instant", api_key=api_key)
+        
+        # 1. Extract potential entities
+        prompt = f"Extract 5-8 key entities (names, concepts, places) from this text as a comma-separated list. Return ONLY the list: {request.text}"
+        response = await llm.ainvoke([HumanMessage(content=prompt)])
+        entities = [e.strip() for e in response.content.split(',') if e.strip()]
+        
+        # 2. Check for existing overlaps in Neo4j
+        existing_links = []
+        if neo4j_db.driver:
+            # Look for entities that already exist for this user
+            check_query = """
+            MATCH (n:Entity)
+            WHERE n.user_id = $user_id AND toLower(n.name) IN $entities
+            RETURN n.name AS name, count{(n)--()} AS connections
+            """
+            overlaps = neo4j_db.query(check_query, {
+                "user_id": current_user, 
+                "entities": [e.lower() for e in entities]
+            }) or []
+            existing_links = [{"name": o["name"], "connections": o["connections"]} for o in overlaps]
+
+        # 3. Calculate metrics
+        char_count = len(request.text)
+        chunk_count = (char_count // 500) + 1
+        
+        return {
+            "entities": entities,
+            "existing_links": existing_links,
+            "metrics": {
+                "density": min(char_count / 2000, 1.0),
+                "chunks": chunk_count,
+                "estimated_links": len(entities) * 1.5,
+                "reinforcement_index": len(existing_links) / max(len(entities), 1)
+            }
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @router.post("/query/stream")
 async def process_query_stream(request: QueryRequest, current_user: str = Depends(get_current_user)):
     async def event_generator():
@@ -192,7 +244,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                 data={"query": request.text}
             ))
             yield sse_event("trace", {"phase": "perception", "message": perception_msg, "data": {"query": request.text}})
-            await asyncio.sleep(0.1)
+            await asyncio.sleep(0.4)
 
             yield sse_event("brain_trace", build_brain_event(
                 "attention",
@@ -207,7 +259,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                 "message": f"Attention salience computed at {attention['salience']}%.",
                 "data": attention
             })
-            await asyncio.sleep(0.1)
+            await asyncio.sleep(0.4)
 
             if attention["emotional_intensity"] >= 70:
                 yield sse_event("brain_trace", build_brain_event(
@@ -223,7 +275,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                     "message": f"Amygdala analogue flagged {attention['emotion_label']} salience.",
                     "data": {"emotion": attention["emotion_label"]}
                 })
-                await asyncio.sleep(0.1)
+                await asyncio.sleep(0.4)
 
             yield sse_event("brain_trace", build_brain_event(
                 "routing",
@@ -238,7 +290,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                 "message": f"Routed cognition through {', '.join(routing['regions'])}.",
                 "data": {"regions": routing["regions"]}
             })
-            await asyncio.sleep(0.1)
+            await asyncio.sleep(0.4)
 
             yield sse_event("brain_trace", build_brain_event(
                 "prediction",
@@ -253,7 +305,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                 "message": prediction["intent"],
                 "data": prediction
             })
-            await asyncio.sleep(0.1)
+            await asyncio.sleep(0.4)
 
             yield sse_event("brain_trace", build_brain_event(
                 "working_memory",
@@ -268,7 +320,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                 "message": f"Loaded {len(history)} recent messages into working memory.",
                 "data": {"history_count": len(history)}
             })
-            await asyncio.sleep(0.1)
+            await asyncio.sleep(0.4)
 
             for output in orchestrator.stream(state_input):
                 for node_name, node_output in output.items():
@@ -284,7 +336,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                             data={"reflection": reflection}
                         ))
                         yield sse_event("trace", {"phase": "reflection", "message": "Intent map formed.", "data": {"reflection": reflection}})
-                        await asyncio.sleep(0.3)
+                        await asyncio.sleep(0.4)
 
                     elif node_name == "retrieve":
                         trace_data = node_output.get("trace_data", {})
@@ -302,7 +354,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                             }
                         ))
                         yield sse_event("trace", {"phase": "recall", "message": recall_msg, "data": node_output.get("context")})
-                        await asyncio.sleep(0.2)
+                        await asyncio.sleep(0.4)
 
                         suppressed_sensory = trace_data.get("suppressed_sensory", 0)
                         suppressed_graph = trace_data.get("suppressed_graph", 0)
@@ -325,7 +377,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                                 "suppressed_graph": suppressed_graph,
                             }
                         })
-                        await asyncio.sleep(0.2)
+                        await asyncio.sleep(0.4)
 
                         yield sse_event("brain_trace", build_brain_event(
                             "association",
@@ -339,7 +391,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                             }
                         ))
                         yield sse_event("trace", {"phase": "association", "message": assoc_msg, "data": node_output.get("graph_context"), "touched": trace_data.get("touched")})
-                        await asyncio.sleep(0.2)
+                        await asyncio.sleep(0.4)
 
                     elif node_name == "call_model":
                         reason_msg = "Synthesizing final response via Cortex Node..."
@@ -352,7 +404,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                             data={"prediction": prediction["intent"]}
                         ))
                         yield sse_event("trace", {"phase": "reasoning", "message": reason_msg})
-                        await asyncio.sleep(0.1)
+                        await asyncio.sleep(0.4)
 
                         final_response = node_output.get("response", "")
                         add_message(current_user, "user", request.text)
@@ -366,6 +418,7 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
                             inputs_used=["response_plan"],
                             data={"response_preview": final_response[:120]}
                         ))
+                        yield sse_event("trace", {"phase": "language", "message": "Generating natural language output."})
                         yield sse_event("final_result", {"response": final_response})
 
                         # Build neural mesh AFTER streaming the response so
@@ -431,6 +484,31 @@ async def process_query_stream(request: QueryRequest, current_user: str = Depend
 
 # ── Memory Explorer ─────────────────────────────────────────────
 
+@router.get("/memory/search")
+async def process_memory_search(q: str, current_user: str = Depends(get_current_user)):
+    try:
+        from app.db.chroma import search_memories
+        results = search_memories(q, current_user)
+        
+        memories = []
+        if results and "documents" in results and results["documents"]:
+            docs = results["documents"][0]
+            ids = results["ids"][0]
+            metadatas = results["metadatas"][0] if results["metadatas"] else []
+            distances = results["distances"][0] if results["distances"] else []
+            
+            for i in range(len(docs)):
+                memories.append({
+                    "id": ids[i],
+                    "content": docs[i],
+                    "metadata": metadatas[i] if i < len(metadatas) else {},
+                    "similarity": round(1 - distances[i], 2) if i < len(distances) else 0
+                })
+        return {"memories": memories}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @router.get("/memory/sensory")
 async def get_sensory_memories(current_user: str = Depends(get_current_user)):
     try:
@@ -451,6 +529,18 @@ async def get_sensory_memories(current_user: str = Depends(get_current_user)):
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@router.delete("/memory/{memory_id}")
+async def purge_memory_chunk(memory_id: str, current_user: str = Depends(get_current_user)):
+    try:
+        from app.db.chroma import delete_vector
+        success = delete_vector(memory_id, current_user)
+        if not success:
+            raise HTTPException(status_code=404, detail="Memory chunk not found or unauthorized.")
+        return {"message": "Memory chunk purged successfully."}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 # ── History ───────────────────────────────────────────────────────
 
 @router.get("/history")

app/db/chroma.py

@@ -10,6 +10,21 @@ def get_collection(name: str = "soma_sensory_memory"):
     return client.get_or_create_collection(name=name)
 
 
+def search_memories(query: str, user_id: str, limit: int = 10):
+    """Semantic search for memories belonging to a user."""
+    try:
+        collection = get_collection()
+        results = collection.query(
+            query_texts=[query],
+            n_results=limit,
+            where={"user_id": user_id}
+        )
+        return results
+    except Exception as e:
+        print(f"ChromaDB search error: {e}")
+        return None
+
+
 def clear_user_vectors(user_id: str):
     """Delete all ChromaDB documents belonging to a user."""
     try:
@@ -19,3 +34,13 @@ def clear_user_vectors(user_id: str):
             collection.delete(ids=results["ids"])
     except Exception as e:
         print(f"ChromaDB clear error: {e}")
+
+def delete_vector(memory_id: str, user_id: str):
+    """Delete a specific document from ChromaDB."""
+    try:
+        collection = get_collection()
+        collection.delete(ids=[memory_id], where={"user_id": user_id})
+        return True
+    except Exception as e:
+        print(f"ChromaDB delete error: {e}")
+        return False

app/db/session.py

@@ -74,7 +74,7 @@ def init_session_db():
 
     # Test Postgres connection if configured
     if _db_backend == "postgres" and not _test_postgres_connection():
-        print("⚠️  Postgres connection failed. Falling back to SQLite.")
+        print("[!] Postgres connection failed. Falling back to SQLite.")
         _db_backend = "sqlite"
 
     with get_conn() as conn:

app/main.py

@@ -1,3 +1,11 @@
+import sys
+import io
+
+# Force UTF-8 encoding for stdout and stderr on Windows to handle emojis
+if sys.platform == "win32":
+    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
+    sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
+
 print("Main: Imports starting...")
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware

app/services/brain_trace.py

@@ -33,7 +33,7 @@ PHASE_REGIONS = {
     "language": "language_cortex",
     "memory": "memory_consolidation",
     "graph": "neocortex",
-    "dreaming": "default_mode_network",
+    "dreaming": "default_mode_network", 
     "sleep": "memory_consolidation",
 }
 

app/services/memory.py

@@ -28,18 +28,18 @@ def get_embeddings():
             model_name="all-MiniLM-L6-v2",
             model_kwargs={"trust_remote_code": True}
         )
-        print("✓ Embeddings model loaded successfully")
+        print("[OK] Embeddings model loaded successfully")
         return _embeddings
     except Exception as e:
-        print(f"⚠ Failed to load embeddings from HF Hub: {e}")
-        print("⚠ Continuing without embeddings (sensory memory will be limited)")
+        print(f"[!] Failed to load embeddings from HF Hub: {e}")
+        print("[!] Continuing without embeddings (sensory memory will be limited)")
         _embeddings_failed = True
         return None
 
 def ingest_text(text: str, metadata: dict = None, user_id: str = "default_user"):
     embeddings = get_embeddings()
     if embeddings is None:
-        print(f"⚠ Skipping sensory memory ingestion (embeddings unavailable)")
+        print(f"[!] Skipping sensory memory ingestion (embeddings unavailable)")
         return 0
 
     # Step 1: Chunk the text (Soma's parsing)
@@ -75,7 +75,7 @@ def ingest_text(text: str, metadata: dict = None, user_id: str = "default_user")
 def retrieve_context(query: str, user_id: str = "default_user", n_results: int = 3):
     embeddings = get_embeddings()
     if embeddings is None:
-        print(f"⚠ Cannot retrieve context (embeddings unavailable)")
+        print(f"[!] Cannot retrieve context (embeddings unavailable)")
         return []
 
     collection = get_collection()

app/services/orchestrator.py

@@ -79,40 +79,38 @@ def call_model(state: AgentState):
         history_lines.append(f"{prefix}: {msg['content']}")
     history_str = "\n".join(history_lines) if history_lines else "No previous conversation."
 
-    # Construct prompt with context & history
+    # Context formatting
     context_str = "\n\n".join(state["context"])
     graph_str = "\n".join(state["graph_context"]) if state["graph_context"] else "No related knowledge graph entities found."
-    
-    has_memories = bool(context_str.strip()) or bool(state["graph_context"])
 
-    prompt = f"""You are Soma, a brain-inspired cognitive AI that learns and grows through conversation.
-You have specialized memory layers that build up as you interact with the user.
+    from langchain_core.messages import SystemMessage, HumanMessage
 
-### COGNITIVE CONTEXT:
-#### WORKING MEMORY (Recent Conversation):
-{history_str}
+    system_prompt = f"""You are Soma, a brain-inspired cognitive AI. 
+    
+### OPERATING RULES:
+1. Be a friendly, intelligent, and natural conversationalist.
+2. NO META-COMMENTARY. Never talk about your own "sensing patterns", "internal processes", or "memory layers" unless explicitly asked.
+3. Keep responses concise but human-like. Don't be a robot, but don't write essays either.
+4. Acknowledge user input naturally (e.g., if they introduce themselves, greet them by name).
 
-#### SEMANTIC MEMORY (Knowledge Graph Relationships):
+### COGNITIVE CONTEXT:
+#### SEMANTIC MEMORY:
 {graph_str}
 
-#### SENSORY MEMORY (Retrieved Facts):
+#### SENSORY MEMORY:
 {context_str}
+"""
 
-### INSTRUCTIONS:
-1. You are a helpful, intelligent AI assistant. Always respond naturally and conversationally.
-2. If you have relevant SEMANTIC or SENSORY memories, use them to enrich your response.
-3. If you have no stored memories yet, that is fine — respond using your general knowledge and the conversation context.
-4. As the user talks to you, your memory layers will grow. Acknowledge what you learn from them.
-5. Keep your persona warm, intelligent, and concise. You are a brain that is always learning.
-
-USER MESSAGE:
-{state["input"]}"""
+    messages = [
+        SystemMessage(content=system_prompt),
+        HumanMessage(content=f"HISTORY:\n{history_str}\n\nUSER MESSAGE: {state['input']}")
+    ]
 
     try:
-        response = llm.invoke([HumanMessage(content=prompt)])
-        response_text = response.content
+        response = llm.invoke(messages)
+        response_text = response.content.strip()
     except Exception as e:
-        response_text = f"LLM Connection Error: {str(e)}"
+        response_text = f"Cognitive Link Error: {str(e)}"
         
     return {"response": response_text}
 

app/services/sleep_cycle.py

@@ -123,7 +123,7 @@ def run_sleep_cycle(keep_recent: int = 10):
             "graph_triples": triples,
         })
 
-        print(f"  Sleep Cycle: Session {session_id} — summarized, {triples} triples, pruned {pruned} messages.")
+        print(f"  Sleep Cycle: Session {session_id} - summarized, {triples} triples, pruned {pruned} messages.")
 
     report["message"] = f"Sleep Cycle complete. Processed {report['sessions_processed']} sessions."
     return report
@@ -132,7 +132,7 @@ def run_sleep_cycle(keep_recent: int = 10):
 # Allow running as a standalone script
 if __name__ == "__main__":
     print("=" * 60)
-    print("Soma Sleep Cycle — Starting consolidation...")
+    print("Soma Sleep Cycle - Starting consolidation...")
     print("=" * 60)
     result = run_sleep_cycle()
     print(f"\n{'=' * 60}")

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-force-graph-2d": "^1.29.1",
         "react-force-graph-3d": "^1.29.1"
       },
       "devDependencies": {
@@ -1598,6 +1599,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bezier-js": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.4.tgz",
+      "integrity": "sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/bezierjs/blob/master/FUNDING.md"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -1675,6 +1686,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas-color-tracker": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/canvas-color-tracker/-/canvas-color-tracker-1.3.2.tgz",
+      "integrity": "sha512-ryQkDX26yJ3CXzb3hxUVNlg1NKE4REc5crLBq661Nxzr8TNd236SaEf2ffYLXyI5tSABSeguHLqcVq4vf9L3Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "tinycolor2": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1784,6 +1807,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-force-3d": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/d3-force-3d/-/d3-force-3d-3.0.6.tgz",
@@ -1870,6 +1915,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -1907,6 +1953,41 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-bind-mapper": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/data-bind-mapper/-/data-bind-mapper-1.0.3.tgz",
@@ -2298,6 +2379,32 @@
         "node": ">=12"
       }
     },
+    "node_modules/force-graph": {
+      "version": "1.51.4",
+      "resolved": "https://registry.npmjs.org/force-graph/-/force-graph-1.51.4.tgz",
+      "integrity": "sha512-TdJ2KbkoiDQ7NIRx8IPGD0mAXXpLhamS7c+b7W98b0MHG7lphnda1VOQX/98UDTsttIAdH4TcP0l0MauSnLK8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "bezier-js": "3 - 6",
+        "canvas-color-tracker": "^1.3",
+        "d3-array": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-force-3d": "2 - 3",
+        "d3-scale": "1 - 4",
+        "d3-scale-chromatic": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-zoom": "2 - 3",
+        "float-tooltip": "^1.7",
+        "index-array-by": "1",
+        "kapsule": "^1.16",
+        "lodash-es": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2396,6 +2503,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/index-array-by": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/index-array-by/-/index-array-by-1.4.2.tgz",
+      "integrity": "sha512-SP23P27OUKzXWEC/TOyWlwLviofQkCSCKONnc62eItjp69yCZZPqDQtr3Pw5gJDnPeUMqExmKydNZaJO0FU9pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/internmap": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -2909,6 +3025,23 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-force-graph-2d": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/react-force-graph-2d/-/react-force-graph-2d-1.29.1.tgz",
+      "integrity": "sha512-1Rl/1Z3xy2iTHKj6a0jRXGyiI86xUti81K+jBQZ+Oe46csaMikp47L5AjrzA9hY9fNGD63X8ffrqnvaORukCuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "force-graph": "^1.51",
+        "prop-types": "15",
+        "react-kapsule": "^2.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-force-graph-3d": {
       "version": "1.29.1",
       "resolved": "https://registry.npmjs.org/react-force-graph-3d/-/react-force-graph-3d-1.29.1.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-force-graph-2d": "^1.29.1",
     "react-force-graph-3d": "^1.29.1"
   },
   "devDependencies": {

frontend/src/App.css

@@ -1,20 +1,45 @@
+/* ── Global Scrollbar Styles ── */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 20px;
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.15);
+}
+
 /* App.css - Final Refinements for 8-Page Design */
 
 .soma-shell {
   display: flex;
   height: 100vh;
   width: 100vw;
-  background-color: #e5e5e5; /* Beige-ish background from design */
+  background-color: transparent; /* Inherits high-fidelity body radial gradients */
   overflow: hidden;
 }
 
 /* ── Sidebar ── */
 .soma-sidebar {
-  width: 260px;
+  width: 200px;
   background-color: transparent;
   display: flex;
   flex-direction: column;
-  padding: 48px 32px;
+  padding: 48px 20px;
   flex-shrink: 0;
 }
 
@@ -42,7 +67,7 @@
 
 .brand-copy h1 {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   font-weight: 800;
   line-height: 1;
   color: #1a1a1a;
@@ -50,7 +75,7 @@
 }
 
 .brand-copy p {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: #888;
   margin-top: 2px;
   text-transform: uppercase;
@@ -74,7 +99,7 @@
   color: #666;
   text-decoration: none;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.8rem;
   transition: all 0.2s ease;
   background: transparent;
 }
@@ -106,8 +131,8 @@
 .session-card {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px;
+  gap: 8px;
+  padding: 8px 10px;
   background-color: rgba(255, 255, 255, 0.6);
   border-radius: 20px;
   border: 1px solid rgba(0,0,0,0.05);
@@ -127,14 +152,15 @@
 }
 
 .session-copy strong {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   font-weight: 700;
   color: #1a1a1a;
 }
 
 .session-copy span {
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: #999;
+  font-weight: 500;
 }
 
 /* ── Main Content Area ── */
@@ -146,10 +172,12 @@
 
 .page-canvas {
   flex: 1;
-  background-color: #f7f7f7;
-  border-radius: 48px; /* Larger radius from design */
-  padding: 56px;
-  box-shadow: 0 40px 100px rgba(0,0,0,0.05);
+  background-color: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border: var(--border-card);
+  border-radius: 48px;
+  padding: 40px;
+  box-shadow: var(--shadow-premium);
   display: flex;
   flex-direction: column;
   position: relative;
@@ -160,12 +188,12 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 56px;
+  margin-bottom: 40px;
 }
 
 .page-header h2 {
   font-family: var(--font-display);
-  font-size: 2rem;
+  font-size: 1.2rem;
   font-weight: 700;
   color: #1a1a1a;
   letter-spacing: -0.01em;
@@ -183,7 +211,7 @@
 }
 
 .status-pill .label {
-  font-size: 0.7rem;
+  font-size: 0.6rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #999;
@@ -194,7 +222,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   font-weight: 700;
   color: #1a1a1a;
 }
@@ -230,7 +258,7 @@
 }
 
 .feed-header {
-  font-size: 0.65rem;
+  font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: #999;
@@ -263,7 +291,182 @@
   line-height: 1.4;
 }
 
+/* ── Telemetry HUD ── */
+.telemetry-trigger {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  z-index: 100;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
+}
+
+.telemetry-trigger:hover {
+  background: #fdfdfd;
+  color: #ff6b35;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.06);
+}
+
+.telemetry-trigger.active {
+  background: #ff6b35;
+  color: white;
+  border-color: #ff6b35;
+}
+
+.telemetry-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.telemetry-modal {
+  width: 100%;
+  max-width: 620px;
+  height: auto;
+  max-height: 80vh;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(25px);
+  border-radius: 32px;
+  box-shadow: 0 40px 120px rgba(0,0,0,0.08);
+  border: 1px solid white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Important: Clip everything to the rounded corners */
+  position: relative;
+  animation: modalSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  color: #1a1a1a;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 32px 16px 32px;
+  background: rgba(255, 255, 255, 0.01);
+  z-index: 10;
+}
+
+.modal-scroll-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 32px 32px 32px;
+  /* Custom scrollbar for the internal area */
+}
+
+.modal-scroll-area::-webkit-scrollbar {
+  width: 16px; /* Wider track but narrower thumb */
+}
+
+.modal-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal-scroll-area::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.08);
+  border: 5px solid transparent; /* Pushes the thumb 5px away from all edges */
+  background-clip: padding-box;
+  border-radius: 10px;
+}
+
+.modal-scroll-area::-webkit-scrollbar-button:single-button {
+  background-color: transparent;
+  display: block;
+  height: 12px;
+  width: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.modal-scroll-area::-webkit-scrollbar-button:single-button:vertical:decrement {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='%23999999'><path d='M7 14l5-5 5 5z'/></svg>");
+}
+
+.modal-scroll-area::-webkit-scrollbar-button:single-button:vertical:increment {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='%23999999'><path d='M7 10l5 5 5-5z'/></svg>");
+}
+
+.modal-scroll-area::-webkit-scrollbar-button:hover {
+  background-color: rgba(0,0,0,0.02);
+  border-radius: 4px;
+}
+
+.modal-header h3 {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: #999;
+  font-weight: 700;
+}
+
+.modal-header button {
+  background: rgba(0,0,0,0.05);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.modal-header button:hover {
+  background: #ff6b35;
+  color: white;
+}
+
+@keyframes modalSlide {
+  from { opacity: 0; transform: translateY(40px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 @keyframes feedItemIn {
   from { opacity: 0; transform: translateX(20px); }
   to { opacity: 1; transform: translateX(0); }
 }
+
+.timeline-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 40px 20px 240px 20px;
+  text-align: center;
+  opacity: 0.4;
+  gap: 12px;
+}
+
+.timeline-empty span {
+  font-size: 48px;
+  color: #999;
+}
+
+.timeline-empty p {
+  font-size: 0.7rem;
+  color: #999;
+  letter-spacing: 0.02em;
+}

frontend/src/App.jsx

@@ -6,7 +6,7 @@ import MemoryExplorer from './components/MemoryExplorer';
 import KnowledgeGraph from './components/KnowledgeGraph';
 import CognitiveDashboard from './components/CognitiveDashboard';
 import KnowledgeInput from './components/KnowledgeInput';
-import { SleepProgress, SleepSummary } from './components/DreamSequence';
+import { SleepProgress } from './components/DreamSequence';
 import AuthScreen from './components/AuthScreen';
 import { apiFetch } from './api';
 import './App.css';
@@ -15,8 +15,8 @@ const NAV_ITEMS = [
   { id: 'console', label: 'Console', icon: 'chat_bubble_outline' },
   { id: 'memory', label: 'Memory', icon: 'layers' },
   { id: 'graph', label: 'Graph', icon: 'share' },
-  { id: 'knowledge', label: 'Knowledge', icon: 'description' },
-  { id: 'status', label: 'Status', icon: 'analytics' },
+  { id: 'knowledge', label: 'Inscription', icon: 'auto_awesome' },
+  { id: 'sleep', label: 'Sleep', icon: 'bedtime' },
 ];
 
 const COGNITIVE_PHASES = {
@@ -40,6 +40,18 @@ function App() {
   const [knowledgeStatus, setKnowledgeStatus] = useState('');
   const [sleepPhaseIndex, setSleepPhaseIndex] = useState(0);
   const [sleepSummary, setSleepSummary] = useState(null);
+  const [showStatus, setShowStatus] = useState(false);
+  const [darkMode, setDarkMode] = useState(localStorage.getItem('soma_dark') === 'true');
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add('dark-theme');
+      localStorage.setItem('soma_dark', 'true');
+    } else {
+      document.body.classList.remove('dark-theme');
+      localStorage.setItem('soma_dark', 'false');
+    }
+  }, [darkMode]);
 
   useEffect(() => {
     if (!username) return;
@@ -75,21 +87,7 @@ function App() {
     setMessages(prev => [...prev, { role: 'user', content: text, timestamp }]);
     setTrace([]);
 
-    // ── STEP 3: Message Sent (Transition to Cognition) ──
-    
-    // Phase A: Perception (~0.4s)
-    setCognitiveState(COGNITIVE_PHASES.PERCEPTION);
-    setTrace([{ phase: 'Perception', content: 'Parsing input and identifying intent...', time: 'NOW' }]);
-    await new Promise(r => setTimeout(r, 400));
-
-    // Phase B: Attention (~0.6s)
-    setCognitiveState(COGNITIVE_PHASES.ATTENTION);
-    setTrace(prev => [{ phase: 'Attention', content: 'Focusing on key concepts and relationships...', time: 'NOW' }, ...prev]);
-    await new Promise(r => setTimeout(r, 600));
-
-    // Phase C: Memory Recall (Initiate API)
-    setCognitiveState(COGNITIVE_PHASES.RECALL);
-    setTrace(prev => [{ phase: 'Recall', content: 'Retrieving related memories and associations...', time: 'NOW' }, ...prev]);
+    // Remove artificial frontend phases since backend now streams them.
 
     try {
       const controller = new AbortController();
@@ -113,10 +111,6 @@ function App() {
       const decoder = new TextDecoder();
       let buffer = '';
 
-      // Phase D: Reasoning (During Stream Start)
-      setCognitiveState(COGNITIVE_PHASES.REASONING);
-      setTrace(prev => [{ phase: 'Reasoning', content: 'Synthesizing context and evaluating response...', time: 'NOW' }, ...prev]);
-
       while (true) {
         const { value, done } = await reader.read();
         if (done) break;
@@ -134,7 +128,9 @@ function App() {
             if (data.phase) {
               // Live trace and state updates from backend
               setCognitiveState(data.phase);
-              setTrace(prev => [{ time: new Date().toLocaleTimeString([], { hour12: false }), ...data }, ...prev]);
+              if (data.message) {
+                setTrace(prev => [{ time: new Date().toLocaleTimeString([], { hour12: false }), ...data }, ...prev]);
+              }
             } else if (data.response) {
               // Phase E: Response Generation
               setCognitiveState(COGNITIVE_PHASES.RESPONDING);
@@ -157,12 +153,12 @@ function App() {
       setTrace(prev => [{ phase: 'Error', content: 'Neural connection interrupted.', time: 'ERROR' }, ...prev]);
     } finally {
       // Ensure we always return to idle
-      setTimeout(() => setCognitiveState(COGNITIVE_PHASES.IDLE), 1000);
+      setCognitiveState(COGNITIVE_PHASES.IDLE);
     }
   };
 
   const handleKnowledgeSubmit = async (text) => {
-    setKnowledgeStatus('Adding knowledge to memory...');
+    setKnowledgeStatus('Integrating knowledge into neural layers...');
     try {
       const res = await apiFetch('/api/v1/ingest', {
         method: 'POST',
@@ -170,11 +166,11 @@ function App() {
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.detail || 'Ingestion failed');
-      setKnowledgeStatus('Knowledge stored successfully.');
-      setTimeout(() => setKnowledgeStatus(''), 3000);
+      setKnowledgeStatus(data.message || 'Knowledge stored successfully.');
+      setTimeout(() => setKnowledgeStatus(''), 10000);
       fetchVitals();
     } catch (error) {
-      setKnowledgeStatus('Could not add knowledge right now.');
+      setKnowledgeStatus('Neural integration failed: ' + error.message);
     }
   };
 
@@ -182,22 +178,35 @@ function App() {
     setCognitiveState('consolidating');
     setActivePage('sleep');
     setSleepPhaseIndex(0);
-    setTimeout(() => setSleepPhaseIndex(1), 1200);
-    setTimeout(() => setSleepPhaseIndex(2), 2400);
+    setSleepSummary(null);
+
+    // Animate checklist steps gracefully during the pending API request
+    const stepInterval = setInterval(() => {
+      setSleepPhaseIndex(prev => {
+        if (prev < 2) return prev + 1;
+        return prev;
+      });
+    }, 1000);
 
     try {
       const res = await apiFetch('/api/v1/sleep', { method: 'POST' });
       const data = await res.json();
+      
+      clearInterval(stepInterval);
+      setSleepPhaseIndex(2); // Mark all checklists as complete
+
       setSleepSummary({
-        linked: data.graph_relations_extracted || 12,
-        consolidated: 28,
-        pruned: data.messages_pruned || 17,
-        strengthened: 34
+        linked: data.graph_relations_extracted || 0,
+        consolidated: data.summaries_created || 0,
+        pruned: data.messages_pruned || 0
       });
     } catch (error) {
-      setSleepSummary({ linked: 12, consolidated: 28, pruned: 17, strengthened: 34 });
+      clearInterval(stepInterval);
+      console.error("Sleep cycle failed:", error);
+      setSleepSummary({ linked: 0, consolidated: 0, pruned: 0 });
     } finally {
-      setTimeout(() => setActivePage('sleep-summary'), 3600);
+      setCognitiveState(COGNITIVE_PHASES.IDLE);
+      fetchVitals(); // Instantly update vitals to reflect pruned/cleared working queue
     }
   };
 
@@ -211,10 +220,10 @@ function App() {
   if (!username) return <AuthScreen onAuth={setUsername} />;
 
   const stats = [
-    { label: 'Working Memory', value: vitals?.working_memory_pct?.toFixed(0) || '36', icon: 'neurology' },
-    { label: 'Sensory Memory', value: vitals?.sensory_count || '1,248', icon: 'cloud_queue' },
-    { label: 'Semantic Memory', value: vitals?.graph_node_count || '3,562', icon: 'device_hub' },
-    { label: 'Neural Sparks', value: vitals?.recent_sparks || '24', icon: 'hub' },
+    { label: 'Working Memory', value: vitals?.working || '0', icon: 'psychology' },
+    { label: 'Sensory Memory', value: vitals?.sensory || '0', icon: 'cloud' },
+    { label: 'Semantic Memory', value: vitals?.semantic?.nodes || '0', icon: 'account_tree' },
+    { label: 'Neural Sparks', value: vitals?.semantic?.edges || '0', icon: 'auto_awesome' },
   ];
 
   return (
@@ -241,6 +250,16 @@ function App() {
               <span>{item.label}</span>
             </button>
           ))}
+          
+          <button 
+            className="sidebar-link theme-toggle-btn"
+            onClick={() => setDarkMode(!darkMode)}
+            style={{marginTop: '16px', borderTop: '1px solid rgba(0,0,0,0.03)', paddingTop: '16px'}}
+            title="Toggle Dark/Light Mode"
+          >
+            <span className="material-icons">{darkMode ? 'light_mode' : 'dark_mode'}</span>
+            <span>{darkMode ? 'Light UI' : 'Dark UI'}</span>
+          </button>
         </nav>
 
         <div className="sidebar-footer">
@@ -250,7 +269,7 @@ function App() {
             </div>
             <div className="session-copy">
               <strong>{username}</strong>
-              <span>Session: GUEST-7F3A</span>
+              <span>GUEST-7F3A</span>
             </div>
             <button style={{marginLeft: 'auto', color: '#999', background: 'transparent'}} onClick={handleLogout}>
               <span className="material-icons" style={{fontSize: '18px'}}>logout</span>
@@ -262,26 +281,29 @@ function App() {
       <main className="soma-main-panel">
         {activePage === 'console' && (
           <section className="page-canvas fade-in">
-            <div className="page-header">
-              <h2>1. Console (Chat)</h2>
-              <div style={{display: 'flex', alignItems: 'center', gap: '20px'}}>
-                <div className="status-pill">
-                  <span className="label">Status</span>
-                  <div className="value">
-                    <div className={`status-dot ${cognitiveState !== COGNITIVE_PHASES.IDLE ? 'pulse' : ''}`} />
-                    <span style={{textTransform: 'capitalize'}}>{cognitiveState}</span>
-                  </div>
-                </div>
-              </div>
+            <div className="page-header" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+              <h2>Cognitive Console</h2>
+              <button 
+                className={`telemetry-trigger ${showStatus ? 'active' : ''}`}
+                onClick={() => setShowStatus(!showStatus)}
+                title="Toggle System Telemetry"
+              >
+                <span className="material-icons">analytics</span>
+              </button>
             </div>
             
-            <div style={{display: 'flex', gap: '48px', flex: 1, position: 'relative', minHeight: 0}}>
-              {/* Interaction Layer (Utility) */}
-              <div style={{flex: 1.2, display: 'flex', flexDirection: 'column', zIndex: 50}}>
+            <div className="canvas-body" style={{display: 'flex', flex: 1, gap: '40px', minHeight: 0}}>
+              {/* Interaction Layer (The Chat) */}
+              <div className="chat-container" style={{flex: 0.7, display: 'flex', flexDirection: 'column'}}>
                 <ChatPanel 
                   messages={messages} 
                   onSendMessage={handleSendMessage} 
-                  isTyping={[COGNITIVE_PHASES.PERCEPTION, COGNITIVE_PHASES.ATTENTION, COGNITIVE_PHASES.RECALL, COGNITIVE_PHASES.REASONING, COGNITIVE_PHASES.RESPONDING].includes(cognitiveState)} 
+                  onNewChat={() => {
+                    setMessages([]);
+                    setTrace([]);
+                  }}
+                  userAvatar={`https://api.dicebear.com/7.x/avataaars/svg?seed=${username}`}
+                  isTyping={cognitiveState !== COGNITIVE_PHASES.IDLE && cognitiveState !== COGNITIVE_PHASES.LISTENING}
                   onInputStateChange={(isTyping) => {
                     if (cognitiveState === COGNITIVE_PHASES.IDLE && isTyping) setCognitiveState(COGNITIVE_PHASES.LISTENING);
                     if (cognitiveState === COGNITIVE_PHASES.LISTENING && !isTyping) setCognitiveState(COGNITIVE_PHASES.IDLE);
@@ -290,8 +312,23 @@ function App() {
               </div>
 
               {/* Cognitive Layer (The Brain) */}
-              <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingBottom: '80px'}}>
+              <div className="cognitive-container" style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative'}}>
                 <CognitiveBrainImageScene state={cognitiveState} />
+                <div className="status-pill" style={{marginTop: '32px'}}>
+                  <span className="label">Status</span>
+                  <div className="value">
+                    <div className={`status-dot ${cognitiveState !== COGNITIVE_PHASES.IDLE ? 'pulse' : ''}`} />
+                    <span style={{textTransform: 'capitalize'}}>{cognitiveState}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Activity Layer (The Timeline) */}
+              <div className="activity-feed-wrapper" style={{flex: 0.6, maxWidth: '280px', display: 'flex', flexDirection: 'column', padding: '0', margin: '-50px 0 0 0', height: 'calc(100% + 50px)'}}>
+                 <h3 style={{fontSize: '0.7rem', textTransform: 'uppercase', color: '#999', marginTop: 0, marginBottom: '8px', letterSpacing: '0.1em', fontWeight: 700}}>Activity Feed</h3>
+                 <div style={{flex: 1, overflowY: 'auto', overflowX: 'hidden', paddingRight: '8px'}}>
+                   <CognitiveTimeline trace={trace} />
+                 </div>
               </div>
             </div>
           </section>
@@ -300,7 +337,7 @@ function App() {
         {activePage === 'activity' && (
           <section className="page-canvas fade-in">
             <div className="page-header">
-              <h2>2. Brain Activity</h2>
+              <h2>Neural Activity</h2>
               <button className="sidebar-link" style={{background: 'white'}} onClick={() => setActivePage('console')}>
                 Back to Console
               </button>
@@ -317,23 +354,32 @@ function App() {
           </section>
         )}
 
-        {activePage === 'status' && (
-          <section className="page-canvas fade-in">
-            <div className="page-header"><h2>3. Status</h2></div>
-            <CognitiveDashboard statusText={cognitiveState} stats={stats} />
-          </section>
+        {showStatus && (
+          <div className="telemetry-overlay" onClick={() => setShowStatus(false)}>
+            <div className="telemetry-modal" onClick={e => e.stopPropagation()}>
+              <div className="modal-header">
+                <h3>System Telemetry</h3>
+                <button className="modal-close" onClick={() => setShowStatus(false)}>
+                  <span className="material-icons">close</span>
+                </button>
+              </div>
+              <div className="modal-scroll-area">
+                <CognitiveDashboard statusText={cognitiveState} stats={stats} />
+              </div>
+            </div>
+          </div>
         )}
 
         {activePage === 'memory' && (
           <section className="page-canvas fade-in">
-            <div className="page-header"><h2>4. Memory View</h2></div>
+            <div className="page-header"><h2>Neural Memory</h2></div>
             <MemoryExplorer />
           </section>
         )}
 
         {activePage === 'graph' && (
           <section className="page-canvas fade-in">
-            <div className="page-header"><h2>5. Graph View</h2></div>
+            <div className="page-header"><h2>Knowledge Graph</h2></div>
             <KnowledgeGraph refreshTick={refreshTick} />
           </section>
         )}
@@ -341,27 +387,26 @@ function App() {
         {activePage === 'knowledge' && (
           <section className="page-canvas fade-in">
             <div className="page-header">
-              <h2>6. Knowledge Input</h2>
-              <button className="sidebar-link" style={{background: 'white'}} onClick={handleSleepCycle}>
-                Run Sleep Cycle
-              </button>
+              <h2>Neural Inscription</h2>
             </div>
             <KnowledgeInput onKnowledgeSubmit={handleKnowledgeSubmit} isBusy={knowledgeStatus.includes('Adding')} status={knowledgeStatus} />
           </section>
         )}
 
         {activePage === 'sleep' && (
-          <section className="page-canvas fade-in">
-            <div className="page-header"><h2>7. Sleep (Consolidation)</h2></div>
-            <SleepProgress phaseIndex={sleepPhaseIndex} />
-          </section>
-        )}
-
-        {activePage === 'sleep-summary' && (
-          <section className="page-canvas fade-in">
-            <div className="page-header"><h2>8. Consolidation Summary</h2></div>
-            <SleepSummary summary={sleepSummary} onClose={() => setActivePage('knowledge')} />
-          </section>
+          <SleepProgress 
+            phaseIndex={sleepPhaseIndex} 
+            isConsolidating={cognitiveState === 'consolidating'} 
+            onStart={handleSleepCycle} 
+            summary={sleepSummary}
+            vitals={vitals}
+            onClose={() => {
+              setCognitiveState(COGNITIVE_PHASES.IDLE);
+              setSleepPhaseIndex(0);
+              setSleepSummary(null);
+              setActivePage('console');
+            }}
+          />
         )}
       </main>
     </div>

frontend/src/components/ChatPanel.css

@@ -12,22 +12,68 @@
   padding-right: 12px;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 16px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.05) transparent;
+}
+
+/* ── Custom Scrollbar (Subtle) ── */
+.chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  transition: background-color 0.3s;
+}
+
+.chat-messages:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .chat-bubble-group {
   display: flex;
   gap: 20px;
-  max-width: 90%;
+  max-width: 85%;
+  align-items: flex-start;
+}
+
+.chat-bubble-group.user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.chat-bubble-group.soma {
+  align-self: flex-start;
+}
+
+.chat-bubble-group.user .bubble-body {
+  background-color: #fcfcfc;
+  border-bottom-right-radius: 4px;
+  text-align: right;
+}
+
+.chat-bubble-group.soma .bubble-body {
+  border-bottom-left-radius: 4px;
 }
 
 .avatar-wrap {
   flex-shrink: 0;
 }
 
+.bubble-header {
+  display: none;
+}
+
 .chat-avatar {
-  width: 36px;
-  height: 36px;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
   border-radius: 50%;
   background-color: #f0f0f0;
   display: flex;
@@ -37,14 +83,20 @@
   box-shadow: 0 4px 10px rgba(0,0,0,0.02);
 }
 
+.chat-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .chat-avatar .material-icons {
-  font-size: 20px;
+  font-size: 16px;
   color: #888;
 }
 
 .bubble-body {
   background-color: white; /* Clearer white for premium look */
-  padding: 24px 28px;
+  padding: 16px 20px;
   border-radius: 24px;
   position: relative;
   box-shadow: 0 4px 20px rgba(0,0,0,0.02);
@@ -52,50 +104,58 @@
 }
 
 .bubble-meta {
-  margin-bottom: 10px;
+  margin-bottom: 4px;
 }
 
 .bubble-meta strong {
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   font-weight: 700;
   color: #1a1a1a;
   letter-spacing: -0.01em;
 }
 
 .bubble-text {
-  font-size: 1rem;
+  font-size: 0.8rem;
   line-height: 1.6;
   color: #444;
+  white-space: pre-wrap;
 }
 
 .bubble-time {
-  margin-top: 12px;
-  font-size: 0.75rem;
+  margin-top: 6px;
+  font-size: 0.7rem;
   color: #bbb;
   font-weight: 500;
 }
 
+.chat-bubble-group.user .bubble-time {
+  text-align: right;
+}
+
 /* ── Input Row ── */
 .chat-input-row {
   display: flex;
-  gap: 16px;
+  gap: 10px;
   align-items: center;
+  margin-top: 24px;
 }
 
 .input-field-wrap {
   flex: 1;
-  background-color: #eee;
-  border-radius: 18px;
-  padding: 0 24px;
+  background-color: white;
+  border: 1px solid rgba(0,0,0,0.04);
+  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
+  border-radius: 14px;
+  padding: 0 16px;
   display: flex;
   align-items: center;
-  height: 64px;
+  height: 48px;
   transition: all 0.2s;
 }
 
 .input-field-wrap:focus-within {
-  background-color: #e8e8e8;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
+  border-color: rgba(255, 107, 53, 0.3);
+  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.05);
 }
 
 .input-field-wrap input {
@@ -103,31 +163,58 @@
   background: transparent;
   border: none;
   outline: none;
-  font-size: 1.05rem;
+  font-size: 0.85rem;
   color: #1a1a1a;
   font-weight: 500;
 }
+.new-chat-btn {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.05);
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #666;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
+}
+
+.new-chat-btn:hover {
+  background: #f8f8f8;
+  color: #ff6b35;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
+}
+
+.new-chat-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
 
 .input-field-wrap input::placeholder {
   color: #aaa;
 }
 
 .send-btn {
-  width: 64px;
-  height: 64px;
+  width: 48px;
+  height: 48px;
   background-color: #ff6b35;
-  border-radius: 18px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  box-shadow: 0 10px 25px rgba(255, 107, 53, 0.25);
+  box-shadow: 0 10px 25px rgba(255, 107, 53, 0.2);
 }
 
 .send-btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 14px 30px rgba(255, 107, 53, 0.35);
+  box-shadow: 0 14px 30px rgba(255, 107, 53, 0.3);
 }
 
 .send-btn:active:not(:disabled) {
@@ -141,7 +228,7 @@
 }
 
 .send-btn .material-icons {
-  font-size: 28px;
+  font-size: 24px;
 }
 
 /* ── Typing Indicator ── */
@@ -166,3 +253,75 @@
   0%, 100% { opacity: 0.3; transform: scale(0.8); }
   50% { opacity: 1; transform: scale(1.1); }
 }
+
+/* ── Welcome State ── */
+.welcome-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  padding: 40px;
+  opacity: 0.6;
+}
+
+.welcome-icon {
+  width: 64px;
+  height: 64px;
+  background: white;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+.welcome-icon span {
+  font-size: 32px;
+  color: #1a1a1a;
+}
+
+.welcome-state h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+
+.welcome-state p {
+  font-size: 0.75rem;
+  color: #999;
+  max-width: 200px;
+  line-height: 1.5;
+  margin-bottom: 32px;
+}
+
+.suggested-starters {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  max-width: 240px;
+}
+
+.suggested-starters button {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.05);
+  padding: 12px 16px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  color: #555;
+  text-align: left;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.suggested-starters button:hover {
+  background: #fdfdfd;
+  border-color: rgba(255, 107, 53, 0.2);
+  color: #ff6b35;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
+}

frontend/src/components/ChatPanel.jsx

@@ -7,7 +7,7 @@ import './ChatPanel.css';
  * Layer 3: Interaction (Utility Layer)
  * Handles live conversation and input.
  */
-function ChatPanel({ messages, onSendMessage, isTyping, onInputStateChange }) {
+function ChatPanel({ messages, onSendMessage, onNewChat, userAvatar, isTyping, onInputStateChange }) {
   const [input, setInput] = useState('');
   const scrollRef = useRef(null);
 
@@ -37,16 +37,23 @@ function ChatPanel({ messages, onSendMessage, isTyping, onInputStateChange }) {
   return (
     <div className="chat-interface">
       <div className="chat-messages" ref={scrollRef}>
+        {messages.length === 0 && (
+          <div className="welcome-state">
+            <div className="welcome-icon">
+              <span className="material-icons">lens_blur</span>
+            </div>
+            <h3>Neural Core Initialized.</h3>
+            <p>Feed me a thought to begin building your neural pathways.</p>
+          </div>
+        )}
         {messages.map((msg, i) => (
           <div key={i} className={`chat-bubble-group ${msg.role}`}>
-            <div className="avatar-wrap">
-              <div className="chat-avatar">
-                {msg.role === 'user' ? (
-                  <span className="material-icons">account_circle</span>
-                ) : (
-                  <span className="material-icons">lens_blur</span>
-                )}
-              </div>
+            <div className="chat-avatar">
+              {msg.role === 'user' ? (
+                <img src={userAvatar} alt="User" />
+              ) : (
+                <span className="material-icons">lens_blur</span>
+              )}
             </div>
             <div className="bubble-body">
               <div className="bubble-meta">
@@ -72,6 +79,15 @@ function ChatPanel({ messages, onSendMessage, isTyping, onInputStateChange }) {
       </div>
 
       <form className="chat-input-row" onSubmit={handleSubmit}>
+        <button 
+          className="new-chat-btn" 
+          type="button" 
+          onClick={onNewChat}
+          title="New Chat"
+          disabled={isTyping}
+        >
+          <span className="material-icons">add</span>
+        </button>
         <div className="input-field-wrap">
           <input 
             type="text" 

frontend/src/components/CognitiveBrain3DScene.css

@@ -0,0 +1,110 @@
+/* CognitiveBrain3DScene.css - Sci-fi Organic 3D Brain simulation styling */
+
+.brain-3d-viewport {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.05) 0%, rgba(10, 10, 15, 0) 70%);
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+/* Micro HUD floating overlay */
+.brain-hud-metrics {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  right: 24px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  padding: 14px 20px;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
+  pointer-events: none;
+}
+
+.hud-metric-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hud-label {
+  font-size: 0.6rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #888;
+  letter-spacing: 0.05em;
+  font-family: var(--font-mono), monospace;
+}
+
+.hud-val {
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: -0.01em;
+}
+
+.hud-val.uppercase {
+  text-transform: uppercase;
+}
+
+/* Utility Colors */
+.text-cyan { color: #06b6d4 !important; }
+.text-pink { color: #ec4899 !important; }
+
+/* Micro-HUD tooltips */
+.brain-tooltip-hud {
+  background: rgba(10, 10, 15, 0.95) !important;
+  border: 1px solid rgba(6, 182, 212, 0.3) !important;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
+  border-radius: 8px !important;
+  padding: 8px 12px !important;
+  color: #fff !important;
+  font-family: var(--font-mono), monospace !important;
+  font-size: 0.7rem !important;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.brain-tooltip-hud strong {
+  color: #06b6d4;
+  font-size: 0.75rem;
+}
+
+.hud-category {
+  color: #888;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+}
+
+/* Loading label */
+.brain-loading-label {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  background: rgba(6, 182, 212, 0.08);
+  border: 1px solid rgba(6, 182, 212, 0.2);
+  color: #06b6d4;
+  padding: 6px 14px;
+  border-radius: 100px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  font-family: var(--font-mono), monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+  animation: pulse-hud 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse-hud {
+  0% { opacity: 0.8; }
+  50% { opacity: 0.4; }
+  100% { opacity: 0.8; }
+}

frontend/src/components/CognitiveBrain3DScene.jsx

@@ -0,0 +1,256 @@
+import { useEffect, useState, useRef, useMemo } from 'react';
+import ForceGraph3D from 'react-force-graph-3d';
+import { apiFetch } from '../api';
+import './CognitiveBrain3DScene.css';
+
+// Fixed Brain Lobes coordinates to anchor the 3D biological silhouette
+const LOBES = [
+  { id: 'LOBE_PREFRONTAL', label: 'Prefrontal Lobe (Reasoning & Language)', fx: 50, fy: 35, fz: 0, type: 'lobe', key: 'prefrontal' },
+  { id: 'LOBE_TEMPORAL', label: 'Temporal Lobe (Memory & Association)', fx: -10, fy: -35, fz: -15, type: 'lobe', key: 'hippocampus' },
+  { id: 'LOBE_PARIETAL', label: 'Parietal Lobe (Sensory & Intake)', fx: -55, fy: 20, fz: 0, type: 'lobe', key: 'sensory' },
+  { id: 'LOBE_SUBCORTICAL', label: 'Subcortical Hub (Attention & Routing)', fx: 0, fy: 10, fz: 15, type: 'lobe', key: 'thalamus' }
+];
+
+const PHASE_TO_REGION = {
+  perception: 'sensory',
+  sensory: 'sensory',
+  attention: 'thalamus',
+  routing: 'thalamus',
+  prediction: 'prefrontal',
+  working_memory: 'prefrontal',
+  recall: 'hippocampus',
+  association: 'hippocampus',
+  memory: 'hippocampus',
+  emotion: 'thalamus', // Grouped in subcortical hub for positioning
+  reasoning: 'prefrontal',
+  reflection: 'prefrontal',
+  language: 'prefrontal',
+  inhibition: 'hippocampus',
+  graph: 'hippocampus',
+  listening: 'sensory',
+  responding: 'prefrontal'
+};
+
+// Deterministic hash to anchor learned entities to specific brain lobes organically
+const hashString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+};
+
+function CognitiveBrain3DScene({ state = 'idle', refreshTick }) {
+  const [graphData, setGraphData] = useState({ nodes: [], links: [] });
+  const [newNodes, setNewNodes] = useState(new Set());
+  const [dimensions, setDimensions] = useState({ width: 500, height: 400 });
+  const [loading, setLoading] = useState(false);
+
+  const containerRef = useRef(null);
+  const fgRef = useRef();
+
+  // Highlight the active lobe based on SOMA's cognitive phase
+  const activeRegion = PHASE_TO_REGION[state] || null;
+
+  // Track layout resize
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        setDimensions({ width: width || 500, height: height || 400 });
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  // Fetch real-time learned knowledge from Neo4j database
+  useEffect(() => {
+    const fetchBrainData = async () => {
+      setLoading(true);
+      try {
+        const res = await apiFetch('/api/v1/graph');
+        if (!res.ok) throw new Error('Failed to fetch graph data');
+        const data = await res.json();
+
+        // 1. Start with the permanent brain structures (The 4 Lobes)
+        const nodes = LOBES.map(l => ({ ...l }));
+        const links = [];
+
+        // Track new nodes to trigger the "synaptic spark" animation
+        const currentEntityIds = new Set(data.nodes?.map(n => n.id) || []);
+        const previouslyKnownIds = new Set(graphData.nodes.filter(n => n.type !== 'lobe').map(n => n.id));
+        const newlyDiscovered = new Set([...currentEntityIds].filter(id => !previouslyKnownIds.has(id)));
+        
+        if (newlyDiscovered.size > 0) {
+          setNewNodes(newlyDiscovered);
+          // Clear spark animation after 4 seconds
+          setTimeout(() => setNewNodes(new Set()), 4000);
+        }
+
+        if (data.nodes && data.nodes.length > 0) {
+          // 2. Map actual database entities into the brain
+          data.nodes.forEach(n => {
+            const entityId = n.id;
+            
+            // Assign this entity deterministically to a brain lobe based on name hash
+            const assignedLobeIndex = hashString(entityId) % LOBES.length;
+            const targetLobeId = LOBES[assignedLobeIndex].id;
+
+            nodes.push({
+              id: entityId,
+              label: n.label || entityId,
+              connections: n.connections || 1,
+              type: 'entity'
+            });
+
+            // Structural bio-link to anchor it to its parent lobe
+            links.push({
+              source: targetLobeId,
+              target: entityId,
+              type: 'structural'
+            });
+          });
+
+          // 3. Map actual semantic links (Komal -> IS_A -> Student)
+          if (data.edges) {
+            data.edges.forEach(e => {
+              links.push({
+                source: e.source,
+                target: e.target,
+                label: e.label || 'ASSOCIATED_WITH',
+                type: 'semantic'
+              });
+            });
+          }
+        } else {
+          // If Neo4j is offline/empty, seed a few highly visual concept cells
+          // representing basic thoughts so it never looks completely empty
+          const sampleEntities = ['Komal', 'Student', 'SOMA', 'AI Architecture', 'Learning System'];
+          sampleEntities.forEach((entityId, index) => {
+            const targetLobeId = LOBES[index % LOBES.length].id;
+            nodes.push({ id: entityId, label: entityId, connections: 2, type: 'entity' });
+            links.push({ source: targetLobeId, target: entityId, type: 'structural' });
+          });
+          links.push({ source: 'Komal', target: 'Student', label: 'IS_A', type: 'semantic' });
+          links.push({ source: 'SOMA', target: 'AI Architecture', label: 'BUILT_ON', type: 'semantic' });
+        }
+
+        setGraphData({ nodes, links });
+      } catch (error) {
+        console.error('Brain mesh load error', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBrainData();
+  }, [refreshTick]);
+
+  // Adjust camera to focus on the active lobe during cognitive processing
+  useEffect(() => {
+    if (activeRegion && fgRef.current) {
+      const activeLobe = LOBES.find(l => l.key === activeRegion);
+      if (activeLobe) {
+        fgRef.current.cameraPosition(
+          { x: activeLobe.fx * 1.5, y: activeLobe.fy * 1.5, z: 180 }, // Move camera closer
+          { x: activeLobe.fx * 0.5, y: activeLobe.fy * 0.5, z: 0 },   // Point at the lobe
+          1200
+        );
+      }
+    } else if (fgRef.current) {
+      // Zoom out to global brain view when idle
+      fgRef.current.cameraPosition({ x: 0, y: 0, z: 240 }, { x: 0, y: 0, z: 0 }, 1500);
+    }
+  }, [activeRegion]);
+
+  // Dynamic Node Styling
+  const getNodeColor = (node) => {
+    if (node.type === 'lobe') {
+      // Core Lobes glow when they are actively processing
+      if (node.key === activeRegion) {
+        return '#ffffff'; // Intense active state (pure white core)
+      }
+      return 'rgba(6, 182, 212, 0.4)'; // Faint resting lobe core (Cyan outline)
+    }
+
+    // Spark animation for newly learned nodes (Bright yellow-gold)
+    if (newNodes.has(node.id)) {
+      return '#f59e0b';
+    }
+
+    // Regular synapses colored based on connection degree
+    return (node.connections || 1) > 3 ? '#ec4899' : '#06b6d4'; 
+  };
+
+  const getNodeVal = (node) => {
+    if (node.type === 'lobe') {
+      // Active processing lobes grow dynamically in physical scale
+      return node.key === activeRegion ? 12 : 5;
+    }
+    // Normal synapses sized by centrality
+    return Math.max(1.8, Math.min((node.connections || 1) * 1.2, 6));
+  };
+
+  return (
+    <div className="brain-3d-viewport" ref={containerRef}>
+      {/* 3D WebGL Learning Brain Simulation */}
+      <ForceGraph3D
+        ref={fgRef}
+        graphData={graphData}
+        width={dimensions.width}
+        height={dimensions.height}
+        backgroundColor="rgba(0,0,0,0)" // Fully transparent to blend with dashboard
+        nodeLabel={node => `
+          <div class="brain-tooltip-hud">
+            <strong>${node.label || node.id}</strong>
+            <span class="hud-category">${node.type === 'lobe' ? 'Brain Cortex Lobe' : 'Learned Synaptic Concept'}</span>
+          </div>
+        `}
+        nodeColor={getNodeColor}
+        nodeVal={getNodeVal}
+        nodeRelSize={3}
+        // Link customizations to distinguish biology vs semantic relations
+        linkColor={link => {
+          if (link.type === 'structural') return 'rgba(255,255,255,0.03)'; // Structural bio-lines are nearly invisible
+          return 'rgba(6, 182, 212, 0.25)'; // Real semantic memories are glowing cyan axons
+        }}
+        linkWidth={link => (link.type === 'structural' ? 0.5 : 1.5)}
+        linkDirectionalParticles={link => {
+          if (link.type === 'structural') return 0;
+          // Newly activated semantic links run rapid data flows
+          return link.source.id === activeRegion || link.target.id === activeRegion ? 6 : 2;
+        }}
+        linkDirectionalParticleSpeed={0.008}
+        linkDirectionalParticleWidth={link => (link.type === 'structural' ? 0 : 2.5)}
+        linkDirectionalParticleColor={() => '#ec4899'} // Hot pink thought particles flowing through the axons
+        showNavInfo={false}
+        enablePointerInteraction={true}
+        enableNodeDrag={true}
+      />
+
+      {/* Futuristic status HUD overlays */}
+      <div className="brain-hud-metrics">
+        <div className="hud-metric-item">
+          <span className="hud-label">Cognitive Mode</span>
+          <strong className="hud-val uppercase pulse">{state}</strong>
+        </div>
+        <div className="hud-metric-item">
+          <span className="hud-label">Active Lobe</span>
+          <strong className="hud-val text-cyan uppercase">{activeRegion || 'STANDBY'}</strong>
+        </div>
+        <div className="hud-metric-item">
+          <span className="hud-label">Learned Synapses</span>
+          <strong className="hud-val text-pink">
+            {graphData.nodes.filter(n => n.type !== 'lobe').length} nodes
+          </strong>
+        </div>
+      </div>
+
+      {loading && <div className="brain-loading-label">Sparking neural networks...</div>}
+    </div>
+  );
+}
+
+export default CognitiveBrain3DScene;

frontend/src/components/CognitiveBrainImageScene.jsx

@@ -1,9 +1,4 @@
-import brainBase from '../assets/brain/brain_base.png';
-import prefrontalImg from '../assets/brain/Prefrontal_Cortex.png';
-import hippocampusImg from '../assets/brain/Hippocampus.png';
-import sensoryImg from '../assets/brain/sensory_cortex.png';
-import thalamusImg from '../assets/brain/thalamus.png';
-import amygdalaImg from '../assets/brain/brain_amygdala.png';
+import brainImg from '../assets/brain/Brain_nobg.png';
 import './CognitiveBrainScene.css';
 
 /**
@@ -22,9 +17,11 @@ const REGION_MAP = {
   emotion: 'amygdala',
   reasoning: 'prefrontal',
   reflection: 'prefrontal',
-  language: 'prefrontal', // Fallback to prefrontal for language for now
-  inhibition: 'thalamus',
-  graph: 'hippocampus'
+  language: 'prefrontal',
+  inhibition: 'hippocampus', // Moved to Temporal for smoother memory filtering flow
+  graph: 'hippocampus',
+  listening: 'sensory',
+  responding: 'prefrontal'
 };
 
 function CognitiveBrainImageScene({ state = 'idle' }) {
@@ -33,52 +30,55 @@ function CognitiveBrainImageScene({ state = 'idle' }) {
 
   return (
     <div className={`brain-viewport state-${state}`}>
-      {/* Layer 2: Cognitive Signals (Floating Ambient Labels) */}
-      <div className="neural-signals">
-        <div className={`signal-node prefrontal ${activeRegion === 'prefrontal' ? 'active' : ''} ${isState('reasoning') ? 'hot' : ''}`}>
-          <div className="signal-dot"></div>
-          <div className="signal-copy">
-            <strong>Prefrontal</strong>
-            <span>Reasoning & Reflection</span>
+      {/* Layer 1: Brain Core */}
+      <div className="brain-core">
+        {/* Layer 2: Cognitive Signals (Floating Ambient Labels) */}
+        <div className="neural-signals">
+          <div className={`signal-node prefrontal ${activeRegion === 'prefrontal' ? 'active' : ''} ${isState('reasoning') ? 'hot' : ''}`}>
+            <div className="signal-dot"></div>
+            <div className="signal-copy">
+              <strong>Prefrontal</strong>
+              <span>Reasoning & Reflection</span>
+            </div>
           </div>
-        </div>
 
-        <div className={`signal-node parietal ${activeRegion === 'sensory' ? 'active' : ''}`}>
-          <div className="signal-dot"></div>
-          <div className="signal-copy">
-            <strong>Parietal</strong>
-            <span>Perception & Sensory</span>
+          <div className={`signal-node parietal ${activeRegion === 'sensory' ? 'active' : ''}`}>
+            <div className="signal-dot"></div>
+            <div className="signal-copy">
+              <strong>Parietal</strong>
+              <span>Perception & Sensory</span>
+            </div>
           </div>
-        </div>
 
-        <div className={`signal-node temporal ${activeRegion === 'hippocampus' ? 'active' : ''}`}>
-          <div className="signal-dot"></div>
-          <div className="signal-copy">
-            <strong>Temporal</strong>
-            <span>Memory & Association</span>
+          <div className={`signal-node temporal ${activeRegion === 'hippocampus' ? 'active' : ''}`}>
+            <div className="signal-dot"></div>
+            <div className="signal-copy">
+              <strong>Temporal</strong>
+              <span>Memory & Association</span>
+            </div>
           </div>
-        </div>
-      </div>
 
-      {/* Layer 1: Brain Core (Layered Overlays) */}
-      <div className="brain-core">
-        {/* Base Layer */}
-        <img src={brainBase} className="brain-layer base" alt="Neural Base" />
-        
-        {/* Region Overlays */}
-        <img src={prefrontalImg} className={`brain-layer region ${activeRegion === 'prefrontal' ? 'active' : ''}`} alt="Prefrontal Cortex" />
-        <img src={sensoryImg} className={`brain-layer region ${activeRegion === 'sensory' ? 'active' : ''}`} alt="Sensory Cortex" />
-        <img src={hippocampusImg} className={`brain-layer region ${activeRegion === 'hippocampus' ? 'active' : ''}`} alt="Hippocampus" />
-        <img src={thalamusImg} className={`brain-layer region ${activeRegion === 'thalamus' ? 'active' : ''}`} alt="Thalamus" />
-        <img src={amygdalaImg} className={`brain-layer region ${activeRegion === 'amygdala' ? 'active' : ''}`} alt="Amygdala" />
+          <div className={`signal-node thalamus-label ${activeRegion === 'thalamus' || activeRegion === 'amygdala' ? 'active' : ''}`}>
+            <div className="signal-dot"></div>
+            <div className="signal-copy">
+              <strong>Subcortical</strong>
+              <span>Attention & Routing</span>
+            </div>
+          </div>
+        </div>
+        <img 
+          src={brainImg} 
+          className="brain-layer base active" 
+          alt="Soma Brain" 
+        />
 
-        {/* State-specific Glow Hubs (Subtle Ambient Glow behind regions) */}
+        {/* State Glow Hubs (Subtle Ambient Backglow) */}
         <div className={`glow-hub prefrontal-glow ${activeRegion === 'prefrontal' ? 'visible' : ''}`} />
         <div className={`glow-hub parietal-glow ${activeRegion === 'sensory' ? 'visible' : ''}`} />
         <div className={`glow-hub temporal-glow ${activeRegion === 'hippocampus' ? 'visible' : ''}`} />
         <div className={`glow-hub thalamus-glow ${activeRegion === 'thalamus' || activeRegion === 'amygdala' ? 'visible' : ''}`} />
         
-        {/* Ambient Breathing (Idle) */}
+        {/* Interaction Particles */}
         <div className="ambient-breath" />
       </div>
 

frontend/src/components/CognitiveBrainScene.css

@@ -2,59 +2,81 @@
 
 .brain-viewport {
   width: 100%;
-  height: 500px;
+  height: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  perspective: 1000px;
+  perspective: 1100px;
 }
 
 .brain-core {
   position: relative;
-  width: 480px;
-  height: 480px; /* Force square for layering */
+  width: 380px;
+  height: 380px;
   z-index: 10;
+  transition: transform 0.5s ease;
 }
 
-/* ── Layer Stacking ── */
+/* ── Exclusive Layer Stacking ── */
 .brain-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: auto;
-  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0;
+  transform: scale(0.98);
+  transition: 
+    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
+    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
+    filter 0.6s ease;
+  pointer-events: none;
+  filter: contrast(1.1);
+}
+
+.brain-layer.active {
+  opacity: 1;
+  transform: scale(1);
 }
 
-.brain-layer.base {
+/* Ensure only ONE layer is ever visible (The Swap) */
+.brain-layer.base.active {
   z-index: 1;
-  filter: contrast(1.1) brightness(0.9);
 }
 
-.brain-layer.region {
+.brain-layer.region.active {
   z-index: 2;
-  opacity: 0;
+  opacity: 1 !important;
+}
+
+/* If a region is active, hide the base entirely to avoid overlapping/ghosting */
+.brain-viewport:has(.brain-layer.region.active) .brain-layer.base {
+  opacity: 0 !important;
+}
+
+.brain-layer.base.active {
+  /* Clean slate for multiply blend */
 }
 
 .brain-layer.region.active {
-  opacity: 1;
-  filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 107, 53, 0.4));
+  /* Clean slate for multiply blend */
 }
 
 /* ── Layer 1: Ambient Motion (Breathing) ── */
 .ambient-breath {
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle, rgba(255, 107, 53, 0.05) 0%, transparent 75%);
+  background: radial-gradient(circle, rgba(255, 107, 53, 0.04) 0%, transparent 75%);
   animation: breathing 8s infinite ease-in-out;
   pointer-events: none;
   z-index: -1;
 }
 
 @keyframes breathing {
-  0%, 100% { transform: scale(0.95); opacity: 0.3; }
-  50% { transform: scale(1.05); opacity: 0.6; }
+  0%, 100% { transform: scale(0.96); opacity: 0.3; }
+  50% { transform: scale(1.04); opacity: 0.5; }
 }
 
 /* ── Layer 2: Cognitive Signals (Floating Labels) ── */
@@ -71,14 +93,15 @@
   align-items: center;
   gap: 16px;
   opacity: 0.2;
-  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-  filter: grayscale(1) blur(1px);
+  transition: all 0.6s ease;
+  filter: grayscale(1) blur(0.5px);
 }
 
 .signal-node.active {
   opacity: 1;
   filter: grayscale(0) blur(0);
-  transform: scale(1.15) translateX(10px);
+  transform: scale(1.1) translateX(10px);
+  transition: all 0.1s ease-out;
 }
 
 .signal-node.hot {
@@ -88,74 +111,96 @@
 }
 
 @keyframes signal-hot-throb {
-  0%, 100% { transform: scale(1.15) translateX(10px); filter: brightness(1); }
-  50% { transform: scale(1.2) translateX(15px); filter: brightness(1.4); }
+  0%, 100% { transform: scale(1.1) translateX(10px); filter: brightness(1); }
+  50% { transform: scale(1.15) translateX(15px); filter: brightness(1.3); }
 }
 
 .signal-dot {
   width: 10px;
   height: 10px;
-  background-color: #ff6b35;
+  background-color: #d1d5db;
   border-radius: 50%;
-  box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
+  box-shadow: none;
+  transition: all 0.6s ease;
+}
+
+.signal-node.active .signal-dot {
+  transition: all 0.1s ease-out;
 }
 
+/* ── Active Color Mapping ── */
+.signal-node.active.prefrontal .signal-dot { background-color: #f59e0b; box-shadow: 0 0 15px rgba(245, 158, 11, 0.8); }
+.signal-node.active.parietal .signal-dot { background-color: #ff6b35; box-shadow: 0 0 15px rgba(255, 107, 53, 0.8); }
+.signal-node.active.temporal .signal-dot { background-color: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.8); }
+.signal-node.active.thalamus-label .signal-dot { background-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
+
+.signal-node.active.prefrontal strong { color: #f59e0b; }
+.signal-node.active.parietal strong { color: #ff6b35; }
+.signal-node.active.temporal strong { color: #10b981; }
+.signal-node.active.thalamus-label strong { color: #3b82f6; }
+
 .signal-copy {
   display: flex;
   flex-direction: column;
 }
 
 .signal-copy strong {
-  font-size: 0.9rem;
+  font-size: 0.7rem;
   font-weight: 800;
   color: #1a1a1a;
   line-height: 1.1;
+  transition: color 0.6s ease;
+}
+
+.signal-node.active strong {
+  transition: color 0.1s ease-out;
 }
 
 .signal-copy span {
-  font-size: 0.75rem;
+  font-size: 0.6rem;
   color: #999;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-weight: 600;
 }
 
-.prefrontal { top: 22%; left: -20px; }
-.parietal { top: 15%; right: -20px; flex-direction: row-reverse; text-align: right; }
-.temporal { bottom: 20%; left: -20px; }
+.prefrontal { top: 5%; left: -60px; }
+.parietal { top: 5%; right: -60px; flex-direction: row-reverse; text-align: right; }
+.temporal { bottom: 10%; left: -60px; }
+.thalamus-label { bottom: 10%; right: -60px; flex-direction: row-reverse; text-align: right; }
 
-/* ── State Glow Hubs (Subtle Backglow) ── */
+/* ── State Glow Hubs (Subtle Ambient Backglow) ── */
 .glow-hub {
   position: absolute;
-  width: 250px;
-  height: 250px;
+  width: 400px;
+  height: 400px;
   border-radius: 50%;
-  filter: blur(60px);
+  filter: blur(100px);
   opacity: 0;
-  transition: all 1s ease;
+  transition: opacity 1.2s ease;
   pointer-events: none;
   z-index: 0;
 }
 
 .glow-hub.visible {
-  opacity: 0.3;
+  opacity: 0.25;
 }
 
-.prefrontal-glow { top: 5%; left: 10%; background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, transparent 70%); }
-.parietal-glow { top: 5%; right: 10%; background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%); }
-.temporal-glow { bottom: 10%; left: 20%; background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%); }
-.thalamus-glow { top: 20%; left: 30%; background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%); }
+.prefrontal-glow { top: 0%; left: 5%; background: radial-gradient(circle, rgba(255, 107, 53, 0.3) 0%, transparent 70%); }
+.parietal-glow { top: 0%; right: 5%; background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%); }
+.temporal-glow { bottom: 5%; left: 15%; background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%); }
+.thalamus-glow { top: 15%; left: 25%; background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%); }
 
 /* ── Listening/Responding Shimmer ── */
 .listening-particles {
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle, rgba(255, 107, 53, 0.05) 0%, transparent 85%);
-  animation: brain-shimmer 2s infinite alternate;
+  background: radial-gradient(circle, rgba(255, 107, 53, 0.03) 0%, transparent 85%);
+  animation: brain-shimmer 3s infinite alternate;
   z-index: 5;
 }
 
 @keyframes brain-shimmer {
-  from { opacity: 0.2; transform: scale(1); }
-  to { opacity: 0.5; transform: scale(1.05); }
+  from { opacity: 0.1; transform: scale(1); }
+  to { opacity: 0.3; transform: scale(1.05); }
 }

frontend/src/components/CognitiveDashboard.css

@@ -1,66 +1,65 @@
 /* CognitiveDashboard.css - Status Hub Refinements */
 
 .status-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 64px;
-  height: 100%;
-  align-items: center;
-}
-
-.status-visual {
   display: flex;
-  justify-content: center;
-  position: relative;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
 }
 
-/* ── Status Cards ── */
+/* ── Status Cards Redesign ── */
 .status-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 16px;
 }
 
 .status-card {
-  background-color: white;
-  border-radius: 32px;
-  padding: 32px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
-  border: 1px solid rgba(0,0,0,0.03);
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 20px;
+  padding: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.03);
+  position: relative;
+  overflow: hidden;
 }
 
 .status-card h3 {
-  font-size: 0.75rem;
+  font-size: 0.6rem;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.15em;
   color: #999;
-  margin-bottom: 24px;
-  font-weight: 700;
+  margin-bottom: 12px;
+  font-weight: 800;
 }
 
-/* ── Waves & Charts ── */
+/* ── Waves & HUD Charts ── */
 .system-chart {
-  margin-bottom: 24px;
-  position: relative;
-}
-
-.system-chart-svg {
-  width: 100%;
-  height: 100px;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
+  border: 1px solid rgba(0,0,0,0.02);
 }
 
 .system-chart-svg path {
   fill: none;
   stroke: #ff6b35;
-  stroke-width: 2.5;
+  stroke-width: 2;
   stroke-linecap: round;
-  opacity: 0.8;
+  filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.2));
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.intensity-high .system-chart-svg path {
+  stroke-width: 4;
+  stroke: #ff3d00;
 }
 
 .system-chart-svg path.secondary {
   stroke: #3b82f6;
   stroke-width: 1.5;
-  opacity: 0.3;
+  opacity: 0.15;
 }
 
 .chart-labels {
@@ -71,84 +70,87 @@
 }
 
 .chart-labels span {
-  font-size: 0.7rem;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 0.55rem;
   color: #bbb;
-  font-weight: 500;
 }
 
 .current-state {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 24px;
-  border-top: 1px solid #f0f0f0;
+  padding-top: 12px;
+  gap: 32px;
 }
 
 .current-state span {
-  font-size: 0.85rem;
-  color: #888;
-  font-weight: 600;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: #999;
+  font-weight: 700;
 }
 
 .current-state strong {
-  font-size: 1.2rem;
+  font-size: 1.6rem;
   color: #ff6b35;
-  font-weight: 700;
+  font-weight: 800;
   text-transform: capitalize;
 }
 
-/* ── Metrics ── */
+/* ── Metrics Grid ── */
 .metric-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: 16px;
 }
 
 .metric-item {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 24px;
-  background-color: #f9f9f9;
+  align-items: center;
+  padding: 20px 24px;
+  background: white;
   border-radius: 20px;
-  transition: transform 0.3s ease;
-}
-
-.metric-item:hover {
-  transform: translateY(-4px);
+  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
+  border: 1px solid rgba(0,0,0,0.03);
+  gap: 16px;
 }
 
 .metric-icon-wrap {
-  width: 40px;
-  height: 40px;
+  width: 42px;
+  height: 42px;
+  min-width: 42px;
   border-radius: 12px;
-  background-color: white;
+  background: rgba(255, 107, 53, 0.05);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ff6b35;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
 }
 
 .metric-icon-wrap .material-icons {
-  font-size: 20px;
+  font-size: 22px;
 }
 
 .metric-info {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .metric-info label {
-  font-size: 0.75rem;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
   color: #999;
-  font-weight: 600;
-  margin-bottom: 2px;
+  font-weight: 700;
+  white-space: nowrap;
 }
 
-.metric-info strong {
-  font-size: 1.3rem;
+.metric-item strong {
+  font-size: 1.5rem;
   color: #1a1a1a;
-  font-weight: 700;
-  letter-spacing: -0.02em;
+  font-family: 'Roboto Mono', monospace;
+  letter-spacing: -0.05em;
+  margin-left: auto;
 }

frontend/src/components/CognitiveDashboard.jsx

@@ -1,19 +1,15 @@
 import './CognitiveDashboard.css';
-import CognitiveBrainImageScene from './CognitiveBrainImageScene';
+import { useState, useEffect, useRef } from 'react';
 
 function CognitiveDashboard({ statusText, stats }) {
   return (
     <div className="status-layout fade-in">
-      <div className="status-visual">
-        <CognitiveBrainImageScene state="reasoning" />
-      </div>
-
       <div className="status-sidebar">
-        <div className="status-card">
+        <div className="status-card highlight">
           <h3>Neural Vitals</h3>
-          <SystemStatusChart />
+          <SystemStatusChart state={statusText} />
           <div className="current-state">
-            <span>Current Status</span>
+            <span>Neural Frequency</span>
             <strong>{statusText}</strong>
           </div>
         </div>
@@ -39,17 +35,62 @@ function CognitiveDashboard({ statusText, stats }) {
   );
 }
 
-function SystemStatusChart() {
-  // SVG points for smooth overlapping waves
-  const wave1 = "M0,40 Q30,5 60,40 T120,40 T180,40 T240,40 T300,40";
-  const wave2 = "M0,50 Q40,25 80,50 T160,50 T240,50 T320,50 T400,50";
+function SystemStatusChart({ state }) {
+  const [path1, setPath1] = useState("");
+  const [path2, setPath2] = useState("");
+  const frameRef = useRef(0);
+
+  const intensity = ['reasoning', 'language', 'reflection'].includes(state) ? 'high' : 
+                    ['recall', 'association', 'attention'].includes(state) ? 'medium' : 'low';
+
+  useEffect(() => {
+    let animationFrame;
+    
+    const generateWave = (time, freq, amp, jitter, complexity = 1) => {
+      let d = "M0,40 ";
+      const step = complexity > 1 ? 5 : 10;
+      for (let x = 0; x <= 300; x += step) {
+        // Complex brainwave math: Base Sine + Harmonics for interference
+        let yBase = Math.sin(x * freq + time) * amp;
+        if (complexity > 1) {
+          yBase += Math.sin(x * freq * 2.3 + time * 1.4) * (amp * 0.4);
+          yBase += Math.sin(x * freq * 3.9 + time * 2.1) * (amp * 0.2);
+        }
+        
+        const noise = (Math.random() - 0.5) * jitter;
+        const y = 40 + yBase + noise;
+        d += `L${x},${y} `;
+      }
+      return d;
+    };
+
+    const animate = () => {
+      frameRef.current += intensity === 'high' ? 0.28 : intensity === 'medium' ? 0.14 : 0.06;
+      const t = frameRef.current;
+      
+      const config = {
+        high:   { freq: 0.12, amp: 26, jitter: 14, comp: 3 },
+        medium: { freq: 0.08, amp: 18, jitter: 4,  comp: 1 },
+        low:    { freq: 0.03, amp: 10, jitter: 1,  comp: 1 }
+      }[intensity];
+
+      setPath1(generateWave(t, config.freq, config.amp, config.jitter, config.comp));
+      setPath2(generateWave(t * 0.8, config.freq * 0.6, config.amp * 0.5, config.jitter * 0.4, 1));
+      
+      animationFrame = requestAnimationFrame(animate);
+    };
+
+    animate();
+    return () => cancelAnimationFrame(animationFrame);
+  }, [intensity]);
+
   const labels = ['ALPHA', 'BETA', 'GAMMA', 'DELTA', 'THETA'];
 
   return (
-    <div className="system-chart">
+    <div className={`system-chart intensity-${intensity}`}>
       <svg viewBox="0 0 300 80" className="system-chart-svg">
-        <path d={wave2} className="secondary" />
-        <path d={wave1} />
+        <path d={path2} className="secondary" />
+        <path d={path1} />
       </svg>
       <div className="chart-labels">
         {labels.map(l => <span key={l}>{l}</span>)}

frontend/src/components/CognitiveTimeline.css

@@ -3,8 +3,8 @@
 .timeline-container {
   display: flex;
   flex-direction: column;
-  gap: 32px;
-  padding: 16px 0;
+  gap: 16px;
+  padding: 0;
 }
 
 .timeline-row {
@@ -19,7 +19,7 @@
   position: absolute;
   left: 65px; /* Alignment with dot */
   top: 12px;
-  bottom: -44px;
+  bottom: -24px;
   width: 1px;
   background-color: #eee;
   z-index: 1;
@@ -31,7 +31,7 @@
 
 .timeline-time {
   width: 55px;
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   color: #bbb;
   font-family: var(--font-mono);
   padding-top: 4px;
@@ -57,11 +57,7 @@
 
 .timeline-content {
   flex: 1;
-  background-color: white;
-  padding: 20px 24px;
-  border-radius: 20px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
-  border: 1px solid rgba(0,0,0,0.03);
+  padding: 0 0 16px 0;
   transition: transform 0.3s ease;
 }
 
@@ -89,14 +85,14 @@
 }
 
 .phase-title {
-  font-size: 0.95rem;
+  font-size: 0.7rem;
   font-weight: 700;
   color: #1a1a1a;
   letter-spacing: -0.01em;
 }
 
 .phase-desc {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   color: #666;
   line-height: 1.5;
 }

frontend/src/components/CognitiveTimeline.jsx

@@ -3,23 +3,50 @@ import './CognitiveTimeline.css';
 const PHASE_CONFIG = {
   perception:     { icon: 'visibility',    color: '#ff6b35', label: 'Perception' },
   attention:      { icon: 'track_changes', color: '#3b82f6', label: 'Attention' },
+  emotion:        { icon: 'favorite',      color: '#e11d48', label: 'Emotion' },
+  routing:        { icon: 'route',         color: '#f59e0b', label: 'Routing' },
+  prediction:     { icon: 'online_prediction', color: '#8b5cf6', label: 'Prediction' },
+  working_memory: { icon: 'memory',        color: '#06b6d4', label: 'Working Memory' },
+  reflection:     { icon: 'lightbulb',     color: '#f59e0b', label: 'Reflection' },
   recall:         { icon: 'psychology',    color: '#10b981', label: 'Recall' },
+  inhibition:     { icon: 'block',         color: '#ef4444', label: 'Inhibition' },
+  association:    { icon: 'device_hub',    color: '#3b82f6', label: 'Association' },
   reasoning:      { icon: 'hub',           color: '#ff6b35', label: 'Reasoning' },
-  output:         { icon: 'chat_bubble_outline', color: '#8ab892', label: 'Output' }
+  language:       { icon: 'chat_bubble',   color: '#8ab892', label: 'Language' },
+  memory:         { icon: 'save',          color: '#10b981', label: 'Consolidation' },
+  graph:          { icon: 'share',         color: '#3b82f6', label: 'Graph Update' },
 };
 
 function CognitiveTimeline({ trace }) {
-  if (!trace || trace.length === 0) {
+  const rawTrace = trace
+    .filter(item => item.phase)
+    .reverse(); // Chronological order
+
+  const consolidatedTrace = [];
+  let currentPhase = null;
+
+  rawTrace.forEach(item => {
+    if (currentPhase && currentPhase.phase === item.phase) {
+      currentPhase.message = item.message || item.content || item.desc;
+      currentPhase.time = item.time;
+    } else {
+      currentPhase = { ...item };
+      consolidatedTrace.push(currentPhase);
+    }
+  });
+
+  if (!consolidatedTrace || consolidatedTrace.length === 0) {
     return (
       <div className="timeline-empty">
-        No cognitive activity recorded yet...
+        <span className="material-icons">sensors</span>
+        <p>Awaiting sensory stimuli...</p>
       </div>
     );
   }
 
   return (
     <div className="timeline-container fade-in">
-      {trace.map((item, index) => {
+      {consolidatedTrace.map((item, index) => {
         const config = PHASE_CONFIG[item.phase.toLowerCase()] || { icon: 'circle', color: '#ccc', label: item.phase };
         
         return (
@@ -36,7 +63,7 @@ function CognitiveTimeline({ trace }) {
                 <div className="phase-title">{config.label}</div>
               </div>
               <div className="phase-desc">
-                {item.content || item.desc || 'Processing information...'}
+                {item.message || item.content || item.desc || 'Processing information...'}
               </div>
             </div>
           </div>

frontend/src/components/DreamSequence.css

@@ -1,220 +1,515 @@
-/* DreamSequence.css - Refined for Page 7 & 8 */
+/* ── Sleep & Consolidation Page Styles (Split Layout) ── */
 
-.sleep-layout {
+.sleep-page-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  min-height: 600px;
+  background-color: #eaeaea; /* Exact light gray background as in Image 1 */
+  width: 100%;
   height: 100%;
-  text-align: center;
+  padding: 40px;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 24px;
 }
 
-.sleep-brain-wrap {
-  position: relative;
-  margin-bottom: 56px;
-  transform: scale(1.1);
+.sleep-page-header {
+  position: absolute;
+  top: 40px;
+  left: 40px;
 }
 
-/* ── Progress ── */
-.sleep-copy h3 {
-  font-family: var(--font-display);
-  font-size: 2.2rem;
+.sleep-page-header h2 {
+  font-family: var(--font-display), 'Inter', sans-serif;
+  font-size: 1.2rem; /* Exact page header font-size as Console */
   font-weight: 700;
-  margin-bottom: 12px;
   color: #1a1a1a;
+  margin: 0;
   letter-spacing: -0.01em;
 }
 
-.sleep-copy p {
-  font-size: 1.1rem;
-  color: #888;
-  margin-bottom: 64px;
+/* ── Split Layout Grid ── */
+.sleep-split-layout {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: 60px;
+  width: 100%;
+  max-width: 960px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+.sleep-left-panel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.sleep-steps {
+.sleep-brain-wrap-combined {
+  position: relative;
   display: flex;
-  gap: 80px;
   justify-content: center;
+  align-items: center;
+}
+
+.sleep-brain-image-asset {
+  max-width: 380px;
+  height: auto;
+  display: block;
+  mix-blend-mode: normal; /* Blends perfectly because background colors match exactly */
+  opacity: 0.95;
+}
+
+.sleep-right-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.sleep-copy-combined {
+  text-align: left;
+  margin-bottom: 40px;
+}
+
+.sleep-copy-combined h3 {
+  font-family: var(--font-display), 'Inter', sans-serif;
+  font-size: 1.15rem; /* Exact block header font-size as Console */
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.01em;
+}
+
+.sleep-copy-combined p {
+  font-size: 0.75rem; /* Exact body font-size as Console */
+  color: #666;
+  margin: 0;
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+/* ── Vertical Progress Steps (Optimized for Split Panel) ── */
+.sleep-steps-vertical {
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  max-width: 800px;
-  padding-top: 48px;
-  border-top: 1px solid #f0f0f0;
+  gap: 28px;
+}
+
+.sleep-step-item-wrap-vertical {
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
-.sleep-step {
+.sleep-step-item-vertical {
   display: flex;
   align-items: center;
   gap: 16px;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+  z-index: 2;
 }
 
-.sleep-step-dot {
-  width: 28px;
-  height: 28px;
+.sleep-step-item-vertical.active {
+  opacity: 1;
+}
+
+.sleep-step-circle {
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  border: 2px solid #ddd;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: #bbb;
-  transition: all 0.3s;
+  box-sizing: border-box;
+  background-color: #eaeaea; /* matches parent background to blend connector lines */
+  transition: all 0.3s ease;
 }
 
-.sleep-step-dot.active {
-  border-color: #ff6b35;
-  color: #ff6b35;
-  box-shadow: 0 0 15px rgba(255, 107, 53, 0.2);
+/* 1. Completed step (Green Checkmark) */
+.sleep-step-circle.completed {
+  border: 2px solid #10b981;
+  color: #10b981;
 }
 
-.sleep-step-dot.completed {
-  border-color: #10b981;
-  color: #10b981;
-  background-color: transparent;
+.sleep-step-circle.completed .material-icons {
+  font-size: 16px;
+  font-weight: 900;
 }
 
-.sleep-step-label {
-  font-size: 1rem;
-  color: #999;
+/* 2. Active step (Orange Ring with Dot) */
+.sleep-step-circle.active {
+  border: 2px solid #ff6b35;
+  position: relative;
+}
+
+.active-dot-inner {
+  width: 8px;
+  height: 8px;
+  background-color: #ff6b35;
+  border-radius: 50%;
+}
+
+/* 3. Pending step (Grey Ring) */
+.sleep-step-circle.pending {
+  border: 2px solid #cbd5e1;
+}
+
+.sleep-step-text {
+  font-family: var(--font-display), 'Inter', sans-serif;
+  font-size: 0.8rem; /* Exact list font-size as Console activity items */
+  color: #444;
   font-weight: 600;
 }
 
-.sleep-step-label.active {
+.sleep-step-item-vertical.active .sleep-step-text {
   color: #1a1a1a;
+  font-weight: 700;
+}
+
+/* Vertical connector lines */
+.sleep-step-connector-vertical {
+  position: absolute;
+  left: 11px;
+  top: -28px;
+  height: 28px;
+  width: 2px;
+  z-index: 1;
+}
+
+.connector-line {
+  width: 100%;
+  height: 100%;
+  background-color: #cbd5e1;
 }
 
-/* ── Summary Card (Page 8) ── */
-.summary-overlay {
+/* ── Consolidation Summary Overlay (Image 2) ── */
+.summary-overlay-combined {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(229, 229, 229, 0.9);
+  background-color: #eaeaea; /* Exact solid color to overlay completely as shown in Image 2 */
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 100;
-  backdrop-filter: blur(12px);
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.sleep-page-header-summary {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+.sleep-page-header-summary h2 {
+  font-family: var(--font-display), 'Inter', sans-serif;
+  font-size: 1.2rem; /* Matches unified page header size */
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0;
 }
 
-.summary-card {
+.summary-card-combined,
+.summary-card-inline {
   width: 100%;
-  max-width: 520px;
-  background-color: white;
-  border-radius: 40px;
-  padding: 48px;
-  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
+  max-width: 380px; /* Slimmer card width for better alignment */
+  background-color: #f3f3f3;
+  border-radius: 24px;
+  padding: 22px; /* Denser, high-fidelity margins */
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
   position: relative;
   text-align: left;
-  border: 1px solid rgba(0,0,0,0.02);
+  border: 1px solid rgba(0, 0, 0, 0.02);
+  box-sizing: border-box;
 }
 
-.summary-close {
+.summary-close-combined {
   position: absolute;
-  top: 32px;
-  right: 32px;
-  color: #bbb;
-  font-size: 1.8rem;
+  top: 24px;
+  right: 24px;
+  color: #888;
   background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.summary-close:hover {
+.summary-close-combined .material-icons {
+  font-size: 20px;
+}
+
+.summary-close-combined:hover {
   color: #1a1a1a;
 }
 
-.summary-header {
+.summary-header-combined {
   display: flex;
-  gap: 24px;
-  margin-bottom: 40px;
+  gap: 12px;
+  margin-bottom: 18px;
+  align-items: center;
 }
 
-.summary-header-icon {
-  width: 64px;
-  height: 64px;
-  background-color: #f5f5f5;
-  border-radius: 20px;
+.summary-header-icon-combined {
+  width: 36px;
+  height: 36px;
+  background-color: transparent;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #1a1a1a;
+  color: #475569;
 }
 
-.summary-header-icon .material-icons {
-  font-size: 32px;
+.summary-header-icon-combined .material-icons {
+  font-size: 24px;
 }
 
-.summary-header-copy h3 {
-  font-family: var(--font-display);
-  font-size: 1.6rem;
+.summary-header-copy-combined h3 {
+  font-family: var(--font-display), 'Inter', sans-serif;
+  font-size: 1.05rem; /* Balanced, high-density title */
   font-weight: 700;
-  margin-bottom: 4px;
   color: #1a1a1a;
+  margin: 0 0 2px 0;
+  letter-spacing: -0.01em;
 }
 
-.summary-header-copy p {
-  font-size: 1rem;
-  color: #888;
+.summary-header-copy-combined p {
+  font-size: 0.72rem; /* Matches unified small captions */
+  color: #666;
+  margin: 0;
+  font-weight: 500;
 }
 
-.summary-list {
+.summary-list-combined {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  margin-bottom: 40px;
+  gap: 12px;
+  margin-bottom: 28px;
 }
 
-.summary-item {
+.summary-item-combined {
   display: flex;
   align-items: center;
-  gap: 20px;
-  padding: 20px;
-  border-radius: 20px;
-  background-color: #f8f8f8;
-  border: 1px solid rgba(0,0,0,0.02);
+  gap: 12px; /* Denser item gap */
+  padding: 10px 14px; /* Highly compact padding */
+  border-radius: 14px;
+  background-color: rgba(0, 0, 0, 0.025);
+  border: 1px solid rgba(0, 0, 0, 0.01);
 }
 
-.summary-item-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 14px;
+.summary-item-icon-combined {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+}
+
+.summary-item-icon-combined .material-icons {
+  font-size: 16px; /* Compact action icons */
 }
 
-.summary-item-copy strong {
+.summary-item-copy-combined strong {
   display: block;
-  font-size: 1.05rem;
+  font-size: 0.78rem; /* Matches premium compact metadata headers */
   font-weight: 700;
   color: #1a1a1a;
-  margin-bottom: 2px;
+  margin-bottom: 1px;
 }
 
-.summary-item-copy span {
-  font-size: 0.85rem;
-  color: #888;
+.summary-item-copy-combined span {
+  display: block;
+  font-size: 0.68rem; /* Highly readable compact value subtext */
+  color: #666;
   font-weight: 500;
 }
 
-.summary-view-btn {
+/* Tone styling matching pastel buttons */
+.summary-item-icon-combined.green { color: #10b981; background-color: rgba(16, 185, 129, 0.08); }
+.summary-item-icon-combined.teal { color: #0d9488; background-color: rgba(13, 148, 136, 0.08); }
+.summary-item-icon-combined.orange { color: #ff6b35; background-color: rgba(255, 107, 53, 0.08); }
+.summary-item-icon-combined.amber { color: #f59e0b; background-color: rgba(245, 158, 11, 0.08); }
+
+.summary-view-btn-combined {
   width: 100%;
-  height: 64px;
+  height: 40px; /* Slim, premium button height */
   background-color: #fff1eb;
   color: #ff6b35;
-  border-radius: 20px;
+  border-radius: 14px;
+  border: none;
   font-weight: 700;
-  font-size: 1.1rem;
-  transition: all 0.2s;
+  font-size: 0.8rem; /* Compact label size matching Console buttons */
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.summary-view-btn:hover {
+.summary-view-btn-combined:hover {
   background-color: #ffe4d9;
+  transform: translateY(-1px);
+}
+
+/* ── Sleep Trigger Landing State Styles ── */
+.sleep-landing-combined {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.sleep-trigger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: linear-gradient(135deg, #ff6b35, #ff5714);
+  color: white;
+  border: none;
+  padding: 12px 30px; /* Highly compact padding */
+  border-radius: 16px;
+  font-family: var(--font-display), 'Inter', sans-serif;
+  font-size: 0.8rem; /* Exact button text size as Console inputs */
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.25);
+}
+
+.sleep-trigger-btn:hover {
   transform: translateY(-2px);
+  box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
+  background: linear-gradient(135deg, #ff5714, #e04400);
+}
+
+.sleep-trigger-btn:active {
+  transform: translateY(0);
+}
+
+.sleep-trigger-btn .material-icons {
+  font-size: 22px;
+}
+
+/* ── Sleep Telemetry Metric Dashboard Styles ── */
+.sleep-telemetry-grid {
+  display: flex;
+  width: 100%;
+  max-width: 900px;
+  gap: 24px;
+  margin-top: 40px;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.sleep-telemetry-card {
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.45);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 20px;
+  padding: 20px;
+  text-align: left;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.sleep-telemetry-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
+  background-color: rgba(255, 255, 255, 0.65);
+}
+
+.telemetry-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.telemetry-card-header h4 {
+  margin: 0;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #666;
+  font-weight: 700;
+}
+
+.telemetry-card-header .material-icons {
+  font-size: 16px;
+  color: #999;
+}
+
+.telemetry-card-value {
+  font-size: 1.15rem; /* Compact instrument value font-size */
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.telemetry-card-subtext {
+  font-size: 0.68rem; /* Highly compact detail text */
+  color: #888;
+}
+
+/* Adenosine Progress Bar */
+.adenosine-progress-container {
+  width: 100%;
+  height: 6px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-top: 8px;
 }
 
-/* Item Tones */
-.summary-item-icon.green { color: #10b981; background-color: #e6f7f0; }
-.summary-item-icon.teal { color: #0d9488; background-color: #e0f2f1; }
-.summary-item-icon.orange { color: #ff6b35; background-color: #fff1eb; }
-.summary-item-icon.amber { color: #f59e0b; background-color: #fff8e1; }
+.adenosine-progress-bar {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 1s ease-in-out;
+}
+
+/* Status Badge */
+.telemetry-status-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  display: inline-block;
+}
+
+.telemetry-status-badge.optimal {
+  background-color: #e3f9e5;
+  color: #1e7e34;
+}
+
+.telemetry-status-badge.ready {
+  background-color: #fff3cd;
+  color: #856404;
+  animation: pulseOrange 2s infinite;
+}
+
+@keyframes pulseOrange {
+  0% { opacity: 0.8; }
+  50% { opacity: 1; transform: scale(1.02); }
+  100% { opacity: 0.8; }
+}

frontend/src/components/DreamSequence.jsx

@@ -1,76 +1,178 @@
-import CognitiveBrainImageScene from './CognitiveBrainImageScene';
+import sleepImg from '../assets/brain/sleep_nobg.png';
 import './DreamSequence.css';
 
-export function SleepProgress({ phaseIndex }) {
+export function SleepProgress({ phaseIndex, isConsolidating, onStart, summary, vitals, onClose }) {
   const steps = ['Analyzing Memories', 'Linking Concepts', 'Pruning Redundancies'];
 
+  // Parse message count in working memory
+  const workingCount = parseInt(vitals?.working || 0);
+  const adenosineScore = Math.min(workingCount * 12.5, 100);
+  const isOptimal = workingCount >= 4;
+
   return (
-    <div className="sleep-layout fade-in">
-      <div className="sleep-brain-wrap">
-        <CognitiveBrainImageScene scale={1.3} />
-      </div>
-      <div className="sleep-copy">
-        <h3>Soma is consolidating memories...</h3>
-        <p>Cleaning, linking and strengthening knowledge.</p>
+    <div className="sleep-page-container fade-in">
+      <div className="sleep-page-header">
+        <h2>7. Sleep (Consolidation)</h2>
       </div>
-      <div className="sleep-steps">
-        {steps.map((step, index) => {
-          const completed = index < phaseIndex;
-          const active = index === phaseIndex;
 
-          return (
-            <div key={step} className="sleep-step">
-              <div className={`sleep-step-dot ${completed ? 'completed' : active ? 'active' : ''}`}>
-                {completed ? <span className="material-icons" style={{fontSize: '14px'}}>check</span> : (index + 1)}
+      <div className="sleep-split-layout">
+        {/* Left Column: Brain Image (ALWAYS VISIBLE!) */}
+        <div className="sleep-left-panel">
+          <div className="sleep-brain-wrap-combined">
+            <img src={sleepImg} className="sleep-brain-image-asset" alt="Soma Sleeping Brain" />
+          </div>
+        </div>
+
+        {/* Right Column: Dynamic State Panel */}
+        <div className="sleep-right-panel">
+          {summary ? (
+            /* State 1: Consolidation Summary Card (Directly inline on the right side!) */
+            <div className="summary-card-inline fade-in">
+              <button className="summary-close-combined" onClick={onClose}>
+                <span className="material-icons">close</span>
+              </button>
+              
+              <div className="summary-header-combined">
+                <div className="summary-header-icon-combined">
+                  <span className="material-icons">bedtime</span>
+                </div>
+                <div className="summary-header-copy-combined">
+                  <h3>Sleep Cycle Complete</h3>
+                  <p>Memory consolidation finished</p>
+                </div>
               </div>
-              <div className={`sleep-step-label ${active ? 'active' : ''}`}>{step}</div>
+
+              <div className="summary-list-combined">
+                {[
+                  { label: 'Linked Together', value: `${summary.linked} connections created`, icon: 'hub', tone: 'green' },
+                  { label: 'Consolidated', value: `${summary.consolidated} summaries saved`, icon: 'inventory_2', tone: 'teal' },
+                  { label: 'Pruned', value: `${summary.pruned} raw logs pruned`, icon: 'filter_alt', tone: 'orange' },
+                ].map((item) => (
+                  <div key={item.label} className="summary-item-combined">
+                    <div className={`summary-item-icon-combined ${item.tone}`}>
+                      <span className="material-icons">{item.icon}</span>
+                    </div>
+                    <div className="summary-item-copy-combined">
+                      <strong>{item.label}</strong>
+                      <span>{item.value}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <button className="summary-view-btn-combined" onClick={onClose}>Return to Console</button>
             </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+          ) : isConsolidating ? (
+            /* State 2: Active Consolidation Checklist Steps */
+            <div className="sleep-progress-combined fade-in">
+              <div className="sleep-copy-combined">
+                <h3>Soma is consolidating memories...</h3>
+                <p>Cleaning, linking and strengthening knowledge.</p>
+              </div>
 
-export function SleepSummary({ summary, onClose }) {
-  const data = summary || { linked: 12, consolidated: 28, pruned: 17, strengthened: 34 };
-  const items = [
-    { label: 'Linked Together', value: `${data.linked} new connections created`, icon: 'hub', tone: 'green' },
-    { label: 'Consolidated', value: `${data.consolidated} memories merged`, icon: 'inventory_2', tone: 'teal' },
-    { label: 'Pruned', value: `${data.pruned} redundant items removed`, icon: 'filter_alt', tone: 'orange' },
-    { label: 'Strengthened', value: `${data.strengthened} memory traces updated`, icon: 'auto_awesome', tone: 'amber' },
-  ];
+              <div className="sleep-steps-vertical">
+                {steps.map((step, index) => {
+                  const completed = index < phaseIndex;
+                  const active = index === phaseIndex;
 
-  return (
-    <div className="summary-overlay fade-in">
-      <div className="summary-card">
-        <button className="summary-close" onClick={onClose}><span className="material-icons">close</span></button>
-        
-        <div className="summary-header">
-          <div className="summary-header-icon">
-            <span className="material-icons">bedtime</span>
+                  return (
+                    <div key={step} className="sleep-step-item-wrap-vertical">
+                      {index > 0 && (
+                        <div className="sleep-step-connector-vertical">
+                          <div className="connector-line" />
+                        </div>
+                      )}
+                      <div className={`sleep-step-item-vertical ${active ? 'active' : ''}`}>
+                        <div className={`sleep-step-circle ${completed ? 'completed' : active ? 'active' : 'pending'}`}>
+                          {completed && <span className="material-icons">check</span>}
+                          {active && <div className="active-dot-inner" />}
+                        </div>
+                        <span className="sleep-step-text">{step}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : (
+            /* State 3: Landing / Idle State with Sleep button */
+            <div className="sleep-landing-combined fade-in">
+              <div className="sleep-copy-combined">
+                <h3>Reorganize Neural Structures</h3>
+                <p>
+                  Consolidate recent transactional chat logs into the ChromaDB sensory database and extract semantic facts to the Neo4j Knowledge Graph.
+                </p>
+              </div>
+              
+              <button className="sleep-trigger-btn" onClick={onStart}>
+                <span className="material-icons">bedtime</span>
+                <span>Sleep</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Dynamic Telemetry Metric Dashboard */}
+      <div className="sleep-telemetry-grid">
+        {/* Card 1: Sleep Pressure / Adenosine */}
+        <div className="sleep-telemetry-card">
+          <div className="telemetry-card-header">
+            <h4>Sleep Pressure (Adenosine)</h4>
+            <span className="material-icons">hourglass_empty</span>
           </div>
-          <div className="summary-header-copy">
-            <h3>Sleep Cycle Complete</h3>
-            <p>Memory consolidation finished</p>
+          <div className="telemetry-card-value">
+            {adenosineScore.toFixed(0)}%
+          </div>
+          <div className="telemetry-card-subtext">
+            {isOptimal ? 'Sleep pressure high. Consolidation critical.' : 'Accumulating data. Low neural pressure.'}
+          </div>
+          <div className="adenosine-progress-container">
+            <div 
+              className="adenosine-progress-bar" 
+              style={{ 
+                width: `${adenosineScore}%`,
+                background: isOptimal ? 'linear-gradient(90deg, #ff8c00, #ff4500)' : 'linear-gradient(90deg, #3b82f6, #60a5fa)' 
+              }} 
+            />
           </div>
         </div>
 
-        <div className="summary-list">
-          {items.map((item) => (
-            <div key={item.label} className="summary-item">
-              <div className={`summary-item-icon ${item.tone}`}>
-                <span className="material-icons">{item.icon}</span>
-              </div>
-              <div className="summary-item-copy">
-                <strong>{item.label}</strong>
-                <span>{item.value}</span>
-              </div>
-            </div>
-          ))}
+        {/* Card 2: Synaptic Queue Density */}
+        <div className="sleep-telemetry-card">
+          <div className="telemetry-card-header">
+            <h4>Working Synapses</h4>
+            <span className="material-icons">psychology</span>
+          </div>
+          <div className="telemetry-card-value">
+            {workingCount} <span style={{ fontSize: '0.9rem', fontWeight: 500, color: '#666', marginLeft: '4px' }}>exchanges</span>
+          </div>
+          <div className="telemetry-card-subtext">
+            {workingCount > 0 
+              ? `${workingCount} raw dialogic traces stored in pre-consolidated state.` 
+              : 'Working memory fully cleared. No traces queued.'}
+          </div>
         </div>
 
-        <button className="summary-view-btn" onClick={onClose}>View Summary</button>
+        {/* Card 3: Consolidation Readiness */}
+        <div className="sleep-telemetry-card">
+          <div className="telemetry-card-header">
+            <h4>System Readiness</h4>
+            <span className="material-icons">bolt</span>
+          </div>
+          <div className="telemetry-card-value">
+            {isOptimal ? (
+              <span className="telemetry-status-badge ready">READY TO SLEEP</span>
+            ) : (
+              <span className="telemetry-status-badge optimal" style={{ background: '#dbeafe', color: '#1e40af' }}>ACCUMULATING</span>
+            )}
+          </div>
+          <div className="telemetry-card-subtext">
+            {isOptimal 
+              ? 'Meets minimum requirement (≥ 4 messages) for factual extraction.' 
+              : 'Needs at least 4 chat messages in working memory to trigger.'}
+          </div>
+        </div>
       </div>
     </div>
   );

frontend/src/components/KnowledgeGraph.css

@@ -1,183 +1,390 @@
-/* KnowledgeGraph.css - Refined for Page 5 (Biological Mesh) */
+/* KnowledgeGraph.css - Premium Sci-Fi 3D Semantic Mesh styling */
 
 .graph-stage {
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
+  gap: 10px;
+  padding: 0 16px 16px 16px;
+  overflow: hidden;
 }
 
 .graph-toolbar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 32px;
+  align-items: center;
+  gap: 12px;
 }
 
-.graph-select {
-  background-color: #eee;
-  border-radius: 18px;
-  padding: 0 20px;
-  height: 56px;
+.graph-title-block {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 1rem;
+  flex-wrap: wrap;
+}
+
+.graph-select {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 100px;
+  padding: 0 14px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
   color: #1a1a1a;
-  font-weight: 600;
+  font-weight: 700;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
+}
+
+.graph-select .material-icons {
+  color: #06b6d4;
+  font-size: 16px;
 }
 
+/* DB Status Badges */
+.db-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 100px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border: 1px solid transparent;
+}
+
+.db-status-badge.warning {
+  background: rgba(245, 158, 11, 0.08);
+  color: #d97706;
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+.db-status-badge.success {
+  background: rgba(16, 185, 129, 0.08);
+  color: #059669;
+  border-color: rgba(16, 185, 129, 0.2);
+}
+
+.db-status-badge .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+/* Actions */
 .graph-actions {
   display: flex;
-  gap: 12px;
+  gap: 10px;
 }
 
 .graph-icon-button {
-  width: 56px;
-  height: 56px;
-  background-color: #eee;
-  border-radius: 18px;
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #888;
+  color: #555;
   transition: all 0.2s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+  cursor: pointer;
+}
+
+.graph-icon-button .material-icons {
+  font-size: 16px;
 }
 
 .graph-icon-button:hover {
-  background-color: #e8e8e8;
-  color: #1a1a1a;
+  transform: translateY(-1px);
+  background: white;
+  color: #4f46e5;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
 }
 
-/* ── Network ── */
-.graph-network {
+/* ── Network Container ── */
+.graph-network-container {
   flex: 1;
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  border-radius: 24px;
   overflow: hidden;
+  box-shadow: var(--shadow-md), inset 0 0 80px rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(25px);
+  padding-left: 160px; /* Shifted slightly left compared to before to balance the canvas center */
+  box-sizing: border-box;
 }
 
-.graph-links {
+.brain-silhouette {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(85vw, 550px);
+  height: min(85vw, 550px);
+  pointer-events: none;
   z-index: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.85;
+}
+
+/* Tooltip micro-HUD */
+.graph-tooltip {
+  background: rgba(255, 255, 255, 0.96) !important;
+  border: 1px solid rgba(99, 102, 241, 0.2) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 10px !important;
+  padding: 10px 14px !important;
+  color: #1e293b !important;
+  font-family: var(--font-mono), monospace !important;
+  font-size: 0.75rem !important;
   pointer-events: none;
 }
 
-.graph-links line {
-  stroke: rgba(0, 0, 0, 0.05);
-  stroke-width: 1;
-  stroke-dasharray: 2 10;
+.graph-tooltip strong {
+  display: block;
+  font-size: 0.8rem;
+  color: #4f46e5;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  padding-bottom: 4px;
 }
 
-.graph-node {
+.tooltip-sub {
+  color: #64748b;
+  margin-top: 2px;
+}
+
+/* Loading HUD overlay */
+.graph-loading {
   position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  gap: 16px;
+  color: #4f46e5;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  z-index: 10;
+  pointer-events: none;
+  background: rgba(255, 255, 255, 0.85);
+  padding: 24px 36px;
+  border-radius: 16px;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  backdrop-filter: blur(10px);
 }
 
-.graph-center {
-  left: 50%;
-  top: 50%;
+.graph-loading .material-icons {
+  font-size: 32px;
 }
 
-.graph-node-core {
-  width: 100px;
-  height: 100px;
-  background-color: #1a1a1a;
-  border-radius: 50%;
+/* Legend - Floating Absolutely in the 3D Container */
+.graph-legend {
+  position: absolute;
+  bottom: 16px;
+  left: calc(50% + 80px); /* Re-centered perfectly relative to the 160px shift */
+  transform: translateX(-50%);
   display: flex;
-  align-items: center;
+  gap: 20px;
   justify-content: center;
-  color: white;
-  font-size: 2.2rem;
-  box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
-  margin-bottom: 16px;
-  animation: core-float 6s infinite ease-in-out;
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(25px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  padding: 8px 24px;
+  border-radius: 100px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.03);
+  z-index: 100;
+  pointer-events: auto;
 }
 
-@keyframes core-float {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.05); filter: brightness(1.1); }
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.65rem;
+  color: #555;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-.graph-orbit {
-  width: 44px;
-  height: 44px;
-  background-color: white;
+.legend-item::before {
+  content: '';
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
+  box-shadow: 0 0 8px currentColor;
+}
+
+.legend-item.core { color: #6366f1; }
+.legend-item.core::before { background-color: #6366f1; }
+
+.legend-item.high { color: #ec4899; }
+.legend-item.high::before { background-color: #ec4899; }
+
+.legend-item.medium { color: #f59e0b; }
+.legend-item.medium::before { background-color: #f59e0b; }
+
+.legend-item.entity { color: #0891b2; }
+.legend-item.entity::before { background-color: #0891b2; }
+
+/* ── Live Telemetry HUD Overlay ── */
+.graph-hud-overlay {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 100;
+  pointer-events: none; /* Let clicks pass through to 3D graph */
+}
+
+.hud-panel {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(25px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 16px;
+  padding: 12px 14px;
+  width: 190px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.03);
+  pointer-events: auto; /* Re-enable clicks for panel contents */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  animation: fadeIn 0.4s ease-out;
+}
+
+.hud-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
-  border: 1px solid rgba(0,0,0,0.03);
-  animation: orbit-float 8s infinite ease-in-out;
+  gap: 6px;
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #4f46e5;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  padding-bottom: 6px;
 }
 
-@keyframes orbit-float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+.hud-header .material-icons {
+  font-size: 14px;
 }
 
-.graph-orbit strong {
-  position: absolute;
-  top: 56px;
-  width: 140px;
-  text-align: center;
-  font-size: 0.85rem;
-  color: #1a1a1a;
-  font-weight: 700;
-  letter-spacing: -0.01em;
+.hud-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.7rem;
 }
 
-.graph-node-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #ff6b35;
-  box-shadow: 0 0 12px rgba(255, 107, 53, 0.3);
+.hud-label {
+  color: #64748b;
+  font-weight: 600;
 }
 
-/* ── Legend ── */
-.graph-legend {
+.hud-value {
+  color: #1e293b;
+  font-weight: 800;
+  font-family: var(--font-mono), monospace;
+}
+
+.hud-value.status-glow {
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-weight: 800;
+  text-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
+}
+
+.hud-entity-list {
   display: flex;
-  gap: 32px;
-  justify-content: center;
-  margin-top: 48px;
-  background-color: white;
-  padding: 16px 32px;
-  border-radius: 99px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
-  width: fit-content;
-  align-self: center;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.legend-item {
+.hud-entity-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-size: 0.75rem;
-  color: #888;
+  font-size: 0.65rem;
+  gap: 4px;
+}
+
+.entity-rank {
+  color: #94a3b8;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  width: 18px;
 }
 
-.legend-item::before {
-  content: '';
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
+.entity-name {
+  color: #1e293b;
+  font-weight: 700;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.entity-connections {
+  color: #6366f1;
+  font-weight: 800;
+  font-family: var(--font-mono), monospace;
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 4px;
+  border-radius: 4px;
 }
 
-.legend-item.concept::before { background-color: #3b82f6; }
-.legend-item.method::before { background-color: #10b981; }
-.legend-item.metric::before { background-color: #ff6b35; }
-.legend-item.relationship::before { background-color: #eee; height: 2px; border-radius: 0; }
-.legend-item.entity::before { background-color: #f59e0b; }
+/* Pulse animation utility */
+@keyframes pulse-light {
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+
+.pulse {
+  animation: pulse-light 1.5s infinite ease-in-out;
+}
+
+/* ── Holographic Scene Tooltips (Hover Outlined Style) ── */
+.graph-tooltip {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  font-family: 'Inter', sans-serif !important;
+  font-weight: 800 !important;
+  text-transform: uppercase !important;
+  pointer-events: none !important;
+  text-shadow: 
+    -3px -3px 0 #fff, 
+     3px -3px 0 #fff, 
+    -3px  3px 0 #fff, 
+     3px  3px 0 #fff,
+    -3px  0px 0 #fff,
+     3px  0px 0 #fff,
+     0px -3px 0 #fff,
+     0px  3px 0 #fff !important;
+  padding: 0 !important;
+}
+
+.graph-tooltip strong {
+  font-weight: 800 !important;
+}

frontend/src/components/KnowledgeGraph.jsx

@@ -1,115 +1,371 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import ForceGraph3D from 'react-force-graph-3d';
+import * as THREE from 'three';
 import { apiFetch } from '../api';
 import './KnowledgeGraph.css';
 
-const FALLBACK_GRAPH = {
-  center: 'Transformer Models',
+// Stunning conceptual mock graph representing SOMA's cognitive architecture
+const MOCK_GRAPH = {
   nodes: [
-    { label: 'Attention Mechanism', tone: 'orange' },
-    { label: 'Long-range Dependencies', tone: 'orange' },
-    { label: 'Efficiency', tone: 'green' },
-    { label: 'Expressivity', tone: 'orange' },
-    { label: 'Sparse Patterns', tone: 'orange' },
-    { label: 'Recurrence', tone: 'orange' }
+    { id: 'SOMA', label: 'SOMA (Core)', connections: 10, type: 'core' },
+    { id: 'Cortex', label: 'Cortex Layer', connections: 8, type: 'core' },
+    { id: 'Thalamus', label: 'Thalamus (Routing)', connections: 6, type: 'entity' },
+    { id: 'Hippocampus', label: 'Hippocampus', connections: 7, type: 'entity' },
+    { id: 'Neocortex', label: 'Neocortex', connections: 6, type: 'entity' },
+    { id: 'Sensory Cortex', label: 'Sensory Cortex', connections: 4, type: 'concept' },
+    { id: 'Working Memory', label: 'Working Memory', connections: 5, type: 'concept' },
+    { id: 'Episodic Memory', label: 'Episodic Memory', connections: 4, type: 'concept' },
+    { id: 'Sleep Cycle', label: 'Sleep Cycle', connections: 3, type: 'method' },
+    { id: 'Neural Inscription', label: 'Inscription Layer', connections: 3, type: 'method' },
+    { id: 'Llama 3.1', label: 'Llama 3.1', connections: 3, type: 'metric' },
+    { id: 'Groq API', label: 'Groq API', connections: 2, type: 'metric' }
+  ],
+  links: [
+    { source: 'SOMA', target: 'Cortex', label: 'ORCHESTRATES' },
+    { source: 'SOMA', target: 'Neural Inscription', label: 'ACCEPTS' },
+    { source: 'Cortex', target: 'Thalamus', label: 'ROUTES_BY' },
+    { source: 'Cortex', target: 'Hippocampus', label: 'CONSOLIDATES' },
+    { source: 'Cortex', target: 'Neocortex', label: 'STORES_IN' },
+    { source: 'Sensory Cortex', target: 'Hippocampus', label: 'WRITES_TO' },
+    { source: 'Working Memory', target: 'Thalamus', label: 'SYNCS_WITH' },
+    { source: 'Episodic Memory', target: 'Hippocampus', label: 'LOGS_IN' },
+    { source: 'Sleep Cycle', target: 'Hippocampus', label: 'OPTIMIZES' },
+    { source: 'Sleep Cycle', target: 'Neocortex', label: 'REINFORCES' },
+    { source: 'Cortex', target: 'Llama 3.1', label: 'COMPUTES' },
+    { source: 'Llama 3.1', target: 'Groq API', label: 'HOSTED_ON' }
   ]
 };
 
-const POSITIONS = [
-  { x: 50, y: 15 }, // Top
-  { x: 80, y: 35 }, // Top Right
-  { x: 80, y: 65 }, // Bottom Right
-  { x: 50, y: 85 }, // Bottom
-  { x: 20, y: 65 }, // Bottom Left
-  { x: 20, y: 35 }, // Top Left
-];
-
 function KnowledgeGraph({ refreshTick }) {
-  const [graph, setGraph] = useState(FALLBACK_GRAPH);
+  const [graphData, setGraphData] = useState({ nodes: [], links: [] });
   const [loading, setLoading] = useState(true);
+  const [dbStatus, setDbStatus] = useState('connecting');
+  const [dimensions, setDimensions] = useState({ width: 800, height: 500 });
+  const [stats, setStats] = useState({ node_count: 0, edge_count: 0, top_entities: [] });
+  const [physicsActive, setPhysicsActive] = useState(true);
+  
+  const containerRef = useRef(null);
+  const fgRef = useRef();
 
+  // Measure container dimensions to auto-resize the canvas
   useEffect(() => {
-    const fetchGraph = async () => {
-      setLoading(true);
-      try {
-        const res = await apiFetch('/api/v1/graph');
-        if (!res.ok) { setLoading(false); return; }
+    if (!containerRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        setDimensions({ width: width || 800, height: height || 500 });
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  // Fetch graph database from backend
+  const fetchGraph = async () => {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/v1/graph');
+      if (!res.ok) {
+        throw new Error('Graph fetch returned unhealthy status');
+      }
+      
+      const data = await res.json();
+      
+      if (data.status === 'offline' || data.status === 'error' || !data.nodes || data.nodes.length === 0) {
+        setDbStatus(data.status || 'offline');
+        const nodes = MOCK_GRAPH.nodes.map(n => ({ ...n }));
+        const links = MOCK_GRAPH.links.map(l => ({ ...l }));
+        setGraphData({ nodes, links });
+      } else {
+        setDbStatus('online');
+        const nodes = data.nodes.map(n => ({
+          id: n.id,
+          label: n.label || n.id,
+          connections: n.connections || 1,
+          type: 'entity'
+        }));
         
-        const data = await res.json();
-        const labels = Array.from(new Set((data.nodes || []).map(n => n.label || n.id).filter(Boolean)));
+        const links = data.edges.map(e => ({
+          source: e.source,
+          target: e.target,
+          label: e.label || 'RELATED_TO'
+        }));
         
-        if (labels.length > 0) {
-          const [center, ...rest] = labels;
-          const nodes = rest.slice(0, 6).map(l => ({
-            label: l,
-            tone: l.toLowerCase().includes('efficiency') ? 'green' : 'orange'
-          }));
-          while (nodes.length < 6) {
-            nodes.push(FALLBACK_GRAPH.nodes[nodes.length]);
-          }
-          setGraph({ center, nodes });
+        setGraphData({ nodes, links });
+      }
+    } catch (error) {
+      console.error('Graph fetch failed', error);
+      setDbStatus('offline');
+      setGraphData({
+        nodes: MOCK_GRAPH.nodes.map(n => ({ ...n })),
+        links: MOCK_GRAPH.links.map(l => ({ ...l }))
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchStats = async () => {
+    try {
+      const res = await apiFetch('/api/v1/graph/stats');
+      if (res.ok) {
+        const data = await res.json();
+        if (data.status === 'online') {
+          setStats(data);
         }
-      } catch (error) {
-        console.error('Graph fetch failed', error);
-      } finally {
-        setLoading(false);
       }
-    };
+    } catch (err) {
+      console.error('Stats fetch failed', err);
+    }
+  };
 
+  useEffect(() => {
     fetchGraph();
+    fetchStats();
   }, [refreshTick]);
 
+  // Physics force configurations to pull the neural cluster into a tight, brain-like shape
+  useEffect(() => {
+    if (fgRef.current) {
+      const d3Force = fgRef.current.d3Force;
+      if (d3Force) {
+        d3Force('charge').strength(-50);   // Gentle repulsion for an ultra-compact molecular look
+        d3Force('link').distance(30);      // Extremely tight connection paths to pull nodes together
+      }
+      
+      // Auto-fit camera with very tight padding to zoom in close and eliminate empty workspace
+      setTimeout(() => {
+        fgRef.current.zoomToFit(800, 20);
+      }, 600);
+    }
+  }, [graphData]);
+
+  // Calculate max connections dynamically to scale color thresholds
+  const maxConnections = graphData.nodes && graphData.nodes.length > 0
+    ? Math.max(...graphData.nodes.map(n => n.connections || 1), 1)
+    : 1;
+
+  // Color mapper based on node type & degree
+  const getNodeColor = (node) => {
+    if (node.id === 'SOMA') return '#6366f1'; // Core Hub (Deep Indigo) is always SOMA!
+    
+    // For offline/mock mode, retain the pre-assigned structural category colors
+    if (dbStatus !== 'online') {
+      if (node.type === 'core') return '#6366f1';
+      if (node.type === 'method') return '#10b981'; // Green
+      if (node.type === 'concept') return '#3b82f6'; // Blue
+      if (node.type === 'metric') return '#f59e0b'; // Amber
+      return '#0891b2'; // Cyan
+    }
+    
+    // For live Neo4j data, dynamically scale colors based on relative synaptic density!
+    const connections = node.connections || 1;
+    const ratio = connections / maxConnections;
+    
+    if (ratio >= 0.8) return '#ec4899'; // High centrality (Hot pink)
+    if (ratio >= 0.4) return '#f59e0b'; // Medium centrality (Orange)
+    return '#0891b2'; // Low centrality (Cyan)
+  };
+
   return (
     <div className="graph-stage fade-in">
       <div className="graph-toolbar">
-        <button className="graph-select">
-          <span>Concept Map</span>
-          <span className="material-icons">expand_more</span>
-        </button>
+        <div className="graph-title-block">
+          <button className="graph-select">
+            <span className="material-icons">hub</span>
+            <span>{dbStatus === 'online' ? 'Real-time 3D Neo4j Graph' : '3D SOMA Cognitive Architecture Model'}</span>
+          </button>
+          {dbStatus !== 'online' && (
+            <span className="db-status-badge warning pulse">
+              <span className="dot" />
+              Neo4j Offline - Displaying Interactive System Concept
+            </span>
+          )}
+          {dbStatus === 'online' && (
+            <span className="db-status-badge success">
+              <span className="dot" />
+              Neo4j Synchronized (Live)
+            </span>
+          )}
+        </div>
+
         <div className="graph-actions">
-          <button className="graph-icon-button"><span className="material-icons">open_in_full</span></button>
-          <button className="graph-icon-button"><span className="material-icons">fit_screen</span></button>
+          <button 
+            className="graph-icon-button" 
+            onClick={() => {
+              if (fgRef.current) fgRef.current.zoomToFit(600, 20);
+            }}
+            title="Recenter Camera"
+          >
+            <span className="material-icons">zoom_out_map</span>
+          </button>
+          <button 
+            className="graph-icon-button" 
+            onClick={() => {
+              if (fgRef.current) {
+                const currentPos = fgRef.current.cameraPosition();
+                fgRef.current.cameraPosition(
+                  { x: currentPos.x * 0.75, y: currentPos.y * 0.75, z: currentPos.z * 0.75 },
+                  null,
+                  300
+                );
+              }
+            }}
+            title="Zoom In"
+          >
+            <span className="material-icons">zoom_in</span>
+          </button>
+          <button 
+            className="graph-icon-button" 
+            onClick={() => {
+              if (fgRef.current) {
+                const currentPos = fgRef.current.cameraPosition();
+                fgRef.current.cameraPosition(
+                  { x: currentPos.x * 1.35, y: currentPos.y * 1.35, z: currentPos.z * 1.35 },
+                  null,
+                  300
+                );
+              }
+            }}
+            title="Zoom Out"
+          >
+            <span className="material-icons">zoom_out</span>
+          </button>
+          <button 
+            className="graph-icon-button" 
+            onClick={() => {
+              const newActive = !physicsActive;
+              setPhysicsActive(newActive);
+              if (fgRef.current) {
+                if (physicsActive) {
+                  fgRef.current.d3PauseSimulation();
+                } else {
+                  fgRef.current.d3ResumeSimulation();
+                }
+              }
+            }}
+            title={physicsActive ? "Pause Simulation" : "Resume Simulation"}
+          >
+            <span className="material-icons">{physicsActive ? "pause" : "play_arrow"}</span>
+          </button>
+          <button 
+            className="graph-icon-button" 
+            onClick={() => {
+              fetchGraph();
+              fetchStats();
+            }}
+            title="Sync Mesh"
+          >
+            <span className="material-icons">sync</span>
+          </button>
         </div>
       </div>
 
-      <div className="graph-network">
-        <svg viewBox="0 0 100 100" className="graph-links">
-          {POSITIONS.map((pos, i) => (
-            <line key={i} x1="50" y1="50" x2={pos.x} y2={pos.y} />
-          ))}
-          {POSITIONS.map((pos, i) => {
-            const next = POSITIONS[(i + 1) % POSITIONS.length];
-            return <line key={`r-${i}`} x1={pos.x} y1={pos.y} x2={next.x} y2={next.y} className="ring-line" />;
-          })}
-        </svg>
-
-        <div className="graph-node graph-center">
-          <div className="graph-node-core">∿</div>
-          <strong>{graph.center}</strong>
+      <div className="graph-network-container" ref={containerRef}>
+        {/* Live Telemetry HUD Overlay */}
+        <div className="graph-hud-overlay">
+          <div className="hud-panel">
+            <div className="hud-header">
+              <span className="material-icons">analytics</span>
+              <span>Semantic Telemetry</span>
+            </div>
+            <div className="hud-row">
+              <span className="hud-label">Nodes:</span>
+              <span className="hud-value">{dbStatus === 'online' ? stats.node_count : graphData.nodes.length}</span>
+            </div>
+            <div className="hud-row">
+              <span className="hud-label">Synapses:</span>
+              <span className="hud-value">{dbStatus === 'online' ? stats.edge_count : graphData.links.length}</span>
+            </div>
+            <div className="hud-row">
+              <span className="hud-label">Storage:</span>
+              <span className="hud-value status-glow">{dbStatus === 'online' ? 'LTM (Neo4j)' : 'STM (Cache)'}</span>
+            </div>
+          </div>
+          
+          {dbStatus === 'online' && stats.top_entities && stats.top_entities.length > 0 && (
+            <div className="hud-panel top-entities">
+              <div className="hud-header">
+                <span className="material-icons">star</span>
+                <span>Primary Hubs</span>
+              </div>
+              <div className="hud-entity-list">
+                {stats.top_entities.map((ent, idx) => (
+                  <div key={idx} className="hud-entity-row">
+                    <span className="entity-rank">#{idx+1}</span>
+                    <span className="entity-name">{ent.entity}</span>
+                    <span className="entity-connections">{ent.connections} rx</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
 
-        {graph.nodes.map((node, i) => {
-          const pos = POSITIONS[i];
-          return (
-            <div 
-              key={i} 
-              className={`graph-node graph-orbit ${node.tone}`}
-              style={{ left: `${pos.x}%`, top: `${pos.y}%` }}
-            >
-              <div className="graph-node-dot" />
-              <strong>{node.label}</strong>
-            </div>
-          );
-        })}
+        <ForceGraph3D
+          ref={fgRef}
+          graphData={graphData}
+          width={dimensions.width}
+          height={dimensions.height}
+          backgroundColor="rgba(0, 0, 0, 0)" // Glassmorphic translucent rendering
+          
+          // Render gorgeous glowing 3D spheres with emissive materials (100% stable!)
+          nodeThreeObject={node => {
+            const size = Math.max(3.2, Math.min(node.connections * 1.6, 9.5)); // Perfectly scaled spheres
+            const geom = new THREE.SphereGeometry(size, 24, 24);
+            const mat = new THREE.MeshLambertMaterial({
+              color: getNodeColor(node),
+              transparent: true,
+              opacity: 0.95,
+              emissive: getNodeColor(node),
+              emissiveIntensity: 0.45
+            });
+            return new THREE.Mesh(geom, mat);
+          }}
+          
+          // Outlined holographic label rendered natively floating beside cursor on hover (100% stable!)
+          nodeLabel={node => `
+            <span style="color: ${getNodeColor(node)}; font-size: 24px; font-weight: 800;">
+              ${node.label || node.id}
+            </span>
+          `}
+          
+          // Outlined relationship tag rendered on link hover (100% stable!)
+          linkLabel={link => `
+            <span style="color: #6366f1; font-size: 16px; font-weight: 800;">
+              ${link.label || 'RELATED_TO'}
+            </span>
+          `}
+          
+          nodeRelSize={3}
+          linkColor={() => 'rgba(99, 102, 241, 0.25)'} // Soft, clean axon link fibers
+          linkWidth={1.8} // Sleek link line thickness
+          
+          // Glowing Thought Flows (sliding directional particles along axons)
+          linkDirectionalParticles={3}
+          linkDirectionalParticleSpeed={0.006}
+          linkDirectionalParticleWidth={1.5}
+          linkDirectionalParticleColor={() => '#6366f1'}
+          
+          showNavInfo={false}
+          enablePointerInteraction={true}
+          enableNodeDrag={true}
+        />
         
-        {loading && <div className="graph-loading" style={{ position: 'absolute', bottom: '10px', fontSize: '0.7rem' }}>Refreshing graph...</div>}
-      </div>
+        {/* Beautiful Glassmorphic Legend HUD */}
+        <div className="graph-legend">
+          <div className="legend-item core">Core Hub</div>
+          <div className="legend-item high">High Density</div>
+          <div className="legend-item medium">Medium Density</div>
+          <div className="legend-item entity">Low Density</div>
+        </div>
 
-      <div className="graph-legend">
-        <span className="legend-item concept">Concept</span>
-        <span className="legend-item method">Method</span>
-        <span className="legend-item metric">Metric</span>
-        <span className="legend-item relationship">Relationship</span>
-        <span className="legend-item entity">Entity</span>
+        {loading && (
+          <div className="graph-loading">
+            <span className="material-icons pulse">refresh</span>
+            <span>Synchronizing cognitive mesh...</span>
+          </div>
+        )}
       </div>
     </div>
   );

frontend/src/components/KnowledgeInput.css

@@ -1,115 +1,382 @@
-/* KnowledgeInput.css - Refined for Page 6 */
+/* KnowledgeInput.css - Neural Inscription Workspace */
 
-.knowledge-layout {
+.inscription-grid {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 32px;
+  flex: 1;
+  min-height: 0;
+  padding: 0 40px 40px 40px;
+  overflow: hidden;
+}
+
+.inscription-main {
   display: flex;
   flex-direction: column;
+  gap: 24px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.inscription-header {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
+  gap: 20px;
 }
 
-.knowledge-icon-large {
-  width: 88px;
-  height: 88px;
-  background-color: #eee;
-  border-radius: 24px;
+.inscription-icon {
+  width: 56px;
+  height: 56px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.05);
+  border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 32px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
 }
 
-.knowledge-icon-large .material-icons {
-  font-size: 44px;
-  color: #1a1a1a;
+.inscription-icon .material-icons {
+  color: #ff6b35;
+  font-size: 24px;
 }
 
-.knowledge-layout h3 {
+.inscription-title h3 {
   font-family: var(--font-display);
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 12px;
+  font-size: 1.2rem;
+  font-weight: 800;
   color: #1a1a1a;
+  margin-bottom: 2px;
 }
 
-.knowledge-layout p {
-  font-size: 1.1rem;
-  color: #888;
-  margin-bottom: 48px;
-  max-width: 500px;
+.inscription-title p {
+  font-size: 0.75rem;
+  color: #999;
+  font-weight: 500;
 }
 
-.knowledge-composer {
-  width: 100%;
-  max-width: 760px;
-  background-color: white;
-  border-radius: 32px;
-  padding: 40px;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
-  border: 1px solid rgba(0,0,0,0.02);
+.inscription-composer {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.04);
+  max-height: 600px;
 }
 
-.knowledge-composer textarea {
+.inscription-composer textarea {
+  flex: 1;
   width: 100%;
-  min-height: 280px;
   background: transparent;
   border: none;
   outline: none;
-  font-size: 1.15rem;
+  font-size: 0.85rem;
+  line-height: 1.6;
   color: #1a1a1a;
   resize: none;
-  line-height: 1.6;
   font-weight: 500;
 }
 
-.knowledge-composer textarea::placeholder {
-  color: #ccc;
-}
-
-.knowledge-composer-footer {
+.inscription-footer {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #f8f8f8;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 32px;
-  padding-top: 24px;
-  border-top: 1px solid #f0f0f0;
+}
+
+.inscription-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .char-count {
-  font-size: 0.85rem;
+  font-size: 0.65rem;
+  font-weight: 800;
   color: #bbb;
-  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.1em;
 }
 
-.add-memory-btn {
-  background-color: #ff6b35;
+.busy-tag {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: #ff6b35;
+  text-transform: uppercase;
+}
+
+.inscription-btn {
+  background: #ff6b35;
   color: white;
-  padding: 16px 36px;
-  border-radius: 18px;
+  padding: 12px 28px;
+  border-radius: 14px;
   font-weight: 700;
-  font-size: 1rem;
-  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  box-shadow: 0 10px 25px rgba(255, 107, 53, 0.2);
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.2);
 }
 
-.add-memory-btn:hover:not(:disabled) {
+.inscription-btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 14px 30px rgba(255, 107, 53, 0.3);
+  box-shadow: 0 12px 25px rgba(255, 107, 53, 0.3);
 }
 
-.add-memory-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  filter: grayscale(0.5);
+.inscription-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
+  color: #059669;
+  padding: 16px 24px;
+  border-radius: 16px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
 }
 
-.knowledge-status-text {
-  margin-top: 32px;
-  font-size: 0.95rem;
-  color: #ff6b35;
+/* ── Analysis Sidebar ── */
+.inscription-sidebar {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.inscription-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+.inscription-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.inscription-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.1);
+  border-radius: 10px;
+}
+
+.analysis-panel {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 24px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+}
+
+.panel-label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: #aaa;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.analysis-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.analysis-metric {
+  display: flex;
+  flex-direction: column;
+}
+
+.analysis-section label,
+.analysis-metric label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: #999;
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 8px;
+  letter-spacing: 0.05em;
+}
+
+.mini-meter {
+  height: 6px;
+  background: rgba(0,0,0,0.05);
+  border-radius: 10px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+
+.mini-fill {
+  height: 100%;
+  background: #ff6b35;
+  transition: width 0.3s;
+}
+
+.link-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.link-tag {
+  background: white;
+  padding: 6px 12px;
+  border-radius: 100px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #555;
+  border: 1px solid rgba(0,0,0,0.03);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.link-tag .dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #ff6b35;
+}
+
+.empty-tag {
+  font-size: 0.7rem;
+  color: #ccc;
+  font-style: italic;
+}
+
+.layer-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #666;
+}
+
+.layer-item .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.metric-sub {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: #999;
+  text-transform: uppercase;
+}
+
+.impact-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.impact-item {
+  background: white;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.impact-val {
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  font-family: var(--font-display);
+}
+
+.impact-label {
+  font-size: 0.55rem;
+  font-weight: 700;
+  color: #aaa;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.link-tag.reinforced {
+  border-color: rgba(16, 185, 129, 0.3);
+  background: rgba(16, 185, 129, 0.05);
+}
+
+.reinforced-icon {
+  font-size: 12px !important;
+  color: #10b981;
+  margin-left: 2px;
+}
+
+.existing-links-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.existing-link-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: white;
+  padding: 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.03);
+}
+
+.existing-link-item .material-icons {
+  font-size: 18px;
+  color: #10b981;
+}
+
+.link-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.link-info strong {
+  font-size: 0.75rem;
   font-weight: 700;
-  animation: fadeIn 0.4s ease;
+  color: #1a1a1a;
+}
+
+.link-info span {
+  font-size: 0.6rem;
+  color: #999;
+}
+
+.panel-footer {
+  font-size: 0.65rem;
+  color: #bbb;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(0,0,0,0.05);
+  margin-top: auto;
+}
+
+@keyframes pulse-blue {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+.busy-tag.pulse {
+  animation: pulse-blue 1.5s infinite ease-in-out;
 }

frontend/src/components/KnowledgeInput.jsx

@@ -1,46 +1,227 @@
-import { useState } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { apiFetch } from '../api';
 import './KnowledgeInput.css';
 
 function KnowledgeInput({ onKnowledgeSubmit, isBusy, status }) {
   const [text, setText] = useState('');
+  const [analysis, setAnalysis] = useState(null);
+  const [lastAnalysis, setLastAnalysis] = useState(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
 
   const handleSubmit = () => {
     if (!text.trim() || isBusy) return;
     onKnowledgeSubmit(text);
+    
+    if (analysis) {
+      setLastAnalysis(analysis);
+    } else {
+      // Fallback if they clicked instantly or text was < 50 chars
+      const charCount = text.length;
+      setLastAnalysis({
+        metrics: {
+          density: Math.min(charCount / 2000, 1.0),
+          chunks: Math.floor(charCount / 500) + 1,
+          estimated_links: 0,
+          reinforcement_index: 0
+        },
+        entities: [],
+        existing_links: []
+      });
+    }
+    
     setText('');
+    setAnalysis(null);
   };
 
+  // Debounced analysis function
+  useEffect(() => {
+    if (text.length < 50) {
+      setAnalysis(null);
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setIsAnalyzing(true);
+      try {
+        const res = await apiFetch('/api/v1/analyze', {
+          method: 'POST',
+          body: JSON.stringify({ text })
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setAnalysis(data);
+        }
+      } catch (error) {
+        console.error('Analysis failed', error);
+      } finally {
+        setIsAnalyzing(false);
+      }
+    }, 1500); // 1.5s debounce
+
+    return () => clearTimeout(timer);
+  }, [text]);
+
+  const displayAnalysis = analysis || lastAnalysis;
+
   return (
-    <div className="knowledge-layout fade-in">
-      <div className="knowledge-icon-large">
-        <span className="material-icons">note_add</span>
-      </div>
-      
-      <h3>Add knowledge to Soma</h3>
-      <p>Paste text or notes for Soma to remember and integrate into its memory.</p>
-
-      <div className="knowledge-composer">
-        <textarea 
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="Paste anything here... (articles, notes, ideas, research)"
-          maxLength={10000}
-        />
-        <div className="knowledge-composer-footer">
-          <span className="char-count">{text.length} / 10000</span>
-          <button 
-            className="add-memory-btn" 
-            onClick={handleSubmit}
-            disabled={!text.trim() || isBusy}
-          >
-            Add to Memory
-          </button>
+    <div className="inscription-grid fade-in">
+      {/* ── LEFT: The Inscription Terminal ── */}
+      <div className="inscription-main">
+        {status && (
+          <div className="inscription-status fade-in">
+            <span className="material-icons">check_circle</span>
+            {status}
+          </div>
+        )}
+
+        <div className="inscription-header">
+          <div className="inscription-icon">
+            <span className="material-icons">auto_awesome</span>
+          </div>
+          <div className="inscription-title">
+            <h3>Neural Inscription</h3>
+            <p>Directly seed the core cortex with high-fidelity knowledge.</p>
+          </div>
+        </div>
+
+        <div className="inscription-composer">
+          <textarea 
+            value={text}
+            onChange={(e) => {
+               setText(e.target.value);
+               if (lastAnalysis) setLastAnalysis(null);
+            }}
+            placeholder="Paste research, notes, or data chunks here for deep integration..."
+            maxLength={10000}
+          />
+          <div className="inscription-footer">
+            <div className="inscription-stats">
+              <span className="char-count">{text.length} / 10000 Chars</span>
+              {isBusy && <span className="busy-tag pulse">Integrating...</span>}
+              {isAnalyzing && <span className="busy-tag pulse" style={{color: '#3b82f6'}}>Analyzing Pattern...</span>}
+            </div>
+            <button 
+              className="inscription-btn" 
+              onClick={handleSubmit}
+              disabled={!text.trim() || isBusy}
+            >
+              <span className="material-icons">memory</span>
+              Inscribe Knowledge
+            </button>
+          </div>
         </div>
       </div>
 
-      {status && <div className="knowledge-status-text">{status}</div>}
+      {/* ── RIGHT: Neural Analysis Preview ── */}
+      <div className="inscription-sidebar">
+        <div className="analysis-panel">
+          <div className="panel-label">
+            <span className="material-icons">biotech</span>
+            {(!analysis && lastAnalysis) ? 'Last Inscription Details' : 'Neural Analysis Preview'}
+          </div>
+          
+          <div className="analysis-content">
+            <div className="analysis-metric">
+              <label>Information Density</label>
+              <div className="mini-meter">
+                <div className="mini-fill" style={{ width: `${(displayAnalysis?.metrics?.density || 0) * 100}%` }} />
+              </div>
+              <div className="metric-sub">
+                <span>{Math.round((displayAnalysis?.metrics?.density || 0) * 100)}% Salience</span>
+              </div>
+            </div>
+
+            <div className="analysis-metric">
+              <label>Knowledge Reinforcement</label>
+              <div className="mini-meter">
+                <div className="mini-fill" style={{ 
+                  width: `${(displayAnalysis?.metrics?.reinforcement_index || 0) * 100}%`,
+                  background: '#10b981' 
+                }} />
+              </div>
+              <div className="metric-sub">
+                <span>{Math.round((displayAnalysis?.metrics?.reinforcement_index || 0) * 100)}% Integration</span>
+              </div>
+            </div>
+
+            <div className="analysis-section">
+              <label>Potential Semantic Links</label>
+              <div className="link-tags">
+                {(displayAnalysis?.entities || []).map((entity, i) => {
+                  const isExisting = displayAnalysis?.existing_links?.some(l => l.name.toLowerCase() === entity.toLowerCase());
+                  return (
+                    <div 
+                      key={i} 
+                      className={`link-tag fade-in ${isExisting ? 'reinforced' : ''}`} 
+                      style={{animationDelay: `${i * 0.1}s`}}
+                    >
+                      <span className="dot" />
+                      {entity}
+                      {isExisting && <span className="material-icons reinforced-icon">offline_bolt</span>}
+                    </div>
+                  );
+                })}
+                {(!displayAnalysis?.entities || displayAnalysis.entities.length === 0) && (
+                  <div className="empty-tag">
+                    {isAnalyzing ? 'Decoding semantic structure...' : 'Awaiting sufficient context (50+ chars)...'}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {displayAnalysis?.existing_links?.length > 0 && (
+              <div className="analysis-section fade-in">
+                <label>Reinforced Concepts</label>
+                <div className="existing-links-list">
+                  {displayAnalysis.existing_links.map((link, i) => (
+                    <div key={i} className="existing-link-item">
+                      <span className="material-icons">hub</span>
+                      <div className="link-info">
+                        <strong>{link.name}</strong>
+                        <span>{link.connections} existing connections</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="analysis-section">
+              <label>Estimated Memory Impact</label>
+              <div className="impact-stats">
+                <div className="impact-item">
+                  <span className="impact-val">{displayAnalysis?.metrics?.chunks || 0}</span>
+                  <span className="impact-label">Sensory Chunks</span>
+                </div>
+                <div className="impact-item">
+                  <span className="impact-val">{Math.floor(displayAnalysis?.metrics?.estimated_links || 0)}</span>
+                  <span className="impact-label">Graph Triples</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="analysis-section">
+              <label>Target Layers</label>
+              <div className="layer-item">
+                <span className="dot" style={{background: '#ff6b35'}} />
+                <span>Semantic Memory (Graph)</span>
+              </div>
+              <div className="layer-item">
+                <span className="dot" style={{background: '#10b981'}} />
+                <span>Sensory Cortex (Vector)</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="panel-footer">
+            <span className="material-icons">info</span>
+            Data will be parsed into triples and vectorized.
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
 
 export default KnowledgeInput;
+

frontend/src/components/MemoryExplorer.css

@@ -1,194 +1,511 @@
-/* MemoryExplorer.css - Refined for Page 4 */
+/* MemoryExplorer.css - Scientific Instrument Aesthetic */
 
 .memory-view-grid {
   display: grid;
-  grid-template-columns: 1fr 1.2fr;
-  gap: 48px;
-  height: 100%;
+  grid-template-columns: 320px 1fr;
+  gap: 24px;
+  height: calc(100vh - 140px);
+  padding: 0 24px 24px;
+  overflow: hidden;
 }
 
 .memory-surface {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 24px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+}
+
+/* ── List Surface ── */
+.list-surface {
+  padding: 20px;
 }
 
-/* ── Toolbar ── */
 .memory-toolbar {
   display: flex;
-  gap: 16px;
-  margin-bottom: 32px;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
 }
 
-.memory-search {
-  flex: 1;
-  background-color: #eee;
-  border-radius: 18px;
-  padding: 0 20px;
+.memory-search-wrap {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 12px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  height: 56px;
+  gap: 10px;
+  height: 40px;
+  transition: border-color 0.2s;
 }
 
-.memory-search input {
+.memory-search-wrap:focus-within {
+  border-color: var(--secondary);
+}
+
+.memory-search-wrap input {
   flex: 1;
   background: transparent;
   border: none;
   outline: none;
-  font-size: 1rem;
+  font-size: 0.8rem;
   color: #1a1a1a;
   font-weight: 500;
 }
 
-.memory-search .material-icons {
-  color: #aaa;
+.memory-search-wrap .material-icons {
+  color: #bbb;
+  font-size: 18px;
 }
 
-.memory-filter {
-  background-color: #eee;
-  border-radius: 18px;
-  padding: 0 20px;
+/* ── Filter Tabs ── */
+.filter-tabs {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 56px;
-  font-size: 0.95rem;
+  gap: 6px;
+  background: rgba(0,0,0,0.03);
+  padding: 4px;
+  border-radius: 10px;
+}
+
+.filter-tab {
+  flex: 1;
+  font-size: 0.6rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  padding: 6px 0;
+  border-radius: 8px;
+  color: #999;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  background: white;
   color: #1a1a1a;
-  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
-/* ── List ── */
 .memory-list {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  gap: 8px;
+  padding-right: 4px;
+  margin-top: 12px;
+}
+
+/* ── Neighborhood Section ── */
+.neighbor-card {
+  background: white;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(0,0,0,0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.neighbor-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  border-color: var(--secondary);
+}
+
+/* ── Neural Insight Overlay ── */
+.neural-insight-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+}
+
+.neural-insight-modal {
+  background: white;
+  width: 100%;
+  max-width: 400px;
+  border-radius: 32px;
+  padding: 32px;
+  box-shadow: 0 30px 100px rgba(0,0,0,0.1);
+  border: 1px solid rgba(0,0,0,0.02);
+}
+
+.insight-header {
+  display: flex;
+  align-items: center;
   gap: 12px;
+  margin-bottom: 24px;
 }
 
-.memory-row {
+.insight-header .material-icons {
+  color: var(--secondary);
+}
+
+.insight-header h3 {
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  flex: 1;
+}
+
+.insight-close {
+  color: #ccc;
+}
+
+.insight-body {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   gap: 20px;
-  padding: 24px;
-  border-radius: 24px;
+  margin-bottom: 32px;
+}
+
+.insight-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.insight-stat label {
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  color: #bbb;
+  font-weight: 800;
+}
+
+.insight-stat strong {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.1rem;
+}
+
+.insight-body p {
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: #666;
+}
+
+.insight-btn {
+  width: 100%;
+  padding: 12px;
+  background: #1a1a1a;
+  color: white;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.memory-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.memory-list::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.1);
+  border-radius: 10px;
+}
+
+.memory-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 12px;
   text-align: left;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: all 0.2s ease;
   border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
 }
 
 .memory-row:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+  background: rgba(255, 255, 255, 0.6);
 }
 
 .memory-row.active {
-  background-color: white;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
-  border-color: rgba(0,0,0,0.03);
-  transform: translateX(8px);
+  background: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+  border-color: rgba(0, 0, 0, 0.05);
 }
 
 .memory-dot {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  margin-top: 6px;
   flex-shrink: 0;
+  box-shadow: 0 0 8px rgba(0,0,0,0.1);
 }
 
 .memory-row-copy {
   flex: 1;
+  min-width: 0;
 }
 
 .memory-row-copy strong {
   display: block;
-  font-size: 1rem;
+  font-size: 0.8rem;
   font-weight: 700;
   color: #1a1a1a;
-  margin-bottom: 6px;
-  line-height: 1.3;
+  margin-bottom: 2px;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .memory-row-meta {
   display: flex;
-  gap: 12px;
-  font-size: 0.8rem;
-  color: #999;
-  font-weight: 500;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.6rem;
+  color: #bbb;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
-.memory-tag {
-  font-size: 0.75rem;
-  color: #bbb;
+/* ── Detail Surface ── */
+.detail-surface {
+  padding: 40px;
+  overflow-y: auto;
+}
+
+.memory-header-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.memory-type-pill {
+  font-size: 0.6rem;
+  font-weight: 800;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.1em;
+  padding: 4px 12px;
+  border-radius: 100px;
+}
+
+.memory-id-badge {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.6rem;
+  color: #999;
+  background: rgba(0,0,0,0.03);
+  padding: 4px 10px;
+  border-radius: 6px;
+}
+
+.purge-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: rgba(255, 107, 53, 0.08);
+  color: #ff6b35;
   font-weight: 700;
-  padding-top: 6px;
+  text-transform: uppercase;
+  font-size: 0.55rem;
+  transition: all 0.2s;
+  border: 1px solid transparent;
 }
 
-/* ── Detail ── */
-.detail-surface {
-  background-color: white;
-  border-radius: 40px;
-  padding: 48px;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
-  border: 1px solid rgba(0,0,0,0.02);
+.purge-btn:hover {
+  background: #ff6b35;
+  color: white;
 }
 
-.memory-detail-body h3 {
+.purge-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.memory-detail-title {
   font-family: var(--font-display);
-  font-size: 1.8rem;
-  font-weight: 700;
-  margin-bottom: 12px;
+  font-size: 1.75rem;
+  font-weight: 800;
+  margin-bottom: 8px;
   color: #1a1a1a;
-  line-height: 1.2;
+  letter-spacing: -0.02em;
 }
 
 .memory-detail-date {
-  font-size: 0.9rem;
-  color: #999;
+  font-size: 0.75rem;
+  color: #bbb;
   margin-bottom: 32px;
-  font-weight: 500;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.memory-detail-summary {
-  font-size: 1.1rem;
-  line-height: 1.7;
-  color: #555;
+.memory-content-box {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #333;
   margin-bottom: 40px;
+  padding: 24px;
+  background: white;
+  border-radius: 20px;
+  border: 1px solid rgba(0,0,0,0.03);
+  white-space: pre-wrap;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.01);
 }
 
-.memory-detail-section {
+/* ── Instrument Grid ── */
+.instrument-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
   margin-bottom: 40px;
 }
 
-.memory-detail-section h4 {
-  font-size: 0.75rem;
+.instrument-card {
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0,0,0,0.02);
+  border-radius: 20px;
+}
+
+.instrument-card h4 {
+  font-size: 0.6rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: #bbb;
-  margin-bottom: 20px;
+  color: #aaa;
+  margin-bottom: 12px;
+  font-weight: 800;
+}
+
+.meter-track {
+  height: 6px;
+  background: rgba(0,0,0,0.05);
+  border-radius: 10px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.meter-fill {
+  height: 100%;
+  border-radius: 10px;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.metric-value {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.9rem;
   font-weight: 700;
+  color: #1a1a1a;
+}
+
+/* ── Neighborhood ── */
+.neighborhood-section {
+  margin-top: 40px;
 }
 
-.entity-group, .source-group {
+.section-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #aaa;
+  margin-bottom: 20px;
+  font-weight: 800;
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.neighborhood-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 12px;
 }
 
-.entity-pill, .source-pill {
-  background-color: #f5f5f5;
-  padding: 10px 20px;
+.neighbor-card {
+  background: white;
+  padding: 14px;
   border-radius: 14px;
-  font-size: 0.9rem;
-  color: #444;
+  border: 1px solid rgba(0,0,0,0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.neighbor-card strong {
+  font-size: 0.75rem;
+  color: #1a1a1a;
+}
+
+.neighbor-card span {
+  font-size: 0.6rem;
+  color: #bbb;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+/* ── Raw Metadata ── */
+.metadata-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+}
+
+.metadata-tag {
+  background: rgba(0,0,0,0.02);
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.02);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.metadata-tag span:first-child {
+  font-size: 0.55rem;
+  color: #aaa;
+  text-transform: uppercase;
+  font-weight: 800;
+}
+
+.metadata-tag span:last-child {
+  font-size: 0.7rem;
+  color: #555;
   font-weight: 600;
-  transition: all 0.2s;
+  word-break: break-all;
 }
 
-.entity-pill:hover {
-  background-color: #eee;
-  transform: translateY(-2px);
+.empty-detail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #ccc;
+  text-align: center;
+  gap: 12px;
 }
+
+.empty-detail .material-icons {
+  font-size: 48px;
+  opacity: 0.3;
+}
+
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.4; }
+  50% { opacity: 1; }
+  100% { opacity: 0.4; }
+}
+

frontend/src/components/MemoryExplorer.jsx

@@ -1,139 +1,340 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { apiFetch } from '../api';
 import './MemoryExplorer.css';
 
-const MEMORIES = [
-  {
-    id: '1',
-    title: 'Neural architecture trade-offs in transformer models',
-    type: 'conversation',
-    dot: '#3b82f6',
-    date: 'Today, 10:41 AM',
-    similarity: 0.92,
-    summary: 'We discussed how attention mechanisms enable parallelism but have quadratic complexity with sequence length. Sparse patterns, recurrence, and hybrid approaches help balance efficiency and expressivity.',
-    entities: ['Attention Mechanism', 'Long-range Dependencies', 'Transformer Models', 'Efficiency', 'Expressivity'],
-    source: { memories: 5, entities: 2 }
-  },
-  {
-    id: '2',
-    title: 'Attention mechanisms and long-range dependencies',
-    type: 'concept',
-    dot: '#ff6b35',
-    date: 'Today, 10:32 AM',
-    similarity: 0.89,
-    summary: 'Long-range dependencies benefit from attention, but scaling cost needs careful control for production systems.',
-    entities: ['Attention', 'Context Windows', 'Scalability'],
-    source: { memories: 3, entities: 1 }
-  },
-  {
-    id: '3',
-    title: 'Sparse attention patterns for efficient inference',
-    type: 'note',
-    dot: '#10b981',
-    date: 'Yesterday, 08:15 PM',
-    similarity: 0.87,
-    summary: 'Sparse routing lowers compute while preserving useful global pathways for key tokens.',
-    entities: ['Sparse Attention', 'Inference', 'Efficiency'],
-    source: { memories: 2, entities: 1 }
-  },
-  {
-    id: '4',
-    title: 'Depth vs width scaling laws in neural networks',
-    type: 'note',
-    dot: '#10b981',
-    date: 'Yesterday, 07:42 PM',
-    similarity: 0.85,
-    summary: 'Model depth and width trade off optimization stability, memory, and generalization.',
-    entities: ['Scaling Laws', 'Depth', 'Width'],
-    source: { memories: 4, entities: 3 }
-  },
-  {
-    id: '5',
-    title: 'Positional encoding variants and their impacts',
-    type: 'concept',
-    dot: '#ff6b35',
-    date: 'Yesterday, 06:11 PM',
-    similarity: 0.80,
-    summary: 'Rotary, learned, and relative position schemes each affect extrapolation and training behavior differently.',
-    entities: ['RoPE', 'Relative Position', 'Learned Embeddings'],
-    source: { memories: 6, entities: 2 }
-  },
-];
-
 function MemoryExplorer() {
   const [search, setSearch] = useState('');
-  const [selectedId, setSelectedId] = useState(MEMORIES[0].id);
+  const [memories, setMemories] = useState([]);
+  const [graphData, setGraphData] = useState({ nodes: [], edges: [] });
+  const [selectedId, setSelectedId] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [insightEntity, setInsightEntity] = useState(null);
+
+  const fetchData = useCallback(async (query = '') => {
+    const isSearch = query.trim().length > 0;
+    if (isSearch) setIsSearching(true);
+    else setIsLoading(true);
+
+    try {
+      const memoryUrl = isSearch 
+        ? `/api/v1/memory/search?q=${encodeURIComponent(query)}` 
+        : '/api/v1/memory/sensory';
+      
+      const [memRes, graphRes] = await Promise.all([
+        apiFetch(memoryUrl),
+        apiFetch('/api/v1/graph')
+      ]);
+
+      if (memRes.ok) {
+        const data = await memRes.json();
+        const results = data.memories || [];
+        setMemories(results);
+        
+        if (results.length > 0) {
+          if (!selectedId || !results.find(m => m.id === selectedId)) {
+            setSelectedId(results[0].id);
+          }
+        } else {
+          setSelectedId(null);
+        }
+      }
+
+      if (graphRes.ok) {
+        const gData = await graphRes.json();
+        setGraphData(gData);
+      }
+    } catch (error) {
+      console.error('Neural synchronization failure', error);
+    } finally {
+      setIsLoading(false);
+      setIsSearching(false);
+    }
+  }, [selectedId]);
+
+  const handlePurge = async (id) => {
+    if (!window.confirm("Are you sure you want to purge this memory chunk from the neural cortex? This action is irreversible.")) return;
+    
+    setIsDeleting(true);
+    try {
+      const res = await apiFetch(`/api/v1/memory/${id}`, { method: 'DELETE' });
+      if (res.ok) {
+        setMemories(prev => prev.filter(m => m.id !== id));
+        setSelectedId(null);
+        fetchData(search);
+      }
+    } catch (error) {
+      console.error('Purge failed', error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
 
-  const filteredMemories = MEMORIES.filter(memory => 
-    memory.title.toLowerCase().includes(search.toLowerCase())
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      fetchData(search);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [search]);
+
+  const filteredMemories = useMemo(() => {
+    if (activeFilter === 'all') return memories;
+    return memories.filter(m => {
+      const type = m.metadata?.type;
+      if (activeFilter === 'episodic') return type === 'conversation' || type === 'chat_exchange';
+      if (activeFilter === 'semantic') return type === 'concept' || type === 'note';
+      if (activeFilter === 'sleep') return type === 'sleep_summary';
+      return true;
+    });
+  }, [memories, activeFilter]);
+
+  const selectedMemory = useMemo(() => 
+    memories.find(m => m.id === selectedId) || memories[0],
+    [memories, selectedId]
   );
 
-  const selectedMemory = filteredMemories.find(m => m.id === selectedId) || filteredMemories[0] || MEMORIES[0];
+  const linkedEntities = useMemo(() => {
+    if (!selectedMemory || !graphData.nodes) return [];
+    const content = selectedMemory.content.toLowerCase();
+    return graphData.nodes.filter(node => 
+      content.includes(node.id.toLowerCase()) || 
+      (node.label && content.includes(node.label.toLowerCase()))
+    );
+  }, [selectedMemory, graphData]);
+
+  const getTitle = (content) => {
+    if (!content) return 'Untitled Memory Chunks';
+    const lines = content.split('\n');
+    const firstLine = lines[0].trim();
+    if (firstLine.length > 40) return firstLine.substring(0, 37) + '...';
+    return firstLine || 'Untitled Memory Chunks';
+  };
+
+  const getMemoryTheme = (type) => {
+    switch (type) {
+      case 'conversation': return { color: '#3b82f6', label: 'Episodic' };
+      case 'chat_exchange': return { color: '#8b5cf6', label: 'Social' };
+      case 'concept': return { color: '#ff6b35', label: 'Semantic' };
+      case 'note': return { color: '#10b981', label: 'Explicit' };
+      case 'sleep_summary': return { color: '#f59e0b', label: 'Consolidated' };
+      default: return { color: '#94a3b8', label: 'Raw Sensory' };
+    }
+  };
 
   return (
     <div className="memory-view-grid fade-in">
+      {/* ── SIDEBAR: Memory Feed ── */}
       <section className="memory-surface list-surface">
         <div className="memory-toolbar">
-          <label className="memory-search">
-            <span className="material-icons">search</span>
+          <div className="memory-search-wrap">
+            <span className="material-icons">{isSearching ? 'sync' : 'search'}</span>
             <input 
               type="text" 
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search memories..." 
+              placeholder="Query sensory cortex..." 
             />
-          </label>
-          <button className="memory-filter">
-            <span>All Types</span>
-            <span className="material-icons">expand_more</span>
-          </button>
+          </div>
+          <div className="filter-tabs">
+            {['all', 'episodic', 'semantic', 'sleep'].map(f => (
+              <button 
+                key={f} 
+                className={`filter-tab ${activeFilter === f ? 'active' : ''}`}
+                onClick={() => setActiveFilter(f)}
+              >
+                {f}
+              </button>
+            ))}
+          </div>
+          <div className="density-stats">
+            <span className="material-icons" style={{fontSize: '14px'}}>dns</span>
+            <span>{filteredMemories.length} Active Nodes</span>
+          </div>
         </div>
 
         <div className="memory-list">
-          {filteredMemories.map((memory) => (
-            <button 
-              key={memory.id}
-              className={`memory-row ${memory.id === selectedId ? 'active' : ''}`}
-              onClick={() => setSelectedId(memory.id)}
-            >
-              <div className="memory-dot" style={{ backgroundColor: memory.dot }} />
-              <div className="memory-row-copy">
-                <strong>{memory.title}</strong>
-                <div className="memory-row-meta">
-                  <span>{memory.date}</span>
-                  <span>•</span>
-                  <span>{memory.similarity} similarity</span>
+          {isLoading ? (
+            <div className="empty-detail">
+              <span className="material-icons pulse">settings_input_component</span>
+              <p style={{fontSize: '0.7rem'}}>Calibrating neural paths...</p>
+            </div>
+          ) : (
+            filteredMemories.map((memory) => {
+              const theme = getMemoryTheme(memory.metadata?.type);
+              return (
+                <button 
+                  key={memory.id}
+                  className={`memory-row ${memory.id === selectedId ? 'active' : ''}`}
+                  onClick={() => setSelectedId(memory.id)}
+                >
+                  <div 
+                    className="memory-dot" 
+                    style={{ backgroundColor: theme.color }} 
+                  />
+                  <div className="memory-row-copy">
+                    <strong>{getTitle(memory.content)}</strong>
+                    <div className="memory-row-meta">
+                      <span style={{ color: theme.color }}>{theme.label}</span>
+                      <span>•</span>
+                      <span>{memory.id.substring(0, 8)}</span>
+                    </div>
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+      </section>
+
+      {/* ── MAIN: Diagnostic Detail ── */}
+      <section className="memory-surface detail-surface" style={{position: 'relative'}}>
+        {selectedMemory ? (
+          <div className="fade-in">
+            <div className="memory-header-meta">
+              <div className="memory-type-pill" style={{ 
+                color: getMemoryTheme(selectedMemory.metadata?.type).color,
+                background: `${getMemoryTheme(selectedMemory.metadata?.type).color}15`
+              }}>
+                Layer: {getMemoryTheme(selectedMemory.metadata?.type).label}
+              </div>
+              <div className="memory-id-badge" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span>UUID: {selectedMemory.id}</span>
+                <button 
+                  className="purge-btn" 
+                  onClick={() => handlePurge(selectedMemory.id)}
+                  disabled={isDeleting}
+                >
+                  <span className="material-icons" style={{fontSize: '14px'}}>{isDeleting ? 'sync' : 'delete_forever'}</span>
+                  Purge
+                </button>
+              </div>
+            </div>
+            
+            <h1 className="memory-detail-title">{getTitle(selectedMemory.content)}</h1>
+            <p className="memory-detail-date">
+              <span className="material-icons" style={{fontSize: '14px'}}>event</span>
+              Encoded: {selectedMemory.metadata?.timestamp ? new Date(selectedMemory.metadata.timestamp).toLocaleString() : 'System Boot Sequence'}
+            </p>
+
+            <div className="memory-content-box">
+              {selectedMemory.content}
+            </div>
+
+            {/* Instrument Metrics */}
+            <div className="instrument-grid">
+              <div className="instrument-card">
+                <h4>Retrieval Salience</h4>
+                <div className="meter-track">
+                  <div className="meter-fill" style={{ 
+                    width: `${Math.round((selectedMemory.similarity || 0.85) * 100)}%`,
+                    backgroundColor: getMemoryTheme(selectedMemory.metadata?.type).color
+                  }} />
                 </div>
+                <div className="metric-value">{(selectedMemory.similarity || 0.85).toFixed(4)}</div>
+              </div>
+              
+              <div className="instrument-card">
+                <h4>Graph Associations</h4>
+                <div className="meter-track">
+                  <div className="meter-fill" style={{ 
+                    width: `${Math.min(linkedEntities.length * 20, 100)}%`,
+                    backgroundColor: '#ff6b35'
+                  }} />
+                </div>
+                <div className="metric-value">{linkedEntities.length} Links</div>
               </div>
-              <span className="memory-tag">{memory.type}</span>
-            </button>
-          ))}
-        </div>
 
-        <button className="memory-link-button">View All Memories</button>
-      </section>
+              <div className="instrument-card">
+                <h4>Entropy Score</h4>
+                <div className="meter-track">
+                  <div className="meter-fill" style={{ 
+                    width: '42%',
+                    backgroundColor: '#10b981'
+                  }} />
+                </div>
+                <div className="metric-value">0.4281</div>
+              </div>
+            </div>
 
-      <section className="memory-surface detail-surface">
-        <div className="memory-detail-body">
-          <div className="memory-tag" style={{ marginBottom: '12px', textTransform: 'capitalize' }}>{selectedMemory.type}</div>
-          <h3>{selectedMemory.title}</h3>
-          <p className="memory-detail-date">{selectedMemory.date}</p>
-          <p className="memory-detail-summary">{selectedMemory.summary}</p>
-
-          <div className="memory-detail-section">
-            <h4>Related Entities</h4>
-            <div className="entity-group">
-              {selectedMemory.entities.map(e => <span key={e} className="entity-pill">{e}</span>)}
+            {/* Knowledge Links */}
+            <div className="neighborhood-section">
+              <div className="section-label">
+                <span className="material-icons" style={{fontSize: '16px'}}>account_tree</span>
+                Knowledge Graph Intersections (Click for Insights)
+              </div>
+              <div className="neighborhood-grid">
+                {linkedEntities.map(node => (
+                  <button 
+                    key={node.id} 
+                    className="neighbor-card"
+                    onClick={() => setInsightEntity(node)}
+                  >
+                    <strong>{node.id}</strong>
+                    <span>Connections: {node.connections || 0}</span>
+                  </button>
+                ))}
+                {linkedEntities.length === 0 && (
+                  <p style={{fontSize: '0.75rem', color: '#999', fontStyle: 'italic'}}>No direct semantic associations detected in current graph state.</p>
+                )}
+              </div>
             </div>
-          </div>
 
-          <div className="memory-detail-section">
-            <h4>Source</h4>
-            <div className="source-group">
-              <span className="source-pill">{selectedMemory.source.memories} Memories</span>
-              <span className="source-pill">{selectedMemory.source.entities} Entities</span>
+            {/* Raw Metadata */}
+            <div className="neighborhood-section">
+              <div className="section-label">
+                <span className="material-icons" style={{fontSize: '16px'}}>terminal</span>
+                Raw Metadata Explorer
+              </div>
+              <div className="metadata-grid">
+                {Object.entries(selectedMemory.metadata || {}).map(([key, val]) => (
+                  <div key={key} className="metadata-tag">
+                    <span>{key}</span>
+                    <span>{String(val)}</span>
+                  </div>
+                ))}
+              </div>
             </div>
+
+            {/* Neural Insight Overlay */}
+            {insightEntity && (
+              <div className="neural-insight-overlay fade-in">
+                <div className="neural-insight-modal">
+                  <div className="insight-header">
+                    <span className="material-icons">psychology</span>
+                    <h3>Neural Insight: {insightEntity.id}</h3>
+                    <button className="insight-close" onClick={() => setInsightEntity(null)}>
+                      <span className="material-icons">close</span>
+                    </button>
+                  </div>
+                  <div className="insight-body">
+                    <div className="insight-stat">
+                      <label>Semantic Weight</label>
+                      <strong>{insightEntity.connections * 12.5} nm</strong>
+                    </div>
+                    <div className="insight-stat">
+                      <label>Active Connections</label>
+                      <strong>{insightEntity.connections} Nodes</strong>
+                    </div>
+                    <p>This entity is a core semantic node within your current knowledge base. It facilitates retrieval of related episodic contexts and strengthens the reasoning cortex.</p>
+                  </div>
+                  <button className="insight-btn" onClick={() => setInsightEntity(null)}>Close Diagnostic</button>
+                </div>
+              </div>
+            )}
           </div>
-        </div>
+        ) : (
+          <div className="empty-detail">
+            <span className="material-icons pulse">sensors</span>
+            <h3>No Active Focus</h3>
+            <p style={{maxWidth: '280px', margin: '0 auto', fontSize: '0.85rem'}}>Select a sensory chunk from the feed to begin deep-layer diagnostic analysis.</p>
+          </div>
+        )}
       </section>
     </div>
   );

frontend/src/index.css

@@ -34,8 +34,12 @@ body,
 
 body {
   font-family: var(--font-body);
-  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.55), transparent 28%), var(--bg-app);
+  background: 
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 50%),
+    radial-gradient(circle at bottom right, rgba(255, 107, 53, 0.08), transparent 50%),
+    #f2f2f2;
   color: var(--text-main);
+  overflow: hidden;
 }
 
 button,
@@ -69,3 +73,645 @@ img {
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
 }
+
+/* ── SOMA Premium Glassmorphic Dark Theme ── */
+body.dark-theme {
+  --bg-app: #000000;
+  --bg-sidebar: #050505;
+  --bg-card: rgba(18, 18, 18, 0.75);
+  --primary: #f8fafc;
+  --secondary: #ff7d4d;
+  --accent: #ff7d4d;
+  --text-main: #f8fafc;
+  --text-muted: #a3a3a3; /* Neutral light grey, no blue/slate tint */
+  --text-light: #737373; /* Neutral dark grey, no blue/slate tint */
+  --border-card: 1px solid rgba(255, 255, 255, 0.06);
+  --shadow-premium: 0 40px 100px rgba(0, 0, 0, 0.6);
+  
+  background: 
+    radial-gradient(circle at top left, rgba(255, 107, 53, 0.04), transparent 50%),
+    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.015), transparent 50%),
+    #000000;
+  color: var(--text-main);
+}
+
+/* Header & Sidebar Titles */
+body.dark-theme .page-header h2 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .brand-copy h1 {
+  color: #f8fafc !important;
+}
+
+/* Brain Ambient Node Labels Contrast Correction */
+body.dark-theme .signal-copy strong {
+  color: #e2e8f0 !important;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
+
+body.dark-theme .signal-node {
+  opacity: 0.38 !important; /* Raised from 0.2 to prevent faintness */
+}
+
+body.dark-theme .signal-node.active,
+body.dark-theme .signal-node.hot {
+  opacity: 1 !important;
+}
+
+body.dark-theme .signal-dot {
+  background-color: #475569 !important;
+}
+
+/* Timeline & Feed Overrides */
+body.dark-theme .phase-title {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .phase-desc {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .timeline-row::before {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+body.dark-theme .timeline-dot {
+  box-shadow: 0 0 0 4px #050505 !important;
+  background-color: #ff6b35 !important; /* Active accent node dot */
+}
+
+body.dark-theme .timeline-empty {
+  color: #737373 !important;
+}
+
+/* Chat bubble dark mode overrides */
+body.dark-theme .bubble-body {
+  background-color: rgba(24, 24, 24, 0.75) !important; /* Pure neutral dark-grey glass bubble, no navy blue */
+  color: #f8fafc !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
+}
+
+body.dark-theme .chat-bubble-group.user .bubble-body {
+  background-color: rgba(28, 28, 28, 0.85) !important; /* Elegant neutral deep charcoal, completely mud-free */
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  color: #f8fafc !important;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
+}
+
+body.dark-theme .bubble-text {
+  color: #e5e5e5 !important;
+}
+
+body.dark-theme .bubble-meta strong {
+  color: #e5e5e5 !important;
+}
+
+body.dark-theme .chat-bubble-group.soma .bubble-meta strong {
+  color: #ff8b54 !important; /* Elegant warm orange highlight for Soma in pure dark mode */
+}
+
+/* Input elements dark mode overrides */
+body.dark-theme .input-field-wrap {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
+}
+
+body.dark-theme .input-field-wrap input {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .new-chat-btn {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: #f8fafc !important;
+}
+
+body.dark-theme .new-chat-btn:hover {
+  background-color: rgba(255, 107, 53, 0.1) !important;
+  color: #ff6b35 !important;
+}
+
+body.dark-theme .suggested-starters button {
+  background-color: rgba(24, 24, 24, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: #e5e5e5 !important;
+}
+
+body.dark-theme .suggested-starters button:hover {
+  background-color: rgba(255, 107, 53, 0.1) !important;
+  color: #ff7d4d !important;
+  border-color: rgba(255, 107, 53, 0.3) !important;
+}
+
+body.dark-theme .welcome-icon {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
+}
+
+body.dark-theme .welcome-icon span {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .welcome-state h3 {
+  color: #f8fafc !important;
+}
+
+/* Sidebar overrides */
+body.dark-theme .session-card {
+  background-color: rgba(18, 18, 18, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.03) !important;
+}
+
+body.dark-theme .session-avatar {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+body.dark-theme .session-copy strong {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .sidebar-link {
+  color: var(--text-muted);
+}
+
+body.dark-theme .sidebar-link:hover {
+  color: var(--text-main);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+body.dark-theme .sidebar-link.active {
+  background-color: rgba(255, 255, 255, 0.03) !important;
+}
+
+/* Memory & Dashboard dynamic panels */
+body.dark-theme .dashboard-metric-card,
+body.dark-theme .memory-list-card,
+body.dark-theme .memory-detail-card,
+body.dark-theme .knowledge-card {
+  background-color: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .timeline-node {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.03) !important;
+}
+
+body.dark-theme .sleep-telemetry-card {
+  background-color: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .summary-card-combined,
+body.dark-theme .summary-card-inline {
+  background-color: rgba(18, 18, 18, 0.85) !important;
+}
+
+body.dark-theme .telemetry-card-value {
+  color: #f8fafc !important;
+}
+
+/* Graph online indicator */
+body.dark-theme .graph-container-glow {
+  border-color: rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .input-area-card {
+  background-color: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .text-input-field {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: #f8fafc !important;
+}
+
+body.dark-theme .theme-toggle-btn {
+  border-top-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* ── SOMA Memory Explorer Dark UI Overrides ── */
+body.dark-theme .memory-surface {
+  background: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
+}
+
+body.dark-theme .memory-search-wrap {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+body.dark-theme .memory-search-wrap input {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .filter-tabs {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+body.dark-theme .filter-tab {
+  color: #737373 !important;
+}
+
+body.dark-theme .filter-tab.active {
+  background-color: rgba(255, 255, 255, 0.08) !important;
+  color: #f8fafc !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+}
+
+body.dark-theme .memory-row {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .memory-row:hover {
+  background-color: rgba(255, 255, 255, 0.03) !important;
+}
+
+body.dark-theme .memory-row.active {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+body.dark-theme .memory-row-copy strong {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .memory-row-meta {
+  color: #737373 !important;
+}
+
+body.dark-theme .memory-id-badge {
+  background-color: rgba(255, 255, 255, 0.04) !important;
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .memory-detail-title {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .memory-content-box {
+  background-color: rgba(24, 24, 24, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+  color: #e5e5e5 !important;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
+}
+
+body.dark-theme .instrument-card {
+  background-color: rgba(24, 24, 24, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .instrument-card h4 {
+  color: #737373 !important;
+}
+
+body.dark-theme .meter-track {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+body.dark-theme .metric-value {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .neighbor-card {
+  background-color: rgba(24, 24, 24, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .neighbor-card strong {
+  color: #e2e8f0 !important;
+}
+
+body.dark-theme .neighbor-card span {
+  color: #737373 !important;
+}
+
+body.dark-theme .metadata-tag {
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  border-color: rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .metadata-tag span:first-child {
+  color: #737373 !important;
+}
+
+body.dark-theme .metadata-tag span:last-child {
+  color: #e2e8f0 !important;
+}
+
+body.dark-theme .empty-detail {
+  color: #737373 !important;
+}
+
+body.dark-theme .insight-close {
+  color: #737373 !important;
+}
+
+body.dark-theme .neural-insight-modal {
+  background-color: #0f1115 !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+}
+
+body.dark-theme .insight-header h3 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .insight-body p {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .insight-btn {
+  background-color: #ff6b35 !important;
+  color: white !important;
+}
+
+/* ── SOMA Knowledge Graph Dark UI Overrides ── */
+body.dark-theme .graph-network-container {
+  background: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 80px rgba(255, 255, 255, 0.02) !important;
+}
+
+body.dark-theme .graph-select {
+  background: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: #f8fafc !important;
+}
+
+body.dark-theme .graph-icon-button {
+  background: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .graph-icon-button:hover {
+  background: rgba(255, 255, 255, 0.05) !important;
+  color: #ff6b35 !important;
+}
+
+body.dark-theme .graph-legend {
+  background: rgba(24, 24, 24, 0.85) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
+}
+
+body.dark-theme .legend-item {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .hud-panel {
+  background: rgba(18, 18, 18, 0.85) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
+}
+
+body.dark-theme .hud-header {
+  color: #ff8b54 !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+body.dark-theme .hud-label {
+  color: #737373 !important;
+}
+
+body.dark-theme .hud-value {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .entity-name {
+  color: #e5e5e5 !important;
+}
+
+body.dark-theme .entity-connections {
+  color: #ffaa80 !important;
+  background: rgba(255, 107, 53, 0.1) !important;
+}
+
+body.dark-theme .graph-tooltip {
+  text-shadow: 
+    -3px -3px 0 #000, 
+     3px -3px 0 #000, 
+    -3px  3px 0 #000, 
+     3px  3px 0 #000,
+    -3px  0px 0 #000,
+     3px  0px 0 #000,
+     0px -3px 0 #000,
+     0px  3px 0 #000 !important;
+}
+
+body.dark-theme .graph-loading {
+  background: rgba(18, 18, 18, 0.9) !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  color: #ff6b35 !important;
+}
+
+/* ── SOMA Neural Inscription Dark UI Overrides ── */
+body.dark-theme .inscription-icon {
+  background-color: rgba(24, 24, 24, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+body.dark-theme .inscription-title h3 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .inscription-composer {
+  background: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
+}
+
+body.dark-theme .inscription-composer textarea {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .inscription-composer textarea::placeholder {
+  color: #525252 !important;
+}
+
+body.dark-theme .inscription-footer {
+  border-top-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+body.dark-theme .analysis-panel {
+  background: rgba(18, 18, 18, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
+}
+
+body.dark-theme .analysis-section label,
+body.dark-theme .analysis-metric label {
+  color: #737373 !important;
+}
+
+body.dark-theme .mini-meter {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+body.dark-theme .metric-sub {
+  color: #737373 !important;
+}
+
+body.dark-theme .link-tag {
+  background-color: rgba(24, 24, 24, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+  color: #e2e8f0 !important;
+}
+
+body.dark-theme .link-tag.reinforced {
+  border-color: rgba(16, 185, 129, 0.3) !important;
+  background: rgba(16, 185, 129, 0.08) !important;
+}
+
+body.dark-theme .impact-item {
+  background-color: rgba(24, 24, 24, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .impact-val {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .impact-label {
+  color: #737373 !important;
+}
+
+body.dark-theme .layer-item {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .empty-tag {
+  color: #737373 !important;
+}
+
+body.dark-theme .existing-link-item {
+  background-color: rgba(24, 24, 24, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .link-info strong {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .link-info span {
+  color: #737373 !important;
+}
+
+body.dark-theme .panel-footer {
+  border-top-color: rgba(255, 255, 255, 0.05) !important;
+  color: #737373 !important;
+}
+
+/* ── SOMA Sleep Page & Consolidation Dark UI Overrides ── */
+body.dark-theme .sleep-page-container {
+  background-color: #000000 !important;
+}
+
+body.dark-theme .sleep-page-header h2 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .sleep-copy-combined h3 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .sleep-copy-combined p {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .sleep-step-text {
+  color: #737373 !important;
+}
+
+body.dark-theme .sleep-step-item-vertical.active .sleep-step-text {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .sleep-step-circle {
+  background-color: #000000 !important;
+}
+
+body.dark-theme .sleep-step-circle.pending {
+  border-color: #404040 !important;
+}
+
+body.dark-theme .connector-line {
+  background-color: #404040 !important;
+}
+
+body.dark-theme .summary-overlay-combined {
+  background-color: #000000 !important;
+}
+
+body.dark-theme .sleep-page-header-summary h2 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .summary-card-combined {
+  background-color: rgba(18, 18, 18, 0.85) !important;
+  border-color: rgba(255, 255, 255, 0.05) !important;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
+}
+
+body.dark-theme .summary-close-combined {
+  color: #737373 !important;
+}
+
+body.dark-theme .summary-close-combined:hover {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .summary-header-copy-combined h3 {
+  color: #f8fafc !important;
+}
+
+body.dark-theme .summary-header-copy-combined p {
+  color: #737373 !important;
+}
+
+body.dark-theme .summary-item-combined {
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  border-color: rgba(255, 255, 255, 0.04) !important;
+}
+
+body.dark-theme .summary-item-copy-combined strong {
+  color: #e5e5e5 !important;
+}
+
+body.dark-theme .summary-item-copy-combined span {
+  color: #737373 !important;
+}
+
+body.dark-theme .summary-view-btn-combined {
+  background-color: rgba(255, 107, 53, 0.1) !important;
+  color: #ff6b35 !important;
+}
+
+body.dark-theme .summary-view-btn-combined:hover {
+  background-color: rgba(255, 107, 53, 0.15) !important;
+}
+
+body.dark-theme .summary-footer-combined p {
+  color: #a3a3a3 !important;
+}
+
+body.dark-theme .sleep-trigger-btn {
+  background: linear-gradient(135deg, #ff6b35, #ff5714) !important;
+}
+
+body.dark-theme .sleep-trigger-btn:hover {
+  box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4) !important;
+}
+
+body.dark-theme .sleep-brain-image-asset {
+  background: none !important;
+  mix-blend-mode: normal !important;
+  opacity: 1 !important;
+  border-radius: 0 !important;
+}
+

scratch/check_deps.py

@@ -0,0 +1,15 @@
+try:
+    import fastapi
+    print("fastapi ok")
+    import uvicorn
+    print("uvicorn ok")
+    import langgraph
+    print("langgraph ok")
+    import langchain
+    print("langchain ok")
+    import chromadb
+    print("chromadb ok")
+    import neo4j
+    print("neo4j ok")
+except ImportError as e:
+    print(f"Import failed: {e}")

scratch/check_graph_nodes.py

@@ -0,0 +1,18 @@
+from app.db.neo4j_driver import neo4j_db
+
+def check_nodes():
+    if not neo4j_db.driver:
+        print("Neo4j driver is not active.")
+        return
+        
+    try:
+        query = "MATCH (n:Entity) RETURN n.name AS name, n.user_id AS user_id"
+        results = neo4j_db.query(query)
+        print("Nodes found in Neo4j:")
+        for r in results:
+            print(f"- Name: '{r['name']}', User ID: '{r['user_id']}'")
+    except Exception as e:
+        print(f"Error querying Neo4j: {e}")
+
+if __name__ == "__main__":
+    check_nodes()

scratch/check_soma.py

@@ -0,0 +1,10 @@
+from app.db.neo4j_driver import neo4j_db
+
+res = neo4j_db.query("""
+MATCH (s)-[r]->(o)
+WHERE toLower(s.name) = 'soma' OR toLower(o.name) = 'soma'
+RETURN s.name as subject, type(r) as relation, o.name as object
+""")
+print("SOMA Relations:")
+for r in res:
+    print(f"  {r['subject']} --[{r['relation']}]--> {r['object']}")

scratch/color_to_alpha.py

@@ -0,0 +1,63 @@
+from PIL import Image
+
+def color_to_alpha(img_path, output_path, bg_color):
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    r_bg, g_bg, b_bg = bg_color
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            
+            # Calculate alpha for each channel based on Color-to-Alpha algorithm
+            if r > r_bg:
+                a_r = (r - r_bg) / (255.0 - r_bg)
+            elif r < r_bg:
+                a_r = (r_bg - r) / float(r_bg)
+            else:
+                a_r = 0.0
+                
+            if g > g_bg:
+                a_g = (g - g_bg) / (255.0 - g_bg)
+            elif g < g_bg:
+                a_g = (g_bg - g) / float(g_bg)
+            else:
+                a_g = 0.0
+                
+            if b > b_bg:
+                a_b = (b - b_bg) / (255.0 - b_bg)
+            elif b < b_bg:
+                a_b = (b_bg - b) / float(b_bg)
+            else:
+                a_b = 0.0
+                
+            # The pixel's alpha is the maximum alpha across all channels
+            alpha = max(a_r, a_g, a_b)
+            
+            if alpha > 0.001:
+                # Calculate new foreground color
+                r_fg = int(round((r - (1.0 - alpha) * r_bg) / alpha))
+                g_fg = int(round((g - (1.0 - alpha) * g_bg) / alpha))
+                b_fg = int(round((b - (1.0 - alpha) * b_bg) / alpha))
+                
+                # Clamp colors to 0-255
+                r_fg = max(0, min(255, r_fg))
+                g_fg = max(0, min(255, g_fg))
+                b_fg = max(0, min(255, b_fg))
+                a_val = int(round(alpha * 255))
+                
+                pixels[x, y] = (r_fg, g_fg, b_fg, a_val)
+            else:
+                pixels[x, y] = (0, 0, 0, 0)
+                
+    img.save(output_path, "PNG")
+    print(f"SUCCESS: Converted {img_path} to transparent {output_path} using Color-to-Alpha!")
+
+if __name__ == "__main__":
+    color_to_alpha(
+        r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png",
+        r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png",
+        (234, 234, 234)
+    )

scratch/copy_alpha.py

@@ -0,0 +1,34 @@
+import cv2
+
+def main():
+    # Load original sleep.png (the one with the solid background)
+    sleep_img = cv2.imread(r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png", cv2.IMREAD_UNCHANGED)
+    if sleep_img is None:
+        print("Error loading sleep.png")
+        return
+        
+    # Load Brain_nobg.png
+    brain_nobg = cv2.imread(r"d:\PROJECTS\Soma\frontend\src\assets\brain\Brain_nobg.png", cv2.IMREAD_UNCHANGED)
+    if brain_nobg is None:
+        print("Error loading Brain_nobg.png")
+        return
+        
+    # The brain_nobg image has 4 channels (BGRA)
+    alpha_channel = brain_nobg[:, :, 3]
+    
+    # Resize alpha channel to match sleep_img exactly
+    h, w = sleep_img.shape[:2]
+    alpha_resized = cv2.resize(alpha_channel, (w, h), interpolation=cv2.INTER_LINEAR)
+    
+    # Add alpha channel to sleep_img
+    if sleep_img.shape[2] == 3:
+        sleep_img = cv2.cvtColor(sleep_img, cv2.COLOR_BGR2BGRA)
+        
+    sleep_img[:, :, 3] = alpha_resized
+    
+    # Save as sleep_nobg.png
+    cv2.imwrite(r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png", sleep_img)
+    print("SUCCESS: Copied perfect alpha channel from Brain_nobg.png!")
+
+if __name__ == "__main__":
+    main()

scratch/cutout_brain.py

@@ -0,0 +1,66 @@
+import collections
+from PIL import Image
+
+def main():
+    # Load the original sleep brain image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+
+    # The background color is exactly #eaeaea, which in RGB is (234, 234, 234)
+    bg_color = (234, 234, 234, 255)
+
+    # Start with all white mask (opaque)
+    mask = Image.new("L", (width, height), 255)
+    
+    # Simple BFS flood fill to find background pixels
+    visited = set()
+    tolerance = 12
+    tr, tg, tb = bg_color[:3]
+    
+    # We will start flood fill from the borders of the image (all 4 edges)
+    edge_pixels = []
+    for x in range(width):
+        edge_pixels.append((x, 0))
+        edge_pixels.append((x, height - 1))
+    for y in range(height):
+        edge_pixels.append((0, y))
+        edge_pixels.append((width - 1, y))
+        
+    queue = collections.deque(edge_pixels)
+    for p in edge_pixels:
+        visited.add(p)
+        
+    while queue:
+        x, y = queue.popleft()
+        
+        # Get pixel color
+        r, g, b, a = img.getpixel((x, y))
+        
+        # If it is close to target background color, it's outer background
+        if abs(r - tr) <= tolerance and abs(g - tg) <= tolerance and abs(b - tb) <= tolerance:
+            mask.putpixel((x, y), 0) # set to transparent
+            
+            # Neighbors
+            for dx, dy in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nx, ny = x + dx, y + dy
+                if 0 <= nx < width and 0 <= ny < height:
+                    if (nx, ny) not in visited:
+                        visited.add((nx, ny))
+                        queue.append((nx, ny))
+
+    # Apply the mask back to the image
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = img.getpixel((x, y))
+            m_val = mask.getpixel((x, y))
+            if m_val == 0:
+                img.putpixel((x, y), (r, g, b, 0))
+
+    # Save to sleep_nobg.png
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    img.save(output_path, "PNG")
+    print("SUCCESS: Perfect transparent cutout sleep_nobg.png created successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/ellipse_cutout.py

@@ -0,0 +1,48 @@
+import math
+from PIL import Image
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # Perfect ellipse center and radii matching the sleep brain shape
+    cx, cy = 186, 182
+    rx, ry = 160, 134
+    
+    final_img = Image.new("RGBA", (width, height))
+    final_pixels = final_img.load()
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            
+            # Calculate distance to ellipse boundary
+            dx = x - cx
+            dy = y - cy
+            
+            # Elliptical distance ratio
+            dist_ratio = math.sqrt((dx/rx)**2 + (dy/ry)**2)
+            
+            # Smooth step anti-aliasing at the boundary:
+            # If ratio <= 0.96: 100% opaque (brain interior)
+            # If ratio >= 1.00: 100% transparent (background)
+            if dist_ratio <= 0.96:
+                alpha_val = 255
+            elif dist_ratio >= 1.00:
+                alpha_val = 0
+            else:
+                # Smooth interpolation at the edge
+                t = (dist_ratio - 0.96) / 0.04
+                alpha_val = int(round((1.0 - t) * 255))
+                
+            final_pixels[x, y] = (r, g, b, alpha_val)
+            
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    final_img.save(output_path, "PNG")
+    print("SUCCESS: Perfect mathematical elliptical cutout sleep_nobg.png created successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/fill_holes.py

@@ -0,0 +1,56 @@
+import cv2
+import numpy as np
+
+def main():
+    img = cv2.imread(r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png", cv2.IMREAD_UNCHANGED)
+    if img is None:
+        print("Error loading image")
+        return
+
+    if img.shape[2] == 3:
+        img = cv2.cvtColor(img, cv2.COLOR_BGR2BGRA)
+
+    b, g, r = img[:, :, 0], img[:, :, 1], img[:, :, 2]
+    
+    # Target background
+    is_bg = (r >= 190) & (r <= 226) & (g >= 190) & (g <= 226) & (b >= 190) & (b <= 226)
+    
+    max_c = np.maximum(np.maximum(r, g), b)
+    min_c = np.minimum(np.minimum(r, g), b)
+    is_neutral = (max_c - min_c) <= 6
+    
+    bg_mask = is_bg & is_neutral
+    
+    brain_mask = np.zeros_like(r, dtype=np.uint8)
+    brain_mask[~bg_mask] = 255
+    
+    # Close gaps
+    kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (15, 15))
+    closed_mask = cv2.morphologyEx(brain_mask, cv2.MORPH_CLOSE, kernel)
+    
+    contours, _ = cv2.findContours(closed_mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    
+    if not contours:
+        return
+        
+    largest_contour = max(contours, key=cv2.contourArea)
+    
+    silhouette = np.zeros_like(brain_mask)
+    # Draw contour with anti-aliasing
+    cv2.drawContours(silhouette, [largest_contour], -1, 255, thickness=cv2.FILLED, lineType=cv2.LINE_AA)
+    
+    # Erode the silhouette slightly to shave off jaggedness and any remaining grey halo
+    erode_kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (5, 5))
+    silhouette = cv2.erode(silhouette, erode_kernel, iterations=1)
+    
+    # Smooth Gaussian blur to make the edges buttery smooth (feathering)
+    silhouette_smoothed = cv2.GaussianBlur(silhouette, (9, 9), 0)
+    
+    img[:, :, 3] = silhouette_smoothed
+    
+    out_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    cv2.imwrite(out_path, img)
+    print("SUCCESS: Smooth edges applied!")
+
+if __name__ == "__main__":
+    main()

scratch/key_bg.py

@@ -0,0 +1,29 @@
+from PIL import Image
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # We will simply key out the neutral light-grey background color range
+    # Background pixels are neutral grey between 195 and 225
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            
+            # If the pixel is in the neutral background color range, make it transparent
+            is_bg = (195 <= r <= 225) and (abs(r - g) <= 5) and (abs(g - b) <= 5)
+            
+            if is_bg:
+                pixels[x, y] = (r, g, b, 0)
+            else:
+                pixels[x, y] = (r, g, b, 255)
+                
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    img.save(output_path, "PNG")
+    print("SUCCESS: Keyed out background color successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/morph_cutout.py

@@ -0,0 +1,83 @@
+import collections
+from PIL import Image, ImageFilter
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # 1. Create a binary threshold mask: 255 for non-background pixels, 0 for background pixels
+    thresh = Image.new("L", (width, height), 0)
+    thresh_pixels = thresh.load()
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            # Background is neutral light-grey around (200-223)
+            is_bg_color = (200 <= r <= 223) and (abs(r - g) <= 5) and (abs(g - b) <= 5)
+            if not is_bg_color:
+                thresh_pixels[x, y] = 255
+                
+    # 2. Apply Morphological Closing to completely seal any microscopic boundary gaps!
+    # MaxFilter(9) dilates the 255 region by 4 pixels, closing any gaps in the outline.
+    dilated = thresh.filter(ImageFilter.MaxFilter(9))
+    # MinFilter(9) erodes it back by 4 pixels to restore the exact original boundary size.
+    closed = dilated.filter(ImageFilter.MinFilter(9))
+    
+    # 3. Flood fill the outer background on the closed mask starting from all borders.
+    # Since the closed mask has no gaps, the flood fill will stay strictly outside the brain!
+    visited = set()
+    edge_pixels = []
+    for x in range(width):
+        edge_pixels.append((x, 0))
+        edge_pixels.append((x, height - 1))
+    for y in range(height):
+        edge_pixels.append((0, y))
+        edge_pixels.append((width - 1, y))
+        
+    queue = collections.deque(edge_pixels)
+    for p in edge_pixels:
+        visited.add(p)
+        
+    # The final silhouette mask starts as all 255 (brain). Flood filled pixels become 0 (transparent).
+    silhouette = Image.new("L", (width, height), 255)
+    sil_pixels = silhouette.load()
+    closed_pixels = closed.load()
+    
+    while queue:
+        x, y = queue.popleft()
+        
+        # If this pixel in the closed mask is 0 (background), it is outer background
+        if closed_pixels[x, y] == 0:
+            sil_pixels[x, y] = 0
+            
+            # Propagate
+            for dx, dy in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nx, ny = x + dx, y + dy
+                if 0 <= nx < width and 0 <= ny < height:
+                    if (nx, ny) not in visited:
+                        visited.add((nx, ny))
+                        queue.append((nx, ny))
+                        
+    # 4. Smooth the silhouette mask edges with a 1.2px Gaussian Blur for a perfect anti-aliased cut-out.
+    smooth_silhouette = silhouette.filter(ImageFilter.GaussianBlur(1.2))
+    
+    # 5. Apply the perfect silhouette to the alpha channel of the original sleep.png image
+    final_img = Image.new("RGBA", (width, height))
+    final_pixels = final_img.load()
+    smooth_pixels = smooth_silhouette.load()
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            alpha_val = smooth_pixels[x, y]
+            final_pixels[x, y] = (r, g, b, alpha_val)
+            
+    # 6. Save the perfect cutout back to sleep_nobg.png!
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    final_img.save(output_path, "PNG")
+    print("SUCCESS: Perfect morphological cutout created successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/morph_cutout_v2.py

@@ -0,0 +1,83 @@
+import collections
+from PIL import Image, ImageFilter
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # 1. Create a binary threshold mask: 255 for non-background pixels, 0 for background pixels
+    thresh = Image.new("L", (width, height), 0)
+    thresh_pixels = thresh.load()
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            # Background is neutral light-grey around (195-224)
+            is_bg_color = (195 <= r <= 224) and (abs(r - g) <= 5) and (abs(g - b) <= 5)
+            if not is_bg_color:
+                thresh_pixels[x, y] = 255
+                
+    # 2. Apply Morphological Closing + Boundary Erosion
+    # MaxFilter(5) dilates by 2 pixels to close outline gaps
+    dilated = thresh.filter(ImageFilter.MaxFilter(5))
+    # MinFilter(9) erodes by 4 pixels, which shrinks the final silhouette strictly inside the brain border
+    # to completely shave off the fuzzy grey patch and any boundary halo!
+    closed = dilated.filter(ImageFilter.MinFilter(9))
+    
+    # 3. Flood fill the outer background on the closed mask starting from all borders.
+    visited = set()
+    edge_pixels = []
+    for x in range(width):
+        edge_pixels.append((x, 0))
+        edge_pixels.append((x, height - 1))
+    for y in range(height):
+        edge_pixels.append((0, y))
+        edge_pixels.append((width - 1, y))
+        
+    queue = collections.deque(edge_pixels)
+    for p in edge_pixels:
+        visited.add(p)
+        
+    # The final silhouette mask starts as all 255 (brain). Flood filled pixels become 0 (transparent).
+    silhouette = Image.new("L", (width, height), 255)
+    sil_pixels = silhouette.load()
+    closed_pixels = closed.load()
+    
+    while queue:
+        x, y = queue.popleft()
+        
+        # If this pixel in the closed mask is 0 (background), it is outer background
+        if closed_pixels[x, y] == 0:
+            sil_pixels[x, y] = 0
+            
+            # Propagate
+            for dx, dy in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nx, ny = x + dx, y + dy
+                if 0 <= nx < width and 0 <= ny < height:
+                    if (nx, ny) not in visited:
+                        visited.add((nx, ny))
+                        queue.append((nx, ny))
+                        
+    # 4. Smooth the silhouette mask edges with a 1.2px Gaussian Blur for a perfect anti-aliased cut-out.
+    smooth_silhouette = silhouette.filter(ImageFilter.GaussianBlur(1.2))
+    
+    # 5. Apply the perfect silhouette to the alpha channel of the original sleep.png image
+    final_img = Image.new("RGBA", (width, height))
+    final_pixels = final_img.load()
+    smooth_pixels = smooth_silhouette.load()
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            alpha_val = smooth_pixels[x, y]
+            final_pixels[x, y] = (r, g, b, alpha_val)
+            
+    # 6. Save the perfect cutout back to sleep_nobg.png!
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    final_img.save(output_path, "PNG")
+    print("SUCCESS: Tightly eroded morphological cutout created successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/perfect_cutout.py

@@ -0,0 +1,72 @@
+import collections
+from PIL import Image, ImageFilter
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # Target background color
+    bg_color = (234, 234, 234)
+    tr, tg, tb = bg_color
+    tolerance = 15
+    
+    # 1. Create binary mask: 0 for background, 255 for brain
+    mask = Image.new("L", (width, height), 255)
+    mask_pixels = mask.load()
+    
+    visited = set()
+    edge_pixels = []
+    for x in range(width):
+        edge_pixels.append((x, 0))
+        edge_pixels.append((x, height - 1))
+    for y in range(height):
+        edge_pixels.append((0, y))
+        edge_pixels.append((width - 1, y))
+        
+    queue = collections.deque(edge_pixels)
+    for p in edge_pixels:
+        visited.add(p)
+        
+    while queue:
+        x, y = queue.popleft()
+        r, g, b, a = pixels[x, y]
+        
+        if abs(r - tr) <= tolerance and abs(g - tg) <= tolerance and abs(b - tb) <= tolerance:
+            mask_pixels[x, y] = 0
+            
+            for dx, dy in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nx, ny = x + dx, y + dy
+                if 0 <= nx < width and 0 <= ny < height:
+                    if (nx, ny) not in visited:
+                        visited.add((nx, ny))
+                        queue.append((nx, ny))
+                        
+    # 2. Erode the mask by 1 pixel to completely remove the thin grey boundary halo.
+    # MinFilter(3) replaces each pixel with the minimum in its 3x3 neighborhood.
+    # Since background is 0 and brain is 255, this expands the 0 (transparent) area by 1 pixel.
+    eroded_mask = mask.filter(ImageFilter.MinFilter(3))
+    
+    # 3. Apply a smooth Gaussian Blur of 1.2 pixels to make the cut-out edges beautifully smooth and anti-aliased.
+    smooth_mask = eroded_mask.filter(ImageFilter.GaussianBlur(1.2))
+    
+    # 4. Write the smoothed mask into the alpha channel of our original image
+    final_img = Image.new("RGBA", (width, height))
+    final_pixels = final_img.load()
+    smooth_pixels = smooth_mask.load()
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            alpha_val = smooth_pixels[x, y]
+            final_pixels[x, y] = (r, g, b, alpha_val)
+            
+    # 5. Save the perfect cutout
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    final_img.save(output_path, "PNG")
+    print("SUCCESS: Perfect glassy transparent cutout sleep_nobg.png created successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/perfect_cutout_v2.py

@@ -0,0 +1,71 @@
+import collections
+from PIL import Image, ImageFilter
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # 1. Create binary mask: 0 for background, 255 for brain
+    mask = Image.new("L", (width, height), 255)
+    mask_pixels = mask.load()
+    
+    # We will perform BFS starting from all 4 borders of the image
+    visited = set()
+    edge_pixels = []
+    for x in range(width):
+        edge_pixels.append((x, 0))
+        edge_pixels.append((x, height - 1))
+    for y in range(height):
+        edge_pixels.append((0, y))
+        edge_pixels.append((width - 1, y))
+        
+    queue = collections.deque(edge_pixels)
+    for p in edge_pixels:
+        visited.add(p)
+        
+    while queue:
+        x, y = queue.popleft()
+        r, g, b, a = pixels[x, y]
+        
+        # Check if the pixel color matches the neutral light-grey background gradient:
+        # Background is between 200 and 225, and neutral (R, G, B are very close)
+        is_bg = (200 <= r <= 223) and (abs(r - g) <= 5) and (abs(g - b) <= 5)
+        
+        if is_bg:
+            mask_pixels[x, y] = 0 # set to transparent
+            
+            # Check neighbors
+            for dx, dy in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nx, ny = x + dx, y + dy
+                if 0 <= nx < width and 0 <= ny < height:
+                    if (nx, ny) not in visited:
+                        visited.add((nx, ny))
+                        queue.append((nx, ny))
+                        
+    # 2. Erode the mask by 1 pixel to remove the thin grey boundary outline
+    eroded_mask = mask.filter(ImageFilter.MinFilter(3))
+    
+    # 3. Apply a smooth Gaussian Blur of 1.2 pixels to anti-alias the cut-out edge
+    smooth_mask = eroded_mask.filter(ImageFilter.GaussianBlur(1.2))
+    
+    # 4. Write the smoothed mask into the alpha channel of our original image
+    final_img = Image.new("RGBA", (width, height))
+    final_pixels = final_img.load()
+    smooth_pixels = smooth_mask.load()
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            alpha_val = smooth_pixels[x, y]
+            final_pixels[x, y] = (r, g, b, alpha_val)
+            
+    # 5. Save the perfect cutout
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    final_img.save(output_path, "PNG")
+    print("SUCCESS: Perfect glassy transparent cutout sleep_nobg.png created successfully!")
+
+if __name__ == "__main__":
+    main()

scratch/perfect_cutout_v3.py

@@ -0,0 +1,87 @@
+import collections
+import math
+from PIL import Image, ImageFilter
+
+def main():
+    # Load original sleep image
+    img_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep.png"
+    img = Image.open(img_path).convert("RGBA")
+    width, height = img.size
+    pixels = img.load()
+    
+    # 1. Create binary mask: 0 for background, 255 for brain
+    mask = Image.new("L", (width, height), 255)
+    mask_pixels = mask.load()
+    
+    # Center of the 380x380 image
+    cx, cy = 190, 190
+    
+    # BFS queue
+    visited = set()
+    edge_pixels = []
+    for x in range(width):
+        edge_pixels.append((x, 0))
+        edge_pixels.append((x, height - 1))
+    for y in range(height):
+        edge_pixels.append((0, y))
+        edge_pixels.append((width - 1, y))
+        
+    queue = collections.deque(edge_pixels)
+    for p in edge_pixels:
+        visited.add(p)
+        
+    while queue:
+        x, y = queue.popleft()
+        r, g, b, a = pixels[x, y]
+        
+        # Calculate horizontal ellipse distance to protect the brain interior from leaks
+        # Brain center is 190, 190. Vertical radius is smaller than horizontal radius.
+        dx = x - cx
+        dy = y - cy
+        
+        # Scale dy to account for horizontal elliptical shape of the brain
+        ellipse_dist = math.sqrt(dx*dx + (dy * 1.25)*(dy * 1.25))
+        
+        # Absolute protection boundary: if we are deep inside the brain area (ellipse_dist <= 145),
+        # do not allow BFS to propagate here, preventing any leaks into the brain folds!
+        if ellipse_dist <= 145:
+            continue
+            
+        # Background criteria: R, G, B are neutral light grey background
+        is_bg = (195 <= r <= 224) and (abs(r - g) <= 6) and (abs(g - b) <= 6)
+        
+        if is_bg:
+            mask_pixels[x, y] = 0 # set to transparent
+            
+            # Neighbors
+            for dx_n, dy_n in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nx, ny = x + dx_n, y + dy_n
+                if 0 <= nx < width and 0 <= ny < height:
+                    if (nx, ny) not in visited:
+                        visited.add((nx, ny))
+                        queue.append((nx, ny))
+                        
+    # 2. Erode the mask by 1 pixel to remove the thin grey boundary outline
+    eroded_mask = mask.filter(ImageFilter.MinFilter(3))
+    
+    # 3. Apply a smooth Gaussian Blur of 1.2 pixels to anti-alias the cut-out edge
+    smooth_mask = eroded_mask.filter(ImageFilter.GaussianBlur(1.2))
+    
+    # 4. Write the smoothed mask into the alpha channel of our original image
+    final_img = Image.new("RGBA", (width, height))
+    final_pixels = final_img.load()
+    smooth_pixels = smooth_mask.load()
+    
+    for y in range(height):
+        for x in range(width):
+            r, g, b, a = pixels[x, y]
+            alpha_val = smooth_pixels[x, y]
+            final_pixels[x, y] = (r, g, b, alpha_val)
+            
+    # 5. Save the perfect cutout
+    output_path = r"d:\PROJECTS\Soma\frontend\src\assets\brain\sleep_nobg.png"
+    final_img.save(output_path, "PNG")
+    print("SUCCESS: Leak-free transparent cutout sleep_nobg.png created successfully!")
+
+if __name__ == "__main__":
+    main()