feat: dashboard UI overhaul + auth flow + auto-company-load

- Glassmorphic design system (dark theme, teal accents)
- Sidebar + TopBar layout replacing legacy nav
- Dashboard auto-loads company from sessionStorage
- Login/Register pages with elevated auth UI
- Onboarding wizard with multi-step flow
- Compile pipeline viewer with progress tracking
- Skills explorer with grid + detail panel
- Query agent split-pane demo view
- Backend: Supabase auth, JWT, chunking pipeline
- Protected backend.env from git tracking

.gitignore

@@ -56,3 +56,5 @@ backend/nul
 backend_log.txt
 *.log
 
+
+backend.env

backend/auth/jwt.py

@@ -0,0 +1,46 @@
+import os
+import jwt
+from fastapi import Header, HTTPException
+from dotenv import load_dotenv
+
+load_dotenv()
+
+SUPABASE_URL = os.getenv("SUPABASE_URL", "")
+SUPABASE_JWT_SECRET: str | None = None
+
+
+# Derive the JWT secret from the anon key (Supabase pattern)
+# The JWT secret is base64-encoded and used to verify tokens signed by Supabase Auth
+def _get_jwt_secret() -> str:
+    global SUPABASE_JWT_SECRET
+    if SUPABASE_JWT_SECRET:
+        return SUPABASE_JWT_SECRET
+    anon_key = os.getenv("SUPABASE_KEY", "")
+    if not anon_key:
+        raise RuntimeError("SUPABASE_KEY not configured")
+    SUPABASE_JWT_SECRET = anon_key
+    return SUPABASE_JWT_SECRET
+
+
+async def verify_token(authorization: str = Header(None)) -> dict | None:
+    if not authorization or not authorization.startswith("Bearer "):
+        return None
+    token = authorization[7:]
+    try:
+        secret = _get_jwt_secret()
+        payload = jwt.decode(
+            token,
+            secret,
+            algorithms=["HS256"],
+            options={"verify_exp": True},
+        )
+        return payload
+    except jwt.PyJWTError:
+        return None
+
+
+async def require_auth(authorization: str = Header(None)) -> dict:
+    payload = await verify_token(authorization)
+    if not payload:
+        raise HTTPException(status_code=401, detail="Unauthorized")
+    return payload

backend/chunking/__init__.py

@@ -0,0 +1,2 @@
+from backend.chunking.registry import detect_doc_type
+from backend.chunking.chunkers import get_chunker, CHUNKERS

backend/chunking/chunkers.py

@@ -0,0 +1,301 @@
+import json
+import csv
+import io
+import re
+
+
+DEFAULT_CHUNK_SIZE = 2000
+DEFAULT_OVERLAP = 200
+
+
+def _estimate_tokens(text: str) -> int:
+    return len(text) // 4
+
+
+def _recursive_split(
+    text: str, chunk_size: int = DEFAULT_CHUNK_SIZE, overlap: int = DEFAULT_OVERLAP
+) -> list[str]:
+    separators = ["\n\n", "\n", ". ", " "]
+    chunks = []
+    start = 0
+
+    while start < len(text):
+        end = min(start + chunk_size * 4, len(text))
+        if end < len(text):
+            best_sep = -1
+            for sep in separators:
+                pos = text.rfind(sep, start, end)
+                if pos > best_sep:
+                    best_sep = pos
+            if best_sep > start:
+                end = best_sep + len(sep) if best_sep >= 0 else end
+
+        chunk = text[start:end].strip()
+        if chunk:
+            chunks.append(chunk)
+        start = end - overlap * 4 if end < len(text) else len(text)
+
+    return chunks if chunks else [text.strip()]
+
+
+def chunk_markdown(
+    content: str, filename: str, chunk_size: int = DEFAULT_CHUNK_SIZE
+) -> list[dict]:
+    lines = content.split("\n")
+    sections = []
+    current_header = "Introduction"
+    current_body = []
+    current_level = 0
+
+    for line in lines:
+        header_match = re.match(r"^(#{1,6})\s+(.+)$", line)
+        if header_match:
+            if current_body:
+                sections.append((current_header, "\n".join(current_body).strip()))
+            current_level = len(header_match.group(1))
+            current_header = header_match.group(2).strip()
+            current_body = []
+        else:
+            current_body.append(line)
+
+    if current_body:
+        sections.append((current_header, "\n".join(current_body).strip()))
+
+    chunks = []
+    for i, (header, body) in enumerate(sections):
+        if not body:
+            continue
+        text = f"[{header}] {body}"
+        if _estimate_tokens(text) > chunk_size:
+            sub_chunks = _recursive_split(body, chunk_size)
+            for j, sub in enumerate(sub_chunks):
+                chunks.append(
+                    {
+                        "text": f"[{header}] {sub}",
+                        "source_file": filename,
+                        "chunk_index": i * 1000 + j,
+                        "doc_type": "markdown",
+                        "section_header": header,
+                    }
+                )
+        else:
+            chunks.append(
+                {
+                    "text": text,
+                    "source_file": filename,
+                    "chunk_index": i,
+                    "doc_type": "markdown",
+                    "section_header": header,
+                }
+            )
+
+    return chunks
+
+
+def chunk_json_array(
+    content: str, filename: str, chunk_size: int = DEFAULT_CHUNK_SIZE
+) -> list[dict]:
+    try:
+        data = json.loads(content)
+    except json.JSONDecodeError:
+        return [
+            {
+                "text": content,
+                "source_file": filename,
+                "chunk_index": 0,
+                "doc_type": "json_array",
+            }
+        ]
+
+    if not isinstance(data, list):
+        text = json.dumps(data, indent=2)
+        return [
+            {
+                "text": text,
+                "source_file": filename,
+                "chunk_index": 0,
+                "doc_type": "json_object",
+            }
+        ]
+
+    chunks = []
+    for i, item in enumerate(data):
+        if isinstance(item, dict):
+            parts = []
+            for key in (
+                "text",
+                "message",
+                "content",
+                "subject",
+                "description",
+                "resolution",
+                "body",
+            ):
+                if item.get(key):
+                    parts.append(f"{key}: {item[key]}")
+            for key in (
+                "user",
+                "author",
+                "channel",
+                "priority",
+                "customer_plan",
+                "status",
+            ):
+                if item.get(key):
+                    parts.append(f"{key}: {item[key]}")
+            text = " | ".join(parts)
+            if not text:
+                text = json.dumps(item)
+        elif isinstance(item, str):
+            text = item
+        else:
+            text = json.dumps(item)
+
+        if text:
+            chunks.append(
+                {
+                    "text": text,
+                    "source_file": filename,
+                    "chunk_index": i,
+                    "doc_type": "json_array",
+                }
+            )
+
+    return chunks
+
+
+def chunk_csv(
+    content: str, filename: str, chunk_size: int = DEFAULT_CHUNK_SIZE
+) -> list[dict]:
+    reader = csv.DictReader(io.StringIO(content))
+    if reader.fieldnames is None:
+        return [
+            {
+                "text": content,
+                "source_file": filename,
+                "chunk_index": 0,
+                "doc_type": "csv",
+            }
+        ]
+
+    headers = reader.fieldnames
+    rows = list(reader)
+    if not rows:
+        return []
+
+    chunks = []
+    batch = []
+    batch_text = ""
+
+    for i, row in enumerate(rows):
+        row_parts = [f"{k}: {v}" for k, v in row.items() if v]
+        row_str = " | ".join(row_parts)
+        if _estimate_tokens(batch_text + "\n" + row_str) > chunk_size and batch:
+            chunks.append(
+                {
+                    "text": batch_text,
+                    "source_file": filename,
+                    "chunk_index": len(chunks),
+                    "doc_type": "csv",
+                }
+            )
+            batch = [row]
+            batch_text = row_str
+        else:
+            if batch_text:
+                batch_text += "\n"
+            batch_text += row_str
+            batch.append(row)
+
+    if batch:
+        chunks.append(
+            {
+                "text": batch_text,
+                "source_file": filename,
+                "chunk_index": len(chunks),
+                "doc_type": "csv",
+            }
+        )
+
+    return chunks
+
+
+def chunk_html(
+    content: str, filename: str, chunk_size: int = DEFAULT_CHUNK_SIZE
+) -> list[dict]:
+    text = re.sub(r"<style[^>]*>.*?</style>", "", content, flags=re.DOTALL)
+    text = re.sub(r"<script[^>]*>.*?</script>", "", text, flags=re.DOTALL)
+    text = re.sub(r"<[^>]+>", " ", text)
+    text = re.sub(r"\s+", " ", text).strip()
+
+    sections = re.split(r"\n\s*(?=(?:##|###|####|h[1-6]))", text)
+    chunks = []
+    for i, section in enumerate(sections):
+        section = section.strip()
+        if not section:
+            continue
+        if _estimate_tokens(section) > chunk_size:
+            subs = _recursive_split(section, chunk_size)
+            for j, sub in enumerate(subs):
+                chunks.append(
+                    {
+                        "text": sub,
+                        "source_file": filename,
+                        "chunk_index": i * 1000 + j,
+                        "doc_type": "html",
+                    }
+                )
+        else:
+            chunks.append(
+                {
+                    "text": section,
+                    "source_file": filename,
+                    "chunk_index": i,
+                    "doc_type": "html",
+                }
+            )
+
+    return (
+        chunks
+        if chunks
+        else [
+            {
+                "text": text[: chunk_size * 4],
+                "source_file": filename,
+                "chunk_index": 0,
+                "doc_type": "html",
+            }
+        ]
+    )
+
+
+def chunk_plain_text(
+    content: str,
+    filename: str,
+    chunk_size: int = DEFAULT_CHUNK_SIZE,
+    overlap: int = DEFAULT_OVERLAP,
+) -> list[dict]:
+    parts = _recursive_split(content, chunk_size, overlap)
+    return [
+        {
+            "text": part,
+            "source_file": filename,
+            "chunk_index": i,
+            "doc_type": "plain_text",
+        }
+        for i, part in enumerate(parts)
+    ]
+
+
+CHUNKERS = {
+    "markdown": chunk_markdown,
+    "json_array": chunk_json_array,
+    "json_object": chunk_json_array,
+    "csv": chunk_csv,
+    "html": chunk_html,
+    "plain_text": chunk_plain_text,
+}
+
+
+def get_chunker(doc_type: str):
+    return CHUNKERS.get(doc_type, chunk_plain_text)

backend/chunking/registry.py

@@ -0,0 +1,68 @@
+import json
+
+
+def _detect_by_content(content: str) -> str | None:
+    stripped = content.strip()
+    if not stripped:
+        return None
+
+    if stripped.startswith("<!DOCTYPE html") or stripped.startswith("<html"):
+        return "html"
+
+    if stripped.startswith("|") or stripped.startswith("|---"):
+        return "markdown"
+
+    lines = [l for l in stripped.split("\n") if l.strip()]
+    if lines:
+        header_count = sum(1 for l in lines[:20] if l.startswith("#"))
+        if header_count >= 2 or (lines and lines[0].startswith("#")):
+            return "markdown"
+
+    if stripped.startswith("{") or stripped.startswith("["):
+        try:
+            parsed = json.loads(stripped)
+            if isinstance(parsed, list):
+                return "json_array"
+            if isinstance(parsed, dict):
+                return "json_object"
+        except json.JSONDecodeError:
+            pass
+
+    if "," in stripped and "\n" in stripped[:500]:
+        first_line = stripped.split("\n")[0]
+        if "," in first_line and len(first_line.split(",")) >= 2:
+            return "csv"
+
+    return None
+
+
+def _detect_by_extension(filename: str) -> str | None:
+    fn = filename.lower()
+    ext_map = {
+        ".md": "markdown",
+        ".markdown": "markdown",
+        ".json": "json_array",
+        ".csv": "csv",
+        ".tsv": "csv",
+        ".html": "html",
+        ".htm": "html",
+        ".txt": "plain_text",
+        ".log": "plain_text",
+        ".yaml": "plain_text",
+        ".yml": "plain_text",
+        ".xml": "plain_text",
+    }
+    for ext, dtype in ext_map.items():
+        if fn.endswith(ext):
+            return dtype
+    return None
+
+
+def detect_doc_type(filename: str, content: str) -> str:
+    detected = _detect_by_content(content)
+    if detected:
+        return detected
+    detected = _detect_by_extension(filename)
+    if detected:
+        return detected
+    return "plain_text"

backend/db/schema.sql

@@ -3,6 +3,9 @@
 CREATE TABLE companies (
   id TEXT PRIMARY KEY,
   name TEXT NOT NULL,
+  industry TEXT,
+  company_size TEXT,
+  description TEXT,
   created_at TIMESTAMPTZ DEFAULT now()
 );
 

backend/db/supabase.py

@@ -99,3 +99,107 @@ def get_brain_by_version(company_id: str, version: str):
     if res.data:
         return res.data[0]
     return None
+
+
+# ─────────────────────────────────────────────
+# Phase 3 — Company CRUD
+# ─────────────────────────────────────────────
+
+
+def get_company(company_id: str):
+    if not supabase:
+        return None
+    res = supabase.table("companies").select("*").eq("id", company_id).execute()
+    return res.data[0] if res.data else None
+
+
+def upsert_company(company_id: str, data: dict):
+    if not supabase:
+        return None
+    existing = get_company(company_id)
+    if existing:
+        data.pop("id", None)
+        data.pop("created_at", None)
+        res = supabase.table("companies").update(data).eq("id", company_id).execute()
+    else:
+        data.setdefault("id", company_id)
+        res = supabase.table("companies").insert(data).execute()
+    return res.data[0] if res.data else None
+
+
+def get_company_stats(company_id: str):
+    if not supabase:
+        return {"skill_count": 0, "source_count": 0, "last_compile": None}
+    skill_res = (
+        supabase.table("skills")
+        .select("id", count="exact")
+        .eq("company_id", company_id)
+        .eq("stale", False)
+        .execute()
+    )
+    source_res = (
+        supabase.table("source_files")
+        .select("id", count="exact")
+        .eq("company_id", company_id)
+        .execute()
+    )
+    compile_res = (
+        supabase.table("compile_runs")
+        .select("completed_at, result_version")
+        .eq("company_id", company_id)
+        .eq("status", "complete")
+        .order("completed_at", desc=True)
+        .limit(1)
+        .execute()
+    )
+    return {
+        "skill_count": getattr(skill_res, "count", 0) or len(skill_res.data or []),
+        "source_count": getattr(source_res, "count", 0) or len(source_res.data or []),
+        "last_compile": compile_res.data[0] if compile_res.data else None,
+    }
+
+
+# ─────────────────────────────────────────────
+# Phase 4 — Skills Marketplace
+# ─────────────────────────────────────────────
+
+
+def import_skills_file(
+    company_id: str, skills: list, version: str, source_label: str
+) -> dict | None:
+    if not supabase:
+        return None
+    supabase.table("skills_files").update({"is_current": False}).eq(
+        "company_id", company_id
+    ).eq("is_current", True).execute()
+    brain_json = {
+        "skills": skills,
+        "meta": {"imported": True, "source": source_label, "version": version},
+    }
+    skills_file = {
+        "company_id": company_id,
+        "version": version,
+        "brain_json": brain_json,
+        "source_hashes": {},
+        "is_current": True,
+    }
+    skills_file_res = supabase.table("skills_files").insert(skills_file).execute()
+    if not skills_file_res.data:
+        return None
+    sf = skills_file_res.data[0]
+    skill_rows = [
+        {
+            "id": s.get("id", f"imported_{i}"),
+            "company_id": company_id,
+            "skills_file_id": sf["id"],
+            "name": s.get("rule", "")[:255],
+            "domain": s.get("category", "Unknown"),
+            "version": version,
+            "confidence": s.get("confidence", 0.5),
+            "skill_json": s,
+        }
+        for i, s in enumerate(skills)
+    ]
+    if skill_rows:
+        supabase.table("skills").insert(skill_rows).execute()
+    return sf

backend/graph/graph.py

@@ -2,10 +2,7 @@ from langgraph.graph import StateGraph, END
 from langgraph.types import Send
 from backend.graph.state import BrainState
 from backend.graph.nodes.load_sources import load_sources
-from backend.graph.nodes.ingest_notion import ingest_notion
-from backend.graph.nodes.ingest_slack import ingest_slack
-from backend.graph.nodes.ingest_tickets import ingest_tickets
-from backend.graph.nodes.ingest_join import ingest_join
+from backend.graph.nodes.chunk_documents import chunk_documents
 from backend.graph.nodes.extract_decisions import extract_decisions
 from backend.graph.nodes.extract_workflows import extract_workflows
 from backend.graph.nodes.extract_exceptions import extract_exceptions
@@ -16,27 +13,7 @@ from backend.graph.nodes.score_confidence import score_confidence
 from backend.graph.nodes.write_brain import write_brain
 
 
-def route_to_ingestion(state: BrainState) -> list[Send]:
-    """Fan-out: dispatch source files to type-specific ingestion nodes."""
-    sends = []
-    for f in state.get("source_files", []):
-        dt = f.get("doc_type", "unknown")
-        payload = {
-            "company_id": state["company_id"],
-            "job_id": state["job_id"],
-            "source_files": [f],
-        }
-        if dt == "notion_md":
-            sends.append(Send("ingest_notion", payload))
-        elif dt == "slack_json":
-            sends.append(Send("ingest_slack", payload))
-        elif dt == "tickets_json":
-            sends.append(Send("ingest_tickets", payload))
-    return sends
-
-
 def route_to_extraction(state: BrainState) -> list[Send]:
-    """Fan-out: dispatch all chunks to 4 parallel extraction agents."""
     return [
         Send("extract_decisions", dict(state)),
         Send("extract_workflows", dict(state)),
@@ -47,59 +24,30 @@ def route_to_extraction(state: BrainState) -> list[Send]:
 
 def build_compilation_graph() -> StateGraph:
     """
-    Parallel multi-agent graph:
-
-    load_sources
-      → route_to_ingestion (Send fan-out)
-      → [ingest_notion, ingest_slack, ingest_tickets] (parallel)
-      → ingest_join (barrier)
-      → route_to_extraction (Send fan-out)
-      → [extract_decisions, extract_workflows, extract_exceptions, detect_contradictions] (parallel)
-      → synthesize_skills → link_evidence → score_confidence → write_brain
+    load_sources → chunk_documents → route_to_extraction (Send fan-out)
+    → [extract_decisions, extract_workflows, extract_exceptions, detect_contradictions] (parallel)
+    → synthesize_skills → link_evidence → score_confidence → write_brain
     """
     workflow = StateGraph(BrainState)
 
-    # --- Ingestion layer ---
     workflow.add_node("load_sources", load_sources)
-    workflow.add_node("ingest_notion", ingest_notion)
-    workflow.add_node("ingest_slack", ingest_slack)
-    workflow.add_node("ingest_tickets", ingest_tickets)
-    workflow.add_node("ingest_join", ingest_join)
+    workflow.add_node("chunk_documents", chunk_documents)
 
-    # --- Extraction layer ---
     workflow.add_node("extract_decisions", extract_decisions)
     workflow.add_node("extract_workflows", extract_workflows)
     workflow.add_node("extract_exceptions", extract_exceptions)
     workflow.add_node("detect_contradictions", detect_contradictions)
 
-    # --- Compilation layer ---
     workflow.add_node("synthesize_skills", synthesize_skills)
     workflow.add_node("link_evidence", link_evidence)
     workflow.add_node("score_confidence", score_confidence)
     workflow.add_node("write_brain", write_brain)
 
-    # --- Edges ---
     workflow.set_entry_point("load_sources")
+    workflow.add_edge("load_sources", "chunk_documents")
 
-    # load_sources fans out to 3 parallel ingest nodes
-    workflow.add_conditional_edges(
-        "load_sources",
-        route_to_ingestion,
-        [
-            "ingest_notion",
-            "ingest_slack",
-            "ingest_tickets",
-        ],
-    )
-
-    # All 3 ingest nodes converge at the barrier join
-    workflow.add_edge("ingest_notion", "ingest_join")
-    workflow.add_edge("ingest_slack", "ingest_join")
-    workflow.add_edge("ingest_tickets", "ingest_join")
-
-    # ingest_join fans out to 4 parallel extraction agents
     workflow.add_conditional_edges(
-        "ingest_join",
+        "chunk_documents",
         route_to_extraction,
         [
             "extract_decisions",
@@ -109,13 +57,11 @@ def build_compilation_graph() -> StateGraph:
         ],
     )
 
-    # All 4 extraction agents converge at synthesize_skills
     workflow.add_edge("extract_decisions", "synthesize_skills")
     workflow.add_edge("extract_workflows", "synthesize_skills")
     workflow.add_edge("extract_exceptions", "synthesize_skills")
     workflow.add_edge("detect_contradictions", "synthesize_skills")
 
-    # Sequential compilation pipeline
     workflow.add_edge("synthesize_skills", "link_evidence")
     workflow.add_edge("link_evidence", "score_confidence")
     workflow.add_edge("score_confidence", "write_brain")

backend/graph/nodes/chunk_documents.py

@@ -0,0 +1,41 @@
+from backend.graph.state import BrainState
+from backend.chunking import get_chunker
+from backend.sse import emit
+
+
+async def chunk_documents(state: BrainState) -> dict:
+    job_id = state["job_id"]
+    source_files = state.get("source_files", [])
+
+    print(f"[{job_id}] Node chunk_documents: processing {len(source_files)} files")
+    await emit(
+        job_id,
+        "stage",
+        {
+            "name": "CHUNKING",
+            "detail": f"Chunking {len(source_files)} source files",
+        },
+    )
+
+    all_chunks = []
+    for sf in source_files:
+        doc_type = sf.get("doc_type", "plain_text")
+        filename = sf.get("filename", "unknown")
+        content = sf.get("content", "")
+        chunker = get_chunker(doc_type)
+        chunks = chunker(content, filename)
+        all_chunks.extend(chunks)
+
+    print(
+        f"[{job_id}] chunk_documents: produced {len(all_chunks)} chunks from {len(source_files)} files"
+    )
+    await emit(
+        job_id,
+        "stage",
+        {
+            "name": "CHUNKING_DONE",
+            "detail": f"Produced {len(all_chunks)} chunks from {len(source_files)} files",
+        },
+    )
+
+    return {"all_chunks": all_chunks}

backend/graph/nodes/detect_contradictions.py

@@ -2,6 +2,20 @@ from backend.graph.state import BrainState
 from backend.llm import safe_llm_json_call
 from backend.sse import emit
 
+MAX_CHUNK_CHARS = 12000
+
+
+def _cap_chunks(chunks: list[dict]) -> str:
+    parts = []
+    chars = 0
+    for c in chunks:
+        text = c.get("text", "")
+        if chars + len(text) > MAX_CHUNK_CHARS:
+            break
+        parts.append(text)
+        chars += len(text)
+    return "\n\n---\n\n".join(parts)
+
 
 SYSTEM = """You are a contradiction detection specialist. Your ONLY job is to find CONTRADICTIONS, CONFLICTS, and INCONSISTENCIES across company communications.
 
@@ -34,7 +48,7 @@ async def detect_contradictions(state: BrainState) -> dict:
         },
     )
 
-    chunk_text = "\n\n---\n\n".join([c.get("text", "") for c in chunks])
+    chunk_text = _cap_chunks(chunks)
     user = f"Detect contradictions and conflicting instructions across this company data:\n\n{chunk_text}"
 
     results = await safe_llm_json_call(SYSTEM, user, max_tokens=2048)

backend/graph/nodes/extract_decisions.py

@@ -2,6 +2,20 @@ from backend.graph.state import BrainState
 from backend.llm import safe_llm_json_call
 from backend.sse import emit
 
+MAX_CHUNK_CHARS = 12000
+
+
+def _cap_chunks(chunks: list[dict]) -> str:
+    parts = []
+    chars = 0
+    for c in chunks:
+        text = c.get("text", "")
+        if chars + len(text) > MAX_CHUNK_CHARS:
+            break
+        parts.append(text)
+        chars += len(text)
+    return "\n\n---\n\n".join(parts)
+
 
 SYSTEM = """You are a policy extraction specialist. Your ONLY job is to extract DECISIONS, RULES, and POLICIES from company communications.
 
@@ -29,7 +43,7 @@ async def extract_decisions(state: BrainState) -> dict:
         {"name": "EXTRACT_DECISIONS", "detail": "Extracting rules and policies..."},
     )
 
-    chunk_text = "\n\n---\n\n".join([c.get("text", "") for c in chunks])
+    chunk_text = _cap_chunks(chunks)
     user = f"Extract all decisions, rules, and policies from this company data:\n\n{chunk_text}"
 
     results = await safe_llm_json_call(SYSTEM, user, max_tokens=2048)

backend/graph/nodes/extract_exceptions.py

@@ -2,6 +2,20 @@ from backend.graph.state import BrainState
 from backend.llm import safe_llm_json_call
 from backend.sse import emit
 
+MAX_CHUNK_CHARS = 12000
+
+
+def _cap_chunks(chunks: list[dict]) -> str:
+    parts = []
+    chars = 0
+    for c in chunks:
+        text = c.get("text", "")
+        if chars + len(text) > MAX_CHUNK_CHARS:
+            break
+        parts.append(text)
+        chars += len(text)
+    return "\n\n---\n\n".join(parts)
+
 
 SYSTEM = """You are an exception extraction specialist. Your ONLY job is to extract EXCEPTIONS, EDGE CASES, CONSTRAINTS, CONDITIONAL RULES, and FORBIDDEN ACTIONS from company communications.
 
@@ -32,7 +46,7 @@ async def extract_exceptions(state: BrainState) -> dict:
         },
     )
 
-    chunk_text = "\n\n---\n\n".join([c.get("text", "") for c in chunks])
+    chunk_text = _cap_chunks(chunks)
     user = f"Extract all exceptions, edge cases, constraints, and forbidden actions from this company data:\n\n{chunk_text}"
 
     results = await safe_llm_json_call(SYSTEM, user, max_tokens=2048)

backend/graph/nodes/extract_workflows.py

@@ -2,6 +2,20 @@ from backend.graph.state import BrainState
 from backend.llm import safe_llm_json_call
 from backend.sse import emit
 
+MAX_CHUNK_CHARS = 12000
+
+
+def _cap_chunks(chunks: list[dict]) -> str:
+    parts = []
+    chars = 0
+    for c in chunks:
+        text = c.get("text", "")
+        if chars + len(text) > MAX_CHUNK_CHARS:
+            break
+        parts.append(text)
+        chars += len(text)
+    return "\n\n---\n\n".join(parts)
+
 
 SYSTEM = """You are a workflow extraction specialist. Your ONLY job is to extract WORKFLOWS, PROCESSES, and SEQUENTIAL STEPS from company communications.
 
@@ -32,7 +46,7 @@ async def extract_workflows(state: BrainState) -> dict:
         },
     )
 
-    chunk_text = "\n\n---\n\n".join([c.get("text", "") for c in chunks])
+    chunk_text = _cap_chunks(chunks)
     user = f"Extract all workflows, processes, and step-by-step procedures from this company data:\n\n{chunk_text}"
 
     results = await safe_llm_json_call(SYSTEM, user, max_tokens=2048)

backend/graph/nodes/ingest_join.py

@@ -1,29 +0,0 @@
-from backend.graph.state import BrainState
-from backend.sse import emit
-
-
-async def ingest_join(state: BrainState) -> dict:
-    job_id = state["job_id"]
-
-    structured_sops = state.get("structured_sops", [])
-    normalized_events = state.get("normalized_events", [])
-    resolved_cases = state.get("resolved_cases", [])
-
-    all_chunks = []
-    all_chunks.extend(structured_sops)
-    all_chunks.extend(normalized_events)
-    all_chunks.extend(resolved_cases)
-
-    print(
-        f"[{job_id}] Node ingest_join: merged {len(structured_sops)} SOPs + {len(normalized_events)} events + {len(resolved_cases)} tickets = {len(all_chunks)} chunks"
-    )
-
-    await emit(
-        job_id,
-        "stage",
-        {
-            "name": "INGEST_JOIN",
-            "detail": f"Merged {len(all_chunks)} total chunks from all sources",
-        },
-    )
-    return {"all_chunks": all_chunks}

backend/graph/nodes/ingest_notion.py

@@ -1,60 +0,0 @@
-from backend.graph.state import BrainState
-from backend.sse import emit
-
-
-async def ingest_notion(state: BrainState) -> dict:
-    job_id = state["job_id"]
-    source_files = state.get("source_files", [])
-
-    notion_files = [f for f in source_files if f.get("doc_type") == "notion_md"]
-    print(f"[{job_id}] Node ingest_notion: {len(notion_files)} notion files")
-
-    structured_sops = []
-    for sf in notion_files:
-        chunks = _chunk_markdown(sf)
-        structured_sops.extend(chunks)
-
-    await emit(
-        job_id,
-        "stage",
-        {
-            "name": "INGEST_NOTION",
-            "detail": f"Processed {len(notion_files)} SOP files into {len(structured_sops)} chunks",
-        },
-    )
-    print(f"[{job_id}] ingest_notion finished: {len(structured_sops)} chunks")
-    return {"structured_sops": structured_sops}
-
-
-def _chunk_markdown(sf: dict) -> list:
-    content = sf["content"]
-    sections = []
-    current_header = "Introduction"
-    current_body = []
-
-    for line in content.split("\n"):
-        if line.startswith("## "):
-            if current_body:
-                sections.append((current_header, "\n".join(current_body).strip()))
-            current_header = line.lstrip("# ").strip()
-            current_body = []
-        else:
-            current_body.append(line)
-
-    if current_body:
-        sections.append((current_header, "\n".join(current_body).strip()))
-
-    chunks = []
-    for i, (header, body) in enumerate(sections):
-        if not body:
-            continue
-        chunks.append(
-            {
-                "text": f"[{header}] {body}",
-                "source_file": sf["filename"],
-                "chunk_index": i,
-                "doc_type": "notion_md",
-                "section_header": header,
-            }
-        )
-    return chunks

backend/graph/nodes/ingest_slack.py

@@ -1,50 +0,0 @@
-import json
-from backend.graph.state import BrainState
-from backend.sse import emit
-
-
-async def ingest_slack(state: BrainState) -> dict:
-    job_id = state["job_id"]
-    source_files = state.get("source_files", [])
-
-    slack_files = [f for f in source_files if f.get("doc_type") == "slack_json"]
-    print(f"[{job_id}] Node ingest_slack: {len(slack_files)} slack files")
-
-    normalized_events = []
-    for sf in slack_files:
-        chunks = _chunk_slack(sf)
-        normalized_events.extend(chunks)
-
-    await emit(
-        job_id,
-        "stage",
-        {
-            "name": "INGEST_SLACK",
-            "detail": f"Processed {len(slack_files)} Slack exports into {len(normalized_events)} messages",
-        },
-    )
-    print(f"[{job_id}] ingest_slack finished: {len(normalized_events)} messages")
-    return {"normalized_events": normalized_events}
-
-
-def _chunk_slack(sf: dict) -> list:
-    try:
-        messages = json.loads(sf["content"])
-    except json.JSONDecodeError:
-        return []
-    chunks = []
-    for i, msg in enumerate(messages):
-        text = msg.get("text", "")
-        if not text:
-            continue
-        user = msg.get("user", "unknown")
-        channel = msg.get("channel", "unknown")
-        chunks.append(
-            {
-                "text": f"[Slack #{channel} @{user}] {text}",
-                "source_file": sf["filename"],
-                "chunk_index": i,
-                "doc_type": "slack_json",
-            }
-        )
-    return chunks

backend/graph/nodes/ingest_tickets.py

@@ -1,59 +0,0 @@
-import json
-from backend.graph.state import BrainState
-from backend.sse import emit
-
-
-async def ingest_tickets(state: BrainState) -> dict:
-    job_id = state["job_id"]
-    source_files = state.get("source_files", [])
-
-    ticket_files = [f for f in source_files if f.get("doc_type") == "tickets_json"]
-    print(f"[{job_id}] Node ingest_tickets: {len(ticket_files)} ticket files")
-
-    resolved_cases = []
-    for sf in ticket_files:
-        chunks = _chunk_tickets(sf)
-        resolved_cases.extend(chunks)
-
-    await emit(
-        job_id,
-        "stage",
-        {
-            "name": "INGEST_TICKETS",
-            "detail": f"Processed {len(ticket_files)} ticket files into {len(resolved_cases)} cases",
-        },
-    )
-    print(f"[{job_id}] ingest_tickets finished: {len(resolved_cases)} tickets")
-    return {"resolved_cases": resolved_cases}
-
-
-def _chunk_tickets(sf: dict) -> list:
-    try:
-        tickets = json.loads(sf["content"])
-    except json.JSONDecodeError:
-        return []
-    chunks = []
-    for i, tkt in enumerate(tickets):
-        parts = []
-        if tkt.get("subject"):
-            parts.append(f"Subject: {tkt['subject']}")
-        if tkt.get("description"):
-            parts.append(f"Description: {tkt['description']}")
-        if tkt.get("resolution"):
-            parts.append(f"Resolution: {tkt['resolution']}")
-        if tkt.get("priority"):
-            parts.append(f"Priority: {tkt['priority']}")
-        if tkt.get("customer_plan"):
-            parts.append(f"Plan: {tkt['customer_plan']}")
-        text = " | ".join(parts)
-        if not text:
-            continue
-        chunks.append(
-            {
-                "text": f"[Zendesk Ticket] {text}",
-                "source_file": sf["filename"],
-                "chunk_index": i,
-                "doc_type": "tickets_json",
-            }
-        )
-    return chunks

backend/graph/nodes/load_sources.py

@@ -1,22 +1,10 @@
 import os
 import hashlib
 from backend.graph.state import BrainState
+from backend.chunking import detect_doc_type
 from backend.sse import emit
 
 
-def _detect_type(filename: str) -> str:
-    fn = filename.lower()
-    if fn.endswith(".json"):
-        if "slack" in fn:
-            return "slack_json"
-        if "ticket" in fn or "zendesk" in fn:
-            return "tickets_json"
-        return "json"
-    if fn.endswith(".md"):
-        return "notion_md"
-    return "unknown"
-
-
 async def load_sources(state: BrainState) -> dict:
     company_id = state["company_id"]
     job_id = state["job_id"]
@@ -49,12 +37,13 @@ async def load_sources(state: BrainState) -> dict:
             continue
         with open(filepath, "r", encoding="utf-8") as f:
             content = f.read()
+        doc_type = detect_doc_type(filename, content)
         source_files.append(
             {
                 "filename": filename,
                 "content": content,
                 "sha256": hashlib.sha256(content.encode("utf-8")).hexdigest(),
-                "doc_type": _detect_type(filename),
+                "doc_type": doc_type,
             }
         )
 

backend/graph/nodes/write_brain.py

@@ -4,7 +4,7 @@ import uuid
 import datetime
 from backend.graph.state import BrainState
 from backend.db.supabase import get_client
-from backend.llm import get_embedding
+from backend.llm import get_embeddings
 from backend.sse import emit
 
 
@@ -27,19 +27,20 @@ async def write_brain(state: BrainState) -> dict:
         },
     )
 
-    skills_with_embeddings = []
-    for skill in final_skills:
-        skill_text = f"{skill.get('category', '')} {skill.get('rule', '')} {skill.get('rationale', '')}"
-        emb = get_embedding(skill_text)
+    skill_texts = [
+        f"{s.get('category', '')} {s.get('rule', '')} {s.get('rationale', '')}"
+        for s in final_skills
+    ]
+    embeddings = get_embeddings(skill_texts)
+    for skill, emb in zip(final_skills, embeddings):
         skill["embedding_vector"] = emb
-        skills_with_embeddings.append(skill)
 
     skills_file = {
-        "skills": skills_with_embeddings,
+        "skills": final_skills,
         "meta": {
             "company_id": company_id,
             "compiled_at": datetime.datetime.now(datetime.timezone.utc).isoformat(),
-            "total_skills": len(skills_with_embeddings),
+            "total_skills": len(final_skills),
             "duration_ms": duration_ms,
         },
     }
@@ -82,9 +83,10 @@ async def write_brain(state: BrainState) -> dict:
 
         sf_id = sf_res.data[0]["id"]
 
-        for skill in skills_with_embeddings:
+        skill_rows = []
+        for skill in final_skills:
             skill_copy = {k: v for k, v in skill.items() if k != "embedding_vector"}
-            db.table("skills").insert(
+            skill_rows.append(
                 {
                     "id": skill.get("id", str(uuid.uuid4())[:8]),
                     "company_id": company_id,
@@ -95,7 +97,9 @@ async def write_brain(state: BrainState) -> dict:
                     "confidence": float(skill.get("confidence", 0.5)),
                     "skill_json": skill_copy,
                 }
-            ).execute()
+            )
+        if skill_rows:
+            db.table("skills").insert(skill_rows).execute()
 
         db.table("compile_runs").update(
             {
@@ -116,7 +120,7 @@ async def write_brain(state: BrainState) -> dict:
         "stage",
         {
             "name": "DONE",
-            "detail": f"Brain {version_str} written: {len(skills_with_embeddings)} skills, {len(source_hashes)} sources, {duration_ms}ms",
+            "detail": f"Brain {version_str} written: {len(final_skills)} skills, {len(source_hashes)} sources, {duration_ms}ms",
         },
     )
     await emit(
@@ -125,7 +129,7 @@ async def write_brain(state: BrainState) -> dict:
         {
             "status": "success",
             "version": version_str,
-            "skills_count": len(skills_with_embeddings),
+            "skills_count": len(final_skills),
             "source_count": len(source_hashes),
             "duration_ms": duration_ms,
         },

backend/graph/state.py

@@ -7,10 +7,6 @@ class BrainState(TypedDict):
     job_id: str
     source_files: Annotated[List[Dict[str, Any]], operator.add]
 
-    structured_sops: Annotated[List[Dict[str, Any]], operator.add]
-    normalized_events: Annotated[List[Dict[str, Any]], operator.add]
-    resolved_cases: Annotated[List[Dict[str, Any]], operator.add]
-
     all_chunks: List[Dict[str, Any]]
 
     raw_decisions: Annotated[List[Dict[str, Any]], operator.add]

backend/llm.py

@@ -14,7 +14,7 @@ MODEL_NAME = "RedHatAI/Qwen2.5-72B-Instruct-FP8-dynamic"
 llm = AsyncOpenAI(base_url=VLLM_BASE_URL, api_key="not-needed", timeout=120.0)
 
 # --- Concurrency throttle for parallel extraction ---
-_semaphore = asyncio.Semaphore(4)
+_semaphore = asyncio.Semaphore(8)
 
 # --- Embedding model (local, fast, centralized here) ---
 _embedding_model = None

backend/main.py

@@ -1,4 +1,12 @@
-from fastapi import FastAPI, BackgroundTasks, HTTPException, UploadFile, File, Form
+from fastapi import (
+    FastAPI,
+    BackgroundTasks,
+    HTTPException,
+    UploadFile,
+    File,
+    Form,
+    Depends,
+)
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import StreamingResponse
 import os
@@ -14,9 +22,26 @@ import datetime
 from backend.graph.graph import build_compilation_graph
 from backend.sse import event_bus, emit
 from backend.agent.brain_agent import handle_agent_query
-from backend.db.supabase import get_client, get_brain_by_version
-from backend.llm import check_vllm_health
-from backend.models.schemas import CompileRequest, AgentHandleRequest, AgentQueryRequest
+from backend.db.supabase import (
+    get_client,
+    get_brain_by_version,
+    get_company,
+    get_company_stats,
+    upsert_company,
+    import_skills_file,
+)
+from backend.llm import check_vllm_health, llm_call, safe_llm_json_call
+from backend.models.schemas import (
+    CompileRequest,
+    AgentHandleRequest,
+    AgentQueryRequest,
+    OnboardingAnalysisRequest,
+    CompanyUpdate,
+    SkillsImportRequest,
+    AuthRegisterRequest,
+    AuthLoginRequest,
+)
+from backend.auth.jwt import verify_token, require_auth
 
 app = FastAPI(title="Kernl API", version="2.1.0")
 
@@ -132,9 +157,6 @@ async def run_compilation_graph(job_id: str, company_id: str):
         "job_id": job_id,
         "company_id": company_id,
         "source_files": [],
-        "structured_sops": [],
-        "normalized_events": [],
-        "resolved_cases": [],
         "all_chunks": [],
         "raw_decisions": [],
         "workflow_steps": [],
@@ -334,11 +356,240 @@ async def list_brain_versions(company_id: str):
     return {"versions": versions, "company_id": company_id}
 
 
+# ─────────────────────────────────────────────
+# Phase 3 — Multi-Company & Onboarding
+# ─────────────────────────────────────────────
+ONBOARDING_SYSTEM_PROMPT = """You are an organizational analyst. Analyze the provided company documents and suggest:
+1. Industry — what sector this company operates in
+2. Departments — which departments are present or implied (e.g., Support, Engineering, HR, Finance, Sales, Marketing, Operations)
+3. Company size — estimate employee count range: "1-10", "11-50", "51-200", "201+"
+
+Output ONLY a JSON object with these exact fields:
+{
+  "industry": "string",
+  "departments": ["string"],
+  "size": "string",
+  "rationale": "string"
+}
+
+No preamble. No explanation. No markdown."""
+
+
+@app.post("/onboarding/analyze")
+async def onboarding_analyze(req: OnboardingAnalysisRequest):
+    src_dir = _company_sources_dir(req.company_id)
+    if not os.path.isdir(src_dir):
+        raise HTTPException(
+            status_code=404, detail=f"No sources found for {req.company_id}"
+        )
+
+    samples = []
+    for fn in sorted(os.listdir(src_dir)):
+        fp = os.path.join(src_dir, fn)
+        if not os.path.isfile(fp):
+            continue
+        with open(fp, "r", encoding="utf-8", errors="ignore") as f:
+            content = f.read(4000)
+        samples.append(f"--- {fn} ---\n{content}")
+
+    user_content = "Analyze these company documents:\n\n" + "\n\n".join(samples[:8])
+
+    try:
+        result = await safe_llm_json_call(
+            ONBOARDING_SYSTEM_PROMPT, user_content, max_tokens=1024
+        )
+    except Exception:
+        raise HTTPException(status_code=500, detail="Analysis failed — LLM unavailable")
+
+    if not isinstance(result, dict):
+        result = result[0] if isinstance(result, list) and result else {}
+
+    return {
+        "company_id": req.company_id,
+        "suggested_industry": result.get("industry", "Unknown"),
+        "suggested_departments": result.get("departments", []),
+        "suggested_size": result.get("size", "Unknown"),
+        "rationale": result.get("rationale", ""),
+    }
+
+
+@app.get("/companies/{company_id}")
+async def get_company_detail(company_id: str):
+    db = get_client()
+    company = get_company(company_id) if db else None
+    if not company:
+        raise HTTPException(status_code=404, detail="Company not found")
+    stats = get_company_stats(company_id) if db else {}
+    return {**company, **stats}
+
+
+@app.patch("/companies/{company_id}")
+async def update_company(company_id: str, update: CompanyUpdate):
+    db = get_client()
+    if not db:
+        raise HTTPException(status_code=500, detail="Database not connected")
+    payload = update.model_dump(exclude_none=True)
+    if not payload:
+        raise HTTPException(status_code=400, detail="No fields to update")
+    try:
+        result = upsert_company(company_id, payload)
+    except Exception as e:
+        err_msg = str(e)
+        if "Could not find" in err_msg or "does not exist" in err_msg:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Database schema needs migration. GET /migrations/pending for SQL to run in Supabase dashboard. Error: {err_msg}",
+            )
+        raise HTTPException(
+            status_code=500, detail=f"Failed to update company: {err_msg}"
+        )
+    if not result:
+        raise HTTPException(status_code=500, detail="Failed to update company")
+    stats = get_company_stats(company_id)
+    return {**result, **stats}
+
+
+@app.post("/companies/{company_id}/load-samples")
+async def load_sample_sources(company_id: str):
+    """Clone template playbooks from rivanly-inc to a new company directory."""
+    template_dir = _company_sources_dir("rivanly-inc")
+    if not os.path.isdir(template_dir):
+        raise HTTPException(
+            status_code=404,
+            detail="Template sources not found. Ensure data/sources/rivanly-inc/ exists.",
+        )
+
+    target_dir = _company_sources_dir(company_id)
+    os.makedirs(target_dir, exist_ok=True)
+
+    copied = []
+    db = get_client()
+    for fn in sorted(os.listdir(template_dir)):
+        src = os.path.join(template_dir, fn)
+        if not os.path.isfile(src):
+            continue
+        dst = os.path.join(target_dir, fn)
+        shutil.copy2(src, dst)
+        copied.append(fn)
+
+        # Record in DB
+        if db:
+            try:
+                with open(dst, "rb") as f:
+                    file_hash = hashlib.sha256(f.read()).hexdigest()
+                db.table("source_files").insert(
+                    {
+                        "company_id": company_id,
+                        "filename": fn,
+                        "sha256": file_hash,
+                        "storage_path": f"data/sources/{company_id}/{fn}",
+                    }
+                ).execute()
+            except Exception as e:
+                print(f"[load-samples] DB record error for {fn}: {e}")
+
+    # Ensure company exists in DB
+    if db:
+        try:
+            upsert_company(
+                company_id, {"name": company_id.replace("-", " ").title()}
+            )
+        except Exception as e:
+            print(f"[load-samples] Company upsert error: {e}")
+
+    return {"status": "loaded", "files": copied, "count": len(copied)}
+
+
+
+# ─────────────────────────────────────────────
+# Phase 4 — Skills Marketplace
+# ─────────────────────────────────────────────
+
+
+@app.get("/skills/{company_id}/download")
+async def download_skills(company_id: str):
+    db = get_client()
+    if not db:
+        raise HTTPException(status_code=500, detail="Database not connected")
+    res = (
+        db.table("skills_files")
+        .select("*")
+        .eq("company_id", company_id)
+        .eq("is_current", True)
+        .execute()
+    )
+    if not res.data:
+        raise HTTPException(
+            status_code=404, detail="No skills file found for this company"
+        )
+    brain = res.data[0]
+    return StreamingResponse(
+        iter([json.dumps(brain["brain_json"], indent=2)]),
+        media_type="application/json",
+        headers={
+            "Content-Disposition": f'attachment; filename="skills_{company_id}_{brain["version"]}.json"'
+        },
+    )
+
+
+@app.post("/skills/import")
+async def import_skills(req: SkillsImportRequest):
+    db = get_client()
+    if not db:
+        raise HTTPException(status_code=500, detail="Database not connected")
+    if not req.skills:
+        raise HTTPException(status_code=400, detail="No skills provided in payload")
+    skills_file = import_skills_file(
+        req.company_id, req.skills, req.version, req.source_label
+    )
+    if not skills_file:
+        raise HTTPException(status_code=500, detail="Failed to import skills")
+    return {
+        "status": "imported",
+        "company_id": req.company_id,
+        "version": req.version,
+        "skill_count": len(req.skills),
+        "skills_file_id": skills_file["id"],
+    }
+
+
+# ─────────────────────────────────────────────
+# Phase 6 — Auth
+# ─────────────────────────────────────────────
+
+
+@app.get("/auth/config")
+async def auth_config():
+    return {
+        "supabase_url": os.getenv("SUPABASE_URL", ""),
+        "supabase_anon_key": os.getenv("SUPABASE_KEY", ""),
+    }
+
+
+@app.get("/auth/me")
+async def auth_me(user: dict = Depends(require_auth)):
+    return {"user": user}
+
+
+@app.get("/migrations/pending")
+async def migrations_pending():
+    """Return SQL statements that need to be run in Supabase dashboard."""
+    return {
+        "database": os.getenv("SUPABASE_URL", ""),
+        "sql": [
+            "ALTER TABLE companies ADD COLUMN IF NOT EXISTS industry TEXT;",
+            "ALTER TABLE companies ADD COLUMN IF NOT EXISTS company_size TEXT;",
+            "ALTER TABLE companies ADD COLUMN IF NOT EXISTS description TEXT;",
+        ],
+        "instructions": "Run these SQL statements in your Supabase dashboard SQL editor at https://supabase.com/dashboard/project/csxswinhxuziyssuuxzx/sql/new",
+    }
+
+
 # ─────────────────────────────────────────────
 # Semantic Diff Engine
 # ─────────────────────────────────────────────
 @app.get("/diff/{v1}/{v2}")
-async def semantic_diff(v1: str, v2: str, company_id: str = "rivanly-inc"):
+async def semantic_diff(v1: str, v2: str, company_id: str):
     db = get_client()
     if not db:
         raise HTTPException(status_code=500, detail="Database not connected")

backend/models/schemas.py

@@ -57,3 +57,59 @@ class DiffResponse(BaseModel):
     deleted: List[DiffItem] = []
     modified: List[DiffModified] = []
     confidence_shifts: List[DiffConfidenceShift] = []
+
+
+# ─────────────────────────────────────────────
+# Phase 3 — Multi-Company & Onboarding
+# ─────────────────────────────────────────────
+
+
+class OnboardingAnalysisRequest(BaseModel):
+    company_id: str
+
+
+class OnboardingSuggestion(BaseModel):
+    company_id: str
+    suggested_industry: str
+    suggested_departments: List[str]
+    suggested_size: str
+    rationale: str
+
+
+class CompanyUpdate(BaseModel):
+    name: Optional[str] = None
+    industry: Optional[str] = None
+    company_size: Optional[str] = None
+    description: Optional[str] = None
+
+
+# ─────────────────────────────────────────────
+# Phase 6 — Auth
+# ─────────────────────────────────────────────
+
+
+class AuthRegisterRequest(BaseModel):
+    email: str
+    password: str
+
+
+class AuthLoginRequest(BaseModel):
+    email: str
+    password: str
+
+
+class AuthResponse(BaseModel):
+    access_token: str
+    user: Dict[str, Any]
+
+
+# ─────────────────────────────────────────────
+# Phase 4 — Skills Marketplace
+# ─────────────────────────────────────────────
+
+
+class SkillsImportRequest(BaseModel):
+    company_id: str
+    version: str = "imported"
+    skills: List[Dict[str, Any]]
+    source_label: str = "marketplace_import"

frontend/src/app/compile/[jobId]/page.tsx

@@ -1,40 +1,37 @@
 "use client";
 
-import { useEffect, useState, use } from "react";
+import { useEffect, useState, use, useRef } from "react";
 import { useRouter } from "next/navigation";
+import { API_BASE } from "@/lib/api";
+import DashboardLayout from "@/components/DashboardLayout";
+import GlassCard from "@/components/ui/GlassCard";
 
-interface LogEvent {
-  timestamp: string;
-  type: string;
-  data: any;
-}
+interface LogEvent { timestamp: string; type: string; data: Record<string, unknown>; }
 
-const STAGE_LABELS: Record<string, string> = {
-  pipeline_start: "🚀 Pipeline Started",
-  LOADING_DOCS: "📂 Loading Documents",
-  LOADING_DOCS_DONE: "✅ Sources Loaded",
-  INGEST_NOTION: "📝 Ingesting SOPs",
-  INGEST_SLACK: "💬 Ingesting Slack Messages",
-  INGEST_TICKETS: "🎫 Ingesting Support Tickets",
-  INGEST_JOIN: "🔗 Merging All Chunks",
-  EXTRACT_DECISIONS: "⚖️ Extracting Rules & Policies",
-  EXTRACT_DECISIONS_DONE: "✅ Rules Extracted",
-  EXTRACT_WORKFLOWS: "🔁 Extracting Workflows",
-  EXTRACT_WORKFLOWS_DONE: "✅ Workflows Extracted",
-  EXTRACT_EXCEPTIONS: "⚠️ Extracting Exceptions & Edge Cases",
-  EXTRACT_EXCEPTIONS_DONE: "✅ Exceptions Extracted",
-  DETECT_CONTRADICTIONS: "🔄 Detecting Cross-Source Contradictions",
-  DETECT_CONTRADICTIONS_DONE: "✅ Contradictions Analyzed",
-  SYNTHESIZING_SKILLS: "⚡ Synthesizing Skills from All Extractions",
-  SYNTHESIZING_DONE: "✅ Skills Synthesized",
-  LINKING_EVIDENCE: "🔗 Linking Evidence to Skills",
-  LINKING_DONE: "✅ Evidence Linked",
-  SCORING_CONFIDENCE: "📊 Scoring Confidence",
-  SCORING_DONE: "✅ Confidence Scored",
-  WRITING_DB: "💾 Pre-embedding & Writing to Database",
-  DONE: "✅ Pipeline Complete",
-  pipeline_complete: "🎉 Compilation Finished",
-  pipeline_error: "❌ Pipeline Error",
+const STAGES: Record<string, { label: string; icon: string }> = {
+  pipeline_start: { label: "Pipeline Started", icon: "▶" },
+  LOADING_DOCS: { label: "Loading Documents", icon: "◈" },
+  LOADING_DOCS_DONE: { label: "Sources Loaded", icon: "✓" },
+  CHUNKING: { label: "Chunking Documents", icon: "◈" },
+  CHUNKING_DONE: { label: "Documents Chunked", icon: "✓" },
+  EXTRACT_DECISIONS: { label: "Extracting Rules", icon: "◈" },
+  EXTRACT_DECISIONS_DONE: { label: "Rules Extracted", icon: "✓" },
+  EXTRACT_WORKFLOWS: { label: "Extracting Workflows", icon: "◈" },
+  EXTRACT_WORKFLOWS_DONE: { label: "Workflows Extracted", icon: "✓" },
+  EXTRACT_EXCEPTIONS: { label: "Extracting Exceptions", icon: "◈" },
+  EXTRACT_EXCEPTIONS_DONE: { label: "Exceptions Extracted", icon: "✓" },
+  DETECT_CONTRADICTIONS: { label: "Detecting Contradictions", icon: "◈" },
+  DETECT_CONTRADICTIONS_DONE: { label: "Contradictions Analyzed", icon: "✓" },
+  SYNTHESIZING_SKILLS: { label: "Synthesizing Skills", icon: "◈" },
+  SYNTHESIZING_DONE: { label: "Skills Synthesized", icon: "✓" },
+  LINKING_EVIDENCE: { label: "Linking Evidence", icon: "◈" },
+  LINKING_DONE: { label: "Evidence Linked", icon: "✓" },
+  SCORING_CONFIDENCE: { label: "Scoring Confidence", icon: "◈" },
+  SCORING_DONE: { label: "Confidence Scored", icon: "✓" },
+  WRITING_DB: { label: "Writing to Database", icon: "◈" },
+  DONE: { label: "Pipeline Complete", icon: "✓" },
+  pipeline_complete: { label: "Compilation Finished", icon: "✓" },
+  pipeline_error: { label: "Pipeline Error", icon: "✕" },
 };
 
 export default function CompileViewer({ params }: { params: Promise<{ jobId: string }> }) {
@@ -42,86 +39,164 @@ export default function CompileViewer({ params }: { params: Promise<{ jobId: str
   const jobId = resolvedParams.jobId;
   const [logs, setLogs] = useState<LogEvent[]>([]);
   const [status, setStatus] = useState("Connecting...");
+  const [companyId, setCompanyId] = useState<string | null>(null);
+  const [pipelineDone, setPipelineDone] = useState(false);
+  const [pipelineError, setPipelineError] = useState<string | null>(null);
+  const [currentStage, setCurrentStage] = useState<string | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
 
   useEffect(() => {
     if (!jobId) return;
-
-    const eventSource = new EventSource(`http://localhost:8080/compile/${jobId}/stream`);
-
-    eventSource.onmessage = (event) => {
+    const es = new EventSource(`${API_BASE}/compile/${jobId}/stream`);
+    es.onmessage = (event) => {
       const parsed = JSON.parse(event.data);
-      const eventType = parsed.event;
-      const eventData = parsed.data;
-
-      setLogs((prev) => [
-        ...prev,
-        { timestamp: new Date().toLocaleTimeString(), type: eventType, data: eventData },
-      ]);
-
-      // Update the status bar based on event type
-      if (eventType === "stage") {
-        const stageName = eventData.name || "";
-        const label = STAGE_LABELS[stageName] || stageName;
-        const detail = eventData.detail || "";
-        setStatus(`${label}${detail ? ` — ${detail}` : ""}`);
-      } else if (eventType === "pipeline_start") {
-        setStatus(STAGE_LABELS.pipeline_start);
-      } else if (eventType === "pipeline_complete") {
-        setStatus(STAGE_LABELS.pipeline_complete);
-        eventSource.close();
-      } else if (eventType === "pipeline_error") {
-        setStatus(`❌ Error: ${eventData.error || "Unknown"}`);
-        eventSource.close();
-      }
+      const et = parsed.event;
+      const ed = parsed.data;
+      setLogs((prev) => [...prev, { timestamp: new Date().toLocaleTimeString(), type: et, data: ed }]);
+      if (et === "pipeline_start" && ed?.company_id) setCompanyId(ed.company_id as string);
+      if (et === "stage") {
+        const n = (ed.name as string) || "";
+        const s = STAGES[n];
+        const d = (ed.detail as string) || "";
+        setCurrentStage(n);
+        setStatus(`${s?.label || n}${d ? ` — ${d}` : ""}`);
+      } else if (et === "pipeline_start") { setStatus("Pipeline Started"); }
+      else if (et === "pipeline_complete") { setStatus("Compilation Finished"); setPipelineDone(true); es.close(); }
+      else if (et === "pipeline_error") { setStatus(`Error: ${(ed.error as string) || "Unknown"}`); setPipelineError((ed.error as string) || "Unknown error"); es.close(); }
     };
+    es.onerror = () => es.close();
+    return () => es.close();
+  }, [jobId]);
 
-    eventSource.onerror = () => {
-      eventSource.close();
-    };
+  useEffect(() => { if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight; }, [logs]);
 
-    return () => eventSource.close();
-  }, [jobId]);
+  const stageKeys = ["LOADING_DOCS", "CHUNKING", "EXTRACT_DECISIONS", "EXTRACT_WORKFLOWS", "EXTRACT_EXCEPTIONS", "DETECT_CONTRADICTIONS", "SYNTHESIZING_SKILLS", "LINKING_EVIDENCE", "SCORING_CONFIDENCE", "WRITING_DB"];
+  const completedStages = new Set(logs.filter(l => l.type === "stage").map(l => l.data?.name as string));
+  const currentIdx = currentStage ? stageKeys.findIndex(k => k === currentStage || k + "_DONE" === currentStage) : -1;
+  const progress = pipelineDone ? 100 : pipelineError ? 0 : Math.max(0, Math.round(((currentIdx + 1) / stageKeys.length) * 100));
 
   return (
-    <div className="min-h-screen p-8 flex flex-col">
-      <div className="flex justify-between items-center mb-6 border-b border-gray-800 pb-4">
-        <h1 className="text-2xl font-bold text-primary">Pipeline Stream</h1>
-        <div className="flex items-center gap-4">
-          <span
-            className={`px-3 py-1 font-mono text-sm border ${
-              status.includes("Finished") || status.includes("Complete")
-                ? "border-green-500 text-green-500"
-                : status.includes("Error")
-                ? "border-red-500 text-red-500"
-                : "border-primary text-primary animate-pulse"
-            }`}
-          >
-            {status}
+    <DashboardLayout>
+      <div className="p-6 lg:p-8 max-w-6xl mx-auto animate-fade-in">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight" style={{ color: "var(--text-primary)" }}>Compile Pipeline</h1>
+            <p className="text-sm mt-1 font-mono" style={{ color: "var(--text-muted)" }}>Job: {jobId}</p>
+          </div>
+          <span className={`badge ${pipelineDone ? "badge--success" : pipelineError ? "badge--error" : "badge--primary"}`}>
+            {pipelineDone ? "✓ Complete" : pipelineError ? "✕ Failed" : "● Running"}
           </span>
-          <button onClick={() => router.push("/")} className="text-text-secondary hover:text-foreground">
-            Back
-          </button>
         </div>
-      </div>
 
-      <div className="flex-1 bg-surface border border-gray-800 p-4 font-mono text-sm overflow-y-auto">
-        {logs.map((log, i) => {
-          const isStage = log.type === "stage";
-          const stageName = isStage ? log.data?.name : log.type;
-          const label = STAGE_LABELS[stageName] || stageName;
-          const detail = isStage ? log.data?.detail || "" : JSON.stringify(log.data);
-          const isError = stageName?.includes("error") || stageName?.includes("Error");
+        {/* Progress Bar */}
+        <div className="mb-6">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-xs font-mono" style={{ color: "var(--text-muted)" }}>{status}</span>
+            <span className="text-xs font-mono font-bold" style={{ color: "var(--primary)" }}>{progress}%</span>
+          </div>
+          <div className="progress-bar"><div className="progress-bar__fill" style={{ width: `${progress}%`, background: pipelineError ? "var(--error)" : "var(--primary)" }} /></div>
+        </div>
 
-          return (
-            <div key={i} className="mb-2">
-              <span className="text-text-secondary">[{log.timestamp}]</span>{" "}
-              <span className={isError ? "text-red-500" : "text-primary"}>{label}</span>{" "}
-              <span className="text-foreground">{detail}</span>
+        {/* Success Card */}
+        {pipelineDone && (
+          <GlassCard className="mb-6" style={{ borderColor: "rgba(52,211,153,0.3)" } as React.CSSProperties}>
+            <div className="flex items-center gap-3 mb-4">
+              <span className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: "var(--success-bg)", color: "var(--success)" }}>
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 10l4 4 8-8" strokeLinecap="round" strokeLinejoin="round" /></svg>
+              </span>
+              <div>
+                <h2 className="text-lg font-bold" style={{ color: "var(--success)" }}>Brain Compiled Successfully!</h2>
+                <p className="text-sm" style={{ color: "var(--text-muted)" }}>Your operational brain is ready.{companyId && <> Company: <span className="font-mono" style={{ color: "var(--primary)" }}>{companyId}</span></>}</p>
+              </div>
+            </div>
+            <div className="flex gap-3 flex-wrap">
+              {companyId && (<><button onClick={() => router.push(`/demo/${companyId}`)} className="btn-primary">Query Demo</button><button onClick={() => router.push(`/skills/${companyId}`)} className="btn-secondary">View Skills</button></>)}
+              <button onClick={() => router.push("/")} className="btn-ghost">Dashboard</button>
+            </div>
+          </GlassCard>
+        )}
+
+        {/* Error Card */}
+        {pipelineError && (
+          <GlassCard className="mb-6" style={{ borderColor: "rgba(248,113,113,0.3)" } as React.CSSProperties}>
+            <div className="flex items-center gap-3 mb-4">
+              <span className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: "var(--error-bg)", color: "var(--error)" }}>
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l8 8M14 6l-8 8" strokeLinecap="round" /></svg>
+              </span>
+              <div>
+                <h2 className="text-lg font-bold" style={{ color: "var(--error)" }}>Compilation Failed</h2>
+                <p className="text-sm" style={{ color: "var(--text-muted)" }}>{pipelineError}</p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <button onClick={() => window.location.reload()} className="btn-secondary">Retry</button>
+              <button onClick={() => router.push("/")} className="btn-ghost">Dashboard</button>
             </div>
-          );
-        })}
+          </GlassCard>
+        )}
+
+        {/* Pipeline Stages + Terminal */}
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          {/* Pipeline Stages */}
+          <div className="lg:col-span-2">
+            <GlassCard elevated padding="lg">
+              <p className="input-label mb-4">Pipeline Stages</p>
+              <div className="space-y-0">
+                {stageKeys.map((key, i) => {
+                  const s = STAGES[key];
+                  const done = completedStages.has(key) || completedStages.has(key + "_DONE");
+                  const active = currentStage === key;
+                  const isPast = currentIdx > i || pipelineDone;
+                  return (
+                    <div key={key}>
+                      <div className="flex items-center gap-3 py-2.5">
+                        <span className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0" style={{
+                          background: done || isPast ? "var(--primary)" : active ? "var(--primary-ghost)" : "rgba(255,255,255,0.04)",
+                          color: done || isPast ? "var(--text-inverse)" : active ? "var(--primary)" : "var(--text-muted)",
+                          border: active ? "1px solid var(--primary)" : "1px solid transparent",
+                        }}>
+                          {done || isPast ? "✓" : i + 1}
+                        </span>
+                        <span className="text-sm" style={{ color: done || isPast ? "var(--text-primary)" : active ? "var(--primary)" : "var(--text-muted)" }}>
+                          {s?.label || key}
+                        </span>
+                        {active && !done && !isPast && <span className="w-1.5 h-1.5 rounded-full animate-pulse ml-auto" style={{ background: "var(--primary)" }} />}
+                      </div>
+                      {i < stageKeys.length - 1 && <div className="ml-3.5 w-px h-3" style={{ background: isPast ? "var(--primary-dim)" : "var(--border)" }} />}
+                    </div>
+                  );
+                })}
+              </div>
+            </GlassCard>
+          </div>
+
+          {/* Terminal Log */}
+          <div className="lg:col-span-3">
+            <div className="terminal h-[500px]" ref={logRef}>
+              <div className="flex items-center gap-2 mb-3 pb-3" style={{ borderBottom: "1px solid var(--border)" }}>
+                <span className="w-2 h-2 rounded-full" style={{ background: pipelineDone ? "var(--success)" : pipelineError ? "var(--error)" : "var(--primary)" }} />
+                <span className="text-xs font-bold uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>Live Log</span>
+              </div>
+              {logs.map((log, i) => {
+                const isStage = log.type === "stage";
+                const sn = isStage ? (log.data?.name as string) : log.type;
+                const s = STAGES[sn];
+                const label = s?.label || sn;
+                const detail = isStage ? (log.data?.detail as string) || "" : JSON.stringify(log.data);
+                const isErr = sn?.includes("error");
+                return (
+                  <div key={i} className="terminal-line mb-1">
+                    <span className="terminal-time">{log.timestamp}</span>
+                    <span className={isErr ? "terminal-error" : "terminal-event"}>{label}</span>
+                    {detail && <span className="terminal-detail">{detail}</span>}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </DashboardLayout>
   );
 }

frontend/src/app/demo/[companyId]/page.tsx

@@ -2,6 +2,10 @@
 
 import { useState, use } from "react";
 import { useRouter } from "next/navigation";
+import { API_BASE } from "@/lib/api";
+import DashboardLayout from "@/components/DashboardLayout";
+import GlassCard from "@/components/ui/GlassCard";
+import ConfidenceBadge from "@/components/ui/ConfidenceBadge";
 
 type AgentResponse = {
   recommended_action?: string;
@@ -14,256 +18,100 @@ type AgentResponse = {
   error?: string;
 };
 
+const PRESETS = [
+  { label: "Enterprise Refund", scenario: "Enterprise customer, 18 months tenure, wants a $1,200 refund for unused seats", context: '{"plan": "enterprise", "tenure_months": 18, "refund_amount": 1200}' },
+  { label: "Priority Escalation", scenario: "Customer has been waiting 3 days for a response on a billing issue and is threatening to churn", context: '{"issue_type": "billing", "wait_days": 3, "sentiment": "frustrated"}' },
+  { label: "New Hire Onboarding", scenario: "New support agent just started, needs to know the standard process for handling refund requests", context: '{"agent_level": "junior", "department": "support"}' },
+];
+
 export default function QueryDemo({ params }: { params: Promise<{ companyId: string }> }) {
   const resolvedParams = use(params);
   const companyId = resolvedParams.companyId;
   const [scenario, setScenario] = useState("");
-  const [contextJson, setContextJson] = useState("{}");
+  const [contextJson, setContextJson] = useState("");
   const [loading, setLoading] = useState(false);
-
-  const [withBrainResponse, setWithBrainResponse] = useState<AgentResponse | null>(null);
-  const [withoutBrainResponse, setWithoutBrainResponse] = useState<AgentResponse | null>(null);
-
+  const [withBrain, setWithBrain] = useState<AgentResponse | null>(null);
+  const [withoutBrain, setWithoutBrain] = useState<AgentResponse | null>(null);
   const router = useRouter();
 
+  const applyPreset = (p: (typeof PRESETS)[0]) => { setScenario(p.scenario); setContextJson(p.context); setWithBrain(null); setWithoutBrain(null); };
+
   const handleQuery = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!scenario) return;
-    setLoading(true);
-    setWithBrainResponse(null);
-    setWithoutBrainResponse(null);
-
-    let parsedContext = {};
-    try {
-      if (contextJson.trim()) {
-        parsedContext = JSON.parse(contextJson);
-      }
-    } catch {
-      alert("Invalid JSON in context field");
-      setLoading(false);
-      return;
-    }
-
+    setLoading(true); setWithBrain(null); setWithoutBrain(null);
+    let ctx = {};
+    try { if (contextJson.trim()) ctx = JSON.parse(contextJson); } catch { alert("Invalid JSON"); setLoading(false); return; }
     try {
-      const [resWithBrain, resWithoutBrain] = await Promise.all([
-        fetch("http://localhost:8080/agent/handle", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ company_id: companyId, scenario, context: parsedContext, with_brain: true }),
-        }),
-        fetch("http://localhost:8080/agent/handle", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ company_id: companyId, scenario, context: parsedContext, with_brain: false }),
-        }),
+      const [r1, r2] = await Promise.all([
+        fetch(`${API_BASE}/agent/handle`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ company_id: companyId, scenario, context: ctx, with_brain: true }) }),
+        fetch(`${API_BASE}/agent/handle`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ company_id: companyId, scenario, context: ctx, with_brain: false }) }),
       ]);
-
-      setWithBrainResponse(await resWithBrain.json());
-      setWithoutBrainResponse(await resWithoutBrain.json());
-    } catch (err) {
-      console.error(err);
-      alert("Query failed — is the backend running?");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const confidenceColor = (c: number) => {
-    if (c >= 0.75) return "bg-green-500";
-    if (c >= 0.5) return "bg-yellow-500";
-    if (c >= 0.25) return "bg-orange-500";
-    return "bg-red-500";
+      setWithBrain(await r1.json()); setWithoutBrain(await r2.json());
+    } catch { alert("Query failed — is the backend running?"); } finally { setLoading(false); }
   };
 
   return (
-    <div className="min-h-screen p-8 flex flex-col items-center">
-      <div className="w-full max-w-5xl">
-        <div className="flex justify-between items-center mb-6 border-b border-gray-800 pb-4">
-          <h1 className="text-2xl font-bold text-primary">Brain Query Demo</h1>
-          <button onClick={() => router.push("/")} className="text-text-secondary hover:text-foreground">
-            Back to Dashboard
-          </button>
+    <DashboardLayout>
+      <div className="p-6 lg:p-8 max-w-6xl mx-auto animate-fade-in">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight" style={{ color: "var(--text-primary)" }}>Brain Query Demo</h1>
+            <p className="text-sm mt-1" style={{ color: "var(--text-muted)" }}>Compare AI responses with and without your compiled brain</p>
+          </div>
+          <button onClick={() => router.push(`/skills/${companyId}`)} className="btn-secondary">View Skills</button>
         </div>
 
-        <form onSubmit={handleQuery} className="mb-8 bg-surface p-6 border border-gray-800">
-          <div className="flex flex-col gap-4">
-            <div>
-              <label className="block text-text-secondary text-sm font-bold mb-2">Scenario</label>
-              <textarea
-                className="w-full px-4 py-3 bg-background border border-gray-700 text-foreground focus:outline-none focus:border-primary min-h-[100px]"
-                placeholder="Enterprise customer, 18 months tenure, wants $1,200 refund"
-                value={scenario}
-                onChange={(e) => setScenario(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="block text-text-secondary text-sm font-bold mb-2">Context (JSON)</label>
-              <textarea
-                className="w-full px-4 py-3 bg-background border border-gray-700 text-foreground focus:outline-none focus:border-primary font-mono text-sm min-h-[80px]"
-                placeholder='{"plan": "enterprise", "tenure_months": 18, "refund_amount": 1200}'
-                value={contextJson}
-                onChange={(e) => setContextJson(e.target.value)}
-              />
-            </div>
-            <button
-              type="submit"
-              disabled={loading || !scenario}
-              className="bg-primary text-background font-bold py-3 px-6 hover:opacity-90 disabled:opacity-50 self-end"
-            >
-              {loading ? "Thinking..." : "Compare Models"}
-            </button>
+        <div className="mb-6">
+          <p className="input-label mb-2">Quick Presets</p>
+          <div className="flex gap-2 flex-wrap">
+            {PRESETS.map((p) => (<button key={p.label} onClick={() => applyPreset(p)} className="badge" style={{ background: "var(--primary-ghost)", color: "var(--primary)", border: "1px solid rgba(0,210,180,0.2)", cursor: "pointer" }}>{p.label}</button>))}
           </div>
-        </form>
-
-        {(withBrainResponse || withoutBrainResponse) && (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* WITHOUT BRAIN */}
-            <div className="bg-surface border border-gray-800 p-6 opacity-75">
-              <h2 className="text-xl font-bold text-gray-400 mb-4 flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-gray-500"></span>
-                Without Brain (Generic AI)
-              </h2>
-
-              {withoutBrainResponse ? (
-                <div className="space-y-4 text-gray-300">
-                  <div>
-                    <h3 className="text-gray-500 text-sm font-bold uppercase tracking-wider mb-1">Response</h3>
-                    <p className="text-lg bg-background p-4 border border-gray-800 rounded">
-                      {withoutBrainResponse.recommended_action || "No action"}
-                    </p>
-                  </div>
-                  <div>
-                    <h3 className="text-gray-500 text-sm font-bold uppercase tracking-wider mb-1">Rule Applied</h3>
-                    <p className="italic">{withoutBrainResponse.rule_applied || "General knowledge"}</p>
-                  </div>
-                  {withoutBrainResponse.reasoning && (
-                    <div>
-                      <h3 className="text-gray-500 text-sm font-bold uppercase tracking-wider mb-1">Reasoning</h3>
-                      <p className="text-sm">{withoutBrainResponse.reasoning}</p>
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <p>Loading...</p>
-              )}
-            </div>
+        </div>
 
-            {/* WITH BRAIN */}
-            <div className="bg-surface border-2 border-primary p-6 relative shadow-[0_0_15px_rgba(45,212,191,0.1)]">
-              <div className="absolute -top-3 -right-3 bg-primary text-background text-xs font-bold px-3 py-1 uppercase tracking-wider rounded-full">
-                Company Brain
+        <GlassCard className="mb-8">
+          <form onSubmit={handleQuery} className="space-y-4">
+            <div><label className="input-label">Scenario</label><textarea className="input-field" style={{ minHeight: "100px" }} placeholder="Describe the scenario..." value={scenario} onChange={(e) => setScenario(e.target.value)} /></div>
+            <div><label className="input-label">Context (JSON)</label><textarea className="input-field input-field--mono" style={{ minHeight: "80px" }} placeholder='{"plan": "enterprise"}' value={contextJson} onChange={(e) => setContextJson(e.target.value)} /></div>
+            <div className="flex justify-end"><button type="submit" disabled={loading || !scenario} className="btn-primary">{loading ? "Processing..." : "Compare Models"}</button></div>
+          </form>
+        </GlassCard>
+
+        {(withBrain || withoutBrain) && (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 stagger-children">
+            <GlassCard className="opacity-70">
+              <div className="flex items-center gap-2 mb-5">
+                <span className="w-2.5 h-2.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+                <h2 className="text-lg font-bold" style={{ color: "var(--text-secondary)" }}>Without Brain</h2>
+                <span className="badge badge--neutral ml-auto">Generic AI</span>
               </div>
-              <h2 className="text-xl font-bold text-primary mb-4 flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
-                With Brain (Compiled Agent)
-              </h2>
-
-              {withBrainResponse ? (
-                <div className="space-y-4">
-                  {withBrainResponse.error ? (
-                    <p className="text-red-400">{withBrainResponse.error}</p>
-                  ) : (
-                    <>
-                      <div>
-                        <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-1">
-                          Recommended Action
-                        </h3>
-                        <p className="text-xl font-semibold text-white bg-primary/10 p-4 border border-primary/30 rounded">
-                          {withBrainResponse.recommended_action}
-                        </p>
-                      </div>
-
-                      <div className="grid grid-cols-2 gap-4">
-                        <div>
-                          <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-1">
-                            Skill Matched
-                          </h3>
-                          <p className="font-mono text-sm bg-background p-2 rounded">
-                            {withBrainResponse.skill_matched || "N/A"}
-                          </p>
-                        </div>
-                        <div>
-                          <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-1">
-                            Confidence
-                          </h3>
-                          <div className="flex items-center gap-2 mt-2">
-                            <div className="flex-1 bg-background h-2 rounded-full overflow-hidden">
-                              <div
-                                className={`h-full ${confidenceColor(withBrainResponse.confidence || 0)}`}
-                                style={{ width: `${(withBrainResponse.confidence || 0) * 100}%` }}
-                              ></div>
-                            </div>
-                            <span className="text-xs font-mono">
-                              {((withBrainResponse.confidence || 0) * 100).toFixed(0)}%
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Retrieval Scores */}
-                      {withBrainResponse.retrieval_scores && withBrainResponse.retrieval_scores.length > 0 && (
-                        <div>
-                          <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-1">
-                            Retrieval Scores (Top {withBrainResponse.retrieval_scores.length} Skills)
-                          </h3>
-                          <div className="flex gap-2 flex-wrap">
-                            {withBrainResponse.retrieval_scores.map((score, i) => (
-                              <span
-                                key={i}
-                                className="bg-background border border-gray-700 px-2 py-1 rounded text-xs font-mono"
-                              >
-                                #{i + 1}: {(score * 100).toFixed(1)}%
-                              </span>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-
-                      <div>
-                        <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-1">
-                          Rule Applied
-                        </h3>
-                        <p className="text-white border-l-2 border-primary pl-3 py-1 font-medium">
-                          {withBrainResponse.rule_applied}
-                        </p>
-                      </div>
-
-                      {/* Reasoning */}
-                      {withBrainResponse.reasoning && (
-                        <div>
-                          <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-1">
-                            LLM Reasoning
-                          </h3>
-                          <p className="text-sm text-gray-300 bg-background p-3 rounded border border-gray-800">
-                            {withBrainResponse.reasoning}
-                          </p>
-                        </div>
-                      )}
-
-                      {withBrainResponse.evidence && withBrainResponse.evidence.length > 0 && (
-                        <div>
-                          <h3 className="text-primary/70 text-sm font-bold uppercase tracking-wider mb-2">
-                            Evidence Trail
-                          </h3>
-                          <ul className="space-y-2">
-                            {withBrainResponse.evidence.map((src, i) => (
-                              <li key={i} className="text-gray-300 text-sm bg-background p-3 rounded border border-gray-800">
-                                {src}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-                      )}
-                    </>
-                  )}
-                </div>
-              ) : (
-                <p>Loading...</p>
-              )}
+              {withoutBrain ? (<div className="space-y-4">
+                <div><p className="input-label">Response</p><div className="p-4 rounded text-sm" style={{ background: "var(--bg-input)", color: "var(--text-secondary)", border: "1px solid var(--border)" }}>{withoutBrain.recommended_action || "No action"}</div></div>
+                <div><p className="input-label">Rule</p><p className="text-sm" style={{ color: "var(--text-muted)" }}>{withoutBrain.rule_applied || "General knowledge"}</p></div>
+                {withoutBrain.reasoning && <div><p className="input-label">Reasoning</p><p className="text-sm" style={{ color: "var(--text-muted)" }}>{withoutBrain.reasoning}</p></div>}
+              </div>) : <div className="animate-shimmer h-32 rounded" />}
+            </GlassCard>
+
+            <div className="glass-card p-5 relative" style={{ borderColor: "rgba(0,210,180,0.3)", boxShadow: "0 0 32px -8px rgba(0,210,180,0.08)" }}>
+              <span className="absolute -top-3 right-4 text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full" style={{ background: "var(--primary)", color: "var(--text-inverse)" }}>Company Brain</span>
+              <div className="flex items-center gap-2 mb-5"><span className="w-2.5 h-2.5 rounded-full animate-pulse" style={{ background: "var(--primary)" }} /><h2 className="text-lg font-bold" style={{ color: "var(--primary)" }}>With Brain</h2></div>
+              {withBrain ? (<div className="space-y-4">
+                {withBrain.error ? <p style={{ color: "var(--error)" }}>{withBrain.error}</p> : (<>
+                  <div><p className="input-label">Recommended Action</p><div className="p-4 rounded text-base font-medium" style={{ background: "var(--primary-ghost)", color: "var(--text-primary)", border: "1px solid rgba(0,210,180,0.15)" }}>{withBrain.recommended_action}</div></div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div><p className="input-label">Skill Matched</p><p className="font-mono text-sm" style={{ color: "var(--text-primary)" }}>{withBrain.skill_matched || "N/A"}</p></div>
+                    <div><p className="input-label">Confidence</p><div className="flex items-center gap-2 mt-1"><div className="progress-bar flex-1"><div className="progress-bar__fill" style={{ width: `${(withBrain.confidence || 0) * 100}%`, background: "var(--primary)" }} /></div><ConfidenceBadge value={withBrain.confidence || 0} /></div></div>
+                  </div>
+                  {withBrain.retrieval_scores && withBrain.retrieval_scores.length > 0 && <div><p className="input-label">Retrieval Scores</p><div className="flex gap-2 flex-wrap">{withBrain.retrieval_scores.map((s, i) => <span key={i} className="badge badge--neutral font-mono">#{i+1}: {(s*100).toFixed(1)}%</span>)}</div></div>}
+                  <div><p className="input-label">Rule Applied</p><p className="text-sm font-medium pl-3 py-1" style={{ color: "var(--text-primary)", borderLeft: "2px solid var(--primary)" }}>{withBrain.rule_applied}</p></div>
+                  {withBrain.reasoning && <div><p className="input-label">Reasoning</p><div className="text-sm p-3 rounded" style={{ color: "var(--text-secondary)", background: "var(--bg-input)", border: "1px solid var(--border)" }}>{withBrain.reasoning}</div></div>}
+                  {withBrain.evidence && withBrain.evidence.length > 0 && <div><p className="input-label">Evidence Trail</p><div className="space-y-2">{withBrain.evidence.map((src, i) => <div key={i} className="text-sm p-3 rounded" style={{ color: "var(--text-secondary)", background: "var(--bg-input)", border: "1px solid var(--border)" }}>{src}</div>)}</div></div>}
+                </>)}
+              </div>) : <div className="animate-shimmer h-32 rounded" />}
             </div>
           </div>
         )}
       </div>
-    </div>
+    </DashboardLayout>
   );
 }

frontend/src/app/globals.css

@@ -1,24 +1,517 @@
 @import "tailwindcss";
 
+/* ═══════════════════════════════════════════════
+   KERNL DESIGN SYSTEM — "Aerospace Grade"
+   Glassmorphism × Minimalism × Dark-first
+   ═══════════════════════════════════════════════ */
+
 :root {
-  --background: #0A0F14;
-  --foreground: #E2E8F0;
-  --surface: #131B23;
+  /* ── Core Palette ── */
+  --bg-base: #0A0F14;
+  --bg-surface: #111820;
+  --bg-elevated: #19222D;
+  --bg-input: #0C1218;
+  --bg-hover: #1E2A36;
+
+  /* ── Brand Teal ── */
   --primary: #00D2B4;
-  --text-secondary: #94A3B8;
+  --primary-hover: #00E8C8;
+  --primary-dim: #00A893;
+  --primary-ghost: rgba(0, 210, 180, 0.08);
+  --primary-glow: rgba(0, 210, 180, 0.15);
+
+  /* ── Text ── */
+  --text-primary: #E8EDF2;
+  --text-secondary: #8899A6;
+  --text-muted: #5C6F7E;
+  --text-inverse: #0A0F14;
+
+  /* ── Borders ── */
+  --border: rgba(255, 255, 255, 0.06);
+  --border-hover: rgba(255, 255, 255, 0.12);
+  --border-active: rgba(0, 210, 180, 0.3);
+
+  /* ── Status ── */
+  --success: #34D399;
+  --success-bg: rgba(52, 211, 153, 0.1);
+  --warning: #FBBF24;
+  --warning-bg: rgba(251, 191, 36, 0.1);
+  --error: #F87171;
+  --error-bg: rgba(248, 113, 113, 0.1);
+  --info: #60A5FA;
+  --info-bg: rgba(96, 165, 250, 0.1);
+
+  /* ── Spacing (8pt grid) ── */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* ── Radii ── */
+  --radius-sm: 4px;
+  --radius: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+
+  /* ── Sidebar ── */
+  --sidebar-width: 64px;
+
+  /* ── Typography ── */
+  --font-sans: 'Inter', var(--font-geist-sans), system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', var(--font-geist-mono), 'Fira Code', monospace;
 }
 
+/* ── Tailwind Theme Bridge ── */
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-surface: var(--surface);
+  --color-background: var(--bg-base);
+  --color-foreground: var(--text-primary);
+  --color-surface: var(--bg-surface);
+  --color-elevated: var(--bg-elevated);
   --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-dim: var(--primary-dim);
+  --color-primary-ghost: var(--primary-ghost);
   --color-text-secondary: var(--text-secondary);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-text-muted: var(--text-muted);
+  --color-border: var(--border);
+  --color-border-hover: var(--border-hover);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+  --color-info: var(--info);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
+/* ═══════════════ Global Base ═══════════════ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  color-scheme: dark;
+  background-color: #0A0F14;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background: #0A0F14 !important;
+  background-color: #0A0F14 !important;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Selection ── */
+::selection {
+  background: rgba(0, 210, 180, 0.25);
+  color: #fff;
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-hover);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ═══════════════ Animation Keyframes ═══════════════ */
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slide-in-right {
+  from { opacity: 0; transform: translateX(24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slide-in-left {
+  from { opacity: 0; transform: translateX(-24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 210, 180, 0.2); }
+  50% { box-shadow: 0 0 16px 4px rgba(0, 210, 180, 0.15); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes flow-dots {
+  0% { background-position: 0 0; }
+  100% { background-position: 24px 0; }
+}
+
+/* ═══════════════ Utility Classes ═══════════════ */
+
+.animate-fade-in {
+  animation: fade-in 0.4s ease-out both;
+}
+
+.animate-fade-up {
+  animation: fade-up 0.5s ease-out both;
+}
+
+.animate-slide-right {
+  animation: slide-in-right 0.4s ease-out both;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-shimmer {
+  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.04) 50%, transparent 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s linear infinite;
+}
+
+.animate-spin-slow {
+  animation: spin 2s linear infinite;
+}
+
+/* ── Stagger children ── */
+.stagger-children > * {
+  animation: fade-up 0.4s ease-out both;
+}
+.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
+.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
+.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
+.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
+
+/* ═══════════════ Component Primitives ═══════════════ */
+
+/* ── Glass Card ── */
+.glass-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  backdrop-filter: blur(12px);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.glass-card:hover {
+  border-color: var(--border-hover);
+}
+
+.glass-card--interactive:hover {
+  border-color: var(--border-active);
+  box-shadow: 0 0 24px -8px rgba(0, 210, 180, 0.08);
+  cursor: pointer;
+}
+
+.glass-card--elevated {
+  background: var(--bg-elevated);
+  border-color: var(--border-hover);
+}
+
+/* ── Gradient Mesh Background ── */
+.mesh-gradient {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(0, 210, 180, 0.04) 0%, transparent 60%),
+    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(96, 165, 250, 0.03) 0%, transparent 60%),
+    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(139, 92, 246, 0.02) 0%, transparent 60%);
+  pointer-events: none;
+}
+
+/* ── Button Styles ── */
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: var(--primary);
+  color: var(--text-inverse);
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: var(--radius);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+  box-shadow: 0 0 20px -4px rgba(0, 210, 180, 0.3);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: transparent;
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-hover);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.btn-secondary:hover {
+  background: var(--bg-hover);
+  border-color: var(--text-muted);
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: transparent;
+  color: var(--primary);
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: var(--radius);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.btn-ghost:hover {
+  background: var(--primary-ghost);
+}
+
+/* ── Input Styles ── */
+.input-field {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: var(--font-sans);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  outline: none;
+}
+
+.input-field::placeholder {
+  color: var(--text-muted);
+}
+
+.input-field:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(0, 210, 180, 0.1);
+}
+
+.input-field--mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+/* ── Label ── */
+.input-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+/* ── Badge/Chip ── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  letter-spacing: 0.02em;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+
+.badge--primary {
+  background: var(--primary-ghost);
+  color: var(--primary);
+  border: 1px solid rgba(0, 210, 180, 0.2);
+}
+
+.badge--success {
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid rgba(52, 211, 153, 0.2);
+}
+
+.badge--warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+  border: 1px solid rgba(251, 191, 36, 0.2);
+}
+
+.badge--error {
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid rgba(248, 113, 113, 0.2);
+}
+
+.badge--info {
+  background: var(--info-bg);
+  color: var(--info);
+  border: 1px solid rgba(96, 165, 250, 0.2);
+}
+
+.badge--neutral {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+/* ── Pipeline Node ── */
+.pipeline-connector {
+  width: 2px;
+  height: 32px;
+  margin: 0 auto;
+  background: linear-gradient(to bottom, var(--primary-dim), var(--border));
+  position: relative;
+}
+
+.pipeline-connector--active {
+  background: var(--primary);
+  box-shadow: 0 0 8px rgba(0, 210, 180, 0.3);
+}
+
+.pipeline-connector--pending {
+  background: var(--border);
+}
+
+/* ── Terminal Log ── */
+.terminal {
+  background: #05070A;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+.terminal-line {
+  display: flex;
+  gap: 8px;
+}
+
+.terminal-time {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.terminal-event {
+  color: var(--primary);
+}
+
+.terminal-detail {
+  color: var(--text-secondary);
+}
+
+.terminal-error {
+  color: var(--error);
+}
+
+/* ── Progress Bar ── */
+.progress-bar {
+  height: 6px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Empty State ── */
+.empty-state {
+  text-align: center;
+  padding: var(--space-16) var(--space-8);
+}
+
+.empty-state__icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto var(--space-6);
+  border-radius: var(--radius-md);
+  background: var(--primary-ghost);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary);
+  font-size: 24px;
+}
+
+/* ═══════════════ Reduced Motion ═══════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { AuthProvider } from "@/lib/auth";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kernl — Company Brain Compiler",
+  description: "Compile operational knowledge into executable skills",
 };
 
 export default function RootLayout({
@@ -27,7 +28,11 @@ export default function RootLayout({
       lang="en"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full" style={{ background: "var(--bg-base)" }}>
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+      </body>
     </html>
   );
 }

frontend/src/app/login/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await login(email, password);
+      router.push("/");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-6 relative">
+      {/* Background mesh */}
+      <div className="mesh-gradient" />
+
+      {/* Auth Card */}
+      <div
+        className="w-full max-w-sm animate-fade-up"
+        style={{ animationDelay: "0.1s" }}
+      >
+        {/* Logo */}
+        <div className="flex items-center justify-center mb-8">
+          <div
+            className="w-12 h-12 rounded-xl flex items-center justify-center animate-pulse-glow"
+            style={{
+              background: "var(--primary-ghost)",
+              color: "var(--primary)",
+            }}
+          >
+            <svg width="24" height="24" viewBox="0 0 18 18" fill="none">
+              <path
+                d="M3 2h3v14H3V2zm5 0h2l5 7-5 7H8l5-7-5-7z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div className="glass-card p-8">
+          <h1
+            className="text-xl font-bold mb-1 text-center"
+            style={{ color: "var(--text-primary)" }}
+          >
+            Welcome back
+          </h1>
+          <p
+            className="text-sm text-center mb-6"
+            style={{ color: "var(--text-muted)" }}
+          >
+            Sign in to your Kernl workspace
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="input-label">Email</label>
+              <input
+                type="email"
+                className="input-field"
+                placeholder="you@company.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <label className="input-label">Password</label>
+              <input
+                type="password"
+                className="input-field"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+
+            {error && (
+              <div
+                className="text-sm px-3 py-2 rounded"
+                style={{
+                  color: "var(--error)",
+                  background: "var(--error-bg)",
+                  border: "1px solid rgba(248, 113, 113, 0.2)",
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn-primary w-full"
+              style={{ padding: "12px 20px" }}
+            >
+              {loading ? (
+                <span className="animate-spin-slow inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full" />
+              ) : (
+                "Sign In"
+              )}
+            </button>
+          </form>
+
+          <p
+            className="text-sm mt-6 text-center"
+            style={{ color: "var(--text-muted)" }}
+          >
+            No account?{" "}
+            <a
+              href="/register"
+              className="font-medium transition-colors"
+              style={{ color: "var(--primary)" }}
+            >
+              Create one
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/onboarding/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { API_BASE } from "@/lib/api";
+import DashboardLayout from "@/components/DashboardLayout";
+import GlassCard from "@/components/ui/GlassCard";
+
+type AnalysisResult = { suggested_industry: string; suggested_departments: string[]; suggested_size: string; rationale: string };
+
+const STEP_LABELS = ["Company", "Upload", "Configure", "Compile"];
+
+export default function OnboardingWizard() {
+  const [step, setStep] = useState(1);
+  const [companyName, setCompanyName] = useState("");
+  const [companyId, setCompanyId] = useState("");
+  const [files, setFiles] = useState<FileList | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [analyzing, setAnalyzing] = useState(false);
+  const [analysis, setAnalysis] = useState<AnalysisResult | null>(null);
+  const [compiling, setCompiling] = useState(false);
+  const [error, setError] = useState("");
+  const [skippedUpload, setSkippedUpload] = useState(false);
+  const [showSkipOptions, setShowSkipOptions] = useState(false);
+  const [loadingSamples, setLoadingSamples] = useState(false);
+  const [sourceCount, setSourceCount] = useState(0);
+  const [manualIndustry, setManualIndustry] = useState("");
+  const [manualSize, setManualSize] = useState("");
+  const [manualDescription, setManualDescription] = useState("");
+  const router = useRouter();
+
+  const generateId = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+  const handleBack = () => { setError(""); if (step > 1) { setStep(step - 1); if (step === 3) setShowSkipOptions(false); } else router.push("/"); };
+
+  const handleNameSubmit = async () => {
+    if (!companyName.trim()) return;
+    const id = generateId(companyName);
+    setCompanyId(id); setError("");
+    try { await fetch(`${API_BASE}/companies/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: companyName }) }); } catch { /* ok */ }
+    // Persist so dashboard auto-loads this company
+    sessionStorage.setItem("kernl_company_id", id);
+    setStep(2);
+  };
+
+  const handleUpload = async () => {
+    if (!files || files.length === 0) return;
+    setUploading(true); setError("");
+    try {
+      for (const file of Array.from(files)) { const form = new FormData(); form.append("company_id", companyId); form.append("file", file); const res = await fetch(`${API_BASE}/sources/upload`, { method: "POST", body: form }); if (!res.ok) throw new Error(`Failed: ${file.name}`); }
+      setSourceCount(files.length); setSkippedUpload(false); setStep(3);
+    } catch (err: unknown) { setError(err instanceof Error ? err.message : "Upload failed"); } finally { setUploading(false); }
+  };
+
+  const handleLoadSamples = async () => {
+    setLoadingSamples(true); setError("");
+    try { const res = await fetch(`${API_BASE}/companies/${companyId}/load-samples`, { method: "POST" }); if (!res.ok) throw new Error("Failed to load sample data"); const data = await res.json(); setSourceCount(data.count || 0); setSkippedUpload(false); setShowSkipOptions(false); setStep(3); }
+    catch (err: unknown) { setError(err instanceof Error ? err.message : "Failed to load samples"); } finally { setLoadingSamples(false); }
+  };
+
+  const handleSkipToManual = () => { setSkippedUpload(true); setShowSkipOptions(false); setSourceCount(0); setStep(3); };
+
+  const handleAnalyze = async () => {
+    setAnalyzing(true); setError("");
+    try { const res = await fetch(`${API_BASE}/onboarding/analyze`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ company_id: companyId }) }); if (!res.ok) throw new Error("Analysis failed"); setAnalysis(await res.json()); }
+    catch (err: unknown) { setError(err instanceof Error ? err.message : "Analysis failed"); } finally { setAnalyzing(false); }
+  };
+
+  const handleSaveProfile = async () => {
+    setError(""); const payload: Record<string, string> = {};
+    if (analysis) { if (analysis.suggested_industry) payload.industry = analysis.suggested_industry; if (analysis.suggested_size) payload.company_size = analysis.suggested_size; if (analysis.rationale) payload.description = analysis.rationale; }
+    else { if (manualIndustry) payload.industry = manualIndustry; if (manualSize) payload.company_size = manualSize; if (manualDescription) payload.description = manualDescription; }
+    if (Object.keys(payload).length > 0) { try { await fetch(`${API_BASE}/companies/${companyId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }); } catch (err) { console.warn("Failed to save:", err); } }
+    setStep(4);
+  };
+
+  const handleCompile = async () => {
+    setCompiling(true); setError("");
+    try { const res = await fetch(`${API_BASE}/compile`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ company_id: companyId }) }); const data = await res.json(); if (data.job_id) router.push(`/compile/${data.job_id}`); }
+    catch { setError("Failed to start compilation"); setCompiling(false); }
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="p-6 lg:p-8 max-w-2xl mx-auto animate-fade-in">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-6">
+          <button onClick={handleBack} className="btn-ghost" style={{ padding: "6px 12px" }}>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 2L4 7l5 5" strokeLinecap="round" strokeLinejoin="round" /></svg>
+            {step > 1 ? "Back" : "Home"}
+          </button>
+          <h1 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Onboarding</h1>
+        </div>
+
+        {/* Progress Steps */}
+        <div className="flex mb-8 gap-1">
+          {STEP_LABELS.map((label, i) => (
+            <div key={label} className="flex-1">
+              <div className="flex items-center gap-2 mb-1.5">
+                <span className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold" style={{
+                  background: step > i + 1 || step === i + 1 ? "var(--primary)" : "rgba(255,255,255,0.05)",
+                  color: step > i + 1 || step === i + 1 ? "var(--text-inverse)" : "var(--text-muted)",
+                }}>{step > i + 1 ? "✓" : i + 1}</span>
+                <span className="text-xs font-medium" style={{ color: step === i + 1 ? "var(--primary)" : "var(--text-muted)" }}>{label}</span>
+              </div>
+              <div className="h-0.5 rounded-full" style={{ background: step > i + 1 ? "var(--primary)" : step === i + 1 ? "var(--primary-dim)" : "var(--border)" }} />
+            </div>
+          ))}
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="flex items-center justify-between mb-6 p-3 rounded text-sm" style={{ background: "var(--error-bg)", color: "var(--error)", border: "1px solid rgba(248,113,113,0.2)" }}>
+            <span>{error}</span>
+            <button onClick={() => setError("")} style={{ color: "var(--error)" }}>✕</button>
+          </div>
+        )}
+
+        {/* Step 1 */}
+        {step === 1 && (
+          <GlassCard elevated padding="lg">
+            <h2 className="text-lg font-bold mb-4" style={{ color: "var(--text-primary)" }}>Name your company</h2>
+            <input type="text" className="input-field mb-3" placeholder="e.g. Rivanly Inc." value={companyName} onChange={(e) => setCompanyName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && companyName && handleNameSubmit()} />
+            {companyName && <p className="text-xs mb-4" style={{ color: "var(--text-muted)" }}>ID: <span className="font-mono" style={{ color: "var(--primary)" }}>{generateId(companyName)}</span></p>}
+            <button onClick={handleNameSubmit} disabled={!companyName.trim()} className="btn-primary">Next →</button>
+          </GlassCard>
+        )}
+
+        {/* Step 2 */}
+        {step === 2 && (
+          <GlassCard elevated padding="lg">
+            <h2 className="text-lg font-bold mb-2" style={{ color: "var(--text-primary)" }}>Upload source documents</h2>
+            <p className="text-sm mb-4" style={{ color: "var(--text-muted)" }}>SOPs, Slack exports, Zendesk tickets — anything with operational knowledge.</p>
+            <input type="file" multiple onChange={(e) => setFiles(e.target.files)} className="w-full text-sm mb-4 file:mr-4 file:py-2 file:px-4 file:border-0 file:rounded file:font-medium" style={{ color: "var(--text-secondary)" }} />
+            <div className="flex gap-3 mb-4">
+              <button onClick={handleUpload} disabled={!files || uploading} className="btn-primary">{uploading ? "Uploading..." : "Upload & Continue"}</button>
+              <button onClick={() => setShowSkipOptions(true)} className="btn-secondary">Skip</button>
+            </div>
+            {showSkipOptions && (
+              <div className="space-y-3 p-4 rounded" style={{ background: "var(--bg-input)", border: "1px solid var(--border)" }}>
+                <p className="text-sm" style={{ color: "var(--text-muted)" }}>No files? Choose how to proceed:</p>
+                <button onClick={handleLoadSamples} disabled={loadingSamples} className="w-full text-left p-3 rounded transition-colors" style={{ background: "var(--primary-ghost)", border: "1px solid rgba(0,210,180,0.2)", color: "var(--primary)" }}>
+                  <span className="font-semibold">{loadingSamples ? "Loading..." : "Load Sample Playbooks"}</span>
+                  <span className="block text-xs mt-1" style={{ color: "var(--text-muted)" }}>Pre-configured demo data</span>
+                </button>
+                <button onClick={handleSkipToManual} className="w-full text-left p-3 rounded transition-colors" style={{ background: "rgba(255,255,255,0.03)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                  <span className="font-semibold">Configure Manually</span>
+                  <span className="block text-xs mt-1" style={{ color: "var(--text-muted)" }}>Set up by hand</span>
+                </button>
+                <button onClick={() => setShowSkipOptions(false)} className="text-sm" style={{ color: "var(--text-muted)" }}>Cancel</button>
+              </div>
+            )}
+          </GlassCard>
+        )}
+
+        {/* Step 3 */}
+        {step === 3 && (
+          <div className="space-y-6">
+            {!skippedUpload && (
+              <GlassCard elevated padding="lg">
+                <h2 className="text-lg font-bold mb-2" style={{ color: "var(--text-primary)" }}>AI Analysis</h2>
+                <p className="text-sm mb-4" style={{ color: "var(--text-muted)" }}>Analyze your {sourceCount} document{sourceCount !== 1 ? "s" : ""} to suggest profile settings.</p>
+                {!analysis ? (
+                  <div className="flex gap-3">
+                    <button onClick={handleAnalyze} disabled={analyzing} className="btn-primary">{analyzing ? "Analyzing..." : "Analyze Documents"}</button>
+                    <button onClick={handleSaveProfile} className="btn-secondary">Skip to Compile →</button>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    <div className="grid grid-cols-3 gap-3">
+                      {[{ label: "Industry", val: analysis.suggested_industry }, { label: "Size", val: analysis.suggested_size }, { label: "Depts", val: String(analysis.suggested_departments.length) }].map(({ label, val }) => (
+                        <div key={label} className="p-3 rounded" style={{ background: "var(--bg-input)", border: "1px solid var(--border)" }}>
+                          <p className="text-[10px] uppercase tracking-wider font-mono" style={{ color: "var(--text-muted)" }}>{label}</p>
+                          <p className="font-bold" style={{ color: "var(--text-primary)" }}>{val}</p>
+                        </div>
+                      ))}
+                    </div>
+                    {analysis.suggested_departments.length > 0 && <div className="flex flex-wrap gap-2">{analysis.suggested_departments.map((d) => <span key={d} className="badge badge--primary">{d}</span>)}</div>}
+                    {analysis.rationale && <p className="text-sm p-3 rounded" style={{ color: "var(--text-muted)", background: "var(--bg-input)", border: "1px solid var(--border)" }}>{analysis.rationale}</p>}
+                    <button onClick={handleSaveProfile} className="btn-primary">Save & Continue</button>
+                  </div>
+                )}
+              </GlassCard>
+            )}
+            {skippedUpload && (
+              <GlassCard elevated padding="lg">
+                <h2 className="text-lg font-bold mb-2" style={{ color: "var(--text-primary)" }}>Company Profile</h2>
+                <p className="text-sm mb-4" style={{ color: "var(--text-muted)" }}>Set up manually. You can update later.</p>
+                <div className="space-y-4">
+                  <div><label className="input-label">Industry</label><select value={manualIndustry} onChange={(e) => setManualIndustry(e.target.value)} className="input-field"><option value="">Select industry...</option>{["SaaS", "E-commerce", "FinTech", "HealthTech", "EdTech", "Consulting", "Manufacturing", "Other"].map(v => <option key={v} value={v}>{v}</option>)}</select></div>
+                  <div><label className="input-label">Size</label><select value={manualSize} onChange={(e) => setManualSize(e.target.value)} className="input-field"><option value="">Select size...</option>{["1-10", "11-50", "51-200", "201+"].map(v => <option key={v} value={v}>{v} employees</option>)}</select></div>
+                  <div><label className="input-label">Description</label><textarea value={manualDescription} onChange={(e) => setManualDescription(e.target.value)} placeholder="Brief description..." className="input-field" style={{ minHeight: "80px" }} /></div>
+                </div>
+                <div className="flex gap-3 mt-6">
+                  <button onClick={handleSaveProfile} className="btn-primary">Save & Continue →</button>
+                  <button onClick={() => setStep(4)} className="btn-secondary">Skip to Compile</button>
+                </div>
+              </GlassCard>
+            )}
+          </div>
+        )}
+
+        {/* Step 4 */}
+        {step === 4 && (
+          <GlassCard elevated padding="lg" className="text-center">
+            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ background: "var(--primary-ghost)", color: "var(--primary)" }}>
+              <svg width="28" height="28" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="10" cy="10" r="7" /><path d="M10 6v4l3 2" strokeLinecap="round" /></svg>
+            </div>
+            <h2 className="text-lg font-bold mb-2" style={{ color: "var(--text-primary)" }}>Ready to compile</h2>
+            <p className="text-sm mb-6" style={{ color: "var(--text-muted)" }}>
+              Company <span className="font-mono" style={{ color: "var(--primary)" }}>{companyId}</span>
+              {sourceCount > 0 && <> has <span className="font-bold" style={{ color: "var(--primary)" }}>{sourceCount}</span> source document{sourceCount !== 1 ? "s" : ""}</>}
+              . Compile your brain now.
+            </p>
+            <div className="flex gap-3 justify-center">
+              <button onClick={handleCompile} disabled={compiling} className="btn-primary">{compiling ? "Starting..." : "Compile Brain"}</button>
+              <button onClick={() => router.push(`/skills/${companyId}`)} className="btn-secondary">View Skills</button>
+            </div>
+          </GlassCard>
+        )}
+      </div>
+    </DashboardLayout>
+  );
+}

frontend/src/app/page.tsx

@@ -1,90 +1,342 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
+import { API_BASE } from "@/lib/api";
+import { useAuth } from "@/lib/auth";
+import DashboardLayout from "@/components/DashboardLayout";
+import StatCard from "@/components/ui/StatCard";
+import GlassCard from "@/components/ui/GlassCard";
+
+type CompanyInfo = {
+  id: string;
+  name?: string;
+  industry?: string;
+  company_size?: string;
+  skill_count?: number;
+  source_count?: number;
+  last_compile?: { completed_at: string; result_version: string } | null;
+};
 
 export default function Dashboard() {
   const [companyId, setCompanyId] = useState("");
   const [loading, setLoading] = useState(false);
+  const [company, setCompany] = useState<CompanyInfo | null>(null);
+  const [fetching, setFetching] = useState(false);
+  const [error, setError] = useState("");
+  const [autoLoaded, setAutoLoaded] = useState(false);
   const router = useRouter();
+  const { user } = useAuth();
+
+  const fetchCompany = useCallback(async (id: string) => {
+    if (!id) return;
+    setFetching(true);
+    setError("");
+    try {
+      const res = await fetch(`${API_BASE}/companies/${id}`);
+      if (!res.ok) throw new Error("Not found");
+      const data = await res.json();
+      setCompany(data);
+      // Persist the company ID so it auto-loads next time
+      sessionStorage.setItem("kernl_company_id", id);
+    } catch {
+      setCompany(null);
+      setError("Company not found. Create it first via Onboarding.");
+    } finally {
+      setFetching(false);
+    }
+  }, []);
+
+  // Auto-load saved company when user is signed in
+  useEffect(() => {
+    if (autoLoaded) return;
+    const savedCompanyId = sessionStorage.getItem("kernl_company_id");
+    if (savedCompanyId) {
+      setCompanyId(savedCompanyId);
+      fetchCompany(savedCompanyId);
+      setAutoLoaded(true);
+    }
+  }, [autoLoaded, fetchCompany]);
 
   const handleCompile = async () => {
     if (!companyId) return;
     setLoading(true);
     try {
-      const res = await fetch("http://localhost:8080/compile", {
+      const res = await fetch(`${API_BASE}/compile`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ company_id: companyId }),
       });
       const data = await res.json();
-      if (data.job_id) {
-        router.push(`/compile/${data.job_id}`);
-      }
-    } catch (err) {
-      console.error(err);
+      if (data.job_id) router.push(`/compile/${data.job_id}`);
+    } catch {
       alert("Failed to start compilation");
     } finally {
       setLoading(false);
     }
   };
 
-  const handleQuery = () => {
-    if (companyId) {
-      router.push(`/demo/${companyId}`);
-    }
-  };
-
-  const handleViewSkills = () => {
-    if (companyId) {
-      router.push(`/skills/${companyId}`);
-    }
-  };
+  // Determine if we should show the lookup section
+  // Hide it when we have a loaded company (auto or manual)
+  const showLookup = !company;
 
   return (
-    <div className="min-h-screen p-8 flex flex-col items-center justify-center">
-      <div className="max-w-md w-full bg-surface p-8 border border-gray-800 shadow-2xl">
-        <h1 className="text-3xl font-bold text-primary mb-6">Kernl Compilation</h1>
-        
-        <div className="mb-6">
-          <label className="block text-text-secondary text-sm font-bold mb-2">
-            Company ID
-          </label>
-          <input
-            type="text"
-            className="w-full px-3 py-2 bg-background border border-gray-700 text-foreground focus:outline-none focus:border-primary"
-            placeholder="e.g. comp_123"
-            value={companyId}
-            onChange={(e) => setCompanyId(e.target.value)}
-          />
+    <DashboardLayout>
+      <div className="p-6 lg:p-8 max-w-6xl mx-auto animate-fade-in">
+        {/* Page Header */}
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
+          <div>
+            <h1
+              className="text-2xl font-bold tracking-tight"
+              style={{ color: "var(--text-primary)" }}
+            >
+              {company ? company.name || companyId : "Command Center"}
+            </h1>
+            <p className="text-sm mt-1" style={{ color: "var(--text-muted)" }}>
+              {company
+                ? "Operational brain dashboard"
+                : "Compile operational knowledge into an executable AI brain"}
+            </p>
+          </div>
+          <div className="flex gap-3">
+            {company && (
+              <button
+                onClick={() => {
+                  setCompany(null);
+                  setCompanyId("");
+                  setError("");
+                  sessionStorage.removeItem("kernl_company_id");
+                }}
+                className="btn-ghost"
+                style={{ fontSize: "13px", padding: "8px 14px" }}
+              >
+                Switch Company
+              </button>
+            )}
+            <button
+              onClick={() => router.push("/onboarding")}
+              className="btn-secondary"
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M7 1v12M1 7h12" strokeLinecap="round" />
+              </svg>
+              New Company
+            </button>
+          </div>
         </div>
 
-        <div className="flex flex-col gap-3">
-          <button
-            onClick={handleCompile}
-            disabled={loading || !companyId}
-            className="w-full bg-primary text-background font-bold py-2 px-4 hover:opacity-90 disabled:opacity-50"
-          >
-            {loading ? "Starting..." : "Compile Brain"}
-          </button>
-          
-          <button
-            onClick={handleViewSkills}
-            disabled={!companyId}
-            className="w-full border border-primary text-primary font-bold py-2 px-4 hover:bg-primary/10 disabled:opacity-50"
-          >
-            View Skills File
-          </button>
-          
-          <button
-            onClick={handleQuery}
-            disabled={!companyId}
-            className="w-full border border-gray-600 text-foreground font-bold py-2 px-4 hover:bg-gray-800 disabled:opacity-50"
-          >
-            Query Agent Demo
-          </button>
-        </div>
+        {/* Company Lookup — only visible when no company is loaded */}
+        {showLookup && (
+          <GlassCard className="mb-8">
+            <label className="input-label">Company ID</label>
+            <div className="flex gap-3">
+              <input
+                type="text"
+                className="input-field input-field--mono flex-1"
+                placeholder="e.g. rivanly-inc"
+                value={companyId}
+                onChange={(e) => setCompanyId(e.target.value)}
+                onKeyDown={(e) =>
+                  e.key === "Enter" && companyId && fetchCompany(companyId)
+                }
+              />
+              <button
+                onClick={() => fetchCompany(companyId)}
+                disabled={!companyId || fetching}
+                className="btn-primary"
+              >
+                {fetching ? (
+                  <span className="animate-spin-slow inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full" />
+                ) : (
+                  "Load"
+                )}
+              </button>
+            </div>
+
+            {error && (
+              <p className="text-xs mt-2" style={{ color: "var(--error)" }}>
+                {error}
+              </p>
+            )}
+
+            {!company && !error && (
+              <p className="text-xs mt-3" style={{ color: "var(--text-muted)" }}>
+                Try:{" "}
+                <button
+                  onClick={() => {
+                    setCompanyId("rivanly-inc");
+                    fetchCompany("rivanly-inc");
+                  }}
+                  className="font-mono transition-colors"
+                  style={{ color: "var(--primary)" }}
+                >
+                  rivanly-inc
+                </button>{" "}
+                (pre-loaded demo company)
+              </p>
+            )}
+          </GlassCard>
+        )}
+
+        {/* Company Dashboard */}
+        {company && (
+          <div className="stagger-children">
+            {/* Stat Cards */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+              <StatCard
+                label="Skills"
+                value={company.skill_count ?? 0}
+                accent="primary"
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <path d="M2 4h12M2 8h8M2 12h10" strokeLinecap="round" />
+                  </svg>
+                }
+              />
+              <StatCard
+                label="Sources"
+                value={company.source_count ?? 0}
+                accent="info"
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <rect x="3" y="2" width="10" height="12" rx="1.5" />
+                    <path d="M6 5h4M6 8h4M6 11h2" strokeLinecap="round" />
+                  </svg>
+                }
+              />
+              <StatCard
+                label="Company Size"
+                value={company.company_size || "—"}
+                accent="warning"
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <circle cx="8" cy="5" r="3" />
+                    <path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6" strokeLinecap="round" />
+                  </svg>
+                }
+              />
+              <StatCard
+                label="Industry"
+                value={company.industry || "—"}
+                accent="success"
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <rect x="2" y="6" width="4" height="8" rx="0.5" />
+                    <rect x="6" y="3" width="4" height="11" rx="0.5" />
+                    <rect x="10" y="1" width="4" height="13" rx="0.5" />
+                  </svg>
+                }
+              />
+            </div>
+
+            {/* Quick Actions */}
+            <GlassCard className="mb-6" elevated>
+              <p
+                className="text-[10px] font-semibold uppercase tracking-[0.08em] font-mono mb-4"
+                style={{ color: "var(--text-muted)" }}
+              >
+                Quick Actions
+              </p>
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                <button onClick={handleCompile} disabled={loading} className="btn-primary w-full">
+                  {loading ? "Starting..." : "Compile Brain"}
+                </button>
+                <button
+                  onClick={() => router.push(`/skills/${companyId}`)}
+                  className="btn-secondary w-full"
+                >
+                  View Skills
+                </button>
+                <button
+                  onClick={() => router.push(`/demo/${companyId}`)}
+                  className="btn-secondary w-full"
+                >
+                  Query Agent
+                </button>
+                <button
+                  onClick={() => {
+                    const a = document.createElement("a");
+                    a.href = `${API_BASE}/skills/${companyId}/download`;
+                    a.click();
+                  }}
+                  className="btn-ghost w-full"
+                >
+                  Download JSON
+                </button>
+              </div>
+            </GlassCard>
+
+            {/* Last Compilation */}
+            {company.last_compile && (
+              <GlassCard>
+                <div className="flex items-center gap-3">
+                  <span
+                    className="w-8 h-8 rounded-lg flex items-center justify-center"
+                    style={{
+                      background: "var(--success-bg)",
+                      color: "var(--success)",
+                    }}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M3 8l4 4 6-8" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </span>
+                  <div>
+                    <p
+                      className="text-[10px] font-semibold uppercase tracking-[0.08em] font-mono"
+                      style={{ color: "var(--text-muted)" }}
+                    >
+                      Last Compilation
+                    </p>
+                    <p className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
+                      {new Date(company.last_compile.completed_at).toLocaleString()}
+                      {company.last_compile.result_version && (
+                        <span
+                          className="ml-2 font-mono text-xs"
+                          style={{ color: "var(--text-muted)" }}
+                        >
+                          {company.last_compile.result_version}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </GlassCard>
+            )}
+          </div>
+        )}
+
+        {/* Empty State — only when no company ID has been entered and nothing loaded */}
+        {!company && !error && !companyId && (
+          <div className="empty-state animate-fade-up">
+            <div className="empty-state__icon">
+              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <circle cx="14" cy="14" r="10" />
+                <path d="M14 9v5l3 3" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </div>
+            <h2 className="text-xl font-bold mb-2" style={{ color: "var(--text-primary)" }}>
+              Your company&apos;s operational brain
+            </h2>
+            <p
+              className="text-sm mb-8 max-w-md mx-auto leading-relaxed"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              Upload SOPs, Slack exports, and support tickets. Kernl compiles them into structured,
+              queryable skills that make your AI agent actually understand your business.
+            </p>
+            <button
+              onClick={() => router.push("/onboarding")}
+              className="btn-primary"
+            >
+              Get Started
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M1 7h12M8 2l5 5-5 5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </button>
+          </div>
+        )}
       </div>
-    </div>
+    </DashboardLayout>
   );
 }

frontend/src/app/register/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { register, login } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await register(email, password);
+      // Auto-login after registration (works when Confirm Email is OFF)
+      try {
+        await login(email, password);
+        router.push("/");
+        return;
+      } catch {
+        // If auto-login fails, Confirm Email might be ON — show message
+      }
+      // Fallback: show confirmation message
+      setError("");
+      router.push("/login");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-6 relative">
+      {/* Background mesh */}
+      <div className="mesh-gradient" />
+
+      <div
+        className="w-full max-w-sm animate-fade-up"
+        style={{ animationDelay: "0.1s" }}
+      >
+        {/* Logo */}
+        <div className="flex items-center justify-center mb-8">
+          <div
+            className="w-12 h-12 rounded-xl flex items-center justify-center animate-pulse-glow"
+            style={{
+              background: "var(--primary-ghost)",
+              color: "var(--primary)",
+            }}
+          >
+            <svg width="24" height="24" viewBox="0 0 18 18" fill="none">
+              <path
+                d="M3 2h3v14H3V2zm5 0h2l5 7-5 7H8l5-7-5-7z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div className="glass-card p-8">
+          <h1
+            className="text-xl font-bold mb-1 text-center"
+            style={{ color: "var(--text-primary)" }}
+          >
+            Create your account
+          </h1>
+          <p
+            className="text-sm text-center mb-6"
+            style={{ color: "var(--text-muted)" }}
+          >
+            Start compiling your company brain
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="input-label">Email</label>
+              <input
+                type="email"
+                className="input-field"
+                placeholder="you@company.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <label className="input-label">Password</label>
+              <input
+                type="password"
+                className="input-field"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                minLength={6}
+              />
+              <p
+                className="text-[11px] mt-1.5"
+                style={{ color: "var(--text-muted)" }}
+              >
+                Minimum 6 characters
+              </p>
+            </div>
+
+            {error && (
+              <div
+                className="text-sm px-3 py-2 rounded"
+                style={{
+                  color: "var(--error)",
+                  background: "var(--error-bg)",
+                  border: "1px solid rgba(248, 113, 113, 0.2)",
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn-primary w-full"
+              style={{ padding: "12px 20px" }}
+            >
+              {loading ? (
+                <span className="animate-spin-slow inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full" />
+              ) : (
+                "Create Account"
+              )}
+            </button>
+          </form>
+
+          <p
+            className="text-sm mt-6 text-center"
+            style={{ color: "var(--text-muted)" }}
+          >
+            Already have an account?{" "}
+            <a
+              href="/login"
+              className="font-medium transition-colors"
+              style={{ color: "var(--primary)" }}
+            >
+              Sign In
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/skills/[companyId]/page.tsx

@@ -2,6 +2,10 @@
 
 import { useEffect, useState, use } from "react";
 import { useRouter } from "next/navigation";
+import { API_BASE } from "@/lib/api";
+import DashboardLayout from "@/components/DashboardLayout";
+import GlassCard from "@/components/ui/GlassCard";
+import ConfidenceBadge from "@/components/ui/ConfidenceBadge";
 
 type Skill = {
   id?: string;
@@ -10,6 +14,8 @@ type Skill = {
   rationale?: string;
   evidence?: string[];
   confidence?: number;
+  source_files?: string[];
+  embedding_vector?: number[];
 };
 
 type SkillsData = {
@@ -26,19 +32,17 @@ export default function SkillsViewer({ params }: { params: Promise<{ companyId:
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState("");
   const [sortBy, setSortBy] = useState<"category" | "confidence">("category");
+  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
   const router = useRouter();
 
   useEffect(() => {
-    fetch(`http://localhost:8080/skills/${companyId}`)
+    fetch(`${API_BASE}/skills/${companyId}`)
       .then((res) => res.json())
       .then((d) => {
         setData(d);
         setLoading(false);
       })
-      .catch((err) => {
-        console.error(err);
-        setLoading(false);
-      });
+      .catch(() => setLoading(false));
   }, [companyId]);
 
   const skills = data?.skills || [];
@@ -47,116 +51,279 @@ export default function SkillsViewer({ params }: { params: Promise<{ companyId:
   const filtered = skills
     .filter((s) => {
       if (!filter) return true;
-      return (s.category || "").toLowerCase().includes(filter.toLowerCase());
+      return (s.category || "") === filter;
     })
     .sort((a, b) => {
       if (sortBy === "confidence") return (b.confidence || 0) - (a.confidence || 0);
       return (a.category || "").localeCompare(b.category || "");
     });
 
-  const confidenceColor = (c: number) => {
-    if (c >= 0.8) return "text-green-400 border-green-400/30";
-    if (c >= 0.6) return "text-yellow-400 border-yellow-400/30";
-    if (c >= 0.4) return "text-orange-400 border-orange-400/30";
-    return "text-red-400 border-red-400/30";
-  };
-
   return (
-    <div className="min-h-screen p-8 flex flex-col">
-      <div className="flex justify-between items-center mb-6 border-b border-gray-800 pb-4">
-        <div>
-          <h1 className="text-2xl font-bold text-primary">Skills File Viewer</h1>
-          {data?.version && (
-            <p className="text-text-secondary text-sm mt-1">
-              Version: <span className="font-mono text-primary">{data.version}</span>
-              {data.compiled_at && (
-                <> · Compiled: {new Date(data.compiled_at).toLocaleString()}</>
-              )}
-              {" · "}{skills.length} skills
-            </p>
-          )}
+    <DashboardLayout>
+      <div className="p-6 lg:p-8 max-w-7xl mx-auto animate-fade-in">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight" style={{ color: "var(--text-primary)" }}>
+              Skills Explorer
+            </h1>
+            {data?.version && (
+              <p className="text-sm mt-1" style={{ color: "var(--text-muted)" }}>
+                <span className="font-mono" style={{ color: "var(--primary)" }}>
+                  {data.version}
+                </span>
+                {data.compiled_at && (
+                  <> · {new Date(data.compiled_at).toLocaleDateString()}</>
+                )}
+                {" · "}
+                <span style={{ color: "var(--text-secondary)" }}>{skills.length} skills</span>
+              </p>
+            )}
+          </div>
+          <button
+            onClick={() => router.push(`/demo/${companyId}`)}
+            className="btn-primary"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <circle cx="7" cy="7" r="5.5" />
+              <path d="M7 4v3l2 1.5" strokeLinecap="round" />
+            </svg>
+            Query Agent
+          </button>
         </div>
-        <button onClick={() => router.push("/")} className="text-text-secondary hover:text-foreground">
-          Back
-        </button>
-      </div>
 
-      {/* Filter + Sort Controls */}
-      <div className="flex gap-4 mb-4">
-        <select
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-          className="bg-surface border border-gray-700 text-foreground px-3 py-2 text-sm"
-        >
-          <option value="">All Categories</option>
-          {categories.map((c) => (
-            <option key={c} value={c}>{c}</option>
-          ))}
-        </select>
-        <select
-          value={sortBy}
-          onChange={(e) => setSortBy(e.target.value as "category" | "confidence")}
-          className="bg-surface border border-gray-700 text-foreground px-3 py-2 text-sm"
-        >
-          <option value="category">Sort by Category</option>
-          <option value="confidence">Sort by Confidence</option>
-        </select>
-      </div>
+        {/* Filter Chips */}
+        <div className="flex gap-2 flex-wrap mb-6">
+          <button
+            onClick={() => setFilter("")}
+            className="badge transition-all"
+            style={{
+              background: !filter ? "var(--primary-ghost)" : "transparent",
+              color: !filter ? "var(--primary)" : "var(--text-muted)",
+              border: `1px solid ${!filter ? "rgba(0,210,180,0.2)" : "var(--border)"}`,
+              cursor: "pointer",
+            }}
+          >
+            All ({skills.length})
+          </button>
+          {categories.map((cat) => {
+            const count = skills.filter((s) => (s.category || "Unknown") === cat).length;
+            const active = filter === cat;
+            return (
+              <button
+                key={cat}
+                onClick={() => setFilter(active ? "" : cat)}
+                className="badge transition-all"
+                style={{
+                  background: active ? "var(--primary-ghost)" : "transparent",
+                  color: active ? "var(--primary)" : "var(--text-muted)",
+                  border: `1px solid ${active ? "rgba(0,210,180,0.2)" : "var(--border)"}`,
+                  cursor: "pointer",
+                }}
+              >
+                {cat} ({count})
+              </button>
+            );
+          })}
+
+          {/* Sort toggle */}
+          <div className="ml-auto">
+            <button
+              onClick={() => setSortBy(sortBy === "category" ? "confidence" : "category")}
+              className="badge transition-all"
+              style={{
+                background: "transparent",
+                color: "var(--text-secondary)",
+                border: "1px solid var(--border)",
+                cursor: "pointer",
+              }}
+            >
+              Sort: {sortBy === "category" ? "Category" : "Confidence"}
+            </button>
+          </div>
+        </div>
 
-      {/* Skills Grid */}
-      <div className="flex-1 overflow-y-auto">
+        {/* Skills Grid */}
         {loading ? (
-          <div className="text-text-secondary">Loading skills...</div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <div key={i} className="glass-card p-5 animate-shimmer" style={{ height: "180px" }} />
+            ))}
+          </div>
         ) : filtered.length === 0 ? (
-          <div className="text-center py-12">
-            <p className="text-text-secondary text-lg">No skills compiled yet.</p>
-            <p className="text-text-secondary text-sm mt-2">
-              Go to Dashboard → Compile Brain to generate skills from your source documents.
+          <div className="empty-state animate-fade-up">
+            <div className="empty-state__icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <rect x="4" y="4" width="16" height="16" rx="2" />
+                <path d="M9 9h6M9 12h4" strokeLinecap="round" />
+              </svg>
+            </div>
+            <h2 className="text-lg font-bold mb-2" style={{ color: "var(--text-primary)" }}>
+              No skills compiled yet
+            </h2>
+            <p className="text-sm mb-6" style={{ color: "var(--text-secondary)" }}>
+              Compile your company brain to generate skills from source documents.
             </p>
+            <button onClick={() => router.push("/onboarding")} className="btn-primary">
+              Start Onboarding
+            </button>
           </div>
         ) : (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 stagger-children">
             {filtered.map((skill, i) => (
-              <div
+              <GlassCard
                 key={skill.id || i}
-                className="bg-surface border border-gray-800 p-5 hover:border-primary/30 transition-colors"
+                interactive
+                onClick={() => setSelectedSkill(skill)}
               >
                 <div className="flex justify-between items-start mb-3">
-                  <span className="text-xs font-mono bg-primary/10 text-primary px-2 py-1 rounded">
-                    {skill.category || "Unknown"}
-                  </span>
-                  <span
-                    className={`text-xs font-mono px-2 py-1 border rounded ${confidenceColor(
-                      skill.confidence || 0
-                    )}`}
-                  >
-                    {((skill.confidence || 0) * 100).toFixed(0)}%
-                  </span>
+                  <span className="badge badge--primary">{skill.category || "Unknown"}</span>
+                  <ConfidenceBadge value={skill.confidence || 0} />
                 </div>
 
-                <p className="text-white font-medium mb-2">{skill.rule}</p>
+                <p className="text-sm font-medium mb-2" style={{ color: "var(--text-primary)" }}>
+                  {skill.rule}
+                </p>
 
                 {skill.rationale && (
-                  <p className="text-text-secondary text-sm mb-3 italic">{skill.rationale}</p>
+                  <p
+                    className="text-xs leading-relaxed line-clamp-2 mb-3"
+                    style={{ color: "var(--text-muted)" }}
+                  >
+                    {skill.rationale}
+                  </p>
                 )}
 
                 {skill.evidence && skill.evidence.length > 0 && (
-                  <div className="border-t border-gray-800 pt-3 mt-3">
-                    <h4 className="text-xs text-text-secondary uppercase tracking-wider mb-2">
-                      Evidence ({skill.evidence.length})
-                    </h4>
-                    {skill.evidence.map((e, j) => (
-                      <p key={j} className="text-xs text-gray-400 mb-1 pl-2 border-l border-gray-700">
-                        {e}
-                      </p>
-                    ))}
+                  <div
+                    className="pt-3 mt-auto"
+                    style={{ borderTop: "1px solid var(--border)" }}
+                  >
+                    <p className="text-[10px] font-mono uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>
+                      {skill.evidence.length} evidence source{skill.evidence.length !== 1 ? "s" : ""}
+                    </p>
                   </div>
                 )}
-              </div>
+              </GlassCard>
             ))}
           </div>
         )}
       </div>
-    </div>
+
+      {/* Detail Slide-in Panel */}
+      {selectedSkill && (
+        <div
+          className="fixed inset-0 z-50 flex"
+          onClick={() => setSelectedSkill(null)}
+        >
+          {/* Backdrop */}
+          <div
+            className="flex-1"
+            style={{ background: "rgba(0, 0, 0, 0.5)" }}
+          />
+
+          {/* Panel */}
+          <div
+            className="w-full max-w-lg overflow-y-auto animate-slide-right"
+            style={{
+              background: "var(--bg-surface)",
+              borderLeft: "1px solid var(--border)",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Panel Header */}
+            <div
+              className="sticky top-0 z-10 flex items-center justify-between px-6 py-4"
+              style={{
+                background: "var(--bg-surface)",
+                borderBottom: "1px solid var(--border)",
+              }}
+            >
+              <h2 className="text-lg font-bold" style={{ color: "var(--primary)" }}>
+                Skill Detail
+              </h2>
+              <button
+                onClick={() => setSelectedSkill(null)}
+                className="w-8 h-8 flex items-center justify-center rounded-lg transition-colors"
+                style={{ color: "var(--text-muted)" }}
+              >
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M4 4l8 8M12 4l-8 8" strokeLinecap="round" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Panel Body */}
+            <div className="p-6 space-y-6">
+              <div className="flex justify-between items-start">
+                <span className="badge badge--primary">{selectedSkill.category || "Unknown"}</span>
+                <ConfidenceBadge value={selectedSkill.confidence || 0} size="md" />
+              </div>
+
+              <div>
+                <p className="input-label">Rule</p>
+                <p className="text-base font-medium" style={{ color: "var(--text-primary)" }}>
+                  {selectedSkill.rule}
+                </p>
+              </div>
+
+              {selectedSkill.rationale && (
+                <div>
+                  <p className="input-label">Rationale</p>
+                  <p className="text-sm leading-relaxed" style={{ color: "var(--text-secondary)" }}>
+                    {selectedSkill.rationale}
+                  </p>
+                </div>
+              )}
+
+              {selectedSkill.evidence && selectedSkill.evidence.length > 0 && (
+                <div>
+                  <p className="input-label">
+                    Evidence ({selectedSkill.evidence.length})
+                  </p>
+                  <div className="space-y-2">
+                    {selectedSkill.evidence.map((e, j) => (
+                      <div
+                        key={j}
+                        className="text-sm p-3 rounded"
+                        style={{
+                          color: "var(--text-secondary)",
+                          background: "var(--bg-input)",
+                          border: "1px solid var(--border)",
+                        }}
+                      >
+                        {e}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selectedSkill.source_files && selectedSkill.source_files.length > 0 && (
+                <div>
+                  <p className="input-label">Source Files</p>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedSkill.source_files.map((sf, j) => (
+                      <span key={j} className="badge badge--neutral font-mono">
+                        {sf}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div style={{ borderTop: "1px solid var(--border)", paddingTop: "24px" }}>
+                <button
+                  onClick={() => setSelectedSkill(null)}
+                  className="btn-secondary w-full"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </DashboardLayout>
   );
 }

frontend/src/components/DashboardLayout.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Sidebar from "./Sidebar";
+import TopBar from "./TopBar";
+
+interface DashboardLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <div className="flex min-h-screen">
+      {/* Gradient mesh background */}
+      <div className="mesh-gradient" />
+
+      {/* Sidebar */}
+      <Sidebar />
+
+      {/* Main area */}
+      <div
+        className="flex-1 flex flex-col min-h-screen"
+        style={{ marginLeft: "var(--sidebar-width)" }}
+      >
+        <TopBar />
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

frontend/src/components/NavBar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useAuth } from "@/lib/auth";
+import { useRouter } from "next/navigation";
+
+export default function NavBar() {
+  const { user, logout, loading } = useAuth();
+  const router = useRouter();
+
+  return (
+    <nav className="border-b border-gray-800 bg-surface/80 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">
+        <button
+          onClick={() => router.push("/")}
+          className="text-lg font-bold text-primary tracking-tight"
+        >
+          Kernl
+        </button>
+        <div className="flex items-center gap-4 text-sm">
+          {!loading && user ? (
+            <>
+              <span className="text-text-secondary">{user.email}</span>
+              <button
+                onClick={() => { logout(); router.push("/login"); }}
+                className="text-text-secondary hover:text-foreground"
+              >
+                Sign Out
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                onClick={() => router.push("/login")}
+                className="text-text-secondary hover:text-foreground"
+              >
+                Sign In
+              </button>
+              <button
+                onClick={() => router.push("/register")}
+                className="bg-primary text-background font-bold px-4 py-1.5 text-xs hover:opacity-90"
+              >
+                Sign Up
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+
+const NAV_ITEMS = [
+  {
+    id: "home",
+    label: "Dashboard",
+    path: "/",
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <rect x="2" y="2" width="7" height="8" rx="1.5" />
+        <rect x="11" y="2" width="7" height="5" rx="1.5" />
+        <rect x="2" y="12" width="7" height="6" rx="1.5" />
+        <rect x="11" y="9" width="7" height="9" rx="1.5" />
+      </svg>
+    ),
+  },
+  {
+    id: "onboarding",
+    label: "Onboarding",
+    path: "/onboarding",
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path d="M10 2v16M2 10h16" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: "skills",
+    label: "Skills",
+    path: "/skills",
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path d="M3 4h14M3 8h10M3 12h12M3 16h8" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: "demo",
+    label: "Query",
+    path: "/demo",
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="10" cy="10" r="7" />
+        <path d="M10 6v4l3 2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const isActive = (path: string) => {
+    if (path === "/") return pathname === "/";
+    return pathname.startsWith(path);
+  };
+
+  return (
+    <aside
+      className="fixed left-0 top-0 bottom-0 z-40 flex flex-col items-center py-5 border-r"
+      style={{
+        width: "var(--sidebar-width)",
+        background: "var(--bg-surface)",
+        borderColor: "var(--border)",
+      }}
+    >
+      {/* Logo */}
+      <button
+        onClick={() => router.push("/")}
+        className="mb-8 flex items-center justify-center w-9 h-9 rounded-lg transition-all hover:scale-105"
+        style={{
+          background: "var(--primary-ghost)",
+          color: "var(--primary)",
+        }}
+        title="Kernl"
+      >
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <path
+            d="M3 2h3v14H3V2zm5 0h2l5 7-5 7H8l5-7-5-7z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+
+      {/* Nav Items */}
+      <nav className="flex-1 flex flex-col gap-1 w-full px-2">
+        {NAV_ITEMS.map((item) => {
+          const active = isActive(item.path);
+          return (
+            <button
+              key={item.id}
+              onClick={() => router.push(item.path)}
+              title={item.label}
+              className="relative flex items-center justify-center w-10 h-10 mx-auto rounded-lg transition-all duration-200 group"
+              style={{
+                color: active ? "var(--primary)" : "var(--text-muted)",
+                background: active ? "var(--primary-ghost)" : "transparent",
+              }}
+            >
+              {/* Active indicator */}
+              {active && (
+                <span
+                  className="absolute left-0 top-2 bottom-2 w-[2px] rounded-full"
+                  style={{ background: "var(--primary)" }}
+                />
+              )}
+              {item.icon}
+
+              {/* Tooltip */}
+              <span
+                className="absolute left-full ml-3 px-2 py-1 rounded text-xs font-medium whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity"
+                style={{
+                  background: "var(--bg-elevated)",
+                  color: "var(--text-primary)",
+                  border: "1px solid var(--border-hover)",
+                }}
+              >
+                {item.label}
+              </span>
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* Bottom accent dot */}
+      <div
+        className="w-2 h-2 rounded-full"
+        style={{ background: "var(--primary-dim)", opacity: 0.5 }}
+      />
+    </aside>
+  );
+}

frontend/src/components/TopBar.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useAuth } from "@/lib/auth";
+import { useRouter, usePathname } from "next/navigation";
+
+function getPageTitle(pathname: string): string {
+  if (pathname === "/") return "Dashboard";
+  if (pathname.startsWith("/onboarding")) return "Onboarding";
+  if (pathname.startsWith("/skills")) return "Skills Explorer";
+  if (pathname.startsWith("/demo")) return "Query Agent";
+  if (pathname.startsWith("/compile")) return "Compile Pipeline";
+  return "Kernl";
+}
+
+export default function TopBar() {
+  const { user, logout, loading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+  const pageTitle = getPageTitle(pathname);
+
+  return (
+    <header
+      className="sticky top-0 z-30 flex items-center justify-between h-14 px-6 border-b"
+      style={{
+        background: "rgba(10, 15, 20, 0.85)",
+        backdropFilter: "blur(12px)",
+        borderColor: "var(--border)",
+      }}
+    >
+      {/* Left: Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm">
+        <span style={{ color: "var(--text-muted)" }}>Kernl</span>
+        <span style={{ color: "var(--text-muted)" }}>/</span>
+        <span style={{ color: "var(--text-primary)", fontWeight: 600 }}>
+          {pageTitle}
+        </span>
+      </div>
+
+      {/* Right: User */}
+      <div className="flex items-center gap-4">
+        {!loading && user ? (
+          <>
+            <span
+              className="text-xs font-mono"
+              style={{ color: "var(--text-muted)" }}
+            >
+              {user.email}
+            </span>
+            <button
+              onClick={() => {
+                logout();
+                router.push("/login");
+              }}
+              className="text-xs font-medium px-3 py-1.5 rounded-md transition-colors"
+              style={{
+                color: "var(--text-secondary)",
+                border: "1px solid var(--border)",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.borderColor = "var(--border-hover)";
+                e.currentTarget.style.color = "var(--text-primary)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.borderColor = "var(--border)";
+                e.currentTarget.style.color = "var(--text-secondary)";
+              }}
+            >
+              Sign Out
+            </button>
+          </>
+        ) : !loading ? (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => router.push("/login")}
+              className="text-xs font-medium px-3 py-1.5 rounded-md transition-colors"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              Sign In
+            </button>
+            <button
+              onClick={() => router.push("/register")}
+              className="btn-primary"
+              style={{ fontSize: "12px", padding: "6px 14px" }}
+            >
+              Sign Up
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </header>
+  );
+}

frontend/src/components/ui/ConfidenceBadge.tsx

@@ -0,0 +1,50 @@
+interface ConfidenceBadgeProps {
+  value: number; // 0.0 - 1.0
+  size?: "sm" | "md";
+}
+
+export default function ConfidenceBadge({ value, size = "sm" }: ConfidenceBadgeProps) {
+  const pct = Math.round(value * 100);
+
+  let colorVar: string;
+  let bgVar: string;
+  let borderVar: string;
+
+  if (value >= 0.8) {
+    colorVar = "var(--success)";
+    bgVar = "var(--success-bg)";
+    borderVar = "rgba(52, 211, 153, 0.25)";
+  } else if (value >= 0.6) {
+    colorVar = "var(--warning)";
+    bgVar = "var(--warning-bg)";
+    borderVar = "rgba(251, 191, 36, 0.25)";
+  } else if (value >= 0.4) {
+    colorVar = "var(--info)";
+    bgVar = "var(--info-bg)";
+    borderVar = "rgba(96, 165, 250, 0.25)";
+  } else {
+    colorVar = "var(--error)";
+    bgVar = "var(--error-bg)";
+    borderVar = "rgba(248, 113, 113, 0.25)";
+  }
+
+  const textSize = size === "sm" ? "text-[10px]" : "text-xs";
+  const px = size === "sm" ? "px-2 py-0.5" : "px-2.5 py-1";
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 font-mono font-semibold ${textSize} ${px} rounded`}
+      style={{
+        color: colorVar,
+        background: bgVar,
+        border: `1px solid ${borderVar}`,
+      }}
+    >
+      <span
+        className="inline-block w-1.5 h-1.5 rounded-full"
+        style={{ background: colorVar }}
+      />
+      {pct}%
+    </span>
+  );
+}

frontend/src/components/ui/GlassCard.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+
+interface GlassCardProps {
+  children: ReactNode;
+  className?: string;
+  interactive?: boolean;
+  elevated?: boolean;
+  padding?: "none" | "sm" | "md" | "lg";
+  onClick?: () => void;
+  style?: React.CSSProperties;
+}
+
+const paddingMap = {
+  none: "",
+  sm: "p-4",
+  md: "p-5",
+  lg: "p-6",
+};
+
+export default function GlassCard({
+  children,
+  className = "",
+  interactive = false,
+  elevated = false,
+  padding = "md",
+  onClick,
+  style,
+}: GlassCardProps) {
+  const baseClass = elevated ? "glass-card--elevated" : "glass-card";
+  const interactiveClass = interactive ? "glass-card--interactive" : "";
+  const padClass = paddingMap[padding];
+
+  return (
+    <div
+      className={`${baseClass} ${interactiveClass} ${padClass} ${className}`}
+      style={style}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
+    >
+      {children}
+    </div>
+  );
+}

frontend/src/components/ui/StatCard.tsx

@@ -0,0 +1,59 @@
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  icon?: React.ReactNode;
+  accent?: "primary" | "success" | "warning" | "info";
+  subtitle?: string;
+}
+
+const accentMap = {
+  primary: { bg: "var(--primary-ghost)", color: "var(--primary)" },
+  success: { bg: "var(--success-bg)", color: "var(--success)" },
+  warning: { bg: "var(--warning-bg)", color: "var(--warning)" },
+  info: { bg: "var(--info-bg)", color: "var(--info)" },
+};
+
+export default function StatCard({
+  label,
+  value,
+  icon,
+  accent = "primary",
+  subtitle,
+}: StatCardProps) {
+  const colors = accentMap[accent];
+
+  return (
+    <div className="glass-card p-5 animate-fade-in">
+      <div className="flex items-start justify-between mb-3">
+        <span
+          className="text-[10px] font-semibold uppercase tracking-[0.08em] font-mono"
+          style={{ color: "var(--text-muted)" }}
+        >
+          {label}
+        </span>
+        {icon && (
+          <span
+            className="w-8 h-8 rounded-lg flex items-center justify-center text-sm"
+            style={{ background: colors.bg, color: colors.color }}
+          >
+            {icon}
+          </span>
+        )}
+      </div>
+      <p
+        className="text-2xl font-bold tracking-tight"
+        style={{ color: colors.color }}
+      >
+        {value}
+      </p>
+      {subtitle && (
+        <p
+          className="text-xs mt-1"
+          style={{ color: "var(--text-muted)" }}
+        >
+          {subtitle}
+        </p>
+      )}
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -0,0 +1,2 @@
+export const API_BASE =
+  process.env.NEXT_PUBLIC_API_URL || "http://localhost:8081";

frontend/src/lib/auth.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { API_BASE } from "@/lib/api";
+
+type AuthConfig = {
+  supabase_url: string;
+  supabase_anon_key: string;
+};
+
+type AuthUser = {
+  id: string;
+  email: string;
+};
+
+type AuthContextType = {
+  user: AuthUser | null;
+  token: string | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+};
+
+let cachedConfig: AuthConfig | null = null;
+
+async function getAuthConfig(): Promise<AuthConfig> {
+  if (cachedConfig) return cachedConfig;
+  const res = await fetch(`${API_BASE}/auth/config`);
+  cachedConfig = await res.json();
+  return cachedConfig!;
+}
+
+export async function loginWithSupabase(email: string, password: string) {
+  const config = await getAuthConfig();
+  const res = await fetch(`${config.supabase_url}/auth/v1/token?grant_type=password`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      apikey: config.supabase_anon_key,
+    },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) throw new Error((await res.json()).error_description || "Login failed");
+  const data = await res.json();
+  sessionStorage.setItem("kernl_token", data.access_token);
+  sessionStorage.setItem("kernl_user", JSON.stringify({ id: data.user.id, email: data.user.email }));
+  return data;
+}
+
+export async function registerWithSupabase(email: string, password: string) {
+  const config = await getAuthConfig();
+  const res = await fetch(`${config.supabase_url}/auth/v1/signup`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      apikey: config.supabase_anon_key,
+    },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) throw new Error((await res.json()).msg || "Registration failed");
+  return res.json();
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const savedToken = sessionStorage.getItem("kernl_token");
+    const savedUser = sessionStorage.getItem("kernl_user");
+    if (savedToken && savedUser) {
+      setToken(savedToken);
+      setUser(JSON.parse(savedUser));
+    }
+    setLoading(false);
+  }, []);
+
+  const login = async (email: string, password: string) => {
+    const data = await loginWithSupabase(email, password);
+    setToken(data.access_token);
+    setUser({ id: data.user.id, email: data.user.email });
+  };
+
+  const register = async (email: string, password: string) => {
+    await registerWithSupabase(email, password);
+  };
+
+  const logout = () => {
+    sessionStorage.removeItem("kernl_token");
+    sessionStorage.removeItem("kernl_user");
+    setToken(null);
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+  return ctx;
+}
+
+export function useProtectedAuth() {
+  const auth = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!auth.loading && !auth.user) {
+      router.push("/login");
+    }
+  }, [auth.loading, auth.user, router]);
+
+  return auth;
+}