Merge branch 'genspark_ai_developer'

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: 🚀 God Agent OS v7 — Auto Deploy
+name: 🚀 God Agent OS v8 — Auto Deploy
 
 on:
   push:
@@ -10,7 +10,7 @@ env:
   VERCEL_PROJECT: god-agent-os
 
 jobs:
-  # ── Build & Test ──────────────────────────────────────────────────────────
+  # ── Build & Syntax Check ──────────────────────────────────────────────────
   build-check:
     name: ✅ Build Check
     runs-on: ubuntu-latest
@@ -28,10 +28,12 @@ jobs:
           cd backend
           pip install -r requirements.txt
 
-      - name: Syntax check backend
+      - name: Syntax check backend (v8)
         run: |
           cd backend
-          python -m py_compile main_v7.py
+          python -m py_compile main_v8.py
+          python -m py_compile ai_router/router_v8.py
+          python -m py_compile ai_router/key_pool.py
           python -m py_compile agents/orchestrator_v7.py
           python -m py_compile agents/browser_agent.py
           python -m py_compile agents/file_agent.py
@@ -55,7 +57,7 @@ jobs:
         env:
           NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL || 'https://PYAE1994-autonomous-coding-system.hf.space' }}
 
-  # ── Deploy to Hugging Face Spaces ─────────────────────────────────────────
+  # ── Deploy to Hugging Face Spaces ────────────────────────────────────────
   deploy-huggingface:
     name: 🤗 Deploy to HF Spaces
     runs-on: ubuntu-latest
@@ -72,23 +74,24 @@ jobs:
           git config --global user.email "action@github.com"
           git config --global user.name "God Agent CI"
 
-      - name: Deploy backend to HF Space
+      - name: Deploy backend to HF Space (v8)
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
         run: |
-          # Install HF CLI
           pip install huggingface_hub -q
 
-          # Clone HF space
           git clone https://pyae1994:$HF_TOKEN@huggingface.co/spaces/PYAE1994/autonomous-coding-system /tmp/hf-space
-          
+
           # Copy backend files
           cp -r backend/. /tmp/hf-space/
-          
-          # Create HF-specific README
+
+          # Use v8 Dockerfile
+          cp backend/Dockerfile.hf /tmp/hf-space/Dockerfile
+
+          # Create HF README with v8 metadata
           cat > /tmp/hf-space/README.md << 'EOF'
           ---
-          title: God Agent OS v7
+          title: God Agent OS v8
           emoji: 🤖
           colorFrom: indigo
           colorTo: purple
@@ -96,27 +99,23 @@ jobs:
           app_port: 7860
           pinned: true
           license: mit
-          short_description: Autonomous Engineering OS — Manus + Genspark + Devin
+          short_description: Autonomous Engineering OS v8 — KeyPool Multi-API (Gemini + SambaNova)
           ---
 
-          # 🤖 God Agent OS v7
-          **Autonomous Engineering Platform — Manus + Genspark + Devin (OneHand)**
+          # 🤖 God Agent OS v8
+          **KeyPool Multi-API Routing — Gemini + SambaNova Primary LLMs**
 
-          16-agent system for autonomous software engineering.
+          16-agent autonomous engineering OS with intelligent key pooling.
           EOF
 
-          # Use HF Dockerfile
-          cp backend/Dockerfile.hf /tmp/hf-space/Dockerfile
-
-          # Commit and push
           cd /tmp/hf-space
           git add -A
-          git diff --cached --quiet || git commit -m "🚀 God Agent OS v7 deploy $(date -u '+%Y-%m-%d %H:%M:%S UTC')"
+          git diff --cached --quiet || git commit -m "🚀 God Agent OS v8 deploy $(date -u '+%Y-%m-%d %H:%M:%S UTC')"
           git push origin main || git push origin master || true
-          
+
           echo "✅ Deployed to HF Space: https://huggingface.co/spaces/PYAE1994/autonomous-coding-system"
 
-  # ── Deploy to Vercel ───────────────────────────────────────────────────────
+  # ── Deploy to Vercel ─────────────────────────────────────────────────────
   deploy-vercel:
     name: ▲ Deploy to Vercel
     runs-on: ubuntu-latest

.gitignore

@@ -0,0 +1,50 @@
+# Dependencies
+node_modules/
+frontend/node_modules/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+
+# Build outputs
+frontend/.next/
+frontend/out/
+dist/
+build/
+*.egg-info/
+
+# Environment
+.env
+.env.local
+.env.production
+*.env
+
+# Logs
+*.log
+logs/
+
+# Database
+*.db
+*.sqlite
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+
+# Temporary
+tmp/
+temp/
+/tmp/
+
+# Python cache
+backend/__pycache__/
+backend/**/__pycache__/
+backend/ai_router/__pycache__/
+.env.keys
+backend/.env.keys

README.md

@@ -1,5 +1,5 @@
 ---
-title: God Agent OS v7
+title: God Agent OS v8
 emoji: 🤖
 colorFrom: indigo
 colorTo: purple
@@ -7,24 +7,39 @@ sdk: docker
 app_port: 7860
 pinned: true
 license: mit
-short_description: Autonomous Engineering OS — Manus + Genspark + Devin (OneHand)
+short_description: Autonomous Engineering OS v8 — KeyPool Multi-API (Gemini + SambaNova)
 ---
 
-# 🤖 GOD AGENT OS v7
+# 🤖 GOD AGENT OS v8
 **Autonomous Engineering Operating System**
-*Manus + Genspark + Devin (OneHand) — Combined*
+*Manus + Genspark + Devin (OneHand) — KeyPool Multi-API Edition*
 
 [![GitHub](https://img.shields.io/badge/GitHub-god--agent--os-blue?logo=github)](https://github.com/pyaesonegtckglay-dotcom/god-agent-os)
-[![Version](https://img.shields.io/badge/version-7.0.0-indigo)](https://github.com/pyaesonegtckglay-dotcom/god-agent-os)
+[![Version](https://img.shields.io/badge/version-8.0.0-indigo)](https://github.com/pyaesonegtckglay-dotcom/god-agent-os)
+[![HF Space](https://img.shields.io/badge/HF%20Space-PYAE1994-orange)](https://huggingface.co/spaces/PYAE1994/autonomous-coding-system)
 
-## 🚀 What is God Agent OS?
+## 🚀 What is God Agent OS v8?
 
-God Agent OS is a fully autonomous AI engineering platform that combines:
-- **Manus** — Deep reasoning, multi-step planning, autonomous orchestration
-- **Genspark** — Repository-scale code generation, multi-model AI routing
-- **Devin/OneHand** — Self-healing code execution, browser control, file mastery
+God Agent OS v8 is a fully autonomous AI engineering platform with **KeyPool Multi-API Routing**:
+- **Gemini** (6 keys) — Google Gemini 1.5 Flash primary LLM
+- **SambaNova** (9 keys) — Meta Llama 3.3 70B primary LLM
+- **GitHub API** (9 keys) — Pooled Git operations
+- **Automatic failover** across 7 providers
 
-## 🤖 16-Agent Fleet (v7 NEW!)
+## 🔑 v8 KeyPool System
+
+```
+Priority Chain:
+SambaNova (9 keys) → Gemini (6 keys) → OpenAI → Groq → Cerebras → OpenRouter → Anthropic
+
+Each key pool:
+- Round-robin key selection
+- Failure tracking per key
+- Automatic cooldown (60s after 3 failures)
+- Real-time status dashboard in UI
+```
+
+## 🤖 16-Agent Fleet
 
 | Agent | Capability | Status |
 |-------|-----------|--------|
@@ -32,52 +47,61 @@ God Agent OS is a fully autonomous AI engineering platform that combines:
 | 📋 Planner | Task decomposition & planning | Core |
 | 💻 Coding | Production code generation | Core |
 | 🐛 Debug | Self-healing error resolution | Core |
-| 🌐 **Browser** | Web research & scraping | ⭐ NEW v7 |
-| 📁 **File** | File system & project scaffold | ⭐ NEW v7 |
-| 🔀 **Git** | Git ops & GitHub PR creation | ⭐ NEW v7 |
-| 🧪 **Test** | Auto test generation & execution | ⭐ NEW v7 |
-| 🎨 **Vision** | Design-to-code UI generation | ⭐ NEW v7 |
+| 🌐 Browser | Web research & scraping | v7 |
+| 📁 File | File system & project scaffold | v7 |
+| 🔀 Git | Git ops & GitHub PR creation | v7 |
+| 🧪 Test | Auto test generation & execution | v7 |
+| 🎨 Vision | Design-to-code UI generation | v7 |
 | 🖥️ Sandbox | Isolated code execution | Core |
 | 🚀 Deploy | Auto-deploy to cloud | Core |
 | 🔌 Connector | External integrations | Core |
 | 🧠 Memory | Long-term context | Core |
 | ⚙️ Workflow | n8n automation | Core |
+| 🔍 Reasoning | Deep reasoning & analysis | Core |
+| 🎨 UI | Real-time UI state | Core |
 
-## 🔑 Required API Keys
+## 🔑 API Keys Configuration
 
-Set these in Space Settings → Variables and Secrets:
+Set these in Hugging Face Space → Settings → Variables:
 
-| Variable | Description | Required |
-|----------|-------------|----------|
+| Variable | Description | Keys |
+|----------|-------------|------|
+| `GEMINI_API_KEYS` | Google Gemini (comma-separated) | 6 keys |
+| `SAMBANOVA_API_KEYS` | SambaNova (comma-separated) | 9 keys |
+| `GITHUB_API_KEYS` | GitHub API (comma-separated) | 9 keys |
 | `OPENAI_API_KEY` | GPT-4o | Optional |
-| `GROQ_API_KEY` | Llama 3.3 70B (Free!) | Recommended |
-| `OPENROUTER_API_KEY` | 100+ models | Optional |
+| `GROQ_API_KEY` | Llama 3.3 70B (Free) | Optional |
 | `ANTHROPIC_API_KEY` | Claude 3.5 | Optional |
-| `GITHUB_TOKEN` | Git operations | Optional |
-
-> **Note:** System works in demo mode without any keys. Add at least `GROQ_API_KEY` for full AI power (it's free!).
 
 ## 🌐 API Documentation
 
 - Interactive docs: `/api/docs`
 - Health check: `/health`
+- AI Router stats: `/api/v1/ai/stats`
+- Key pool status: `/api/v1/ai/pool-status`
 
 ## 📦 Architecture
 
 ```
 god-agent-os/
-├── backend/          # FastAPI backend (16 agents)
-│   ├── agents/       # All 16 specialized agents
-│   ├── ai_router/    # Multi-model AI router (5 providers)
-│   ├── api/          # REST + WebSocket endpoints
-│   ├── core/         # Task engine & models
-│   ├── memory/       # SQLite persistent memory
-│   └── connectors/   # External service connectors
-└── frontend/         # Next.js 14 UI (deployed on Vercel)
+├── backend/
+│   ├─��� agents/         # 16 specialized agents
+│   ├── ai_router/
+│   │   ├── key_pool.py    # KeyPool multi-key manager (NEW v8)
+│   │   ├── router_v8.py   # AIRouterV8 with KeyPool (NEW v8)
+│   │   └── router.py      # Legacy router (retained)
+│   ├── api/            # REST + WebSocket endpoints
+│   ├── core/           # Task engine & models
+│   ├── memory/         # SQLite persistent memory
+│   ├── connectors/     # External service connectors
+│   ├── main_v8.py      # v8 Entry point (NEW)
+│   └── Dockerfile.hf   # HF Spaces Docker
+└── frontend/           # Next.js 14 UI
+    └── components/
+        └── layout/
+            └── AIRouterPanel.tsx  # v8 Key pool status UI (NEW)
 ```
 
 ## 🔄 Auto-Deploy Pipeline
 
 GitHub Push → Build Check → HF Space Deploy + Vercel Deploy
-
-All automatic via GitHub Actions!

backend/Dockerfile.hf

@@ -22,6 +22,16 @@ ENV PORT=7860
 ENV WORKSPACE_DIR=/tmp/god_workspace
 ENV PYTHONPATH=/app
 
+# API Keys are configured via HF Space Secrets (Settings → Variables and Secrets)
+# Set these in your HF Space:
+#   GEMINI_API_KEYS      — comma-separated Gemini API keys
+#   SAMBANOVA_API_KEYS   — comma-separated SambaNova API keys
+#   GITHUB_API_KEYS      — comma-separated GitHub tokens
+#   GITHUB_TOKEN         — primary GitHub token
+#   OPENAI_API_KEY       — OpenAI API key (optional)
+#   GROQ_API_KEY         — Groq API key (optional, free)
+#   ANTHROPIC_API_KEY    — Anthropic API key (optional)
+
 EXPOSE 7860
 
-CMD ["uvicorn", "main_v7:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]
+CMD ["uvicorn", "main_v8:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]

backend/ai_router/__init__.py

@@ -1,4 +1,6 @@
-# Multi-Model AI Router
+# Multi-Model AI Router — GOD AGENT OS v8
+# Primary: Gemini → Sambanova → GitHub Models (task-aware rotation)
 from .router import AIRouter
+from .router_v8 import GodModeRouter, get_router, classify_task, get_provider_order
 
-__all__ = ["AIRouter"]
+__all__ = ["AIRouter", "GodModeRouter", "get_router", "classify_task", "get_provider_order"]

backend/ai_router/key_pool.py

@@ -0,0 +1,131 @@
+"""
+KeyPool — Multi-API Key Manager with Failover & Cooldown
+God Agent OS v8 — Supports Gemini, SambaNova, GitHub, OpenAI, Groq, etc.
+Each provider can have multiple comma-separated keys.
+"""
+
+import asyncio
+import time
+from collections import defaultdict
+from typing import Dict, List, Optional
+import structlog
+
+log = structlog.get_logger()
+
+COOLDOWN_SECONDS = 60   # Key cooling time after max failures
+MAX_FAILURES = 3        # Max fails before cooldown
+
+
+class KeyEntry:
+    def __init__(self, key: str):
+        self.key = key
+        self.failures = 0
+        self.cooldown_until = 0.0
+        self.calls = 0
+        self.last_used = 0.0
+
+    def is_available(self) -> bool:
+        if self.cooldown_until > time.time():
+            return False
+        return True
+
+    def mark_fail(self):
+        self.failures += 1
+        if self.failures >= MAX_FAILURES:
+            self.cooldown_until = time.time() + COOLDOWN_SECONDS
+            log.warning("Key cooldown activated", failures=self.failures)
+
+    def mark_success(self):
+        self.failures = max(0, self.failures - 1)
+        self.cooldown_until = 0.0
+        self.calls += 1
+        self.last_used = time.time()
+
+    def status(self) -> dict:
+        remaining = max(0, self.cooldown_until - time.time())
+        return {
+            "key_preview": self.key[:8] + "..." + self.key[-4:] if len(self.key) > 12 else "***",
+            "available": self.is_available(),
+            "failures": self.failures,
+            "calls": self.calls,
+            "cooldown_remaining_s": round(remaining, 1),
+        }
+
+
+class KeyPool:
+    """
+    Pool of API keys for a single provider.
+    Round-robins through available keys with failure tracking.
+    """
+
+    def __init__(self, provider: str, keys: List[str]):
+        self.provider = provider
+        self._keys: List[KeyEntry] = [KeyEntry(k.strip()) for k in keys if k.strip()]
+        self._index = 0
+
+    def __len__(self) -> int:
+        return len(self._keys)
+
+    def pick(self) -> Optional[str]:
+        """Pick the next available key (round-robin, skip cooling down keys)."""
+        if not self._keys:
+            return None
+        n = len(self._keys)
+        for _ in range(n):
+            entry = self._keys[self._index % n]
+            self._index = (self._index + 1) % n
+            if entry.is_available():
+                return entry.key
+        # All keys in cooldown — try the one with shortest cooldown
+        soonest = min(self._keys, key=lambda e: e.cooldown_until)
+        log.warning(
+            "All keys in cooldown, using soonest",
+            provider=self.provider,
+            cooldown_remaining=round(soonest.cooldown_until - time.time(), 1),
+        )
+        return soonest.key
+
+    def mark_fail(self, key: str):
+        for e in self._keys:
+            if e.key == key:
+                e.mark_fail()
+                return
+
+    def mark_success(self, key: str):
+        for e in self._keys:
+            if e.key == key:
+                e.mark_success()
+                return
+
+    def available_count(self) -> int:
+        return sum(1 for e in self._keys if e.is_available())
+
+    def status(self) -> dict:
+        return {
+            "provider": self.provider,
+            "total_keys": len(self._keys),
+            "available_keys": self.available_count(),
+            "keys": [e.status() for e in self._keys],
+        }
+
+
+# ─── Global Key Pool Registry ─────────────────────────────────────────────────
+
+class KeyPoolRegistry:
+    """Central registry for all provider key pools."""
+
+    def __init__(self):
+        self._pools: Dict[str, KeyPool] = {}
+
+    def register(self, provider: str, keys_csv: str):
+        """Register comma-separated keys for a provider."""
+        keys = [k.strip() for k in keys_csv.split(",") if k.strip()]
+        if keys:
+            self._pools[provider] = KeyPool(provider, keys)
+            log.info("KeyPool registered", provider=provider, count=len(keys))
+
+    def get(self, provider: str) -> Optional[KeyPool]:
+        return self._pools.get(provider)
+
+    def all_status(self) -> dict:
+        return {name: pool.status() for name, pool in self._pools.items()}

backend/ai_router/router_v8.py

@@ -0,0 +1,308 @@
+"""
+GOD AGENT OS — Multi-Provider AI Router v8
+Primary Providers (in rotation): Gemini -> Sambanova -> GitHub Models
+Task-aware routing with key pool management, failover, and streaming.
+"""
+
+import asyncio
+import json
+import os
+import time
+from typing import Any, Dict, List, Optional, Tuple
+
+import httpx
+import structlog
+
+log = structlog.get_logger()
+
+# ─── Provider Definitions ─────────────────────────────────────────────────────
+
+PROVIDERS = {
+    "gemini": {
+        "name": "gemini",
+        "type": "gemini",
+        "base_url": "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent",
+        "key_env": "GEMINI_KEY",
+        "default_model": "gemini-2.0-flash",
+        "max_tokens": 8192,
+        "priority_tasks": ["language", "research", "content", "general"],
+    },
+    "sambanova": {
+        "name": "sambanova",
+        "type": "openai",
+        "base_url": "https://api.sambanova.ai/v1",
+        "key_env": "SAMBANOVA_KEY",
+        "default_model": "Meta-Llama-3.3-70B-Instruct",
+        "max_tokens": 8192,
+        "priority_tasks": ["reasoning", "engineering", "planning", "analysis"],
+    },
+    "github": {
+        "name": "github",
+        "type": "openai",
+        "base_url": "https://models.inference.ai.azure.com",
+        "key_env": "GITHUB_KEY",
+        "default_model": "gpt-4o",
+        "max_tokens": 4096,
+        "priority_tasks": ["planning", "engineering", "general"],
+    },
+    "groq": {
+        "name": "groq",
+        "type": "openai",
+        "base_url": "https://api.groq.com/openai/v1",
+        "key_env": "GROQ_API_KEY",
+        "default_model": "llama-3.3-70b-versatile",
+        "max_tokens": 8192,
+        "priority_tasks": ["general"],
+    },
+    "openai": {
+        "name": "openai",
+        "type": "openai",
+        "base_url": "https://api.openai.com/v1",
+        "key_env": "OPENAI_API_KEY",
+        "default_model": "gpt-4o",
+        "max_tokens": 4096,
+        "priority_tasks": ["general"],
+    },
+}
+
+PRIMARY_ORDER = ["gemini", "sambanova", "github"]
+FALLBACK_ORDER = ["groq", "openai"]
+
+MAX_RETRIES_PER_KEY = 2
+KEY_COOLDOWN_SECONDS = 300
+KEY_MAX_FAILS = 3
+
+
+class KeyPool:
+    """Manages a pool of API keys with fail tracking and cooldowns."""
+
+    def __init__(self, raw_keys: str):
+        self._keys: List[Dict] = []
+        for k in raw_keys.split(","):
+            k = k.strip()
+            if k:
+                self._keys.append({"key": k, "fails": 0, "cooldown_until": 0.0})
+
+    def pick(self) -> Optional[Dict]:
+        now = time.time()
+        available = [k for k in self._keys if k["cooldown_until"] < now]
+        if not available:
+            return None
+        available.sort(key=lambda x: x["fails"])
+        return available[0]
+
+    def mark_fail(self, key_obj: Dict):
+        key_obj["fails"] += 1
+        if key_obj["fails"] >= KEY_MAX_FAILS:
+            key_obj["cooldown_until"] = time.time() + KEY_COOLDOWN_SECONDS
+            log.warning("Key cooled down", key_prefix=key_obj["key"][:8])
+
+    def mark_success(self, key_obj: Dict):
+        key_obj["fails"] = 0
+        key_obj["cooldown_until"] = 0.0
+
+    def has_keys(self) -> bool:
+        return len(self._keys) > 0
+
+    def count(self) -> int:
+        return len(self._keys)
+
+
+def classify_task(prompt: str = "") -> str:
+    p = prompt.lower()
+    if any(w in p for w in ["code", "function", "implement", "build", "develop", "api", "class", "debug"]):
+        return "engineering"
+    if any(w in p for w in ["plan", "strategy", "workflow", "json", "automate", "pipeline"]):
+        return "planning"
+    if any(w in p for w in ["analyze", "reasoning", "why", "explain", "evaluate", "compare"]):
+        return "reasoning"
+    if any(w in p for w in ["research", "find", "search", "discover", "investigate"]):
+        return "research"
+    if any(w in p for w in ["write", "content", "blog", "article", "copy", "generate text", "summarize"]):
+        return "content"
+    if any(w in p for w in ["translate", "language", "convert"]):
+        return "language"
+    if any(w in p for w in ["data", "csv", "metrics", "report", "insight"]):
+        return "analysis"
+    return "general"
+
+
+def get_provider_order(task_type: str) -> List[str]:
+    ordered = sorted(PRIMARY_ORDER, key=lambda p: (
+        0 if task_type in PROVIDERS[p]["priority_tasks"] else 1
+    ))
+    return ordered + [f for f in FALLBACK_ORDER if os.environ.get(PROVIDERS[f]["key_env"], "")]
+
+
+async def call_gemini(base_url: str, key: str, messages: List[Dict], max_tokens: int) -> Tuple[bool, str]:
+    url = f"{base_url}?key={key}"
+    parts = []
+    for msg in messages:
+        parts.append({"text": msg.get("content", "")})
+    body = {
+        "contents": [{"parts": parts}],
+        "generationConfig": {"maxOutputTokens": max_tokens, "temperature": 0.7},
+    }
+    try:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            resp = await client.post(url, json=body)
+            if resp.status_code == 200:
+                data = resp.json()
+                text = data.get("candidates", [{}])[0].get("content", {}).get("parts", [{}])[0].get("text", "")
+                return True, text
+            else:
+                return False, f"HTTP {resp.status_code}: {resp.text[:200]}"
+    except Exception as e:
+        return False, str(e)
+
+
+async def call_openai_compat(base_url: str, key: str, model: str, messages: List[Dict], max_tokens: int) -> Tuple[bool, str]:
+    url = f"{base_url}/chat/completions"
+    headers = {"Authorization": f"Bearer {key}", "Content-Type": "application/json"}
+    body = {"model": model, "messages": messages, "max_tokens": max_tokens, "temperature": 0.7}
+    try:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            resp = await client.post(url, json=body, headers=headers)
+            if resp.status_code == 200:
+                data = resp.json()
+                text = data["choices"][0]["message"]["content"]
+                return True, text
+            else:
+                return False, f"HTTP {resp.status_code}: {resp.text[:200]}"
+    except Exception as e:
+        return False, str(e)
+
+
+class GodModeRouter:
+    """
+    Task-aware multi-provider AI router.
+    Primary: Gemini, Sambanova, GitHub Models
+    Fallback: Groq, OpenAI
+    """
+
+    def __init__(self, ws_manager=None):
+        self.ws = ws_manager
+        self._pools: Dict[str, KeyPool] = {}
+        self._stats: Dict[str, Dict] = {name: {"calls": 0, "errors": 0, "latency_ms": []} for name in PROVIDERS}
+        self._load_pools()
+
+    def _load_pools(self):
+        for name, cfg in PROVIDERS.items():
+            raw = os.environ.get(cfg["key_env"], "")
+            if raw:
+                self._pools[name] = KeyPool(raw)
+                log.info("Key pool loaded", provider=name, key_count=self._pools[name].count())
+
+    def reload_pools(self):
+        self._pools.clear()
+        self._load_pools()
+
+    def get_status(self) -> Dict[str, Any]:
+        return {
+            "providers": {
+                name: {
+                    "available": name in self._pools and self._pools[name].has_keys(),
+                    "keys": self._pools[name].count() if name in self._pools else 0,
+                    "stats": self._stats.get(name, {}),
+                }
+                for name in PROVIDERS
+            },
+            "primary_order": PRIMARY_ORDER,
+        }
+
+    # Keep backwards compatibility with old AIRouter interface
+    def get_stats(self) -> Dict[str, Any]:
+        return {
+            name: {"available": name in self._pools, "calls": self._stats[name]["calls"]}
+            for name in PROVIDERS
+        }
+
+    async def complete(
+        self,
+        messages: List[Dict],
+        task_id: str = "",
+        session_id: str = "",
+        temperature: float = 0.7,
+        max_tokens: int = 4096,
+        preferred_provider: str = "",
+        stream: bool = False,
+    ) -> str:
+        user_msg = next((m.get("content", "") for m in reversed(messages) if m.get("role") == "user"), "")
+        task_type = classify_task(user_msg)
+
+        if preferred_provider and preferred_provider in PROVIDERS:
+            order = [preferred_provider] + [p for p in get_provider_order(task_type) if p != preferred_provider]
+        else:
+            order = get_provider_order(task_type)
+
+        log.info("Routing request", task_type=task_type, order=order[:3], task_id=task_id)
+
+        last_error = "No providers available"
+
+        for provider_name in order:
+            if provider_name not in self._pools:
+                continue
+
+            pool = self._pools[provider_name]
+            cfg = PROVIDERS[provider_name]
+
+            for attempt in range(MAX_RETRIES_PER_KEY):
+                key_obj = pool.pick()
+                if key_obj is None:
+                    break
+
+                t0 = time.time()
+                try:
+                    if cfg["type"] == "gemini":
+                        ok, text = await call_gemini(cfg["base_url"], key_obj["key"], messages, max_tokens)
+                    else:
+                        ok, text = await call_openai_compat(
+                            cfg["base_url"], key_obj["key"],
+                            cfg["default_model"], messages, max_tokens
+                        )
+
+                    elapsed = int((time.time() - t0) * 1000)
+
+                    if ok and text.strip():
+                        pool.mark_success(key_obj)
+                        self._stats[provider_name]["calls"] += 1
+                        self._stats[provider_name]["latency_ms"].append(elapsed)
+                        log.info("LLM success", provider=provider_name, ms=elapsed, task_id=task_id)
+                        return text
+                    else:
+                        pool.mark_fail(key_obj)
+                        last_error = text
+                        log.warning("LLM fail", provider=provider_name, error=text[:80])
+
+                except Exception as e:
+                    pool.mark_fail(key_obj)
+                    last_error = str(e)
+                    self._stats[provider_name]["errors"] += 1
+                    log.error("LLM exception", provider=provider_name, error=str(e)[:120])
+
+        log.error("All providers failed, using demo response", last_error=last_error)
+        return await self._demo_response(messages, task_type)
+
+    async def _demo_response(self, messages: List[Dict], task_type: str) -> str:
+        user_msg = next((m.get("content", "") for m in reversed(messages) if m.get("role") == "user"), "Hello")
+        return (
+            f"[GOD AGENT OS — Demo Mode]\n\n"
+            f"Task type detected: {task_type}\n"
+            f"Your request: '{user_msg[:100]}'\n\n"
+            f"Configure API keys in environment:\n"
+            f"GEMINI_KEY, SAMBANOVA_KEY, GITHUB_KEY"
+        )
+
+
+_router_instance: Optional[GodModeRouter] = None
+
+
+def get_router(ws_manager=None) -> GodModeRouter:
+    global _router_instance
+    if _router_instance is None:
+        _router_instance = GodModeRouter(ws_manager)
+    return _router_instance
+
+
+# Backwards compat alias
+AIRouterV8 = GodModeRouter

backend/main.py

@@ -1,9 +1,31 @@
 """
-🚀 GOD MODE+ Autonomous AI Operating System
-Devin + Manus + Genspark Style — Production-Grade Backend
-Version: 3.0.0 — Full God Mode Upgrade
+🚀 GOD AGENT OS — Autonomous AI Operating System v8
+Gemini + Sambanova + GitHub Models — Primary Provider Rotation
+Task-aware routing: research→Gemini, code→Sambanova, plan→GitHub
 """
 
+# ─── Inject bundled API keys (env vars take precedence) ───────────────────────
+import os as _os
+
+def _inject_key(env_var: str, value: str):
+    """Set env var only if not already configured."""
+    if not _os.environ.get(env_var):
+        _os.environ[env_var] = value
+
+# Keys are loaded from HF Space Secrets / Docker env vars.
+# Set GEMINI_KEY, SAMBANOVA_KEY, GITHUB_KEY as comma-separated lists.
+# Fallback: read from .env.keys file if present (not committed to git).
+_keys_file = _os.path.join(_os.path.dirname(__file__), ".env.keys")
+if _os.path.exists(_keys_file):
+    with open(_keys_file) as _f:
+        for _line in _f:
+            _line = _line.strip()
+            if _line and "=" in _line and not _line.startswith("#"):
+                _k, _v = _line.split("=", 1)
+                _inject_key(_k.strip(), _v.strip())
+# ─────────────────────────────────────────────────────────────────────────────
+
+
 import asyncio
 import json
 import logging
@@ -30,6 +52,7 @@ from memory.db import init_db
 
 # ─── God Mode Agents ───────────────────────────────────────────────────────────
 from ai_router.router import AIRouter
+from ai_router.router_v8 import GodModeRouter, get_router as get_god_router
 from agents.orchestrator import GodAgentOrchestrator
 from agents.chat_agent import ChatAgent
 from agents.planner_agent import PlannerAgent
@@ -61,6 +84,7 @@ limiter = Limiter(key_func=get_remote_address)
 ws_manager = WebSocketManager()
 task_engine = TaskEngine(ws_manager)
 ai_router = AIRouter(ws_manager)
+god_router = get_god_router(ws_manager)   # v8 primary router
 connector_manager = ConnectorManager()
 
 # ─── Build God Agent Ecosystem ────────────────────────────────────────────────
@@ -94,7 +118,7 @@ async def lifespan(app: FastAPI):
     asyncio.create_task(ws_manager.heartbeat_loop())
     log.info("✅ GOD MODE+ Platform ready — All agents online")
     log.info("🤖 Agents: Chat, Planner, Coding, Debug, Memory, Connector, Deploy, Workflow, Sandbox, UI")
-    log.info("🌐 AI Router: OpenAI → Groq → Cerebras → OpenRouter → Anthropic")
+    log.info("🌐 AI Router v8: Gemini → Sambanova → GitHub Models (task-aware rotation)")
     yield
     log.info("🛑 Shutting down...")
     await task_engine.stop()

backend/main_v8.py

@@ -0,0 +1,326 @@
+"""
+🚀 GOD AGENT OS v8 — Autonomous Engineering Operating System
+Manus + Genspark + Devin (OneHand) Combined
+Version: 8.0.0 — KeyPool Multi-API Routing (Gemini + SambaNova Primary LLMs)
+"""
+
+import asyncio
+import json
+import os
+import time
+import uuid
+from contextlib import asynccontextmanager
+from typing import Optional
+
+import structlog
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.middleware.gzip import GZipMiddleware
+from fastapi.responses import JSONResponse
+from slowapi import Limiter, _rate_limit_exceeded_handler
+from slowapi.util import get_remote_address
+from slowapi.errors import RateLimitExceeded
+
+from api.routes import tasks, chat, memory, github, health
+from api.routes import connectors, agents as agents_router
+from api.websocket_manager import WebSocketManager
+from core.task_engine import TaskEngine
+from memory.db import init_db
+
+# ─── v8 AI Router (KeyPool-based) ─────────────────────────────────────────────
+from ai_router.router_v8 import AIRouterV8
+
+# ─── Agent Ecosystem ──────────────────────────────────────────────────────────
+from agents.orchestrator_v7 import GodAgentOrchestratorV7
+from agents.chat_agent import ChatAgent
+from agents.planner_agent import PlannerAgent
+from agents.coding_agent import CodingAgent
+from agents.debug_agent import DebugAgent
+from agents.memory_agent import MemoryAgent
+from agents.connector_agent import ConnectorAgent
+from agents.deploy_agent import DeployAgent
+from agents.workflow_agent import WorkflowAgent
+from agents.sandbox_agent import SandboxAgent
+from agents.ui_agent import UIAgent
+from agents.reasoning_agent import ReasoningAgent
+from agents.browser_agent import BrowserAgent
+from agents.file_agent import FileAgent
+from agents.git_agent import GitAgent
+from agents.test_agent import TestAgent
+from agents.vision_agent import VisionAgent
+from connectors.manager import ConnectorManager
+
+# ─── Structured Logging ───────────────────────────────────────────────────────
+structlog.configure(
+    processors=[
+        structlog.processors.TimeStamper(fmt="iso"),
+        structlog.stdlib.add_log_level,
+        structlog.processors.StackInfoRenderer(),
+        structlog.dev.ConsoleRenderer(),
+    ]
+)
+log = structlog.get_logger()
+
+limiter = Limiter(key_func=get_remote_address)
+
+# ─── Global Managers ──────────────────────────────────────────────────────────
+ws_manager = WebSocketManager()
+task_engine = TaskEngine(ws_manager)
+ai_router = AIRouterV8(ws_manager)
+connector_manager = ConnectorManager()
+
+
+def build_orchestrator() -> GodAgentOrchestratorV7:
+    orchestrator = GodAgentOrchestratorV7(ws_manager=ws_manager, ai_router=ai_router)
+    orchestrator.register_agent("chat",       ChatAgent(ws_manager, ai_router))
+    orchestrator.register_agent("planner",    PlannerAgent(ws_manager, ai_router))
+    orchestrator.register_agent("coding",     CodingAgent(ws_manager, ai_router))
+    orchestrator.register_agent("debug",      DebugAgent(ws_manager, ai_router))
+    orchestrator.register_agent("memory",     MemoryAgent(ws_manager, ai_router))
+    orchestrator.register_agent("connector",  ConnectorAgent(ws_manager, ai_router))
+    orchestrator.register_agent("deploy",     DeployAgent(ws_manager, ai_router))
+    orchestrator.register_agent("workflow",   WorkflowAgent(ws_manager, ai_router))
+    orchestrator.register_agent("sandbox",    SandboxAgent(ws_manager, ai_router))
+    orchestrator.register_agent("ui",         UIAgent(ws_manager, ai_router))
+    orchestrator.register_agent("reasoning",  ReasoningAgent(ws_manager, ai_router))
+    orchestrator.register_agent("browser",    BrowserAgent(ws_manager, ai_router))
+    orchestrator.register_agent("file",       FileAgent(ws_manager, ai_router))
+    orchestrator.register_agent("git",        GitAgent(ws_manager, ai_router))
+    orchestrator.register_agent("test",       TestAgent(ws_manager, ai_router))
+    orchestrator.register_agent("vision",     VisionAgent(ws_manager, ai_router))
+    log.info("🤖 GOD AGENT v8 Ecosystem initialized", agents=16)
+    return orchestrator
+
+
+orchestrator = build_orchestrator()
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    log.info("🚀 Starting GOD AGENT OS v8 — KeyPool Multi-API Edition...")
+    await init_db()
+    await task_engine.start()
+    asyncio.create_task(ws_manager.heartbeat_loop())
+    # Print router status
+    stats = ai_router.get_stats()
+    active = [name for name, s in stats.items() if s["available"]]
+    log.info("✅ GOD AGENT v8 — 16 agents online")
+    log.info(f"🔑 Active AI providers: {active}")
+    log.info("🌐 AI Routing: SambaNova → Gemini → OpenAI → Groq → Cerebras → OpenRouter → Anthropic")
+    yield
+    log.info("🛑 Shutting down GOD AGENT v8...")
+    await task_engine.stop()
+
+
+app = FastAPI(
+    title="🤖 GOD AGENT OS v8",
+    description="Autonomous Engineering OS — Gemini + SambaNova KeyPool Multi-API Routing",
+    version="8.0.0",
+    lifespan=lifespan,
+    docs_url="/api/docs",
+    redoc_url="/api/redoc",
+)
+
+app.state.limiter = limiter
+app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler)
+app.state.ws_manager = ws_manager
+app.state.task_engine = task_engine
+app.state.ai_router = ai_router
+app.state.orchestrator = orchestrator
+app.state.connector_manager = connector_manager
+
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"])
+app.add_middleware(GZipMiddleware, minimum_size=1000)
+
+
+@app.middleware("http")
+async def log_requests(request: Request, call_next):
+    start = time.time()
+    response = await call_next(request)
+    ms = round((time.time() - start) * 1000, 2)
+    log.info("HTTP", method=request.method, path=request.url.path, status=response.status_code, ms=ms)
+    return response
+
+
+# ─── REST Routers ─────────────────────────────────────────────────────────────
+app.include_router(health.router,        prefix="/api/v1",            tags=["health"])
+app.include_router(tasks.router,         prefix="/api/v1/tasks",      tags=["tasks"])
+app.include_router(chat.router,          prefix="/api/v1",            tags=["chat"])
+app.include_router(memory.router,        prefix="/api/v1/memory",     tags=["memory"])
+app.include_router(github.router,        prefix="/api/v1/github",     tags=["github"])
+app.include_router(connectors.router,    prefix="/api/v1/connectors", tags=["connectors"])
+app.include_router(agents_router.router, prefix="/api/v1/agents",     tags=["agents"])
+
+
+# ─── WebSocket Endpoints ──────────────────────────────────────────────────────
+@app.websocket("/ws/tasks/{task_id}")
+async def ws_task(websocket: WebSocket, task_id: str):
+    await ws_manager.connect(websocket, room=f"task:{task_id}")
+    try:
+        while True:
+            data = await websocket.receive_text()
+            msg = json.loads(data)
+            if msg.get("type") == "ping":
+                await websocket.send_json({"type": "pong", "timestamp": time.time()})
+    except WebSocketDisconnect:
+        ws_manager.disconnect(websocket, room=f"task:{task_id}")
+
+
+@app.websocket("/ws/logs")
+async def ws_logs(websocket: WebSocket):
+    await ws_manager.connect(websocket, room="logs")
+    try:
+        while True:
+            data = await websocket.receive_text()
+            msg = json.loads(data)
+            if msg.get("type") == "ping":
+                await websocket.send_json({"type": "pong", "timestamp": time.time()})
+    except WebSocketDisconnect:
+        ws_manager.disconnect(websocket, room="logs")
+
+
+@app.websocket("/ws/chat/{session_id}")
+async def ws_chat(websocket: WebSocket, session_id: str):
+    await ws_manager.connect(websocket, room=f"chat:{session_id}")
+    try:
+        while True:
+            data = await websocket.receive_text()
+            msg = json.loads(data)
+            if msg.get("type") == "ping":
+                await websocket.send_json({"type": "pong", "timestamp": time.time()})
+            elif msg.get("type") == "chat_message":
+                asyncio.create_task(orchestrator.orchestrate(
+                    user_message=msg.get("content", ""),
+                    session_id=session_id,
+                    context=msg.get("context", {}),
+                ))
+            elif msg.get("type") == "task_message":
+                from core.models import TaskCreateRequest
+                req = TaskCreateRequest(goal=msg.get("content", ""), session_id=session_id)
+                asyncio.create_task(task_engine.submit(req))
+    except WebSocketDisconnect:
+        ws_manager.disconnect(websocket, room=f"chat:{session_id}")
+
+
+@app.websocket("/ws/agent/status")
+async def ws_agent_status(websocket: WebSocket):
+    await ws_manager.connect(websocket, room="agent_status")
+    try:
+        while True:
+            data = await websocket.receive_text()
+            msg = json.loads(data)
+            if msg.get("type") == "ping":
+                await websocket.send_json({"type": "pong", "timestamp": time.time()})
+            elif msg.get("type") == "get_status":
+                await websocket.send_json({"type": "agent_status", "data": orchestrator.get_status()})
+    except WebSocketDisconnect:
+        ws_manager.disconnect(websocket, room="agent_status")
+
+
+@app.websocket("/ws/sandbox/{session_id}")
+async def ws_sandbox(websocket: WebSocket, session_id: str):
+    await ws_manager.connect(websocket, room=f"sandbox:{session_id}")
+    sandbox = orchestrator.get_agent("sandbox")
+    try:
+        while True:
+            data = await websocket.receive_text()
+            msg = json.loads(data)
+            if msg.get("type") == "ping":
+                await websocket.send_json({"type": "pong", "timestamp": time.time()})
+            elif msg.get("type") == "execute" and sandbox:
+                cmd = msg.get("command", "")
+                result = await sandbox.execute(cmd, session_id=session_id)
+                await websocket.send_json({"type": "terminal_output", "command": cmd, "output": result, "timestamp": time.time()})
+    except WebSocketDisconnect:
+        ws_manager.disconnect(websocket, room=f"sandbox:{session_id}")
+
+
+# ─── v8 Key Pool & AI Router Status Endpoints ─────────────────────────────────
+@app.get("/api/v1/ai/stats")
+async def get_ai_stats():
+    return {"stats": ai_router.get_stats()}
+
+
+@app.get("/api/v1/ai/pool-status")
+async def get_pool_status():
+    return {"pools": ai_router.get_pool_status()}
+
+
+@app.post("/api/v1/browser/research")
+async def browser_research(request: Request):
+    body = await request.json()
+    browser = orchestrator.get_agent("browser")
+    if not browser:
+        raise HTTPException(status_code=503, detail="BrowserAgent not available")
+    result = await browser.run(body.get("query", ""), session_id=body.get("session_id", ""))
+    return {"result": result}
+
+
+@app.get("/api/v1/files/workspace")
+async def list_workspace():
+    file_agent = orchestrator.get_agent("file")
+    if not file_agent:
+        return {"workspace": "/tmp/god_workspace", "files": [], "total": 0}
+    return file_agent.list_workspace()
+
+
+@app.post("/api/v1/git/pr")
+async def create_pr(request: Request):
+    body = await request.json()
+    git_agent = orchestrator.get_agent("git")
+    if not git_agent:
+        raise HTTPException(status_code=503, detail="GitAgent not available")
+    result = await git_agent.create_github_pr(
+        repo_owner=body.get("owner", ""),
+        repo_name=body.get("repo", ""),
+        title=body.get("title", ""),
+        body=body.get("body", ""),
+        head_branch=body.get("head_branch", "main"),
+        base_branch=body.get("base_branch", "main"),
+    )
+    return result
+
+
+@app.post("/api/v1/vision/generate")
+async def generate_ui(request: Request):
+    body = await request.json()
+    vision = orchestrator.get_agent("vision")
+    if not vision:
+        raise HTTPException(status_code=503, detail="VisionAgent not available")
+    result = await vision.run(body.get("prompt", ""), context=body.get("context", {}), session_id=body.get("session_id", ""))
+    return {"result": result}
+
+
+# ─── Root ─────────────────────────────────────────────────────────────────────
+@app.get("/")
+async def root():
+    cs = connector_manager.get_summary()
+    status = orchestrator.get_status()
+    stats = ai_router.get_stats()
+    active_providers = [name for name, s in stats.items() if s["available"]]
+    return {
+        "name": "🤖 GOD AGENT OS v8",
+        "version": "8.0.0",
+        "status": "operational",
+        "mode": "autonomous_engineering_os",
+        "description": "KeyPool Multi-API Routing — Gemini + SambaNova Primary LLMs",
+        "agents": status["agents"],
+        "total_agents": status["total_agents"],
+        "ai_providers": active_providers,
+        "connectors": {"connected": cs["connected"], "total": cs["total"]},
+        "docs": "/api/docs",
+        "v8_features": [
+            "🔑 KeyPool multi-key management (Gemini 6 keys + SambaNova 9 keys)",
+            "🔄 Automatic key failover with cooldown tracking",
+            "⚡ SambaNova → Gemini → OpenAI → Groq → Cerebras chain",
+            "📊 Per-key usage stats & health monitoring",
+            "🤖 16-agent autonomous fleet",
+            "🌐 Real-time streaming via WebSocket",
+        ],
+    }
+
+
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.environ.get("PORT", 8000))
+    uvicorn.run("main_v8:app", host="0.0.0.0", port=port, reload=False, workers=1)

frontend/app/globals.css

@@ -2,235 +2,331 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+/* ─── Fonts ──────────────────────────────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
-/* ─── CSS Variables / Themes ─────────────────────────────────────────────── */
+/* ─── CSS Variables ───────────────────────────────────────────────────────── */
 :root {
-  --bg-0: #0a0b0f;
-  --bg-1: #0f1017;
-  --bg-2: #13141e;
-  --bg-3: #1a1b26;
-  --bg-4: #1e2035;
-  --border: #2a2b3d;
-  --text-primary: #e2e8f0;
-  --text-secondary: #94a3b8;
-  --text-muted: #475569;
-  --brand: #6366f1;
-  --brand-glow: rgba(99,102,241,0.3);
-}
-
-[data-theme="light"] {
-  --bg-0: #f8fafc;
-  --bg-1: #f1f5f9;
-  --bg-2: #e2e8f0;
-  --bg-3: #ffffff;
-  --bg-4: #f8fafc;
-  --border: #cbd5e1;
-  --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-muted: #94a3b8;
-  --brand: #6366f1;
-  --brand-glow: rgba(99,102,241,0.2);
-}
-
-[data-theme="amoled"] {
-  --bg-0: #000000;
-  --bg-1: #000000;
-  --bg-2: #0a0a0a;
-  --bg-3: #111111;
-  --bg-4: #161616;
-  --border: #222222;
-  --text-primary: #ffffff;
-  --text-secondary: #aaaaaa;
-  --text-muted: #555555;
-  --brand: #7c3aed;
-  --brand-glow: rgba(124,58,237,0.4);
-}
-
-[data-theme="neon"] {
-  --bg-0: #000510;
-  --bg-1: #010a1a;
-  --bg-2: #020d20;
-  --bg-3: #031226;
-  --bg-4: #04162c;
-  --border: #0d3060;
-  --text-primary: #e0f0ff;
-  --text-secondary: #7ab8f5;
-  --text-muted: #2a5a8a;
-  --brand: #00d4ff;
-  --brand-glow: rgba(0,212,255,0.4);
-}
-
-[data-theme="glass"] {
-  --bg-0: #0d0d1a;
-  --bg-1: #111122;
-  --bg-2: #161630;
-  --bg-3: rgba(255,255,255,0.04);
-  --bg-4: rgba(255,255,255,0.06);
-  --border: rgba(255,255,255,0.08);
-  --text-primary: #f0f0ff;
-  --text-secondary: #9090c0;
-  --text-muted: #5050a0;
-  --brand: #818cf8;
-  --brand-glow: rgba(129,140,248,0.3);
-}
-
-/* ─── Base ────────────────────────────────────────────────────────────────── */
-* { box-sizing: border-box; }
-
-html { font-family: 'Inter', system-ui, sans-serif; }
+  --void: #05060d;
+  --surface-1: #0a0c16;
+  --surface-2: #0e1121;
+  --surface-3: #131729;
+  --surface-4: #191e32;
+  --surface-5: #1f263b;
+  --border: rgba(255,255,255,0.06);
+  --border-hover: rgba(255,255,255,0.12);
+  --text-primary: #e8eaf0;
+  --text-secondary: #8892a4;
+  --text-muted: #4a5568;
+  --purple: #7c3aed;
+  --purple-bright: #8b5cf6;
+  --purple-glow: rgba(124,58,237,0.25);
+  --blue: #3b82f6;
+  --blue-bright: #60a5fa;
+  --cyan: #22d3ee;
+  --green: #22c55e;
+  --amber: #f59e0b;
+  --pink: #ec4899;
+  --red: #ef4444;
+}
+
+/* ─── Base Reset ──────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { font-size: 16px; scroll-behavior: smooth; }
 
 body {
-  background: var(--bg-0);
+  background: var(--void);
   color: var(--text-primary);
-  margin: 0;
-  padding: 0;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
   overflow: hidden;
   height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* ─── Scrollbar ───────────────────────────────────────────────────────────── */
-::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar { width: 3px; height: 3px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
 
-/* ─── Code / Mono ─────────────────────────────────────────────────────────── */
+/* ─── Mono Font ───────────────────────────────────────────────────────────── */
 code, pre, .font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
 
-/* ─── Typing Indicator Dots ───────────────────────────────────────────────── */
+/* ─── Glass Morphism ──────────────────────────────────────────────────────── */
+.glass {
+  background: rgba(255,255,255,0.04);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255,255,255,0.07);
+}
+
+.glass-hover:hover {
+  background: rgba(255,255,255,0.06);
+  border-color: rgba(255,255,255,0.12);
+}
+
+.glass-purple {
+  background: rgba(124,58,237,0.08);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(124,58,237,0.2);
+}
+
+.glass-card {
+  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+  backdrop-filter: blur(24px);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 16px;
+}
+
+/* ─── Neon Glows ──────────────────────────────────────────────────────────── */
+.glow-purple { box-shadow: 0 0 20px rgba(124,58,237,0.3), 0 0 60px rgba(124,58,237,0.1); }
+.glow-blue   { box-shadow: 0 0 20px rgba(59,130,246,0.3), 0 0 60px rgba(59,130,246,0.1); }
+.glow-cyan   { box-shadow: 0 0 20px rgba(34,211,238,0.3), 0 0 60px rgba(34,211,238,0.1); }
+.glow-green  { box-shadow: 0 0 12px rgba(34,197,94,0.4); }
+
+.text-glow-purple { text-shadow: 0 0 20px rgba(139,92,246,0.6); }
+.text-glow-cyan   { text-shadow: 0 0 20px rgba(34,211,238,0.6); }
+
+/* ─── Gradient Text ───────────────────────────────────────────────────────── */
+.gradient-text {
+  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-text-purple {
+  background: linear-gradient(135deg, #c084fc 0%, #818cf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ─── Animations ──────────────────────────────────────────────────────────── */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { opacity: 0.6; }
+  50%       { opacity: 1; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+@keyframes typingDot {
+  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
+  40%            { transform: scale(1); opacity: 1; }
+}
+
+@keyframes orbFloat {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  33%       { transform: translateY(-8px) rotate(5deg); }
+  66%       { transform: translateY(4px) rotate(-3deg); }
+}
+
+@keyframes progressPulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.7; }
+}
+
+.animate-fade-in-up  { animation: fadeInUp 0.4s ease-out forwards; }
+.animate-fade-in     { animation: fadeIn 0.3s ease-out forwards; }
+.animate-slide-left  { animation: slideInLeft 0.3s ease-out forwards; }
+.animate-pulse-glow  { animation: pulseGlow 2s ease-in-out infinite; }
+.animate-spin-slow   { animation: spin 8s linear infinite; }
+.animate-orb-float   { animation: orbFloat 6s ease-in-out infinite; }
+.animate-progress-pulse { animation: progressPulse 2s ease-in-out infinite; }
+
+.shimmer-text {
+  background: linear-gradient(90deg, #a78bfa, #60a5fa, #34d399, #a78bfa);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 3s linear infinite;
+}
+
 .typing-dot {
-  width: 6px;
-  height: 6px;
+  width: 6px; height: 6px;
+  background: var(--purple-bright);
   border-radius: 50%;
-  background: var(--brand);
   display: inline-block;
-  animation: bounceDot 1.4s ease-in-out infinite;
+  animation: typingDot 1.4s ease-in-out infinite;
 }
-.typing-dot:nth-child(2) { animation-delay: 0.16s; }
-.typing-dot:nth-child(3) { animation-delay: 0.32s; }
 
-@keyframes bounceDot {
-  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
-  40%           { transform: scale(1); opacity: 1; }
+/* ─── Cosmic Orb ──────────────────────────────────────────────────────────── */
+.cosmic-orb {
+  width: 120px; height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #c084fc, #7c3aed, #3b82f6, #1e1b4b);
+  box-shadow:
+    0 0 40px rgba(124,58,237,0.5),
+    0 0 80px rgba(124,58,237,0.2),
+    inset 0 0 30px rgba(192,132,252,0.3);
+  animation: orbFloat 6s ease-in-out infinite;
 }
 
-/* ─── Glass Card ──────────────────────────────────────────────────────────── */
-.glass {
-  background: var(--bg-3);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border);
+/* ─── Active Dot ──────────────────────────────────────────────────────────── */
+.active-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 8px rgba(34,197,94,0.6);
 }
 
-.glass-hover:hover {
-  background: var(--bg-4);
-  border-color: var(--brand);
-}
-
-/* ─── Agent Badge Colors ──────────────────────────────────────────────────── */
-.agent-chat      { color: #22d3ee; }
-.agent-planner   { color: #a78bfa; }
-.agent-coding    { color: #34d399; }
-.agent-debug     { color: #f87171; }
-.agent-memory    { color: #fbbf24; }
-.agent-connector { color: #60a5fa; }
-.agent-deploy    { color: #f472b6; }
-.agent-workflow  { color: #fb923c; }
-.agent-sandbox   { color: #4ade80; }
-.agent-ui        { color: #e879f9; }
-
-/* ─── Neon Glow ───────────────────────────────────────────────────────────── */
-.glow-brand { box-shadow: 0 0 12px var(--brand-glow); }
-.glow-green { box-shadow: 0 0 12px rgba(52,211,153,0.4); }
-.glow-red   { box-shadow: 0 0 12px rgba(248,113,113,0.4); }
-
-/* ─── Shimmer Loader ──────────────────────────────────────────────────────── */
-.shimmer {
-  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 50%, var(--bg-3) 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
+.active-dot::after {
+  content: '';
+  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
+  border-radius: 50%;
+  border: 2px solid rgba(34,197,94,0.3);
+  animation: pulse 2s ease-in-out infinite;
 }
 
-@keyframes shimmer {
-  0%   { background-position: -200% 0; }
-  100% { background-position:  200% 0; }
+/* ─── Progress Bar ────────────────────────────────────────────────────────── */
+.progress-bar {
+  height: 4px; border-radius: 4px;
+  background: rgba(255,255,255,0.06);
+  overflow: hidden;
 }
 
-/* ─── Status Pulse ────────────────────────────────────────────────────────── */
-.status-online  { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
-.status-busy    { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.6); }
-.status-offline { background: #6b7280; }
-.status-error   { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.6); }
+.progress-fill {
+  height: 100%; border-radius: 4px;
+  transition: width 0.8s ease-out;
+}
 
-/* ─── Markdown Prose (Dark) ───────────────────────────────────────────────── */
-.prose-god {
-  color: var(--text-primary);
-  line-height: 1.7;
+/* ─── Nav Item ────────────────────────────────────────────────────────────── */
+.nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; border-radius: 10px;
+  font-size: 0.8125rem; font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer; transition: all 0.2s ease;
+  position: relative;
 }
-.prose-god h1, .prose-god h2, .prose-god h3 {
+
+.nav-item:hover {
+  background: rgba(255,255,255,0.05);
   color: var(--text-primary);
-  font-weight: 600;
-  margin: 1em 0 0.5em;
-}
-.prose-god p   { margin: 0.6em 0; }
-.prose-god ul  { margin: 0.5em 0; padding-left: 1.4em; }
-.prose-god li  { margin: 0.2em 0; }
-.prose-god a   { color: var(--brand); text-decoration: none; }
-.prose-god a:hover { text-decoration: underline; }
-.prose-god strong { color: #fff; font-weight: 600; }
-.prose-god code {
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 1px 6px;
-  font-size: 0.85em;
-  font-family: 'JetBrains Mono', monospace;
+}
+
+.nav-item.active {
+  background: rgba(124,58,237,0.12);
   color: #a78bfa;
+  border: 1px solid rgba(124,58,237,0.2);
 }
-.prose-god pre {
-  background: var(--bg-0) !important;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1rem;
-  overflow-x: auto;
-  margin: 0.8em 0;
-}
-.prose-god pre code {
-  background: none;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-size: 0.8rem;
-}
-.prose-god table  { width: 100%; border-collapse: collapse; margin: 0.8em 0; font-size: 0.85em; }
-.prose-god th     { background: var(--bg-3); padding: 8px 12px; text-align: left; border: 1px solid var(--border); color: var(--text-secondary); }
-.prose-god td     { padding: 6px 12px; border: 1px solid var(--border); }
-.prose-god tr:hover td { background: var(--bg-4); }
-.prose-god blockquote {
-  border-left: 3px solid var(--brand);
-  padding-left: 1em;
-  margin: 0.8em 0;
-  color: var(--text-secondary);
-  font-style: italic;
+
+.nav-item.active::before {
+  content: '';
+  position: absolute; left: 0; top: 50%;
+  transform: translateY(-50%);
+  width: 3px; height: 60%; min-height: 16px;
+  background: linear-gradient(180deg, #a78bfa, #7c3aed);
+  border-radius: 0 2px 2px 0;
 }
-.prose-god hr {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 1.2em 0;
+
+/* ─── Command Input ───────────────────────────────────────────────────────── */
+.cmd-input {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.cmd-input:focus {
+  outline: none;
+  background: rgba(255,255,255,0.06);
+  border-color: rgba(124,58,237,0.4);
+  box-shadow: 0 0 0 3px rgba(124,58,237,0.1), 0 0 20px rgba(124,58,237,0.1);
+}
+
+/* ─── Card ────────────────────────────────────────────────────────────────── */
+.card {
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 16px;
+  transition: all 0.25s ease;
+}
+
+.card:hover {
+  background: rgba(255,255,255,0.05);
+  border-color: rgba(255,255,255,0.12);
+  transform: translateY(-1px);
 }
 
-/* ─── Mobile ──────────────────────────────────────────────────────────────── */
-@media (max-width: 768px) {
-  body { overflow: auto; }
+/* ─── Status Badge ────────────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 2px 8px; border-radius: 20px;
+  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
 }
 
-/* ─── Burmese Font ────────────────────────────────────────────────────────── */
-.font-burmese { font-family: 'Pyidaungsu', 'Myanmar Text', 'Noto Sans Myanmar', sans-serif; }
+.badge-active  { background: rgba(34,197,94,0.12);  color: #4ade80; }
+.badge-idle    { background: rgba(148,163,184,0.1); color: #94a3b8; }
+.badge-processing { background: rgba(245,158,11,0.12); color: #fbbf24; }
+.badge-error   { background: rgba(239,68,68,0.12);  color: #f87171; }
 
-/* ─── Animate in ──────────────────────────────────────────────────────────── */
-.animate-fade-in  { animation: fadeIn 0.25s ease-out; }
-.animate-slide-up { animation: slideUp 0.3s ease-out; }
+/* ─── Chip / Tag ──────────────────────────────────────────────────────────── */
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 12px; border-radius: 20px;
+  font-size: 0.78rem; font-weight: 500;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.08);
+  color: var(--text-secondary);
+  cursor: pointer; white-space: nowrap;
+  transition: all 0.2s ease;
+}
 
-@keyframes fadeIn  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
-@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+.chip:hover {
+  background: rgba(124,58,237,0.12);
+  border-color: rgba(124,58,237,0.3);
+  color: #a78bfa;
+}
+
+/* ─── Terminal / Console ───────────────────────────────────────────��──────── */
+.terminal {
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 12px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.78rem;
+}
+
+/* ─── Stagger Delays ──────────────────────────────────────────────────────── */
+.stagger-1 { animation-delay: 0.05s; }
+.stagger-2 { animation-delay: 0.10s; }
+.stagger-3 { animation-delay: 0.15s; }
+.stagger-4 { animation-delay: 0.20s; }
+.stagger-5 { animation-delay: 0.25s; }
+.stagger-6 { animation-delay: 0.30s; }
+
+/* ─── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 1280px) {
+  .hide-xl { display: none; }
+}
+@media (max-width: 1024px) {
+  .hide-lg { display: none; }
+}

frontend/app/layout.tsx

@@ -2,23 +2,25 @@ import type { Metadata } from 'next'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'God Mode+ AI OS',
-  description: 'Devin + Manus + Genspark Autonomous AI Operating System',
-  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
+  title: 'GOD AGENT OS — Autonomous AI Operating System',
+  description: 'Multi-agent AI OS powered by Gemini, Sambanova & GitHub Models',
+  icons: { icon: '/favicon.ico' },
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" data-theme="dark" suppressHydrationWarning>
+    <html lang="en" className="dark">
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
           rel="stylesheet"
         />
       </head>
-      <body className="antialiased">{children}</body>
+      <body className="bg-void text-slate-100 antialiased overflow-hidden h-screen font-sans">
+        {children}
+      </body>
     </html>
   )
 }

frontend/app/page.tsx

@@ -1,79 +1,81 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useAgentStore } from '@/hooks/useAgentStore'
-import { useAgentWebSocket } from '@/hooks/useWebSocket'
-import TopBar from '@/components/layout/TopBar'
-import Sidebar from '@/components/layout/Sidebar'
-import ChatPanel from '@/components/chat/ChatPanel'
-import ExecutionTimeline from '@/components/timeline/ExecutionTimeline'
-import TasksPanel from '@/components/layout/TasksPanel'
-import MemoryPanel from '@/components/layout/MemoryPanel'
-import ConnectorsPanel from '@/components/layout/ConnectorsPanel'
-import SandboxPanel from '@/components/layout/SandboxPanel'
-import FileExplorer from '@/components/layout/FileExplorer'
-import BrowserPanel from '@/components/layout/BrowserPanel'
+import { motion, AnimatePresence } from 'framer-motion'
 import { Zap } from 'lucide-react'
+import Sidebar from '@/components/shared/Sidebar'
+import TopBar from '@/components/shared/TopBar'
+import DashboardPage from '@/components/pages/DashboardPage'
+import AgentsPage from '@/components/pages/AgentsPage'
+import TasksPage from '@/components/pages/TasksPage'
+import MemoryPage from '@/components/pages/MemoryPage'
+import KnowledgePage from '@/components/pages/KnowledgePage'
+import WorkflowsPage from '@/components/pages/WorkflowsPage'
+import AnalyticsPage from '@/components/pages/AnalyticsPage'
+import SettingsPage from '@/components/pages/SettingsPage'
+import { useAppStore } from '@/store/useAppStore'
 
-export default function HomePage() {
-  const { activePanel, activeTaskId, theme } = useAgentStore()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-    document.documentElement.setAttribute('data-theme', theme)
-  }, [])
+const PAGE_MAP = {
+  dashboard:  DashboardPage,
+  agents:     AgentsPage,
+  tasks:      TasksPage,
+  memory:     MemoryPage,
+  knowledge:  KnowledgePage,
+  workflows:  WorkflowsPage,
+  analytics:  AnalyticsPage,
+  settings:   SettingsPage,
+}
 
-  useEffect(() => {
-    if (mounted) document.documentElement.setAttribute('data-theme', theme)
-  }, [theme, mounted])
+export default function GodAgentOS() {
+  const { currentPage } = useAppStore()
+  const [mounted, setMounted] = useState(false)
 
-  useAgentWebSocket(undefined)
-  useAgentWebSocket(activeTaskId || undefined)
+  useEffect(() => { setMounted(true) }, [])
 
   if (!mounted) return (
-    <div className="flex items-center justify-center h-screen" style={{ background: 'var(--bg-0)' }}>
-      <div className="text-center">
-        <div className="w-16 h-16 rounded-2xl mx-auto mb-4 flex items-center justify-center"
-          style={{ background: 'rgba(99,102,241,0.12)', border: '1px solid rgba(99,102,241,0.25)' }}>
-          <Zap size={28} className="text-indigo-400" />
+    <div className="flex items-center justify-center h-screen" style={{ background: '#05060d' }}>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="text-center"
+      >
+        <div className="w-16 h-16 rounded-2xl mx-auto mb-5 flex items-center justify-center glow-purple"
+          style={{ background: 'linear-gradient(135deg, #7c3aed, #4f46e5)' }}>
+          <Zap size={28} className="text-white" />
         </div>
-        <h2 className="text-lg font-bold mb-1" style={{ color: 'var(--text-primary)' }}>GOD AGENT OS</h2>
-        <p className="text-sm mb-1" style={{ color: 'var(--text-muted)' }}>Autonomous Engineering Platform v7.0</p>
-        <p className="text-xs mb-4" style={{ color: 'var(--text-muted)' }}>Manus + Genspark + Devin</p>
-        <div className="flex gap-1.5 justify-center">
+        <div className="shimmer-text text-xl font-black mb-2">GOD AGENT OS</div>
+        <div className="text-sm text-slate-600 mb-1">Autonomous AI Operating System</div>
+        <div className="text-xs text-slate-700">Gemini · Sambanova · GitHub Models</div>
+        <div className="flex gap-2 justify-center mt-6">
           {[0, 1, 2].map(i => (
-            <div key={i} className="typing-dot" style={{ animationDelay: `${i * 0.16}s` }} />
+            <div key={i} className="typing-dot" style={{ animationDelay: `${i * 0.2}s` }} />
           ))}
         </div>
-      </div>
+      </motion.div>
     </div>
   )
 
-  const RightPanel = () => {
-    switch (activePanel) {
-      case 'timeline':   return <ExecutionTimeline />
-      case 'tasks':      return <TasksPanel />
-      case 'memory':     return <MemoryPanel />
-      case 'connectors': return <ConnectorsPanel />
-      case 'sandbox':    return <SandboxPanel />
-      case 'files':      return <FileExplorer />
-      case 'browser':    return <BrowserPanel />
-      default:           return <ExecutionTimeline />
-    }
-  }
+  const PageComponent = PAGE_MAP[currentPage]
 
   return (
-    <div className="flex flex-col h-screen overflow-hidden" style={{ background: 'var(--bg-0)' }}>
-      <TopBar />
-      <div className="flex flex-1 overflow-hidden">
-        <Sidebar />
-        <div className="flex-1 min-w-0 border-r" style={{ borderColor: 'var(--border)' }}>
-          <ChatPanel />
-        </div>
-        <div className="w-[400px] flex-shrink-0 hidden lg:block">
-          <RightPanel />
-        </div>
+    <div className="flex h-screen overflow-hidden" style={{ background: '#05060d' }}>
+      <Sidebar />
+      <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
+        <TopBar />
+        <main className="flex-1 overflow-hidden">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentPage}
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+              className="h-full"
+            >
+              <PageComponent />
+            </motion.div>
+          </AnimatePresence>
+        </main>
       </div>
     </div>
   )

frontend/components/dashboard/ActivityFeed.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { ACTIVITY } from '@/store/useAppStore'
+import { CheckCircle2, Loader2, Info, AlertTriangle } from 'lucide-react'
+
+const TypeIcon = ({ type }: { type: string }) => {
+  const cls = 'w-3.5 h-3.5 flex-shrink-0'
+  switch (type) {
+    case 'success': return <CheckCircle2 className={cls} style={{ color: '#22c55e' }} />
+    case 'processing': return <Loader2 className={`${cls} animate-spin`} style={{ color: '#f59e0b' }} />
+    case 'warning': return <AlertTriangle className={cls} style={{ color: '#f59e0b' }} />
+    default: return <Info className={cls} style={{ color: '#60a5fa' }} />
+  }
+}
+
+export default function ActivityFeed({ max = 6 }: { max?: number }) {
+  const items = ACTIVITY.slice(0, max)
+  return (
+    <div className="space-y-1">
+      {items.map((item, i) => (
+        <motion.div
+          key={item.id}
+          initial={{ opacity: 0, x: 8 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.3, delay: i * 0.06 }}
+          className="flex items-start gap-3 px-3 py-2.5 rounded-xl hover:bg-white/[0.03] transition-colors group cursor-default"
+        >
+          <div className="w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5"
+            style={{ background: `${item.color}15` }}>
+            <div className="w-2 h-2 rounded-full" style={{ background: item.color }} />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-xs font-semibold text-white truncate">{item.agent}</span>
+              <span className="text-xs flex-shrink-0" style={{ color: 'var(--text-muted)' }}>{item.time}</span>
+            </div>
+            <div className="text-xs mt-0.5 truncate" style={{ color: 'var(--text-secondary)' }}>{item.action}</div>
+          </div>
+          <TypeIcon type={item.type} />
+        </motion.div>
+      ))}
+    </div>
+  )
+}

frontend/components/dashboard/AgentFleetCard.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Agent } from '@/store/useAppStore'
+import { cn, getStatusColor } from '@/lib/utils'
+import { ChevronRight } from 'lucide-react'
+
+interface AgentFleetCardProps {
+  agent: Agent
+  delay?: number
+  onClick?: () => void
+}
+
+export default function AgentFleetCard({ agent, delay = 0, onClick }: AgentFleetCardProps) {
+  const statusColor = getStatusColor(agent.status)
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, delay, ease: [0.4, 0, 0.2, 1] }}
+      onClick={onClick}
+      className="card p-4 cursor-pointer group relative overflow-hidden"
+    >
+      {/* Accent line */}
+      <div className="absolute top-0 left-0 right-0 h-[2px] opacity-60 rounded-t-2xl"
+        style={{ background: `linear-gradient(90deg, ${agent.color}, transparent)` }} />
+
+      {/* Header */}
+      <div className="flex items-start justify-between mb-3">
+        <div className="w-10 h-10 rounded-xl flex items-center justify-center text-xl flex-shrink-0"
+          style={{ background: `${agent.color}15`, border: `1px solid ${agent.color}20` }}>
+          {agent.icon}
+        </div>
+        <div className={cn('badge', `badge-${agent.status}`)}>
+          <div className="w-1.5 h-1.5 rounded-full" style={{ background: statusColor }} />
+          {agent.status}
+        </div>
+      </div>
+
+      {/* Info */}
+      <div className="mb-3">
+        <div className="text-sm font-semibold text-white leading-snug">{agent.name}</div>
+        <div className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>{agent.role}</div>
+      </div>
+
+      {/* Stats Row */}
+      <div className="grid grid-cols-2 gap-2 mb-3">
+        <div>
+          <div className="text-xs text-slate-500 mb-1">Efficiency</div>
+          <div className="progress-bar">
+            <div className="progress-fill"
+              style={{ width: `${agent.efficiency}%`, background: `linear-gradient(90deg, ${agent.color}80, ${agent.color})` }} />
+          </div>
+          <div className="text-xs font-semibold mt-1" style={{ color: agent.color }}>{agent.efficiency}%</div>
+        </div>
+        <div>
+          <div className="text-xs text-slate-500 mb-1">Uptime</div>
+          <div className="progress-bar">
+            <div className="progress-fill"
+              style={{ width: `${agent.uptime}%`, background: `linear-gradient(90deg, #22d3ee60, #22d3ee)` }} />
+          </div>
+          <div className="text-xs font-semibold mt-1 text-cyan-400">{agent.uptime}%</div>
+        </div>
+      </div>
+
+      {/* Last Action */}
+      <div className="flex items-center gap-1.5 text-xs text-slate-500 group-hover:text-slate-400 transition-colors">
+        <span className="truncate">{agent.lastAction}</span>
+        <span className="flex-shrink-0">· {agent.lastActionTime}</span>
+      </div>
+
+      <ChevronRight size={14} className="absolute right-3 bottom-3 text-slate-700 group-hover:text-purple-400 transition-colors" />
+    </motion.div>
+  )
+}

frontend/components/dashboard/CommandCenter.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { motion } from 'framer-motion'
+import { Terminal, Mic, Send } from 'lucide-react'
+
+const COMMANDS = ['/new-project', '/analyze-competitors', '/generate-report', '/deploy-app', '/automate-workflow', '/research']
+const LINES = [
+  { text: '> God Agent OS is listening...', color: '#6366f1' },
+  { text: '> Multi-agent system ready. Gemini · Sambanova · GitHub Models active.', color: '#22d3ee' },
+  { text: '> How may I assist in your divine mission?', color: 'var(--text-secondary)' },
+]
+
+export default function CommandCenter() {
+  const [input, setInput] = useState('')
+  const [history, setHistory] = useState<string[]>([])
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = (cmd?: string) => {
+    const command = cmd || input.trim()
+    if (!command) return
+    setHistory(prev => [...prev, `> ${command}`, '  Executing…'])
+    setInput('')
+    setTimeout(() => {
+      setHistory(prev => [...prev, '  ✓ Task dispatched to agent fleet.'])
+    }, 800)
+  }
+
+  return (
+    <div className="card overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: 'var(--border)' }}>
+        <div className="flex items-center gap-2">
+          <Terminal size={14} className="text-purple-400" />
+          <span className="text-xs font-bold text-white">Command Center</span>
+          <div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse-glow" />
+        </div>
+        <button className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg font-medium transition-all hover:bg-purple-500/10"
+          style={{ background: 'rgba(124,58,237,0.08)', border: '1px solid rgba(124,58,237,0.2)', color: '#a78bfa' }}>
+          <Mic size={11} />
+          Voice Command
+        </button>
+      </div>
+
+      {/* Terminal */}
+      <div className="terminal mx-3 mt-3 mb-2 p-3 min-h-[80px]">
+        {LINES.map((line, i) => (
+          <div key={i} className="text-xs leading-relaxed" style={{ color: line.color }}>{line.text}</div>
+        ))}
+        {history.map((line, i) => (
+          <div key={`h${i}`} className="text-xs leading-relaxed text-slate-400">{line}</div>
+        ))}
+      </div>
+
+      {/* Command Chips */}
+      <div className="flex flex-wrap gap-2 px-3 pb-3">
+        {COMMANDS.map(cmd => (
+          <button key={cmd} onClick={() => handleSubmit(cmd)}
+            className="chip text-xs">
+            {cmd}
+          </button>
+        ))}
+        <div className="flex gap-2 ml-auto">
+          <input
+            ref={inputRef}
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleSubmit()}
+            placeholder="Custom command…"
+            className="cmd-input px-3 py-1.5 text-xs w-36"
+          />
+          <button onClick={() => handleSubmit()}
+            className="p-1.5 rounded-lg transition-colors hover:bg-purple-500/20"
+            style={{ background: 'rgba(124,58,237,0.1)', border: '1px solid rgba(124,58,237,0.2)' }}>
+            <Send size={12} className="text-purple-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/dashboard/GodModeCard.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useAppStore } from '@/store/useAppStore'
+
+export default function GodModeCard() {
+  const { godModeActive } = useAppStore()
+
+  return (
+    <div className="relative overflow-hidden rounded-2xl p-5"
+      style={{ background: 'linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(59,130,246,0.1) 50%, rgba(20,24,40,0.8) 100%)', border: '1px solid rgba(124,58,237,0.25)' }}>
+
+      {/* Cosmic Orb */}
+      <div className="flex justify-center mb-4">
+        <div className="cosmic-orb" style={{ width: 80, height: 80 }} />
+      </div>
+
+      {/* Status */}
+      <div className="text-center">
+        <div className="text-xs font-semibold uppercase tracking-widest mb-1" style={{ color: 'var(--text-secondary)' }}>GOD MODE</div>
+        <div className={`text-xl font-black tracking-wide mb-2 ${godModeActive ? 'gradient-text' : 'text-slate-500'}`}>
+          {godModeActive ? 'ACTIVE' : 'STANDBY'}
+        </div>
+        <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+          {godModeActive ? 'All systems operational. You are the Architect.' : 'Enable God Mode for full autonomy.'}
+        </p>
+      </div>
+
+      {/* Glow overlay */}
+      {godModeActive && (
+        <motion.div
+          className="absolute inset-0 pointer-events-none rounded-2xl"
+          animate={{ opacity: [0.3, 0.6, 0.3] }}
+          transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          style={{ background: 'radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.15) 0%, transparent 70%)' }}
+        />
+      )}
+
+      {/* Status dot */}
+      <div className="absolute top-3 right-3 flex items-center gap-1.5">
+        <div className={`w-2 h-2 rounded-full ${godModeActive ? 'bg-green-400 animate-pulse-glow' : 'bg-slate-600'}`} />
+        <span className="text-xs font-medium" style={{ color: godModeActive ? '#4ade80' : 'var(--text-muted)' }}>
+          {godModeActive ? 'Live' : 'Off'}
+        </span>
+      </div>
+    </div>
+  )
+}

frontend/components/dashboard/MetricCard.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface MetricCardProps {
+  label: string
+  value: string | number
+  unit?: string
+  trend?: string
+  trendUp?: boolean
+  icon: React.ReactNode
+  iconColor: string
+  delay?: number
+}
+
+export default function MetricCard({ label, value, unit, trend, trendUp = true, icon, iconColor, delay = 0 }: MetricCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, delay, ease: [0.4, 0, 0.2, 1] }}
+      className="card p-5 group cursor-default"
+    >
+      <div className="flex items-start justify-between mb-4">
+        <div className="w-10 h-10 rounded-xl flex items-center justify-center transition-transform group-hover:scale-110"
+          style={{ background: `${iconColor}15`, border: `1px solid ${iconColor}25` }}>
+          <div style={{ color: iconColor }}>{icon}</div>
+        </div>
+        {trend && (
+          <div className={cn('flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded-full',
+            trendUp ? 'text-green-400 bg-green-400/10' : 'text-red-400 bg-red-400/10'
+          )}>
+            {trendUp ? <TrendingUp size={11} /> : <TrendingDown size={11} />}
+            {trend}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-end gap-1.5">
+        <span className="text-3xl font-bold text-white leading-none">{value}</span>
+        {unit && <span className="text-sm font-medium text-slate-400 mb-0.5">{unit}</span>}
+      </div>
+      <div className="text-xs font-medium mt-1.5" style={{ color: 'var(--text-secondary)' }}>{label}</div>
+    </motion.div>
+  )
+}

frontend/components/dashboard/MissionInput.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Send, Telescope, Code2, Zap, BarChart2, PenLine, MoreHorizontal, Loader2, Mic } from 'lucide-react'
+
+const QUICK_ACTIONS = [
+  { icon: Telescope, label: 'Research',   color: '#6366f1', prompt: 'Research the latest trends in ' },
+  { icon: Code2,     label: 'Build',      color: '#34d399', prompt: 'Build and deploy a ' },
+  { icon: Zap,       label: 'Automate',   color: '#f59e0b', prompt: 'Create an automation workflow for ' },
+  { icon: BarChart2, label: 'Analyze',    color: '#22d3ee', prompt: 'Analyze data and generate insights for ' },
+  { icon: PenLine,   label: 'Generate',   color: '#a78bfa', prompt: 'Generate high-quality content for ' },
+]
+
+const EXAMPLE_PROMPTS = [
+  'Build a complete marketing analysis dashboard with AI insights',
+  'Research competitors in the SaaS market and synthesize findings',
+  'Automate my GitHub PR review workflow with AI agents',
+  'Analyze Q4 performance data and generate executive summary',
+]
+
+export default function MissionInput() {
+  const [prompt, setPrompt] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [selectedAction, setSelectedAction] = useState<string | null>(null)
+
+  const handleAction = (actionPrompt: string, label: string) => {
+    setPrompt(actionPrompt)
+    setSelectedAction(label)
+  }
+
+  const handleSubmit = async () => {
+    if (!prompt.trim() || loading) return
+    setLoading(true)
+    await new Promise(r => setTimeout(r, 2000))
+    setLoading(false)
+    setPrompt('')
+    setSelectedAction(null)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit() }
+  }
+
+  return (
+    <div className="card p-5">
+      {/* Header */}
+      <div className="flex items-start gap-3 mb-4">
+        <div className="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0"
+          style={{ background: 'rgba(124,58,237,0.15)', border: '1px solid rgba(124,58,237,0.25)' }}>
+          <Zap size={15} className="text-purple-400" />
+        </div>
+        <div>
+          <h2 className="text-base font-semibold text-white">What shall we build today?</h2>
+          <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+            Describe your mission. God Agent OS will orchestrate the rest.
+          </p>
+        </div>
+      </div>
+
+      {/* Input */}
+      <div className="relative mb-3">
+        <textarea
+          value={prompt}
+          onChange={e => setPrompt(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="e.g., Build a complete marketing analysis dashboard with AI insights…"
+          rows={3}
+          className="cmd-input w-full px-4 py-3 pr-12 text-sm resize-none"
+          style={{ minHeight: 88, lineHeight: 1.6 }}
+        />
+        <div className="absolute right-3 bottom-3 flex items-center gap-2">
+          <button className="p-1.5 rounded-lg text-slate-600 hover:text-purple-400 transition-colors">
+            <Mic size={15} />
+          </button>
+          <motion.button
+            onClick={handleSubmit}
+            disabled={!prompt.trim() || loading}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="w-8 h-8 rounded-lg flex items-center justify-center transition-all disabled:opacity-40"
+            style={{ background: prompt.trim() && !loading ? 'linear-gradient(135deg, #7c3aed, #4f46e5)' : 'rgba(255,255,255,0.08)' }}
+          >
+            {loading ? <Loader2 size={14} className="text-white animate-spin" /> : <Send size={14} className="text-white" />}
+          </motion.button>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="flex flex-wrap gap-2">
+        {QUICK_ACTIONS.map(({ icon: Icon, label, color, prompt: p }) => (
+          <button
+            key={label}
+            onClick={() => handleAction(p, label)}
+            className={`chip transition-all ${selectedAction === label ? 'border-purple-500/40 bg-purple-500/10 text-purple-300' : ''}`}
+          >
+            <Icon size={12} style={{ color }} />
+            {label}
+          </button>
+        ))}
+        <button className="chip">
+          <MoreHorizontal size={12} />
+          More
+        </button>
+      </div>
+
+      {/* Example prompts */}
+      <AnimatePresence>
+        {!prompt && (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="mt-3 pt-3 border-t" style={{ borderColor: 'var(--border)' }}>
+            <div className="text-xs mb-2 font-medium" style={{ color: 'var(--text-muted)' }}>Quick start:</div>
+            <div className="space-y-1">
+              {EXAMPLE_PROMPTS.slice(0, 2).map(ep => (
+                <button key={ep} onClick={() => setPrompt(ep)}
+                  className="w-full text-left text-xs px-3 py-1.5 rounded-lg hover:bg-white/[0.04] text-slate-500 hover:text-slate-300 transition-colors truncate">
+                  → {ep}
+                </button>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}

frontend/components/dashboard/SystemResources.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+import { Cpu, MemoryStick, HardDrive, Wifi } from 'lucide-react'
+import { useAppStore } from '@/store/useAppStore'
+
+const RESOURCE_CONFIGS = [
+  { key: 'cpu',     label: 'CPU',     icon: Cpu,          color: '#6366f1' },
+  { key: 'memory',  label: 'Memory',  icon: MemoryStick,  color: '#22d3ee' },
+  { key: 'storage', label: 'Storage', icon: HardDrive,    color: '#a78bfa' },
+  { key: 'network', label: 'Network', icon: Wifi,         color: '#34d399' },
+] as const
+
+export default function SystemResources() {
+  const { systemResources, updateSystemResources } = useAppStore()
+
+  // Simulate live fluctuation
+  useEffect(() => {
+    const interval = setInterval(() => {
+      updateSystemResources({
+        cpu: Math.min(95, Math.max(15, systemResources.cpu + (Math.random() - 0.5) * 6)),
+        memory: Math.min(90, Math.max(40, systemResources.memory + (Math.random() - 0.5) * 3)),
+        network: Math.min(80, Math.max(10, systemResources.network + (Math.random() - 0.5) * 8)),
+      })
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [systemResources, updateSystemResources])
+
+  return (
+    <div className="space-y-3">
+      {RESOURCE_CONFIGS.map(({ key, label, icon: Icon, color }) => {
+        const value = Math.round(systemResources[key])
+        return (
+          <div key={key} className="flex items-center gap-3">
+            <div className="w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0"
+              style={{ background: `${color}15` }}>
+              <Icon size={12} style={{ color }} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between mb-1.5">
+                <span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>{label}</span>
+                <span className="text-xs font-bold" style={{ color }}>{value}%</span>
+              </div>
+              <div className="progress-bar h-1.5">
+                <motion.div
+                  className="progress-fill h-full rounded-full"
+                  animate={{ width: `${value}%` }}
+                  transition={{ duration: 0.8, ease: 'easeOut' }}
+                  style={{ background: `linear-gradient(90deg, ${color}60, ${color})` }}
+                />
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

frontend/components/layout/AIRouterPanel.tsx

@@ -0,0 +1,268 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAgentStore } from '@/hooks/useAgentStore'
+import { Cpu, Key, RefreshCw, CheckCircle2, XCircle, AlertCircle, Zap, Activity } from 'lucide-react'
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:7860'
+
+interface ProviderStat {
+  calls: number
+  errors: number
+  avg_latency_ms: number
+  available: boolean
+  key_count: number
+  available_keys: number
+  priority: number
+}
+
+interface KeyInfo {
+  key_preview: string
+  available: boolean
+  failures: number
+  calls: number
+  cooldown_remaining_s: number
+}
+
+interface PoolStatus {
+  provider: string
+  total_keys: number
+  available_keys: number
+  keys: KeyInfo[]
+}
+
+const PROVIDER_ICONS: Record<string, string> = {
+  sambanova: '⚡',
+  gemini: '✨',
+  openai: '🤖',
+  groq: '🦙',
+  cerebras: '🧠',
+  openrouter: '🔀',
+  anthropic: '🪄',
+}
+
+const PROVIDER_COLORS: Record<string, string> = {
+  sambanova: '#f97316',
+  gemini: '#4285f4',
+  openai: '#10a37f',
+  groq: '#f59e0b',
+  cerebras: '#8b5cf6',
+  openrouter: '#6366f1',
+  anthropic: '#d97706',
+}
+
+export default function AIRouterPanel() {
+  const { locale } = useAgentStore()
+  const [stats, setStats] = useState<Record<string, ProviderStat>>({})
+  const [pools, setPools] = useState<Record<string, PoolStatus>>({})
+  const [loading, setLoading] = useState(true)
+  const [expandedProvider, setExpandedProvider] = useState<string | null>(null)
+  const [lastRefresh, setLastRefresh] = useState<Date | null>(null)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const [statsRes, poolRes] = await Promise.all([
+        fetch(`${API_URL}/api/v1/ai/stats`).then(r => r.json()).catch(() => ({})),
+        fetch(`${API_URL}/api/v1/ai/pool-status`).then(r => r.json()).catch(() => ({})),
+      ])
+      setStats(statsRes.stats || {})
+      setPools(poolRes.pools || {})
+      setLastRefresh(new Date())
+    } catch {}
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    load()
+    const interval = setInterval(load, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const sortedProviders = Object.entries(stats).sort(
+    ([, a], [, b]) => (a.priority || 99) - (b.priority || 99)
+  )
+
+  const activeCount = sortedProviders.filter(([, s]) => s.available).length
+  const totalCalls = sortedProviders.reduce((sum, [, s]) => sum + s.calls, 0)
+
+  return (
+    <div className="flex flex-col h-full" style={{ background: 'var(--bg-2)' }}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0"
+        style={{ borderColor: 'var(--border)', background: 'var(--bg-3)' }}>
+        <div className="flex items-center gap-2">
+          <Cpu size={14} className="text-indigo-400" />
+          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+            {locale === 'my' ? 'AI Router v8' : 'AI Router v8'}
+          </span>
+          <span className="text-[10px] px-1.5 py-0.5 rounded-full"
+            style={{
+              background: activeCount > 0 ? 'rgba(34,197,94,0.15)' : 'rgba(239,68,68,0.15)',
+              color: activeCount > 0 ? '#4ade80' : '#f87171',
+              border: `1px solid ${activeCount > 0 ? 'rgba(34,197,94,0.3)' : 'rgba(239,68,68,0.3)'}`,
+            }}>
+            {activeCount} active
+          </span>
+        </div>
+        <button onClick={load} disabled={loading}
+          className="p-1.5 rounded-lg hover:bg-white/5 transition-colors" title="Refresh">
+          <RefreshCw size={12} style={{ color: 'var(--text-muted)' }}
+            className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      {/* Summary */}
+      <div className="px-3 py-2 border-b flex gap-3 text-xs"
+        style={{ borderColor: 'var(--border)', background: 'rgba(99,102,241,0.05)' }}>
+        <div className="flex items-center gap-1">
+          <Activity size={10} className="text-indigo-400" />
+          <span style={{ color: 'var(--text-muted)' }}>Total calls:</span>
+          <span className="font-mono font-semibold" style={{ color: 'var(--text-primary)' }}>{totalCalls}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Key size={10} className="text-indigo-400" />
+          <span style={{ color: 'var(--text-muted)' }}>Providers:</span>
+          <span className="font-mono font-semibold" style={{ color: 'var(--text-primary)' }}>
+            {activeCount}/{sortedProviders.length}
+          </span>
+        </div>
+        {lastRefresh && (
+          <div className="ml-auto text-[10px]" style={{ color: 'var(--text-muted)' }}>
+            {lastRefresh.toLocaleTimeString()}
+          </div>
+        )}
+      </div>
+
+      {/* Provider List */}
+      <div className="flex-1 overflow-y-auto">
+        {loading && sortedProviders.length === 0 ? (
+          <div className="flex items-center justify-center h-24">
+            <div className="flex gap-1">
+              {[0, 1, 2].map(i => (
+                <div key={i} className="w-1.5 h-1.5 rounded-full animate-bounce"
+                  style={{ background: 'var(--brand)', animationDelay: `${i * 0.15}s` }} />
+              ))}
+            </div>
+          </div>
+        ) : sortedProviders.length === 0 ? (
+          <div className="p-4 text-center text-xs" style={{ color: 'var(--text-muted)' }}>
+            No providers configured
+          </div>
+        ) : (
+          <div className="p-2 flex flex-col gap-1.5">
+            {sortedProviders.map(([name, stat]) => {
+              const pool = pools[name]
+              const icon = PROVIDER_ICONS[name] || '🔌'
+              const color = PROVIDER_COLORS[name] || '#6366f1'
+              const isExpanded = expandedProvider === name
+              const successRate = stat.calls > 0
+                ? Math.round(((stat.calls - stat.errors) / stat.calls) * 100)
+                : 100
+
+              return (
+                <div key={name}
+                  className="rounded-xl border overflow-hidden cursor-pointer hover:border-opacity-60 transition-all"
+                  style={{
+                    borderColor: stat.available ? `${color}40` : 'var(--border)',
+                    background: stat.available ? `${color}08` : 'var(--bg-3)',
+                  }}
+                  onClick={() => setExpandedProvider(isExpanded ? null : name)}>
+
+                  {/* Provider Header */}
+                  <div className="flex items-center gap-2 px-3 py-2">
+                    <span className="text-sm">{icon}</span>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-semibold capitalize" style={{ color: 'var(--text-primary)' }}>
+                          {name}
+                        </span>
+                        {stat.priority <= 2 && (
+                          <span className="text-[9px] px-1 py-0.5 rounded font-bold"
+                            style={{ background: `${color}25`, color }}>
+                            PRIMARY
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 mt-0.5">
+                        <span className="text-[10px]" style={{ color: 'var(--text-muted)' }}>
+                          {stat.calls} calls · {stat.avg_latency_ms}ms avg
+                        </span>
+                        {pool && (
+                          <span className="text-[10px]" style={{ color: 'var(--text-muted)' }}>
+                            · {pool.available_keys}/{pool.total_keys} keys
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      {/* Success Rate Bar */}
+                      {stat.calls > 0 && (
+                        <div className="w-12 h-1.5 rounded-full overflow-hidden"
+                          style={{ background: 'var(--bg-0)' }}>
+                          <div className="h-full rounded-full transition-all"
+                            style={{
+                              width: `${successRate}%`,
+                              background: successRate > 80 ? '#4ade80' : successRate > 50 ? '#fbbf24' : '#f87171',
+                            }} />
+                        </div>
+                      )}
+                      {stat.available ? (
+                        <CheckCircle2 size={12} style={{ color: '#4ade80' }} />
+                      ) : (
+                        <XCircle size={12} style={{ color: '#f87171' }} />
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Expanded Key Pool */}
+                  {isExpanded && pool && pool.keys.length > 0 && (
+                    <div className="px-3 pb-3 border-t" style={{ borderColor: 'var(--border)' }}>
+                      <div className="pt-2 text-[10px] font-semibold mb-2" style={{ color: 'var(--text-muted)' }}>
+                        KEY POOL ({pool.available_keys}/{pool.total_keys} available)
+                      </div>
+                      <div className="flex flex-col gap-1">
+                        {pool.keys.map((k, i) => (
+                          <div key={i} className="flex items-center gap-2 px-2 py-1 rounded-lg"
+                            style={{ background: k.available ? 'rgba(34,197,94,0.05)' : 'rgba(239,68,68,0.05)' }}>
+                            <Key size={9} style={{ color: k.available ? '#4ade80' : '#f87171' }} />
+                            <span className="font-mono text-[10px] flex-1" style={{ color: 'var(--text-secondary)' }}>
+                              {k.key_preview}
+                            </span>
+                            <span className="text-[9px]" style={{ color: 'var(--text-muted)' }}>
+                              {k.calls} calls
+                            </span>
+                            {k.failures > 0 && (
+                              <span className="text-[9px]" style={{ color: '#fbbf24' }}>
+                                {k.failures} fails
+                              </span>
+                            )}
+                            {!k.available && k.cooldown_remaining_s > 0 && (
+                              <span className="text-[9px] px-1 rounded"
+                                style={{ background: 'rgba(239,68,68,0.15)', color: '#f87171' }}>
+                                {Math.round(k.cooldown_remaining_s)}s
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Footer Info */}
+      <div className="px-3 py-2 border-t text-[10px]"
+        style={{ borderColor: 'var(--border)', color: 'var(--text-muted)', background: 'var(--bg-3)' }}>
+        <div className="flex items-center gap-1">
+          <Zap size={9} className="text-indigo-400" />
+          <span>Priority: SambaNova → Gemini → OpenAI → Groq → Cerebras → Anthropic</span>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/layout/Sidebar.tsx

@@ -17,6 +17,7 @@ const PANELS: { id: ActivePanel; icon: React.ElementType; labelEn: string; label
   { id: 'browser',    icon: Globe,          labelEn: 'Browser',     labelMy: 'ဘရောင်ဇာ',  badge: 'v7' },
   { id: 'memory',     icon: Brain,          labelEn: 'Memory',      labelMy: 'မှတ်ဉာဏ်' },
   { id: 'connectors', icon: Plug,           labelEn: 'Connectors',  labelMy: 'ချိတ်ဆက်မှု' },
+  { id: 'ai_router',   icon: Cpu,            labelEn: 'AI Router',   labelMy: 'AI Router',    badge: 'v8' },
 ]
 
 const AGENT_META: Record<string, { icon: React.ElementType; color: string; label: string; isNew?: boolean }> = {
@@ -128,7 +129,7 @@ export default function Sidebar() {
         <div className="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[10px]"
           style={{ background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)' }}>
           <Bot size={10} className="text-indigo-400" />
-          <span style={{ color: 'var(--text-muted)' }}>God Agent OS v7.0</span>
+          <span style={{ color: 'var(--text-muted)' }}>God Agent OS v8.0</span>
           <div className="ml-auto w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
         </div>
       </div>

frontend/components/pages/AgentsPage.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { Search, Filter, Plus, Bot, Activity, Zap } from 'lucide-react'
+import { AGENTS, Agent } from '@/store/useAppStore'
+import { getStatusColor, cn } from '@/lib/utils'
+
+const STATUS_FILTERS = ['All', 'Active', 'Processing', 'Idle', 'Error']
+
+function AgentDetailCard({ agent }: { agent: Agent }) {
+  const sc = getStatusColor(agent.status)
+  return (
+    <motion.div layout className="card p-5 relative overflow-hidden group">
+      <div className="absolute top-0 left-0 right-0 h-[2px]"
+        style={{ background: `linear-gradient(90deg, ${agent.color}, transparent)` }} />
+
+      <div className="flex items-start gap-4 mb-4">
+        <div className="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0"
+          style={{ background: `${agent.color}15`, border: `1px solid ${agent.color}25` }}>
+          {agent.icon}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="font-bold text-white">{agent.name}</h3>
+            <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-semibold"
+              style={{ background: `${sc}15`, color: sc }}>
+              <div className="w-1.5 h-1.5 rounded-full" style={{ background: sc }} />
+              {agent.status}
+            </div>
+          </div>
+          <p className="text-sm mt-0.5" style={{ color: 'var(--text-secondary)' }}>{agent.role}</p>
+          <p className="text-xs mt-2 text-slate-500">{agent.lastAction} · {agent.lastActionTime}</p>
+        </div>
+        <div className="text-right">
+          <div className="text-xs text-slate-500 mb-0.5">Tasks</div>
+          <div className="text-xl font-bold text-white">{agent.tasks}</div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs text-slate-500">Efficiency</span>
+            <span className="text-xs font-bold" style={{ color: agent.color }}>{agent.efficiency}%</span>
+          </div>
+          <div className="progress-bar">
+            <div className="progress-fill" style={{ width: `${agent.efficiency}%`, background: `linear-gradient(90deg, ${agent.color}60, ${agent.color})` }} />
+          </div>
+        </div>
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs text-slate-500">Uptime</span>
+            <span className="text-xs font-bold text-cyan-400">{agent.uptime}%</span>
+          </div>
+          <div className="progress-bar">
+            <div className="progress-fill" style={{ width: `${agent.uptime}%`, background: 'linear-gradient(90deg, #22d3ee60, #22d3ee)' }} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mt-4">
+        <button className="flex-1 py-2 rounded-xl text-xs font-semibold transition-all hover:opacity-90"
+          style={{ background: `${agent.color}18`, border: `1px solid ${agent.color}30`, color: agent.color }}>
+          View Details
+        </button>
+        <button className="flex-1 py-2 rounded-xl text-xs font-semibold transition-all hover:opacity-90"
+          style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', color: 'var(--text-secondary)' }}>
+          Assign Task
+        </button>
+      </div>
+    </motion.div>
+  )
+}
+
+export default function AgentsPage() {
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState('All')
+
+  const filtered = AGENTS.filter(a =>
+    (statusFilter === 'All' || a.status === statusFilter.toLowerCase()) &&
+    (search === '' || a.name.toLowerCase().includes(search.toLowerCase()))
+  )
+
+  const activeCount = AGENTS.filter(a => a.status === 'active').length
+  const processingCount = AGENTS.filter(a => a.status === 'processing').length
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-bold text-white flex items-center gap-2">
+            <Bot size={22} className="text-purple-400" /> Agent Fleet
+          </h1>
+          <p className="text-sm mt-1 text-slate-500">
+            {activeCount} active · {processingCount} processing · {AGENTS.length} total agents deployed
+          </p>
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white transition-all hover:opacity-90"
+          style={{ background: 'linear-gradient(135deg, #7c3aed, #4f46e5)', boxShadow: '0 0 20px rgba(124,58,237,0.3)' }}>
+          <Plus size={15} /> Deploy Agent
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-4 mb-6">
+        {[
+          { label: 'Active', value: activeCount, color: '#22c55e' },
+          { label: 'Processing', value: processingCount, color: '#f59e0b' },
+          { label: 'Idle', value: AGENTS.filter(a => a.status === 'idle').length, color: '#94a3b8' },
+          { label: 'Total Tasks', value: AGENTS.reduce((acc, a) => acc + a.tasks, 0), color: '#6366f1' },
+        ].map(stat => (
+          <div key={stat.label} className="card p-4 text-center">
+            <div className="text-2xl font-bold text-white">{stat.value}</div>
+            <div className="text-xs mt-1 font-medium" style={{ color: stat.color }}>{stat.label}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Search & Filter */}
+      <div className="flex gap-3 mb-6">
+        <div className="relative flex-1 max-w-sm">
+          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+          <input value={search} onChange={e => setSearch(e.target.value)}
+            placeholder="Search agents…"
+            className="cmd-input w-full pl-9 pr-4 py-2.5 text-sm" />
+        </div>
+        <div className="flex gap-2">
+          {STATUS_FILTERS.map(f => (
+            <button key={f} onClick={() => setStatusFilter(f)}
+              className={cn('px-3 py-2 rounded-xl text-xs font-semibold transition-all',
+                statusFilter === f
+                  ? 'bg-purple-600/20 text-purple-300 border border-purple-500/30'
+                  : 'text-slate-500 hover:text-slate-300 border border-transparent hover:border-white/10'
+              )}>
+              {f}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Grid */}
+      <motion.div layout className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+        {filtered.map((agent, i) => (
+          <motion.div key={agent.id} initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.05 }}>
+            <AgentDetailCard agent={agent} />
+          </motion.div>
+        ))}
+        {filtered.length === 0 && (
+          <div className="col-span-3 text-center py-16 text-slate-600">No agents match the filter</div>
+        )}
+      </motion.div>
+    </div>
+  )
+}

frontend/components/pages/AnalyticsPage.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { BarChart3, TrendingUp, Clock, CheckSquare, Zap } from 'lucide-react'
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, LineChart, Line, AreaChart, Area } from 'recharts'
+
+const WEEKLY_DATA = [
+  { day: 'Mon', tasks: 28, efficiency: 91 },
+  { day: 'Tue', tasks: 35, efficiency: 94 },
+  { day: 'Wed', tasks: 42, efficiency: 96 },
+  { day: 'Thu', tasks: 31, efficiency: 89 },
+  { day: 'Fri', tasks: 55, efficiency: 98 },
+  { day: 'Sat', tasks: 22, efficiency: 92 },
+  { day: 'Sun', tasks: 34, efficiency: 97 },
+]
+
+const AGENT_PERF = [
+  { name: 'Code', tasks: 62, success: 99 },
+  { name: 'Data', tasks: 83, success: 98 },
+  { name: 'Research', tasks: 47, success: 92 },
+  { name: 'Content', tasks: 31, success: 95 },
+  { name: 'Design', tasks: 24, success: 90 },
+]
+
+const customTooltipStyle = {
+  background: 'rgba(14,17,33,0.95)',
+  border: '1px solid rgba(255,255,255,0.08)',
+  borderRadius: 10,
+  padding: '8px 12px',
+  fontSize: 12,
+  color: '#e2e8f0',
+}
+
+export default function AnalyticsPage() {
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="mb-6">
+        <h1 className="text-xl font-bold text-white flex items-center gap-2">
+          <BarChart3 size={22} className="text-purple-400" /> Analytics
+        </h1>
+        <p className="text-sm mt-1 text-slate-500">Performance insights across all agents and tasks</p>
+      </div>
+
+      {/* KPI Row */}
+      <div className="grid grid-cols-4 gap-4 mb-6">
+        {[
+          { label: 'Tasks This Week', value: '247', delta: '+37%', color: '#6366f1', icon: CheckSquare },
+          { label: 'Avg Efficiency', value: '95.2%', delta: '+3.1%', color: '#22c55e', icon: TrendingUp },
+          { label: 'Time Saved', value: '128h', delta: '+55%', color: '#22d3ee', icon: Clock },
+          { label: 'Success Rate', value: '98.6%', delta: '+1.2%', color: '#a78bfa', icon: Zap },
+        ].map(kpi => (
+          <div key={kpi.label} className="card p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-7 h-7 rounded-lg flex items-center justify-center"
+                style={{ background: `${kpi.color}15` }}>
+                <kpi.icon size={13} style={{ color: kpi.color }} />
+              </div>
+              <span className="text-xs text-slate-500">{kpi.label}</span>
+            </div>
+            <div className="text-2xl font-bold text-white">{kpi.value}</div>
+            <div className="text-xs mt-1 font-semibold text-green-400">{kpi.delta} vs last week</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {/* Tasks Chart */}
+        <div className="card p-5">
+          <h3 className="text-sm font-bold text-white mb-4">Weekly Task Completion</h3>
+          <ResponsiveContainer width="100%" height={180}>
+            <AreaChart data={WEEKLY_DATA}>
+              <defs>
+                <linearGradient id="taskGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#7c3aed" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#7c3aed" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <XAxis dataKey="day" tick={{ fill: '#475569', fontSize: 11 }} axisLine={false} tickLine={false} />
+              <YAxis tick={{ fill: '#475569', fontSize: 11 }} axisLine={false} tickLine={false} />
+              <Tooltip contentStyle={customTooltipStyle} />
+              <Area type="monotone" dataKey="tasks" stroke="#8b5cf6" strokeWidth={2} fill="url(#taskGrad)" />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Efficiency Chart */}
+        <div className="card p-5">
+          <h3 className="text-sm font-bold text-white mb-4">Agent Efficiency Scores</h3>
+          <ResponsiveContainer width="100%" height={180}>
+            <BarChart data={AGENT_PERF} barSize={28}>
+              <XAxis dataKey="name" tick={{ fill: '#475569', fontSize: 11 }} axisLine={false} tickLine={false} />
+              <YAxis domain={[80, 100]} tick={{ fill: '#475569', fontSize: 11 }} axisLine={false} tickLine={false} />
+              <Tooltip contentStyle={customTooltipStyle} />
+              <Bar dataKey="success" fill="#22d3ee" radius={[4, 4, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Agent Performance Table */}
+      <div className="card p-5">
+        <h3 className="text-sm font-bold text-white mb-4">Agent Performance Breakdown</h3>
+        <div className="space-y-3">
+          {AGENT_PERF.map(agent => (
+            <div key={agent.name} className="flex items-center gap-4">
+              <span className="text-sm text-slate-400 w-24">{agent.name}</span>
+              <div className="flex-1 progress-bar">
+                <motion.div className="progress-fill"
+                  initial={{ width: 0 }} animate={{ width: `${agent.success}%` }}
+                  transition={{ duration: 1 }}
+                  style={{ background: 'linear-gradient(90deg, #7c3aed60, #22d3ee)' }} />
+              </div>
+              <span className="text-xs font-bold text-white w-12 text-right">{agent.success}%</span>
+              <span className="text-xs text-slate-600 w-16 text-right">{agent.tasks} tasks</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/pages/DashboardPage.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Bot, CheckSquare, Clock, TrendingUp, ChevronRight } from 'lucide-react'
+import MetricCard from '@/components/dashboard/MetricCard'
+import AgentFleetCard from '@/components/dashboard/AgentFleetCard'
+import ActivityFeed from '@/components/dashboard/ActivityFeed'
+import SystemResources from '@/components/dashboard/SystemResources'
+import MissionInput from '@/components/dashboard/MissionInput'
+import GodModeCard from '@/components/dashboard/GodModeCard'
+import { useAppStore, AGENTS } from '@/store/useAppStore'
+import CommandCenter from '@/components/dashboard/CommandCenter'
+
+const METRICS = [
+  { label: 'Total Agents', value: 12, trend: '+2 this week', trendUp: true, icon: <Bot size={18} />, iconColor: '#6366f1' },
+  { label: 'Tasks Completed', value: 247, trend: '+37% this week', trendUp: true, icon: <CheckSquare size={18} />, iconColor: '#22c55e' },
+  { label: 'Time Saved', value: 128, unit: 'h', trend: '+55% this week', trendUp: true, icon: <Clock size={18} />, iconColor: '#22d3ee' },
+  { label: 'Success Rate', value: '98.6', unit: '%', trend: '1.2% this week', trendUp: true, icon: <TrendingUp size={18} />, iconColor: '#a78bfa' },
+]
+
+export default function DashboardPage() {
+  const { setCurrentPage } = useAppStore()
+  const featuredAgents = AGENTS.slice(0, 6)
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full">
+        {/* Main content */}
+        <div className="flex-1 min-w-0 p-6 overflow-y-auto">
+
+          {/* Welcome Header */}
+          <motion.div initial={{ opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} className="mb-6">
+            <h1 className="text-2xl font-bold text-white">
+              Welcome back, <span className="gradient-text-purple">Creator.</span>
+            </h1>
+            <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+              Where Intelligence, Autonomy and Execution become{' '}
+              <span className="gradient-text font-semibold">Divine.</span>
+            </p>
+          </motion.div>
+
+          {/* Metrics Row */}
+          <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
+            {METRICS.map((m, i) => (
+              <MetricCard key={m.label} {...m} delay={i * 0.06} />
+            ))}
+          </div>
+
+          {/* Mission Input */}
+          <div className="mb-6">
+            <MissionInput />
+          </div>
+
+          {/* Agent Fleet */}
+          <div className="mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-sm font-bold text-white">Agent Fleet</h2>
+                <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>Manage your autonomous workforce</p>
+              </div>
+              <button onClick={() => setCurrentPage('agents')}
+                className="flex items-center gap-1 text-xs font-medium text-purple-400 hover:text-purple-300 transition-colors">
+                View all agents <ChevronRight size={13} />
+              </button>
+            </div>
+            <div className="grid grid-cols-2 xl:grid-cols-3 gap-3">
+              {featuredAgents.map((agent, i) => (
+                <AgentFleetCard key={agent.id} agent={agent} delay={0.1 + i * 0.05}
+                  onClick={() => setCurrentPage('agents')} />
+              ))}
+            </div>
+          </div>
+
+          {/* Command Center */}
+          <CommandCenter />
+        </div>
+
+        {/* Right Panel */}
+        <div className="w-72 xl:w-80 flex-shrink-0 border-l p-4 space-y-4 overflow-y-auto hide-lg"
+          style={{ borderColor: 'var(--border)' }}>
+
+          <GodModeCard />
+
+          {/* Recent Activity */}
+          <div className="card p-4">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-sm font-bold text-white">Recent Activity</h3>
+              <button className="text-xs text-purple-400 hover:text-purple-300 transition-colors">View all</button>
+            </div>
+            <ActivityFeed max={5} />
+          </div>
+
+          {/* System Resources */}
+          <div className="card p-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-sm font-bold text-white">System Resources</h3>
+              <button className="text-xs text-purple-400 hover:text-purple-300 transition-colors">Details</button>
+            </div>
+            <SystemResources />
+          </div>
+
+          {/* Branding Footer */}
+          <div className="px-1 py-2 text-center">
+            <div className="text-xs font-bold text-slate-600 mb-0.5">manus + genspark</div>
+            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>
+              Human Creativity × AI Capability = Divine Impact
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/pages/KnowledgePage.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { BookOpen, FileText, Globe, Code2, BarChart3, Search, Plus } from 'lucide-react'
+
+const KNOWLEDGE_BASES = [
+  { id: 1, name: 'Product Documentation', desc: 'Internal product specs and API docs', docs: 342, icon: FileText, color: '#6366f1', updated: '1h ago' },
+  { id: 2, name: 'Market Intelligence', desc: 'Industry reports and competitor analysis', docs: 87, icon: Globe, color: '#22d3ee', updated: '2h ago' },
+  { id: 3, name: 'Codebase Knowledge', desc: 'Source code patterns and architecture', docs: 1240, icon: Code2, color: '#34d399', updated: '30m ago' },
+  { id: 4, name: 'Analytics Data', desc: 'Historical metrics and performance data', docs: 512, icon: BarChart3, color: '#a78bfa', updated: '15m ago' },
+  { id: 5, name: 'Research Library', desc: 'Academic papers and research synthesis', docs: 234, icon: BookOpen, color: '#f59e0b', updated: '3h ago' },
+]
+
+export default function KnowledgePage() {
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-bold text-white flex items-center gap-2">
+            <BookOpen size={22} className="text-purple-400" /> Knowledge Base
+          </h1>
+          <p className="text-sm mt-1 text-slate-500">2,415 documents indexed across 5 knowledge bases</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+            <input placeholder="Search knowledge…" className="cmd-input pl-9 pr-4 py-2.5 text-sm w-56" />
+          </div>
+          <button className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white hover:opacity-90 transition-all"
+            style={{ background: 'linear-gradient(135deg, #7c3aed, #4f46e5)', boxShadow: '0 0 20px rgba(124,58,237,0.3)' }}>
+            <Plus size={15} /> Add Source
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+        {KNOWLEDGE_BASES.map((kb, i) => (
+          <motion.div key={kb.id} initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.07 }} className="card p-5 cursor-pointer group relative overflow-hidden">
+            <div className="absolute top-0 left-0 right-0 h-[2px]"
+              style={{ background: `linear-gradient(90deg, ${kb.color}, transparent)` }} />
+
+            <div className="flex items-start gap-4 mb-4">
+              <div className="w-11 h-11 rounded-2xl flex items-center justify-center flex-shrink-0"
+                style={{ background: `${kb.color}15`, border: `1px solid ${kb.color}25` }}>
+                <kb.icon size={18} style={{ color: kb.color }} />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-white group-hover:text-purple-300 transition-colors">{kb.name}</h3>
+                <p className="text-xs mt-1 text-slate-500">{kb.desc}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs text-slate-500">Documents</span>
+              <span className="text-xs font-bold text-white">{kb.docs.toLocaleString()}</span>
+            </div>
+            <div className="progress-bar mb-3">
+              <div className="progress-fill" style={{ width: `${Math.min(100, kb.docs / 15)}%`, background: `linear-gradient(90deg, ${kb.color}50, ${kb.color})` }} />
+            </div>
+            <div className="text-xs text-slate-600">Updated {kb.updated}</div>
+          </motion.div>
+        ))}
+
+        {/* Add Knowledge Base Card */}
+        <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: KNOWLEDGE_BASES.length * 0.07 }}
+          className="card p-5 cursor-pointer group flex flex-col items-center justify-center min-h-[160px] border-dashed"
+          style={{ borderStyle: 'dashed', borderColor: 'rgba(124,58,237,0.2)', background: 'rgba(124,58,237,0.03)' }}>
+          <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"
+            style={{ background: 'rgba(124,58,237,0.1)', border: '1px solid rgba(124,58,237,0.2)' }}>
+            <Plus size={18} className="text-purple-400" />
+          </div>
+          <span className="text-sm font-medium text-purple-400 group-hover:text-purple-300">Add Knowledge Base</span>
+          <span className="text-xs text-slate-600 mt-1">Connect a new data source</span>
+        </motion.div>
+      </div>
+    </div>
+  )
+}

frontend/components/pages/MemoryPage.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Brain, Database, Clock, Search, Tag } from 'lucide-react'
+
+const MEMORIES = [
+  { id: 1, title: 'Market Research — SaaS Competitors Q4', tags: ['research', 'market'], date: '2h ago', size: '48 KB', type: 'document', color: '#6366f1' },
+  { id: 2, title: 'API Authentication Module Design', tags: ['code', 'architecture'], date: '5h ago', size: '12 KB', type: 'code', color: '#34d399' },
+  { id: 3, title: 'Product Positioning Statement v3', tags: ['content', 'strategy'], date: '1d ago', size: '8 KB', type: 'text', color: '#a78bfa' },
+  { id: 4, title: 'Database Schema — Users & Sessions', tags: ['code', 'database'], date: '2d ago', size: '22 KB', type: 'code', color: '#22d3ee' },
+  { id: 5, title: 'Brand Voice Guidelines 2025', tags: ['content', 'brand'], date: '3d ago', size: '35 KB', type: 'document', color: '#f472b6' },
+  { id: 6, title: 'Competitor Analysis Matrix', tags: ['research', 'strategy'], date: '4d ago', size: '61 KB', type: 'document', color: '#f59e0b' },
+]
+
+export default function MemoryPage() {
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-bold text-white flex items-center gap-2">
+            <Brain size={22} className="text-purple-400" /> Memory
+          </h1>
+          <p className="text-sm mt-1 text-slate-500">Persistent knowledge storage · 4,200 indexed documents</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+            <input placeholder="Search memories…" className="cmd-input pl-9 pr-4 py-2.5 text-sm w-56" />
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        {[
+          { label: 'Total Memories', value: '4,200', icon: Database, color: '#6366f1' },
+          { label: 'Storage Used', value: '2.4 GB', icon: Database, color: '#22d3ee' },
+          { label: 'Last Indexed', value: '3m ago', icon: Clock, color: '#a78bfa' },
+        ].map(stat => (
+          <div key={stat.label} className="card p-4 flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0"
+              style={{ background: `${stat.color}15` }}>
+              <stat.icon size={16} style={{ color: stat.color }} />
+            </div>
+            <div>
+              <div className="text-lg font-bold text-white">{stat.value}</div>
+              <div className="text-xs text-slate-500">{stat.label}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Memory Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3">
+        {MEMORIES.map((m, i) => (
+          <motion.div key={m.id} initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.06 }} className="card p-4 cursor-pointer group">
+            <div className="flex items-start gap-3 mb-3">
+              <div className="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0"
+                style={{ background: `${m.color}15`, border: `1px solid ${m.color}20` }}>
+                <Database size={14} style={{ color: m.color }} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="text-sm font-semibold text-white leading-snug line-clamp-2 group-hover:text-purple-300 transition-colors">
+                  {m.title}
+                </h3>
+                <div className="flex items-center gap-2 mt-1 text-xs text-slate-600">
+                  <Clock size={10} /> {m.date} · {m.size}
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {m.tags.map(tag => (
+                <span key={tag} className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full"
+                  style={{ background: `${m.color}10`, color: m.color, border: `1px solid ${m.color}20` }}>
+                  <Tag size={9} /> {tag}
+                </span>
+              ))}
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/components/pages/SettingsPage.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { Settings, Key, Zap, Bell, Shield, Cpu, ChevronRight, Check, Eye, EyeOff } from 'lucide-react'
+
+const PROVIDER_CONFIGS = [
+  { name: 'Gemini', model: 'gemini-2.0-flash', status: 'active', color: '#22d3ee', keys: 6, type: 'Primary' },
+  { name: 'Sambanova', model: 'Meta-Llama-3.3-70B', status: 'active', color: '#a78bfa', keys: 9, type: 'Primary' },
+  { name: 'GitHub Models', model: 'gpt-4o', status: 'active', color: '#34d399', keys: 9, type: 'Primary' },
+]
+
+const SETTING_SECTIONS = [
+  { id: 'providers', label: 'AI Providers', icon: Cpu },
+  { id: 'keys', label: 'API Keys', icon: Key },
+  { id: 'notifications', label: 'Notifications', icon: Bell },
+  { id: 'security', label: 'Security', icon: Shield },
+]
+
+function ApiKeyField({ label, value, color }: { label: string; value: string; color: string }) {
+  const [show, setShow] = useState(false)
+  const display = show ? value : value.slice(0, 8) + '••••••••••••••••' + value.slice(-4)
+  return (
+    <div className="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/[0.02] transition-colors" style={{ border: '1px solid rgba(255,255,255,0.06)' }}>
+      <div className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: color }} />
+      <span className="text-sm text-slate-400 w-28 flex-shrink-0">{label}</span>
+      <code className="text-xs flex-1 text-slate-300 font-mono">{display}</code>
+      <button onClick={() => setShow(!show)} className="text-slate-600 hover:text-slate-400 transition-colors">
+        {show ? <EyeOff size={14} /> : <Eye size={14} />}
+      </button>
+    </div>
+  )
+}
+
+export default function SettingsPage() {
+  const [activeSection, setActiveSection] = useState('providers')
+  const [godModeToggle, setGodModeToggle] = useState(true)
+  const [autoRotate, setAutoRotate] = useState(true)
+  const [streamMode, setStreamMode] = useState(true)
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="mb-6">
+        <h1 className="text-xl font-bold text-white flex items-center gap-2">
+          <Settings size={22} className="text-purple-400" /> Settings
+        </h1>
+        <p className="text-sm mt-1 text-slate-500">Configure God Agent OS — AI providers, keys, and preferences</p>
+      </div>
+
+      <div className="flex gap-6">
+        {/* Sidebar Nav */}
+        <div className="w-48 flex-shrink-0 space-y-1">
+          {SETTING_SECTIONS.map(sec => (
+            <button key={sec.id} onClick={() => setActiveSection(sec.id)}
+              className={`nav-item w-full text-left ${activeSection === sec.id ? 'active' : ''}`}>
+              <sec.icon size={15} />
+              {sec.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0 space-y-4">
+
+          {activeSection === 'providers' && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <h2 className="text-sm font-bold text-white mb-4">AI Provider Configuration</h2>
+
+              <div className="space-y-3 mb-6">
+                {PROVIDER_CONFIGS.map(p => (
+                  <div key={p.name} className="card p-4 flex items-center gap-4">
+                    <div className="w-10 h-10 rounded-xl flex items-center justify-center text-lg flex-shrink-0"
+                      style={{ background: `${p.color}15`, border: `1px solid ${p.color}25` }}>
+                      <Cpu size={16} style={{ color: p.color }} />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-semibold text-white text-sm">{p.name}</span>
+                        <span className="text-xs px-2 py-0.5 rounded-full font-semibold"
+                          style={{ background: `${p.color}15`, color: p.color }}>{p.type}</span>
+                      </div>
+                      <div className="text-xs text-slate-500 mt-0.5">{p.model} · {p.keys} keys configured</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="w-2 h-2 rounded-full bg-green-400" />
+                      <span className="text-xs text-green-400 font-medium">Active</span>
+                      <Check size={14} className="text-green-400" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Toggle settings */}
+              <div className="space-y-3">
+                {[
+                  { label: 'God Mode', desc: 'Full autonomous operation mode', state: godModeToggle, toggle: setGodModeToggle, color: '#a78bfa' },
+                  { label: 'Auto-Rotate Keys', desc: 'Automatically rotate API keys on rate limit', state: autoRotate, toggle: setAutoRotate, color: '#22d3ee' },
+                  { label: 'Stream Mode', desc: 'Real-time streaming output from all providers', state: streamMode, toggle: setStreamMode, color: '#34d399' },
+                ].map(item => (
+                  <div key={item.label} className="card p-4 flex items-center gap-4">
+                    <div className="flex-1">
+                      <div className="text-sm font-semibold text-white">{item.label}</div>
+                      <div className="text-xs text-slate-500 mt-0.5">{item.desc}</div>
+                    </div>
+                    <button onClick={() => item.toggle(!item.state)}
+                      className="w-10 h-5.5 rounded-full relative transition-all flex-shrink-0"
+                      style={{
+                        background: item.state ? item.color : 'rgba(255,255,255,0.1)',
+                        width: 44, height: 24
+                      }}>
+                      <div className="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-all"
+                        style={{ left: item.state ? 21 : 2 }} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+
+          {activeSection === 'keys' && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <h2 className="text-sm font-bold text-white mb-4">API Key Management</h2>
+              <div className="card p-5 space-y-2">
+                <ApiKeyField label="Gemini Key 1" value="GEMINI_KEY_1_CONFIGURED" color="#22d3ee" />
+                <ApiKeyField label="Gemini Key 2" value="GEMINI_KEY_2_CONFIGURED" color="#22d3ee" />
+                <ApiKeyField label="Sambanova Key 1" value="SAMBANOVA_KEY_1_CONFIGURED" color="#a78bfa" />
+                <ApiKeyField label="GitHub Key 1" value="GITHUB_KEY_1_CONFIGURED" color="#34d399" />
+              </div>
+              <p className="text-xs text-slate-600 mt-3">Keys are stored securely in environment variables. Never commit to version control.</p>
+            </motion.div>
+          )}
+
+          {activeSection === 'notifications' && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <h2 className="text-sm font-bold text-white mb-4">Notification Preferences</h2>
+              <div className="card p-5">
+                <p className="text-sm text-slate-500">Configure notification settings for agent activity, task completion, and system alerts.</p>
+              </div>
+            </motion.div>
+          )}
+
+          {activeSection === 'security' && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <h2 className="text-sm font-bold text-white mb-4">Security Settings</h2>
+              <div className="card p-5">
+                <p className="text-sm text-slate-500">Manage authentication, access control, and audit logging.</p>
+              </div>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/pages/TasksPage.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { CheckSquare, Clock, Loader2, AlertCircle, Plus, ChevronRight } from 'lucide-react'
+import { TASKS, Task } from '@/store/useAppStore'
+import { cn } from '@/lib/utils'
+
+const STATUS_CONFIG = {
+  running:   { color: '#6366f1', label: 'Running',   icon: Loader2,     bg: 'rgba(99,102,241,0.12)' },
+  completed: { color: '#22c55e', label: 'Completed', icon: CheckSquare, bg: 'rgba(34,197,94,0.12)' },
+  pending:   { color: '#94a3b8', label: 'Pending',   icon: Clock,       bg: 'rgba(148,163,184,0.1)' },
+  failed:    { color: '#ef4444', label: 'Failed',    icon: AlertCircle, bg: 'rgba(239,68,68,0.12)' },
+}
+
+function TaskRow({ task, delay }: { task: Task; delay: number }) {
+  const cfg = STATUS_CONFIG[task.status]
+  const Icon = cfg.icon
+  const isRunning = task.status === 'running'
+  const agentColor = '#6366f1'
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: -12 }} animate={{ opacity: 1, x: 0 }}
+      transition={{ delay, duration: 0.3 }}
+      className="card p-4 group hover:border-white/10 transition-all cursor-pointer"
+    >
+      <div className="flex items-center gap-4">
+        <div className="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0"
+          style={{ background: cfg.bg }}>
+          <Icon size={14} style={{ color: cfg.color }} className={isRunning ? 'animate-spin' : ''} />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-sm font-semibold text-white truncate">{task.title}</span>
+            <span className="text-xs px-2 py-0.5 rounded-full flex-shrink-0 font-medium"
+              style={{ background: cfg.bg, color: cfg.color }}>{cfg.label}</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-slate-500">{task.agent}</span>
+            <span className="text-xs text-slate-600">· {task.createdAt}</span>
+            {task.completedAt && <span className="text-xs text-green-500">Completed {task.completedAt}</span>}
+          </div>
+          {task.status === 'running' && (
+            <div className="mt-2 flex items-center gap-2">
+              <div className="flex-1 progress-bar">
+                <motion.div className="progress-fill"
+                  initial={{ width: 0 }} animate={{ width: `${task.progress}%` }}
+                  transition={{ duration: 1, delay: 0.2 }}
+                  style={{ background: 'linear-gradient(90deg, #6366f160, #6366f1)' }} />
+              </div>
+              <span className="text-xs font-bold text-purple-400 w-8 text-right">{task.progress}%</span>
+            </div>
+          )}
+        </div>
+
+        <ChevronRight size={15} className="text-slate-700 group-hover:text-purple-400 transition-colors flex-shrink-0" />
+      </div>
+    </motion.div>
+  )
+}
+
+export default function TasksPage() {
+  const [filter, setFilter] = useState<'all' | Task['status']>('all')
+  const filtered = filter === 'all' ? TASKS : TASKS.filter(t => t.status === filter)
+
+  const counts = {
+    all: TASKS.length,
+    running: TASKS.filter(t => t.status === 'running').length,
+    completed: TASKS.filter(t => t.status === 'completed').length,
+    pending: TASKS.filter(t => t.status === 'pending').length,
+    failed: TASKS.filter(t => t.status === 'failed').length,
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-bold text-white flex items-center gap-2">
+            <CheckSquare size={22} className="text-purple-400" /> Tasks
+          </h1>
+          <p className="text-sm mt-1 text-slate-500">{counts.running} running · {counts.pending} pending · {counts.completed} completed</p>
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white hover:opacity-90 transition-all"
+          style={{ background: 'linear-gradient(135deg, #7c3aed, #4f46e5)', boxShadow: '0 0 20px rgba(124,58,237,0.3)' }}>
+          <Plus size={15} /> New Task
+        </button>
+      </div>
+
+      {/* Status Tabs */}
+      <div className="flex gap-2 mb-6 flex-wrap">
+        {(['all', 'running', 'completed', 'pending', 'failed'] as const).map(s => (
+          <button key={s} onClick={() => setFilter(s)}
+            className={cn('px-4 py-2 rounded-xl text-xs font-semibold capitalize transition-all',
+              filter === s
+                ? 'bg-purple-600/20 text-purple-300 border border-purple-500/30'
+                : 'text-slate-500 border border-transparent hover:border-white/10 hover:text-slate-300'
+            )}>
+            {s} ({counts[s]})
+          </button>
+        ))}
+      </div>
+
+      {/* Summary Stats */}
+      <div className="grid grid-cols-4 gap-4 mb-6">
+        {Object.entries(STATUS_CONFIG).map(([status, cfg]) => (
+          <div key={status} className="card p-4">
+            <div className="text-2xl font-bold text-white">{counts[status as keyof typeof counts] || 0}</div>
+            <div className="text-xs mt-1 font-semibold" style={{ color: cfg.color }}>{cfg.label}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Tasks List */}
+      <div className="space-y-3">
+        {filtered.map((task, i) => <TaskRow key={task.id} task={task} delay={i * 0.05} />)}
+        {filtered.length === 0 && (
+          <div className="text-center py-16 text-slate-600">No tasks with this filter</div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/components/pages/WorkflowsPage.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { GitBranch, Play, Pause, Plus, Clock, CheckCircle2, Zap } from 'lucide-react'
+
+const WORKFLOWS = [
+  { id: 1, name: 'Daily Research Pipeline', desc: 'Research → Analyze → Summarize → Report', status: 'active', runs: 47, lastRun: '2h ago', color: '#6366f1', schedule: 'Daily 9:00 AM' },
+  { id: 2, name: 'Code Review Automation', desc: 'PR Detect → AI Review → Comment → Approve', status: 'active', runs: 23, lastRun: '1h ago', color: '#34d399', schedule: 'On PR event' },
+  { id: 3, name: 'Content Generation Loop', desc: 'Research → Write → Review → Publish', status: 'paused', runs: 12, lastRun: '1d ago', color: '#a78bfa', schedule: 'Weekly' },
+  { id: 4, name: 'Deploy Pipeline', desc: 'Build → Test → Stage → Deploy → Monitor', status: 'active', runs: 89, lastRun: '30m ago', color: '#22d3ee', schedule: 'On push to main' },
+  { id: 5, name: 'Market Intelligence', desc: 'Scrape → Parse → Analyze → Alert', status: 'idle', runs: 7, lastRun: '3d ago', color: '#f59e0b', schedule: 'Weekly' },
+]
+
+const STATUS_CONFIG = {
+  active: { color: '#22c55e', label: 'Active' },
+  paused: { color: '#f59e0b', label: 'Paused' },
+  idle:   { color: '#94a3b8', label: 'Idle' },
+}
+
+export default function WorkflowsPage() {
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-bold text-white flex items-center gap-2">
+            <GitBranch size={22} className="text-purple-400" /> Workflows
+          </h1>
+          <p className="text-sm mt-1 text-slate-500">Autonomous multi-agent pipelines · {WORKFLOWS.filter(w => w.status === 'active').length} running</p>
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white hover:opacity-90 transition-all"
+          style={{ background: 'linear-gradient(135deg, #7c3aed, #4f46e5)', boxShadow: '0 0 20px rgba(124,58,237,0.3)' }}>
+          <Plus size={15} /> New Workflow
+        </button>
+      </div>
+
+      <div className="space-y-3">
+        {WORKFLOWS.map((wf, i) => {
+          const sc = STATUS_CONFIG[wf.status as keyof typeof STATUS_CONFIG]
+          return (
+            <motion.div key={wf.id} initial={{ opacity: 0, x: -12 }} animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: i * 0.07 }} className="card p-5 group cursor-pointer">
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
+                  style={{ background: `${wf.color}15`, border: `1px solid ${wf.color}25` }}>
+                  <GitBranch size={18} style={{ color: wf.color }} />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-semibold text-white">{wf.name}</h3>
+                    <span className="text-xs px-2 py-0.5 rounded-full font-medium"
+                      style={{ background: `${sc.color}12`, color: sc.color }}>
+                      {sc.label}
+                    </span>
+                  </div>
+                  <p className="text-xs text-slate-500 font-mono">{wf.desc}</p>
+                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-600">
+                    <span className="flex items-center gap-1"><Zap size={10} /> {wf.runs} runs</span>
+                    <span className="flex items-center gap-1"><Clock size={10} /> {wf.lastRun}</span>
+                    <span>{wf.schedule}</span>
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <button className="w-8 h-8 rounded-xl flex items-center justify-center transition-all hover:bg-white/10"
+                    style={{ border: '1px solid rgba(255,255,255,0.08)' }}>
+                    {wf.status === 'active' ? <Pause size={13} className="text-slate-400" /> : <Play size={13} className="text-green-400" />}
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

frontend/components/shared/Sidebar.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+  LayoutDashboard, Bot, CheckSquare, Brain, BookOpen,
+  GitBranch, BarChart3, Settings, ChevronLeft, Zap,
+  Activity, Menu, X
+} from 'lucide-react'
+import { useAppStore, NavPage } from '@/store/useAppStore'
+import { cn } from '@/lib/utils'
+
+const NAV_ITEMS: { page: NavPage; label: string; icon: React.ElementType; badge?: string }[] = [
+  { page: 'dashboard',  label: 'Dashboard',  icon: LayoutDashboard },
+  { page: 'agents',     label: 'Agents',     icon: Bot, badge: '12' },
+  { page: 'tasks',      label: 'Tasks',      icon: CheckSquare, badge: '3' },
+  { page: 'memory',     label: 'Memory',     icon: Brain },
+  { page: 'knowledge',  label: 'Knowledge',  icon: BookOpen },
+  { page: 'workflows',  label: 'Workflows',  icon: GitBranch },
+  { page: 'analytics',  label: 'Analytics',  icon: BarChart3 },
+  { page: 'settings',   label: 'Settings',   icon: Settings },
+]
+
+export default function Sidebar() {
+  const { currentPage, setCurrentPage, sidebarCollapsed, toggleSidebar, godModeActive, toggleGodMode } = useAppStore()
+
+  return (
+    <motion.aside
+      animate={{ width: sidebarCollapsed ? 64 : 220 }}
+      transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+      className="flex flex-col h-full flex-shrink-0 border-r overflow-hidden"
+      style={{ borderColor: 'var(--border)', background: 'rgba(10,12,22,0.95)', backdropFilter: 'blur(20px)' }}
+    >
+      {/* Logo */}
+      <div className="flex items-center gap-3 px-4 py-5 border-b" style={{ borderColor: 'var(--border)' }}>
+        <div className="relative flex-shrink-0">
+          <div className="w-8 h-8 rounded-xl flex items-center justify-center glow-purple"
+            style={{ background: 'linear-gradient(135deg, #7c3aed, #4f46e5)' }}>
+            <Zap size={16} className="text-white" />
+          </div>
+          {godModeActive && (
+            <div className="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-green-400 border-2 border-[#0a0c16]" />
+          )}
+        </div>
+        <AnimatePresence>
+          {!sidebarCollapsed && (
+            <motion.div
+              initial={{ opacity: 0, x: -8 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -8 }}
+              transition={{ duration: 0.2 }}
+              className="min-w-0"
+            >
+              <div className="text-sm font-bold text-white leading-none">GOD AGENT OS</div>
+              <div className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>by manus + genspark</div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <button
+          onClick={toggleSidebar}
+          className="ml-auto text-slate-500 hover:text-slate-300 transition-colors flex-shrink-0"
+        >
+          {sidebarCollapsed ? <Menu size={16} /> : <ChevronLeft size={16} />}
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
+        {NAV_ITEMS.map(({ page, label, icon: Icon, badge }) => {
+          const isActive = currentPage === page
+          return (
+            <button
+              key={page}
+              onClick={() => setCurrentPage(page)}
+              className={cn(
+                'nav-item w-full text-left relative group',
+                isActive && 'active'
+              )}
+              title={sidebarCollapsed ? label : undefined}
+            >
+              <Icon size={17} className="flex-shrink-0" style={{ color: isActive ? '#a78bfa' : undefined }} />
+              <AnimatePresence>
+                {!sidebarCollapsed && (
+                  <motion.span
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="flex-1 text-left"
+                  >
+                    {label}
+                  </motion.span>
+                )}
+              </AnimatePresence>
+              {badge && !sidebarCollapsed && (
+                <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full font-semibold"
+                  style={{ background: isActive ? 'rgba(124,58,237,0.3)' : 'rgba(255,255,255,0.07)', color: isActive ? '#c084fc' : 'var(--text-muted)' }}>
+                  {badge}
+                </span>
+              )}
+            </button>
+          )
+        })}
+      </nav>
+
+      {/* System Status */}
+      <div className="px-2 pb-2">
+        <div className="border-t mb-2" style={{ borderColor: 'var(--border)' }} />
+        {!sidebarCollapsed && (
+          <div className="px-2 mb-2">
+            <div className="flex items-center gap-2 mb-1">
+              <Activity size={11} className="text-green-400" />
+              <span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>System Status</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse-glow" />
+              <span className="text-xs text-green-400 font-medium">All Systems Operational</span>
+            </div>
+          </div>
+        )}
+
+        {/* God Mode Toggle */}
+        <div className={cn(
+          'flex items-center gap-2 px-2 py-2 rounded-xl cursor-pointer transition-all',
+          sidebarCollapsed ? 'justify-center' : '',
+          godModeActive ? 'glass-purple' : 'glass'
+        )} onClick={toggleGodMode}>
+          <div className={cn('w-6 h-3.5 rounded-full relative transition-all flex-shrink-0',
+            godModeActive ? 'bg-purple-600' : 'bg-slate-700'
+          )}>
+            <div className={cn('absolute top-0.5 w-2.5 h-2.5 rounded-full transition-all',
+              godModeActive ? 'right-0.5 bg-white' : 'left-0.5 bg-slate-400'
+            )} />
+          </div>
+          {!sidebarCollapsed && (
+            <span className="text-xs font-semibold" style={{ color: godModeActive ? '#a78bfa' : 'var(--text-muted)' }}>
+              God Mode {godModeActive ? 'ON' : 'OFF'}
+            </span>
+          )}
+        </div>
+      </div>
+    </motion.aside>
+  )
+}

frontend/components/shared/TopBar.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Search, Bell, Command, Sparkles, X, ArrowRight, Bot, CheckSquare, FileText, Zap } from 'lucide-react'
+import { useAppStore } from '@/store/useAppStore'
+
+const QUICK_COMMANDS = [
+  { icon: Bot,       label: 'New Research Task',         shortcut: '/research',       page: 'agents' as const },
+  { icon: CheckSquare, label: 'View Running Tasks',      shortcut: '/tasks',          page: 'tasks' as const },
+  { icon: FileText,  label: 'Generate Report',           shortcut: '/report',         page: 'analytics' as const },
+  { icon: Zap,       label: 'Deploy Application',        shortcut: '/deploy',         page: 'workflows' as const },
+]
+
+const NOTIFICATIONS = [
+  { id: '1', title: 'Code Agent', message: 'Successfully deployed production API', time: '2m ago', color: '#34d399' },
+  { id: '2', title: 'Research Agent', message: 'Market analysis complete — 47 insights found', time: '15m ago', color: '#6366f1' },
+  { id: '3', title: 'Data Agent', message: 'Processed 1.2M data points', time: '1h ago', color: '#22d3ee' },
+]
+
+export default function TopBar() {
+  const { setCurrentPage, commandPaletteOpen, setCommandPaletteOpen } = useAppStore()
+  const [query, setQuery] = useState('')
+  const [notifOpen, setNotifOpen] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setCommandPaletteOpen(true)
+        setTimeout(() => inputRef.current?.focus(), 50)
+      }
+      if (e.key === 'Escape') {
+        setCommandPaletteOpen(false)
+        setNotifOpen(false)
+        setQuery('')
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [setCommandPaletteOpen])
+
+  const filtered = QUICK_COMMANDS.filter(c =>
+    query === '' || c.label.toLowerCase().includes(query.toLowerCase()) || c.shortcut.includes(query)
+  )
+
+  return (
+    <header className="flex items-center gap-4 px-4 py-3 border-b flex-shrink-0 relative z-30"
+      style={{ borderColor: 'var(--border)', background: 'rgba(10,12,22,0.98)', backdropFilter: 'blur(20px)' }}>
+
+      {/* Search / Command Trigger */}
+      <div className="flex-1 max-w-xl mx-auto">
+        <button
+          onClick={() => { setCommandPaletteOpen(true); setTimeout(() => inputRef.current?.focus(), 50) }}
+          className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-left transition-all hover:border-purple-500/30"
+          style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}
+        >
+          <Search size={15} className="text-slate-500 flex-shrink-0" />
+          <span className="flex-1 text-sm" style={{ color: 'var(--text-muted)' }}>Search agents, tasks, docs…</span>
+          <div className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-md"
+            style={{ background: 'rgba(255,255,255,0.06)', color: 'var(--text-muted)' }}>
+            <Command size={10} />
+            <span>K</span>
+          </div>
+        </button>
+      </div>
+
+      {/* Right Icons */}
+      <div className="flex items-center gap-2">
+        <button className="p-2 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-white/5 transition-all">
+          <Sparkles size={17} />
+        </button>
+
+        {/* Notifications */}
+        <div className="relative">
+          <button
+            onClick={() => setNotifOpen(!notifOpen)}
+            className="relative p-2 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-white/5 transition-all"
+          >
+            <Bell size={17} />
+            <div className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-purple-500 border border-[#0a0c16]" />
+          </button>
+
+          <AnimatePresence>
+            {notifOpen && (
+              <motion.div
+                initial={{ opacity: 0, y: 8, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 8, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                className="absolute right-0 top-full mt-2 w-80 glass-card overflow-hidden z-50"
+              >
+                <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: 'var(--border)' }}>
+                  <span className="text-sm font-semibold text-white">Notifications</span>
+                  <button onClick={() => setNotifOpen(false)} className="text-slate-500 hover:text-slate-300">
+                    <X size={14} />
+                  </button>
+                </div>
+                {NOTIFICATIONS.map((n) => (
+                  <div key={n.id} className="flex gap-3 px-4 py-3 hover:bg-white/[0.03] transition-colors cursor-pointer border-b last:border-0"
+                    style={{ borderColor: 'var(--border)' }}>
+                    <div className="w-2 h-2 rounded-full flex-shrink-0 mt-1.5" style={{ background: n.color }} />
+                    <div className="min-w-0">
+                      <div className="text-xs font-semibold text-white">{n.title}</div>
+                      <div className="text-xs mt-0.5 text-slate-400 line-clamp-1">{n.message}</div>
+                      <div className="text-xs mt-1 text-slate-600">{n.time}</div>
+                    </div>
+                  </div>
+                ))}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Avatar */}
+        <div className="w-8 h-8 rounded-full overflow-hidden border-2 cursor-pointer"
+          style={{ borderColor: 'rgba(124,58,237,0.4)', background: 'linear-gradient(135deg, #7c3aed, #4f46e5)' }}>
+          <div className="w-full h-full flex items-center justify-center text-xs font-bold text-white">A</div>
+        </div>
+      </div>
+
+      {/* Command Palette Modal */}
+      <AnimatePresence>
+        {commandPaletteOpen && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
+              onClick={() => { setCommandPaletteOpen(false); setQuery('') }}
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.96, y: -16 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.96, y: -16 }}
+              transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+              className="fixed top-[20vh] left-1/2 -translate-x-1/2 w-full max-w-lg glass-card z-50 overflow-hidden"
+            >
+              <div className="flex items-center gap-3 px-4 py-3.5 border-b" style={{ borderColor: 'var(--border)' }}>
+                <Search size={16} className="text-slate-500" />
+                <input
+                  ref={inputRef}
+                  value={query}
+                  onChange={e => setQuery(e.target.value)}
+                  placeholder="Search agents, run commands…"
+                  className="flex-1 bg-transparent text-sm text-white placeholder:text-slate-500 outline-none"
+                />
+                <button onClick={() => { setCommandPaletteOpen(false); setQuery('') }}
+                  className="text-slate-500 hover:text-slate-300 transition-colors">
+                  <X size={14} />
+                </button>
+              </div>
+              <div className="py-2 max-h-64 overflow-y-auto">
+                {filtered.map(({ icon: Icon, label, shortcut, page }) => (
+                  <button key={label}
+                    onClick={() => { setCurrentPage(page); setCommandPaletteOpen(false); setQuery('') }}
+                    className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-white/[0.04] transition-colors group">
+                    <Icon size={15} className="text-purple-400 group-hover:text-purple-300" />
+                    <span className="flex-1 text-sm text-left text-slate-300 group-hover:text-white">{label}</span>
+                    <span className="text-xs font-mono px-2 py-0.5 rounded"
+                      style={{ background: 'rgba(255,255,255,0.06)', color: 'var(--text-muted)' }}>{shortcut}</span>
+                    <ArrowRight size={13} className="text-slate-600 group-hover:text-purple-400 transition-colors" />
+                  </button>
+                ))}
+                {filtered.length === 0 && (
+                  <div className="px-4 py-6 text-center text-sm text-slate-600">No results for "{query}"</div>
+                )}
+              </div>
+              <div className="px-4 py-2 border-t flex items-center gap-4 text-xs text-slate-600"
+                style={{ borderColor: 'var(--border)' }}>
+                <span>↑↓ navigate</span>
+                <span>↵ select</span>
+                <span>esc close</span>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </header>
+  )
+}

frontend/hooks/useAgentStore.ts

@@ -9,7 +9,7 @@ import { nanoid } from './nanoid'
 export type Theme = 'dark' | 'light' | 'amoled' | 'neon' | 'glass'
 export type Locale = 'en' | 'my'
 export type AgentName = 'chat' | 'planner' | 'coding' | 'debug' | 'memory' | 'connector' | 'deploy' | 'workflow' | 'sandbox' | 'ui' | 'browser' | 'file' | 'git' | 'test' | 'vision' | 'reasoning'
-export type ActivePanel = 'timeline' | 'tasks' | 'memory' | 'connectors' | 'sandbox' | 'files' | 'browser'
+export type ActivePanel = 'timeline' | 'tasks' | 'memory' | 'connectors' | 'sandbox' | 'files' | 'browser' | 'ai_router'
 
 export interface Message {
   id: string

frontend/lib/utils.ts

@@ -0,0 +1,34 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatNumber(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return n.toString()
+}
+
+export function getStatusColor(status: string): string {
+  switch (status) {
+    case 'active': return '#22c55e'
+    case 'processing': return '#f59e0b'
+    case 'idle': return '#94a3b8'
+    case 'error': return '#ef4444'
+    case 'running': return '#6366f1'
+    case 'completed': return '#22c55e'
+    case 'pending': return '#94a3b8'
+    case 'failed': return '#ef4444'
+    default: return '#94a3b8'
+  }
+}
+
+export function getStatusLabel(status: string): string {
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+
+export function randomBetween(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}

frontend/package-lock.json

@@ -8,6 +8,13 @@
       "name": "god-mode-plus-ui",
       "version": "3.0.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "framer-motion": "^11.1.9",
@@ -58,6 +65,44 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -167,124 +212,948 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
+      "integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-context": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
+      "integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
+      "integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
-      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
+        "@radix-ui/rect": "1.1.1"
       },
-      "engines": {
-        "node": ">= 8"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
       "license": "MIT",
-      "engines": {
-        "node": ">= 8"
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+        "@radix-ui/react-primitive": "2.1.3"
       },
-      "engines": {
-        "node": ">= 8"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -490,7 +1359,7 @@
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -565,6 +1434,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
@@ -814,6 +1695,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1044,6 +1937,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -1300,6 +2199,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3182,6 +4090,75 @@
         }
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.6.6",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz",
@@ -3986,6 +4963,49 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",

frontend/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "god-mode-plus-ui",
-  "version": "3.0.0",
+  "name": "god-agent-os-ui",
+  "version": "8.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",
@@ -9,6 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.1.9",

frontend/store/useAppStore.ts

@@ -0,0 +1,131 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export type NavPage = 'dashboard' | 'agents' | 'tasks' | 'memory' | 'knowledge' | 'workflows' | 'analytics' | 'settings'
+
+export interface Agent {
+  id: string
+  name: string
+  role: string
+  status: 'active' | 'idle' | 'processing' | 'error'
+  color: string
+  icon: string
+  tasks: number
+  efficiency: number
+  uptime: number
+  lastAction: string
+  lastActionTime: string
+}
+
+export interface Task {
+  id: string
+  title: string
+  status: 'running' | 'completed' | 'pending' | 'failed'
+  agent: string
+  progress: number
+  createdAt: string
+  completedAt?: string
+}
+
+export interface ActivityItem {
+  id: string
+  agent: string
+  action: string
+  time: string
+  type: 'success' | 'processing' | 'info' | 'warning'
+  color: string
+}
+
+interface AppState {
+  // Navigation
+  currentPage: NavPage
+  sidebarCollapsed: boolean
+  commandPaletteOpen: boolean
+  godModeActive: boolean
+
+  // Data
+  agents: Agent[]
+  tasks: Task[]
+  activity: ActivityItem[]
+  metrics: {
+    totalAgents: number
+    tasksCompleted: number
+    timeSaved: number
+    successRate: number
+  }
+  systemResources: {
+    cpu: number
+    memory: number
+    storage: number
+    network: number
+  }
+
+  // Actions
+  setCurrentPage: (page: NavPage) => void
+  toggleSidebar: () => void
+  setCommandPaletteOpen: (open: boolean) => void
+  toggleGodMode: () => void
+  updateSystemResources: (resources: Partial<AppState['systemResources']>) => void
+}
+
+export const AGENTS: Agent[] = [
+  { id: '1', name: 'Research Agent', role: 'Web Intelligence', status: 'active', color: '#6366f1', icon: '🔬', tasks: 47, efficiency: 92, uptime: 99.8, lastAction: 'Completed market research analysis', lastActionTime: '2m ago' },
+  { id: '2', name: 'Data Agent', role: 'Data Processing', status: 'active', color: '#22d3ee', icon: '📊', tasks: 83, efficiency: 98, uptime: 99.5, lastAction: 'Processed 1.2M data points', lastActionTime: '12m ago' },
+  { id: '3', name: 'Content Agent', role: 'Content Generation', status: 'active', color: '#a78bfa', icon: '✍️', tasks: 31, efficiency: 95, uptime: 98.2, lastAction: 'Generated blog draft', lastActionTime: '25m ago' },
+  { id: '4', name: 'Code Agent', role: 'Software Development', status: 'active', color: '#34d399', icon: '💻', tasks: 62, efficiency: 99, uptime: 99.9, lastAction: 'Deployed production API', lastActionTime: '1h ago' },
+  { id: '5', name: 'Design Agent', role: 'UI/UX Design', status: 'active', color: '#f472b6', icon: '🎨', tasks: 24, efficiency: 90, uptime: 97.8, lastAction: 'Created UI/UX mockups', lastActionTime: '2h ago' },
+  { id: '6', name: 'Workflow Agent', role: 'Automation', status: 'processing', color: '#fb923c', icon: '⚙️', tasks: 19, efficiency: 93, uptime: 98.1, lastAction: 'Running automation pipeline', lastActionTime: 'now' },
+  { id: '7', name: 'Memory Agent', role: 'Knowledge Storage', status: 'idle', color: '#fbbf24', icon: '🧠', tasks: 156, efficiency: 97, uptime: 99.9, lastAction: 'Indexed 4,200 documents', lastActionTime: '3h ago' },
+  { id: '8', name: 'Deploy Agent', role: 'Cloud Deployment', status: 'idle', color: '#f87171', icon: '🚀', tasks: 12, efficiency: 100, uptime: 99.7, lastAction: 'Deployed to Vercel', lastActionTime: '5h ago' },
+]
+
+export const ACTIVITY: ActivityItem[] = [
+  { id: '1', agent: 'Research Agent', action: 'Completed market research analysis', time: '2m ago', type: 'success', color: '#6366f1' },
+  { id: '2', agent: 'Data Agent', action: 'Processed 1.2M data points', time: '12m ago', type: 'processing', color: '#22d3ee' },
+  { id: '3', agent: 'Content Agent', action: 'Generated blog draft', time: '25m ago', type: 'success', color: '#a78bfa' },
+  { id: '4', agent: 'Code Agent', action: 'Deployed production API', time: '1h ago', type: 'success', color: '#34d399' },
+  { id: '5', agent: 'Design Agent', action: 'Created UI/UX mockups', time: '2h ago', type: 'info', color: '#f472b6' },
+  { id: '6', agent: 'Workflow Agent', action: 'Initiated automation pipeline', time: '3h ago', type: 'processing', color: '#fb923c' },
+]
+
+export const TASKS: Task[] = [
+  { id: 't1', title: 'Analyze competitor pricing strategy', status: 'completed', agent: 'Research Agent', progress: 100, createdAt: '2h ago', completedAt: '2m ago' },
+  { id: 't2', title: 'Generate Q4 performance report', status: 'running', agent: 'Data Agent', progress: 67, createdAt: '30m ago' },
+  { id: 't3', title: 'Refactor authentication module', status: 'running', agent: 'Code Agent', progress: 45, createdAt: '1h ago' },
+  { id: 't4', title: 'Create landing page copy', status: 'pending', agent: 'Content Agent', progress: 0, createdAt: '5m ago' },
+  { id: 't5', title: 'Design system components v2', status: 'pending', agent: 'Design Agent', progress: 0, createdAt: '10m ago' },
+  { id: 't6', title: 'Set up CI/CD pipeline', status: 'completed', agent: 'Deploy Agent', progress: 100, createdAt: '5h ago', completedAt: '4h ago' },
+]
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      currentPage: 'dashboard',
+      sidebarCollapsed: false,
+      commandPaletteOpen: false,
+      godModeActive: true,
+      agents: AGENTS,
+      tasks: TASKS,
+      activity: ACTIVITY,
+      metrics: {
+        totalAgents: 12,
+        tasksCompleted: 247,
+        timeSaved: 128,
+        successRate: 98.6,
+      },
+      systemResources: {
+        cpu: 32,
+        memory: 68,
+        storage: 54,
+        network: 29,
+      },
+      setCurrentPage: (page) => set({ currentPage: page }),
+      toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+      setCommandPaletteOpen: (open) => set({ commandPaletteOpen: open }),
+      toggleGodMode: () => set((state) => ({ godModeActive: !state.godModeActive })),
+      updateSystemResources: (resources) =>
+        set((state) => ({ systemResources: { ...state.systemResources, ...resources } })),
+    }),
+    { name: 'god-agent-os-store', partialize: (s) => ({ sidebarCollapsed: s.sidebarCollapsed, godModeActive: s.godModeActive }) }
+  )
+)

frontend/tailwind.config.js

@@ -5,85 +5,68 @@ module.exports = {
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './store/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
       colors: {
-        brand: {
-          50:  '#eef2ff',
-          100: '#e0e7ff',
-          200: '#c7d2fe',
-          300: '#a5b4fc',
-          400: '#818cf8',
-          500: '#6366f1',
-          600: '#4f46e5',
-          700: '#4338ca',
-          800: '#3730a3',
-          900: '#312e81',
-        },
+        void:    '#05060d',
         surface: {
-          0:  '#0a0b0f',
-          1:  '#0f1017',
-          2:  '#13141e',
-          3:  '#1a1b26',
-          4:  '#1e2035',
-          5:  '#252640',
-          border: '#2a2b3d',
-          hover: '#2e2f4a',
-        },
-        agent: {
-          chat:      '#22d3ee',
-          planner:   '#a78bfa',
-          coding:    '#34d399',
-          debug:     '#f87171',
-          memory:    '#fbbf24',
-          connector: '#60a5fa',
-          deploy:    '#f472b6',
-          workflow:  '#fb923c',
-          sandbox:   '#4ade80',
-          ui:        '#e879f9',
+          1: '#0a0c16',
+          2: '#0e1121',
+          3: '#131729',
+          4: '#191e32',
+          5: '#1f263b',
         },
-        neon: {
-          green:  '#00ff88',
-          blue:   '#00d4ff',
-          purple: '#bf00ff',
-          pink:   '#ff0080',
+        purple: {
+          DEFAULT: '#7c3aed',
+          bright:  '#8b5cf6',
+          light:   '#a78bfa',
+          dim:     'rgba(124,58,237,0.15)',
         },
+        blue:  { DEFAULT: '#3b82f6', bright: '#60a5fa' },
+        cyan:  { DEFAULT: '#22d3ee', bright: '#67e8f9' },
+        green: { DEFAULT: '#22c55e', bright: '#4ade80' },
+        amber: { DEFAULT: '#f59e0b', bright: '#fbbf24' },
+        pink:  { DEFAULT: '#ec4899', bright: '#f472b6' },
+        neon:  { purple: '#bf00ff', blue: '#00d4ff', green: '#00ff88' },
       },
       fontFamily: {
-        mono: ['JetBrains Mono', 'Fira Code', 'Cascadia Code', 'monospace'],
         sans: ['Inter', 'system-ui', 'sans-serif'],
-        burmese: ['Pyidaungsu', 'Myanmar Text', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
       },
-      animation: {
-        'typing':        'typing 1.2s steps(3) infinite',
-        'pulse-slow':    'pulse 3s ease-in-out infinite',
-        'fade-in':       'fadeIn 0.3s ease-out',
-        'slide-up':      'slideUp 0.3s ease-out',
-        'slide-right':   'slideRight 0.25s ease-out',
-        'glow':          'glow 2s ease-in-out infinite',
-        'shimmer':       'shimmer 2s linear infinite',
-        'spin-slow':     'spin 3s linear infinite',
-        'bounce-dot':    'bounceDot 1.4s ease-in-out infinite',
+      borderRadius: {
+        '2xl': '16px',
+        '3xl': '20px',
+        '4xl': '24px',
       },
-      keyframes: {
-        typing:     { '0%,100%': { opacity: '0.2' }, '50%': { opacity: '1' } },
-        fadeIn:     { from: { opacity: '0', transform: 'translateY(4px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
-        slideUp:    { from: { opacity: '0', transform: 'translateY(12px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
-        slideRight: { from: { opacity: '0', transform: 'translateX(-12px)' }, to: { opacity: '1', transform: 'translateX(0)' } },
-        glow:       { '0%,100%': { boxShadow: '0 0 8px rgba(99,102,241,0.4)' }, '50%': { boxShadow: '0 0 20px rgba(99,102,241,0.8)' } },
-        shimmer:    { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' } },
-        bounceDot:  { '0%,80%,100%': { transform: 'scale(0)' }, '40%': { transform: 'scale(1)' } },
+      backdropBlur: { xs: '2px', sm: '8px', md: '16px', lg: '24px', xl: '40px' },
+      boxShadow: {
+        'glow-purple': '0 0 20px rgba(124,58,237,0.3), 0 0 60px rgba(124,58,237,0.1)',
+        'glow-blue':   '0 0 20px rgba(59,130,246,0.3)',
+        'glow-cyan':   '0 0 20px rgba(34,211,238,0.3)',
+        'glow-green':  '0 0 12px rgba(34,197,94,0.4)',
+        'card':        '0 4px 24px rgba(0,0,0,0.3)',
+        'card-hover':  '0 8px 40px rgba(0,0,0,0.4)',
       },
-      backgroundImage: {
-        'gradient-radial':  'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':   'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'god-gradient':     'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%)',
-        'neon-gradient':    'linear-gradient(90deg, #00ff88, #00d4ff, #bf00ff)',
-        'glass-gradient':   'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)',
+      animation: {
+        'fade-in-up':  'fadeInUp 0.4s ease-out forwards',
+        'fade-in':     'fadeIn 0.3s ease-out forwards',
+        'slide-left':  'slideInLeft 0.3s ease-out forwards',
+        'pulse-glow':  'pulseGlow 2s ease-in-out infinite',
+        'spin-slow':   'spin 8s linear infinite',
+        'orb-float':   'orbFloat 6s ease-in-out infinite',
+        'shimmer':     'shimmer 3s linear infinite',
+        'typing-dot':  'typingDot 1.4s ease-in-out infinite',
       },
-      backdropBlur: {
-        xs: '2px',
+      keyframes: {
+        fadeInUp:    { from: { opacity: '0', transform: 'translateY(12px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
+        fadeIn:      { from: { opacity: '0' }, to: { opacity: '1' } },
+        slideInLeft: { from: { opacity: '0', transform: 'translateX(-16px)' }, to: { opacity: '1', transform: 'translateX(0)' } },
+        pulseGlow:   { '0%,100%': { opacity: '0.6' }, '50%': { opacity: '1' } },
+        orbFloat:    { '0%,100%': { transform: 'translateY(0px) rotate(0deg)' }, '33%': { transform: 'translateY(-8px) rotate(5deg)' }, '66%': { transform: 'translateY(4px) rotate(-3deg)' } },
+        shimmer:     { '0%': { backgroundPosition: '-200% center' }, '100%': { backgroundPosition: '200% center' } },
+        typingDot:   { '0%,80%,100%': { transform: 'scale(0)', opacity: '0.3' }, '40%': { transform: 'scale(1)', opacity: '1' } },
       },
     },
   },

frontend/vercel.json

@@ -4,14 +4,16 @@
   "installCommand": "npm install",
   "framework": "nextjs",
   "env": {
-    "NEXT_PUBLIC_API_URL": "https://PYAE1994-autonomous-coding-system.hf.space"
+    "NEXT_PUBLIC_API_URL": "https://PYAE1994-autonomous-coding-system.hf.space",
+    "NEXT_PUBLIC_APP_VERSION": "8.0.0",
+    "NEXT_PUBLIC_APP_NAME": "GOD AGENT OS"
   },
   "headers": [
     {
       "source": "/(.*)",
       "headers": [
         { "key": "X-Content-Type-Options", "value": "nosniff" },
-        { "key": "X-Frame-Options", "value": "DENY" },
+        { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
         { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
       ]
     }