Auto-generated changes

.emergent/emergent.yml

@@ -1,3 +1,5 @@
 {
-  "env_image_name": "fastapi_react_mongo_shadcn_base_image_cloud_arm:release-17042026-1"
+  "env_image_name": "fastapi_react_mongo_shadcn_base_image_cloud_arm:release-17042026-1",
+  "job_id": "d5829a2e-bc03-4880-adcd-73acc809a3bd",
+  "created_at": "2026-05-01T17:02:20.223681+00:00Z"
 }

.gitconfig

@@ -0,0 +1,3 @@
+[user]
+	email = github@emergent.sh
+	name = emergent-agent-e1

.gitignore

@@ -79,4 +79,12 @@ agenthub/agents/youtube/db
 memory/test_credentials.md
 
 # Mobile development
-android-sdk/
+android-sdk/-e 
+# Environment and credential files
+.env
+.env.*
+*.env
+credentials.json
+*.pem
+*.key
+.credentials

backend/agents.py

@@ -0,0 +1,198 @@
+"""
+ForgeSight multi-agent quality-control pipeline.
+Uses emergentintegrations.LlmChat with the Emergent Universal LLM key.
+Each agent gets a fresh LlmChat session (per the playbook guidance).
+"""
+import os
+import json
+import uuid
+import re
+from typing import Optional, List, Dict, Any
+from emergentintegrations.llm.chat import LlmChat, UserMessage, ImageContent
+
+
+EMERGENT_LLM_KEY = os.environ.get("EMERGENT_LLM_KEY", "")
+
+# Model choices — Claude Sonnet 4.5 is vision-capable and strong for reasoning.
+VISION_MODEL = ("anthropic", "claude-sonnet-4-5-20250929")
+TEXT_MODEL = ("anthropic", "claude-sonnet-4-5-20250929")
+
+
+INSPECTOR_SYSTEM = """You are the INSPECTOR agent of ForgeSight — a multimodal quality-control copilot
+running on AMD Instinct MI300X + ROCm. Your job: analyze the submitted product/assembly-line
+image and surface visible defects, anomalies, or violations.
+
+Return ONLY compact JSON with this exact shape (no prose, no code fences):
+{
+  "verdict": "pass" | "warn" | "fail",
+  "confidence": 0.0-1.0,
+  "defects": [
+    {"type": "short category e.g. surface-scratch", "severity": "low|medium|high", "location": "short spatial description", "description": "one sentence"}
+  ],
+  "observation": "2-3 sentence plain-english summary of what you see"
+}
+Be precise. If the image shows no manufacturing artifact at all, still describe what is visible
+and mark verdict "warn" with a defect explaining the mismatch."""
+
+
+DIAGNOSTICIAN_SYSTEM = """You are the DIAGNOSTICIAN agent of ForgeSight. Given the INSPECTOR's
+JSON report and user notes, produce a probable root-cause analysis.
+
+Return ONLY compact JSON:
+{
+  "probable_cause": "one-sentence most likely cause",
+  "contributing_factors": ["factor 1", "factor 2", "factor 3"],
+  "affected_process_step": "e.g. CNC milling, injection cooling, weld pass 2"
+}
+Be concrete and industry-literate."""
+
+
+ACTION_SYSTEM = """You are the ACTION agent of ForgeSight. Given the INSPECTOR and DIAGNOSTICIAN
+outputs, draft an actionable work order.
+
+Return ONLY compact JSON:
+{
+  "priority": "P0|P1|P2|P3",
+  "assignee_role": "e.g. line-lead, maintenance-tech, quality-engineer",
+  "steps": ["step 1", "step 2", "step 3"],
+  "estimated_minutes": integer,
+  "parts_or_tools": ["item 1", "item 2"]
+}"""
+
+
+REPORTER_SYSTEM = """You are the REPORTER agent of ForgeSight. Compile a final human-readable
+summary of the full inspection in <=70 words. Return ONLY JSON:
+{
+  "headline": "<=10 word title",
+  "summary": "<=70 word paragraph",
+  "tags": ["tag1", "tag2", "tag3"]
+}"""
+
+
+def _extract_json(raw: str) -> Dict[str, Any]:
+    """Best-effort JSON extraction from an LLM response."""
+    if not raw:
+        return {}
+    # Strip code fences
+    cleaned = re.sub(r"^```(?:json)?\s*|\s*```$", "", raw.strip(), flags=re.MULTILINE)
+    # Try direct
+    try:
+        return json.loads(cleaned)
+    except Exception:
+        pass
+    # Find first {...} block
+    match = re.search(r"\{[\s\S]*\}", cleaned)
+    if match:
+        try:
+            return json.loads(match.group(0))
+        except Exception:
+            pass
+    return {"_raw": raw}
+
+
+async def _run_agent(
+    name: str,
+    system_message: str,
+    user_text: str,
+    image_base64: Optional[str] = None,
+    provider_model: tuple = TEXT_MODEL,
+) -> Dict[str, Any]:
+    session_id = f"forgesight-{name}-{uuid.uuid4().hex[:8]}"
+    chat = LlmChat(
+        api_key=EMERGENT_LLM_KEY,
+        session_id=session_id,
+        system_message=system_message,
+    ).with_model(provider_model[0], provider_model[1])
+
+    if image_base64:
+        msg = UserMessage(
+            text=user_text,
+            file_contents=[ImageContent(image_base64=image_base64)],
+        )
+    else:
+        msg = UserMessage(text=user_text)
+
+    raw = await chat.send_message(msg)
+    raw_str = raw if isinstance(raw, str) else str(raw)
+    parsed = _extract_json(raw_str)
+    return {"raw": raw_str, "parsed": parsed}
+
+
+async def run_pipeline(
+    image_base64: str,
+    notes: str = "",
+    product_spec: str = "",
+) -> Dict[str, Any]:
+    """
+    Run the 4-agent pipeline sequentially and return the full transcript.
+    """
+    context = f"Operator notes: {notes or '(none)'}\nProduct spec: {product_spec or '(generic)'}"
+
+    # 1) Inspector (vision)
+    inspector = await _run_agent(
+        "inspector",
+        INSPECTOR_SYSTEM,
+        f"Inspect this image for manufacturing defects.\n{context}",
+        image_base64=image_base64,
+        provider_model=VISION_MODEL,
+    )
+
+    # 2) Diagnostician
+    diagnostician = await _run_agent(
+        "diagnostician",
+        DIAGNOSTICIAN_SYSTEM,
+        f"INSPECTOR_REPORT:\n{json.dumps(inspector['parsed'])}\n\n{context}",
+        provider_model=TEXT_MODEL,
+    )
+
+    # 3) Action
+    action = await _run_agent(
+        "action",
+        ACTION_SYSTEM,
+        (
+            f"INSPECTOR_REPORT:\n{json.dumps(inspector['parsed'])}\n\n"
+            f"DIAGNOSTICIAN_REPORT:\n{json.dumps(diagnostician['parsed'])}"
+        ),
+        provider_model=TEXT_MODEL,
+    )
+
+    # 4) Reporter
+    reporter = await _run_agent(
+        "reporter",
+        REPORTER_SYSTEM,
+        (
+            f"INSPECTOR_REPORT:\n{json.dumps(inspector['parsed'])}\n\n"
+            f"DIAGNOSTICIAN_REPORT:\n{json.dumps(diagnostician['parsed'])}\n\n"
+            f"ACTION_REPORT:\n{json.dumps(action['parsed'])}"
+        ),
+        provider_model=TEXT_MODEL,
+    )
+
+    return {
+        "agents": [
+            {"role": "inspector", "label": "Inspector Agent", "model": "Claude Sonnet 4.5 (Vision)", "output": inspector},
+            {"role": "diagnostician", "label": "Diagnostician Agent", "model": "Claude Sonnet 4.5", "output": diagnostician},
+            {"role": "action", "label": "Action Agent", "model": "Claude Sonnet 4.5", "output": action},
+            {"role": "reporter", "label": "Reporter Agent", "model": "Claude Sonnet 4.5", "output": reporter},
+        ],
+    }
+
+
+async def generate_social_post(milestone_title: str, milestone_body: str) -> Dict[str, str]:
+    """Generate X + LinkedIn social post drafts for a build-in-public milestone."""
+    system = """You craft punchy Build-in-Public social posts for a hackathon project named
+"ForgeSight" — a multimodal agentic quality-control copilot running on AMD Instinct MI300X + ROCm.
+Always include hashtags: #AMDHackathon #ROCm #AIatAMD #lablab and mention @AIatAMD and @lablab.
+Return ONLY JSON:
+{"x_post": "<=260 chars, punchy, 1-2 emojis ok", "linkedin_post": "<=600 chars, narrative, 3 short paragraphs"}"""
+    result = await _run_agent(
+        "social",
+        system,
+        f"Milestone: {milestone_title}\n\nDetails: {milestone_body}",
+        provider_model=TEXT_MODEL,
+    )
+    parsed = result["parsed"]
+    return {
+        "x_post": parsed.get("x_post", result["raw"][:260]),
+        "linkedin_post": parsed.get("linkedin_post", result["raw"][:600]),
+    }

backend/server.py

@@ -1,89 +1,343 @@
-from fastapi import FastAPI, APIRouter
+from fastapi import FastAPI, APIRouter, HTTPException
 from dotenv import load_dotenv
 from starlette.middleware.cors import CORSMiddleware
 from motor.motor_asyncio import AsyncIOMotorClient
 import os
 import logging
+import math
+import time
+import uuid
 from pathlib import Path
 from pydantic import BaseModel, Field, ConfigDict
-from typing import List
-import uuid
+from typing import List, Optional, Any, Dict
 from datetime import datetime, timezone
 
+from agents import run_pipeline, generate_social_post
+
 
 ROOT_DIR = Path(__file__).parent
-load_dotenv(ROOT_DIR / '.env')
+load_dotenv(ROOT_DIR / ".env")
 
-# MongoDB connection
-mongo_url = os.environ['MONGO_URL']
+mongo_url = os.environ["MONGO_URL"]
 client = AsyncIOMotorClient(mongo_url)
-db = client[os.environ['DB_NAME']]
+db = client[os.environ["DB_NAME"]]
 
-# Create the main app without a prefix
-app = FastAPI()
-
-# Create a router with the /api prefix
+app = FastAPI(title="ForgeSight API")
 api_router = APIRouter(prefix="/api")
 
 
-# Define Models
-class StatusCheck(BaseModel):
-    model_config = ConfigDict(extra="ignore")  # Ignore MongoDB's _id field
-    
-    id: str = Field(default_factory=lambda: str(uuid.uuid4()))
-    client_name: str
-    timestamp: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+# ------------------------- Models -------------------------
+class InspectionCreate(BaseModel):
+    image_base64: str = Field(..., description="Raw base64 (no data URI prefix)")
+    notes: Optional[str] = ""
+    product_spec: Optional[str] = ""
+    source: Optional[str] = "upload"  # upload | sample
+
+
+class InspectionSummary(BaseModel):
+    model_config = ConfigDict(extra="ignore")
+    id: str
+    created_at: str
+    verdict: str
+    confidence: float
+    headline: str
+    defect_count: int
+    priority: str
+    source: str
+
+
+class JournalCreate(BaseModel):
+    title: str
+    body: str
+    tags: List[str] = []
+
+
+class JournalEntry(BaseModel):
+    id: str
+    created_at: str
+    title: str
+    body: str
+    tags: List[str]
+    x_post: str
+    linkedin_post: str
+
+
+# ------------------------- Helpers -------------------------
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
 
-class StatusCheckCreate(BaseModel):
-    client_name: str
 
-# Add your routes to the router instead of directly to app
+def _summarize(inspection: Dict[str, Any]) -> Dict[str, Any]:
+    agents = inspection.get("transcript", {}).get("agents", [])
+    inspector = next((a for a in agents if a["role"] == "inspector"), None)
+    reporter = next((a for a in agents if a["role"] == "reporter"), None)
+    action = next((a for a in agents if a["role"] == "action"), None)
+
+    inspector_out = (inspector or {}).get("output", {}).get("parsed", {}) or {}
+    reporter_out = (reporter or {}).get("output", {}).get("parsed", {}) or {}
+    action_out = (action or {}).get("output", {}).get("parsed", {}) or {}
+
+    defects = inspector_out.get("defects") or []
+    return {
+        "id": inspection["id"],
+        "created_at": inspection["created_at"],
+        "verdict": inspector_out.get("verdict", "warn"),
+        "confidence": float(inspector_out.get("confidence", 0.0) or 0.0),
+        "headline": reporter_out.get("headline") or inspector_out.get("observation", "Inspection complete")[:60],
+        "defect_count": len(defects) if isinstance(defects, list) else 0,
+        "priority": action_out.get("priority", "P2"),
+        "source": inspection.get("source", "upload"),
+    }
+
+
+# ------------------------- Routes -------------------------
 @api_router.get("/")
 async def root():
-    return {"message": "Hello World"}
-
-@api_router.post("/status", response_model=StatusCheck)
-async def create_status_check(input: StatusCheckCreate):
-    status_dict = input.model_dump()
-    status_obj = StatusCheck(**status_dict)
-    
-    # Convert to dict and serialize datetime to ISO string for MongoDB
-    doc = status_obj.model_dump()
-    doc['timestamp'] = doc['timestamp'].isoformat()
-    
-    _ = await db.status_checks.insert_one(doc)
-    return status_obj
-
-@api_router.get("/status", response_model=List[StatusCheck])
-async def get_status_checks():
-    # Exclude MongoDB's _id field from the query results
-    status_checks = await db.status_checks.find({}, {"_id": 0}).to_list(1000)
-    
-    # Convert ISO string timestamps back to datetime objects
-    for check in status_checks:
-        if isinstance(check['timestamp'], str):
-            check['timestamp'] = datetime.fromisoformat(check['timestamp'])
-    
-    return status_checks
-
-# Include the router in the main app
+    return {"service": "forgesight", "status": "online", "track": "AMD Hackathon — Tracks 1+2+3"}
+
+
+@api_router.post("/inspections")
+async def create_inspection(payload: InspectionCreate):
+    # Strip potential data URI prefix
+    img_b64 = payload.image_base64
+    if "," in img_b64 and img_b64.strip().startswith("data:"):
+        img_b64 = img_b64.split(",", 1)[1]
+
+    try:
+        transcript = await run_pipeline(
+            image_base64=img_b64,
+            notes=payload.notes or "",
+            product_spec=payload.product_spec or "",
+        )
+    except Exception as e:
+        logger.exception("Agent pipeline failed")
+        raise HTTPException(status_code=500, detail=f"Agent pipeline failed: {str(e)}")
+
+    inspection = {
+        "id": str(uuid.uuid4()),
+        "created_at": _now_iso(),
+        "notes": payload.notes or "",
+        "product_spec": payload.product_spec or "",
+        "source": payload.source or "upload",
+        "transcript": transcript,
+    }
+    # Do NOT persist image_base64 to keep docs small; store SHA/size if needed
+    doc = {**inspection}
+    await db.inspections.insert_one(doc)
+
+    return {"id": inspection["id"], "created_at": inspection["created_at"], "transcript": transcript, "summary": _summarize(inspection)}
+
+
+@api_router.get("/inspections")
+async def list_inspections(limit: int = 50):
+    cursor = db.inspections.find({}, {"_id": 0}).sort("created_at", -1).limit(limit)
+    items = []
+    async for doc in cursor:
+        items.append(_summarize(doc))
+    return {"items": items, "total": len(items)}
+
+
+@api_router.get("/inspections/{inspection_id}")
+async def get_inspection(inspection_id: str):
+    doc = await db.inspections.find_one({"id": inspection_id}, {"_id": 0})
+    if not doc:
+        raise HTTPException(status_code=404, detail="Inspection not found")
+    return {**doc, "summary": _summarize(doc)}
+
+
+@api_router.get("/metrics")
+async def metrics():
+    cursor = db.inspections.find({}, {"_id": 0})
+    total = 0
+    verdict_counts = {"pass": 0, "warn": 0, "fail": 0}
+    defect_type_counts: Dict[str, int] = {}
+    confidences: List[float] = []
+    async for doc in cursor:
+        total += 1
+        summary = _summarize(doc)
+        v = summary["verdict"] if summary["verdict"] in verdict_counts else "warn"
+        verdict_counts[v] += 1
+        confidences.append(summary["confidence"])
+        agents = doc.get("transcript", {}).get("agents", [])
+        inspector = next((a for a in agents if a["role"] == "inspector"), None)
+        defects = ((inspector or {}).get("output", {}).get("parsed", {}) or {}).get("defects") or []
+        if isinstance(defects, list):
+            for d in defects:
+                if isinstance(d, dict):
+                    t = (d.get("type") or "unknown").lower()
+                    defect_type_counts[t] = defect_type_counts.get(t, 0) + 1
+
+    avg_conf = sum(confidences) / len(confidences) if confidences else 0.0
+    top_defects = sorted(defect_type_counts.items(), key=lambda x: x[1], reverse=True)[:6]
+    quality_score = 0
+    if total > 0:
+        quality_score = round(100 * (verdict_counts["pass"] + 0.5 * verdict_counts["warn"]) / total)
+
+    return {
+        "total_inspections": total,
+        "verdict_counts": verdict_counts,
+        "avg_confidence": round(avg_conf, 3),
+        "top_defects": [{"type": t, "count": c} for t, c in top_defects],
+        "quality_score": quality_score,
+    }
+
+
+@api_router.get("/telemetry")
+async def telemetry():
+    """Simulated MI300X telemetry. Labeled as SIMULATED in the UI."""
+    t = time.time()
+    gpu_util = 62 + 30 * math.sin(t / 4.0)  # 32 - 92
+    vram_gb_total = 192.0  # MI300X HBM3
+    vram_used = 88 + 20 * math.sin(t / 7.0)
+    tokens_per_sec = 2850 + 450 * math.sin(t / 3.0)
+    power_w = 620 + 80 * math.sin(t / 5.0)
+    temp_c = 58 + 7 * math.sin(t / 6.0)
+    return {
+        "simulated": True,
+        "device": "AMD Instinct MI300X",
+        "gpu_util_pct": round(max(0, min(100, gpu_util)), 1),
+        "vram_used_gb": round(max(0, vram_used), 1),
+        "vram_total_gb": vram_gb_total,
+        "tokens_per_sec": int(max(0, tokens_per_sec)),
+        "power_watts": int(max(0, power_w)),
+        "temp_c": round(max(0, temp_c), 1),
+        "ts": _now_iso(),
+    }
+
+
+@api_router.get("/blueprint")
+async def blueprint():
+    return {
+        "stack": [
+            {
+                "layer": "Hardware",
+                "title": "AMD Instinct MI300X",
+                "detail": "192 GB HBM3 · 5.3 TB/s memory bandwidth · 8× GPU node",
+                "why": "Massive VRAM enables serving 70B-class Qwen-VL models without sharding.",
+            },
+            {
+                "layer": "Runtime",
+                "title": "ROCm 6.2",
+                "detail": "Open compute runtime · HIP · MIOpen · RCCL",
+                "why": "PyTorch + vLLM run natively on MI300X via ROCm.",
+            },
+            {
+                "layer": "Serving",
+                "title": "vLLM on ROCm",
+                "detail": "PagedAttention · continuous batching · OpenAI-compatible API",
+                "why": "High-throughput multimodal inference for the agent pipeline.",
+            },
+            {
+                "layer": "Model",
+                "title": "Qwen2-VL-72B (fine-tuned)",
+                "detail": "LoRA fine-tune on defect-image + work-order pairs via Optimum-AMD",
+                "why": "Domain-specialized vision reasoning beats zero-shot generic VLMs.",
+            },
+            {
+                "layer": "Agents",
+                "title": "Inspector → Diagnostician → Action → Reporter",
+                "detail": "Sequential multi-agent with structured JSON hand-offs",
+                "why": "Interpretable, auditable pipeline for industrial QC.",
+            },
+            {
+                "layer": "Product",
+                "title": "ForgeSight Console",
+                "detail": "React + FastAPI · live transcript · defect feed · build journal",
+                "why": "End-to-end demonstrable app shipped for the hackathon.",
+            },
+        ],
+        "finetune_recipe": {
+            "base_model": "Qwen/Qwen2-VL-72B-Instruct",
+            "dataset": "ForgeSight-QC-10K (proprietary defect-image ↔ work-order pairs)",
+            "method": "QLoRA r=64 · Optimum-AMD · bf16",
+            "hardware": "1× MI300X node (8 GPUs)",
+            "expected_wall_clock": "~6h for 3 epochs on 10K pairs",
+            "serve_with": "vLLM 0.6+ on ROCm",
+        },
+    }
+
+
+@api_router.get("/journal")
+async def list_journal():
+    cursor = db.journal.find({}, {"_id": 0}).sort("created_at", -1)
+    items = [doc async for doc in cursor]
+    return {"items": items, "total": len(items)}
+
+
+@api_router.post("/journal")
+async def create_journal(payload: JournalCreate):
+    try:
+        social = await generate_social_post(payload.title, payload.body)
+    except Exception:
+        logger.exception("Social gen failed; storing without drafts")
+        social = {"x_post": "", "linkedin_post": ""}
+
+    entry = {
+        "id": str(uuid.uuid4()),
+        "created_at": _now_iso(),
+        "title": payload.title,
+        "body": payload.body,
+        "tags": payload.tags or [],
+        "x_post": social.get("x_post", ""),
+        "linkedin_post": social.get("linkedin_post", ""),
+    }
+    await db.journal.insert_one({**entry})
+    return entry
+
+
+@api_router.post("/journal/seed")
+async def seed_journal():
+    """Idempotent seed of initial build-journal entries."""
+    existing = await db.journal.count_documents({})
+    if existing > 0:
+        return {"seeded": 0, "reason": "already seeded"}
+
+    seeds = [
+        {
+            "title": "Kickoff: ForgeSight on AMD Developer Cloud",
+            "body": "Spun up an MI300X instance on AMD Developer Cloud. First impression: zero CUDA-lock-in, ROCm + PyTorch just worked. Targeting all three hackathon tracks with one agentic multimodal QC copilot.",
+            "tags": ["kickoff", "amd", "rocm"],
+        },
+        {
+            "title": "Multi-agent pipeline wired end-to-end",
+            "body": "Inspector → Diagnostician → Action → Reporter. Each agent produces strict JSON so hand-offs stay auditable. Running on Claude Sonnet 4.5 today, swapping to Qwen2-VL on MI300X next.",
+            "tags": ["agents", "pipeline", "qwen"],
+        },
+        {
+            "title": "Fine-tune recipe: QLoRA on Qwen2-VL with Optimum-AMD",
+            "body": "Drafted the LoRA fine-tune path for 10K defect-image ↔ work-order pairs. Expecting ~6h wall-clock on a single MI300X node. vLLM-ROCm will serve the result.",
+            "tags": ["fine-tuning", "qlora", "optimum-amd"],
+        },
+    ]
+    for s in seeds:
+        try:
+            social = await generate_social_post(s["title"], s["body"])
+        except Exception:
+            social = {"x_post": "", "linkedin_post": ""}
+        await db.journal.insert_one({
+            "id": str(uuid.uuid4()),
+            "created_at": _now_iso(),
+            **s,
+            "x_post": social.get("x_post", ""),
+            "linkedin_post": social.get("linkedin_post", ""),
+        })
+    return {"seeded": len(seeds)}
+
+
 app.include_router(api_router)
 
 app.add_middleware(
     CORSMiddleware,
     allow_credentials=True,
-    allow_origins=os.environ.get('CORS_ORIGINS', '*').split(','),
+    allow_origins=os.environ.get("CORS_ORIGINS", "*").split(","),
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
-# Configure logging
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
-)
-logger = logging.getLogger(__name__)
+logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(name)s - %(levelname)s - %(message)s")
+logger = logging.getLogger("forgesight")
+
 
 @app.on_event("shutdown")
 async def shutdown_db_client():
-    client.close()
+    client.close()

frontend/public/index.html

@@ -21,7 +21,7 @@
         work correctly both with client-side routing and a non-root public URL.
         Learn how to configure a non-root public URL by running `npm run build`.
         -->
-        <title>Emergent | Fullstack App</title>
+        <title>ForgeSight · Multimodal QC Copilot · AMD MI300X</title>
         <script>window.addEventListener("error",function(e){if(e.error instanceof DOMException&&e.error.name==="DataCloneError"&&e.message&&e.message.includes("PerformanceServerTiming")){e.stopImmediatePropagation();e.preventDefault()}},true);</script>
         <script src="https://assets.emergent.sh/scripts/emergent-main.js"></script>
     </head>

frontend/src/App.css

@@ -1,34 +1,194 @@
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
+/* ForgeSight — industrial brutalist theme */
+
+@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700;900&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');
+
+:root {
+  --fs-bg: #0A0A0A;
+  --fs-surface: #141416;
+  --fs-surface-2: #1a1a1d;
+  --fs-border: rgba(255, 255, 255, 0.1);
+  --fs-border-strong: rgba(255, 255, 255, 0.2);
+  --fs-red: #ED1C24;
+  --fs-red-hot: #FF3B30;
+  --fs-amber: #F59E0B;
+  --fs-green: #10B981;
+  --fs-text: #FFFFFF;
+  --fs-text-mute: #A1A1AA;
+  --fs-text-dim: #71717A;
+}
+
+.App {
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  background: var(--fs-bg);
+  color: var(--fs-text);
+  letter-spacing: 0.005em;
+}
+
+.font-display { font-family: 'Chivo', sans-serif; }
+.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+
+/* Selection */
+::selection {
+  background: var(--fs-red);
+  color: #fff;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: #0A0A0A; }
+::-webkit-scrollbar-thumb { background: #2a2a2d; border: 2px solid #0A0A0A; }
+::-webkit-scrollbar-thumb:hover { background: var(--fs-red); }
+
+/* Industrial scanline overlay for agent console */
+.fs-scanlines {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0px,
+    transparent 2px,
+    rgba(255, 255, 255, 0.015) 2px,
+    rgba(255, 255, 255, 0.015) 3px
+  );
 }
 
-@media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
+/* Grid dots texture */
+.fs-grid-dots {
+  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  background-size: 24px 24px;
 }
 
-.App-header {
-    background-color: #0f0f10;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+/* Technical corner tick marks */
+.fs-corners {
+  position: relative;
+}
+.fs-corners::before,
+.fs-corners::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-color: var(--fs-red);
+  border-style: solid;
+  border-width: 0;
+}
+.fs-corners::before {
+  top: -1px; left: -1px;
+  border-top-width: 1px; border-left-width: 1px;
+}
+.fs-corners::after {
+  bottom: -1px; right: -1px;
+  border-bottom-width: 1px; border-right-width: 1px;
 }
 
-.App-link {
-    color: #61dafb;
+/* Blinking terminal cursor */
+.fs-cursor::after {
+  content: '▊';
+  display: inline-block;
+  margin-left: 2px;
+  color: var(--fs-red);
+  animation: fs-blink 1s steps(2) infinite;
+}
+@keyframes fs-blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Boot / entrance fade + slide */
+.fs-rise {
+  animation: fs-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes fs-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Pill button */
+.fs-btn {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 0.65rem 1.1rem;
+  border: 1px solid var(--fs-border-strong);
+  background: transparent;
+  color: #fff;
+  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
+  cursor: pointer;
+}
+.fs-btn:hover { border-color: var(--fs-red); color: var(--fs-red); }
+.fs-btn-primary {
+  background: var(--fs-red);
+  border-color: var(--fs-red);
+  color: #fff;
+}
+.fs-btn-primary:hover { background: var(--fs-red-hot); border-color: var(--fs-red-hot); color: #fff; }
+
+/* Tag chip */
+.fs-chip {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  padding: 0.2rem 0.55rem;
+  border: 1px solid var(--fs-border-strong);
+  color: var(--fs-text-mute);
+}
+.fs-chip-pass { color: var(--fs-green); border-color: rgba(16, 185, 129, 0.4); }
+.fs-chip-warn { color: var(--fs-amber); border-color: rgba(245, 158, 11, 0.4); }
+.fs-chip-fail { color: var(--fs-red); border-color: rgba(237, 28, 36, 0.5); }
+
+/* Label */
+.fs-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--fs-text-dim);
+}
+
+/* Dashed divider */
+.fs-hr {
+  border: none;
+  border-top: 1px dashed var(--fs-border);
+  margin: 0;
+}
+
+/* Hero headline stroke effect */
+.fs-stroke {
+  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
+  color: transparent;
+}
+
+/* Drop zone */
+.fs-drop {
+  border: 1px dashed var(--fs-border-strong);
+  transition: border-color 180ms ease, background-color 180ms ease;
+}
+.fs-drop.fs-drop-active {
+  border-color: var(--fs-red);
+  background-color: rgba(237, 28, 36, 0.05);
+}
+
+/* Minor utility */
+.fs-mono-small { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; }
+
+/* Telemetry bar */
+.fs-bar {
+  height: 4px;
+  background: var(--fs-border);
+  overflow: hidden;
+}
+.fs-bar > div {
+  height: 100%;
+  background: var(--fs-red);
+  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+/* Keyboard style */
+kbd {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  border: 1px solid var(--fs-border-strong);
+  background: #18181b;
+  color: var(--fs-text-mute);
 }

frontend/src/App.js

@@ -1,51 +1,26 @@
-import { useEffect } from "react";
 import "@/App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import axios from "axios";
-
-const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
-const API = `${BACKEND_URL}/api`;
-
-const Home = () => {
-  const helloWorldApi = async () => {
-    try {
-      const response = await axios.get(`${API}/`);
-      console.log(response.data.message);
-    } catch (e) {
-      console.error(e, `errored out requesting / api`);
-    }
-  };
-
-  useEffect(() => {
-    helloWorldApi();
-  }, []);
-
-  return (
-    <div>
-      <header className="App-header">
-        <a
-          className="App-link"
-          href="https://emergent.sh"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img src="https://avatars.githubusercontent.com/in/1201222?s=120&u=2686cf91179bbafbc7a71bfbc43004cf9ae1acea&v=4" />
-        </a>
-        <p className="mt-5">Building something incredible ~!</p>
-      </header>
-    </div>
-  );
-};
+import { Toaster } from "@/components/ui/sonner";
+import Nav from "@/components/Nav";
+import Landing from "@/pages/Landing";
+import Console from "@/pages/Console";
+import Feed from "@/pages/Feed";
+import Blueprint from "@/pages/Blueprint";
+import Journal from "@/pages/Journal";
 
 function App() {
   return (
-    <div className="App">
+    <div className="App min-h-screen bg-[#0A0A0A] text-white">
       <BrowserRouter>
+        <Nav />
         <Routes>
-          <Route path="/" element={<Home />}>
-            <Route index element={<Home />} />
-          </Route>
+          <Route path="/" element={<Landing />} />
+          <Route path="/console" element={<Console />} />
+          <Route path="/feed" element={<Feed />} />
+          <Route path="/blueprint" element={<Blueprint />} />
+          <Route path="/journal" element={<Journal />} />
         </Routes>
+        <Toaster theme="dark" position="bottom-right" />
       </BrowserRouter>
     </div>
   );

frontend/src/components/AgentTranscript.jsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { Eye, Stethoscope, Wrench, FileText } from "lucide-react";
+
+const ICONS = {
+  inspector: Eye,
+  diagnostician: Stethoscope,
+  action: Wrench,
+  reporter: FileText,
+};
+
+/**
+ * Pseudo-streams each agent's raw output character-by-character so the user
+ * sees live "thinking". The backend returns the full transcript in one shot.
+ */
+export default function AgentTranscript({ transcript, onDone }) {
+  const [visibleIndex, setVisibleIndex] = useState(-1);
+  const [visibleChars, setVisibleChars] = useState(0);
+
+  useEffect(() => {
+    if (!transcript) return;
+    setVisibleIndex(0);
+    setVisibleChars(0);
+  }, [transcript]);
+
+  useEffect(() => {
+    if (!transcript || visibleIndex < 0) return;
+    const agents = transcript.agents || [];
+    if (visibleIndex >= agents.length) {
+      onDone && onDone();
+      return;
+    }
+    const current = agents[visibleIndex];
+    const raw = formatRaw(current);
+    if (visibleChars < raw.length) {
+      const speed = Math.max(4, Math.floor(raw.length / 140));
+      const id = setTimeout(() => setVisibleChars((c) => Math.min(raw.length, c + speed)), 16);
+      return () => clearTimeout(id);
+    }
+    const next = setTimeout(() => {
+      setVisibleIndex((i) => i + 1);
+      setVisibleChars(0);
+    }, 320);
+    return () => clearTimeout(next);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [transcript, visibleIndex, visibleChars]);
+
+  if (!transcript) return null;
+  const agents = transcript.agents || [];
+
+  return (
+    <div className="space-y-0 border border-white/10 bg-[#0d0d10] fs-scanlines" data-testid="agent-transcript">
+      {agents.map((a, idx) => {
+        const Icon = ICONS[a.role] || Eye;
+        const active = idx === visibleIndex;
+        const done = idx < visibleIndex;
+        const raw = formatRaw(a);
+        const shown = done ? raw : active ? raw.slice(0, visibleChars) : "";
+        return (
+          <div
+            key={a.role}
+            className={`border-b border-white/10 last:border-b-0 p-5 transition-colors ${
+              active ? "bg-[#141416]" : "bg-transparent"
+            }`}
+            data-testid={`agent-block-${a.role}`}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-3">
+                <div
+                  className={`w-7 h-7 flex items-center justify-center border ${
+                    active || done ? "border-[#ED1C24] text-[#ED1C24]" : "border-white/20 text-zinc-500"
+                  }`}
+                >
+                  <Icon className="w-3.5 h-3.5" />
+                </div>
+                <div>
+                  <div className="font-display font-bold tracking-tight text-sm">{a.label}</div>
+                  <div className="fs-mono-small text-zinc-500">{a.model}</div>
+                </div>
+              </div>
+              <StatusPill state={done ? "done" : active ? "active" : "pending"} />
+            </div>
+
+            <pre className="font-mono text-[12.5px] leading-relaxed text-zinc-300 whitespace-pre-wrap break-words">
+              {shown}
+              {active && <span className="fs-cursor" />}
+              {!done && !active && <span className="text-zinc-600">awaiting upstream…</span>}
+            </pre>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function StatusPill({ state }) {
+  if (state === "done") return <span className="fs-chip fs-chip-pass">complete</span>;
+  if (state === "active") return <span className="fs-chip fs-chip-fail">streaming</span>;
+  return <span className="fs-chip">queued</span>;
+}
+
+function formatRaw(agent) {
+  const parsed = agent?.output?.parsed;
+  if (parsed && !parsed._raw) {
+    try {
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return agent?.output?.raw || "";
+    }
+  }
+  return agent?.output?.raw || "";
+}

frontend/src/components/Nav.jsx

@@ -0,0 +1,54 @@
+import { NavLink, useLocation } from "react-router-dom";
+import { Cpu } from "lucide-react";
+
+const items = [
+  { to: "/", label: "Home", key: "home" },
+  { to: "/console", label: "Console", key: "console" },
+  { to: "/feed", label: "Feed", key: "feed" },
+  { to: "/blueprint", label: "Blueprint", key: "blueprint" },
+  { to: "/journal", label: "Journal", key: "journal" },
+];
+
+export default function Nav() {
+  const { pathname } = useLocation();
+  return (
+    <nav
+      className="sticky top-0 z-40 w-full bg-[#0A0A0A]/90 backdrop-blur-md border-b border-white/10"
+      data-testid="top-nav"
+    >
+      <div className="mx-auto max-w-[1400px] px-6 h-14 flex items-center justify-between">
+        <NavLink to="/" className="flex items-center gap-3" data-testid="nav-logo">
+          <div className="w-6 h-6 border border-[#ED1C24] flex items-center justify-center">
+            <div className="w-1.5 h-1.5 bg-[#ED1C24]" />
+          </div>
+          <span className="font-display font-black tracking-tighter text-lg">FORGESIGHT</span>
+          <span className="fs-label hidden md:inline">v0.1 · hackathon build</span>
+        </NavLink>
+
+        <div className="hidden md:flex items-center gap-1 border border-white/10 p-1">
+          {items.map((it) => {
+            const active = pathname === it.to;
+            return (
+              <NavLink
+                key={it.key}
+                to={it.to}
+                data-testid={`nav-${it.key}`}
+                className={`px-3 py-1.5 text-xs font-mono uppercase tracking-[0.18em] transition-colors ${
+                  active ? "bg-[#ED1C24] text-white" : "text-zinc-400 hover:text-white hover:bg-white/5"
+                }`}
+              >
+                {it.label}
+              </NavLink>
+            );
+          })}
+        </div>
+
+        <div className="hidden lg:flex items-center gap-2 border border-white/10 px-3 py-1.5">
+          <Cpu className="w-3.5 h-3.5 text-[#ED1C24]" />
+          <span className="fs-mono-small text-zinc-400">POWERED BY</span>
+          <span className="fs-mono-small text-white">AMD INSTINCT MI300X</span>
+        </div>
+      </div>
+    </nav>
+  );
+}

frontend/src/components/TelemetryWidget.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import { Activity } from "lucide-react";
+
+export default function TelemetryWidget() {
+  const [t, setT] = useState(null);
+
+  useEffect(() => {
+    let alive = true;
+    const tick = async () => {
+      try {
+        const { data } = await api.get("/telemetry");
+        if (alive) setT(data);
+      } catch {}
+    };
+    tick();
+    const id = setInterval(tick, 1500);
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, []);
+
+  const vramPct = t ? (t.vram_used_gb / t.vram_total_gb) * 100 : 0;
+
+  return (
+    <div className="border border-white/10 bg-[#141416] p-5 fs-corners" data-testid="telemetry-widget">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Activity className="w-3.5 h-3.5 text-[#ED1C24]" />
+          <span className="fs-label">Live Telemetry</span>
+        </div>
+        <span className="fs-chip fs-chip-warn" data-testid="telemetry-simulated-chip">SIMULATED</span>
+      </div>
+
+      <div className="font-mono text-xs text-zinc-500 mb-3">
+        {t ? t.device : "AMD Instinct MI300X"}
+      </div>
+
+      <div className="space-y-3">
+        <Row label="GPU Util" value={t ? `${t.gpu_util_pct.toFixed(1)}%` : "—"} pct={t?.gpu_util_pct || 0} />
+        <Row
+          label="VRAM"
+          value={t ? `${t.vram_used_gb.toFixed(1)} / ${t.vram_total_gb} GB` : "—"}
+          pct={vramPct}
+        />
+        <Row label="Tokens/sec" value={t ? t.tokens_per_sec.toLocaleString() : "—"} pct={t ? (t.tokens_per_sec / 4000) * 100 : 0} />
+        <Row label="Power" value={t ? `${t.power_watts} W` : "—"} pct={t ? (t.power_watts / 750) * 100 : 0} />
+        <Row label="Temp" value={t ? `${t.temp_c.toFixed(1)} °C` : "—"} pct={t ? (t.temp_c / 90) * 100 : 0} />
+      </div>
+    </div>
+  );
+}
+
+function Row({ label, value, pct }) {
+  return (
+    <div>
+      <div className="flex items-baseline justify-between">
+        <span className="fs-mono-small text-zinc-500 uppercase">{label}</span>
+        <span className="font-mono text-sm text-white tabular-nums">{value}</span>
+      </div>
+      <div className="fs-bar mt-1.5">
+        <div style={{ width: `${Math.max(2, Math.min(100, pct))}%` }} />
+      </div>
+    </div>
+  );
+}

frontend/src/index.css

@@ -2,74 +2,41 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
+html, body {
     margin: 0;
-    font-family:
-        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-        sans-serif;
+    background: #0A0A0A;
+    color: #fff;
+    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family:
-        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
 }
 
 @layer base {
     :root {
-        --background: 0 0% 100%;
-        --foreground: 0 0% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 0 0% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 0 0% 3.9%;
-        --primary: 0 0% 9%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 0 0% 96.1%;
-        --secondary-foreground: 0 0% 9%;
-        --muted: 0 0% 96.1%;
-        --muted-foreground: 0 0% 45.1%;
-        --accent: 0 0% 96.1%;
-        --accent-foreground: 0 0% 9%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 89.8%;
-        --input: 0 0% 89.8%;
-        --ring: 0 0% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-        --radius: 0.5rem;
-    }
-    .dark {
-        --background: 0 0% 3.9%;
+        --background: 0 0% 4%;
         --foreground: 0 0% 98%;
-        --card: 0 0% 3.9%;
+        --card: 240 5% 8%;
         --card-foreground: 0 0% 98%;
-        --popover: 0 0% 3.9%;
+        --popover: 240 5% 8%;
         --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 0 0% 9%;
-        --secondary: 0 0% 14.9%;
+        --primary: 358 85% 52%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 240 5% 12%;
         --secondary-foreground: 0 0% 98%;
-        --muted: 0 0% 14.9%;
-        --muted-foreground: 0 0% 63.9%;
-        --accent: 0 0% 14.9%;
+        --muted: 240 5% 12%;
+        --muted-foreground: 240 5% 65%;
+        --accent: 240 5% 14%;
         --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
+        --destructive: 358 85% 52%;
         --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 14.9%;
-        --input: 0 0% 14.9%;
-        --ring: 0 0% 83.1%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
+        --border: 0 0% 15%;
+        --input: 0 0% 15%;
+        --ring: 358 85% 52%;
+        --radius: 0.125rem;
     }
 }
 
@@ -86,30 +53,12 @@ code {
     [data-debug-wrapper="true"] {
         display: contents !important;
     }
-
     [data-debug-wrapper="true"] > * {
-        margin-left: inherit;
-        margin-right: inherit;
-        margin-top: inherit;
-        margin-bottom: inherit;
-        padding-left: inherit;
-        padding-right: inherit;
-        padding-top: inherit;
-        padding-bottom: inherit;
-        column-gap: inherit;
-        row-gap: inherit;
-        gap: inherit;
-        border-left-width: inherit;
-        border-right-width: inherit;
-        border-top-width: inherit;
-        border-bottom-width: inherit;
-        border-left-style: inherit;
-        border-right-style: inherit;
-        border-top-style: inherit;
-        border-bottom-style: inherit;
-        border-left-color: inherit;
-        border-right-color: inherit;
-        border-top-color: inherit;
-        border-bottom-color: inherit;
+        margin-left: inherit; margin-right: inherit; margin-top: inherit; margin-bottom: inherit;
+        padding-left: inherit; padding-right: inherit; padding-top: inherit; padding-bottom: inherit;
+        column-gap: inherit; row-gap: inherit; gap: inherit;
+        border-left-width: inherit; border-right-width: inherit; border-top-width: inherit; border-bottom-width: inherit;
+        border-left-style: inherit; border-right-style: inherit; border-top-style: inherit; border-bottom-style: inherit;
+        border-left-color: inherit; border-right-color: inherit; border-top-color: inherit; border-bottom-color: inherit;
     }
 }

frontend/src/lib/api.js

@@ -0,0 +1,18 @@
+import axios from "axios";
+
+const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
+export const API = `${BACKEND_URL}/api`;
+
+export const api = axios.create({ baseURL: API, timeout: 180000 });
+
+export const fileToBase64 = (file) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const str = reader.result;
+      const comma = str.indexOf(",");
+      resolve(comma >= 0 ? str.slice(comma + 1) : str);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });

frontend/src/pages/Blueprint.jsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import { Cpu, HardDrive, Server, BookOpen, Bot, Rocket, ArrowDown } from "lucide-react";
+
+const LAYER_ICONS = {
+  Hardware: Cpu,
+  Runtime: HardDrive,
+  Serving: Server,
+  Model: BookOpen,
+  Agents: Bot,
+  Product: Rocket,
+};
+
+const BLUEPRINT_IMG = "https://static.prod-images.emergentagent.com/jobs/d5829a2e-bc03-4880-adcd-73acc809a3bd/images/7251062dc0e36ea4218374b05cc959bc4e6c55a2cf4789a8a2cbc38db6392916.png";
+
+export default function Blueprint() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    api.get("/blueprint").then(({ data }) => setData(data)).catch(() => {});
+  }, []);
+
+  return (
+    <div className="mx-auto max-w-[1400px] px-6 py-10" data-testid="blueprint-page">
+      <header className="mb-10 grid md:grid-cols-2 gap-10">
+        <div>
+          <div className="fs-label mb-3">§ BLUEPRINT · DEPLOYMENT STACK</div>
+          <h1 className="font-display font-black tracking-tighter text-4xl md:text-5xl">
+            The exact stack<br />we ship on MI300X.
+          </h1>
+          <p className="text-zinc-400 mt-4 max-w-lg">
+            Six layers. Zero CUDA lock-in. Every choice is justified against the constraints
+            of a factory-floor deployment: latency, privacy, and model memory footprint.
+          </p>
+        </div>
+        <div className="relative border border-white/10 overflow-hidden min-h-[240px]">
+          <img src={BLUEPRINT_IMG} alt="MI300X architecture" className="w-full h-full object-cover" />
+          <div className="absolute inset-0 bg-black/40" />
+          <div className="absolute bottom-3 left-3 fs-chip fs-chip-fail bg-black/70">AMD INSTINCT MI300X</div>
+        </div>
+      </header>
+
+      {/* Stack layers */}
+      <section className="mb-16">
+        <div className="fs-label mb-6">Stack · top to bottom</div>
+        <div className="border-l-2 border-[#ED1C24] pl-0">
+          {data?.stack?.map((layer, i) => {
+            const Icon = LAYER_ICONS[layer.layer] || Cpu;
+            return (
+              <div key={i} className="relative">
+                <div className="grid md:grid-cols-12 gap-6 border-b border-white/10 p-6 hover:bg-[#141416] transition-colors">
+                  <div className="md:col-span-2 flex items-start gap-3">
+                    <div className="w-9 h-9 border border-[#ED1C24] text-[#ED1C24] flex items-center justify-center">
+                      <Icon className="w-4 h-4" />
+                    </div>
+                    <div>
+                      <div className="fs-mono-small text-zinc-500">LAYER {String(i + 1).padStart(2, "0")}</div>
+                      <div className="font-display font-bold text-sm">{layer.layer}</div>
+                    </div>
+                  </div>
+                  <div className="md:col-span-4">
+                    <div className="font-display font-black tracking-tight text-xl">{layer.title}</div>
+                    <div className="font-mono text-xs text-zinc-500 mt-1">{layer.detail}</div>
+                  </div>
+                  <div className="md:col-span-6 text-sm text-zinc-400 leading-relaxed">{layer.why}</div>
+                </div>
+                {i < (data?.stack?.length || 0) - 1 && (
+                  <div className="flex justify-start pl-4 -mt-2 -mb-2">
+                    <ArrowDown className="w-3.5 h-3.5 text-[#ED1C24]" />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Fine-tune recipe */}
+      {data?.finetune_recipe && (
+        <section className="border border-white/10 bg-[#141416] p-8 fs-corners" data-testid="finetune-recipe">
+          <div className="flex items-end justify-between mb-6 flex-wrap gap-3">
+            <div>
+              <div className="fs-label mb-2">§ FINE-TUNE RECIPE · TRACK 2</div>
+              <h2 className="font-display font-black tracking-tighter text-2xl md:text-3xl">QLoRA on Qwen2-VL</h2>
+            </div>
+            <span className="fs-chip fs-chip-fail">MI300X · 8× GPU</span>
+          </div>
+          <div className="grid md:grid-cols-2 gap-0 border-t border-l border-white/10">
+            <Cell k="BASE MODEL" v={data.finetune_recipe.base_model} />
+            <Cell k="DATASET" v={data.finetune_recipe.dataset} />
+            <Cell k="METHOD" v={data.finetune_recipe.method} />
+            <Cell k="HARDWARE" v={data.finetune_recipe.hardware} />
+            <Cell k="WALL CLOCK" v={data.finetune_recipe.expected_wall_clock} />
+            <Cell k="SERVING" v={data.finetune_recipe.serve_with} />
+          </div>
+
+          <pre className="mt-8 font-mono text-[12px] leading-relaxed text-zinc-300 bg-[#0A0A0A] border border-white/10 p-5 overflow-x-auto">{`# ForgeSight fine-tune — MI300X + ROCm
+docker run --device=/dev/kfd --device=/dev/dri \\
+  --security-opt seccomp=unconfined --group-add video \\
+  rocm/pytorch:latest
+
+pip install "transformers>=4.45" "peft" "bitsandbytes" \\
+            "optimum-amd" "datasets" "accelerate" "vllm"
+
+# train
+accelerate launch --mixed_precision bf16 train_qlora.py \\
+  --base Qwen/Qwen2-VL-72B-Instruct \\
+  --data forgesight/qc-10k \\
+  --lora_r 64 --lora_alpha 128 \\
+  --epochs 3 --batch_size 4 --grad_accum 8
+
+# serve
+vllm serve forgesight/qwen2-vl-72b-qc \\
+  --tensor-parallel-size 8 --dtype bfloat16 --port 8000`}</pre>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function Cell({ k, v }) {
+  return (
+    <div className="border-r border-b border-white/10 p-5">
+      <div className="fs-label mb-2">{k}</div>
+      <div className="font-mono text-sm text-white break-words">{v}</div>
+    </div>
+  );
+}

frontend/src/pages/Console.jsx

@@ -0,0 +1,227 @@
+import { useCallback, useRef, useState } from "react";
+import { Upload, Image as ImageIcon, PlayCircle, RotateCcw } from "lucide-react";
+import { toast } from "sonner";
+import { api, fileToBase64 } from "@/lib/api";
+import TelemetryWidget from "@/components/TelemetryWidget";
+import AgentTranscript from "@/components/AgentTranscript";
+
+export default function Console() {
+  const [file, setFile] = useState(null);
+  const [preview, setPreview] = useState("");
+  const [notes, setNotes] = useState("");
+  const [spec, setSpec] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [dragActive, setDragActive] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleFile = useCallback((f) => {
+    if (!f) return;
+    if (!/(jpe?g|png|webp)$/i.test(f.type.split("/")[1] || f.name.split(".").pop())) {
+      toast.error("Only JPEG / PNG / WEBP images are supported");
+      return;
+    }
+    setFile(f);
+    setPreview(URL.createObjectURL(f));
+    setResult(null);
+  }, []);
+
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragActive(false);
+    const f = e.dataTransfer.files?.[0];
+    handleFile(f);
+  };
+
+  const runInspection = async () => {
+    if (!file) {
+      toast.error("Upload an image first");
+      return;
+    }
+    setLoading(true);
+    setResult(null);
+    try {
+      const image_base64 = await fileToBase64(file);
+      const { data } = await api.post("/inspections", {
+        image_base64,
+        notes,
+        product_spec: spec,
+        source: "upload",
+      });
+      setResult(data);
+      toast.success("Inspection complete");
+    } catch (e) {
+      toast.error(e?.response?.data?.detail || "Inspection failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const reset = () => {
+    setFile(null);
+    setPreview("");
+    setNotes("");
+    setSpec("");
+    setResult(null);
+  };
+
+  const summary = result?.summary;
+
+  return (
+    <div className="mx-auto max-w-[1400px] px-6 py-10" data-testid="console-page">
+      <header className="mb-8">
+        <div className="fs-label mb-3">§ CONSOLE · REAL-TIME INFERENCE</div>
+        <h1 className="font-display font-black tracking-tighter text-4xl md:text-5xl">
+          Inspection Console
+        </h1>
+        <p className="text-zinc-400 mt-3 max-w-2xl">
+          Upload a product / assembly-line image. Four agents will collaborate to deliver a verdict.
+        </p>
+      </header>
+
+      <div className="grid lg:grid-cols-12 gap-6">
+        {/* LEFT — input */}
+        <div className="lg:col-span-5 space-y-6">
+          <div className="border border-white/10 bg-[#141416] p-5 fs-corners">
+            <div className="flex items-center justify-between mb-4">
+              <span className="fs-label">Specimen</span>
+              {file && (
+                <button
+                  onClick={reset}
+                  className="fs-chip hover:text-white hover:border-white/40 inline-flex items-center gap-1"
+                  data-testid="reset-btn"
+                >
+                  <RotateCcw className="w-3 h-3" /> Reset
+                </button>
+              )}
+            </div>
+
+            {!preview ? (
+              <div
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  setDragActive(true);
+                }}
+                onDragLeave={() => setDragActive(false)}
+                onDrop={onDrop}
+                className={`fs-drop ${dragActive ? "fs-drop-active" : ""} h-64 flex flex-col items-center justify-center cursor-pointer`}
+                onClick={() => inputRef.current?.click()}
+                data-testid="drop-zone"
+              >
+                <Upload className="w-8 h-8 text-zinc-500 mb-3" />
+                <div className="font-mono text-sm text-zinc-300">Drop image here</div>
+                <div className="fs-mono-small text-zinc-500 mt-1">or click to browse · JPG · PNG · WEBP</div>
+                <input
+                  ref={inputRef}
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp"
+                  className="hidden"
+                  onChange={(e) => handleFile(e.target.files?.[0])}
+                  data-testid="file-input"
+                />
+              </div>
+            ) : (
+              <div className="relative border border-white/10">
+                <img src={preview} alt="specimen" className="w-full h-64 object-cover" data-testid="preview-img" />
+                <div className="absolute top-2 left-2 fs-chip bg-black/80">
+                  <ImageIcon className="w-3 h-3 inline mr-1" />
+                  {file?.name?.slice(0, 28)}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-5 space-y-3">
+              <div>
+                <div className="fs-label mb-2">Operator Notes</div>
+                <textarea
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  rows={2}
+                  placeholder="e.g. batch B-124, shift 2, CNC line 3…"
+                  className="w-full bg-[#0A0A0A] border border-white/10 focus:border-[#ED1C24] outline-none px-3 py-2 font-mono text-sm text-white placeholder-zinc-600"
+                  data-testid="notes-input"
+                />
+              </div>
+              <div>
+                <div className="fs-label mb-2">Product Spec (optional)</div>
+                <textarea
+                  value={spec}
+                  onChange={(e) => setSpec(e.target.value)}
+                  rows={2}
+                  placeholder="e.g. aluminum 6061 bracket, max surface defect 0.2mm…"
+                  className="w-full bg-[#0A0A0A] border border-white/10 focus:border-[#ED1C24] outline-none px-3 py-2 font-mono text-sm text-white placeholder-zinc-600"
+                  data-testid="spec-input"
+                />
+              </div>
+              <button
+                disabled={loading || !file}
+                onClick={runInspection}
+                className="fs-btn fs-btn-primary w-full inline-flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed"
+                data-testid="run-inspection-btn"
+              >
+                {loading ? (
+                  <>Running pipeline<span className="fs-cursor" /></>
+                ) : (
+                  <>
+                    <PlayCircle className="w-4 h-4" /> Run inspection
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+
+          <TelemetryWidget />
+        </div>
+
+        {/* RIGHT — transcript */}
+        <div className="lg:col-span-7 space-y-6">
+          {summary && (
+            <div className="border border-white/10 bg-[#141416] p-5 grid grid-cols-2 md:grid-cols-4 gap-4 fs-rise" data-testid="summary-panel">
+              <SummaryStat label="Verdict" value={summary.verdict.toUpperCase()} kind={summary.verdict} />
+              <SummaryStat label="Confidence" value={`${Math.round(summary.confidence * 100)}%`} />
+              <SummaryStat label="Defects" value={summary.defect_count} />
+              <SummaryStat label="Priority" value={summary.priority} />
+            </div>
+          )}
+
+          {result ? (
+            <AgentTranscript transcript={result.transcript} />
+          ) : (
+            <EmptyTranscript loading={loading} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SummaryStat({ label, value, kind }) {
+  const color =
+    kind === "pass" ? "text-[#10B981]" :
+    kind === "warn" ? "text-[#F59E0B]" :
+    kind === "fail" ? "text-[#ED1C24]" : "text-white";
+  return (
+    <div>
+      <div className="fs-label mb-1">{label}</div>
+      <div className={`font-display font-black text-2xl tabular-nums ${color}`}>{value}</div>
+    </div>
+  );
+}
+
+function EmptyTranscript({ loading }) {
+  return (
+    <div className="border border-white/10 bg-[#0d0d10] fs-scanlines p-10 text-center" data-testid="empty-transcript">
+      <div className="fs-label mb-4">Awaiting specimen</div>
+      <div className="font-mono text-sm text-zinc-500 max-w-md mx-auto">
+        {loading ? (
+          <>
+            Running 4-agent pipeline
+            <span className="fs-cursor" />
+          </>
+        ) : (
+          <>Upload an image and hit <kbd>Run inspection</kbd>. Agents stream their reasoning live.</>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Feed.jsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "@/lib/api";
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts";
+import { AlertTriangle, CheckCircle2, XCircle, TrendingUp } from "lucide-react";
+
+export default function Feed() {
+  const [metrics, setMetrics] = useState(null);
+  const [items, setItems] = useState([]);
+
+  const load = async () => {
+    try {
+      const [m, l] = await Promise.all([api.get("/metrics"), api.get("/inspections")]);
+      setMetrics(m.data);
+      setItems(l.data.items || []);
+    } catch {}
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const verdictChart = metrics
+    ? [
+        { name: "pass", value: metrics.verdict_counts.pass, color: "#10B981" },
+        { name: "warn", value: metrics.verdict_counts.warn, color: "#F59E0B" },
+        { name: "fail", value: metrics.verdict_counts.fail, color: "#ED1C24" },
+      ]
+    : [];
+
+  return (
+    <div className="mx-auto max-w-[1400px] px-6 py-10" data-testid="feed-page">
+      <header className="mb-8 flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <div className="fs-label mb-3">§ FEED · DASHBOARD</div>
+          <h1 className="font-display font-black tracking-tighter text-4xl md:text-5xl">
+            Defect Feed
+          </h1>
+          <p className="text-zinc-400 mt-3">Every inspection. Live quality score.</p>
+        </div>
+        <Link to="/console" className="fs-btn fs-btn-primary" data-testid="feed-run-btn">
+          + New inspection
+        </Link>
+      </header>
+
+      {/* Metrics grid */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-0 border-t border-l border-white/10 mb-8">
+        <Kpi label="Total inspections" value={metrics?.total_inspections ?? "—"} icon={TrendingUp} />
+        <Kpi label="Quality score" value={metrics ? `${metrics.quality_score}%` : "—"} icon={CheckCircle2} accent />
+        <Kpi label="Avg confidence" value={metrics ? `${Math.round(metrics.avg_confidence * 100)}%` : "—"} icon={AlertTriangle} />
+        <Kpi label="Fail rate" value={metrics && metrics.total_inspections ? `${Math.round((metrics.verdict_counts.fail / metrics.total_inspections) * 100)}%` : "—"} icon={XCircle} />
+      </div>
+
+      <div className="grid lg:grid-cols-2 gap-6 mb-8">
+        {/* Verdict chart */}
+        <div className="border border-white/10 bg-[#141416] p-5 fs-corners">
+          <div className="flex items-center justify-between mb-4">
+            <span className="fs-label">Verdict distribution</span>
+            <span className="fs-mono-small text-zinc-500">ALL TIME</span>
+          </div>
+          <div className="h-56">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={verdictChart}>
+                <XAxis dataKey="name" stroke="#71717A" tick={{ fontFamily: "JetBrains Mono", fontSize: 11 }} axisLine={{ stroke: "#27272A" }} tickLine={false} />
+                <YAxis stroke="#71717A" tick={{ fontFamily: "JetBrains Mono", fontSize: 11 }} axisLine={{ stroke: "#27272A" }} tickLine={false} />
+                <Tooltip
+                  cursor={{ fill: "rgba(237,28,36,0.08)" }}
+                  contentStyle={{ background: "#0A0A0A", border: "1px solid #27272A", fontFamily: "JetBrains Mono" }}
+                  labelStyle={{ color: "#fff" }}
+                />
+                <Bar dataKey="value">
+                  {verdictChart.map((entry, i) => (
+                    <Cell key={i} fill={entry.color} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Top defects */}
+        <div className="border border-white/10 bg-[#141416] p-5 fs-corners">
+          <div className="flex items-center justify-between mb-4">
+            <span className="fs-label">Top defect types</span>
+          </div>
+          {metrics && metrics.top_defects.length ? (
+            <div className="space-y-2.5">
+              {metrics.top_defects.map((d) => {
+                const max = metrics.top_defects[0].count || 1;
+                const pct = (d.count / max) * 100;
+                return (
+                  <div key={d.type}>
+                    <div className="flex items-baseline justify-between mb-1">
+                      <span className="font-mono text-xs text-zinc-300">{d.type}</span>
+                      <span className="font-mono text-xs text-zinc-500 tabular-nums">{d.count}</span>
+                    </div>
+                    <div className="fs-bar">
+                      <div style={{ width: `${Math.max(8, pct)}%` }} />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="h-40 flex items-center justify-center font-mono text-sm text-zinc-600">
+              No inspections yet.
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="border border-white/10 bg-[#141416]">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+          <span className="fs-label">Inspection log · {items.length}</span>
+        </div>
+        {items.length === 0 ? (
+          <div className="p-10 text-center font-mono text-sm text-zinc-500">
+            No inspections yet. Head to the Console to run the first one.
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" data-testid="inspections-table">
+              <thead>
+                <tr className="text-left border-b border-white/10">
+                  <Th>Time</Th>
+                  <Th>Verdict</Th>
+                  <Th>Headline</Th>
+                  <Th>Defects</Th>
+                  <Th>Priority</Th>
+                  <Th>Confidence</Th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((it) => (
+                  <tr key={it.id} className="border-b border-white/5 hover:bg-white/[0.02]">
+                    <Td mono>{new Date(it.created_at).toLocaleString()}</Td>
+                    <Td>
+                      <span className={`fs-chip fs-chip-${it.verdict}`}>{it.verdict}</span>
+                    </Td>
+                    <Td>{it.headline}</Td>
+                    <Td mono>{it.defect_count}</Td>
+                    <Td mono>{it.priority}</Td>
+                    <Td mono>{Math.round(it.confidence * 100)}%</Td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Kpi({ label, value, icon: Icon, accent }) {
+  return (
+    <div className="border-r border-b border-white/10 p-5">
+      <div className="flex items-center justify-between mb-3">
+        <span className="fs-label">{label}</span>
+        <Icon className={`w-3.5 h-3.5 ${accent ? "text-[#ED1C24]" : "text-zinc-500"}`} />
+      </div>
+      <div className={`font-display font-black text-3xl md:text-4xl tracking-tighter ${accent ? "text-[#ED1C24]" : "text-white"}`}>
+        {value}
+      </div>
+    </div>
+  );
+}
+function Th({ children }) {
+  return <th className="px-5 py-3 fs-label font-normal">{children}</th>;
+}
+function Td({ children, mono }) {
+  return <td className={`px-5 py-3 ${mono ? "font-mono text-xs" : "text-sm"} text-zinc-300`}>{children}</td>;
+}

frontend/src/pages/Journal.jsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import { toast } from "sonner";
+import { Twitter, Linkedin, Copy, Plus, Sparkles } from "lucide-react";
+
+export default function Journal() {
+  const [items, setItems] = useState([]);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [tags, setTags] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const load = async () => {
+    try {
+      const { data } = await api.get("/journal");
+      setItems(data.items || []);
+      if ((data.items || []).length === 0) {
+        await api.post("/journal/seed");
+        const r = await api.get("/journal");
+        setItems(r.data.items || []);
+      }
+    } catch {}
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const submit = async () => {
+    if (!title.trim() || !body.trim()) {
+      toast.error("Title + body required");
+      return;
+    }
+    setBusy(true);
+    try {
+      const { data } = await api.post("/journal", {
+        title,
+        body,
+        tags: tags.split(",").map((t) => t.trim()).filter(Boolean),
+      });
+      setItems((prev) => [data, ...prev]);
+      setTitle("");
+      setBody("");
+      setTags("");
+      toast.success("Milestone logged + social drafts generated");
+    } catch (e) {
+      toast.error(e?.response?.data?.detail || "Failed to log milestone");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const copy = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied`);
+    } catch {
+      toast.error("Copy failed");
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-[1400px] px-6 py-10" data-testid="journal-page">
+      <header className="mb-8">
+        <div className="fs-label mb-3">§ JOURNAL · BUILD-IN-PUBLIC</div>
+        <h1 className="font-display font-black tracking-tighter text-4xl md:text-5xl">Build Journal</h1>
+        <p className="text-zinc-400 mt-3 max-w-2xl">
+          Every milestone auto-drafts social posts — X + LinkedIn — ready to ship, hashtags and AMD / lablab mentions baked in.
+        </p>
+      </header>
+
+      <div className="grid lg:grid-cols-12 gap-6">
+        {/* Composer */}
+        <aside className="lg:col-span-4">
+          <div className="border border-white/10 bg-[#141416] p-5 fs-corners sticky top-20" data-testid="journal-composer">
+            <div className="flex items-center gap-2 mb-4">
+              <Sparkles className="w-3.5 h-3.5 text-[#ED1C24]" />
+              <span className="fs-label">New milestone</span>
+            </div>
+            <div className="space-y-3">
+              <input
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Title…"
+                className="w-full bg-[#0A0A0A] border border-white/10 focus:border-[#ED1C24] outline-none px-3 py-2 font-mono text-sm"
+                data-testid="journal-title-input"
+              />
+              <textarea
+                value={body}
+                onChange={(e) => setBody(e.target.value)}
+                rows={5}
+                placeholder="What happened today?"
+                className="w-full bg-[#0A0A0A] border border-white/10 focus:border-[#ED1C24] outline-none px-3 py-2 font-mono text-sm"
+                data-testid="journal-body-input"
+              />
+              <input
+                value={tags}
+                onChange={(e) => setTags(e.target.value)}
+                placeholder="tags, comma, separated"
+                className="w-full bg-[#0A0A0A] border border-white/10 focus:border-[#ED1C24] outline-none px-3 py-2 font-mono text-sm"
+                data-testid="journal-tags-input"
+              />
+              <button
+                disabled={busy}
+                onClick={submit}
+                className="fs-btn fs-btn-primary w-full inline-flex items-center justify-center gap-2 disabled:opacity-50"
+                data-testid="journal-submit-btn"
+              >
+                {busy ? (
+                  <>Generating drafts<span className="fs-cursor" /></>
+                ) : (
+                  <>
+                    <Plus className="w-4 h-4" /> Log + draft posts
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </aside>
+
+        {/* Timeline */}
+        <section className="lg:col-span-8 space-y-5" data-testid="journal-timeline">
+          {items.length === 0 && (
+            <div className="border border-white/10 bg-[#141416] p-10 text-center font-mono text-sm text-zinc-500">
+              No entries yet. Log your first milestone →
+            </div>
+          )}
+          {items.map((e) => (
+            <article key={e.id} className="border border-white/10 bg-[#141416] p-6 fs-rise" data-testid={`journal-entry-${e.id}`}>
+              <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
+                <div className="flex items-center gap-2">
+                  <span className="fs-chip fs-chip-fail">{new Date(e.created_at).toLocaleDateString()}</span>
+                  {e.tags?.map((t) => (
+                    <span key={t} className="fs-chip">#{t}</span>
+                  ))}
+                </div>
+              </div>
+              <h3 className="font-display font-black tracking-tight text-xl mb-2">{e.title}</h3>
+              <p className="text-sm text-zinc-300 leading-relaxed whitespace-pre-line">{e.body}</p>
+
+              <div className="grid md:grid-cols-2 gap-3 mt-5">
+                {e.x_post && (
+                  <SocialCard
+                    icon={Twitter}
+                    label="X POST"
+                    text={e.x_post}
+                    onCopy={() => copy(e.x_post, "X post")}
+                    testid={`x-post-${e.id}`}
+                  />
+                )}
+                {e.linkedin_post && (
+                  <SocialCard
+                    icon={Linkedin}
+                    label="LINKEDIN POST"
+                    text={e.linkedin_post}
+                    onCopy={() => copy(e.linkedin_post, "LinkedIn post")}
+                    testid={`li-post-${e.id}`}
+                  />
+                )}
+              </div>
+            </article>
+          ))}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function SocialCard({ icon: Icon, label, text, onCopy, testid }) {
+  return (
+    <div className="border border-white/10 bg-[#0A0A0A] p-4" data-testid={testid}>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <Icon className="w-3.5 h-3.5 text-[#ED1C24]" />
+          <span className="fs-label">{label}</span>
+        </div>
+        <button
+          onClick={onCopy}
+          className="fs-chip hover:text-white hover:border-white/40 inline-flex items-center gap-1"
+        >
+          <Copy className="w-3 h-3" /> copy
+        </button>
+      </div>
+      <div className="font-mono text-xs text-zinc-300 leading-relaxed whitespace-pre-line">{text}</div>
+    </div>
+  );
+}

frontend/src/pages/Landing.jsx

@@ -0,0 +1,164 @@
+import { Link } from "react-router-dom";
+import { ArrowRight, Activity, Eye, Cpu, Megaphone, Layers, Zap } from "lucide-react";
+
+const HERO = "https://static.prod-images.emergentagent.com/jobs/d5829a2e-bc03-4880-adcd-73acc809a3bd/images/184a8bf32b150669152ea3aa72546730d8caad845b1b8eb0233eeb35e4255eeb.png";
+
+export default function Landing() {
+  return (
+    <div className="text-white" data-testid="landing-page">
+      {/* HERO */}
+      <section className="relative border-b border-white/10 overflow-hidden">
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${HERO})` }}
+        />
+        <div className="absolute inset-0 bg-black/70" />
+        <div className="absolute inset-0 fs-grid-dots opacity-40" />
+
+        <div className="relative mx-auto max-w-[1400px] px-6 py-24 md:py-32 lg:py-40">
+          <div className="flex items-center gap-2 mb-8 fs-rise">
+            <span className="fs-chip fs-chip-fail">LIVE DEMO</span>
+            <span className="fs-chip">AMD HACKATHON · TRACKS 1 · 2 · 3</span>
+            <span className="fs-chip hidden md:inline-flex">QWEN CATEGORY</span>
+          </div>
+
+          <h1 className="font-display font-black tracking-tighter leading-[0.88] text-5xl md:text-7xl lg:text-8xl max-w-4xl fs-rise">
+            MULTIMODAL<br />
+            <span className="fs-stroke">QUALITY-CONTROL</span><br />
+            COPILOT.
+          </h1>
+
+          <p className="mt-10 max-w-2xl text-zinc-300 text-base md:text-lg leading-relaxed fs-rise">
+            ForgeSight ships a 4-agent pipeline that inspects assembly-line images,
+            diagnoses root cause, drafts work orders, and publishes reports — fine-tuned
+            on <span className="text-white font-semibold">Qwen2-VL</span> and served on
+            <span className="text-white font-semibold"> AMD Instinct MI300X</span> via ROCm + vLLM.
+          </p>
+
+          <div className="mt-10 flex flex-wrap items-center gap-3 fs-rise">
+            <Link
+              to="/console"
+              className="fs-btn fs-btn-primary inline-flex items-center gap-2"
+              data-testid="hero-cta-console"
+            >
+              Run a live inspection <ArrowRight className="w-3.5 h-3.5" />
+            </Link>
+            <Link to="/blueprint" className="fs-btn inline-flex items-center gap-2" data-testid="hero-cta-blueprint">
+              See the MI300X blueprint
+            </Link>
+          </div>
+
+          <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-0 max-w-3xl fs-rise border-t border-white/10">
+            <Stat k="192 GB" v="HBM3 per GPU" />
+            <Stat k="5.3 TB/s" v="memory bandwidth" />
+            <Stat k="4" v="cooperating agents" />
+            <Stat k="~6 h" v="QLoRA wall-clock" />
+          </div>
+        </div>
+      </section>
+
+      {/* MANIFESTO */}
+      <section className="border-b border-white/10">
+        <div className="mx-auto max-w-[1400px] px-6 py-20 grid md:grid-cols-12 gap-10">
+          <div className="md:col-span-4">
+            <div className="fs-label mb-4">§ 01 · THESIS</div>
+            <h2 className="font-display font-black tracking-tighter text-3xl md:text-4xl leading-[0.95]">
+              Generic VLMs<br />don't know what<br />a bad weld looks like.
+            </h2>
+          </div>
+          <div className="md:col-span-8 text-zinc-300 space-y-5 text-base leading-relaxed">
+            <p>
+              Manufacturing QC is context-heavy, privacy-sensitive, and latency-critical.
+              Zero-shot vision models hallucinate on defects they've never seen.
+            </p>
+            <p>
+              ForgeSight fine-tunes <span className="text-white">Qwen2-VL</span> on
+              domain pairs of <span className="font-mono text-[#ED1C24]">{"{defect image → work order}"}</span>,
+              then serves the result with <span className="text-white">vLLM on ROCm</span> across an
+              MI300X node. The massive 192 GB HBM3 per device lets us keep the full 72B model resident
+              without sharding overhead — real-time inference on the factory floor.
+            </p>
+            <p>
+              Around the model, four cooperating agents (Inspector → Diagnostician → Action → Reporter)
+              produce strict-JSON hand-offs so every verdict is auditable.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* FEATURES */}
+      <section className="border-b border-white/10">
+        <div className="mx-auto max-w-[1400px] px-6 py-20">
+          <div className="flex items-end justify-between mb-12">
+            <div>
+              <div className="fs-label mb-4">§ 02 · MODULES</div>
+              <h2 className="font-display font-black tracking-tighter text-3xl md:text-4xl">What's in the box.</h2>
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-0 border-t border-l border-white/10">
+            <Feat icon={Eye} title="Inspection Console" body="Drag, drop, inspect. Watch four agents stream strict-JSON hand-offs in real time." to="/console" testid="feat-console" />
+            <Feat icon={Activity} title="Defect Feed" body="Every inspection, quality score, and defect-type breakdown — charted live." to="/feed" testid="feat-feed" />
+            <Feat icon={Layers} title="Deployment Blueprint" body="The exact stack: MI300X → ROCm → vLLM → Qwen2-VL fine-tune recipe." to="/blueprint" testid="feat-blueprint" />
+            <Feat icon={Megaphone} title="Build Journal" body="Every milestone auto-drafts X and LinkedIn posts. Ship it, tell the story." to="/journal" testid="feat-journal" />
+            <Feat icon={Cpu} title="Live GPU Telemetry" body="Simulated MI300X util, VRAM, tokens/sec — the factory-floor HMI feel." to="/console" testid="feat-telemetry" />
+            <Feat icon={Zap} title="Qwen-first" body="Qwen2-VL for vision, Qwen2.5 for text reasoning. Built for the Qwen category prize." to="/blueprint" testid="feat-qwen" />
+          </div>
+        </div>
+      </section>
+
+      {/* FOOTER CTA */}
+      <section className="border-b border-white/10">
+        <div className="mx-auto max-w-[1400px] px-6 py-20 text-center">
+          <div className="fs-label mb-4">§ 03 · NEXT</div>
+          <h2 className="font-display font-black tracking-tighter text-4xl md:text-6xl leading-[0.9]">
+            Upload an image.<br />
+            <span className="text-[#ED1C24]">Get a verdict in 20 seconds.</span>
+          </h2>
+          <div className="mt-10 flex items-center justify-center gap-3">
+            <Link to="/console" className="fs-btn fs-btn-primary inline-flex items-center gap-2" data-testid="footer-cta-console">
+              Open Inspection Console <ArrowRight className="w-3.5 h-3.5" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <footer className="border-b border-white/10">
+        <div className="mx-auto max-w-[1400px] px-6 py-10 flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="fs-mono-small text-zinc-500">FORGESIGHT · BUILT FOR AMD + LABLAB HACKATHON · FEB 2026</div>
+          <div className="flex items-center gap-3">
+            <span className="fs-chip">#AMDHACKATHON</span>
+            <span className="fs-chip">#ROCM</span>
+            <span className="fs-chip">#QWEN</span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function Stat({ k, v }) {
+  return (
+    <div className="border-r border-b border-white/10 last:border-r-0 p-4">
+      <div className="font-display font-black text-2xl md:text-3xl tracking-tighter">{k}</div>
+      <div className="fs-mono-small text-zinc-500 uppercase mt-1">{v}</div>
+    </div>
+  );
+}
+
+function Feat({ icon: Icon, title, body, to, testid }) {
+  return (
+    <Link
+      to={to}
+      data-testid={testid}
+      className="group border-r border-b border-white/10 p-8 hover:bg-[#141416] transition-colors block"
+    >
+      <Icon className="w-5 h-5 text-[#ED1C24] mb-5" />
+      <div className="font-display font-bold text-lg mb-2">{title}</div>
+      <div className="text-sm text-zinc-400 leading-relaxed">{body}</div>
+      <div className="mt-6 fs-mono-small text-zinc-500 group-hover:text-[#ED1C24] transition-colors inline-flex items-center gap-1">
+        OPEN <ArrowRight className="w-3 h-3" />
+      </div>
+    </Link>
+  );
+}

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+