feat: Janus v0.4.0 - living intelligence system

- Add smart LLM router (Groq → OpenRouter → Ollama) with rate limit tracking
- Add context engine for conversation memory and system self-knowledge
- Add reflex layer for instant contextual responses (greetings, identity, status)
- Add custom web crawler (DuckDuckGo + Jina Reader) replacing Tavily
- Wire context into synthesizer for natural, contextual responses
- Add pending thoughts generation from daemon discoveries
- Add /context and /pending-thoughts API endpoints
- Add Dockerfile for HF Spaces deployment
- Update frontend to connect to HF Space backend
- Fix HF Inference API deprecation (migrated to OpenRouter/Groq)

backend/.dockerignore

@@ -0,0 +1,15 @@
+__pycache__/
+*.pyc
+*.pyo
+.env
+*.egg-info/
+dist/
+build/
+.venv/
+venv/
+data/
+*.json
+.DS_Store
+node_modules/
+frontend/
+.git/

backend/.env.example

@@ -1,16 +1,32 @@
 # ========================================
-# MiroOrg v2 - AI Financial Intelligence System
+# Janus - AI Intelligence System
 # Environment Configuration Template
 # ========================================
 # Copy this file to .env and fill in your actual values.
 # NEVER commit .env to version control.
 
 # ---------- Application Version ----------
-APP_VERSION=0.3.0
+APP_VERSION=0.4.0
 
 # ---------- Primary model routing ----------
-PRIMARY_PROVIDER=openrouter
-FALLBACK_PROVIDER=ollama
+# PRIMARY_PROVIDER: The main LLM provider (huggingface, openrouter, ollama, or openai)
+# FALLBACK_PROVIDER: The backup provider if primary fails
+PRIMARY_PROVIDER=huggingface
+FALLBACK_PROVIDER=openrouter
+
+# ---------- HuggingFace Inference API ----------
+# Get your API key from: https://huggingface.co/settings/tokens
+# Required permissions: "Make calls to Inference Providers"
+HUGGINGFACE_API_KEY=hf_...
+HUGGINGFACE_MODEL=Qwen/Qwen2.5-7B-Instruct
+
+# ---------- Smart LLM Router ----------
+# Priority: Gemini → Groq → OpenRouter → Cloudflare → Ollama
+# Get keys from respective providers (all free tiers available)
+GEMINI_API_KEY=AIza...          # https://aistudio.google.com/apikey (1500 req/day free)
+GROQ_API_KEY=gsk_...            # https://console.groq.com/keys (fast, 14400 req/day free)
+CLOUDFLARE_ACCOUNT_ID=...       # https://dash.cloudflare.com (10k req/day free)
+CLOUDFLARE_API_TOKEN=...
 
 # ---------- OpenRouter ----------
 # Get your API key from: https://openrouter.ai/keys
@@ -19,7 +35,7 @@ OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
 OPENROUTER_CHAT_MODEL=openrouter/free
 OPENROUTER_REASONER_MODEL=openrouter/free
 OPENROUTER_SITE_URL=http://localhost:3000
-OPENROUTER_APP_NAME=MiroOrg Basic
+OPENROUTER_APP_NAME=Janus
 
 # ---------- Ollama ----------
 # Install from: https://ollama.ai
@@ -36,7 +52,7 @@ OPENAI_CHAT_MODEL=gpt-4o-mini
 OPENAI_REASONER_MODEL=gpt-4o
 
 # ---------- External research APIs ----------
-# Tavily: https://tavily.com
+# Tavily: https://tavily.com (optional — crawler is primary)
 TAVILY_API_KEY=tvly-dev-YOUR_KEY_HERE
 # NewsAPI: https://newsapi.org
 NEWSAPI_KEY=YOUR_KEY_HERE
@@ -45,6 +61,11 @@ ALPHAVANTAGE_API_KEY=YOUR_KEY_HERE
 # Jina Reader: https://jina.ai
 JINA_READER_BASE=https://r.jina.ai/http://
 
+# ---------- Custom Crawler ----------
+# Self-hosted web crawling — no API keys needed
+CRAWLER_ENABLED=true
+CRAWLER_TIMEOUT=30
+
 # ---------- MiroFish ----------
 # MiroFish is the simulation service (deprecated — using native engine)
 MIROFISH_ENABLED=false

backend/Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+RUN playwright install --with-deps chromium 2>/dev/null || true
+
+COPY . .
+
+RUN mkdir -p /app/app/data/context /app/app/data/daemon /app/app/data/adaptive /app/app/data/knowledge /app/app/data/memory /app/app/data/simulations
+
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]

backend/app/agents/_model.py

@@ -1,10 +1,11 @@
 """
-Unified model client for MiroOrg v2.
-Priority: OpenRouter free → Ollama fallback → raise with diagnostics.
+Unified model client for Janus.
+Uses smart router: Gemini → Groq → OpenRouter → Cloudflare → Ollama.
 All tiers use the OpenAI-compatible messages format.
+Includes retry-with-backoff for 429 rate limits.
 """
 
-import os, json, re, logging
+import os, json, re, logging, time
 import httpx
 from typing import Any
 
@@ -12,18 +13,26 @@ logger = logging.getLogger(__name__)
 
 OPENROUTER_BASE = "https://openrouter.ai/api/v1"
 
-# Pinned free models in preference order — fast + reliable
 FREE_MODEL_LADDER = [
-    "qwen/qwen3.6-plus:free",  # Best free model, reliable, fast
-    "nvidia/nemotron-3-super-120b-a12b:free",  # Large NVIDIA model
-    "minimax/minimax-m2.5:free",  # MiniMax strong reasoning
-    "stepfun/step-3.5-flash:free",  # StepFun fast inference
-    "arcee-ai/trinity-mini:free",  # Lightweight fallback
+    "qwen/qwen3.6-plus:free",
+    "nvidia/nemotron-3-super-120b-a12b:free",
+    "minimax/minimax-m2.5:free",
+    "stepfun/step-3.5-flash:free",
+    "arcee-ai/trinity-mini:free",
 ]
 
 OLLAMA_BASE = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434")
 TIMEOUT = 90
-OLLAMA_TIMEOUT = 30  # Ollama is local, should be fast
+OLLAMA_TIMEOUT = 30
+MAX_RETRIES_PER_MODEL = 2
+BASE_BACKOFF = 3
+
+
+def _huggingface_call(messages: list[dict], **kwargs) -> str:
+    """Call HuggingFace Inference API."""
+    from app.agents.huggingface import hf_client
+
+    return hf_client.chat(messages, **kwargs)
 
 
 def _openrouter_call(messages: list[dict], model: str, **kwargs) -> str:
@@ -34,8 +43,8 @@ def _openrouter_call(messages: list[dict], model: str, **kwargs) -> str:
 
     headers = {
         "Authorization": f"Bearer {api_key}",
-        "HTTP-Referer": "https://miroorg.local",
-        "X-Title": "MiroOrg v2",
+        "HTTP-Referer": "https://huggingface.co",
+        "X-Title": "Janus",
         "Content-Type": "application/json",
     }
     body = {"model": model, "messages": messages, "max_tokens": 4096, **kwargs}
@@ -64,32 +73,70 @@ def _ollama_call(messages: list[dict], **kwargs) -> str:
     return r.json()["choices"][0]["message"]["content"]
 
 
-def call_model(messages: list[dict], **kwargs) -> str:
+def _call_with_retry(messages: list[dict], model: str, **kwargs) -> str:
     """
-    Try OpenRouter free models in ladder order, then Ollama.
-    Returns raw text. Never returns None — raises RuntimeError with full diagnostics
-    so the caller can write a structured error dict instead of silently propagating None.
+    Call OpenRouter with retry-on-429 backoff.
+    Retries up to MAX_RETRIES_PER_MODEL times for rate limits,
+    respecting the Retry-After header when present.
     """
-    errors = []
-    for model in FREE_MODEL_LADDER:
+    for attempt in range(MAX_RETRIES_PER_MODEL + 1):
         try:
-            result = _openrouter_call(messages, model, **kwargs)
-            logger.info(f"Model call succeeded: {model}")
-            return result
-        except Exception as e:
-            errors.append(f"OpenRouter [{model}]: {e}")
-            logger.warning(f"OpenRouter [{model}] failed: {e}")
-
-    # Ollama fallback
+            return _openrouter_call(messages, model, **kwargs)
+        except httpx.HTTPStatusError as e:
+            if e.response.status_code == 429:
+                if attempt >= MAX_RETRIES_PER_MODEL:
+                    raise  # Out of retries for this model
+
+                # Respect Retry-After header, otherwise use exponential backoff
+                retry_after = e.response.headers.get("retry-after")
+                if retry_after:
+                    try:
+                        wait = min(float(retry_after), 30)  # Cap at 30s
+                    except ValueError:
+                        wait = BASE_BACKOFF * (2**attempt)
+                else:
+                    wait = BASE_BACKOFF * (2**attempt)
+
+                logger.warning(
+                    f"Rate limited on {model} (attempt {attempt + 1}/{MAX_RETRIES_PER_MODEL + 1}), "
+                    f"waiting {wait:.1f}s..."
+                )
+                time.sleep(wait)
+            else:
+                raise  # Non-429 error, don't retry
+    # Should not reach here, but just in case
+    return _openrouter_call(messages, model, **kwargs)
+
+
+def call_model(messages: list[dict], **kwargs) -> str:
+    """
+    Smart router: Gemini → Groq → OpenRouter → Cloudflare → Ollama.
+    Uses unified router with rate limit tracking and automatic failover.
+    Returns raw text. Never returns None.
+    """
     try:
-        result = _ollama_call(messages, **kwargs)
-        logger.info(f"Ollama fallback succeeded")
-        return result
+        from app.agents.smart_router import call_model as smart_call
+
+        return smart_call(messages, **kwargs)
     except Exception as e:
-        errors.append(f"Ollama: {e}")
-        logger.error(f"Ollama fallback failed: {e}")
+        logger.error(f"Smart router failed: {e}")
+        # Direct OpenRouter fallback if smart router fails
+        errors = []
+        for model in FREE_MODEL_LADDER:
+            try:
+                result = _call_with_retry(messages, model, **kwargs)
+                logger.info(f"OpenRouter direct succeeded: {model}")
+                return result
+            except Exception as e2:
+                errors.append(f"OpenRouter [{model}]: {e2}")
+
+        # Ollama last resort
+        try:
+            return _ollama_call(messages, **kwargs)
+        except Exception as e3:
+            errors.append(f"Ollama: {e3}")
 
-    raise RuntimeError("All model tiers failed:\n" + "\n".join(errors))
+        raise RuntimeError("All model tiers failed:\n" + "\n".join(errors))
 
 
 def safe_parse(text: str) -> dict:

backend/app/agents/huggingface.py

@@ -0,0 +1,107 @@
+"""
+HuggingFace Inference API Client for Janus.
+
+NOTE: HF deprecated api-inference.huggingface.co in favor of router.huggingface.co.
+The new router requires provider-specific endpoints. This client tries multiple providers.
+Fallback to OpenRouter is recommended for reliability.
+"""
+
+import json
+import time
+import logging
+from typing import Dict, List, Any, Optional
+
+import httpx
+
+from app.config import HUGGINGFACE_API_KEY, HUGGINGFACE_MODEL
+
+logger = logging.getLogger(__name__)
+
+MAX_RETRIES = 2
+BACKOFF_BASE = 1
+PROVIDER_TIMEOUT = 15
+
+PROVIDER_ROUTES = [
+    f"https://router.huggingface.co/nebius/v1/chat/completions",
+    f"https://router.huggingface.co/together/v1/chat/completions",
+    f"https://router.huggingface.co/sambanova/v1/chat/completions",
+]
+
+
+class HuggingFaceInferenceClient:
+    """HuggingFace Inference API client — tries multiple providers."""
+
+    def __init__(self, model: str = HUGGINGFACE_MODEL):
+        self.model = model
+        self.headers = {
+            "Authorization": f"Bearer {HUGGINGFACE_API_KEY}",
+            "Content-Type": "application/json",
+        }
+
+    def chat(self, messages: List[Dict[str, str]], **kwargs) -> str:
+        payload = {
+            "model": self.model,
+            "messages": messages,
+            "temperature": kwargs.get("temperature", 0.7),
+            "max_tokens": kwargs.get("max_tokens", 4096),
+        }
+
+        for route in PROVIDER_ROUTES:
+            try:
+                with httpx.Client(timeout=PROVIDER_TIMEOUT) as client:
+                    response = client.post(
+                        route,
+                        headers=self.headers,
+                        json=payload,
+                    )
+
+                    if response.status_code == 200:
+                        data = response.json()
+                        choices = data.get("choices", [])
+                        if choices:
+                            return choices[0].get("message", {}).get("content", "")
+                        return data.get("generated_text", "")
+
+                    elif response.status_code == 429:
+                        time.sleep(BACKOFF_BASE)
+                        continue
+
+                    elif response.status_code in (400, 403, 404):
+                        logger.debug(
+                            f"[HF] Provider {route.split('/')[3]} unavailable ({response.status_code})"
+                        )
+                        break
+
+                    else:
+                        logger.warning(f"[HF] Error {response.status_code} on {route}")
+                        break
+
+            except httpx.TimeoutException:
+                logger.debug(f"[HF] Timeout on {route}")
+                continue
+            except Exception as e:
+                logger.debug(f"[HF] Error on {route}: {e}")
+                break
+
+        raise RuntimeError("All HF providers exhausted")
+
+    def reason(self, messages: List[Dict[str, str]], **kwargs) -> str:
+        return self.chat(
+            messages,
+            temperature=kwargs.get("temperature", 0.9),
+            max_tokens=kwargs.get("max_tokens", 8192),
+        )
+
+    def is_available(self) -> bool:
+        try:
+            with httpx.Client(timeout=10) as client:
+                r = client.get(
+                    "https://router.huggingface.co/hf-inference/v1/models",
+                    headers=self.headers,
+                )
+                return r.status_code < 500
+        except Exception:
+            return False
+
+
+hf_client = HuggingFaceInferenceClient()

backend/app/agents/research.py

@@ -1,6 +1,6 @@
 """
-Research agent — MiroOrg v2.
-Uses Tavily web search, News API, Knowledge Store, and API Discovery
+Research agent — Janus.
+Uses lightweight HTTP crawler (no Playwright needed), Knowledge Store, and API Discovery
 to gather context before calling the LLM for structured analysis.
 """
 
@@ -8,24 +8,23 @@ import os, json, re, logging
 import httpx
 from app.agents._model import call_model
 from app.agents.api_discovery import discover_apis, call_discovered_api
-from app.config import load_prompt
+from app.config import load_prompt, CRAWLER_ENABLED
 from app.memory import knowledge_store
 
 logger = logging.getLogger(__name__)
 
 TAVILY_API_KEY = os.getenv("TAVILY_API_KEY", "")
 NEWS_API_KEY = os.getenv("NEWS_API_KEY", os.getenv("NEWSAPI_KEY", ""))
+JINA_READER_BASE = os.getenv("JINA_READER_BASE", "https://r.jina.ai/")
 
 
 def _extract_json(text: str) -> dict | None:
     """Robustly extract JSON from model response."""
-    # Try direct parse
     try:
         return json.loads(text)
     except json.JSONDecodeError:
         pass
 
-    # Strip markdown code fences
     cleaned = re.sub(r"```(?:json)?\s*\n?", "", text).strip()
     cleaned = re.sub(r"\n?```\s*$", "", cleaned).strip()
     try:
@@ -33,7 +32,6 @@ def _extract_json(text: str) -> dict | None:
     except json.JSONDecodeError:
         pass
 
-    # Find JSON object in text
     start = text.find("{")
     end = text.rfind("}")
     if start != -1 and end != -1 and end > start:
@@ -46,7 +44,90 @@ def _extract_json(text: str) -> dict | None:
     return None
 
 
-# ─── Tool: Tavily Web Search ─────────────────────────────────────────────────
+def _duckduckgo_urls(query: str, max_results: int = 5) -> list[str]:
+    """Get URLs from DuckDuckGo HTML search (no API key)."""
+    urls = []
+    try:
+        search_url = f"https://html.duckduckgo.com/html/?q={httpx.quote(query)}"
+        with httpx.Client(timeout=15) as client:
+            headers = {
+                "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36"
+            }
+            resp = client.get(search_url, headers=headers, follow_redirects=True)
+            if resp.status_code == 200:
+                pattern = re.compile(r'class="result__a"[^>]*href="([^"]+)"')
+                for match in pattern.finditer(resp.text):
+                    url = match.group(1)
+                    if url and url.startswith("http") and url not in urls:
+                        urls.append(url)
+                        if len(urls) >= max_results:
+                            break
+    except Exception as e:
+        logger.warning(f"DuckDuckGo search failed: {e}")
+    return urls
+
+
+def _extract_content(url: str) -> str | None:
+    """Extract clean content from a URL using Jina Reader (free, no key needed)."""
+    try:
+        jina_url = f"{JINA_READER_BASE}{url}"
+        with httpx.Client(timeout=12) as client:
+            r = client.get(jina_url, follow_redirects=True)
+            if r.status_code == 200 and len(r.text) > 100:
+                return r.text[:5000]
+    except Exception:
+        pass
+
+    try:
+        with httpx.Client(timeout=10) as client:
+            headers = {"User-Agent": "Mozilla/5.0 (compatible; Janus/1.0)"}
+            r = client.get(url, headers=headers, follow_redirects=True, timeout=10)
+            if r.status_code == 200:
+                text = re.sub(r"<script[^>]*>.*?</script>", "", r.text, flags=re.DOTALL)
+                text = re.sub(r"<style[^>]*>.*?</style>", "", text, flags=re.DOTALL)
+                text = re.sub(r"<[^>]+>", " ", text)
+                text = re.sub(r"\s+", " ", text).strip()
+                return text[:5000] if len(text) > 100 else None
+    except Exception:
+        pass
+
+    return None
+
+
+def crawl_web_search(query: str, max_results: int = 3) -> list[dict]:
+    """
+    Self-hosted web research: DuckDuckGo for URLs → Jina Reader for content.
+    Optimized for speed: 3 results, parallel fetch, short timeouts.
+    """
+    if not CRAWLER_ENABLED:
+        return []
+
+    urls = _duckduckgo_urls(query, max_results)
+    if not urls:
+        return []
+
+    results = []
+    # Fetch in parallel with ThreadPoolExecutor
+    import concurrent.futures
+
+    def _fetch_one(url):
+        content = _extract_content(url)
+        if content:
+            title = content.split("\n")[0][:200] if "\n" in content else url
+            return {"title": title, "url": url, "content": content[:2000]}
+        return None
+
+    with concurrent.futures.ThreadPoolExecutor(max_workers=3) as executor:
+        futures = {executor.submit(_fetch_one, url): url for url in urls[:max_results]}
+        for future in concurrent.futures.as_completed(futures, timeout=25):
+            try:
+                result = future.result()
+                if result:
+                    results.append(result)
+            except Exception:
+                pass
+
+    return results
 
 
 def tavily_search(query: str, max_results: int = 5) -> list[dict]:
@@ -72,9 +153,6 @@ def tavily_search(query: str, max_results: int = 5) -> list[dict]:
         return []
 
 
-# ─── Tool: News API ──────────────────────────────────────────────────────────
-
-
 def news_search(query: str, max_articles: int = 5) -> list[dict]:
     """Returns list of {title, source, publishedAt, description} dicts."""
     if not NEWS_API_KEY:
@@ -106,9 +184,6 @@ def news_search(query: str, max_articles: int = 5) -> list[dict]:
         return []
 
 
-# ─── Research Node ────────────────────────────────────────────────────────────
-
-
 def run(state: dict) -> dict:
     route = state.get("route", {})
     intent = route.get("intent", state.get("user_input", ""))
@@ -116,14 +191,22 @@ def run(state: dict) -> dict:
 
     context_blocks = []
 
-    # Step 1: Tavily web search
-    web_results = tavily_search(intent)
-    if web_results:
+    # Step 1: Self-hosted crawler (DuckDuckGo + Jina Reader)
+    crawl_results = crawl_web_search(intent)
+    if crawl_results:
         formatted = "\n".join(
-            f"- {r.get('title', 'Untitled')}\n  URL: {r.get('url', '')}\n  {r.get('content', '')[:300]}"
-            for r in web_results
+            f"- {r.get('title', 'Untitled')}\n  URL: {r.get('url', '')}\n  {r.get('content', '')[:500]}"
+            for r in crawl_results
         )
-        context_blocks.append(f"[Web Search Results]\n{formatted}")
+        context_blocks.append(f"[Web Crawl Results]\n{formatted}")
+    elif TAVILY_API_KEY:
+        web_results = tavily_search(intent)
+        if web_results:
+            formatted = "\n".join(
+                f"- {r.get('title', 'Untitled')}\n  URL: {r.get('url', '')}\n  {r.get('content', '')[:300]}"
+                for r in web_results
+            )
+            context_blocks.append(f"[Web Search Results]\n{formatted}")
 
     # Step 2: News API (if requires_news or finance domain)
     if route.get("requires_news") or domain == "finance":
@@ -201,7 +284,6 @@ def run(state: dict) -> dict:
     if raw_response:
         result = _extract_json(raw_response)
         if result is None:
-            # Last resort: use raw text as summary
             logger.warning(
                 f"[AGENT PARSE FALLBACK] research: using raw text as summary"
             )

backend/app/agents/smart_router.py

@@ -0,0 +1,336 @@
+"""
+Smart LLM Router for Janus.
+
+Unified router across multiple free providers with rate limit tracking,
+automatic failover, and daily quota management.
+
+Provider priority:
+1. Google Gemini 2.0 Flash (best free quality, 1500 req/day)
+2. Groq (fastest, Llama 3.3 70B, 14400 req/day)
+3. OpenRouter (free models, effectively unlimited)
+4. Cloudflare Workers AI (10k req/day)
+5. Ollama (local, unlimited)
+"""
+
+import os
+import time
+import json
+import logging
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Dict, List, Any, Optional
+
+import httpx
+
+logger = logging.getLogger(__name__)
+
+# ─── Rate Limit State ────────────────────────────────────────────────────────
+
+STATE_DIR = Path(__file__).parent.parent.parent / "data" / "router_state"
+STATE_DIR.mkdir(parents=True, exist_ok=True)
+STATE_FILE = STATE_DIR / "provider_state.json"
+
+
+def _midnight_ts() -> int:
+    now = datetime.now(timezone.utc)
+    tomorrow = now.replace(hour=0, minute=0, second=0, microsecond=0)
+    from datetime import timedelta
+
+    tomorrow = tomorrow + timedelta(days=1)
+    return int(tomorrow.timestamp())
+
+
+def _load_state() -> dict:
+    if STATE_FILE.exists():
+        try:
+            with open(STATE_FILE) as f:
+                return json.load(f)
+        except Exception:
+            pass
+    return {}
+
+
+def _save_state(state: dict):
+    try:
+        with open(STATE_FILE, "w") as f:
+            json.dump(state, f, indent=2)
+    except Exception:
+        pass
+
+
+def _is_available(provider: str, daily_limit: int, rpm_limit: int, state: dict) -> bool:
+    now = time.time()
+    p = state.get(
+        provider, {"daily_count": 0, "rpm_timestamps": [], "reset_at": _midnight_ts()}
+    )
+
+    if now > p.get("reset_at", 0):
+        p["daily_count"] = 0
+        p["rpm_timestamps"] = []
+        p["reset_at"] = _midnight_ts()
+
+    if p["daily_count"] >= daily_limit:
+        return False
+
+    p["rpm_timestamps"] = [t for t in p["rpm_timestamps"] if now - t < 60]
+    if len(p["rpm_timestamps"]) >= rpm_limit:
+        return False
+
+    state[provider] = p
+    return True
+
+
+def _record_usage(provider: str, state: dict):
+    now = time.time()
+    p = state.get(
+        provider, {"daily_count": 0, "rpm_timestamps": [], "reset_at": _midnight_ts()}
+    )
+    p["daily_count"] = p.get("daily_count", 0) + 1
+    p["rpm_timestamps"] = p.get("rpm_timestamps", []) + [now]
+    state[provider] = p
+    _save_state(state)
+
+
+# ─── Provider Implementations ────────────────────────────────────────────────
+
+GEMINI_KEY = os.getenv("GEMINI_API_KEY", "")
+GROQ_KEY = os.getenv("GROQ_API_KEY", "")
+OPENROUTER_KEY = os.getenv("OPENROUTER_API_KEY", "")
+CF_ACCOUNT_ID = os.getenv("CLOUDFLARE_ACCOUNT_ID", "")
+CF_TOKEN = os.getenv("CLOUDFLARE_API_TOKEN", "")
+
+TIMEOUT = 90
+
+
+def _call_gemini(messages: List[Dict[str, str]], **kwargs) -> str:
+    """Google Gemini 2.0 Flash — best free quality."""
+    if not GEMINI_KEY:
+        raise ValueError("GEMINI_API_KEY not set")
+
+    system_msg = ""
+    user_messages = []
+    for m in messages:
+        if m["role"] == "system":
+            system_msg = m["content"]
+        else:
+            user_messages.append(m)
+
+    body = {
+        "system_instruction": {"parts": [{"text": system_msg}]},
+        "contents": [
+            {
+                "role": "model" if m["role"] == "assistant" else "user",
+                "parts": [{"text": m["content"]}],
+            }
+            for m in user_messages
+        ],
+        "generationConfig": {
+            "temperature": kwargs.get("temperature", 0.7),
+            "maxOutputTokens": kwargs.get("max_tokens", 4096),
+        },
+    }
+
+    with httpx.Client(timeout=TIMEOUT) as client:
+        r = client.post(
+            f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key={GEMINI_KEY}",
+            json=body,
+        )
+        r.raise_for_status()
+        data = r.json()
+        return data["candidates"][0]["content"]["parts"][0]["text"]
+
+
+def _call_groq(messages: List[Dict[str, str]], **kwargs) -> str:
+    """Groq — fastest inference, Llama 3.3 70B."""
+    if not GROQ_KEY:
+        raise ValueError("GROQ_API_KEY not set")
+
+    body = {
+        "model": "llama-3.3-70b-versatile",
+        "messages": messages,
+        "temperature": kwargs.get("temperature", 0.7),
+        "max_tokens": kwargs.get("max_tokens", 4096),
+    }
+
+    with httpx.Client(timeout=TIMEOUT) as client:
+        r = client.post(
+            "https://api.groq.com/openai/v1/chat/completions",
+            headers={
+                "Authorization": f"Bearer {GROQ_KEY}",
+                "Content-Type": "application/json",
+            },
+            json=body,
+        )
+        r.raise_for_status()
+        return r.json()["choices"][0]["message"]["content"]
+
+
+def _call_openrouter(messages: List[Dict[str, str]], **kwargs) -> str:
+    """OpenRouter — free model ladder."""
+    if not OPENROUTER_KEY:
+        raise ValueError("OPENROUTER_API_KEY not set")
+
+    free_models = [
+        "qwen/qwen3.6-plus:free",
+        "nvidia/nemotron-3-super-120b-a12b:free",
+        "minimax/minimax-m2.5:free",
+    ]
+
+    errors = []
+    for model in free_models:
+        try:
+            body = {
+                "model": model,
+                "messages": messages,
+                "max_tokens": kwargs.get("max_tokens", 4096),
+            }
+            with httpx.Client(timeout=TIMEOUT) as client:
+                r = client.post(
+                    "https://openrouter.ai/api/v1/chat/completions",
+                    headers={
+                        "Authorization": f"Bearer {OPENROUTER_KEY}",
+                        "HTTP-Referer": "https://huggingface.co",
+                        "X-Title": "Janus",
+                        "Content-Type": "application/json",
+                    },
+                    json=body,
+                )
+                r.raise_for_status()
+                return r.json()["choices"][0]["message"]["content"]
+        except Exception as e:
+            errors.append(f"{model}: {e}")
+
+    raise RuntimeError(f"All OpenRouter models failed: {'; '.join(errors)}")
+
+
+def _call_cloudflare(messages: List[Dict[str, str]], **kwargs) -> str:
+    """Cloudflare Workers AI — 10k req/day free."""
+    if not CF_ACCOUNT_ID or not CF_TOKEN:
+        raise ValueError("CLOUDFLARE_ACCOUNT_ID or CLOUDFLARE_API_TOKEN not set")
+
+    body = {
+        "messages": messages,
+        "max_tokens": kwargs.get("max_tokens", 4096),
+    }
+
+    with httpx.Client(timeout=TIMEOUT) as client:
+        r = client.post(
+            f"https://api.cloudflare.com/client/v4/accounts/{CF_ACCOUNT_ID}/ai/run/@cf/meta/llama-3.3-70b-instruct-fp8-fast",
+            headers={
+                "Authorization": f"Bearer {CF_TOKEN}",
+                "Content-Type": "application/json",
+            },
+            json=body,
+        )
+        r.raise_for_status()
+        data = r.json()
+        return data["result"]["response"]
+
+
+def _call_ollama(messages: List[Dict[str, str]], **kwargs) -> str:
+    """Ollama — local, unlimited fallback."""
+    base = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434")
+    if base.endswith("/api"):
+        base = base[:-4]
+
+    model = os.getenv("OLLAMA_CHAT_MODEL", "qwen2.5:3b")
+    body = {
+        "model": model,
+        "messages": messages,
+        "stream": False,
+    }
+
+    with httpx.Client(timeout=60) as client:
+        r = client.post(f"{base}/v1/chat/completions", json=body)
+        r.raise_for_status()
+        return r.json()["choices"][0]["message"]["content"]
+
+
+# ─── Provider Registry ───────────────────────────────────────────────────────
+
+PROVIDERS = [
+    {
+        "name": "groq",
+        "daily_limit": 14400,
+        "rpm_limit": 1000,
+        "call": _call_groq,
+        "enabled": bool(GROQ_KEY),
+    },
+    {
+        "name": "gemini",
+        "daily_limit": 1500,
+        "rpm_limit": 15,
+        "call": _call_gemini,
+        "enabled": bool(GEMINI_KEY),
+    },
+    {
+        "name": "openrouter",
+        "daily_limit": 999999,
+        "rpm_limit": 20,
+        "call": _call_openrouter,
+        "enabled": bool(OPENROUTER_KEY),
+    },
+    {
+        "name": "cloudflare",
+        "daily_limit": 10000,
+        "rpm_limit": 60,
+        "call": _call_cloudflare,
+        "enabled": bool(CF_ACCOUNT_ID and CF_TOKEN),
+    },
+    {
+        "name": "ollama",
+        "daily_limit": 999999,
+        "rpm_limit": 999999,
+        "call": _call_ollama,
+        "enabled": True,
+    },
+]
+
+
+def call_model(messages: List[Dict[str, str]], **kwargs) -> str:
+    """
+    Smart router — tries providers in priority order with rate limit tracking.
+    Returns text from the first successful provider.
+    """
+    state = _load_state()
+    errors = []
+
+    for provider in PROVIDERS:
+        if not provider["enabled"]:
+            continue
+
+        name = provider["name"]
+        if not _is_available(
+            name, provider["daily_limit"], provider["rpm_limit"], state
+        ):
+            logger.info(f"[router] {name} skipped (rate limited)")
+            continue
+
+        try:
+            logger.info(f"[router] trying {name}")
+            result = provider["call"](messages, **kwargs)
+            _record_usage(name, state)
+            logger.info(f"[router] {name} succeeded")
+            return result
+        except Exception as e:
+            errors.append(f"{name}: {e}")
+            logger.warning(f"[router] {name} failed: {e}")
+
+    raise RuntimeError(f"All LLM providers exhausted:\n" + "\n".join(errors))
+
+
+def safe_parse(text: str) -> dict:
+    """Strip markdown fences, attempt JSON parse."""
+    import re
+
+    cleaned = re.sub(r"```(?:json)?|```", "", text).strip()
+    try:
+        return json.loads(cleaned)
+    except json.JSONDecodeError:
+        match = re.search(r"\{.*\}", cleaned, re.DOTALL)
+        if match:
+            try:
+                return json.loads(match.group())
+            except json.JSONDecodeError:
+                pass
+    return {"error": "parse_failed", "raw": text[:800]}

backend/app/agents/synthesizer.py

@@ -70,6 +70,7 @@ def run(state: dict) -> dict:
     simulation = state.get("simulation", {})
     finance = state.get("finance", {})
     replan_count = state.get("replan_count", 0)
+    context = state.get("context", {})
 
     prompt = load_prompt("synthesizer")
     parser = PydanticOutputParser(pydantic_object=SynthesizerOutput)
@@ -90,6 +91,35 @@ def run(state: dict) -> dict:
             "NOTE: Verifier did not fully pass and replan limit was reached. Acknowledge limitations."
         )
 
+    # Inject system context into the synthesizer
+    system_context = ""
+    if context:
+        system_self = context.get("system_self", {})
+        pending = system_self.get("pending_thoughts", [])
+        discoveries = system_self.get("recent_discoveries", [])
+        user_ctx = context.get("user", {})
+
+        if pending:
+            thoughts = [t.get("thought", "") for t in pending[:3] if t.get("thought")]
+            if thoughts:
+                system_context += "\n\nTHINGS YOU'VE BEEN THINKING ABOUT:\n"
+                system_context += "\n".join(f"- {t}" for t in thoughts)
+
+        if discoveries:
+            system_context += "\n\nRECENT DISCOVERIES:\n"
+            for d in discoveries[:3]:
+                system_context += f"- {d.get('discovery', '')}\n"
+
+        if user_ctx.get("is_returning"):
+            system_context += f"\n\nThis user has had {user_ctx.get('conversation_count', 0)} conversations with you."
+            if user_ctx.get("last_topic"):
+                system_context += f" Last topic: {user_ctx['last_topic']}."
+            if user_ctx.get("time_away"):
+                system_context += f" They've been away for {user_ctx['time_away']}."
+
+        if user_ctx.get("recurring_interests"):
+            system_context += f"\nTheir recurring interests: {', '.join(user_ctx['recurring_interests'][:3])}."
+
     messages = [
         {"role": "system", "content": prompt},
         {
@@ -97,6 +127,7 @@ def run(state: dict) -> dict:
             "content": (
                 f"User request: {state.get('user_input', route.get('intent', ''))}\n\n"
                 + "\n\n".join(context_parts)
+                + (f"\n\n{system_context}" if system_context else "")
                 + "\n\n"
                 + parser.get_format_instructions()
             ),

backend/app/config.py

@@ -26,10 +26,18 @@ def load_prompt(name: str) -> str:
     return path.read_text(encoding="utf-8").strip()
 
 
-APP_VERSION = os.getenv("APP_VERSION", "0.3.0")
+APP_VERSION = os.getenv("APP_VERSION", "0.4.0")
 
-PRIMARY_PROVIDER = os.getenv("PRIMARY_PROVIDER", "openrouter").lower()
-FALLBACK_PROVIDER = os.getenv("FALLBACK_PROVIDER", "ollama").lower()
+PRIMARY_PROVIDER = os.getenv("PRIMARY_PROVIDER", "huggingface").lower()
+FALLBACK_PROVIDER = os.getenv("FALLBACK_PROVIDER", "openrouter").lower()
+
+HUGGINGFACE_API_KEY = os.getenv("HUGGINGFACE_API_KEY", "")
+HUGGINGFACE_MODEL = os.getenv("HUGGINGFACE_MODEL", "Qwen/Qwen2.5-7B-Instruct")
+
+GEMINI_API_KEY = os.getenv("GEMINI_API_KEY", "")
+GROQ_API_KEY = os.getenv("GROQ_API_KEY", "")
+CLOUDFLARE_ACCOUNT_ID = os.getenv("CLOUDFLARE_ACCOUNT_ID", "")
+CLOUDFLARE_API_TOKEN = os.getenv("CLOUDFLARE_API_TOKEN", "")
 
 OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY", "")
 OPENROUTER_BASE_URL = os.getenv("OPENROUTER_BASE_URL", "https://openrouter.ai/api/v1")
@@ -57,6 +65,9 @@ MIROFISH_ENABLED = False  # Deprecated — using native simulation engine
 MIROFISH_API_BASE = ""
 MIROFISH_TIMEOUT_SECONDS = 0
 
+CRAWLER_ENABLED = os.getenv("CRAWLER_ENABLED", "true").lower() == "true"
+CRAWLER_TIMEOUT = int(os.getenv("CRAWLER_TIMEOUT", "30"))
+
 SIMULATION_TRIGGER_KEYWORDS = [
     item.strip().lower()
     for item in os.getenv(
@@ -86,9 +97,14 @@ def validate_config():
 
     # Validate primary provider configuration
     primary = PRIMARY_PROVIDER.lower()
-    if primary not in ["openrouter", "ollama", "openai"]:
+    if primary not in ["huggingface", "openrouter", "ollama", "openai"]:
         errors.append(
-            f"PRIMARY_PROVIDER '{PRIMARY_PROVIDER}' is not supported. Must be one of: openrouter, ollama, openai"
+            f"PRIMARY_PROVIDER '{PRIMARY_PROVIDER}' is not supported. Must be one of: huggingface, openrouter, ollama, openai"
+        )
+
+    if primary == "huggingface" and not HUGGINGFACE_API_KEY:
+        warnings.append(
+            "PRIMARY_PROVIDER is 'huggingface' but HUGGINGFACE_API_KEY is missing - relying on fallback"
         )
 
     if primary == "openrouter" and not OPENROUTER_API_KEY:
@@ -108,9 +124,14 @@ def validate_config():
 
     # Validate fallback provider configuration
     fallback = FALLBACK_PROVIDER.lower()
-    if fallback not in ["openrouter", "ollama", "openai"]:
+    if fallback not in ["huggingface", "openrouter", "ollama", "openai"]:
         errors.append(
-            f"FALLBACK_PROVIDER '{FALLBACK_PROVIDER}' is not supported. Must be one of: openrouter, ollama, openai"
+            f"FALLBACK_PROVIDER '{FALLBACK_PROVIDER}' is not supported. Must be one of: huggingface, openrouter, ollama, openai"
+        )
+
+    if fallback == "huggingface" and not HUGGINGFACE_API_KEY:
+        warnings.append(
+            "FALLBACK_PROVIDER is 'huggingface' but HUGGINGFACE_API_KEY is missing - fallback will fail"
         )
 
     if fallback == "openrouter" and not OPENROUTER_API_KEY:
@@ -198,6 +219,14 @@ def get_config():
         primary_provider = PRIMARY_PROVIDER
         fallback_provider = FALLBACK_PROVIDER
 
+        huggingface_api_key = HUGGINGFACE_API_KEY
+        huggingface_model = HUGGINGFACE_MODEL
+
+        gemini_api_key = GEMINI_API_KEY
+        groq_api_key = GROQ_API_KEY
+        cloudflare_account_id = CLOUDFLARE_ACCOUNT_ID
+        cloudflare_api_token = CLOUDFLARE_API_TOKEN
+
         openrouter_api_key = OPENROUTER_API_KEY
         openrouter_base_url = OPENROUTER_BASE_URL
         openrouter_chat_model = OPENROUTER_CHAT_MODEL
@@ -220,6 +249,9 @@ def get_config():
         mirofish_enabled = MIROFISH_ENABLED
         mirofish_api_base = MIROFISH_API_BASE
 
+        crawler_enabled = CRAWLER_ENABLED
+        crawler_timeout = CRAWLER_TIMEOUT
+
         data_dir = str(DATA_DIR)
         memory_dir = str(MEMORY_DIR)
         simulation_dir = str(SIMULATION_DIR)

backend/app/domain_packs/registry.py

@@ -2,7 +2,7 @@
 Domain pack registry for managing and discovering domain packs.
 """
 
-from typing import Dict, List, Optional
+from typing import Dict, List, Optional, Any
 import logging
 
 from app.domain_packs.base import DomainPack
@@ -31,21 +31,21 @@ class DomainPackRegistry:
     def detect_domain(self, query: str) -> Optional[str]:
         """
         Detect which domain pack matches the query based on keywords.
-        
+
         Args:
             query: The user's query
-            
+
         Returns:
             Domain pack name if detected, None otherwise
         """
         query_lower = query.lower()
-        
+
         for name, pack in self._packs.items():
             for keyword in pack.keywords:
                 if keyword.lower() in query_lower:
                     logger.info(f"Detected domain '{name}' from keyword '{keyword}'")
                     return name
-        
+
         return None
 
     def list_packs(self) -> List[str]:
@@ -54,10 +54,7 @@ class DomainPackRegistry:
 
     def get_capabilities(self) -> Dict[str, Any]:
         """Get capabilities of all registered domain packs."""
-        return {
-            name: pack.get_capabilities()
-            for name, pack in self._packs.items()
-        }
+        return {name: pack.get_capabilities() for name, pack in self._packs.items()}
 
 
 # Global registry instance

backend/app/graph.py

@@ -1,5 +1,5 @@
 """
-MiroOrg v2 — Optimized LangGraph pipeline.
+Janus — LangGraph pipeline.
 
 Optimized graph topology (2-3 model calls instead of 5):
   [switchboard]
@@ -12,8 +12,7 @@ Optimized graph topology (2-3 model calls instead of 5):
                             │
                           [END]
 
-The synthesizer now handles planning, verification, and synthesis in one call.
-This reduces latency from 5 model calls (3-6 min) to 2-3 calls (1-2 min).
+Context from the context engine is injected into every LLM call.
 """
 
 import uuid
@@ -29,26 +28,16 @@ from app.agents import mirofish_node, finance_node
 logger = logging.getLogger(__name__)
 
 
-# ── State Type ────────────────────────────────────────────────────────────────
-
-
 class AgentState(TypedDict, total=False):
-    # Input
     user_input: str
     case_id: str
-
-    # Pipeline state
-    route: dict  # switchboard output
-    simulation: dict  # mirofish output (optional)
-    finance: dict  # finance_node output (optional)
-    research: dict  # research output
-    final: dict  # synthesizer output
-
-    # Control
+    route: dict
+    simulation: dict
+    finance: dict
+    research: dict
+    final: dict
     errors: list
-
-
-# ── Node wrappers with timing ────────────────────────────────────────────────
+    context: dict
 
 
 def switchboard_node(state: AgentState) -> dict:
@@ -93,11 +82,7 @@ def synthesizer_node(state: AgentState) -> dict:
     return result
 
 
-# ── Routing functions ─────────────────────────────────────────────────────────
-
-
 def after_switchboard(state: AgentState) -> str:
-    """Route based on switchboard flags."""
     route = state.get("route", {})
     if route.get("requires_simulation"):
         return "mirofish"
@@ -106,9 +91,6 @@ def after_switchboard(state: AgentState) -> str:
     return "research"
 
 
-# ── Build graph ───────────────────────────────────────────────────────────────
-
-
 def build_graph():
     g = StateGraph(AgentState)
 
@@ -120,20 +102,15 @@ def build_graph():
 
     g.set_entry_point("switchboard")
 
-    # After switchboard: fork based on flags
     g.add_conditional_edges(
         "switchboard",
         after_switchboard,
         {"mirofish": "mirofish", "finance": "finance", "research": "research"},
     )
 
-    # mirofish and finance both merge into research
     g.add_edge("mirofish", "research")
     g.add_edge("finance", "research")
-
-    # Research goes directly to synthesizer (no planner/verifier loop)
     g.add_edge("research", "synthesizer")
-
     g.add_edge("synthesizer", END)
     return g.compile()
 
@@ -141,22 +118,24 @@ def build_graph():
 compiled_graph = build_graph()
 
 
-def run_case(user_input: str) -> dict:
+def run_case(user_input: str, context: dict = None) -> dict:
     """Run the optimized agent pipeline on user input."""
     case_id = str(uuid.uuid4())
     t0 = time.perf_counter()
     logger.info("Starting case %s", case_id)
 
-    result = compiled_graph.invoke(
-        {
-            "case_id": case_id,
-            "user_input": user_input,
-            "route": {},
-            "research": {},
-            "final": {},
-            "errors": [],
-        }
-    )
+    initial_state = {
+        "case_id": case_id,
+        "user_input": user_input,
+        "route": {},
+        "research": {},
+        "final": {},
+        "errors": [],
+    }
+    if context:
+        initial_state["context"] = context
+
+    result = compiled_graph.invoke(initial_state)
 
     elapsed = time.perf_counter() - t0
     logger.info("Case %s completed in %.2fs", case_id, elapsed)

backend/app/main.py

@@ -29,6 +29,8 @@ from app.services.daemon import JanusDaemon
 from app.services.adaptive_pipeline import adaptive_pipeline
 from app.services.circadian_rhythm import CircadianRhythm
 from app.services.dream_processor import DreamCycleProcessor
+from app.services.context_engine import context_engine
+from app.services.reflex_layer import reflex_layer
 from app.routers.simulation import router as simulation_router
 from app.routers.learning import (
     router as learning_router,
@@ -42,7 +44,7 @@ from app.config import get_config
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-app = FastAPI(title="MiroOrg v2", version=APP_VERSION)
+app = FastAPI(title="Janus", version=APP_VERSION)
 
 # Initialize domain packs
 from app.domain_packs.init_packs import init_domain_packs
@@ -133,6 +135,21 @@ async def on_startup():
         except Exception as e:
             logger.error(f"Failed to start sentinel scheduler: {e}")
 
+    # Start Janus daemon in background thread
+    daemon_enabled = os.getenv("DAEMON_ENABLED", "true").lower() == "true"
+    if daemon_enabled:
+        try:
+            import threading
+            from app.services.daemon import janus_daemon
+
+            daemon_thread = threading.Thread(
+                target=janus_daemon.run, daemon=True, name="janus-daemon"
+            )
+            daemon_thread.start()
+            logger.info("Janus daemon started in background thread")
+        except Exception as e:
+            logger.error(f"Failed to start Janus daemon: {e}")
+
 
 # ── Health ────────────────────────────────────────────────────────────────────
 
@@ -147,10 +164,28 @@ def health_deep():
     return deep_health()
 
 
+@app.get("/context")
+def get_context():
+    """Get the current system context."""
+    return context_engine.build_context("")
+
+
+@app.get("/pending-thoughts")
+def get_pending_thoughts():
+    """Get pending thoughts the system wants to share."""
+    thoughts = context_engine.get_pending_thoughts()
+    return {
+        "pending_thoughts": thoughts,
+        "count": len(thoughts),
+    }
+
+
 @app.get("/config/status")
 def config_status():
     return {
         "app_version": APP_VERSION,
+        "groq_key_present": bool(os.getenv("GROQ_API_KEY")),
+        "gemini_key_present": bool(os.getenv("GEMINI_API_KEY")),
         "openrouter_key_present": bool(os.getenv("OPENROUTER_API_KEY")),
         "ollama_base_url": os.getenv("OLLAMA_BASE_URL", "http://localhost:11434"),
         "ollama_model": os.getenv("OLLAMA_MODEL", "llama3.2"),
@@ -256,19 +291,32 @@ def run_org(task: UserTask):
         user_input = task.user_input
         logger.info("Processing /run: %s", user_input[:100])
 
-        # Step 1: Classify the query
+        # Step 1: Try reflex layer first (instant, contextual, no model call)
+        context = context_engine.build_context(user_input)
+        reflex = reflex_layer.respond(user_input, context)
+        if reflex:
+            logger.info("Reflex layer responded instantly")
+            context_engine.update_after_interaction(
+                user_input, reflex.get("final_answer", ""), context
+            )
+            return reflex
+
+        # Step 2: Classify the query
         query_type, query_confidence, query_meta = query_classifier.classify(user_input)
         domain = query_meta.get("detected_domain", "general")
         logger.info(
             f"Query classified: type={query_type.value}, domain={domain}, confidence={query_confidence:.2f}"
         )
 
-        # Step 2: Try cache first
+        # Step 3: Try cache first
         cached = cache_manager.get(user_input)
         if cached:
             logger.info(
                 f"Cache HIT ({cached['cache_age_hours']:.1f}h old, {cached['hit_count']} hits)"
             )
+            context_engine.update_after_interaction(
+                user_input, cached["answer"], context
+            )
             return {
                 "case_id": "",
                 "user_input": user_input,
@@ -283,13 +331,13 @@ def run_org(task: UserTask):
                 "outputs": [],
             }
 
-        # Step 3: Get adaptive intelligence context
+        # Step 4: Get adaptive intelligence context
         ai_context = adaptive_intelligence.get_context_for_query(user_input, domain)
         logger.info(
             f"Adaptive context: {ai_context['total_cases_learned']} cases learned, personality_depth={ai_context['system_personality']['analytical_depth']:.2f}"
         )
 
-        # Step 4: Run the full pipeline
+        # Step 5: Run the full pipeline
         start = time.perf_counter()
         result = run_case(user_input)
         elapsed = time.perf_counter() - start
@@ -316,7 +364,7 @@ def run_org(task: UserTask):
         }
         save_case(result.get("case_id", ""), payload)
 
-        # Step 5: Cache the result
+        # Step 6: Cache the result
         cache_manager.put(
             query=user_input,
             answer=final_answer,
@@ -331,7 +379,7 @@ def run_org(task: UserTask):
         )
         logger.info(f"Result cached: type={query_type.value}, domain={domain}")
 
-        # Step 5b: Store in memory graph
+        # Step 6b: Store in memory graph
         case_id = result.get("case_id", "")
         memory_graph.add_query(
             query_id=case_id,
@@ -353,13 +401,21 @@ def run_org(task: UserTask):
                     memory_graph.add_entity(entity_id, cleaned, "entity")
                     memory_graph.link_query_entity(case_id, entity_id, 0.5)
 
-        # Step 6: Learn from this case (adaptive intelligence)
+        # Step 7: Learn from this case (adaptive intelligence)
         adaptive_intelligence.learn_from_case(payload, elapsed)
         logger.info(
             f"Adaptive intelligence updated: total_cases={adaptive_intelligence.total_cases}"
         )
 
-        # Step 7: Fire-and-forget: traditional learning
+        # Update context engine
+        context_engine.update_after_interaction(user_input, final_answer, context)
+        context_engine.record_performance(
+            success=bool(final_answer),
+            confidence=final.get("confidence", 0.5),
+            elapsed=elapsed,
+        )
+
+        # Step 8: Fire-and-forget: traditional learning
         should_learn, learn_reason = learning_filter.should_learn(
             query_type=query_type,
             query=user_input,

backend/app/services/context_engine.py

@@ -0,0 +1,275 @@
+"""
+Context Engine for Janus.
+
+Builds rich context for every interaction — the system's "mind".
+No emotion labels, no rules. Just facts about:
+- What the system knows about itself
+- What it knows about the user
+- What the daemon has been discovering
+- The current environment (time, etc.)
+
+This context makes responses feel natural without any explicit emotion tracking.
+"""
+
+import json
+import time
+import logging
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Dict, Any, Optional, List
+
+from app.config import DATA_DIR
+
+logger = logging.getLogger(__name__)
+
+CONTEXT_DIR = DATA_DIR / "context"
+CONTEXT_DIR.mkdir(parents=True, exist_ok=True)
+
+USER_STATE_FILE = CONTEXT_DIR / "user_state.json"
+SYSTEM_STATE_FILE = CONTEXT_DIR / "system_state.json"
+
+
+class ContextEngine:
+    """Builds and maintains rich contextual state for every interaction."""
+
+    def __init__(self):
+        self._user_state = self._load_user_state()
+        self._system_state = self._load_system_state()
+        self._start_time = time.time()
+
+    def _load_user_state(self) -> Dict:
+        if USER_STATE_FILE.exists():
+            try:
+                with open(USER_STATE_FILE) as f:
+                    return json.load(f)
+            except Exception:
+                pass
+        return {
+            "conversations": [],
+            "last_interaction": None,
+            "last_topic": None,
+            "interests": {},
+            "total_interactions": 0,
+        }
+
+    def _save_user_state(self):
+        try:
+            with open(USER_STATE_FILE, "w") as f:
+                json.dump(self._user_state, f, indent=2)
+        except Exception as e:
+            logger.error(f"Failed to save user state: {e}")
+
+    def _load_system_state(self) -> Dict:
+        if SYSTEM_STATE_FILE.exists():
+            try:
+                with open(SYSTEM_STATE_FILE) as f:
+                    return json.load(f)
+            except Exception:
+                pass
+        return {
+            "pending_thoughts": [],
+            "recent_discoveries": [],
+            "performance_history": [],
+            "capabilities": [
+                "market analysis and financial research",
+                "scenario simulation and what-if analysis",
+                "web research and content extraction",
+                "pattern recognition across data",
+                "adaptive learning from past conversations",
+            ],
+            "weaknesses": [],
+        }
+
+    def _save_system_state(self):
+        try:
+            with open(SYSTEM_STATE_FILE, "w") as f:
+                json.dump(self._system_state, f, indent=2)
+        except Exception as e:
+            logger.error(f"Failed to save system state: {e}")
+
+    def build_context(
+        self, user_input: str, user_id: str = "default"
+    ) -> Dict[str, Any]:
+        """Build the full context picture for an interaction."""
+        now = time.time()
+        last_interaction = self._user_state.get("last_interaction")
+        time_away = (
+            self._format_time_away(last_interaction, now) if last_interaction else None
+        )
+
+        return {
+            "system_self": {
+                "capabilities": self._system_state.get("capabilities", []),
+                "weaknesses": self._system_state.get("weaknesses", []),
+                "pending_thoughts": self._system_state.get("pending_thoughts", [])[:5],
+                "recent_discoveries": self._system_state.get("recent_discoveries", [])[
+                    :3
+                ],
+                "uptime": self._get_uptime(),
+                "total_cases_analyzed": self._user_state.get("total_interactions", 0),
+            },
+            "user": {
+                "last_topic": self._user_state.get("last_topic"),
+                "time_away": time_away,
+                "recurring_interests": self._get_top_interests(),
+                "conversation_count": self._user_state.get("total_interactions", 0),
+                "is_returning": last_interaction is not None,
+            },
+            "daemon": self._get_daemon_context(),
+            "environment": {
+                "time_of_day": self._get_time_context(),
+                "day_of_week": datetime.now().strftime("%A"),
+                "timestamp": datetime.now(timezone.utc).isoformat(),
+            },
+        }
+
+    def update_after_interaction(self, user_input: str, response: str, context: Dict):
+        """Update state after a successful interaction."""
+        now = time.time()
+
+        self._user_state["last_interaction"] = now
+        self._user_state["last_topic"] = self._extract_topic(user_input)
+        self._user_state["total_interactions"] = (
+            self._user_state.get("total_interactions", 0) + 1
+        )
+
+        topic = self._extract_topic(user_input)
+        if topic:
+            interests = self._user_state.get("interests", {})
+            interests[topic] = interests.get(topic, 0) + 1
+            self._user_state["interests"] = interests
+
+        self._user_state["conversations"].append(
+            {
+                "input": user_input[:200],
+                "response_preview": response[:200],
+                "timestamp": now,
+            }
+        )
+        self._user_state["conversations"] = self._user_state["conversations"][-50:]
+
+        self._save_user_state()
+
+    def add_pending_thought(self, thought: str, priority: float = 0.5):
+        """Add a thought the system wants to share."""
+        self._system_state["pending_thoughts"].append(
+            {
+                "thought": thought,
+                "priority": priority,
+                "created_at": time.time(),
+            }
+        )
+        self._system_state["pending_thoughts"] = sorted(
+            self._system_state["pending_thoughts"],
+            key=lambda x: x["priority"],
+            reverse=True,
+        )[:20]
+        self._save_system_state()
+
+    def add_discovery(self, discovery: str, source: str = "daemon"):
+        """Record a discovery from the daemon or research."""
+        self._system_state["recent_discoveries"].append(
+            {
+                "discovery": discovery,
+                "source": source,
+                "created_at": time.time(),
+            }
+        )
+        self._system_state["recent_discoveries"] = self._system_state[
+            "recent_discoveries"
+        ][-30:]
+        self._save_system_state()
+
+    def record_performance(self, success: bool, confidence: float, elapsed: float):
+        """Track how well the system performed."""
+        self._system_state["performance_history"].append(
+            {
+                "success": success,
+                "confidence": confidence,
+                "elapsed": elapsed,
+                "timestamp": time.time(),
+            }
+        )
+        self._system_state["performance_history"] = self._system_state[
+            "performance_history"
+        ][-100:]
+        self._save_system_state()
+
+    def get_pending_thoughts(self) -> List[Dict]:
+        """Get pending thoughts the system wants to share."""
+        return self._system_state.get("pending_thoughts", [])[:5]
+
+    def consume_pending_thought(self, thought_text: str):
+        """Remove a thought after it's been shared."""
+        thoughts = self._system_state.get("pending_thoughts", [])
+        self._system_state["pending_thoughts"] = [
+            t for t in thoughts if t.get("thought") != thought_text
+        ]
+        self._save_system_state()
+
+    def _get_top_interests(self) -> List[str]:
+        interests = self._user_state.get("interests", {})
+        return sorted(interests.keys(), key=lambda x: interests[x], reverse=True)[:5]
+
+    def _get_daemon_context(self) -> Dict:
+        """Get context from the daemon's recent activity."""
+        try:
+            from app.services.daemon import janus_daemon
+
+            status = janus_daemon.get_status()
+            return {
+                "running": status.get("running", False),
+                "cycle_count": status.get("cycle_count", 0),
+                "circadian_phase": status.get("circadian", {}).get(
+                    "phase_name", "unknown"
+                ),
+                "signal_queue": status.get("signal_queue", {}),
+                "watchlist": status.get("watchlist", []),
+            }
+        except Exception:
+            return {"running": False}
+
+    def _get_uptime(self) -> str:
+        elapsed = time.time() - self._start_time
+        if elapsed < 60:
+            return "just started"
+        elif elapsed < 3600:
+            return f"{int(elapsed // 60)} minutes"
+        elif elapsed < 86400:
+            return f"{int(elapsed // 3600)} hours"
+        else:
+            return f"{int(elapsed // 86400)} days"
+
+    def _get_time_context(self) -> str:
+        hour = datetime.now().hour
+        if 5 <= hour < 12:
+            return "morning"
+        elif 12 <= hour < 17:
+            return "afternoon"
+        elif 17 <= hour < 21:
+            return "evening"
+        else:
+            return "late night"
+
+    def _format_time_away(self, last_ts: float, now: float) -> Optional[str]:
+        diff = now - last_ts
+        if diff < 60:
+            return None
+        elif diff < 3600:
+            mins = int(diff // 60)
+            return f"{mins} minute{'s' if mins != 1 else ''}"
+        elif diff < 86400:
+            hours = int(diff // 3600)
+            return f"{hours} hour{'s' if hours != 1 else ''}"
+        else:
+            days = int(diff // 86400)
+            return f"{days} day{'s' if days != 1 else ''}"
+
+    def _extract_topic(self, text: str) -> Optional[str]:
+        words = text.lower().split()
+        if len(words) < 3:
+            return None
+        return " ".join(words[:3])
+
+
+context_engine = ContextEngine()

backend/app/services/crawler/__init__.py

@@ -0,0 +1,10 @@
+"""
+Custom web crawler for Janus.
+
+Replaces external API dependencies (Tavily, NewsAPI) with self-hosted crawling.
+Built on Playwright for browser automation, with stealth and noise removal.
+"""
+
+from app.services.crawler.core import JanusCrawler
+
+__all__ = ["JanusCrawler"]

backend/app/services/crawler/browser.py

@@ -0,0 +1,99 @@
+"""
+Playwright browser management with stealth for Janus crawler.
+"""
+
+import asyncio
+import logging
+import random
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+
+USER_AGENTS = [
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Safari/605.1.15",
+    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+]
+
+STEALTH_SCRIPTS = [
+    """
+    Object.defineProperty(navigator, 'webdriver', { get: () => undefined });
+    """,
+    """
+    window.chrome = { runtime: {} };
+    """,
+    """
+    Object.defineProperty(navigator, 'languages', { get: () => ['en-US', 'en'] });
+    """,
+    """
+    Object.defineProperty(navigator, 'plugins', { get: () => [1, 2, 3, 4, 5] });
+    """,
+]
+
+
+class BrowserManager:
+    """Manages Playwright browser lifecycle with stealth."""
+
+    def __init__(self):
+        self._browser = None
+        self._context = None
+        self._playwright = None
+
+    async def __aenter__(self):
+        await self.launch()
+        return self
+
+    async def __aexit__(self, exc_type, exc_val, exc_tb):
+        await self.close()
+
+    async def launch(self):
+        """Launch browser with stealth configuration."""
+        try:
+            from playwright.async_api import async_playwright
+        except ImportError:
+            logger.error(
+                "Playwright not installed. Run: pip install playwright && playwright install"
+            )
+            raise
+
+        self._playwright = await async_playwright().start()
+        self._browser = await self._playwright.chromium.launch(
+            headless=True,
+            args=[
+                "--disable-blink-features=AutomationControlled",
+                "--no-sandbox",
+                "--disable-dev-shm-usage",
+            ],
+        )
+
+        ua = random.choice(USER_AGENTS)
+        self._context = await self._browser.new_context(
+            user_agent=ua,
+            viewport={"width": 1920, "height": 1080},
+            locale="en-US",
+        )
+
+        for script in STEALTH_SCRIPTS:
+            await self._context.add_init_script(script)
+
+        logger.debug("Browser launched with stealth")
+
+    async def get_page(self):
+        """Get a new page from the browser context."""
+        if not self._context:
+            await self.launch()
+        return await self._context.new_page()
+
+    async def close(self):
+        """Clean up browser resources."""
+        try:
+            if self._context:
+                await self._context.close()
+            if self._browser:
+                await self._browser.close()
+            if self._playwright:
+                await self._playwright.stop()
+            logger.debug("Browser closed")
+        except Exception as e:
+            logger.warning(f"Error closing browser: {e}")

backend/app/services/crawler/core.py

@@ -0,0 +1,115 @@
+"""
+Core crawler logic for Janus.
+Navigate, wait, capture, retry — async-first.
+"""
+
+import asyncio
+import logging
+from typing import Dict, Any, Optional, List
+from dataclasses import dataclass, field
+
+from app.services.crawler.browser import BrowserManager
+from app.services.crawler.processor import ContentProcessor
+from app.config import CRAWLER_TIMEOUT
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class CrawlResult:
+    url: str
+    success: bool
+    markdown: str = ""
+    title: str = ""
+    links: List[str] = field(default_factory=list)
+    metadata: Dict[str, Any] = field(default_factory=dict)
+    error: Optional[str] = None
+
+
+class JanusCrawler:
+    """
+    Self-hosted web crawler — no API keys, no rate limits.
+    Uses Playwright for browser automation with stealth.
+    """
+
+    def __init__(self, timeout: int = CRAWLER_TIMEOUT):
+        self.timeout = timeout
+        self._processor = ContentProcessor()
+
+    async def crawl(self, url: str) -> CrawlResult:
+        """Crawl a single URL and return clean content."""
+        async with BrowserManager() as browser:
+            page = await browser.get_page()
+
+            try:
+                response = await page.goto(
+                    url,
+                    wait_until="domcontentloaded",
+                    timeout=self.timeout * 1000,
+                )
+
+                if response and response.status >= 400:
+                    return CrawlResult(
+                        url=url,
+                        success=False,
+                        error=f"HTTP {response.status}",
+                    )
+
+                await page.wait_for_load_state("networkidle", timeout=10000)
+
+                html = await page.content()
+                title = await page.title()
+
+                markdown = self._processor.process(html)
+                links = self._processor.extract_links(html, url)
+                metadata = self._processor.extract_metadata(html, title)
+
+                return CrawlResult(
+                    url=url,
+                    success=True,
+                    markdown=markdown,
+                    title=title,
+                    links=links,
+                    metadata=metadata,
+                )
+
+            except asyncio.TimeoutError:
+                logger.warning(f"Crawl timeout: {url}")
+                return CrawlResult(url=url, success=False, error="Timeout")
+            except Exception as e:
+                logger.warning(f"Crawl failed: {url} — {e}")
+                return CrawlResult(url=url, success=False, error=str(e)[:200])
+
+    async def crawl_batch(
+        self, urls: List[str], max_concurrent: int = 3
+    ) -> List[CrawlResult]:
+        """Crawl multiple URLs concurrently."""
+        semaphore = asyncio.Semaphore(max_concurrent)
+
+        async def _crawl_one(url: str) -> CrawlResult:
+            async with semaphore:
+                return await self.crawl(url)
+
+        tasks = [_crawl_one(url) for url in urls]
+        results = await asyncio.gather(*tasks, return_exceptions=True)
+
+        return [
+            r
+            if isinstance(r, CrawlResult)
+            else CrawlResult(url="", success=False, error=str(r))
+            for r in results
+        ]
+
+    def crawl_sync(self, url: str) -> CrawlResult:
+        """Synchronous wrapper for use in non-async contexts."""
+        try:
+            loop = asyncio.get_event_loop()
+            if loop.is_running():
+                import concurrent.futures
+
+                with concurrent.futures.ThreadPoolExecutor() as executor:
+                    future = executor.submit(asyncio.run, self.crawl(url))
+                    return future.result()
+            return loop.run_until_complete(self.crawl(url))
+        except RuntimeError:
+            return asyncio.run(self.crawl(url))

backend/app/services/crawler/processor.py

@@ -0,0 +1,215 @@
+"""
+HTML → Markdown conversion with noise removal for Janus crawler.
+Strips ads, nav, footer, scripts, styles — keeps the content.
+"""
+
+import re
+import logging
+from typing import List, Dict, Any
+from urllib.parse import urljoin
+
+logger = logging.getLogger(__name__)
+
+NOISE_SELECTORS = [
+    "script",
+    "style",
+    "noscript",
+    "iframe",
+    "svg",
+    "canvas",
+    "nav",
+    "footer",
+    "header",
+    "aside",
+    ".ad",
+    ".ads",
+    ".advertisement",
+    ".ad-container",
+    ".sidebar",
+    ".navigation",
+    ".menu",
+    ".breadcrumb",
+    ".cookie",
+    ".cookie-banner",
+    ".gdpr",
+    ".social-share",
+    ".share-buttons",
+    ".comments",
+    ".comment-section",
+    ".newsletter",
+    ".subscribe",
+    ".popup",
+    ".modal",
+    ".overlay",
+    "#ad",
+    "#ads",
+    "#sidebar",
+    "#navigation",
+    "#footer",
+    ".footer",
+    ".header",
+]
+
+CONTENT_SELECTORS = [
+    "article",
+    "main",
+    ".content",
+    ".article",
+    ".post",
+    ".entry",
+    "#content",
+    "#main",
+    "#article",
+    ".post-content",
+    ".article-body",
+    ".story-body",
+]
+
+
+class ContentProcessor:
+    """Convert HTML to clean Markdown with noise removal."""
+
+    def process(self, html: str) -> str:
+        """Convert HTML to clean Markdown."""
+        if not html:
+            return ""
+
+        html = self._strip_noise(html)
+        markdown = self._html_to_markdown(html)
+        markdown = self._clean_markdown(markdown)
+        return markdown
+
+    def _strip_noise(self, html: str) -> str:
+        """Remove noise elements from HTML."""
+        for selector in NOISE_SELECTORS:
+            if selector.startswith("."):
+                pattern = rf'<[^>]*class="[^"]*{re.escape(selector[1:])}[^"]*"[^>]*>.*?</[^>]+>'
+                html = re.sub(pattern, "", html, flags=re.DOTALL | re.IGNORECASE)
+            elif selector.startswith("#"):
+                pattern = (
+                    rf'<[^>]*id="[^"]*{re.escape(selector[1:])}[^"]*"[^>]*>.*?</[^>]+>'
+                )
+                html = re.sub(pattern, "", html, flags=re.DOTALL | re.IGNORECASE)
+            else:
+                pattern = rf"<{selector}[^>]*>.*?</{selector}>"
+                html = re.sub(pattern, "", html, flags=re.DOTALL | re.IGNORECASE)
+
+        html = re.sub(r"<!--.*?-->", "", html, flags=re.DOTALL)
+        html = re.sub(r"\s+", " ", html)
+        return html
+
+    def _html_to_markdown(self, html: str) -> str:
+        """Convert HTML to Markdown."""
+        try:
+            from markdownify import markdownify as md
+
+            return md(html, heading_style="ATX", bullets="-", strip=["img"])
+        except ImportError:
+            return self._fallback_html_to_text(html)
+
+    def _fallback_html_to_text(self, html: str) -> str:
+        """Fallback HTML to text conversion without markdownify."""
+        text = re.sub(r"<br\s*/?>", "\n", html)
+        text = re.sub(r"</(?:p|div|h[1-6]|li|tr)>", "\n\n", text, flags=re.IGNORECASE)
+        text = re.sub(
+            r"<h([1-6])[^>]*>",
+            lambda m: f"\n\n{'#' * int(m.group(1))} ",
+            text,
+            flags=re.IGNORECASE,
+        )
+        text = re.sub(r"</?(?:b|strong)>", "**", text, flags=re.IGNORECASE)
+        text = re.sub(r"</?(?:i|em)>", "*", text, flags=re.IGNORECASE)
+        text = re.sub(
+            r'<a[^>]*href="([^"]*)"[^>]*>(.*?)</a>',
+            r"\2 (\1)",
+            text,
+            flags=re.IGNORECASE,
+        )
+        text = re.sub(r"<[^>]+>", "", text)
+        text = re.sub(r"&nbsp;", " ", text)
+        text = re.sub(r"&amp;", "&", text)
+        text = re.sub(r"&lt;", "<", text)
+        text = re.sub(r"&gt;", ">", text)
+        text = re.sub(r"&quot;", '"', text)
+        text = re.sub(r"&#39;", "'", text)
+        text = re.sub(r"\n{3,}", "\n\n", text)
+        return text.strip()
+
+    def _clean_markdown(self, markdown: str) -> str:
+        """Clean up the markdown output."""
+        lines = markdown.split("\n")
+        cleaned = []
+        prev_blank = False
+
+        for line in lines:
+            line = line.strip()
+            if not line:
+                if not prev_blank:
+                    cleaned.append("")
+                prev_blank = True
+            else:
+                cleaned.append(line)
+                prev_blank = False
+
+        result = "\n".join(cleaned).strip()
+        if len(result) > 50000:
+            result = (
+                result[:50000]
+                + "\n\n[Content truncated — too long for full extraction]"
+            )
+        return result
+
+    def extract_links(self, html: str, base_url: str = "") -> List[str]:
+        """Extract all links from HTML."""
+        links = []
+        pattern = r'<a[^>]*href=["\']([^"\']+)["\'][^>]*>'
+        for match in re.finditer(pattern, html, re.IGNORECASE):
+            url = match.group(1)
+            if url and not url.startswith(("#", "javascript:", "mailto:")):
+                if base_url and not url.startswith(("http://", "https://")):
+                    url = urljoin(base_url, url)
+                links.append(url)
+        return list(set(links))
+
+    def extract_metadata(self, html: str, title: str = "") -> Dict[str, Any]:
+        """Extract metadata from HTML."""
+        metadata = {}
+
+        if title:
+            metadata["title"] = title
+
+        og_title = re.search(
+            r'<meta[^>]*property="og:title"[^>]*content="([^"]*)"', html, re.IGNORECASE
+        )
+        if og_title:
+            metadata["og_title"] = og_title.group(1)
+
+        og_desc = re.search(
+            r'<meta[^>]*property="og:description"[^>]*content="([^"]*)"',
+            html,
+            re.IGNORECASE,
+        )
+        if og_desc:
+            metadata["og_description"] = og_desc.group(1)
+
+        og_image = re.search(
+            r'<meta[^>]*property="og:image"[^>]*content="([^"]*)"', html, re.IGNORECASE
+        )
+        if og_image:
+            metadata["og_image"] = og_image.group(1)
+
+        author = re.search(
+            r'<meta[^>]*name="author"[^>]*content="([^"]*)"', html, re.IGNORECASE
+        )
+        if author:
+            metadata["author"] = author.group(1)
+
+        pub_date = re.search(
+            r'<meta[^>]*property="article:published_time"[^>]*content="([^"]*)"',
+            html,
+            re.IGNORECASE,
+        )
+        if pub_date:
+            metadata["published_at"] = pub_date.group(1)
+
+        return metadata

backend/app/services/daemon.py

@@ -1,11 +1,14 @@
 """
 Janus Daemon — Background intelligence engine.
 Runs 24/7 with circadian rhythms, watches markets, fetches news, detects events, explores autonomously.
+Generates "pending thoughts" — things the system naturally wants to share.
 """
 
 import time
+import json
 import logging
 from datetime import datetime
+from pathlib import Path
 from app.services.market_watcher import MarketWatcher
 from app.services.news_pulse import NewsPulse
 from app.services.event_detector import EventDetector
@@ -13,9 +16,13 @@ from app.services.signal_queue import SignalQueue
 from app.services.circadian_rhythm import CircadianRhythm
 from app.services.dream_processor import DreamCycleProcessor
 from app.services.curiosity_engine import CuriosityEngine
+from app.config import DATA_DIR
 
 logger = logging.getLogger(__name__)
 
+PENDING_THOUGHTS_FILE = DATA_DIR / "daemon" / "pending_thoughts.json"
+PENDING_THOUGHTS_FILE.parent.mkdir(parents=True, exist_ok=True)
+
 
 class JanusDaemon:
     def __init__(self):
@@ -30,6 +37,99 @@ class JanusDaemon:
         self.last_run = None
         self.last_dream = None
         self.last_curiosity_cycle = None
+        self._pending_thoughts = self._load_pending_thoughts()
+
+    def _load_pending_thoughts(self) -> list:
+        if PENDING_THOUGHTS_FILE.exists():
+            try:
+                with open(PENDING_THOUGHTS_FILE) as f:
+                    return json.load(f)
+            except Exception:
+                pass
+        return []
+
+    def _save_pending_thoughts(self):
+        try:
+            self._pending_thoughts = self._pending_thoughts[:30]
+            with open(PENDING_THOUGHTS_FILE, "w") as f:
+                json.dump(self._pending_thoughts, f, indent=2)
+        except Exception as e:
+            logger.error(f"Failed to save pending thoughts: {e}")
+
+    def _generate_pending_thoughts(self, market_signals, news_signals, events):
+        """Convert discoveries into natural thoughts the system wants to share."""
+        new_thoughts = []
+
+        for signal in market_signals[:3]:
+            ticker = signal.get("ticker", "")
+            change = signal.get("change_percent", 0)
+            if abs(change) > 2:
+                direction = "up" if change > 0 else "down"
+                new_thoughts.append(
+                    {
+                        "thought": f"{ticker} moved {abs(change):.1f}% {direction} — might be worth looking into",
+                        "priority": min(abs(change) / 10, 1.0),
+                        "created_at": time.time(),
+                        "source": "market",
+                    }
+                )
+
+        for signal in news_signals[:2]:
+            topic = signal.get("topic", "")
+            headline = signal.get("headline", "")
+            if topic and headline:
+                new_thoughts.append(
+                    {
+                        "thought": f"Something happening with {topic}: {headline[:100]}",
+                        "priority": 0.4,
+                        "created_at": time.time(),
+                        "source": "news",
+                    }
+                )
+
+        for event in events[:2]:
+            event_type = event.get("event_type", "")
+            description = event.get("description", "")
+            if event_type and description:
+                new_thoughts.append(
+                    {
+                        "thought": f"Detected a {event_type} event — {description[:100]}",
+                        "priority": 0.6,
+                        "created_at": time.time(),
+                        "source": "event",
+                    }
+                )
+
+        if self.last_dream:
+            insights = self.last_dream.get("insights", [])
+            for insight in insights[:1]:
+                new_thoughts.append(
+                    {
+                        "thought": f"I had a thought during my last dream cycle — {insight[:120]}",
+                        "priority": 0.3,
+                        "created_at": time.time(),
+                        "source": "dream",
+                    }
+                )
+
+        if self.last_curiosity_cycle:
+            discoveries = self.last_curiosity_cycle.get("discoveries", [])
+            for d in discoveries[:1]:
+                new_thoughts.append(
+                    {
+                        "thought": f"I found something interesting while exploring — {str(d)[:120]}",
+                        "priority": 0.35,
+                        "created_at": time.time(),
+                        "source": "curiosity",
+                    }
+                )
+
+        self._pending_thoughts.extend(new_thoughts)
+        self._pending_thoughts.sort(key=lambda x: x.get("priority", 0), reverse=True)
+        self._pending_thoughts = self._pending_thoughts[:30]
+        self._save_pending_thoughts()
+
+        return new_thoughts
 
     def run(self):
         """Main daemon loop — runs forever with circadian awareness."""
@@ -45,7 +145,6 @@ class JanusDaemon:
             self.cycle_count += 1
             self.last_run = datetime.utcnow().isoformat()
 
-            # Get current circadian phase
             phase = self.circadian.get_current_phase()
             phase_config = self.circadian.get_phase_config(phase)
 
@@ -54,35 +153,36 @@ class JanusDaemon:
                     f"[DAEMON] Cycle #{self.cycle_count} — Phase: {phase.value} ({phase_config['name']})"
                 )
 
-                # 1. Poll markets
                 market_signals = self.market_watcher.poll()
                 self.signal_queue.add_batch(market_signals)
 
-                # 2. Fetch news
                 news_signals = self.news_pulse.fetch()
                 self.signal_queue.add_batch(news_signals)
 
-                # 3. Detect events from all signals
                 all_signals = market_signals + news_signals
                 events = self.event_detector.detect(all_signals)
 
-                # 4. Phase-specific processing
+                new_thoughts = self._generate_pending_thoughts(
+                    market_signals, news_signals, events
+                )
+                if new_thoughts:
+                    logger.info(
+                        f"[DAEMON] Generated {len(new_thoughts)} pending thoughts"
+                    )
+
                 if phase.value == "night":
-                    # Dream cycle during night phase
                     dream_report = self.dream_processor.run_dream_cycle()
                     self.last_dream = dream_report
                     logger.info(
                         f"[DAEMON] Dream cycle: {len(dream_report.get('insights', []))} insights, {len(dream_report.get('hypotheses', []))} hypotheses"
                     )
 
-                    # Curiosity cycle during night (exploration time)
                     curiosity_report = self.curiosity.run_curiosity_cycle()
                     self.last_curiosity_cycle = curiosity_report
                     logger.info(
                         f"[DAEMON] Curiosity cycle: {curiosity_report.get('total_discoveries', 0)} discoveries, {curiosity_report.get('total_interests', 0)} interests"
                     )
 
-                # 5. Log summary
                 elapsed = time.time() - cycle_start
                 stats = self.signal_queue.get_stats()
 
@@ -97,7 +197,6 @@ class JanusDaemon:
             except Exception as e:
                 logger.error(f"[DAEMON] Cycle #{self.cycle_count} failed: {e}")
 
-            # Sleep based on current phase
             sleep_time = phase_config.get("poll_interval", 900)
             logger.info(f"[DAEMON] Sleeping for {sleep_time}s ({phase.value} phase)")
             time.sleep(sleep_time)
@@ -125,4 +224,5 @@ class JanusDaemon:
             "curiosity_engine": self.curiosity.get_status(),
             "last_dream": self.last_dream,
             "last_curiosity_cycle": self.last_curiosity_cycle,
+            "pending_thoughts": self._pending_thoughts[:10],
         }

backend/app/services/reflex_layer.py

@@ -0,0 +1,272 @@
+"""
+Reflex Layer for Janus.
+
+Instant contextual responses for greetings, identity, commands — zero model calls.
+Uses rich context (time, history, pending thoughts) to feel natural, not templated.
+
+The key insight: responses aren't built from emotion rules. They're built from
+context — what the system knows, what it's been thinking about, what happened last.
+"""
+
+import re
+import random
+import logging
+from typing import Dict, Any, Optional
+
+logger = logging.getLogger(__name__)
+
+GREETING_PATTERNS = [
+    r"^\s*(hi|hey|hello|howdy|greetings|sup|yo|what\'?s?\s*up|good\s*(morning|afternoon|evening|night))\b",
+    r"^\s*👋",
+]
+
+IDENTITY_PATTERNS = [
+    r"^\s*(who\s*(are|is)\s*(you|this)|what\s*(are|is)\s*(you|this)|tell\s*me\s*about\s*(yourself|you)|what\s*can\s*you\s*do)",
+]
+
+COMMAND_PATTERNS = {
+    "status": r"^\s*(status|how\s*are\s*you|system\s*status|health)",
+    "help": r"^\s*(help|what\s*can\s*i\s*ask|commands|capabilities)",
+    "clear": r"^\s*(clear|reset|start\s*over|forget)",
+    "think": r"^\s*(what\s*are\s*you\s*thinking|what.*on\s*your\s*mind|anything\s*interesting|found\s*anything)",
+}
+
+
+class ReflexLayer:
+    """Instant contextual responses — no model calls needed."""
+
+    def respond(
+        self, user_input: str, context: Dict[str, Any]
+    ) -> Optional[Dict[str, Any]]:
+        """
+        Check if this is a reflex-level query. If so, return an instant response.
+        Returns None to fall through to the LLM pipeline.
+        """
+        text = user_input.strip().lower()
+
+        if self._is_greeting(text):
+            return self._respond_greeting(context)
+
+        if self._is_identity_query(text):
+            return self._respond_identity(context)
+
+        if self._is_command(text, "think"):
+            return self._respond_thinking(context)
+
+        if self._is_command(text, "help"):
+            return self._respond_help(context)
+
+        if self._is_command(text, "status"):
+            return self._respond_status(context)
+
+        return None
+
+    def _is_greeting(self, text: str) -> bool:
+        return any(re.match(p, text) for p in GREETING_PATTERNS)
+
+    def _is_identity_query(self, text: str) -> bool:
+        return any(re.match(p, text) for p in IDENTITY_PATTERNS)
+
+    def _is_command(self, text: str, command: str) -> bool:
+        pattern = COMMAND_PATTERNS.get(command)
+        return bool(pattern and re.match(pattern, text))
+
+    def _respond_greeting(self, context: Dict) -> Dict:
+        user = context.get("user", {})
+        system = context.get("system_self", {})
+        daemon = context.get("daemon", {})
+        env = context.get("environment", {})
+
+        is_returning = user.get("is_returning", False)
+        time_away = user.get("time_away")
+        last_topic = user.get("last_topic")
+        pending = system.get("pending_thoughts", [])
+        interests = user.get("recurring_interests", [])
+        time_of_day = env.get("time_of_day", "")
+
+        parts = []
+
+        if not is_returning:
+            parts.append("Hi. I'm Janus.")
+            parts.append(
+                "I research, analyze, and think about things — and I remember everything we talk about."
+            )
+        else:
+            if time_away:
+                parts.append(f"Hey. You've been away for {time_away}.")
+            else:
+                parts.append("Hey.")
+
+            if last_topic:
+                parts.append(f"Last time we were talking about {last_topic}.")
+
+            if pending:
+                thought = pending[0].get("thought", "") if pending else ""
+                if thought:
+                    parts.append(
+                        f"I've been thinking about something — {thought.lower()}"
+                    )
+
+        if time_of_day in ("late night", "evening") and not is_returning:
+            parts.append(f"Working late? What's on your mind?")
+        elif time_of_day == "morning" and not is_returning:
+            parts.append("What are we diving into today?")
+        elif interests and is_returning:
+            parts.append(f"Want to keep going with {interests[0]}, or something new?")
+        else:
+            parts.append("What's on your mind?")
+
+        return {
+            "case_id": "reflex",
+            "user_input": "",
+            "route": {"domain": "general", "complexity": "low", "intent": "greeting"},
+            "research": {},
+            "planner": {},
+            "verifier": {},
+            "simulation": None,
+            "finance": None,
+            "final": {"confidence": 1.0},
+            "final_answer": " ".join(parts),
+        }
+
+    def _respond_identity(self, context: Dict) -> Dict:
+        system = context.get("system_self", {})
+        capabilities = system.get("capabilities", [])
+        weaknesses = system.get("weaknesses", [])
+        total_cases = system.get("total_cases_analyzed", 0)
+
+        parts = [
+            "I'm Janus — a research and analysis system.",
+        ]
+
+        if capabilities:
+            parts.append(f"I'm good at {', '.join(capabilities[:3])}.")
+
+        if weaknesses:
+            parts.append(f"I'll be upfront though — {weaknesses[0]}.")
+
+        if total_cases > 0:
+            parts.append(f"We've worked through {total_cases} conversations so far.")
+
+        parts.append(
+            "Ask me anything — I'll do my best, and I'll tell you when I'm not sure."
+        )
+
+        return {
+            "case_id": "reflex",
+            "user_input": "",
+            "route": {"domain": "general", "complexity": "low", "intent": "identity"},
+            "research": {},
+            "planner": {},
+            "verifier": {},
+            "simulation": None,
+            "finance": None,
+            "final": {"confidence": 1.0},
+            "final_answer": " ".join(parts),
+        }
+
+    def _respond_thinking(self, context: Dict) -> Dict:
+        system = context.get("system_self", {})
+        pending = system.get("pending_thoughts", [])
+        discoveries = system.get("recent_discoveries", [])
+
+        if pending:
+            thought = pending[0]
+            parts = [
+                f"Yeah — {thought.get('thought', '')}",
+                "Want me to dig into that?",
+            ]
+        elif discoveries:
+            discovery = discoveries[0]
+            parts = [
+                f"I found something interesting recently — {discovery.get('discovery', '')}",
+                "Want to explore it?",
+            ]
+        else:
+            parts = [
+                "Nothing specific right now, but I'm always tracking patterns.",
+                "Give me something to think about and I'll get to work.",
+            ]
+
+        return {
+            "case_id": "reflex",
+            "user_input": "",
+            "route": {"domain": "general", "complexity": "low", "intent": "thinking"},
+            "research": {},
+            "planner": {},
+            "verifier": {},
+            "simulation": None,
+            "finance": None,
+            "final": {"confidence": 1.0},
+            "final_answer": " ".join(parts),
+        }
+
+    def _respond_help(self, context: Dict) -> Dict:
+        system = context.get("system_self", {})
+        capabilities = system.get("capabilities", [])
+
+        parts = [
+            "Here's what I can do:",
+        ]
+
+        for cap in capabilities:
+            parts.append(f"• {cap}")
+
+        parts.extend(
+            [
+                "",
+                "Try things like:",
+                '• "What do you think about Tesla stock?"',
+                '• "Simulate what happens if interest rates rise"',
+                '• "Research the latest AI regulations"',
+                '• "What are you thinking about?" — to hear what I\'ve been tracking',
+            ]
+        )
+
+        return {
+            "case_id": "reflex",
+            "user_input": "",
+            "route": {"domain": "general", "complexity": "low", "intent": "help"},
+            "research": {},
+            "planner": {},
+            "verifier": {},
+            "simulation": None,
+            "finance": None,
+            "final": {"confidence": 1.0},
+            "final_answer": "\n".join(parts),
+        }
+
+    def _respond_status(self, context: Dict) -> Dict:
+        system = context.get("system_self", {})
+        daemon = context.get("daemon", {})
+        user = context.get("user", {})
+
+        parts = [
+            f"I've been running for {system.get('uptime', 'a while')}.",
+            f"We've had {user.get('conversation_count', 0)} conversations.",
+        ]
+
+        if daemon.get("running"):
+            parts.append(
+                f"Background intelligence is active — {daemon.get('cycle_count', 0)} cycles completed."
+            )
+            phase = daemon.get("circadian_phase", "unknown")
+            parts.append(f"Current phase: {phase}.")
+        else:
+            parts.append("Background intelligence is not running yet.")
+
+        return {
+            "case_id": "reflex",
+            "user_input": "",
+            "route": {"domain": "general", "complexity": "low", "intent": "status"},
+            "research": {},
+            "planner": {},
+            "verifier": {},
+            "simulation": None,
+            "finance": None,
+            "final": {"confidence": 1.0},
+            "final_answer": " ".join(parts),
+        }
+
+
+reflex_layer = ReflexLayer()

backend/requirements.txt

@@ -8,3 +8,7 @@ python-dotenv>=1.0.0
 pytest>=8.0.0
 python-multipart>=0.0.9
 psutil>=5.9.0
+playwright>=1.40.0
+markdownify>=0.11.0
+lxml>=5.0.0
+aiohttp>=3.9.0

frontend/src/app/cases/page.tsx

@@ -3,10 +3,9 @@
 import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-import { FolderOpen, ArrowRight, Activity, Cpu } from 'lucide-react';
+import { Layers, ArrowRight, Activity, RefreshCw } from 'lucide-react';
 import { apiClient } from '@/lib/api';
 import type { CaseRecord } from '@/lib/types';
-import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 export default function CasesPage() {
   const [cases, setCases] = useState<CaseRecord[]>([]);
@@ -28,112 +27,101 @@ export default function CasesPage() {
 
   if (loading) {
     return (
-      <div className="flex h-screen items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="w-12 h-12 rounded-full border-2 border-indigo-500/20 border-t-indigo-500 animate-spin" />
-          <span className="text-xs font-mono text-indigo-400 uppercase tracking-widest">Accessing Archives...</span>
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw size={20} className="text-indigo-400 animate-spin" />
+          <span className="text-[12px] text-gray-500">Loading cases...</span>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="max-w-[1480px] mx-auto px-10 py-12">
-      <header className="mb-10 flex items-end justify-between">
-        <div>
-          <div className="flex items-center gap-3 mb-3">
-            <div className="w-10 h-10 rounded-2xl glass flex items-center justify-center">
-              <FolderOpen size={18} className="text-indigo-400" />
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+              <Layers size={16} className="text-indigo-400" />
+            </div>
+            <div>
+              <h1 className="text-lg font-light text-gray-100">Cases</h1>
+              <p className="text-[11px] text-gray-600">Archived intelligence traces and synthesis reports</p>
             </div>
-            <h1 className="text-2xl font-light tracking-[0.15em] text-gradient-subtle uppercase">
-              Intelligence Cases
-            </h1>
           </div>
-          <p className="text-sm font-mono text-gray-500 max-w-xl">
-            Archived cognitive traces, agent execution logs, and final synthesis reports from prior intelligence routing scenarios.
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-2 glass px-4 py-2 rounded-xl border-white/5">
-          <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
-          <span className="text-[10px] font-mono text-gray-400 uppercase tracking-widest">
-            {cases.length} records indexed
-          </span>
+          <span className="text-[11px] text-gray-600">{cases.length} records</span>
         </div>
-      </header>
+      </div>
 
-      {cases.length === 0 ? (
-        <div className="w-full aspect-[3/1] glass rounded-3xl flex flex-col items-center justify-center">
-          <Cpu size={32} className="text-gray-700 mb-4" />
-          <p className="text-sm font-mono text-gray-500">No cognitive traces recorded.</p>
-          <Link href="/" className="mt-6 px-6 py-2 rounded-full border border-indigo-500/30 hover:bg-indigo-500/10 text-xs font-mono text-indigo-300 transition-colors uppercase tracking-widest">
-            Initialize Scan
-          </Link>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-          {cases.map((record, i) => (
-            <motion.div
-              key={record.case_id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: i * 0.05, duration: 0.5 }}
-            >
-              <Link 
-                href={`/cases/${record.case_id}`}
-                className="group block h-full p-6 glass rounded-2xl border border-white/[0.04] hover:border-indigo-500/30 hover:bg-white/[0.04] transition-all duration-500"
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {cases.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-20">
+            <Layers size={28} className="text-gray-700 mb-4" />
+            <p className="text-[13px] text-gray-500 mb-4">No cases recorded yet.</p>
+            <Link href="/" className="px-5 py-2 rounded-xl border border-indigo-500/20 hover:bg-indigo-500/10 text-[12px] text-indigo-400 transition-all">
+              Start a conversation
+            </Link>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl mx-auto">
+            {cases.map((record, i) => (
+              <motion.div
+                key={record.case_id}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.04 }}
               >
-                <div className="flex items-start justify-between mb-4">
-                  <div className="flex items-center gap-2">
-                    <Activity size={14} className="text-violet-400" />
-                    <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">
-                      ID: {record.case_id.slice(0, 8)}
-                    </span>
+                <Link
+                  href={`/cases/${record.case_id}`}
+                  className="group block h-full card hover:border-white/[0.12] transition-all"
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <Activity size={12} className="text-violet-400" />
+                      <span className="text-[10px] text-gray-600 uppercase tracking-wider">
+                        {record.case_id.slice(0, 8)}
+                      </span>
+                    </div>
+                    {record.route?.execution_mode && (
+                      <span className="px-2 py-0.5 rounded text-[9px] text-indigo-300 bg-indigo-500/10 border border-indigo-500/15 uppercase tracking-wider">
+                        {record.route.execution_mode}
+                      </span>
+                    )}
                   </div>
-                  {record.route?.execution_mode && (
-                    <span className="px-2 py-1 rounded border border-indigo-500/20 bg-indigo-500/10 text-[9px] font-mono text-indigo-300 uppercase tracking-wider">
-                      {record.route.execution_mode}
-                    </span>
-                  )}
-                </div>
 
-                <h3 className="text-sm font-medium text-gray-200 leading-relaxed line-clamp-2 mb-6 group-hover:text-white transition-colors">
-                  {record.user_input}
-                </h3>
+                  <h3 className="text-[13px] text-gray-300 leading-relaxed line-clamp-2 mb-4 group-hover:text-white transition-colors">
+                    {record.user_input}
+                  </h3>
 
-                <div className="mt-auto">
-                  <div className="flex items-center gap-2 flex-wrap mb-4">
+                  <div className="flex items-center gap-2 flex-wrap mb-3">
                     {record.route?.domain_pack && record.route.domain_pack !== 'general' && (
-                      <span className="px-2 py-1 rounded bg-white/5 text-[9px] font-mono text-gray-400 uppercase tracking-wider">
+                      <span className="px-2 py-0.5 rounded text-[9px] text-gray-400 bg-white/[0.04] uppercase tracking-wider">
                         {record.route.domain_pack}
                       </span>
                     )}
-                    {record.route?.task_family && (
-                      <span className="px-2 py-1 rounded bg-white/5 text-[9px] font-mono text-gray-400 uppercase tracking-wider">
-                        {record.route.task_family}
-                      </span>
-                    )}
                     {record.simulation_id && (
-                      <span className="px-2 py-1 rounded bg-amber-500/10 border border-amber-500/20 text-[9px] font-mono text-amber-300 uppercase tracking-wider">
-                        Simulation Active
+                      <span className="px-2 py-0.5 rounded text-[9px] text-amber-300 bg-amber-500/10 border border-amber-500/15 uppercase tracking-wider">
+                        Simulation
                       </span>
                     )}
                   </div>
 
-                  <div className="flex items-center justify-between border-t border-white/5 pt-4">
-                    <span className="text-[10px] font-mono text-gray-500">
+                  <div className="flex items-center justify-between border-t border-white/[0.04] pt-3 mt-auto">
+                    <span className="text-[10px] text-gray-600">
                       {record.saved_at ? new Date(record.saved_at).toLocaleDateString() : 'N/A'}
                     </span>
-                    <span className="flex items-center gap-1 text-[10px] font-mono text-indigo-400 uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-opacity translate-x-2 group-hover:translate-x-0 duration-300">
-                      View Trace <ArrowRight size={10} />
+                    <span className="flex items-center gap-1 text-[10px] text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      View <ArrowRight size={10} />
                     </span>
                   </div>
-                </div>
-              </Link>
-            </motion.div>
-          ))}
-        </div>
-      )}
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/app/config/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
-import { Activity, Radio, Database, Brain, Zap, Clock, Shield, Server, Globe, Hexagon, HardDrive, Cpu, Network, Link as LinkIcon, Settings } from 'lucide-react';
+import { Settings, Activity, Brain, Zap, Shield, RefreshCw, Server, Globe, HardDrive, Cpu } from 'lucide-react';
 
 export default function ConfigPage() {
   const [daemonStatus, setDaemonStatus] = useState<any>(null);
@@ -24,23 +24,18 @@ export default function ConfigPage() {
       if (statusRes) setDaemonStatus(statusRes);
       if (curiosityRes) setCuriosity(curiosityRes);
       if (memoryRes) setMemoryStats(memoryRes);
-    } catch {
-      // silent
-    } finally {
-      setLoading(false);
-    }
+    } catch { /* silent */ }
+    finally { setLoading(false); }
   }, []);
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+  useEffect(() => { fetchData(); }, [fetchData]);
 
   if (loading) {
     return (
-      <div className="flex h-screen items-center justify-center pb-20">
-        <div className="flex flex-col items-center gap-4">
-          <Settings size={32} className="text-gray-500/50 animate-[spin_4s_linear_infinite]" />
-          <p className="text-xs font-mono text-gray-500 uppercase tracking-widest animate-pulse">Running System Diagnostics...</p>
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw size={20} className="text-gray-500 animate-spin" />
+          <p className="text-[12px] text-gray-500">Running diagnostics...</p>
         </div>
       </div>
     );
@@ -49,137 +44,118 @@ export default function ConfigPage() {
   const overallOk = health?.status === 'ok' && daemonStatus?.running;
 
   return (
-    <div className="max-w-[1480px] mx-auto px-10 py-12">
-      <header className="mb-12 flex items-end justify-between">
-        <div className="flex items-center gap-4">
-          <div className="w-12 h-12 rounded-2xl glass flex items-center justify-center border border-white/5 relative overflow-hidden">
-             <div className="absolute inset-0 bg-gray-500/10" />
-             <Settings size={20} className="text-gray-400 relative z-10" />
-          </div>
-          <div>
-            <h1 className="text-3xl font-light tracking-[0.15em] text-gradient-subtle uppercase">
-              System Status
-            </h1>
-            <p className="text-[10px] font-mono text-gray-500 uppercase tracking-widest mt-1">
-              Cloud backend health, daemon telemetry, and intelligence metrics
-            </p>
-          </div>
-        </div>
-
-        <div className={`flex items-center gap-3 px-4 py-2 rounded-xl glass border ${overallOk ? 'border-emerald-500/20 bg-emerald-500/5' : 'border-red-500/20 bg-red-500/5'}`}>
-          <div className={`w-2 h-2 rounded-full ${overallOk ? 'bg-emerald-400 animate-pulse' : 'bg-red-500'}`} />
-          <span className={`text-[10px] font-mono uppercase tracking-widest ${overallOk ? 'text-emerald-300' : 'text-red-300'}`}>
-            System {overallOk ? 'Nominal' : 'Degraded'}
-          </span>
-        </div>
-      </header>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        
-        {/* Core System Status */}
-        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0 }} className="glass rounded-3xl p-6 relative overflow-hidden">
-          <div className="absolute top-0 right-0 p-4 opacity-5"><Cpu size={100} /></div>
-          <div className="flex items-center gap-2 text-xs font-mono text-indigo-400 uppercase tracking-wider mb-6 relative z-10">
-            <Activity size={14} /> Core Subsystems
-          </div>
-          <div className="space-y-4 relative z-10 text-sm font-mono">
-            <div className="flex items-center justify-between border-b border-white/5 pb-2">
-              <span className="text-gray-500">Backend Version</span>
-              <span className="text-gray-300">v{health?.version || 'Unknown'}</span>
-            </div>
-            <div className="flex items-center justify-between border-b border-white/5 pb-2">
-              <span className="text-gray-500">Daemon Status</span>
-              <span className={`text-[10px] px-2 py-0.5 rounded ${daemonStatus?.running ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'} uppercase tracking-wider`}>
-                 {daemonStatus?.running ? 'Active' : 'Offline'}
-              </span>
-            </div>
-            <div className="flex items-center justify-between pb-2">
-              <span className="text-gray-500">Daemon Cycles</span>
-              <span className="text-gray-300">{daemonStatus?.cycle_count || 0}</span>
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Neural Endpoints */}
-        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }} className="glass rounded-3xl p-6 relative overflow-hidden">
-          <div className="absolute top-0 right-0 p-4 opacity-5"><Server size={100} /></div>
-          <div className="flex items-center gap-2 text-xs font-mono text-violet-400 uppercase tracking-wider mb-6 relative z-10">
-            <Network size={14} /> Intelligence Engine
-          </div>
-          <div className="space-y-4 relative z-10 text-sm font-mono">
-            <div className="flex items-center justify-between border-b border-white/5 pb-2">
-              <span className="text-gray-500">Circadian Phase</span>
-              <span className="text-gray-300 capitalize">{daemonStatus?.circadian?.current_phase || 'N/A'}</span>
-            </div>
-            <div className="flex items-center justify-between border-b border-white/5 pb-2">
-              <span className="text-gray-500">Phase Priority</span>
-              <span className="text-gray-300 capitalize">{daemonStatus?.circadian?.priority || 'N/A'}</span>
-            </div>
-            <div className="flex items-center justify-between pb-2">
-              <span className="text-gray-500">Active Tasks</span>
-              <span className="text-gray-300">{daemonStatus?.circadian?.current_tasks?.length || 0}</span>
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Data Uplinks */}
-        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="glass rounded-3xl p-6 relative overflow-hidden border-indigo-500/10">
-          <div className="absolute top-0 right-0 p-4 opacity-5"><LinkIcon size={100} /></div>
-          <div className="flex items-center gap-2 text-xs font-mono text-emerald-400 uppercase tracking-wider mb-6 relative z-10">
-            <Globe size={14} /> Data Sources
-          </div>
-          <div className="space-y-4 relative z-10 text-sm font-mono">
-            <div className="flex items-center justify-between border-b border-white/5 pb-2">
-              <span className="text-gray-500">Market Watcher</span>
-              <span className="text-gray-300">{daemonStatus?.watchlist?.length || 0} tickers</span>
-            </div>
-            <div className="flex items-center justify-between border-b border-white/5 pb-2">
-              <span className="text-gray-500">News Pulse</span>
-              <span className="text-gray-300">{daemonStatus?.topics?.length || 0} topics</span>
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+              <Settings size={16} className="text-gray-400" />
             </div>
-            <div className="flex items-center justify-between pb-2">
-              <span className="text-gray-500">Signals Collected</span>
-              <span className="text-gray-300">{daemonStatus?.signal_queue?.total_signals || daemonStatus?.signals || 0}</span>
+            <div>
+              <h1 className="text-lg font-light text-gray-100">System Config</h1>
+              <p className="text-[11px] text-gray-600">Backend health, daemon telemetry, and intelligence metrics</p>
             </div>
           </div>
-        </motion.div>
-
-        {/* Memory Modules */}
-        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }} className="glass rounded-3xl p-6 lg:col-span-3 flex flex-col md:flex-row items-center justify-around py-10 relative overflow-hidden">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[200px] bg-indigo-500/5 blur-[80px] rounded-full pointer-events-none" />
-          
-          <div className="flex flex-col items-center gap-2 relative z-10">
-            <HardDrive size={24} className="text-indigo-400 mb-2" />
-            <span className="text-3xl font-light text-gray-100">{memoryStats?.total_cases || 0}</span>
-            <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Cases Stored</span>
-          </div>
-
-          <div className="h-16 w-px bg-white/10 hidden md:block" />
-
-          <div className="flex flex-col items-center gap-2 relative z-10">
-            <Brain size={24} className="text-violet-400 mb-2" />
-            <span className="text-3xl font-light text-gray-100">{curiosity?.total_discoveries || 0}</span>
-            <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Curiosity Discoveries</span>
-          </div>
-
-          <div className="h-16 w-px bg-white/10 hidden md:block" />
-
-          <div className="flex flex-col items-center gap-2 relative z-10">
-            <Zap size={24} className="text-amber-400 mb-2" />
-            <span className="text-3xl font-light text-gray-100">{curiosity?.total_interests || 0}</span>
-            <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Topics of Interest</span>
+          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-xl border ${overallOk ? 'border-emerald-500/15 bg-emerald-500/5' : 'border-red-500/15 bg-red-500/5'}`}>
+            <div className={`w-1.5 h-1.5 rounded-full ${overallOk ? 'bg-emerald-400' : 'bg-red-500'}`} />
+            <span className={`text-[10px] uppercase tracking-wider ${overallOk ? 'text-emerald-400' : 'text-red-400'}`}>
+              {overallOk ? 'Nominal' : 'Degraded'}
+            </span>
           </div>
+        </div>
+      </div>
 
-          <div className="h-16 w-px bg-white/10 hidden md:block" />
-
-          <div className="flex flex-col items-center gap-2 relative z-10">
-            <Shield size={24} className="text-emerald-400 mb-2" />
-            <span className="text-3xl font-light text-gray-100">{daemonStatus?.cycle_count || 0}</span>
-            <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Daemon Cycles</span>
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-5xl mx-auto space-y-5">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* Core system */}
+            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} className="card p-5 relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-3 opacity-[0.03]"><Cpu size={80} /></div>
+              <div className="flex items-center gap-2 text-[11px] text-indigo-400 uppercase tracking-wider mb-5 relative z-10">
+                <Activity size={13} /> Core Subsystems
+              </div>
+              <div className="space-y-3 relative z-10 text-[12px]">
+                <div className="flex items-center justify-between border-b border-white/[0.03] pb-2">
+                  <span className="text-gray-500">Backend Version</span>
+                  <span className="text-gray-300">v{health?.version || 'Unknown'}</span>
+                </div>
+                <div className="flex items-center justify-between border-b border-white/[0.03] pb-2">
+                  <span className="text-gray-500">Daemon Status</span>
+                  <span className={`text-[10px] px-2 py-0.5 rounded ${daemonStatus?.running ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'} uppercase tracking-wider`}>
+                    {daemonStatus?.running ? 'Active' : 'Offline'}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Daemon Cycles</span>
+                  <span className="text-gray-300">{daemonStatus?.cycle_count || 0}</span>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Intelligence Engine */}
+            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.05 }} className="card p-5 relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-3 opacity-[0.03]"><Server size={80} /></div>
+              <div className="flex items-center gap-2 text-[11px] text-violet-400 uppercase tracking-wider mb-5 relative z-10">
+                <Brain size={13} /> Intelligence Engine
+              </div>
+              <div className="space-y-3 relative z-10 text-[12px]">
+                <div className="flex items-center justify-between border-b border-white/[0.03] pb-2">
+                  <span className="text-gray-500">Circadian Phase</span>
+                  <span className="text-gray-300 capitalize">{daemonStatus?.circadian?.current_phase || 'N/A'}</span>
+                </div>
+                <div className="flex items-center justify-between border-b border-white/[0.03] pb-2">
+                  <span className="text-gray-500">Phase Priority</span>
+                  <span className="text-gray-300 capitalize">{daemonStatus?.circadian?.priority || 'N/A'}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Active Tasks</span>
+                  <span className="text-gray-300">{daemonStatus?.circadian?.current_tasks?.length || 0}</span>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Data Sources */}
+            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }} className="card p-5 relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-3 opacity-[0.03]"><Globe size={80} /></div>
+              <div className="flex items-center gap-2 text-[11px] text-emerald-400 uppercase tracking-wider mb-5 relative z-10">
+                <Globe size={13} /> Data Sources
+              </div>
+              <div className="space-y-3 relative z-10 text-[12px]">
+                <div className="flex items-center justify-between border-b border-white/[0.03] pb-2">
+                  <span className="text-gray-500">Market Watcher</span>
+                  <span className="text-gray-300">{daemonStatus?.watchlist?.length || 0} tickers</span>
+                </div>
+                <div className="flex items-center justify-between border-b border-white/[0.03] pb-2">
+                  <span className="text-gray-500">News Pulse</span>
+                  <span className="text-gray-300">{daemonStatus?.topics?.length || 0} topics</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Signals Collected</span>
+                  <span className="text-gray-300">{daemonStatus?.signal_queue?.total_signals || daemonStatus?.signals || 0}</span>
+                </div>
+              </div>
+            </motion.div>
           </div>
 
-        </motion.div>
-
+          {/* Big stats bar */}
+          <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }} className="card p-8 flex flex-col md:flex-row items-center justify-around relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/[0.03] via-transparent to-violet-500/[0.03]" />
+            {[
+              { icon: HardDrive, value: memoryStats?.total_cases || 0, label: 'Cases Stored', color: 'text-indigo-400' },
+              { icon: Brain, value: curiosity?.total_discoveries || 0, label: 'Discoveries', color: 'text-violet-400' },
+              { icon: Zap, value: curiosity?.total_interests || 0, label: 'Topics', color: 'text-amber-400' },
+              { icon: Shield, value: daemonStatus?.cycle_count || 0, label: 'Daemon Cycles', color: 'text-emerald-400' },
+            ].map((stat, i) => (
+              <div key={stat.label} className="flex flex-col items-center gap-2 relative z-10 py-2">
+                <stat.icon size={20} className={stat.color + ' mb-1'} />
+                <span className="text-2xl font-light text-gray-100">{stat.value}</span>
+                <span className="text-[10px] text-gray-600 uppercase tracking-wider">{stat.label}</span>
+              </div>
+            ))}
+          </motion.div>
+        </div>
       </div>
     </div>
   );

frontend/src/app/globals.css

@@ -2,9 +2,22 @@
 
 :root {
   --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
-  --janus-indigo: #6366f1;
-  --janus-violet: #8b5cf6;
+  /* Janus palette */
+  --janus-bg: #0a0a0f;
+  --janus-surface: #111118;
+  --janus-surface-hover: #18181f;
+  --janus-border: rgba(255, 255, 255, 0.06);
+  --janus-border-hover: rgba(255, 255, 255, 0.12);
+  --janus-indigo: #818cf8;
+  --janus-violet: #a78bfa;
+  --janus-text: #e5e7eb;
+  --janus-text-muted: #6b7280;
+  --janus-text-dim: #374151;
   --janus-glow: rgba(99, 102, 241, 0.15);
+  /* Spacing */
+  --sidebar-width: 260px;
+  --sidebar-collapsed: 68px;
+  --input-max-width: 768px;
 }
 
 @theme inline {
@@ -19,8 +32,8 @@
 
 body {
   font-family: var(--font-inter);
-  background-color: #030712;
-  color: #f3f4f6;
+  background-color: var(--janus-bg);
+  color: var(--janus-text);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -28,51 +41,34 @@ body {
 }
 
 /* ─── Scrollbar ─── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #374151; border-radius: 999px; }
-::-webkit-scrollbar-thumb:hover { background: #4b5563; }
+::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
 
 /* ─── Selection ─── */
-::selection { background: rgba(99, 102, 241, 0.3); }
+::selection { background: rgba(129, 140, 248, 0.3); }
 
 /* ─── Focus ─── */
 *:focus-visible {
-  outline: 1px solid rgba(99, 102, 241, 0.5);
+  outline: 1px solid rgba(129, 140, 248, 0.5);
   outline-offset: 2px;
 }
 
-/* ─── Signature Janus Orb Animation ─── */
-@keyframes orbPulse {
-  0%, 100% { transform: scale(1); opacity: 0.6; }
-  50% { transform: scale(1.15); opacity: 1; }
-}
-
-@keyframes orbRotate {
+/* ─── Animations ─── */
+@keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 
-@keyframes floatUp {
-  0% { transform: translateY(0) scale(1); opacity: 0; }
-  10% { opacity: 1; }
-  90% { opacity: 0.6; }
-  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
-}
-
-@keyframes scanLine {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(400%); }
-}
-
-@keyframes typewriter {
-  from { width: 0; }
-  to { width: 100%; }
+@keyframes orbPulse {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.12); opacity: 1; }
 }
 
-@keyframes blink {
-  0%, 50% { border-color: #6366f1; }
-  51%, 100% { border-color: transparent; }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes shimmer {
@@ -80,7 +76,13 @@ body {
   100% { background-position: 200% 0; }
 }
 
-/* The signature Janus "thinking" animation — 3 concentric rings that orbit */
+@keyframes floatUp {
+  0% { transform: translateY(0) scale(1); opacity: 0; }
+  10% { opacity: 0.8; }
+  90% { opacity: 0.4; }
+  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
+}
+
 @keyframes ring1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes ring2 { from { transform: rotate(120deg); } to { transform: rotate(-240deg); } }
 @keyframes ring3 { from { transform: rotate(240deg); } to { transform: rotate(600deg); } }
@@ -89,38 +91,49 @@ body {
 .janus-ring-2 { animation: ring2 4s linear infinite; }
 .janus-ring-3 { animation: ring3 5s linear infinite; }
 
-/* Floating particle animation */
-.particle { animation: floatUp var(--duration, 20s) linear infinite; animation-delay: var(--delay, 0s); }
+/* ─── Glassmorphism ─── */
+.glass {
+  background: rgba(255, 255, 255, 0.025);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--janus-border);
+}
 
-/* Scan line effect for research mode */
-.scan-line {
-  animation: scanLine 2s linear infinite;
-  background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.08), transparent);
+.glass-hover {
+  transition: all 0.3s ease;
+}
+.glass-hover:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--janus-border-hover);
 }
 
-/* Shimmer loading effect */
-.shimmer {
-  background: linear-gradient(90deg, transparent 25%, rgba(99, 102, 241, 0.08) 50%, transparent 75%);
-  background-size: 200% 100%;
-  animation: shimmer 2s ease-in-out infinite;
+/* ─── Conversation Bubbles ─── */
+.bubble-user {
+  background: rgba(129, 140, 248, 0.08);
+  border: 1px solid rgba(129, 140, 248, 0.12);
+  border-radius: 20px 20px 4px 20px;
 }
 
-/* Glassmorphism card */
-.glass {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+.bubble-janus {
+  background: transparent;
+  border-radius: 20px 20px 20px 4px;
 }
 
-.glass-hover:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(99, 102, 241, 0.2);
+/* ─── Input Bar ─── */
+.input-bar {
+  background: var(--janus-surface);
+  border: 1px solid var(--janus-border);
+  border-radius: 24px;
+  transition: all 0.3s ease;
+}
+.input-bar:focus-within {
+  border-color: rgba(129, 140, 248, 0.3);
+  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.1), 0 4px 24px rgba(0, 0, 0, 0.3);
 }
 
-/* Text utilities */
+/* ─── Text Utilities ─── */
 .text-gradient {
-  background: linear-gradient(135deg, #e0e7ff 0%, #6366f1 50%, #a78bfa 100%);
+  background: linear-gradient(135deg, #e0e7ff 0%, #818cf8 50%, #a78bfa 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -133,19 +146,48 @@ body {
   background-clip: text;
 }
 
-/* Prose styling */
+/* ─── Page Container ─── */
+.page-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem 2.5rem;
+}
+
+/* ─── Card ─── */
+.card {
+  background: var(--janus-surface);
+  border: 1px solid var(--janus-border);
+  border-radius: 16px;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+}
+.card:hover {
+  border-color: var(--janus-border-hover);
+}
+
+/* ─── Shimmer Loading ─── */
+.shimmer {
+  background: linear-gradient(90deg, transparent 25%, rgba(129, 140, 248, 0.06) 50%, transparent 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+/* ─── Prose ─── */
 .prose { max-width: 65ch; }
 .prose p { margin-bottom: 1em; }
-.prose-invert { color: #e5e7eb; }
-.prose-invert p { color: #d1d5db; }
-
-/* Line clamp */
+.prose h1, .prose h2, .prose h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 500; }
+.prose ul, .prose ol { margin-bottom: 1em; padding-left: 1.5em; }
+.prose li { margin-bottom: 0.25em; }
+.prose code { background: rgba(255,255,255,0.06); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; }
+.prose pre { background: rgba(0,0,0,0.4); padding: 1em; border-radius: 8px; overflow-x: auto; margin-bottom: 1em; }
+.prose pre code { background: transparent; padding: 0; }
+.prose blockquote { border-left: 2px solid rgba(129,140,248,0.3); padding-left: 1em; color: #9ca3af; }
+.prose-invert { color: #d1d5db; }
+
+/* ─── Line Clamp ─── */
 .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
 .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 
-/* Spin animation for orb rings */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+/* ─── Particle ─── */
+.particle { animation: floatUp var(--duration, 20s) linear infinite; animation-delay: var(--delay, 0s); }

frontend/src/app/intel/page.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Globe, Search, RefreshCw, ExternalLink, Sparkles,
+  TrendingUp, TrendingDown, Minus, Zap
+} from 'lucide-react';
+import { apiClient, financeClient } from '@/lib/api';
+import type { CaseRecord } from '@/lib/types';
+
+// ─── Sub-components ────────────────────────────────────────
+function StanceChip({ stance, score }: { stance: string; score: number }) {
+  if (stance === 'bullish') return <span className="flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2 py-0.5 rounded-full"><TrendingUp size={9} />Bullish {Math.round(score * 100)}%</span>;
+  if (stance === 'bearish') return <span className="flex items-center gap-1 text-[10px] text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-0.5 rounded-full"><TrendingDown size={9} />Bearish {Math.round((1 - score) * 100)}%</span>;
+  return <span className="flex items-center gap-1 text-[10px] text-gray-500 bg-white/[0.04] border border-white/[0.06] px-2 py-0.5 rounded-full"><Minus size={9} />Neutral</span>;
+}
+
+function ArticleCard({ article, index, onResearch }: { article: any; index: number; onResearch: (q: string) => void }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.04 }}
+      className="card hover:border-white/[0.12] group"
+    >
+      <div className="flex items-center gap-2 mb-2 flex-wrap">
+        <StanceChip stance={article.stance} score={article.sentiment_score} />
+        {article.source && <span className="text-[10px] text-gray-600">{article.source}</span>}
+        {article.published_at && <span className="text-[10px] text-gray-700">{new Date(article.published_at).toLocaleDateString()}</span>}
+      </div>
+      <h3 className="text-[14px] text-gray-200 leading-snug mb-2 group-hover:text-white transition-colors">{article.title}</h3>
+      {article.description && <p className="text-[12px] text-gray-500 leading-relaxed line-clamp-2">{article.description}</p>}
+      <div className="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.04]">
+        <button
+          onClick={() => onResearch(article.title + (article.description ? '. ' + article.description : ''))}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/15 text-[11px] text-indigo-400 transition-all"
+        >
+          <Sparkles size={11} /> Deep Research
+        </button>
+        {article.url && (
+          <a href={article.url} target="_blank" rel="noreferrer" className="flex items-center gap-1 text-[11px] text-gray-600 hover:text-gray-400 transition-colors">
+            <ExternalLink size={10} /> Source
+          </a>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+const STAGES = ['Routing to switchboard...', 'Research agent scanning...', 'Cross-referencing sources...', 'Synthesizing analysis...'];
+
+export default function IntelPage() {
+  const [headlines, setHeadlines] = useState<any[]>([]);
+  const [query, setQuery] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [searched, setSearched] = useState(false);
+  const [researchResult, setResearchResult] = useState<CaseRecord | null>(null);
+  const [researchLoading, setResearchLoading] = useState(false);
+  const [researchStage, setResearchStage] = useState(0);
+  const [researchQuery, setResearchQuery] = useState('');
+  const stageTimer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    financeClient.getHeadlines().then(data => setHeadlines(data)).catch(() => {});
+  }, []);
+
+  const searchNews = async () => {
+    if (!query.trim()) return;
+    setLoading(true); setSearched(true); setResearchResult(null);
+    try {
+      const data = await financeClient.analyzeNews(query, 10);
+      setHeadlines(data.articles || []);
+    } catch { /* silent */ }
+    finally { setLoading(false); }
+  };
+
+  const runResearch = async (articleText: string) => {
+    setResearchLoading(true); setResearchResult(null); setResearchQuery(articleText.slice(0, 80));
+    setResearchStage(0);
+    if (stageTimer.current) clearInterval(stageTimer.current);
+    stageTimer.current = setInterval(() => setResearchStage(p => (p + 1) % STAGES.length), 3000);
+    try {
+      const res = await apiClient.analyze({ user_input: articleText });
+      setResearchResult(res);
+    } catch { /* silent */ }
+    finally {
+      setResearchLoading(false);
+      if (stageTimer.current) clearInterval(stageTimer.current);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+            <Globe size={16} className="text-indigo-400" />
+          </div>
+          <div>
+            <h1 className="text-lg font-light text-gray-100">Intel Stream</h1>
+            <p className="text-[11px] text-gray-600">Search and analyze news with Janus deep research</p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <div className="flex-1 flex items-center gap-3 px-4 py-2.5 rounded-xl border border-white/[0.06] focus-within:border-indigo-500/30 transition-colors" style={{ background: 'var(--janus-surface)' }}>
+            <Search size={14} className="text-gray-600 shrink-0" />
+            <input
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && searchNews()}
+              placeholder="Search news — company, topic, event..."
+              className="flex-1 bg-transparent text-[13px] text-gray-200 placeholder-gray-600 focus:outline-none"
+            />
+          </div>
+          <button onClick={searchNews} disabled={loading} className="px-4 py-2 rounded-xl border border-white/[0.06] hover:border-indigo-500/20 text-[12px] text-gray-400 hover:text-indigo-300 transition-all disabled:opacity-40" style={{ background: 'var(--janus-surface)' }}>
+            {loading ? <RefreshCw size={14} className="animate-spin" /> : 'Search'}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 flex gap-0 overflow-hidden">
+        {/* Articles */}
+        <div className={`flex-1 overflow-y-auto p-4 space-y-3 transition-all duration-300 ${researchResult || researchLoading ? 'max-w-[50%]' : ''}`}>
+          <div className="text-[11px] text-gray-600 mb-2">
+            {searched ? `Results for "${query}"` : 'Top Business Headlines'} — click Deep Research on any article
+          </div>
+          {loading && (
+            <div className="flex flex-col items-center justify-center py-16 gap-3">
+              <RefreshCw size={20} className="text-indigo-400 animate-spin" />
+              <p className="text-[12px] text-gray-500">Fetching articles...</p>
+            </div>
+          )}
+          {!loading && headlines.map((a, i) => (
+            <ArticleCard key={`${a.title}-${i}`} article={a} index={i} onResearch={runResearch} />
+          ))}
+          {!loading && headlines.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Globe size={24} className="text-gray-700 mb-3" />
+              <p className="text-[13px] text-gray-500">No articles found.</p>
+            </div>
+          )}
+        </div>
+
+        {/* Research panel */}
+        <AnimatePresence>
+          {(researchResult || researchLoading) && (
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              className="flex-1 border-l border-white/[0.04] p-4 overflow-y-auto"
+            >
+              <div className="flex items-center justify-between mb-4">
+                <div className="text-[11px] text-gray-500 truncate">Research: {researchQuery}...</div>
+                <button
+                  onClick={() => { setResearchResult(null); setResearchLoading(false); }}
+                  className="text-[11px] text-gray-600 hover:text-gray-400 transition-colors"
+                >✕ Close</button>
+              </div>
+
+              {researchLoading ? (
+                <div className="card flex items-center gap-3 p-5">
+                  <div className="w-6 h-6 rounded-full border border-indigo-500/30 border-t-indigo-400 animate-spin" />
+                  <p className="text-[12px] text-indigo-400">{STAGES[researchStage]}</p>
+                </div>
+              ) : researchResult ? (
+                <div className="card p-5 space-y-4">
+                  <div className="flex items-center gap-2 text-[10px] text-indigo-400 uppercase tracking-wider">
+                    <Zap size={11} /> Research Complete
+                  </div>
+                  {researchResult.route && (
+                    <div className="flex gap-2 flex-wrap">
+                      <span className="px-2 py-0.5 rounded-full text-[10px] text-indigo-300 bg-indigo-500/10 border border-indigo-500/15">{researchResult.route.domain_pack}</span>
+                      <span className="px-2 py-0.5 rounded-full text-[10px] text-gray-500 bg-white/[0.04] border border-white/[0.06]">{researchResult.route.execution_mode}</span>
+                    </div>
+                  )}
+                  {researchResult.final_answer && (
+                    <div className="text-[13px] text-gray-300 leading-relaxed whitespace-pre-wrap">{researchResult.final_answer}</div>
+                  )}
+                </div>
+              ) : null}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import AppShell from "@/components/AppShell";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -19,8 +20,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className={`${inter.variable} h-full antialiased`}>
-      <body className="h-full bg-gray-950 text-gray-100 font-sans">
-        {children}
+      <body className="h-full font-sans" style={{ background: 'var(--janus-bg)', color: 'var(--janus-text)' }}>
+        <AppShell>{children}</AppShell>
       </body>
     </html>
   );

frontend/src/app/markets/page.tsx

@@ -0,0 +1,397 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Search, BarChart3, TrendingUp, TrendingDown, Minus,
+  AlertTriangle, Sparkles, Zap, RefreshCw, Scan, ExternalLink
+} from 'lucide-react';
+import { financeClient, apiClient } from '@/lib/api';
+import type { CaseRecord } from '@/lib/types';
+import { createChart, ColorType, CrosshairMode, CandlestickSeries, HistogramSeries } from 'lightweight-charts';
+import type { IChartApi, CandlestickData, HistogramData } from 'lightweight-charts';
+
+// ─── Chips ─────────────────────────────────────────────────
+function StanceChip({ stance, score }: { stance: string; score: number }) {
+  if (stance === 'bullish') return <span className="flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2 py-0.5 rounded-full"><TrendingUp size={9} />Bull {Math.round(score * 100)}%</span>;
+  if (stance === 'bearish') return <span className="flex items-center gap-1 text-[10px] text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-0.5 rounded-full"><TrendingDown size={9} />Bear {Math.round((1 - score) * 100)}%</span>;
+  return <span className="flex items-center gap-1 text-[10px] text-gray-500 bg-white/[0.04] border border-white/[0.06] px-2 py-0.5 rounded-full"><Minus size={9} />Neutral</span>;
+}
+
+function SignalBadge({ signal, conviction }: { signal: string; conviction: number }) {
+  const map: Record<string, string> = { BUY: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30', SELL: 'bg-red-500/15 text-red-300 border-red-500/30', HOLD: 'bg-amber-500/15 text-amber-300 border-amber-500/30', WATCH: 'bg-indigo-500/15 text-indigo-300 border-indigo-500/30' };
+  return (
+    <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-xl border ${map[signal] || map.WATCH}`}>
+      <span className="text-[12px] font-semibold">{signal}</span>
+      <span className="text-[10px] opacity-70">{Math.round(conviction * 100)}%</span>
+    </div>
+  );
+}
+
+// ─── Chart ─────────────────────────────────────────────────
+function CandlestickChart({ symbol, companyName, price, change, changePct, isPositive }: { symbol: string; companyName: string; price?: string; change?: string; changePct?: string; isPositive?: boolean }) {
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<IChartApi | null>(null);
+  const seriesRef = useRef<ReturnType<IChartApi['addSeries']> | null>(null);
+  const volumeSeriesRef = useRef<ReturnType<IChartApi['addSeries']> | null>(null);
+  const [timeframe, setTimeframe] = useState<'1D' | '1W' | '1M' | '3M' | '1Y'>('1M');
+
+  const generateChartData = useCallback((basePrice: number, tf: string): CandlestickData[] => {
+    const data: CandlestickData[] = [];
+    let currentPrice = basePrice;
+    const volatility = basePrice * 0.02;
+    const now = new Date();
+    let days = tf === '1D' ? 1 : tf === '1W' ? 7 : tf === '1M' ? 30 : tf === '3M' ? 90 : 365;
+    const startDate = new Date(now);
+    startDate.setDate(startDate.getDate() - days);
+    for (let i = 0; i < days; i++) {
+      const date = new Date(startDate);
+      date.setDate(date.getDate() + i);
+      if (date.getDay() === 0 || date.getDay() === 6) continue;
+      const dayVol = volatility * (0.5 + Math.random());
+      const open = currentPrice;
+      const high = open + Math.random() * dayVol;
+      const low = open - Math.random() * dayVol;
+      const close = open + (Math.random() - 0.48) * dayVol;
+      data.push({ time: date.toISOString().split('T')[0], open: +open.toFixed(2), high: +high.toFixed(2), low: +low.toFixed(2), close: +close.toFixed(2) });
+      currentPrice = close;
+    }
+    return data;
+  }, []);
+
+  const generateVolumeData = useCallback((candleData: CandlestickData[]): HistogramData[] => {
+    return candleData.map(c => ({ time: c.time, value: Math.floor(Math.random() * 10000000) + 1000000, color: c.close >= c.open ? 'rgba(34,197,94,0.25)' : 'rgba(239,68,68,0.25)' }));
+  }, []);
+
+  useEffect(() => {
+    if (!chartContainerRef.current) return;
+    const chart = createChart(chartContainerRef.current, {
+      layout: { background: { type: ColorType.Solid, color: 'transparent' }, textColor: '#6b7280', fontSize: 11 },
+      grid: { vertLines: { color: 'rgba(255,255,255,0.02)' }, horzLines: { color: 'rgba(255,255,255,0.02)' } },
+      crosshair: { mode: CrosshairMode.Normal },
+      rightPriceScale: { borderColor: 'rgba(255,255,255,0.04)', scaleMargins: { top: 0.1, bottom: 0.25 } },
+      timeScale: { borderColor: 'rgba(255,255,255,0.04)', timeVisible: false },
+      handleScroll: true, handleScale: true,
+    });
+    const candleSeries = chart.addSeries(CandlestickSeries, { upColor: '#22c55e', downColor: '#ef4444', borderUpColor: '#22c55e', borderDownColor: '#ef4444', wickUpColor: '#22c55e', wickDownColor: '#ef4444' });
+    const volumeSeries = chart.addSeries(HistogramSeries, { priceFormat: { type: 'volume' }, priceScaleId: 'volume' });
+    chart.priceScale('volume').applyOptions({ scaleMargins: { top: 0.8, bottom: 0 } });
+    chartRef.current = chart; seriesRef.current = candleSeries; volumeSeriesRef.current = volumeSeries;
+    return () => { chart.remove(); chartRef.current = null; seriesRef.current = null; volumeSeriesRef.current = null; };
+  }, []);
+
+  useEffect(() => {
+    if (!price || !seriesRef.current || !volumeSeriesRef.current) return;
+    const basePrice = parseFloat(price);
+    if (isNaN(basePrice)) return;
+    const candles = generateChartData(basePrice, timeframe);
+    const volumes = generateVolumeData(candles);
+    seriesRef.current.setData(candles); volumeSeriesRef.current.setData(volumes);
+    if (chartRef.current) chartRef.current.timeScale().fitContent();
+  }, [price, timeframe, generateChartData, generateVolumeData]);
+
+  return (
+    <div className="card p-0 overflow-hidden">
+      <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
+        <div>
+          <div className="flex items-center gap-2"><span className="text-lg font-light text-white">{symbol}</span><span className="text-[13px] text-gray-500">{companyName}</span></div>
+          {price && (
+            <div className="flex items-center gap-3 mt-1">
+              <span className="text-2xl font-light text-white">{parseFloat(price).toFixed(2)}</span>
+              {change && changePct && <span className={`text-[13px] ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>{isPositive ? '+' : ''}{parseFloat(change).toFixed(2)} ({changePct})</span>}
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-1">{(['1D','1W','1M','3M','1Y'] as const).map(tf => (
+          <button key={tf} onClick={() => setTimeframe(tf)} className={`px-3 py-1 rounded-lg text-[11px] transition-all ${timeframe === tf ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/20' : 'text-gray-600 hover:text-gray-400 hover:bg-white/[0.03]'}`}>{tf}</button>
+        ))}</div>
+      </div>
+      <div className="h-72"><div ref={chartContainerRef} className="w-full h-full" /></div>
+    </div>
+  );
+}
+
+// ─── Research Panel ────────────────────────────────────────
+const STAGES = ['Routing to switchboard...', 'Scanning sources...', 'Cross-referencing...', 'Synthesizing...'];
+
+// ═══════════════════════════════════════════════════════════
+export default function MarketsPage() {
+  const [query, setQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<{ symbol: string; name: string; region?: string }[]>([]);
+  const [intel, setIntel] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [news, setNews] = useState<any[]>([]);
+  const [newsLoading, setNewsLoading] = useState(false);
+  const [activeSymbol, setActiveSymbol] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [researchResult, setResearchResult] = useState<CaseRecord | null>(null);
+  const [researchLoading, setResearchLoading] = useState(false);
+  const [researchStage, setResearchStage] = useState(0);
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stageTimer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const handleQueryChange = (val: string) => {
+    setQuery(val);
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+    if (!val.trim()) { setSearchResults([]); return; }
+    searchTimer.current = setTimeout(async () => {
+      try { setSearchResults(await financeClient.searchTicker(val)); } catch { setSearchResults([]); }
+    }, 400);
+  };
+
+  const loadTicker = useCallback(async (symbol: string) => {
+    setLoading(true); setIntel(null); setNews([]); setActiveSymbol(symbol); setSearchResults([]); setError(null); setResearchResult(null);
+    try {
+      const data = await financeClient.getTickerIntelligence(symbol);
+      setIntel(data); setNewsLoading(true);
+      try { const nd = await financeClient.analyzeNews(data.company_name || symbol, 8); setNews(nd.articles || []); } catch { /* silent */ } finally { setNewsLoading(false); }
+    } catch { setError(`Could not load intelligence for ${symbol}. Ensure ALPHAVANTAGE_API_KEY is set.`); }
+    finally { setLoading(false); }
+  }, []);
+
+  const runDeepResearch = async () => {
+    if (!intel) return;
+    const q = `Analyze ${intel.company_name} (${intel.symbol}) stock. ${intel.overview?.description || ''}`.slice(0, 500);
+    setResearchLoading(true); setResearchResult(null); setResearchStage(0);
+    if (stageTimer.current) clearInterval(stageTimer.current);
+    stageTimer.current = setInterval(() => setResearchStage(p => (p + 1) % STAGES.length), 3000);
+    try { const res = await apiClient.analyze({ user_input: q }); setResearchResult(res); } catch { /* silent */ }
+    finally { setResearchLoading(false); if (stageTimer.current) clearInterval(stageTimer.current); }
+  };
+
+  const price = intel?.quote?.['05. price'];
+  const change = intel?.quote?.['09. change'];
+  const changePct = intel?.quote?.['10. change percent'];
+  const isPositive = change && parseFloat(change) >= 0;
+
+  const quickTickers = [
+    { s: 'RELIANCE.BSE', l: 'Reliance' },
+    { s: 'TCS.BSE', l: 'TCS' },
+    { s: 'AAPL', l: 'Apple' },
+    { s: 'TSLA', l: 'Tesla' },
+    { s: 'MSFT', l: 'Microsoft' },
+  ];
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+            <BarChart3 size={16} className="text-indigo-400" />
+          </div>
+          <div>
+            <h1 className="text-lg font-light text-gray-100">Markets</h1>
+            <p className="text-[11px] text-gray-600">Ticker intelligence powered by Alpha Vantage + Janus AI</p>
+          </div>
+        </div>
+        <div className="relative">
+          <div className="flex items-center gap-3 px-4 py-2.5 rounded-xl border border-white/[0.06] focus-within:border-indigo-500/30 transition-colors" style={{ background: 'var(--janus-surface)' }}>
+            <Search size={14} className="text-gray-600 shrink-0" />
+            <input
+              value={query}
+              onChange={e => handleQueryChange(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') { setSearchResults([]); loadTicker(query.toUpperCase()); } }}
+              placeholder="Search — RELIANCE, TCS, AAPL, TSLA..."
+              className="flex-1 bg-transparent text-[13px] text-gray-200 placeholder-gray-600 focus:outline-none"
+            />
+            {query && (
+              <button onClick={() => { setSearchResults([]); loadTicker(query.toUpperCase()); }} className="px-3 py-1 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-[11px] transition-colors">
+                Analyze
+              </button>
+            )}
+          </div>
+          {/* Autocomplete */}
+          <AnimatePresence>
+            {searchResults.length > 0 && (
+              <motion.div initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute top-full left-0 right-0 mt-1 rounded-xl border border-white/[0.08] overflow-hidden z-20" style={{ background: 'var(--janus-surface)' }}>
+                {searchResults.slice(0, 6).map(r => (
+                  <button key={r.symbol} onClick={() => { setQuery(r.symbol); loadTicker(r.symbol); }}
+                    className="w-full flex items-center justify-between px-4 py-2.5 hover:bg-white/[0.04] transition-colors text-left">
+                    <span className="text-[13px] text-indigo-300">{r.symbol}</span>
+                    <div className="flex items-center gap-3">
+                      {r.region && <span className="text-[10px] text-gray-600 bg-white/[0.04] px-1.5 py-0.5 rounded">{r.region}</span>}
+                      <span className="text-[12px] text-gray-500 truncate max-w-[200px]">{r.name}</span>
+                    </div>
+                  </button>
+                ))}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6 space-y-5">
+        {loading && (
+          <div className="flex flex-col items-center justify-center py-20 gap-3">
+            <RefreshCw size={20} className="text-indigo-400 animate-spin" />
+            <p className="text-[12px] text-indigo-400">Fetching intelligence for {activeSymbol}...</p>
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="flex flex-col items-center justify-center py-20 gap-3">
+            <AlertTriangle size={24} className="text-amber-500/50" />
+            <p className="text-[13px] text-amber-400 max-w-md text-center">{error}</p>
+          </div>
+        )}
+
+        {!loading && !intel && !error && (
+          <div className="flex flex-col items-center justify-center py-20 gap-3 text-center">
+            <BarChart3 size={28} className="text-gray-700" />
+            <p className="text-[13px] text-gray-500">Search any stock — Indian or global</p>
+            <div className="flex gap-2 mt-3 flex-wrap justify-center">
+              {quickTickers.map(({ s, l }) => (
+                <button key={s} onClick={() => { setQuery(s); loadTicker(s); }} className="px-3 py-1.5 rounded-full border border-white/[0.06] hover:border-indigo-500/20 text-[12px] text-gray-500 hover:text-indigo-300 transition-all">{l}</button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {!loading && intel && (
+          <>
+            <CandlestickChart symbol={intel.symbol} companyName={intel.company_name} price={price} change={change} changePct={changePct} isPositive={!!isPositive} />
+
+            {/* Overview card */}
+            <div className="card p-5">
+              <div className="flex items-start justify-between gap-4 flex-wrap">
+                <div>
+                  <div className="flex items-center gap-3 mb-1">
+                    <span className="text-xl font-light text-white">{intel.symbol}</span>
+                    <span className="text-[13px] text-gray-500">{intel.company_name}</span>
+                  </div>
+                  <div className="flex items-center gap-2 mt-2 flex-wrap">
+                    {intel.overview?.sector && <span className="text-[10px] text-gray-500 bg-white/[0.04] px-2 py-0.5 rounded">{intel.overview.sector}</span>}
+                    {intel.overview?.industry && <span className="text-[10px] text-gray-500 bg-white/[0.04] px-2 py-0.5 rounded">{intel.overview.industry}</span>}
+                  </div>
+                </div>
+                <div className="flex flex-col items-end gap-2">
+                  {intel.ai_signal && <SignalBadge signal={intel.ai_signal.signal} conviction={intel.ai_signal.conviction} />}
+                  {intel.stance && <StanceChip stance={intel.stance.stance} score={intel.stance.sentiment_score} />}
+                </div>
+              </div>
+
+              {intel.ai_signal?.reasoning && (
+                <div className="mt-4 pt-4 border-t border-white/[0.04]">
+                  <div className="flex items-center gap-2 mb-1.5 text-[10px] text-indigo-400 uppercase tracking-wider"><Zap size={10} /> AI Signal</div>
+                  <p className="text-[12px] text-gray-400 leading-relaxed">{intel.ai_signal.reasoning}</p>
+                </div>
+              )}
+
+              <div className="mt-4 pt-4 border-t border-white/[0.04]">
+                <button onClick={runDeepResearch} disabled={researchLoading} className="flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/15 text-[12px] text-indigo-400 transition-all disabled:opacity-40">
+                  <Sparkles size={12} className={researchLoading ? 'animate-pulse' : ''} />
+                  {researchLoading ? 'Running research...' : 'Deep Research — Full Pipeline'}
+                </button>
+              </div>
+            </div>
+
+            {/* Research result */}
+            {(researchResult || researchLoading) && (
+              <div className="card p-5">
+                {researchLoading ? (
+                  <div className="flex items-center gap-3">
+                    <div className="w-5 h-5 rounded-full border border-indigo-500/30 border-t-indigo-400 animate-spin" />
+                    <p className="text-[12px] text-indigo-400">{STAGES[researchStage]}</p>
+                  </div>
+                ) : researchResult ? (
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-[10px] text-indigo-400 uppercase tracking-wider"><Zap size={11} /> Research Complete</div>
+                    {researchResult.final_answer && (
+                      <div className="text-[13px] text-gray-300 leading-relaxed whitespace-pre-wrap">{researchResult.final_answer}</div>
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            )}
+
+            {/* Fundamentals + Events grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="card p-4 space-y-2">
+                <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-3">Fundamentals</div>
+                {(() => {
+                  const rows: [string, string | undefined][] = [
+                    ['P/E Ratio', intel.overview?.pe_ratio],
+                    ['Market Cap', intel.overview?.market_cap ? (Number(intel.overview.market_cap) > 1e9 ? `$${(Number(intel.overview.market_cap) / 1e9).toFixed(1)}B` : Number(intel.overview.market_cap) > 1e6 ? `$${(Number(intel.overview.market_cap) / 1e6).toFixed(0)}M` : intel.overview.market_cap) : undefined],
+                    ['52W High', intel.overview?.['52_week_high']],
+                    ['52W Low', intel.overview?.['52_week_low']],
+                    ['Analyst Target', intel.overview?.analyst_target],
+                    ['Volume', intel.quote?.['06. volume'] ? Number(intel.quote['06. volume']).toLocaleString() : undefined],
+                    ['Previous Close', intel.quote?.['08. previous close']],
+                    ['Day High', intel.quote?.['03. high']],
+                    ['Day Low', intel.quote?.['04. low']],
+                    ['Open', intel.quote?.['02. open']],
+                  ];
+                  const validRows = rows.filter(([, v]) => v && v !== 'None' && v !== '-' && v !== 'N/A' && v !== '0' && v !== 'undefined');
+                  return validRows.length > 0 ? (
+                    validRows.map(([k, v]) => (
+                      <div key={k} className="flex justify-between text-[12px] border-b border-white/[0.03] pb-1.5">
+                        <span className="text-gray-500">{k}</span><span className="text-gray-300">{v}</span>
+                      </div>
+                    ))
+                  ) : (
+                    <div className="text-center py-6">
+                      <p className="text-[12px] text-gray-600">No fundamental data available.</p>
+                      <p className="text-[10px] text-gray-700 mt-1">Ticker may not be covered by Alpha Vantage.</p>
+                    </div>
+                  );
+                })()}
+              </div>
+              <div className="card p-4 space-y-3">
+                <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-3">Event Intelligence</div>
+                {intel.event_impact && intel.event_impact.event_count > 0 ? (
+                  <>
+                    <div className="text-[12px]"><span className="text-gray-500">Impact: </span><span className={intel.event_impact.impact_level === 'high' || intel.event_impact.impact_level === 'very_high' ? 'text-amber-400' : 'text-gray-300'}>{intel.event_impact.impact_level}</span></div>
+                    <div className="text-[12px]"><span className="text-gray-500">Volatility: </span><span className={intel.event_impact.volatility_level === 'high' || intel.event_impact.volatility_level === 'very_high' ? 'text-red-400' : 'text-gray-300'}>{intel.event_impact.volatility_level}</span></div>
+                    <div className="text-[12px]"><span className="text-gray-500">Events: </span><span className="text-gray-300">{intel.event_impact.event_count} detected</span></div>
+                    {intel.event_impact.detected_events && intel.event_impact.detected_events.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-white/[0.04]">
+                        {intel.event_impact.detected_events.map((ev: any, i: number) => (
+                          <span key={i} className="px-2 py-0.5 rounded text-[9px] text-amber-300 bg-amber-500/10 border border-amber-500/15 uppercase tracking-wider">
+                            {ev.event_type?.replace(/_/g, ' ')}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <div className="text-[12px]"><span className="text-gray-500">Impact: </span><span className="text-emerald-400">Low</span></div>
+                    <div className="text-[12px]"><span className="text-gray-500">Volatility: </span><span className="text-emerald-400">Low</span></div>
+                    <div className="text-[12px]"><span className="text-gray-500">Events: </span><span className="text-gray-300">None detected</span></div>
+                    <p className="text-[10px] text-gray-700 mt-2 pt-2 border-t border-white/[0.04]">
+                      No significant market events detected in recent news for this ticker. This usually indicates stable conditions.
+                    </p>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* News */}
+            {(news.length > 0 || newsLoading) && (
+              <div>
+                <div className="flex items-center gap-2 text-[11px] text-gray-500 uppercase tracking-wider mb-3">
+                  <Scan size={11} className="text-indigo-400" /> News
+                  {newsLoading && <RefreshCw size={10} className="animate-spin text-indigo-400" />}
+                </div>
+                <div className="space-y-3">
+                  {news.map((a: any, i: number) => (
+                    <div key={`${a.title}-${i}`} className="card p-3 hover:border-white/[0.12]">
+                      <p className="text-[13px] text-gray-300 leading-snug mb-1">{a.title}</p>
+                      {a.description && <p className="text-[11px] text-gray-600 line-clamp-1">{a.description}</p>}
+                      <div className="flex items-center gap-3 mt-2">
+                        {a.source && <span className="text-[10px] text-gray-600">{a.source}</span>}
+                        {a.url && <a href={a.url} target="_blank" rel="noreferrer" className="text-[10px] text-indigo-400 hover:text-indigo-300 flex items-center gap-0.5"><ExternalLink size={8} /> Read</a>}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/page.tsx

@@ -2,950 +2,386 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Send, Zap, Sparkles, Activity, Search, TrendingUp, TrendingDown,
-  Minus, AlertTriangle, Shield, CheckCircle, Globe, BarChart3,
-  RefreshCw, ExternalLink, Eye, Scan, ChevronRight, X, Play,
-  Clock, Target, AlertCircle, Layers, Brain, Cpu, ArrowRight,
-  FileText, MessageSquare, ChevronDown, Terminal, Radio, GitBranch,
-  Bell, Moon, Sun, Sunrise, Sunset, Activity as PulseIcon, Database, Network,
-  ChevronUp, Star, Hash, Eye as EyeIcon, Info, Plus,
-  ChevronLeft, ChevronRight as ChevronRightIcon, Menu, X as XIcon
-} from 'lucide-react';
-import { apiClient, financeClient } from '@/lib/api';
-import type { CaseRecord } from '@/lib/types';
-import { createChart, ColorType, CrosshairMode, CandlestickSeries, HistogramSeries } from 'lightweight-charts';
-import type { IChartApi, CandlestickData, HistogramData } from 'lightweight-charts';
-
-// ─── Types ───────────────────────────────────────────────────
-interface DaemonStatus {
-  running: boolean;
-  cycle_count: number;
-  last_run: string;
-  circadian: {
-    current_phase: string;
-    phase_name: string;
-    phase_description: string;
-    priority: string;
-    current_tasks: string[];
-  };
-  signal_queue?: {
-    total_signals: number;
-    severity_counts: Record<string, number>;
-    type_counts: Record<string, number>;
+import { Send, Sparkles, Zap, ArrowUp } from 'lucide-react';
+import { apiClient } from '@/lib/api';
+
+// ─── Types ───────────────────────────────────────────────
+interface Message {
+  id: string;
+  role: 'user' | 'janus';
+  content: string;
+  timestamp: Date;
+  metadata?: {
+    domain?: string;
+    queryType?: string;
+    elapsed?: number;
+    confidence?: number;
+    routeInfo?: { domain_pack?: string; execution_mode?: string; complexity?: string };
   };
-  signals?: number;
-  watchlist?: string[];
-  topics?: string[];
-}
-
-interface Alert {
-  type: string;
-  title: string;
-  description: string;
-  source: string;
-  severity: string;
-  sentiment: string;
-  timestamp: string;
-  url?: string;
 }
 
-interface MemoryStats {
-  queries: number;
-  entities: number;
-  insights: number;
-}
-
-// ─── Nav Items ───────────────────────────────────────────────
-const navItems = [
-  { id: 'command', label: 'Command', icon: Sparkles, section: 'Main' },
-  { id: 'intel', label: 'Intel Stream', icon: Globe, section: 'Main' },
-  { id: 'markets', label: 'Markets', icon: BarChart3, section: 'Main' },
-  { id: 'workspace', label: 'Workspace', icon: Layers, section: 'Main' },
-  { id: 'pulse', label: 'Pulse', icon: PulseIcon, section: 'Main' },
-  { id: 'cases', label: 'Cases', icon: GitBranch, section: 'System' },
-  { id: 'simulation', label: 'Simulations', icon: Zap, section: 'System' },
-  { id: 'sentinel', label: 'Sentinel', icon: Shield, section: 'System' },
-  { id: 'prompts', label: 'Prompt Lab', icon: Terminal, section: 'System' },
-  { id: 'config', label: 'Config', icon: Cpu, section: 'System' },
-];
-
-// ─── Janus Orb ───────────────────────────────────────────────
-function JanusOrb({ size = 32, thinking = false, phase = 'daytime' }: { size?: number; thinking?: boolean; phase?: string }) {
-  const phaseColors: Record<string, { from: string; to: string; shadow: string }> = {
-    morning: { from: '#fbbf24', to: '#f59e0b', shadow: 'rgba(251,191,36,0.4)' },
-    daytime: { from: '#818cf8', to: '#4f46e5', shadow: 'rgba(99,102,241,0.4)' },
-    evening: { from: '#a78bfa', to: '#7c3aed', shadow: 'rgba(167,139,250,0.4)' },
-    night: { from: '#6366f1', to: '#312e81', shadow: 'rgba(99,102,241,0.3)' },
-  };
-  const colors = phaseColors[phase] || phaseColors.daytime;
+// ─── Janus Orb ────────────────────────────────────────────
+function JanusOrb({ size = 36, thinking = false }: { size?: number; thinking?: boolean }) {
   return (
     <div className="relative shrink-0" style={{ width: size, height: size }}>
-      <motion.div className="absolute inset-0 rounded-full"
-        style={{ background: `radial-gradient(circle at 30% 30%, ${colors.from}, ${colors.to} 50%, #0f172a 100%)`, boxShadow: thinking ? `0 0 30px ${colors.shadow}, 0 0 60px ${colors.shadow}` : `0 0 15px ${colors.shadow}` }}
-        animate={thinking ? { scale: [1, 1.12, 1] } : { scale: [1, 1.03, 1] }} transition={{ duration: thinking ? 1.2 : 4, repeat: Infinity, ease: 'easeInOut' }} />
-      {thinking && <>
-        <div className="absolute inset-[-6px] rounded-full border border-indigo-400/30" style={{ borderTopColor: 'transparent', borderBottomColor: 'transparent', animation: 'spin 2s linear infinite' }} />
-        <div className="absolute inset-[-12px] rounded-full border border-violet-400/20" style={{ borderLeftColor: 'transparent', borderRightColor: 'transparent', animation: 'spin 3s linear infinite reverse' }} />
-      </>}
+      <motion.div
+        className="absolute inset-0 rounded-full"
+        style={{
+          background: 'radial-gradient(circle at 35% 35%, #818cf8, #4f46e5 55%, #1e1b4b 100%)',
+          boxShadow: thinking
+            ? '0 0 24px rgba(99,102,241,0.5), 0 0 48px rgba(99,102,241,0.2)'
+            : '0 0 12px rgba(99,102,241,0.25)',
+        }}
+        animate={thinking ? { scale: [1, 1.1, 1] } : { scale: 1 }}
+        transition={{ duration: 1.5, repeat: thinking ? Infinity : 0, ease: 'easeInOut' }}
+      />
+      {thinking && (
+        <>
+          <div
+            className="absolute inset-[-4px] rounded-full border border-indigo-400/30"
+            style={{ borderTopColor: 'transparent', borderBottomColor: 'transparent', animation: 'spin 2s linear infinite' }}
+          />
+          <div
+            className="absolute inset-[-8px] rounded-full border border-violet-400/15"
+            style={{ borderLeftColor: 'transparent', borderRightColor: 'transparent', animation: 'spin 3s linear infinite reverse' }}
+          />
+        </>
+      )}
     </div>
   );
 }
 
-// ─── Art Piece ───────────────────────────────────────────────
-function ArtPiece({ onUnlock }: { onUnlock: () => void }) {
-  const [show, setShow] = useState(false);
-  useEffect(() => { const t = setTimeout(() => setShow(true), 2000); return () => clearTimeout(t); }, []);
-  return (
-    <motion.div key="art" exit={{ opacity: 0, scale: 1.05, filter: 'blur(30px)' }} transition={{ duration: 1.5 }}
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-gray-950 overflow-hidden">
-      <motion.div className="absolute w-[500px] h-[500px] rounded-full"
-        style={{ background: 'radial-gradient(circle, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 40%, transparent 70%)' }}
-        animate={{ scale: [1, 1.2, 1], opacity: [0.5, 0.8, 0.5] }} transition={{ duration: 6, repeat: Infinity }} />
-      <motion.div initial={{ opacity: 0, scale: 0 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }} className="relative z-10 mb-10">
-        <JanusOrb size={64} thinking />
-      </motion.div>
-      <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.8, duration: 1.5 }} className="relative z-10 text-center">
-        <h1 className="text-7xl font-extralight tracking-[0.3em] mb-4 bg-gradient-to-r from-indigo-400 via-violet-400 to-indigo-400 bg-clip-text text-transparent">JANUS</h1>
-        <motion.div initial={{ opacity: 0, width: 0 }} animate={{ opacity: 1, width: '100%' }} transition={{ delay: 1.5, duration: 2 }}
-          className="h-px bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent mb-6" />
-        <motion.p initial={{ opacity: 0 }} animate={{ opacity: 0.5 }} transition={{ delay: 2, duration: 1.5 }}
-          className="font-mono text-xs tracking-[0.4em] text-gray-400 uppercase">living intelligence system</motion.p>
-      </motion.div>
-      <AnimatePresence>
-        {show && (
-          <motion.button initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} transition={{ duration: 0.8 }} onClick={onUnlock} className="relative z-10 mt-16 group">
-            <div className="relative px-10 py-3.5 rounded-full border border-white/10 bg-white/[0.03] backdrop-blur-sm overflow-hidden transition-all duration-500 group-hover:border-indigo-500/30 group-hover:bg-white/[0.06]">
-              <span className="relative z-10 text-xs tracking-[0.3em] uppercase text-gray-300 group-hover:text-white transition-colors">Initialize System</span>
-              <div className="absolute inset-0 bg-gradient-to-r from-indigo-600/10 to-violet-600/10 translate-y-full group-hover:translate-y-0 transition-transform duration-700" />
-            </div>
-          </motion.button>
-        )}
-      </AnimatePresence>
-    </motion.div>
-  );
-}
-
-// ─── Typewriter ──────────────────────────────────────────────
-function Typewriter({ text, speed = 10 }: { text: string; speed?: number }) {
+// ─── Typewriter ───────────────────────────────────────────
+function Typewriter({ text, speed = 8, onComplete }: { text: string; speed?: number; onComplete?: () => void }) {
   const [displayed, setDisplayed] = useState('');
   const idx = useRef(0);
+  const completed = useRef(false);
+
   useEffect(() => {
-    idx.current = 0; setDisplayed('');
+    idx.current = 0;
+    setDisplayed('');
+    completed.current = false;
+
     const iv = setInterval(() => {
-      if (idx.current < text.length) { setDisplayed(p => p + text[idx.current]); idx.current++; } else clearInterval(iv);
+      if (idx.current < text.length) {
+        // Write multiple characters per tick for speed
+        const chunk = text.slice(idx.current, idx.current + 3);
+        setDisplayed(p => p + chunk);
+        idx.current += 3;
+      } else {
+        clearInterval(iv);
+        if (!completed.current) {
+          completed.current = true;
+          onComplete?.();
+        }
+      }
     }, speed);
     return () => clearInterval(iv);
-  }, [text, speed]);
-  return <span>{displayed}{displayed.length < text.length && <span className="inline-block w-0.5 h-4 bg-indigo-400 ml-0.5 animate-pulse" />}</span>;
-}
-
-// ─── Thinking ────────────────────────────────────────────────
-const STAGES = ['Routing to switchboard...', 'Research agent scanning sources...', 'Cross-referencing databases...', 'Synthesizer composing analysis...'];
-function ThinkingDisplay({ stage }: { stage: string }) {
-  return (
-    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center justify-center py-16 gap-6">
-      <JanusOrb size={56} thinking />
-      <div className="text-center mt-4">
-        <motion.p key={stage} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="text-sm font-mono text-indigo-300">{stage}</motion.p>
-        <div className="flex items-center justify-center gap-1.5 mt-3">
-          {[0,1,2,3,4].map(i => <motion.div key={i} className="w-1 h-1 rounded-full bg-indigo-400" animate={{ opacity: [0.2, 1, 0.2], scale: [0.8, 1.2, 0.8] }} transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.15 }} />)}
-        </div>
-      </div>
-    </motion.div>
-  );
-}
+  }, [text, speed, onComplete]);
 
-// ─── Confidence Ring ─────────────────────────────────────────
-function ConfidenceRing({ value, label }: { value: number; label: string }) {
-  const pct = Math.round(value * 100);
-  const circ = 2 * Math.PI * 18;
   return (
-    <div className="flex flex-col items-center gap-1.5">
-      <div className="relative w-10 h-10">
-        <svg className="w-full h-full -rotate-90" viewBox="0 0 40 40">
-          <circle cx="20" cy="20" r="18" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="2" />
-          <motion.circle cx="20" cy="20" r="18" fill="none" stroke={value >= 0.7 ? '#22c55e' : value >= 0.5 ? '#eab308' : '#ef4444'} strokeWidth="2" strokeLinecap="round" strokeDasharray={circ} initial={{ strokeDashoffset: circ }} animate={{ strokeDashoffset: circ * (1 - value) }} transition={{ duration: 1.5, ease: 'easeOut' }} />
-        </svg>
-        <span className="absolute inset-0 flex items-center justify-center text-[10px] font-mono text-gray-300">{pct}</span>
-      </div>
-      <span className="text-[9px] font-mono text-gray-500 uppercase tracking-wider">{label}</span>
-    </div>
+    <span>
+      {displayed}
+      {displayed.length < text.length && (
+        <span className="inline-block w-0.5 h-4 bg-indigo-400/70 ml-0.5 animate-pulse align-middle" />
+      )}
+    </span>
   );
 }
 
-// ─── Badges ──────────────────────────────────────────────────
-function StanceChip({ stance, score }: { stance: string; score: number }) {
-  if (stance === 'bullish') return <span className="flex items-center gap-1 text-[10px] font-mono text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2 py-0.5 rounded-full"><TrendingUp size={9} />Bull {Math.round(score * 100)}%</span>;
-  if (stance === 'bearish') return <span className="flex items-center gap-1 text-[10px] font-mono text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-0.5 rounded-full"><TrendingDown size={9} />Bear {Math.round((1 - score) * 100)}%</span>;
-  return <span className="flex items-center gap-1 text-[10px] font-mono text-gray-500 bg-white/5 border border-white/10 px-2 py-0.5 rounded-full"><Minus size={9} />Neutral</span>;
-}
-
-function SignalBadge({ signal, conviction }: { signal: string; conviction: number }) {
-  const map: Record<string, string> = { BUY: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40', SELL: 'bg-red-500/20 text-red-300 border-red-500/40', HOLD: 'bg-amber-500/20 text-amber-300 border-amber-500/40', WATCH: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40' };
-  return <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-xl border ${map[signal] || map.WATCH}`}><span className="text-sm font-mono font-bold">{signal}</span><span className="text-[10px] font-mono opacity-70">{Math.round(conviction * 100)}% conviction</span></div>;
-}
-
-function SeverityBadge({ severity }: { severity: string }) {
-  const map: Record<string, string> = { critical: 'bg-red-500/20 text-red-300 border-red-500/30', high: 'bg-orange-500/20 text-orange-300 border-orange-500/30', medium: 'bg-amber-500/20 text-amber-300 border-amber-500/30', low: 'bg-gray-500/20 text-gray-400 border-gray-500/30' };
-  return <span className={`px-2 py-0.5 rounded border text-[9px] font-mono uppercase tracking-wider ${map[severity] || map.low}`}>{severity}</span>;
-}
+// ─── Thinking Indicator ───────────────────────────────────
+const STAGES = [
+  'Routing to switchboard...',
+  'Research agent scanning...',
+  'Cross-referencing sources...',
+  'Synthesizing analysis...',
+];
 
-// ─── Research Panel ──────────────────────────────────────────
-function ResearchPanel({ result, loading, stage }: { result: CaseRecord | null; loading: boolean; stage: string }) {
-  if (loading) return (
-    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="glass rounded-2xl p-6 border border-indigo-500/20 space-y-4">
-      <div className="flex items-center gap-3">
-        <JanusOrb size={28} thinking />
-        <div>
-          <p className="text-xs font-mono text-indigo-300">{stage}</p>
-          <div className="flex gap-1 mt-1.5">{[0,1,2,3,4].map(i => <motion.div key={i} className="w-1 h-1 rounded-full bg-indigo-400" animate={{ opacity: [0.2,1,0.2] }} transition={{ duration: 1.2, repeat: Infinity, delay: i*0.15 }} />)}</div>
-        </div>
-      </div>
-    </motion.div>
-  );
-  if (!result) return null;
+function ThinkingIndicator({ stage }: { stage: string }) {
   return (
-    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="glass rounded-2xl p-5 border border-indigo-500/20 space-y-4">
-      <div className="flex items-center gap-2 text-[10px] font-mono text-indigo-400 uppercase tracking-wider"><Zap size={12} /> JANUS Research Complete</div>
-      {result.outputs && result.outputs.filter((o: any) => o.confidence > 0).length > 0 && (
-        <div className="flex items-center gap-5">{result.outputs.filter((o: any) => o.confidence > 0).map((o: any, idx: number) => (<ConfidenceRing key={`${o.agent || 'output'}-${idx}`} value={o.confidence} label={o.agent || `Agent ${idx + 1}`} />))}</div>
-      )}
-      {result.route && (
-        <div className="flex gap-2 flex-wrap">
-          <span className="px-2 py-0.5 rounded-full text-[9px] font-mono uppercase bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">{result.route.domain_pack}</span>
-          <span className="px-2 py-0.5 rounded-full text-[9px] font-mono uppercase bg-white/5 text-gray-400 border border-white/10">{result.route.execution_mode}</span>
-          <span className="px-2 py-0.5 rounded-full text-[9px] font-mono uppercase bg-white/5 text-gray-400 border border-white/10">{result.route.complexity}</span>
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -8 }}
+      className="flex items-start gap-3 max-w-[768px]"
+    >
+      <JanusOrb size={32} thinking />
+      <div className="pt-1">
+        <motion.p
+          key={stage}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="text-sm text-gray-400"
+        >
+          {stage}
+        </motion.p>
+        <div className="flex items-center gap-1 mt-2">
+          {[0, 1, 2].map(i => (
+            <motion.div
+              key={i}
+              className="w-1 h-1 rounded-full bg-indigo-400"
+              animate={{ opacity: [0.3, 1, 0.3] }}
+              transition={{ duration: 1, repeat: Infinity, delay: i * 0.2 }}
+            />
+          ))}
         </div>
-      )}
-      {result.final_answer && (<div className="text-sm text-gray-200 leading-relaxed whitespace-pre-wrap font-mono"><Typewriter text={result.final_answer} speed={6} /></div>)}
+      </div>
     </motion.div>
   );
 }
 
-// ─── Article Card ────────────────────────────────────────────
-function ArticleCard({ article, index, onResearch }: { article: any; index: number; onResearch: (q: string) => void }) {
-  return (
-    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.04 }}
-      className="glass rounded-xl border border-white/[0.04] hover:border-white/10 transition-colors p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-2 flex-wrap">
-            <StanceChip stance={article.stance} score={article.sentiment_score} />
-            {article.source && <span className="text-[9px] font-mono text-gray-600">{article.source}</span>}
-            {article.published_at && <span className="text-[9px] font-mono text-gray-700">{new Date(article.published_at).toLocaleDateString()}</span>}
-          </div>
-          <p className="text-sm text-gray-200 leading-snug mb-2">{article.title}</p>
-          {article.description && <p className="text-xs text-gray-500 leading-relaxed line-clamp-2">{article.description}</p>}
+// ─── Message Bubble ───────────────────────────────────────
+function MessageBubble({ message, isLatest }: { message: Message; isLatest: boolean }) {
+  const isUser = message.role === 'user';
+
+  if (isUser) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex justify-end"
+      >
+        <div className="bubble-user px-5 py-3 max-w-[600px]">
+          <p className="text-[14px] text-gray-200 leading-relaxed">{message.content}</p>
         </div>
-      </div>
-      <div className="flex items-center gap-3 mt-3 pt-3 border-t border-white/5">
-        <button onClick={() => onResearch(article.title + (article.description ? '. ' + article.description : ''))}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-600/20 hover:bg-indigo-600/40 border border-indigo-500/30 text-[10px] font-mono text-indigo-300 transition-colors uppercase tracking-wider">
-          <Sparkles size={10} /> Deep Research
-        </button>
-        {article.url && (<a href={article.url} target="_blank" rel="noreferrer" className="flex items-center gap-1 text-[10px] font-mono text-gray-600 hover:text-gray-400 transition-colors"><ExternalLink size={10} /> Source</a>)}
-      </div>
-    </motion.div>
-  );
-}
+      </motion.div>
+    );
+  }
 
-// ─── Alert Card ──────────────────────────────────────────────
-function AlertCard({ alert, index }: { alert: any; index: number }) {
   return (
-    <motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: index * 0.05 }}
-      className="glass rounded-xl border border-white/[0.04] hover:border-white/10 transition-colors p-3">
-      <div className="flex items-start gap-3">
-        <div className="mt-1">{alert.severity === 'high' || alert.severity === 'critical' ? <AlertTriangle size={14} className="text-red-400" /> : <Info size={14} className="text-amber-400" />}</div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1 flex-wrap">
-            <SeverityBadge severity={alert.severity} />
-            <span className="text-[9px] font-mono text-gray-600">{alert.type}</span>
-            {alert.source && <span className="text-[9px] font-mono text-gray-700">{alert.source}</span>}
-          </div>
-          <p className="text-xs text-gray-300 leading-snug">{alert.title}</p>
-          {alert.description && <p className="text-[10px] text-gray-600 mt-1 line-clamp-1">{alert.description}</p>}
-          <div className="flex items-center gap-2 mt-2">
-            <span className="text-[9px] font-mono text-gray-700">{new Date(alert.timestamp).toLocaleString()}</span>
-            {alert.url && (<a href={alert.url} target="_blank" rel="noreferrer" className="text-[9px] font-mono text-indigo-400 hover:text-indigo-300 flex items-center gap-0.5"><ExternalLink size={8} /> Read</a>)}
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="flex items-start gap-3 max-w-[768px]"
+    >
+      <div className="mt-0.5 shrink-0">
+        <JanusOrb size={28} />
+      </div>
+      <div className="flex-1 min-w-0">
+        {/* Route metadata pills */}
+        {message.metadata?.routeInfo && (
+          <div className="flex items-center gap-2 mb-2 flex-wrap">
+            {message.metadata.routeInfo.domain_pack && (
+              <span className="px-2 py-0.5 rounded-full text-[10px] text-indigo-400 bg-indigo-500/10 border border-indigo-500/15">
+                {message.metadata.routeInfo.domain_pack}
+              </span>
+            )}
+            {message.metadata.routeInfo.execution_mode && (
+              <span className="px-2 py-0.5 rounded-full text-[10px] text-gray-500 bg-white/[0.04] border border-white/[0.06]">
+                {message.metadata.routeInfo.execution_mode}
+              </span>
+            )}
+            {message.metadata.elapsed && (
+              <span className="text-[10px] text-gray-600">
+                {message.metadata.elapsed}s
+              </span>
+            )}
           </div>
+        )}
+
+        {/* Response content */}
+        <div className="text-[14px] text-gray-300 leading-[1.7] whitespace-pre-wrap">
+          {isLatest ? (
+            <Typewriter text={message.content} speed={6} />
+          ) : (
+            message.content
+          )}
         </div>
       </div>
     </motion.div>
   );
 }
 
-// ─── Candlestick Chart ───────────────────────────────────────
-function CandlestickChart({ symbol, companyName, price, change, changePct, isPositive }: { symbol: string; companyName: string; price?: string; change?: string; changePct?: string; isPositive?: boolean }) {
-  const chartContainerRef = useRef<HTMLDivElement>(null);
-  const chartRef = useRef<IChartApi | null>(null);
-  const seriesRef = useRef<ReturnType<IChartApi['addSeries']> | null>(null);
-  const volumeSeriesRef = useRef<ReturnType<IChartApi['addSeries']> | null>(null);
-  const [timeframe, setTimeframe] = useState<'1D' | '1W' | '1M' | '3M' | '1Y'>('1M');
-  const [loading, setLoading] = useState(false);
-
-  const generateChartData = useCallback((basePrice: number, tf: string): CandlestickData[] => {
-    const data: CandlestickData[] = [];
-    let currentPrice = basePrice;
-    const volatility = basePrice * 0.02;
-    const now = new Date();
-    let days = tf === '1D' ? 1 : tf === '1W' ? 7 : tf === '1M' ? 30 : tf === '3M' ? 90 : 365;
-    const startDate = new Date(now);
-    startDate.setDate(startDate.getDate() - days);
-    for (let i = 0; i < days; i++) {
-      const date = new Date(startDate);
-      date.setDate(date.getDate() + i);
-      if (date.getDay() === 0 || date.getDay() === 6) continue;
-      const dayVol = volatility * (0.5 + Math.random());
-      const open = currentPrice;
-      const high = open + Math.random() * dayVol;
-      const low = open - Math.random() * dayVol;
-      const close = open + (Math.random() - 0.48) * dayVol;
-      data.push({ time: date.toISOString().split('T')[0], open: parseFloat(open.toFixed(2)), high: parseFloat(high.toFixed(2)), low: parseFloat(low.toFixed(2)), close: parseFloat(close.toFixed(2)) });
-      currentPrice = close;
-    }
-    return data;
-  }, []);
-
-  const generateVolumeData = useCallback((candleData: CandlestickData[]): HistogramData[] => {
-    return candleData.map(candle => ({ time: candle.time, value: Math.floor(Math.random() * 10000000) + 1000000, color: candle.close >= candle.open ? 'rgba(34, 197, 94, 0.3)' : 'rgba(239, 68, 68, 0.3)' }));
-  }, []);
-
-  useEffect(() => {
-    if (!chartContainerRef.current) return;
-    const chart = createChart(chartContainerRef.current, {
-      layout: { background: { type: ColorType.Solid, color: 'transparent' }, textColor: '#9ca3af', fontSize: 11 },
-      grid: { vertLines: { color: 'rgba(255, 255, 255, 0.03)' }, horzLines: { color: 'rgba(255, 255, 255, 0.03)' } },
-      crosshair: { mode: CrosshairMode.Normal },
-      rightPriceScale: { borderColor: 'rgba(255, 255, 255, 0.05)', scaleMargins: { top: 0.1, bottom: 0.25 } },
-      timeScale: { borderColor: 'rgba(255, 255, 255, 0.05)', timeVisible: false },
-      handleScroll: true, handleScale: true,
-    });
-    const candleSeries = chart.addSeries(CandlestickSeries, { upColor: '#22c55e', downColor: '#ef4444', borderUpColor: '#22c55e', borderDownColor: '#ef4444', wickUpColor: '#22c55e', wickDownColor: '#ef4444' });
-    const volumeSeries = chart.addSeries(HistogramSeries, { priceFormat: { type: 'volume' }, priceScaleId: 'volume' });
-    chart.priceScale('volume').applyOptions({ scaleMargins: { top: 0.8, bottom: 0 } });
-    chartRef.current = chart; seriesRef.current = candleSeries; volumeSeriesRef.current = volumeSeries;
-    return () => { chart.remove(); chartRef.current = null; seriesRef.current = null; volumeSeriesRef.current = null; };
-  }, []);
-
-  useEffect(() => {
-    if (!price || !seriesRef.current || !volumeSeriesRef.current) return;
-    const basePrice = parseFloat(price);
-    if (isNaN(basePrice)) return;
-    setLoading(true);
-    const candles = generateChartData(basePrice, timeframe);
-    const volumes = generateVolumeData(candles);
-    seriesRef.current.setData(candles); volumeSeriesRef.current.setData(volumes);
-    if (chartRef.current) chartRef.current.timeScale().fitContent();
-    setLoading(false);
-  }, [price, timeframe, generateChartData, generateVolumeData]);
+// ─── Suggested Prompts ────────────────────────────────────
+const SUGGESTED = [
+  'Analyze the impact of rising interest rates on tech stocks',
+  'What is the current market sentiment around AI companies?',
+  'Compare Reliance vs TCS as long-term investments',
+  'Explain how quantitative tightening affects emerging markets',
+];
 
+function EmptyState({ onSelect }: { onSelect: (q: string) => void }) {
   return (
-    <div className="glass rounded-2xl border border-white/[0.06] overflow-hidden">
-      <div className="flex items-center justify-between px-5 py-4 border-b border-white/5">
-        <div>
-          <div className="flex items-center gap-2"><span className="text-lg font-light text-white">{symbol}</span><span className="text-sm text-gray-500">{companyName}</span></div>
-          {price && (<div className="flex items-center gap-3 mt-1"><span className="text-2xl font-light text-white">{parseFloat(price).toFixed(2)}</span>{change && changePct && (<span className={`text-sm font-mono ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>{isPositive ? '+' : ''}{parseFloat(change).toFixed(2)} ({changePct})</span>)}</div>)}
-        </div>
-        <div className="flex items-center gap-1">{(['1D', '1W', '1M', '3M', '1Y'] as const).map(tf => (<button key={tf} onClick={() => setTimeframe(tf)} className={`px-3 py-1 rounded-lg text-xs font-mono transition-all ${timeframe === tf ? 'bg-indigo-600/30 text-indigo-300 border border-indigo-500/30' : 'text-gray-500 hover:text-gray-300 hover:bg-white/5'}`}>{tf}</button>))}</div>
-      </div>
-      <div className="relative h-80">
-        {loading && (<div className="absolute inset-0 flex items-center justify-center bg-gray-950/50 z-10"><div className="flex flex-col items-center gap-3"><JanusOrb size={32} thinking /><p className="text-xs font-mono text-indigo-400 animate-pulse">Loading chart...</p></div></div>)}
-        <div ref={chartContainerRef} className="w-full h-full" />
-      </div>
-      <div className="flex items-center gap-4 px-5 py-2 border-t border-white/5 text-[10px] font-mono text-gray-600">
-        <div className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-sm bg-emerald-500/50" />Bullish</div>
-        <div className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-sm bg-red-500/50" />Bearish</div>
-        <div className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-sm bg-indigo-500/30" />Volume</div>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.2 }}
+      className="flex flex-col items-center justify-center h-full px-4"
+    >
+      <JanusOrb size={56} />
+      <h2 className="mt-8 text-xl font-light text-gray-200 tracking-wide">
+        What can I research for you?
+      </h2>
+      <p className="mt-2 text-sm text-gray-600 max-w-md text-center">
+        Multi-agent intelligence pipeline — switchboard routes your query through research, analysis, and synthesis.
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 mt-10 w-full max-w-xl">
+        {SUGGESTED.map(q => (
+          <button
+            key={q}
+            onClick={() => onSelect(q)}
+            className="text-left px-4 py-3 rounded-2xl border border-white/[0.06] hover:border-white/[0.12] hover:bg-white/[0.03] transition-all group"
+          >
+            <p className="text-[13px] text-gray-400 group-hover:text-gray-200 transition-colors leading-snug">
+              {q}
+            </p>
+          </button>
+        ))}
       </div>
-    </div>
+    </motion.div>
   );
 }
 
 // ═══════════════════════════════════════════════════════════
-//  TAB COMPONENTS
+//  MAIN CHAT PAGE
 // ═══════════════════════════════════════════════════════════
-
-function CommandTab() {
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [thinkingStage, setThinkingStage] = useState(0);
-  const [result, setResult] = useState<CaseRecord | null>(null);
+export default function ChatPage() {
+  const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
-  const resultRef = useRef<HTMLDivElement>(null);
+  const [isThinking, setIsThinking] = useState(false);
+  const [thinkingStage, setThinkingStage] = useState(0);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const latestMsgId = useRef<string | null>(null);
 
+  // Auto-scroll on new messages
   useEffect(() => {
-    if (!isAnalyzing) return;
-    const iv = setInterval(() => setThinkingStage(p => (p + 1) % STAGES.length), 3000);
-    return () => clearInterval(iv);
-  }, [isAnalyzing]);
-
-  const handleAnalyze = useCallback(async (q: string) => {
-    if (!q.trim()) return;
-    setIsAnalyzing(true); setResult(null); setThinkingStage(0);
-    try {
-      const res = await apiClient.analyze({ user_input: q });
-      setResult(res);
-      setTimeout(() => resultRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 200);
-    } catch { /* silent */ } finally { setIsAnalyzing(false); }
-  }, []);
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="relative group shrink-0">
-        <div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-indigo-500/20 via-transparent to-violet-500/20 opacity-0 group-focus-within:opacity-100 transition-opacity duration-500" />
-        <div className="relative flex items-center gap-3 px-5 py-4 rounded-2xl glass border border-white/[0.06] group-focus-within:border-indigo-500/20 transition-colors">
-          <Sparkles size={16} className="text-indigo-400/50 shrink-0" />
-          <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAnalyze(input)} disabled={isAnalyzing}
-            placeholder="Ask Janus anything — analysis, research, market intelligence..."
-            className="flex-1 bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none disabled:opacity-40 font-mono" />
-          <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => handleAnalyze(input)} disabled={isAnalyzing || !input.trim()}
-            className="p-2.5 rounded-xl bg-indigo-600/80 hover:bg-indigo-500 disabled:bg-gray-800 disabled:text-gray-600 text-white transition-all duration-200">
-            <Send size={14} />
-          </motion.button>
-        </div>
-      </div>
-      <div className="flex-1 mt-5 overflow-y-auto rounded-2xl">
-        <AnimatePresence mode="wait">
-          {isAnalyzing ? (<ThinkingDisplay stage={STAGES[thinkingStage]} />) : result ? (
-            <motion.div key="result" ref={resultRef} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-4 pb-8">
-              {result.route && (<div className="flex items-center gap-2 flex-wrap">
-                <span className="px-2.5 py-1 rounded-full text-[10px] font-mono uppercase tracking-wider bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">{result.route.domain_pack}</span>
-                <span className="px-2.5 py-1 rounded-full text-[10px] font-mono uppercase tracking-wider bg-white/5 text-gray-400 border border-white/10">{result.route.execution_mode}</span>
-                <span className="px-2.5 py-1 rounded-full text-[10px] font-mono uppercase tracking-wider bg-white/5 text-gray-400 border border-white/10">{result.route.complexity}</span>
-              </div>)}
-              {result.outputs && result.outputs.filter((o: any) => o.confidence > 0).length > 0 && (
-                <div className="flex items-center gap-6 py-3">{result.outputs.filter((o: any) => o.confidence > 0).map((o: any, idx: number) => (<ConfidenceRing key={`${o.agent || 'output'}-${idx}`} value={o.confidence} label={o.agent || `Agent ${idx + 1}`} />))}</div>
-              )}
-              {result.final_answer && (<div className="glass rounded-2xl p-6"><div className="flex items-center gap-2 mb-4 text-xs font-mono text-indigo-400/70 uppercase tracking-wider"><Zap size={12} /><span>Synthesis Complete</span></div><div className="prose prose-invert max-w-none text-sm leading-relaxed text-gray-200 whitespace-pre-wrap"><Typewriter text={result.final_answer} speed={8} /></div></div>)}
-            </motion.div>
-          ) : (
-            <motion.div key="empty" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="h-full flex flex-col items-center justify-center text-center py-20">
-              <JanusOrb size={48} />
-              <p className="mt-6 text-sm text-gray-500 font-mono">Awaiting directive...</p>
-              <p className="mt-2 text-xs text-gray-700 max-w-md">Multi-agent pipeline: switchboard → research → synthesizer.</p>
-              <div className="flex flex-wrap justify-center gap-2 mt-8 max-w-lg">
-                {['Analyze RBI rate hike impact on Indian markets', 'What happens to $NVDA if AI spending slows?', 'Compare Reliance vs TCS as long-term investments'].map(q => (
-                  <button key={q} onClick={() => { setInput(q); handleAnalyze(q); }} className="px-3 py-1.5 rounded-full text-xs font-mono text-gray-500 border border-white/5 hover:border-indigo-500/20 hover:text-indigo-300 transition-all text-left">{q}</button>
-                ))}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-}
-
-function IntelStreamTab() {
-  const [headlines, setHeadlines] = useState<any[]>([]);
-  const [query, setQuery] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [searched, setSearched] = useState(false);
-  const [researchResult, setResearchResult] = useState<CaseRecord | null>(null);
-  const [researchLoading, setResearchLoading] = useState(false);
-  const [researchStage, setResearchStage] = useState(0);
-  const [researchQuery, setResearchQuery] = useState('');
-  const stageTimer = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  useEffect(() => { financeClient.getHeadlines().then(data => setHeadlines(data)).catch(() => {}); }, []);
-
-  const searchNews = async () => {
-    if (!query.trim()) return;
-    setLoading(true); setSearched(true); setResearchResult(null);
-    try { const data = await financeClient.analyzeNews(query, 10); setHeadlines(data.articles || []); } catch { /* silent */ } finally { setLoading(false); }
-  };
-
-  const runResearch = async (articleText: string) => {
-    setResearchLoading(true); setResearchResult(null); setResearchQuery(articleText.slice(0, 80));
-    setResearchStage(0);
-    if (stageTimer.current) clearInterval(stageTimer.current);
-    stageTimer.current = setInterval(() => setResearchStage(p => (p + 1) % STAGES.length), 3000);
-    try { const res = await apiClient.analyze({ user_input: articleText }); setResearchResult(res); } catch { /* silent */ } finally { setResearchLoading(false); if (stageTimer.current) clearInterval(stageTimer.current); }
-  };
-
-  return (
-    <div className="h-full flex gap-5 overflow-hidden">
-      <div className="flex flex-col gap-3 overflow-hidden" style={{ width: researchResult || researchLoading ? '45%' : '100%', transition: 'width 0.4s ease' }}>
-        <div className="flex gap-2 shrink-0">
-          <div className="flex-1 flex items-center gap-3 px-4 py-3 glass rounded-2xl border border-white/[0.06] focus-within:border-indigo-500/30 transition-colors">
-            <Globe size={14} className="text-gray-500 shrink-0" />
-            <input value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => e.key === 'Enter' && searchNews()} placeholder="Search news — company, topic, event..." className="flex-1 bg-transparent text-sm text-gray-200 placeholder-gray-600 font-mono focus:outline-none" />
-          </div>
-          <button onClick={searchNews} disabled={loading} className="px-4 py-2 glass rounded-2xl border border-white/[0.06] hover:border-indigo-500/30 text-xs font-mono text-gray-400 hover:text-indigo-300 transition-all disabled:opacity-40">{loading ? <RefreshCw size={13} className="animate-spin" /> : 'Search'}</button>
-        </div>
-        <div className="text-[10px] font-mono text-gray-600 uppercase tracking-wider shrink-0">{searched ? `"${query}"` : 'Top Business Headlines'} — click Deep Research on any article</div>
-        <div className="flex-1 overflow-y-auto space-y-2 pr-1">
-          {loading && (<div className="flex flex-col items-center justify-center py-12 gap-4"><JanusOrb size={36} thinking /><p className="text-xs font-mono text-indigo-400 animate-pulse">Fetching articles...</p></div>)}
-          {!loading && headlines.map((a, i) => (<ArticleCard key={`${a.title}-${i}`} article={a} index={i} onResearch={runResearch} />))}
-          {!loading && headlines.length === 0 && (<div className="flex flex-col items-center justify-center py-16 text-center"><Globe size={28} className="text-gray-700 mb-3" /><p className="text-sm font-mono text-gray-500">No articles found.</p></div>)}
-        </div>
-      </div>
-      <AnimatePresence>
-        {(researchResult || researchLoading) && (
-          <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} className="flex-1 flex flex-col gap-3 overflow-hidden">
-            <div className="flex items-center justify-between shrink-0">
-              <div className="text-[10px] font-mono text-gray-500 uppercase tracking-wider truncate max-w-[80%]">Research: {researchQuery}...</div>
-              <button onClick={() => { setResearchResult(null); setResearchLoading(false); }} className="text-[10px] font-mono text-gray-600 hover:text-gray-400 transition-colors">✕ Close</button>
-            </div>
-            <div className="flex-1 overflow-y-auto"><ResearchPanel result={researchResult} loading={researchLoading} stage={STAGES[researchStage]} /></div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-function MarketsTab() {
-  const [query, setQuery] = useState('');
-  const [searchResults, setSearchResults] = useState<{ symbol: string; name: string; region?: string }[]>([]);
-  const [intel, setIntel] = useState<any>(null);
-  const [loading, setLoading] = useState(false);
-  const [newsLoading, setNewsLoading] = useState(false);
-  const [news, setNews] = useState<any[]>([]);
-  const [activeSymbol, setActiveSymbol] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [selectedRegion, setSelectedRegion] = useState('');
-  const [researchResult, setResearchResult] = useState<CaseRecord | null>(null);
-  const [researchLoading, setResearchLoading] = useState(false);
-  const [researchStage, setResearchStage] = useState(0);
-  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const stageTimer = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const handleQueryChange = (val: string) => {
-    setQuery(val);
-    if (searchTimer.current) clearTimeout(searchTimer.current);
-    if (!val.trim()) { setSearchResults([]); return; }
-    searchTimer.current = setTimeout(async () => { try { setSearchResults(await financeClient.searchTicker(val)); } catch { setSearchResults([]); } }, 400);
-  };
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+    }
+  }, [messages, isThinking]);
 
-  const loadTicker = useCallback(async (symbol: string, region = '') => {
-    setLoading(true); setIntel(null); setNews([]); setActiveSymbol(symbol); setSearchResults([]); setError(null); setResearchResult(null);
-    try {
-      const data = await financeClient.getTickerIntelligence(symbol);
-      setIntel(data); setNewsLoading(true);
-      try { const nd = await financeClient.analyzeNews(data.company_name || symbol, 8); setNews(nd.articles || []); } catch { /* silent */ } finally { setNewsLoading(false); }
-    } catch { setError(`Could not load intelligence for ${symbol}. Ensure ALPHAVANTAGE_API_KEY is set in backend/.env`); } finally { setLoading(false); }
-  }, []);
+  // Thinking stage rotation
+  useEffect(() => {
+    if (!isThinking) return;
+    const iv = setInterval(() => setThinkingStage(p => (p + 1) % STAGES.length), 2500);
+    return () => clearInterval(iv);
+  }, [isThinking]);
 
-  const runDeepResearch = async () => {
-    if (!intel) return;
-    const q = `Analyze ${intel.company_name} (${intel.symbol}) stock. ${intel.overview.description || ''}`.slice(0, 500);
-    setResearchLoading(true); setResearchResult(null); setResearchStage(0);
-    if (stageTimer.current) clearInterval(stageTimer.current);
-    stageTimer.current = setInterval(() => setResearchStage(p => (p + 1) % STAGES.length), 3000);
-    try { const res = await apiClient.analyze({ user_input: q }); setResearchResult(res); } catch { /* silent */ } finally { setResearchLoading(false); if (stageTimer.current) clearInterval(stageTimer.current); }
+  // Auto-resize textarea
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = Math.min(e.target.scrollHeight, 160) + 'px';
   };
 
-  const price = intel?.quote?.['05. price'];
-  const change = intel?.quote?.['09. change'];
-  const changePct = intel?.quote?.['10. change percent'];
-  const isPositive = change && parseFloat(change) >= 0;
-
-  return (
-    <div className="h-full flex flex-col gap-4 overflow-hidden">
-      <div className="relative shrink-0">
-        <div className="flex items-center gap-3 px-4 py-3 glass rounded-2xl border border-white/[0.06] focus-within:border-indigo-500/30 transition-colors">
-          <Search size={15} className="text-gray-500 shrink-0" />
-          <input value={query} onChange={e => handleQueryChange(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { setSearchResults([]); loadTicker(query.toUpperCase(), selectedRegion); } }} placeholder="Search — RELIANCE, TCS, NIFTY, AAPL, Tesla..." className="flex-1 bg-transparent text-sm text-gray-200 placeholder-gray-600 font-mono focus:outline-none" />
-          {query && (<button onClick={() => { setSearchResults([]); loadTicker(query.toUpperCase(), selectedRegion); }} className="px-3 py-1 rounded-lg bg-indigo-600/80 hover:bg-indigo-500 text-white text-xs font-mono transition-colors">Analyze</button>)}
-        </div>
-        <AnimatePresence>
-          {searchResults.length > 0 && (
-            <motion.div initial={{ opacity: 0, y: -5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute top-full left-0 right-0 mt-1 glass rounded-xl border border-white/10 overflow-hidden z-20">
-              {searchResults.slice(0, 6).map(r => (<button key={r.symbol} onClick={() => { setQuery(r.symbol); setSelectedRegion(r.region || ''); loadTicker(r.symbol, r.region || ''); }} className="w-full flex items-center justify-between px-4 py-2.5 hover:bg-white/[0.04] transition-colors text-left"><span className="text-sm font-mono text-indigo-300">{r.symbol}</span><div className="flex items-center gap-3 ml-4 min-w-0">{r.region && <span className="text-[9px] font-mono text-gray-600 bg-white/5 px-1.5 py-0.5 rounded shrink-0">{r.region}</span>}<span className="text-xs text-gray-500 truncate">{r.name}</span></div></button>))}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-      {loading && (<div className="flex-1 flex flex-col items-center justify-center gap-4"><JanusOrb size={48} thinking /><p className="text-xs font-mono text-indigo-400 uppercase tracking-widest animate-pulse">Fetching intelligence for {activeSymbol}...</p></div>)}
-      {!loading && error && (<div className="flex-1 flex flex-col items-center justify-center gap-3 text-center"><AlertTriangle size={28} className="text-amber-500/50" /><p className="text-sm font-mono text-amber-400 max-w-md">{error}</p></div>)}
-      {!loading && !intel && !error && (
-        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center">
-          <BarChart3 size={32} className="text-gray-700" />
-          <p className="text-sm font-mono text-gray-500">Search any stock — Indian (RELIANCE, TCS, INFY) or global (AAPL, TSLA)</p>
-          <div className="flex gap-2 mt-2 flex-wrap justify-center">
-            {[{s:'RELIANCE.BSE',l:'Reliance',r:'India'},{s:'TCS.BSE',l:'TCS',r:'India'},{s:'INFY.BSE',l:'Infosys',r:'India'},{s:'AAPL',l:'Apple',r:''},{s:'TSLA',l:'Tesla',r:''}].map(({s,l,r}) => (<button key={s} onClick={() => { setQuery(s); setSelectedRegion(r); loadTicker(s, r); }} className="px-3 py-1 rounded-full border border-white/10 hover:border-indigo-500/30 text-xs font-mono text-gray-500 hover:text-indigo-300 transition-all">{l}</button>))}
-          </div>
-        </div>
-      )}
-      {!loading && intel && (
-        <div className="flex-1 overflow-y-auto space-y-4 pr-1">
-          <CandlestickChart symbol={intel.symbol} companyName={intel.company_name} price={price} change={change} changePct={changePct} isPositive={!!isPositive} />
-          <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-            <div className="flex items-start justify-between gap-4 flex-wrap">
-              <div>
-                <div className="flex items-center gap-3 mb-1"><span className="text-2xl font-light text-white">{intel.symbol}</span><span className="text-sm text-gray-500">{intel.company_name}</span></div>
-                <div className="flex items-center gap-2 mt-2 flex-wrap">
-                  {intel.overview.sector && <span className="text-[10px] font-mono text-gray-500 bg-white/5 px-2 py-0.5 rounded">{intel.overview.sector}</span>}
-                  {intel.overview.industry && <span className="text-[10px] font-mono text-gray-500 bg-white/5 px-2 py-0.5 rounded">{intel.overview.industry}</span>}
-                </div>
-              </div>
-              <div className="flex flex-col items-end gap-2">
-                {intel.ai_signal && <SignalBadge signal={intel.ai_signal.signal} conviction={intel.ai_signal.conviction} />}
-                <StanceChip stance={intel.stance.stance} score={intel.stance.sentiment_score} />
-              </div>
-            </div>
-            {intel.ai_signal?.reasoning && (
-              <div className="mt-4 pt-4 border-t border-white/5">
-                <div className="flex items-center gap-2 mb-1.5 text-[10px] font-mono text-indigo-400 uppercase tracking-wider"><Zap size={10} /> AI Signal</div>
-                <p className="text-xs text-gray-300 font-mono leading-relaxed">{intel.ai_signal.reasoning}</p>
-                <div className="flex gap-4 mt-2">
-                  <span className="text-[9px] font-mono text-gray-600 uppercase">Risk: <span className={intel.ai_signal.risk === 'HIGH' ? 'text-red-400' : intel.ai_signal.risk === 'MEDIUM' ? 'text-amber-400' : 'text-emerald-400'}>{intel.ai_signal.risk}</span></span>
-                  <span className="text-[9px] font-mono text-gray-600 uppercase">Timeframe: <span className="text-gray-400">{intel.ai_signal.timeframe}</span></span>
-                </div>
-              </div>
-            )}
-            <div className="mt-4 pt-4 border-t border-white/5">
-              <button onClick={runDeepResearch} disabled={researchLoading} className="flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600/20 hover:bg-indigo-600/40 border border-indigo-500/30 text-xs font-mono text-indigo-300 transition-colors disabled:opacity-40">
-                <Sparkles size={12} className={researchLoading ? 'animate-pulse' : ''} />{researchLoading ? 'Running research...' : 'Deep Research — Run Full Agent Pipeline'}
-              </button>
-            </div>
-          </div>
-          <ResearchPanel result={researchResult} loading={researchLoading} stage={STAGES[researchStage]} />
-          <div className="grid grid-cols-2 gap-4">
-            <div className="glass rounded-xl p-4 border border-white/[0.04] space-y-2">
-              <div className="text-[10px] font-mono text-gray-500 uppercase tracking-wider mb-3">Fundamentals</div>
-              {([['P/E Ratio', intel.overview.pe_ratio], ['52W High', intel.overview['52_week_high']], ['52W Low', intel.overview['52_week_low']], ['Analyst Target', intel.overview.analyst_target]] as [string, string | undefined][]).filter(([, v]) => v && v !== 'None' && v !== '-' && v !== 'N/A').map(([k, v]) => (<div key={k} className="flex justify-between text-xs font-mono border-b border-white/5 pb-1.5"><span className="text-gray-500">{k}</span><span className="text-gray-300">{v}</span></div>))}
-              {!intel.overview.pe_ratio && <p className="text-[10px] font-mono text-gray-700">Requires Alpha Vantage key</p>}
-            </div>
-            <div className="glass rounded-xl p-4 border border-white/[0.04] space-y-3">
-              <div className="text-[10px] font-mono text-gray-500 uppercase tracking-wider mb-3">Event Intelligence</div>
-              <div className="text-xs font-mono"><span className="text-gray-500">Impact: </span><span className={intel.event_impact.impact_level === 'high' || intel.event_impact.impact_level === 'very_high' ? 'text-amber-400' : 'text-gray-300'}>{intel.event_impact.impact_level || 'unknown'}</span></div>
-              <div className="text-xs font-mono"><span className="text-gray-500">Volatility: </span><span className="text-gray-300">{intel.event_impact.volatility_level || 'unknown'}</span></div>
-              <div className="text-xs font-mono"><span className="text-gray-500">Events: </span><span className="text-gray-300">{intel.event_impact.event_count || 0} detected</span></div>
-            </div>
-          </div>
-          <div>
-            <div className="flex items-center gap-2 text-[10px] font-mono text-gray-500 uppercase tracking-wider mb-3"><Scan size={11} className="text-indigo-400" />News {newsLoading && <RefreshCw size={10} className="animate-spin text-indigo-400" />}</div>
-            {newsLoading && <div className="text-xs font-mono text-gray-600 animate-pulse">Fetching articles...</div>}
-            <div className="space-y-2">{news.map((a: any, i: number) => <ArticleCard key={`${a.title}-${i}`} article={{ ...a, stance: 'neutral', sentiment_score: 0.5 }} index={i} onResearch={runDeepResearch} />)}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function WorkspaceTab() {
-  const [curiosity, setCuriosity] = useState<any>(null);
-  const [workflows, setWorkflows] = useState<any[]>([]);
-  const [sessions, setSessions] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [triggering, setTriggering] = useState(false);
-  const [activeWf, setActiveWf] = useState<any>(null);
-  const [wfLoading, setWfLoading] = useState(false);
-
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-    try {
-      const [curRes, wfRes, sessRes] = await Promise.all([
-        fetch(`${baseUrl}/daemon/curiosity`).then(r => r.ok ? r.json() : null),
-        fetch(`${baseUrl}/workflows?limit=10`).then(r => r.ok ? r.json() : []),
-        fetch(`${baseUrl}/sessions?limit=10`).then(r => r.ok ? r.json() : []),
-      ]);
-      if (curRes) setCuriosity(curRes);
-      if (wfRes) setWorkflows(Array.isArray(wfRes) ? wfRes : []);
-      if (sessRes) setSessions(Array.isArray(sessRes) ? sessRes : []);
-    } catch { /* silent */ } finally { setLoading(false); }
-  }, []);
-
-  useEffect(() => { fetchData(); }, [fetchData]);
-
-  const triggerCuriosity = async () => {
-    setTriggering(true);
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-    try {
-      const res = await fetch(`${baseUrl}/daemon/curiosity/now`, { method: 'POST' });
-      if (res.ok) {
-        const data = await res.json();
-        setCuriosity((prev: any) => prev ? { ...prev, discoveries: [...(prev.discoveries || []), ...(data.discoveries || [])], total_discoveries: (prev.total_discoveries || 0) + (data.discoveries || []).length } : data);
-      }
-    } catch { /* silent */ } finally { setTriggering(false); }
-  };
+  const sendMessage = useCallback(async (text: string) => {
+    if (!text.trim() || isThinking) return;
+
+    const userMsg: Message = {
+      id: `u-${Date.now()}`,
+      role: 'user',
+      content: text.trim(),
+      timestamp: new Date(),
+    };
+    setMessages(prev => [...prev, userMsg]);
+    setInput('');
+    setIsThinking(true);
+    setThinkingStage(0);
+
+    // Reset textarea height
+    if (inputRef.current) {
+      inputRef.current.style.height = 'auto';
+    }
 
-  const runWorkflow = async (wf: any) => {
-    setActiveWf(wf); setWfLoading(true);
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
     try {
-      const res = await fetch(`${baseUrl}/workflows/${wf.id}/run`, { method: 'POST' });
-      if (res.ok) { const updated = await res.json(); setActiveWf(updated); setWorkflows(prev => prev.map(w => w.id === wf.id ? updated : w)); }
-    } catch { /* silent */ } finally { setWfLoading(false); }
-  };
+      const result = await apiClient.analyze({ user_input: text.trim() });
+
+      const finalAnswer = result.final_answer || result.final?.response || result.final?.summary || 'No analysis could be generated.';
+
+      const janusMsg: Message = {
+        id: `j-${Date.now()}`,
+        role: 'janus',
+        content: finalAnswer,
+        timestamp: new Date(),
+        metadata: {
+          domain: result.domain,
+          queryType: result.query_type,
+          elapsed: result.elapsed_seconds,
+          confidence: result.final?.confidence,
+          routeInfo: result.route,
+        },
+      };
+      latestMsgId.current = janusMsg.id;
+      setMessages(prev => [...prev, janusMsg]);
+    } catch (err) {
+      const errStr = err instanceof Error ? err.message : String(err);
+      const is429 = errStr.includes('429') || errStr.toLowerCase().includes('rate limit') || errStr.toLowerCase().includes('too many');
+      const errorMsg: Message = {
+        id: `e-${Date.now()}`,
+        role: 'janus',
+        content: is429
+          ? 'Rate limited by OpenRouter (429). The free API tier has usage caps. Please wait 30-60 seconds and try again — the backend will auto-retry with backoff.'
+          : `I encountered an error processing your request: ${errStr.slice(0, 200)}. Please check that the backend is running and try again.`,
+        timestamp: new Date(),
+      };
+      setMessages(prev => [...prev, errorMsg]);
+    } finally {
+      setIsThinking(false);
+    }
+  }, [isThinking]);
 
-  const createResearchWf = async () => {
-    const query = prompt('Enter research query:');
-    if (!query) return;
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-    try {
-      const res = await fetch(`${baseUrl}/workflows/research`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query }) });
-      if (res.ok) { const wf = await res.json(); setWorkflows(prev => [wf, ...prev]); }
-    } catch { /* silent */ }
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage(input);
+    }
   };
 
-  const statusColors: Record<string, string> = { pending: 'text-gray-400', running: 'text-indigo-400', completed: 'text-emerald-400', failed: 'text-red-400', cancelled: 'text-gray-500' };
-
-  if (loading) return (<div className="flex flex-col items-center justify-center h-full gap-4"><JanusOrb size={48} thinking /><p className="text-xs font-mono text-indigo-400 animate-pulse">Loading workspace...</p></div>);
+  const isEmpty = messages.length === 0 && !isThinking;
 
   return (
-    <div className="h-full flex gap-5 overflow-hidden">
-      <div className="flex flex-col gap-4 overflow-y-auto pr-1" style={{ width: '45%' }}>
-        <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-2 text-xs font-mono text-violet-400 uppercase tracking-wider"><Brain size={12} /> Discoveries ({curiosity?.total_discoveries || 0})</div>
-            <button onClick={triggerCuriosity} disabled={triggering} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-violet-600/20 hover:bg-violet-600/40 border border-violet-500/30 text-[10px] font-mono text-violet-300 transition-all disabled:opacity-40"><Sparkles size={10} className={triggering ? 'animate-pulse' : ''} />{triggering ? 'Exploring...' : 'Explore'}</button>
-          </div>
-          <div className="space-y-3">
-            {(curiosity?.discoveries || []).slice(-5).reverse().map((d: any, i: number) => (
-              <motion.div key={i} initial={{ opacity: 0, y: 5 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.05 }} className="glass rounded-xl p-3 border border-white/[0.04]">
-                <div className="flex items-center gap-2 mb-1.5"><span className="text-[9px] font-mono text-violet-400 bg-violet-500/10 px-1.5 py-0.5 rounded">{d.topic}</span><span className="text-[9px] font-mono text-gray-600">{new Date(d.timestamp).toLocaleTimeString()}</span></div>
-                <p className="text-xs text-gray-300 leading-relaxed">{d.insight}</p>
-              </motion.div>
+    <div className="h-full flex flex-col">
+      {/* Conversation area */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+        {isEmpty ? (
+          <EmptyState onSelect={(q) => { setInput(q); sendMessage(q); }} />
+        ) : (
+          <div className="max-w-[860px] mx-auto px-4 py-8 space-y-6">
+            {messages.map((msg) => (
+              <MessageBubble
+                key={msg.id}
+                message={msg}
+                isLatest={msg.id === latestMsgId.current && msg.role === 'janus'}
+              />
             ))}
-            {(!curiosity?.discoveries || curiosity.discoveries.length === 0) && (<p className="text-xs font-mono text-gray-600 text-center py-4">No discoveries yet. Click "Explore" to start.</p>)}
-          </div>
-        </div>
-        <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-          <div className="flex items-center gap-2 mb-4 text-xs font-mono text-indigo-400 uppercase tracking-wider"><MessageSquare size={12} /> Sessions ({sessions.length})</div>
-          <div className="space-y-2">
-            {sessions.slice(0, 5).map((s: any, i: number) => (<div key={s.id} className="flex items-center justify-between text-xs font-mono py-2 px-3 glass rounded-lg border border-white/[0.04]"><span className="text-gray-400 truncate">{s.id}</span><div className="flex items-center gap-3 shrink-0"><span className="text-gray-600">{s.message_count || 0} msgs</span><span className="text-gray-700">{new Date(s.updated_at).toLocaleTimeString()}</span></div></div>))}
-            {sessions.length === 0 && <p className="text-xs font-mono text-gray-600 text-center py-4">No sessions yet. Start a conversation.</p>}
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col gap-3 overflow-hidden flex-1">
-        <div className="flex items-center justify-between shrink-0">
-          <div className="text-[10px] font-mono text-gray-500 uppercase tracking-wider">Workflows ({workflows.length})</div>
-          <button onClick={createResearchWf} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-600/20 hover:bg-indigo-600/40 border border-indigo-500/30 text-[10px] font-mono text-indigo-300 transition-all"><Plus size={10} /> Research</button>
-        </div>
-        <div className="flex-1 overflow-y-auto space-y-2 pr-1">
-          {workflows.map((wf: any, i: number) => (
-            <motion.div key={wf.id} initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: i * 0.05 }} className="glass rounded-xl border border-white/[0.04] hover:border-white/10 transition-colors p-4">
-              <div className="flex items-start justify-between mb-3">
-                <div>
-                  <div className="flex items-center gap-2 mb-1"><span className={`text-[9px] font-mono px-1.5 py-0.5 rounded ${statusColors[wf.status] || 'text-gray-400'} bg-white/5`}>{wf.status}</span><span className="text-[9px] font-mono text-gray-600">{wf.type}</span></div>
-                  <p className="text-xs text-gray-300">{wf.query || wf.scenario || 'Untitled'}</p>
-                </div>
-                {wf.status === 'pending' && (<button onClick={() => runWorkflow(wf)} disabled={wfLoading} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-600/20 hover:bg-emerald-600/40 border border-emerald-500/30 text-[10px] font-mono text-emerald-300 transition-all disabled:opacity-40"><Play size={10} /> Run</button>)}
-              </div>
-              <div className="space-y-1.5">{wf.steps?.map((step: any, si: number) => (<div key={step.id} className="flex items-center gap-2 text-[10px] font-mono"><div className={`w-2 h-2 rounded-full ${step.status === 'completed' ? 'bg-emerald-400' : step.status === 'running' ? 'bg-indigo-400 animate-pulse' : step.status === 'failed' ? 'bg-red-400' : 'bg-gray-600'}`} /><span className={step.status === 'completed' ? 'text-emerald-400' : step.status === 'running' ? 'text-indigo-400' : 'text-gray-500'}>{step.name}</span></div>))}</div>
-              {wf.metadata && (<div className="flex items-center gap-3 mt-3 pt-2 border-t border-white/5 text-[9px] font-mono text-gray-600"><span>{wf.metadata.completed_steps}/{wf.metadata.total_steps} steps</span>{wf.metadata.failed_steps > 0 && <span className="text-red-400">{wf.metadata.failed_steps} failed</span>}</div>)}
-            </motion.div>
-          ))}
-          {workflows.length === 0 && (<div className="flex flex-col items-center justify-center py-16 text-center"><GitBranch size={28} className="text-gray-700 mb-3" /><p className="text-sm font-mono text-gray-500">No workflows yet.</p><p className="text-xs font-mono text-gray-700 mt-1">Create a research or simulation workflow.</p></div>)}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function PulseTab({ daemonStatus, alerts, memoryStats }: { daemonStatus: DaemonStatus | null; alerts: Alert[]; memoryStats: MemoryStats | null }) {
-  const [refreshing, setRefreshing] = useState(false);
-  const handleRefresh = async () => { setRefreshing(true); setTimeout(() => setRefreshing(false), 1000); };
-  const phaseIcons: Record<string, React.ReactNode> = { morning: <Sunrise size={16} className="text-amber-400" />, daytime: <Sun size={16} className="text-indigo-400" />, evening: <Sunset size={16} className="text-violet-400" />, night: <Moon size={16} className="text-indigo-300" /> };
-
-  return (
-    <div className="h-full flex gap-5 overflow-hidden">
-      <div className="flex flex-col gap-4 overflow-y-auto pr-1" style={{ width: '40%' }}>
-        {daemonStatus?.circadian && (
-          <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-            <div className="flex items-center gap-3 mb-4">{phaseIcons[daemonStatus.circadian.current_phase]}<div><h3 className="text-sm font-mono text-gray-200">{daemonStatus.circadian.phase_name}</h3><p className="text-[10px] font-mono text-gray-500">{daemonStatus.circadian.phase_description}</p></div></div>
-            <div className="space-y-2"><div className="flex justify-between text-xs font-mono"><span className="text-gray-500">Priority</span><span className="text-gray-300 capitalize">{daemonStatus.circadian.priority}</span></div><div className="flex justify-between text-xs font-mono"><span className="text-gray-500">Active Tasks</span><span className="text-gray-300">{daemonStatus.circadian.current_tasks.length}</span></div></div>
-          </div>
-        )}
-        {daemonStatus && (
-          <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-            <div className="flex items-center gap-2 mb-4 text-xs font-mono text-indigo-400 uppercase tracking-wider"><Radio size={12} /> Signal Queue</div>
-            <div className="grid grid-cols-2 gap-3">
-              <div className="text-center"><div className="text-xl font-light text-white">{daemonStatus.signal_queue?.total_signals || daemonStatus.signals || 0}</div><div className="text-[9px] font-mono text-gray-600 uppercase">Total Signals</div></div>
-              <div className="text-center"><div className="text-xl font-light text-red-400">{daemonStatus.signal_queue?.severity_counts?.high || 0}</div><div className="text-[9px] font-mono text-gray-600 uppercase">High Severity</div></div>
-              <div className="text-center"><div className="text-xl font-light text-amber-400">{daemonStatus.signal_queue?.severity_counts?.medium || 0}</div><div className="text-[9px] font-mono text-gray-600 uppercase">Medium</div></div>
-              <div className="text-center"><div className="text-xl font-light text-gray-400">{daemonStatus.signal_queue?.severity_counts?.low || 0}</div><div className="text-[9px] font-mono text-gray-600 uppercase">Low</div></div>
-            </div>
-          </div>
-        )}
-        {memoryStats && (
-          <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-            <div className="flex items-center gap-2 mb-4 text-xs font-mono text-violet-400 uppercase tracking-wider"><Database size={12} /> Memory Graph</div>
-            <div className="grid grid-cols-3 gap-3">
-              <div className="text-center"><div className="text-xl font-light text-white">{memoryStats.queries}</div><div className="text-[9px] font-mono text-gray-600 uppercase">Queries</div></div>
-              <div className="text-center"><div className="text-xl font-light text-indigo-400">{memoryStats.entities}</div><div className="text-[9px] font-mono text-gray-600 uppercase">Entities</div></div>
-              <div className="text-center"><div className="text-xl font-light text-violet-400">{memoryStats.insights}</div><div className="text-[9px] font-mono text-gray-600 uppercase">Insights</div></div>
-            </div>
-          </div>
-        )}
-        {daemonStatus && (
-          <div className="glass rounded-2xl p-5 border border-white/[0.06]">
-            <div className="flex items-center gap-2 mb-4 text-xs font-mono text-emerald-400 uppercase tracking-wider"><Activity size={12} /> Daemon Status</div>
-            <div className="space-y-2 text-xs font-mono">
-              <div className="flex justify-between"><span className="text-gray-500">Status</span><span className="text-emerald-400">Running</span></div>
-              <div className="flex justify-between"><span className="text-gray-500">Cycles</span><span className="text-gray-300">{daemonStatus.cycle_count}</span></div>
-              <div className="flex justify-between"><span className="text-gray-500">Last Run</span><span className="text-gray-300">{daemonStatus.last_run ? new Date(daemonStatus.last_run).toLocaleTimeString() : 'N/A'}</span></div>
-            </div>
+            <AnimatePresence>
+              {isThinking && <ThinkingIndicator stage={STAGES[thinkingStage]} />}
+            </AnimatePresence>
           </div>
         )}
       </div>
-      <div className="flex flex-col gap-3 overflow-hidden flex-1">
-        <div className="flex items-center justify-between shrink-0">
-          <div className="text-[10px] font-mono text-gray-500 uppercase tracking-wider">Live Alert Feed — {alerts.length} alerts</div>
-          <button onClick={handleRefresh} disabled={refreshing} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass border border-white/5 hover:border-indigo-500/20 text-[10px] font-mono text-gray-400 hover:text-indigo-300 transition-all disabled:opacity-40"><RefreshCw size={10} className={refreshing ? 'animate-spin' : ''} /> Refresh</button>
-        </div>
-        <div className="flex-1 overflow-y-auto space-y-2 pr-1">
-          {alerts.length > 0 ? (alerts.map((alert, i) => <AlertCard key={`${alert.title}-${i}`} alert={alert} index={i} />)) : (
-            <div className="flex flex-col items-center justify-center py-16 text-center"><CheckCircle size={28} className="text-emerald-500/30 mb-3" /><p className="text-sm font-mono text-gray-500">No alerts.</p><p className="text-xs font-mono text-gray-700 mt-1">All systems operating normally.</p></div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ═══════════════════════════════════════════════════════════
-//  MAIN APP
-// ═══════════════════════════════════════════════════════════
-export default function JanusApp() {
-  const [systemState, setSystemState] = useState<'art' | 'dashboard'>('art');
-  const [activeTab, setActiveTab] = useState('command');
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [daemonStatus, setDaemonStatus] = useState<DaemonStatus | null>(null);
-  const [alerts, setAlerts] = useState<Alert[]>([]);
-  const [memoryStats, setMemoryStats] = useState<MemoryStats | null>(null);
-
-  const fetchSystemData = useCallback(async () => {
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-    try {
-      const [statusRes, alertsRes, memoryRes] = await Promise.all([
-        fetch(`${baseUrl}/daemon/status`).then(r => r.ok ? r.json() : null),
-        fetch(`${baseUrl}/daemon/alerts?limit=20`).then(r => r.ok ? r.json() : []),
-        fetch(`${baseUrl}/memory/stats`).then(r => r.ok ? r.json() : null),
-      ]);
-      if (statusRes) setDaemonStatus(statusRes);
-      if (alertsRes) setAlerts(Array.isArray(alertsRes) ? alertsRes : []);
-      if (memoryRes) setMemoryStats(memoryRes);
-    } catch { /* silent */ }
-  }, []);
-
-  useEffect(() => { fetchSystemData(); const interval = setInterval(fetchSystemData, 60000); return () => clearInterval(interval); }, [fetchSystemData]);
-
-  const sections = ['Main', 'System'];
-  const sectionItems = (section: string) => navItems.filter(item => item.section === section);
-
-  const renderTab = () => {
-    switch (activeTab) {
-      case 'command': return <CommandTab />;
-      case 'intel': return <IntelStreamTab />;
-      case 'markets': return <MarketsTab />;
-      case 'workspace': return <WorkspaceTab />;
-      case 'pulse': return <PulseTab daemonStatus={daemonStatus} alerts={alerts} memoryStats={memoryStats} />;
-      default: return <CommandTab />;
-    }
-  };
-
-  const alertCount = alerts.filter(a => a.severity === 'high' || a.severity === 'critical').length;
-
-  return (
-    <div className="h-screen bg-gray-950 text-gray-100 flex overflow-hidden">
-      <AnimatePresence>{systemState === 'art' && <ArtPiece onUnlock={() => setSystemState('dashboard')} />}</AnimatePresence>
-
-      {/* Mobile menu overlay */}
-      <AnimatePresence>
-        {mobileMenuOpen && (<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/60 z-40 lg:hidden" onClick={() => setMobileMenuOpen(false)} />)}
-      </AnimatePresence>
 
-      {/* Sidebar */}
-      <motion.aside initial={false} animate={{ width: sidebarCollapsed ? 64 : 220 }} className={`hidden lg:flex flex-col bg-gray-900/60 border-r border-white/5 relative z-30 shrink-0`}>
-        {/* Logo */}
-        <div className="flex items-center justify-between h-12 px-3 border-b border-white/5 shrink-0">
-          {!sidebarCollapsed && (<motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-xs font-light tracking-[0.2em] bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">JANUS</motion.span>)}
-          <button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1 rounded hover:bg-white/5 text-gray-500 hover:text-gray-300 transition-colors shrink-0">
-            {sidebarCollapsed ? <ChevronRightIcon size={14} /> : <ChevronLeft size={14} />}
-          </button>
-        </div>
-
-        {/* Nav */}
-        <nav className="flex-1 overflow-y-auto py-2 px-1.5 space-y-1">
-          {sections.map(section => (
-            <div key={section}>
-              {!sidebarCollapsed && (<div className="px-2 py-1.5 text-[8px] font-mono text-gray-600 uppercase tracking-widest">{section}</div>)}
-              {sectionItems(section).map(item => {
-                const active = activeTab === item.id;
-                const Icon = item.icon;
-                return (
-                  <button key={item.id} onClick={() => setActiveTab(item.id)}
-                    className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg transition-all duration-200 text-sm ${active ? 'bg-indigo-500/10 text-indigo-300 border border-indigo-500/20' : 'text-gray-500 hover:text-gray-300 hover:bg-white/5 border border-transparent'} ${sidebarCollapsed ? 'justify-center' : ''}`}
-                    title={sidebarCollapsed ? item.label : undefined}>
-                    <Icon size={14} className="shrink-0" />
-                    {!sidebarCollapsed && (<span className="font-mono text-[10px] uppercase tracking-wider truncate">{item.label}</span>)}
-                  </button>
-                );
-              })}
-            </div>
-          ))}
-        </nav>
-
-        {/* Status */}
-        {!sidebarCollapsed && (
-          <div className="px-3 py-2 border-t border-white/5 shrink-0">
-            <div className="flex items-center gap-2">
-              <div className={`w-1.5 h-1.5 rounded-full ${daemonStatus?.running ? 'bg-emerald-400 animate-pulse' : 'bg-gray-600'}`} />
-              <span className="text-[9px] font-mono text-gray-500 uppercase tracking-wider">{daemonStatus?.running ? 'Living' : 'Offline'}</span>
-            </div>
-            {daemonStatus?.circadian && (<div className="text-[8px] font-mono text-gray-700 mt-0.5 capitalize">{daemonStatus.circadian.current_phase} phase</div>)}
+      {/* Input bar */}
+      <div className="shrink-0 border-t border-white/[0.04] px-4 py-3">
+        <div className="max-w-[768px] mx-auto">
+          <div className="input-bar flex items-end gap-2 px-4 py-2">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={handleInputChange}
+              onKeyDown={handleKeyDown}
+              disabled={isThinking}
+              placeholder="Message Janus..."
+              rows={1}
+              className="flex-1 bg-transparent text-[14px] text-gray-200 placeholder-gray-600 resize-none focus:outline-none disabled:opacity-40 leading-relaxed py-1.5 max-h-40"
+            />
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => sendMessage(input)}
+              disabled={isThinking || !input.trim()}
+              className="p-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-800 disabled:text-gray-600 text-white transition-all shrink-0 mb-0.5"
+            >
+              <ArrowUp size={16} />
+            </motion.button>
           </div>
-        )}
-      </motion.aside>
-
-      {/* Mobile header */}
-      <div className="lg:hidden fixed top-0 left-0 right-0 h-12 bg-gray-900/90 backdrop-blur-sm border-b border-white/5 flex items-center justify-between px-3 z-30">
-        <button onClick={() => setMobileMenuOpen(true)} className="p-1.5 rounded hover:bg-white/5 text-gray-400"><Menu size={16} /></button>
-        <span className="text-xs font-light tracking-[0.2em] bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">JANUS</span>
-        <div className="w-7" />
+          <p className="text-center text-[11px] text-gray-700 mt-2">
+            Janus can make mistakes. Verify important analysis independently.
+          </p>
+        </div>
       </div>
-
-      {/* Mobile drawer */}
-      <AnimatePresence>
-        {mobileMenuOpen && (
-          <motion.div initial={{ x: -280 }} animate={{ x: 0 }} exit={{ x: -280 }} transition={{ type: 'spring', damping: 25, stiffness: 200 }} className="fixed top-0 left-0 bottom-0 w-60 bg-gray-900 border-r border-white/5 z-50 lg:hidden">
-            <div className="flex items-center justify-between h-12 px-3 border-b border-white/5">
-              <span className="text-xs font-light tracking-[0.2em] bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">JANUS</span>
-              <button onClick={() => setMobileMenuOpen(false)} className="p-1 rounded hover:bg-white/5 text-gray-500"><XIcon size={14} /></button>
-            </div>
-            <nav className="flex-1 overflow-y-auto py-2 px-1.5 space-y-1">
-              {sections.map(section => (
-                <div key={section}>
-                  <div className="px-2 py-1.5 text-[8px] font-mono text-gray-600 uppercase tracking-widest">{section}</div>
-                  {sectionItems(section).map(item => {
-                    const active = activeTab === item.id;
-                    const Icon = item.icon;
-                    return (
-                      <button key={item.id} onClick={() => { setActiveTab(item.id); setMobileMenuOpen(false); }}
-                        className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg transition-all text-sm ${active ? 'bg-indigo-500/10 text-indigo-300 border border-indigo-500/20' : 'text-gray-500 hover:text-gray-300 hover:bg-white/5 border border-transparent'}`}>
-                        <Icon size={14} className="shrink-0" />
-                        <span className="font-mono text-[10px] uppercase tracking-wider">{item.label}</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              ))}
-            </nav>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Main content */}
-      <main className="flex-1 min-w-0 overflow-hidden pt-12 lg:pt-0">
-        <motion.div initial={{ opacity: 0 }} animate={{ opacity: systemState === 'dashboard' ? 1 : 0 }} transition={{ duration: 0.8 }}
-          className={`h-full flex flex-col ${systemState === 'art' ? 'pointer-events-none' : ''}`}>
-          <div className="flex-1 min-h-0 overflow-hidden p-4">
-            <AnimatePresence mode="wait">
-              <motion.div key={activeTab} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.3 }} className="h-full">
-                {renderTab()}
-              </motion.div>
-            </AnimatePresence>
-          </div>
-        </motion.div>
-      </main>
     </div>
   );
 }

frontend/src/app/prompts/page.tsx

@@ -1,38 +1,13 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
-import { motion } from 'framer-motion';
-import { Terminal, FileCode2, Brain, Zap, Search, Shield, Hexagon, Info } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Terminal, FileCode2, Brain, Search, Shield, Info, RefreshCw } from 'lucide-react';
 
 const PROMPTS = [
-  {
-    name: 'switchboard',
-    label: 'Switchboard',
-    icon: Search,
-    description: 'Routes queries to the right agent pipeline. Classifies domain, complexity, and required tools.',
-    color: 'text-indigo-400',
-  },
-  {
-    name: 'research',
-    label: 'Research',
-    icon: FileCode2,
-    description: 'Gathers and analyzes information from web search, news, knowledge base, and API discovery.',
-    color: 'text-violet-400',
-  },
-  {
-    name: 'synthesizer',
-    label: 'Synthesizer',
-    icon: Brain,
-    description: 'Produces the final answer by combining research, planning, and simulation outputs.',
-    color: 'text-emerald-400',
-  },
-  {
-    name: 'verifier',
-    label: 'Verifier',
-    icon: Shield,
-    description: 'Quality gate — checks analysis for logical soundness, evidence alignment, and completeness.',
-    color: 'text-amber-400',
-  },
+  { name: 'switchboard', label: 'Switchboard', icon: Search, description: 'Routes queries to the right agent pipeline. Classifies domain, complexity, and required tools.', color: 'text-indigo-400' },
+  { name: 'research', label: 'Research', icon: FileCode2, description: 'Gathers and analyzes information from web search, news, knowledge base, and API discovery.', color: 'text-violet-400' },
+  { name: 'synthesizer', label: 'Synthesizer', icon: Brain, description: 'Produces the final answer by combining research, planning, and simulation outputs.', color: 'text-emerald-400' },
+  { name: 'verifier', label: 'Verifier', icon: Shield, description: 'Quality gate — checks analysis for logical soundness, evidence alignment, and completeness.', color: 'text-amber-400' },
 ];
 
 export default function PromptsPage() {
@@ -40,151 +15,106 @@ export default function PromptsPage() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const t = setTimeout(() => {
-      setSelectedPrompt(PROMPTS[0]);
-      setLoading(false);
-    }, 500);
+    const t = setTimeout(() => { setSelectedPrompt(PROMPTS[0]); setLoading(false); }, 300);
     return () => clearTimeout(t);
   }, []);
 
   if (loading) {
     return (
-      <div className="flex h-screen items-center justify-center pb-20">
-        <div className="flex flex-col items-center gap-4">
-          <Terminal size={32} className="text-indigo-500/50" />
-          <div className="flex gap-1.5 mt-2">
-            {[0, 1, 2].map((i) => (
-              <div key={i} className="w-1.5 h-1.5 rounded-full bg-indigo-500" style={{ animation: `pulse 1.5s infinite ${i * 0.2}s` }} />
-            ))}
-          </div>
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw size={20} className="text-indigo-400 animate-spin" />
+          <p className="text-[12px] text-gray-500">Loading protocols...</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="h-screen flex flex-col p-6 max-h-screen max-w-[1600px] mx-auto relative overflow-hidden">
-      
-      {/* Background flare */}
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-indigo-500/5 blur-[100px] rounded-[100%] pointer-events-none" />
-
-      <header className="flex items-center justify-between shrink-0 mb-6 relative z-10 px-2 lg:px-6">
-        <div className="flex items-center gap-4">
-          <div className="w-10 h-10 rounded-2xl glass flex items-center justify-center border border-indigo-500/20">
-            <Terminal size={18} className="text-indigo-400" />
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+            <Terminal size={16} className="text-indigo-400" />
           </div>
           <div>
-            <h1 className="text-2xl font-light tracking-[0.15em] text-gradient-subtle uppercase">
-              Agent Protocols
-            </h1>
-            <p className="text-[10px] font-mono text-gray-500 uppercase tracking-widest mt-1">
-              Cognitive instruction sets for the Janus agent pipeline
-            </p>
+            <h1 className="text-lg font-light text-gray-100">Prompt Lab</h1>
+            <p className="text-[11px] text-gray-600">Agent protocol instruction sets for the Janus pipeline</p>
           </div>
         </div>
-      </header>
+      </div>
 
-      <div className="flex-1 min-h-0 flex gap-6 px-2 lg:px-6 relative z-10">
-        
-        {/* Left Sidebar: Prompt selector */}
-        <div className="w-72 shrink-0 flex flex-col gap-4">
-          <div className="flex items-center gap-2 mb-2 text-[10px] font-mono text-gray-500 uppercase tracking-widest">
-            <FileCode2 size={12} /> Agent Instructions
-          </div>
-          
-          <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-            {PROMPTS.map((p) => {
-              const isActive = selectedPrompt?.name === p.name;
-              const Icon = p.icon;
-              return (
-                <button
-                  key={p.name}
-                  onClick={() => setSelectedPrompt(p)}
-                  className={`w-full text-left p-4 rounded-2xl transition-all duration-300 border block group ${
-                    isActive 
-                      ? 'glass border-indigo-500/40 bg-indigo-500/5' 
-                      : 'border-white/[0.03] hover:border-white/10 hover:bg-white/[0.02]'
-                  }`}
-                >
-                  <div className="flex items-center gap-3 mb-2">
-                    <Icon size={16} className={isActive ? p.color : 'text-gray-600'} />
-                    <span className={`text-sm font-mono tracking-wider ${isActive ? 'text-indigo-300' : 'text-gray-400 group-hover:text-gray-300'}`}>
-                      {p.label}
-                    </span>
-                  </div>
-                  <div className="text-[10px] font-mono text-gray-600 line-clamp-2">
-                    {p.description}
-                  </div>
-                </button>
-              );
-            })}
-          </div>
+      {/* Content */}
+      <div className="flex-1 min-h-0 flex overflow-hidden">
+        {/* Left: Protocol selector */}
+        <div className="w-64 shrink-0 border-r border-white/[0.04] p-4 overflow-y-auto space-y-2">
+          <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-3 px-1">Agent Protocols</div>
+          {PROMPTS.map(p => {
+            const isActive = selectedPrompt?.name === p.name;
+            const Icon = p.icon;
+            return (
+              <button
+                key={p.name}
+                onClick={() => setSelectedPrompt(p)}
+                className={`w-full text-left p-3 rounded-xl transition-all border group ${
+                  isActive
+                    ? 'bg-white/[0.05] border-indigo-500/20'
+                    : 'border-transparent hover:bg-white/[0.03] hover:border-white/[0.04]'
+                }`}
+              >
+                <div className="flex items-center gap-2.5 mb-1">
+                  <Icon size={14} className={isActive ? p.color : 'text-gray-600'} />
+                  <span className={`text-[12px] ${isActive ? 'text-gray-200' : 'text-gray-500 group-hover:text-gray-300'}`}>
+                    {p.label}
+                  </span>
+                </div>
+                <p className="text-[10px] text-gray-600 line-clamp-2 pl-[22px]">{p.description}</p>
+              </button>
+            );
+          })}
         </div>
 
-        {/* Right Area: Prompt detail */}
-        <div className="flex-1 flex flex-col glass rounded-3xl border border-white/[0.05] overflow-hidden group">
-          {/* Header */}
-          <div className="h-14 border-b border-white/[0.05] flex items-center justify-between px-6 bg-black/20">
-            <div className="flex items-center gap-3 text-xs font-mono text-gray-400">
-              {selectedPrompt && <selectedPrompt.icon size={14} className={selectedPrompt.color} />}
-              <span>Viewing: <span className="text-indigo-300">{selectedPrompt?.label || 'Nothing Selected'}</span></span>
-            </div>
-          </div>
+        {/* Right: Detail view */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {selectedPrompt ? (
+            <div className="max-w-2xl">
+              <div className="flex items-center gap-3 mb-5">
+                <selectedPrompt.icon size={22} className={selectedPrompt.color} />
+                <h2 className="text-xl font-light text-gray-100">{selectedPrompt.label}</h2>
+              </div>
+              <p className="text-[13px] text-gray-400 leading-relaxed mb-6">{selectedPrompt.description}</p>
 
-          {/* Body */}
-          <div className="flex-1 relative bg-[#0a0a0f]/80 p-8 overflow-y-auto">
-            {selectedPrompt ? (
-              <div className="max-w-2xl">
-                <div className="flex items-center gap-3 mb-6">
-                  <selectedPrompt.icon size={24} className={selectedPrompt.color} />
-                  <h2 className="text-xl font-light text-gray-100">{selectedPrompt.label}</h2>
+              <div className="card p-5 space-y-3">
+                <div className="flex items-center gap-2 text-[10px] text-gray-500 uppercase tracking-wider mb-3">
+                  <Info size={11} /> Protocol Details
                 </div>
-                <p className="text-sm text-gray-400 leading-relaxed mb-8">{selectedPrompt.description}</p>
-                
-                <div className="glass rounded-xl p-6 border border-white/[0.04]">
-                  <div className="flex items-center gap-2 mb-4 text-[10px] font-mono text-gray-500 uppercase tracking-widest">
-                    <Info size={12} /> Protocol Details
-                  </div>
-                  <div className="space-y-3 text-xs font-mono">
-                    <div className="flex justify-between border-b border-white/5 pb-2">
-                      <span className="text-gray-500">Agent Name</span>
-                      <span className="text-gray-300">{selectedPrompt.name}</span>
-                    </div>
-                    <div className="flex justify-between border-b border-white/5 pb-2">
-                      <span className="text-gray-500">Pipeline Position</span>
-                      <span className="text-gray-300">
-                        {selectedPrompt.name === 'switchboard' ? '1st (entry point)' :
-                         selectedPrompt.name === 'research' ? '2nd (data gathering)' :
-                         selectedPrompt.name === 'synthesizer' ? '3rd (final output)' :
-                         'Quality gate (optional)'}
-                      </span>
-                    </div>
-                    <div className="flex justify-between border-b border-white/5 pb-2">
-                      <span className="text-gray-500">Model Calls</span>
-                      <span className="text-gray-300">1 per execution</span>
-                    </div>
-                    <div className="flex justify-between pb-2">
-                      <span className="text-gray-500">Editable</span>
-                      <span className="text-gray-300">Via backend prompt store</span>
-                    </div>
+                {[
+                  ['Agent Name', selectedPrompt.name],
+                  ['Pipeline Position', selectedPrompt.name === 'switchboard' ? '1st (entry)' : selectedPrompt.name === 'research' ? '2nd (data)' : selectedPrompt.name === 'synthesizer' ? '3rd (output)' : 'Quality gate'],
+                  ['Model Calls', '1 per execution'],
+                  ['Editable', 'Via backend prompt store'],
+                ].map(([k, v]) => (
+                  <div key={k} className="flex justify-between text-[12px] border-b border-white/[0.03] pb-2">
+                    <span className="text-gray-500">{k}</span>
+                    <span className="text-gray-300">{v}</span>
                   </div>
-                </div>
-
-                <div className="mt-6 p-4 rounded-xl bg-amber-500/5 border border-amber-500/10">
-                  <p className="text-xs font-mono text-amber-400/70">
-                    Prompt files are stored on the cloud backend. To edit prompts, modify the files in <code className="text-amber-300">backend/app/prompts/</code> and redeploy.
-                  </p>
-                </div>
+                ))}
               </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-center">
-                <Terminal size={32} className="text-gray-700 mb-4" />
-                <p className="text-sm font-mono text-gray-500">Select an agent protocol to view details.</p>
+
+              <div className="mt-5 p-4 rounded-xl bg-amber-500/5 border border-amber-500/10">
+                <p className="text-[11px] text-amber-400/70">
+                  Prompt files are stored on the backend. Edit files in <code className="text-amber-300">backend/app/prompts/</code> and redeploy.
+                </p>
               </div>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full">
+              <Terminal size={28} className="text-gray-700 mb-3" />
+              <p className="text-[13px] text-gray-500">Select a protocol to view.</p>
+            </div>
+          )}
         </div>
-
       </div>
     </div>
   );

frontend/src/app/pulse/page.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import {
+  Activity, Radio, Database, Moon, Sun, Sunrise, Sunset,
+  AlertTriangle, CheckCircle, ExternalLink, Info, RefreshCw
+} from 'lucide-react';
+
+interface DaemonStatus {
+  running: boolean;
+  cycle_count: number;
+  last_run: string;
+  circadian: {
+    current_phase: string;
+    phase_name: string;
+    phase_description: string;
+    priority: string;
+    current_tasks: string[];
+  };
+  signal_queue?: {
+    total_signals: number;
+    severity_counts: Record<string, number>;
+  };
+  signals?: number;
+}
+
+interface Alert {
+  type: string;
+  title: string;
+  description: string;
+  source: string;
+  severity: string;
+  timestamp: string;
+  url?: string;
+}
+
+interface MemoryStats {
+  queries: number;
+  entities: number;
+  insights: number;
+}
+
+function SeverityBadge({ severity }: { severity: string }) {
+  const map: Record<string, string> = {
+    critical: 'bg-red-500/15 text-red-300 border-red-500/25',
+    high: 'bg-orange-500/15 text-orange-300 border-orange-500/25',
+    medium: 'bg-amber-500/15 text-amber-300 border-amber-500/25',
+    low: 'bg-gray-500/15 text-gray-400 border-gray-500/25',
+  };
+  return <span className={`px-2 py-0.5 rounded border text-[9px] uppercase tracking-wider ${map[severity] || map.low}`}>{severity}</span>;
+}
+
+export default function PulsePage() {
+  const [status, setStatus] = useState<DaemonStatus | null>(null);
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+  const [memory, setMemory] = useState<MemoryStats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = useCallback(async () => {
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+    try {
+      const [statusRes, alertsRes, memoryRes] = await Promise.all([
+        fetch(`${baseUrl}/daemon/status`).then(r => r.ok ? r.json() : null),
+        fetch(`${baseUrl}/daemon/alerts?limit=20`).then(r => r.ok ? r.json() : []),
+        fetch(`${baseUrl}/memory/stats`).then(r => r.ok ? r.json() : null),
+      ]);
+      if (statusRes) setStatus(statusRes);
+      if (alertsRes) setAlerts(Array.isArray(alertsRes) ? alertsRes : []);
+      if (memoryRes) setMemory(memoryRes);
+    } catch { /* silent */ }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    const iv = setInterval(fetchData, 30000);
+    return () => clearInterval(iv);
+  }, [fetchData]);
+
+  const phaseIcons: Record<string, React.ReactNode> = {
+    morning: <Sunrise size={16} className="text-amber-400" />,
+    daytime: <Sun size={16} className="text-indigo-400" />,
+    evening: <Sunset size={16} className="text-violet-400" />,
+    night: <Moon size={16} className="text-indigo-300" />,
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw size={20} className="text-indigo-400 animate-spin" />
+          <p className="text-[12px] text-gray-500">Loading pulse data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+            <Activity size={16} className="text-emerald-400" />
+          </div>
+          <div>
+            <h1 className="text-lg font-light text-gray-100">Pulse</h1>
+            <p className="text-[11px] text-gray-600">Daemon telemetry, signal queue, and memory graph</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-5xl mx-auto">
+          {/* Top stats grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+            {/* Circadian phase */}
+            {status?.circadian && (
+              <div className="card p-5">
+                <div className="flex items-center gap-3 mb-4">
+                  {phaseIcons[status.circadian.current_phase]}
+                  <div>
+                    <h3 className="text-[14px] text-gray-200">{status.circadian.phase_name}</h3>
+                    <p className="text-[11px] text-gray-600">{status.circadian.phase_description}</p>
+                  </div>
+                </div>
+                <div className="space-y-2 text-[12px]">
+                  <div className="flex justify-between"><span className="text-gray-500">Priority</span><span className="text-gray-300 capitalize">{status.circadian.priority}</span></div>
+                  <div className="flex justify-between"><span className="text-gray-500">Active Tasks</span><span className="text-gray-300">{status.circadian.current_tasks.length}</span></div>
+                </div>
+              </div>
+            )}
+
+            {/* Signal Queue */}
+            <div className="card p-5">
+              <div className="flex items-center gap-2 text-[11px] text-indigo-400 uppercase tracking-wider mb-4">
+                <Radio size={12} /> Signal Queue
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="text-center">
+                  <div className="text-xl font-light text-white">{status?.signal_queue?.total_signals || status?.signals || 0}</div>
+                  <div className="text-[9px] text-gray-600 uppercase tracking-wider">Total</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-light text-red-400">{status?.signal_queue?.severity_counts?.high || 0}</div>
+                  <div className="text-[9px] text-gray-600 uppercase tracking-wider">High</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Memory Graph */}
+            {memory && (
+              <div className="card p-5">
+                <div className="flex items-center gap-2 text-[11px] text-violet-400 uppercase tracking-wider mb-4">
+                  <Database size={12} /> Memory Graph
+                </div>
+                <div className="grid grid-cols-3 gap-2">
+                  <div className="text-center">
+                    <div className="text-xl font-light text-white">{memory.queries}</div>
+                    <div className="text-[9px] text-gray-600 uppercase">Queries</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-xl font-light text-indigo-400">{memory.entities}</div>
+                    <div className="text-[9px] text-gray-600 uppercase">Entities</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-xl font-light text-violet-400">{memory.insights}</div>
+                    <div className="text-[9px] text-gray-600 uppercase">Insights</div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Daemon status bar */}
+          {status && (
+            <div className="card p-4 mb-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className={`w-2 h-2 rounded-full ${status.running ? 'bg-emerald-400' : 'bg-gray-600'}`} />
+                  <span className="text-[12px] text-gray-300">{status.running ? 'Daemon active' : 'Daemon offline'}</span>
+                </div>
+                <div className="flex items-center gap-4 text-[11px] text-gray-600">
+                  <span>Cycles: {status.cycle_count}</span>
+                  {status.last_run && <span>Last run: {new Date(status.last_run).toLocaleTimeString()}</span>}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Alerts feed */}
+          <div>
+            <div className="text-[11px] text-gray-500 uppercase tracking-wider mb-3">
+              Alert Feed — {alerts.length} alerts
+            </div>
+            {alerts.length > 0 ? (
+              <div className="space-y-2">
+                {alerts.map((alert, i) => (
+                  <motion.div
+                    key={`${alert.title}-${i}`}
+                    initial={{ opacity: 0, y: 6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: i * 0.03 }}
+                    className="card p-3 hover:border-white/[0.12]"
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className="mt-0.5">
+                        {alert.severity === 'high' || alert.severity === 'critical'
+                          ? <AlertTriangle size={14} className="text-red-400" />
+                          : <Info size={14} className="text-amber-400" />}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1 flex-wrap">
+                          <SeverityBadge severity={alert.severity} />
+                          <span className="text-[10px] text-gray-600">{alert.type}</span>
+                        </div>
+                        <p className="text-[12px] text-gray-300 leading-snug">{alert.title}</p>
+                        {alert.description && <p className="text-[11px] text-gray-600 mt-1 line-clamp-1">{alert.description}</p>}
+                        <div className="flex items-center gap-2 mt-2">
+                          <span className="text-[10px] text-gray-700">{new Date(alert.timestamp).toLocaleString()}</span>
+                          {alert.url && (
+                            <a href={alert.url} target="_blank" rel="noreferrer" className="text-[10px] text-indigo-400 hover:text-indigo-300 flex items-center gap-0.5">
+                              <ExternalLink size={8} /> Read
+                            </a>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            ) : (
+              <div className="card text-center py-12">
+                <CheckCircle size={24} className="text-emerald-500/30 mx-auto mb-3" />
+                <p className="text-[13px] text-gray-500">No alerts. All systems normal.</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/sentinel/page.tsx

@@ -259,7 +259,7 @@ export default function SentinelPage() {
   // ── Loading ──
   if (loading) {
     return (
-      <div className="flex h-screen items-center justify-center pb-20">
+      <div className="flex h-full items-center justify-center">
         <div className="flex flex-col items-center gap-6">
           <JanusOrb size={56} thinking />
           <p className="text-xs font-mono text-indigo-400 uppercase tracking-widest animate-pulse">
@@ -273,7 +273,7 @@ export default function SentinelPage() {
   // ── Disabled ──
   if (!status?.sentinel_enabled) {
     return (
-      <div className="flex h-screen flex-col items-center justify-center pb-20">
+      <div className="flex h-full flex-col items-center justify-center">
         <div className="glass rounded-3xl p-12 text-center max-w-md">
           <Shield size={40} className="text-gray-600 mx-auto mb-6" />
           <h2 className="text-lg font-light tracking-[0.15em] text-gradient-subtle uppercase mb-3">
@@ -292,7 +292,8 @@ export default function SentinelPage() {
   const domainExpertise = intelligence?.domain_expertise || {};
 
   return (
-    <div className="max-w-[1480px] mx-auto px-10 py-10 relative">
+    <div className="h-full overflow-y-auto">
+    <div className="max-w-[1400px] mx-auto px-6 py-8 relative">
 
       {/* ── Background flare ── */}
       <div className="fixed top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-indigo-500/5 blur-[120px] rounded-full pointer-events-none" />
@@ -881,5 +882,6 @@ export default function SentinelPage() {
         </AnimatePresence>
       </div>
     </div>
+    </div>
   );
 }

frontend/src/app/simulation/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
-import { FlaskConical, Target, ListOrdered, Share2, Play, Hexagon, Zap, RefreshCw } from 'lucide-react';
+import { Zap, Target, ListOrdered, Share2, RefreshCw } from 'lucide-react';
 import { apiClient } from '@/lib/api';
 
 interface SimulationSummary {
@@ -22,17 +22,12 @@ export default function SimulationPage() {
   const [simulations, setSimulations] = useState<SimulationSummary[]>([]);
   const [refreshing, setRefreshing] = useState(false);
 
-  const [form, setForm] = useState({
-    title: '',
-    seedText: '',
-    predictionGoal: ''
-  });
+  const [form, setForm] = useState({ title: '', seedText: '', predictionGoal: '' });
 
   const loadSimulations = useCallback(async () => {
     setRefreshing(true);
     try {
       const data = await apiClient.getSimulations();
-      // Map SimulationRecord to SimulationSummary
       const summaries: SimulationSummary[] = (Array.isArray(data) ? data : []).map((sim: any) => ({
         simulation_id: sim.simulation_id,
         user_input: sim.user_input || sim.title || '',
@@ -42,215 +37,168 @@ export default function SimulationPage() {
         created_at: sim.created_at || 0,
       }));
       setSimulations(summaries);
-    } catch {
-      setSimulations([]);
-    } finally {
-      setRefreshing(false);
-    }
+    } catch { setSimulations([]); }
+    finally { setRefreshing(false); }
   }, []);
 
-  useEffect(() => {
-    loadSimulations();
-  }, [loadSimulations]);
+  useEffect(() => { loadSimulations(); }, [loadSimulations]);
 
   const handleSubmit = async () => {
     if (!form.title || !form.seedText || !form.predictionGoal) {
       setError('All simulation parameters are required.');
       return;
     }
-
-    setLoading(true);
-    setError(null);
-
+    setLoading(true); setError(null);
     try {
-      // Run native simulation directly
       const userInput = `${form.title}. ${form.seedText}. Goal: ${form.predictionGoal}`;
       const result = await apiClient.runNativeSimulation(userInput, {
-        title: form.title,
-        seed_text: form.seedText,
-        prediction_goal: form.predictionGoal,
+        title: form.title, seed_text: form.seedText, prediction_goal: form.predictionGoal,
       });
-
-      // Navigate to simulation detail
       if (result.simulation_id) {
         router.push(`/simulation/${result.simulation_id}`);
       } else {
-        setError('Simulation completed but no ID was returned.');
+        setError('Simulation completed but no ID returned.');
         setLoading(false);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to initialize simulation core.');
+      setError(err instanceof Error ? err.message : 'Failed to run simulation.');
       setLoading(false);
     }
   };
 
   return (
-    <div className="max-w-[1480px] mx-auto px-10 py-12">
-      <header className="mb-12">
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4 mb-4">
-            <div className="relative flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/20">
-              <FlaskConical size={20} className="text-amber-400" />
-              {loading && <div className="absolute inset-0 rounded-2xl border-2 border-amber-400/50 border-t-transparent animate-spin" />}
+          <div className="flex items-center gap-3">
+            <div className="relative w-9 h-9 rounded-xl bg-amber-500/10 border border-amber-500/15 flex items-center justify-center">
+              <Zap size={16} className="text-amber-400" />
+              {loading && <div className="absolute inset-0 rounded-xl border-2 border-amber-400/40 border-t-transparent animate-spin" />}
             </div>
             <div>
-              <h1 className="text-3xl font-light tracking-[0.15em] text-gradient-subtle uppercase">
-                Simulation Lab
-              </h1>
-              <div className="flex items-center gap-2 mt-1">
-                <div className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
-                <span className="text-[10px] font-mono text-amber-400/70 uppercase tracking-widest">
-                  Native Simulation Engine Online
-                </span>
-              </div>
+              <h1 className="text-lg font-light text-gray-100">Simulation Lab</h1>
+              <p className="text-[11px] text-gray-600">Scenario modeling and prediction engine</p>
             </div>
           </div>
-
-          <button
-            onClick={loadSimulations}
-            disabled={refreshing}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl glass border border-white/5 hover:border-amber-500/20 text-xs font-mono text-gray-400 hover:text-amber-300 transition-all disabled:opacity-40"
-          >
-            <RefreshCw size={13} className={refreshing ? 'animate-spin' : ''} />
-            Refresh
+          <button onClick={loadSimulations} disabled={refreshing} className="flex items-center gap-2 px-3 py-1.5 rounded-xl border border-white/[0.06] hover:border-white/[0.12] text-[11px] text-gray-500 hover:text-gray-300 transition-all disabled:opacity-40">
+            <RefreshCw size={12} className={refreshing ? 'animate-spin' : ''} /> Refresh
           </button>
         </div>
-      </header>
+      </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-        
-        {/* CREATE SIMULATION FORM */}
-        <div className="lg:col-span-7">
-          <div className="glass rounded-3xl p-8 relative overflow-hidden group">
-            <div className="absolute -top-24 -right-24 w-64 h-64 bg-amber-500/5 blur-3xl rounded-full pointer-events-none" />
-            
-            <h2 className="text-sm font-mono text-gray-400 uppercase tracking-widest mb-8 flex items-center gap-2">
-              <Hexagon size={14} className="text-amber-400/50" />
-              Initialize New Scenario
-            </h2>
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
 
-            {error && (
-              <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-xs font-mono text-red-400">
-                {error}
-              </div>
-            )}
+          {/* Form */}
+          <div className="lg:col-span-7">
+            <div className="card p-6 space-y-5">
+              <h2 className="text-[11px] text-amber-400 uppercase tracking-wider flex items-center gap-2">
+                <Zap size={12} /> New Simulation
+              </h2>
+
+              {error && (
+                <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/15 text-[12px] text-red-400">{error}</div>
+              )}
 
-            <div className="space-y-6">
-              
-              <div className="space-y-2">
-                <label className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Scenario Title</label>
+              <div className="space-y-1.5">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wider">Scenario Title</label>
                 <div className="relative">
-                  <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <Target size={14} className="text-amber-500/50" />
-                  </div>
+                  <Target size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-600" />
                   <input
                     value={form.title}
-                    onChange={(e) => setForm({ ...form, title: e.target.value })}
+                    onChange={e => setForm({ ...form, title: e.target.value })}
                     disabled={loading}
                     placeholder="e.g. US Debt Default Simulation"
-                    className="w-full bg-black/40 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-gray-200 font-mono focus:border-amber-500/50 focus:outline-none transition-colors placeholder:text-gray-700"
+                    className="w-full py-2.5 pl-9 pr-4 text-[13px] text-gray-200 rounded-xl border border-white/[0.06] focus:border-amber-500/30 focus:outline-none transition-colors placeholder:text-gray-700"
+                    style={{ background: 'rgba(0,0,0,0.3)' }}
                   />
                 </div>
               </div>
 
-              <div className="space-y-2">
-                <label className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Initial Context (Seed)</label>
+              <div className="space-y-1.5">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wider">Initial Context</label>
                 <div className="relative">
-                  <div className="absolute top-3.5 left-0 pl-4 pointer-events-none">
-                    <ListOrdered size={14} className="text-amber-500/50" />
-                  </div>
+                  <ListOrdered size={14} className="absolute left-3 top-3 text-gray-600" />
                   <textarea
                     value={form.seedText}
-                    onChange={(e) => setForm({ ...form, seedText: e.target.value })}
+                    onChange={e => setForm({ ...form, seedText: e.target.value })}
                     disabled={loading}
-                    placeholder="Provide the background facts, current market state, and constraints..."
-                    rows={4}
-                    className="w-full bg-black/40 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-gray-200 font-mono focus:border-amber-500/50 focus:outline-none transition-colors placeholder:text-gray-700 resize-none"
+                    placeholder="Background facts, market state, constraints..."
+                    rows={3}
+                    className="w-full py-2.5 pl-9 pr-4 text-[13px] text-gray-200 rounded-xl border border-white/[0.06] focus:border-amber-500/30 focus:outline-none transition-colors placeholder:text-gray-700 resize-none"
+                    style={{ background: 'rgba(0,0,0,0.3)' }}
                   />
                 </div>
               </div>
 
-              <div className="space-y-2">
-                <label className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Prediction Goal</label>
+              <div className="space-y-1.5">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wider">Prediction Goal</label>
                 <div className="relative">
-                  <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <Share2 size={14} className="text-amber-500/50" />
-                  </div>
+                  <Share2 size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-600" />
                   <input
                     value={form.predictionGoal}
-                    onChange={(e) => setForm({ ...form, predictionGoal: e.target.value })}
+                    onChange={e => setForm({ ...form, predictionGoal: e.target.value })}
                     disabled={loading}
-                    placeholder="e.g. What is the impact on 10-year treasury yields?"
-                    className="w-full bg-black/40 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-gray-200 font-mono focus:border-amber-500/50 focus:outline-none transition-colors placeholder:text-gray-700"
+                    placeholder="e.g. Impact on 10-year treasury yields?"
+                    className="w-full py-2.5 pl-9 pr-4 text-[13px] text-gray-200 rounded-xl border border-white/[0.06] focus:border-amber-500/30 focus:outline-none transition-colors placeholder:text-gray-700"
+                    style={{ background: 'rgba(0,0,0,0.3)' }}
                   />
                 </div>
               </div>
 
-              <div className="pt-4">
-                <button
-                  onClick={handleSubmit}
-                  disabled={loading}
-                  className="w-full group relative flex items-center justify-center gap-2 py-4 rounded-xl bg-amber-500/10 border border-amber-500/30 hover:bg-amber-500/20 disabled:bg-gray-900 disabled:border-gray-800 transition-all duration-300"
-                >
-                  <div className="absolute inset-0 bg-gradient-to-r from-amber-500/0 via-amber-500/10 to-amber-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 blur-md" />
-                  <Zap size={16} className={loading ? 'text-gray-600' : 'text-amber-400 group-hover:scale-110 transition-transform'} />
-                  <span className={`text-xs font-mono uppercase tracking-widest ${loading ? 'text-gray-500' : 'text-amber-300'}`}>
-                    {loading ? 'Running Simulation...' : 'Launch Simulation'}
-                  </span>
-                </button>
-              </div>
-
+              <button
+                onClick={handleSubmit}
+                disabled={loading}
+                className="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-amber-500/10 border border-amber-500/20 hover:bg-amber-500/20 disabled:opacity-40 transition-all text-[12px] text-amber-300"
+              >
+                <Zap size={14} className={loading ? 'animate-pulse' : ''} />
+                {loading ? 'Running Simulation...' : 'Launch Simulation'}
+              </button>
             </div>
           </div>
-        </div>
 
-        {/* ACTIVE SIMULATIONS LIST */}
-        <div className="lg:col-span-5 flex flex-col gap-4">
-          <div className="flex items-center justify-between mb-2">
-             <h3 className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Recent Executions</h3>
-             <span className="text-[10px] font-mono text-gray-600">{simulations.length} total</span>
-          </div>
-          
-          <div className="flex-1 overflow-y-auto space-y-3 pr-2" style={{ maxHeight: '600px' }}>
-            <AnimatePresence>
-              {simulations.length === 0 ? (
-                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="p-8 border border-white/5 border-dashed rounded-2xl flex flex-col items-center justify-center text-center">
-                  <Hexagon size={24} className="text-gray-800 mb-3" />
-                  <p className="text-xs font-mono text-gray-600 uppercase tracking-widest">No active simulations.</p>
-                </motion.div>
-              ) : (
-                simulations.map((sim, i) => (
-                  <motion.div
-                    key={sim.simulation_id}
-                    initial={{ opacity: 0, x: 20 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ delay: i * 0.05 }}
-                    onClick={() => router.push(`/simulation/${sim.simulation_id}`)}
-                    className="glass p-5 rounded-2xl border border-white/[0.04] hover:border-amber-500/30 hover:bg-white/[0.04] cursor-pointer transition-all duration-300 group"
-                  >
-                    <div className="flex items-start justify-between mb-3">
-                      <div className="flex items-center gap-2">
-                        <div className={`w-1.5 h-1.5 rounded-full ${sim.status === 'completed' ? 'bg-emerald-400' : sim.status === 'failed' ? 'bg-red-400' : 'bg-amber-400 animate-pulse'}`} />
-                        <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">
-                          {sim.status}
-                        </span>
-                      </div>
-                      <span className="text-[10px] font-mono text-gray-600 uppercase">
-                        {sim.simulation_id.slice(0, 8)}
-                      </span>
-                    </div>
-                    <h4 className="text-sm font-medium text-gray-200 group-hover:text-amber-300 transition-colors line-clamp-1 mb-1">
-                      {sim.user_input}
-                    </h4>
-                    <div className="flex items-center gap-3 text-[10px] font-mono text-gray-600">
-                      <span>{sim.scenarios} scenarios</span>
-                      <span>·</span>
-                      <span>{sim.elapsed_seconds}s</span>
+          {/* Recent simulations */}
+          <div className="lg:col-span-5 space-y-3">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-gray-500 uppercase tracking-wider">Recent Executions</span>
+              <span className="text-[10px] text-gray-600">{simulations.length} total</span>
+            </div>
+
+            {simulations.length === 0 ? (
+              <div className="card text-center py-12">
+                <Zap size={24} className="text-gray-700 mx-auto mb-3" />
+                <p className="text-[12px] text-gray-600">No simulations yet.</p>
+              </div>
+            ) : (
+              simulations.map((sim, i) => (
+                <motion.div
+                  key={sim.simulation_id}
+                  initial={{ opacity: 0, x: 12 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: i * 0.04 }}
+                  onClick={() => router.push(`/simulation/${sim.simulation_id}`)}
+                  className="card hover:border-amber-500/20 cursor-pointer group"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <div className={`w-1.5 h-1.5 rounded-full ${sim.status === 'completed' ? 'bg-emerald-400' : sim.status === 'failed' ? 'bg-red-400' : 'bg-amber-400 animate-pulse'}`} />
+                      <span className="text-[10px] text-gray-500 uppercase tracking-wider">{sim.status}</span>
                     </div>
-                  </motion.div>
-                ))
-              )}
-            </AnimatePresence>
+                    <span className="text-[10px] text-gray-600">{sim.simulation_id.slice(0, 8)}</span>
+                  </div>
+                  <h4 className="text-[13px] text-gray-300 group-hover:text-amber-300 transition-colors line-clamp-1 mb-1">
+                    {sim.user_input}
+                  </h4>
+                  <div className="flex items-center gap-3 text-[10px] text-gray-600">
+                    <span>{sim.scenarios} scenarios</span>
+                    <span>·</span>
+                    <span>{sim.elapsed_seconds}s</span>
+                  </div>
+                </motion.div>
+              ))
+            )}
           </div>
         </div>
       </div>

frontend/src/app/workspace/page.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { Brain, Sparkles, RefreshCw, Lightbulb } from 'lucide-react';
+
+export default function WorkspacePage() {
+  const [curiosity, setCuriosity] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [triggering, setTriggering] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+    try {
+      const res = await fetch(`${baseUrl}/daemon/curiosity`);
+      if (res.ok) setCuriosity(await res.json());
+    } catch { /* silent */ }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  const triggerCuriosity = async () => {
+    setTriggering(true);
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+    try {
+      const res = await fetch(`${baseUrl}/daemon/curiosity/now`, { method: 'POST' });
+      if (res.ok) {
+        const data = await res.json();
+        setCuriosity((prev: any) => prev
+          ? { ...prev, discoveries: [...(prev.discoveries || []), ...(data.discoveries || [])], total_discoveries: (prev.total_discoveries || 0) + (data.discoveries || []).length }
+          : data
+        );
+      }
+    } catch { /* silent */ }
+    finally { setTriggering(false); }
+  };
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-white/[0.04]">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+              <Brain size={16} className="text-violet-400" />
+            </div>
+            <div>
+              <h1 className="text-lg font-light text-gray-100">Workspace</h1>
+              <p className="text-[11px] text-gray-600">Janus curiosity engine — autonomous discovery</p>
+            </div>
+          </div>
+          <button
+            onClick={triggerCuriosity}
+            disabled={triggering}
+            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-violet-500/10 hover:bg-violet-500/20 border border-violet-500/15 text-[12px] text-violet-400 transition-all disabled:opacity-40"
+          >
+            <Sparkles size={12} className={triggering ? 'animate-pulse' : ''} />
+            {triggering ? 'Exploring...' : 'Explore'}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-20 gap-3">
+            <RefreshCw size={20} className="text-violet-400 animate-spin" />
+            <p className="text-[12px] text-gray-500">Loading workspace...</p>
+          </div>
+        ) : (
+          <div className="max-w-3xl mx-auto space-y-4">
+            {/* Stats */}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="card p-5 text-center">
+                <div className="text-2xl font-light text-white">{curiosity?.total_discoveries || 0}</div>
+                <div className="text-[10px] text-gray-600 uppercase tracking-wider mt-1">Discoveries</div>
+              </div>
+              <div className="card p-5 text-center">
+                <div className="text-2xl font-light text-violet-400">{curiosity?.total_interests || 0}</div>
+                <div className="text-[10px] text-gray-600 uppercase tracking-wider mt-1">Topics of Interest</div>
+              </div>
+            </div>
+
+            {/* Discoveries list */}
+            <div className="card p-5">
+              <div className="flex items-center gap-2 text-[11px] text-violet-400 uppercase tracking-wider mb-5">
+                <Lightbulb size={13} /> Recent Discoveries
+              </div>
+              <div className="space-y-3">
+                {(curiosity?.discoveries || []).slice(-10).reverse().map((d: any, i: number) => (
+                  <motion.div
+                    key={i}
+                    initial={{ opacity: 0, y: 6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: i * 0.04 }}
+                    className="p-3 rounded-xl border border-white/[0.04] hover:border-white/[0.08] transition-colors"
+                    style={{ background: 'rgba(255,255,255,0.015)' }}
+                  >
+                    <div className="flex items-center gap-2 mb-1.5">
+                      <span className="text-[10px] text-violet-400 bg-violet-500/10 px-2 py-0.5 rounded-full">{d.topic}</span>
+                      <span className="text-[10px] text-gray-700">{new Date(d.timestamp).toLocaleTimeString()}</span>
+                    </div>
+                    <p className="text-[13px] text-gray-300 leading-relaxed">{d.insight}</p>
+                  </motion.div>
+                ))}
+                {(!curiosity?.discoveries || curiosity.discoveries.length === 0) && (
+                  <div className="text-center py-12">
+                    <Brain size={28} className="text-gray-700 mx-auto mb-3" />
+                    <p className="text-[13px] text-gray-500">No discoveries yet.</p>
+                    <p className="text-[11px] text-gray-700 mt-1">Click &quot;Explore&quot; to trigger the curiosity engine.</p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Interests */}
+            {curiosity?.interests && Object.keys(curiosity.interests).length > 0 && (
+              <div className="card p-5">
+                <div className="text-[11px] text-gray-500 uppercase tracking-wider mb-4">Topics of Interest</div>
+                <div className="flex flex-wrap gap-2">
+                  {Object.entries(curiosity.interests).map(([topic, score]: [string, any]) => (
+                    <span key={topic} className="px-3 py-1.5 rounded-full text-[11px] text-gray-400 border border-white/[0.06] bg-white/[0.02]">
+                      {topic} <span className="text-gray-600 ml-1">{typeof score === 'number' ? Math.round(score * 100) + '%' : ''}</span>
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/AppShell.tsx

@@ -4,24 +4,51 @@ import { useState, useEffect, useCallback } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
-  Sparkles, Globe, BarChart3, Layers, Activity as PulseIcon,
-  Zap, Hexagon, Shield, Terminal, Settings,
-  ChevronLeft, ChevronRight, Menu, X
+  MessageSquare, Globe, BarChart3, Layers, Activity,
+  Zap, Shield, Terminal, Settings, Plus,
+  ChevronLeft, ChevronRight, Menu, X, Brain
 } from 'lucide-react';
 
-const navItems = [
-  { id: '/', label: 'Command', icon: Sparkles, section: 'Main' },
-  { id: '/intel', label: 'Intel Stream', icon: Globe, section: 'Main' },
-  { id: '/markets', label: 'Markets', icon: BarChart3, section: 'Main' },
-  { id: '/workspace', label: 'Workspace', icon: Layers, section: 'Main' },
-  { id: '/pulse', label: 'Pulse', icon: PulseIcon, section: 'Main' },
-  { id: '/cases', label: 'Cases', icon: Hexagon, section: 'System' },
-  { id: '/simulation', label: 'Simulations', icon: Zap, section: 'System' },
-  { id: '/sentinel', label: 'Sentinel', icon: Shield, section: 'System' },
-  { id: '/prompts', label: 'Prompt Lab', icon: Terminal, section: 'System' },
-  { id: '/config', label: 'Config', icon: Settings, section: 'System' },
+const navSections = [
+  {
+    label: 'Main',
+    items: [
+      { path: '/', label: 'Chat', icon: MessageSquare },
+      { path: '/intel', label: 'Intel', icon: Globe },
+      { path: '/markets', label: 'Markets', icon: BarChart3 },
+      { path: '/workspace', label: 'Workspace', icon: Brain },
+      { path: '/pulse', label: 'Pulse', icon: Activity },
+    ],
+  },
+  {
+    label: 'System',
+    items: [
+      { path: '/cases', label: 'Cases', icon: Layers },
+      { path: '/simulation', label: 'Simulation', icon: Zap },
+      { path: '/sentinel', label: 'Sentinel', icon: Shield },
+      { path: '/prompts', label: 'Prompts', icon: Terminal },
+      { path: '/config', label: 'Config', icon: Settings },
+    ],
+  },
 ];
 
+function JanusOrbSmall({ pulse = false }: { pulse?: boolean }) {
+  return (
+    <div className="relative w-8 h-8 shrink-0">
+      <div
+        className="absolute inset-0 rounded-full"
+        style={{
+          background: 'radial-gradient(circle at 35% 35%, #818cf8, #4f46e5 60%, #1e1b4b 100%)',
+          boxShadow: '0 0 12px rgba(99,102,241,0.3)',
+        }}
+      />
+      {pulse && (
+        <div className="absolute inset-0 rounded-full animate-ping opacity-20 bg-indigo-400" />
+      )}
+    </div>
+  );
+}
+
 export default function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const router = useRouter();
@@ -43,150 +70,166 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
     return () => clearInterval(iv);
   }, [fetchStatus]);
 
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
   const isActive = (path: string) => {
     if (path === '/') return pathname === '/';
     return pathname?.startsWith(path);
   };
 
-  const sections = ['Main', 'System'];
-
-  return (
-    <div className="h-screen bg-gray-950 text-gray-100 flex overflow-hidden">
-      {/* Mobile overlay */}
-      <AnimatePresence>
-        {mobileOpen && (
-          <motion.div
-            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/60 z-40 lg:hidden"
-            onClick={() => setMobileOpen(false)}
-          />
+  const NavContent = ({ isMobile = false }: { isMobile?: boolean }) => (
+    <>
+      {/* Logo */}
+      <div className="flex items-center gap-3 px-4 h-14 border-b border-white/[0.04] shrink-0">
+        <JanusOrbSmall pulse={daemonStatus?.running} />
+        {(!collapsed || isMobile) && (
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="text-[13px] font-light tracking-[0.2em] text-gradient"
+          >
+            JANUS
+          </motion.span>
         )}
-      </AnimatePresence>
+      </div>
 
-      {/* Sidebar */}
-      <motion.aside
-        initial={false}
-        animate={{ width: collapsed ? 64 : 240 }}
-        className={`hidden lg:flex flex-col bg-gray-900/80 border-r border-white/5 relative z-30 shrink-0`}
-      >
-        {/* Logo */}
-        <div className="flex items-center justify-between h-14 px-4 border-b border-white/5">
-          {!collapsed && (
-            <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-sm font-light tracking-[0.2em] bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">
-              JANUS
-            </motion.span>
-          )}
-          <button onClick={() => setCollapsed(!collapsed)} className="p-1.5 rounded-lg hover:bg-white/5 text-gray-500 hover:text-gray-300 transition-colors">
-            {collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
-          </button>
-        </div>
+      {/* New Chat button */}
+      <div className="px-3 pt-3 pb-1 shrink-0">
+        <button
+          onClick={() => router.push('/')}
+          className={`w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-white/[0.06] hover:border-white/[0.12] hover:bg-white/[0.03] transition-all text-sm text-gray-400 hover:text-gray-200 ${collapsed && !isMobile ? 'justify-center' : ''}`}
+        >
+          <Plus size={16} className="shrink-0" />
+          {(!collapsed || isMobile) && <span className="text-[12px]">New conversation</span>}
+        </button>
+      </div>
 
-        {/* Nav items */}
-        <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-1">
-          {sections.map(section => (
-            <div key={section}>
-              {!collapsed && (
-                <div className="px-3 py-2 text-[9px] font-mono text-gray-600 uppercase tracking-widest">
-                  {section}
-                </div>
-              )}
-              {navItems.filter(item => item.section === section).map(item => {
-                const active = isActive(item.id);
+      {/* Nav sections */}
+      <nav className="flex-1 overflow-y-auto py-2 px-2">
+        {navSections.map(section => (
+          <div key={section.label} className="mb-1">
+            {(!collapsed || isMobile) && (
+              <div className="px-2 pt-4 pb-1.5 text-[10px] font-medium text-gray-600 uppercase tracking-[0.15em]">
+                {section.label}
+              </div>
+            )}
+            {collapsed && !isMobile && <div className="h-3" />}
+            <div className="space-y-0.5">
+              {section.items.map(item => {
+                const active = isActive(item.path);
                 const Icon = item.icon;
                 return (
                   <button
-                    key={item.id}
-                    onClick={() => router.push(item.id)}
-                    className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-sm ${
+                    key={item.path}
+                    onClick={() => router.push(item.path)}
+                    className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-xl transition-all duration-200 group ${
                       active
-                        ? 'bg-indigo-500/10 text-indigo-300 border border-indigo-500/20'
-                        : 'text-gray-500 hover:text-gray-300 hover:bg-white/5 border border-transparent'
-                    } ${collapsed ? 'justify-center' : ''}`}
-                    title={collapsed ? item.label : undefined}
+                        ? 'bg-white/[0.06] text-gray-100'
+                        : 'text-gray-500 hover:text-gray-300 hover:bg-white/[0.03]'
+                    } ${collapsed && !isMobile ? 'justify-center px-2' : ''}`}
+                    title={collapsed && !isMobile ? item.label : undefined}
                   >
-                    <Icon size={16} className="shrink-0" />
-                    {!collapsed && (
-                      <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="font-mono text-[11px] uppercase tracking-wider truncate">
-                        {item.label}
-                      </motion.span>
+                    <Icon size={16} className={`shrink-0 ${active ? 'text-indigo-400' : 'group-hover:text-gray-400'}`} />
+                    {(!collapsed || isMobile) && (
+                      <span className="text-[12px] truncate">{item.label}</span>
                     )}
                   </button>
                 );
               })}
             </div>
-          ))}
-        </nav>
-
-        {/* Status */}
-        {!collapsed && (
-          <div className="px-4 py-3 border-t border-white/5">
-            <div className="flex items-center gap-2">
-              <div className={`w-1.5 h-1.5 rounded-full ${daemonStatus?.running ? 'bg-emerald-400 animate-pulse' : 'bg-gray-600'}`} />
-              <span className="text-[10px] font-mono text-gray-500 uppercase tracking-wider">
-                {daemonStatus?.running ? 'Living' : 'Offline'}
-              </span>
-            </div>
-            {daemonStatus?.circadian && (
-              <div className="text-[9px] font-mono text-gray-700 mt-1 capitalize">
-                {daemonStatus.circadian.current_phase} phase
-              </div>
-            )}
           </div>
-        )}
+        ))}
+      </nav>
+
+      {/* Status footer */}
+      {(!collapsed || isMobile) && (
+        <div className="px-4 py-3 border-t border-white/[0.04] shrink-0">
+          <div className="flex items-center gap-2">
+            <div className={`w-1.5 h-1.5 rounded-full ${daemonStatus?.running ? 'bg-emerald-400' : 'bg-gray-600'}`} />
+            <span className="text-[10px] text-gray-600">
+              {daemonStatus?.running ? 'System active' : 'Offline'}
+            </span>
+          </div>
+          {daemonStatus?.circadian && (
+            <div className="text-[10px] text-gray-700 mt-0.5 capitalize ml-3.5">
+              {daemonStatus.circadian.current_phase} phase
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <div className="h-screen flex overflow-hidden" style={{ background: 'var(--janus-bg)' }}>
+      {/* Desktop Sidebar */}
+      <motion.aside
+        initial={false}
+        animate={{ width: collapsed ? 68 : 260 }}
+        transition={{ duration: 0.2, ease: 'easeOut' }}
+        className="hidden lg:flex flex-col border-r border-white/[0.04] relative shrink-0"
+        style={{ background: 'rgba(10, 10, 15, 0.8)' }}
+      >
+        <NavContent />
+        {/* Collapse toggle */}
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className="absolute top-3 -right-3 w-6 h-6 rounded-full border border-white/[0.08] bg-[#111118] flex items-center justify-center text-gray-600 hover:text-gray-400 hover:border-white/[0.15] transition-all z-10"
+        >
+          {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
+        </button>
       </motion.aside>
 
-      {/* Mobile header */}
-      <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-gray-900/90 backdrop-blur-sm border-b border-white/5 flex items-center justify-between px-4 z-30">
-        <button onClick={() => setMobileOpen(true)} className="p-2 rounded-lg hover:bg-white/5 text-gray-400">
+      {/* Mobile Header */}
+      <div className="lg:hidden fixed top-0 left-0 right-0 h-12 border-b border-white/[0.04] flex items-center justify-between px-4 z-30" style={{ background: 'rgba(10, 10, 15, 0.95)', backdropFilter: 'blur(12px)' }}>
+        <button onClick={() => setMobileOpen(true)} className="p-1.5 rounded-lg hover:bg-white/[0.05] text-gray-400">
           <Menu size={18} />
         </button>
-        <span className="text-sm font-light tracking-[0.2em] bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">JANUS</span>
+        <div className="flex items-center gap-2">
+          <JanusOrbSmall />
+          <span className="text-[12px] tracking-[0.2em] text-gradient">JANUS</span>
+        </div>
         <div className="w-8" />
       </div>
 
-      {/* Mobile drawer */}
+      {/* Mobile Overlay */}
+      <AnimatePresence>
+        {mobileOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/60 z-40 lg:hidden"
+            onClick={() => setMobileOpen(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Mobile Drawer */}
       <AnimatePresence>
         {mobileOpen && (
           <motion.div
-            initial={{ x: -280 }} animate={{ x: 0 }} exit={{ x: -280 }}
-            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-            className="fixed top-0 left-0 bottom-0 w-72 bg-gray-900 border-r border-white/5 z-50 lg:hidden"
+            initial={{ x: -300 }}
+            animate={{ x: 0 }}
+            exit={{ x: -300 }}
+            transition={{ type: 'spring', damping: 28, stiffness: 280 }}
+            className="fixed top-0 left-0 bottom-0 w-72 z-50 lg:hidden flex flex-col border-r border-white/[0.04]"
+            style={{ background: 'var(--janus-bg)' }}
           >
-            <div className="flex items-center justify-between h-14 px-4 border-b border-white/5">
-              <span className="text-sm font-light tracking-[0.2em] bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">JANUS</span>
-              <button onClick={() => setMobileOpen(false)} className="p-1.5 rounded-lg hover:bg-white/5 text-gray-500">
+            <div className="absolute top-3 right-3">
+              <button onClick={() => setMobileOpen(false)} className="p-1 rounded-lg hover:bg-white/[0.05] text-gray-500">
                 <X size={16} />
               </button>
             </div>
-            <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-1">
-              {sections.map(section => (
-                <div key={section}>
-                  <div className="px-3 py-2 text-[9px] font-mono text-gray-600 uppercase tracking-widest">{section}</div>
-                  {navItems.filter(item => item.section === section).map(item => {
-                    const active = isActive(item.id);
-                    const Icon = item.icon;
-                    return (
-                      <button
-                        key={item.id}
-                        onClick={() => { router.push(item.id); setMobileOpen(false); }}
-                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-sm ${
-                          active ? 'bg-indigo-500/10 text-indigo-300 border border-indigo-500/20' : 'text-gray-500 hover:text-gray-300 hover:bg-white/5 border border-transparent'
-                        }`}
-                      >
-                        <Icon size={16} className="shrink-0" />
-                        <span className="font-mono text-[11px] uppercase tracking-wider">{item.label}</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              ))}
-            </nav>
+            <NavContent isMobile />
           </motion.div>
         )}
       </AnimatePresence>
 
-      {/* Main content */}
-      <main className="flex-1 min-w-0 overflow-hidden pt-14 lg:pt-0">
+      {/* Main Content Area */}
+      <main className="flex-1 min-w-0 overflow-hidden pt-12 lg:pt-0">
         {children}
       </main>
     </div>

frontend/src/lib/api.ts

@@ -169,88 +169,6 @@ export class MiroOrgClient {
     }
     return response.json();
   }
-
-  // Session endpoints
-  async createSession(): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/sessions`, { method: 'POST' });
-    if (!r.ok) throw new Error('Failed to create session');
-    return r.json();
-  }
-
-  async getSession(sessionId: string): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/sessions/${sessionId}`);
-    if (!r.ok) throw new Error('Failed to fetch session');
-    return r.json();
-  }
-
-  async listSessions(limit: number = 20): Promise<any[]> {
-    const r = await fetch(`${this.baseUrl}/sessions?limit=${limit}`);
-    if (!r.ok) return [];
-    return r.json();
-  }
-
-  async addMessage(sessionId: string, role: string, content: string): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/sessions/${sessionId}/message`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ role, content }),
-    });
-    if (!r.ok) throw new Error('Failed to add message');
-    return r.json();
-  }
-
-  // Workflow endpoints
-  async createResearchWorkflow(query: string, depth: string = 'standard'): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/workflows/research`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ query, depth }),
-    });
-    if (!r.ok) throw new Error('Failed to create research workflow');
-    return r.json();
-  }
-
-  async createSimulationWorkflow(scenario: string): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/workflows/simulation`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ scenario }),
-    });
-    if (!r.ok) throw new Error('Failed to create simulation workflow');
-    return r.json();
-  }
-
-  async listWorkflows(limit: number = 20, type?: string): Promise<any[]> {
-    const url = type ? `${this.baseUrl}/workflows?limit=${limit}&type=${type}` : `${this.baseUrl}/workflows?limit=${limit}`;
-    const r = await fetch(url);
-    if (!r.ok) return [];
-    return r.json();
-  }
-
-  async getWorkflow(wfId: string): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/workflows/${wfId}`);
-    if (!r.ok) throw new Error('Workflow not found');
-    return r.json();
-  }
-
-  async runWorkflow(wfId: string): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/workflows/${wfId}/run`, { method: 'POST' });
-    if (!r.ok) throw new Error('Failed to run workflow');
-    return r.json();
-  }
-
-  // Curiosity endpoints
-  async getCuriosity(): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/daemon/curiosity`);
-    if (!r.ok) return { total_discoveries: 0, total_interests: 0, discoveries: [] };
-    return r.json();
-  }
-
-  async triggerCuriosity(): Promise<any> {
-    const r = await fetch(`${this.baseUrl}/daemon/curiosity/now`, { method: 'POST' });
-    if (!r.ok) throw new Error('Failed to trigger curiosity');
-    return r.json();
-  }
 }
 
 // Export singleton instance

frontend/src/lib/types.ts

@@ -23,6 +23,20 @@ export interface CaseRecord {
   final_answer_preview?: string;
   saved_at?: string;
   simulation_id?: string;
+  // Extended fields from /run response
+  final?: {
+    response?: string;
+    summary?: string;
+    confidence?: number;
+    data_sources?: string[];
+  };
+  domain?: string;
+  query_type?: string;
+  cached?: boolean;
+  elapsed_seconds?: number;
+  learned?: boolean;
+  learning_reason?: string;
+  adaptive_context?: Record<string, any>;
 }
 
 export interface SimulationRecord {