OpenCode Dashboard

.dockerignore

@@ -0,0 +1,5 @@
+.git
+.gitignore
+__pycache__
+*.pyc
+.DS_Store

README.md

@@ -0,0 +1,15 @@
+---
+title: OpenCode Dashboard
+emoji: 🤖
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# OpenCode Dashboard
+
+Multi-project orchestrator for Hugging Face Spaces.
+
+Set `HF_TOKEN` as a Space secret to enable Spaces management.

main.py

@@ -0,0 +1,324 @@
+from __future__ import annotations
+
+import asyncio
+import json
+import os
+import uuid
+from collections.abc import AsyncIterator
+from dataclasses import dataclass
+from datetime import datetime, timezone
+from enum import Enum
+from typing import Any
+
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import HTMLResponse, StreamingResponse
+from pydantic import BaseModel
+
+
+# ── Types ─────────────────────────────────────────────────────
+
+class State(str, Enum):
+    CREATED = "created"
+    PLANNING = "planning"
+    BUILDING = "building"
+    RUNNING = "running"
+    DONE = "done"
+    FAILED = "failed"
+
+
+@dataclass
+class Entry:
+    id: str
+    name: str
+    goal: str
+    state: State = State.CREATED
+    created: str = ""
+    error: str | None = None
+    space_id: str = ""
+    space_url: str = ""
+
+
+# ── Event Bus ─────────────────────────────────────────────────
+
+class Bus:
+    def __init__(self) -> None:
+        self._qs: list[asyncio.Queue[bytes]] = []
+
+    def sub(self) -> asyncio.Queue[bytes]:
+        q: asyncio.Queue[bytes] = asyncio.Queue(500)
+        self._qs.append(q)
+        return q
+
+    def unsub(self, q: asyncio.Queue[bytes]) -> None:
+        if q in self._qs:
+            self._qs.remove(q)
+
+    async def pub(self, kind: str, payload: dict[str, Any]) -> None:
+        msg = json.dumps({"cat": kind, "payload": payload, "ts": datetime.now(timezone.utc).isoformat()}).encode()
+        for q in self._qs:
+            try:
+                q.put_nowait(msg)
+            except asyncio.QueueFull:
+                pass
+
+    async def stream(self) -> AsyncIterator[bytes]:
+        q = self.sub()
+        try:
+            while True:
+                try:
+                    yield b"data: " + await asyncio.wait_for(q.get(), 30) + b"\n\n"
+                except asyncio.TimeoutError:
+                    yield b": keep\n\n"
+        finally:
+            self.unsub(q)
+
+
+bus = Bus()
+
+
+# ── Store ─────────────────────────────────────────────────────
+
+class Store:
+    def __init__(self) -> None:
+        self._data: dict[str, Entry] = {}
+
+    async def add(self, goal: str, name: str | None = None) -> Entry:
+        e = Entry(
+            id=uuid.uuid4().hex[:12],
+            name=name or goal[:30],
+            goal=goal,
+            created=datetime.now(timezone.utc).isoformat(),
+        )
+        self._data[e.id] = e
+        await bus.pub("project.created", {"id": e.id, "goal": goal})
+        return e
+
+    def get(self, eid: str) -> Entry | None:
+        return self._data.get(eid)
+
+    def all(self) -> list[Entry]:
+        return list(self._data.values())
+
+    async def drop(self, eid: str) -> bool:
+        e = self._data.pop(eid, None)
+        if e:
+            await bus.pub("notification", {"message": f"Deleted {e.name}"})
+            return True
+        return False
+
+
+store = Store()
+
+
+# ── HF Manager ────────────────────────────────────────────────
+
+class HF:
+    def __init__(self) -> None:
+        self._token: str | None = None
+        self._user: str | None = None
+        self._ok = False
+
+    async def setup(self) -> None:
+        self._token = os.environ.get("HF_TOKEN")
+        if not self._token:
+            await bus.pub("notification", {"message": "Set HF_TOKEN to enable Spaces"})
+            return
+        try:
+            import httpx
+            async with httpx.AsyncClient() as c:
+                r = await c.get("https://huggingface.co/api/whoami", headers={"Authorization": f"Bearer {self._token}"})
+                if r.is_success:
+                    self._user = r.json().get("name", "")
+                    self._ok = True
+                    await bus.pub("notification", {"message": f"HF: {self._user}"})
+        except Exception:
+            pass
+
+    @property
+    def ready(self) -> bool:
+        return self._ok
+
+    @property
+    def user(self) -> str | None:
+        return self._user
+
+    async def create(self, name: str, secrets: dict[str, str] | None = None) -> dict[str, Any]:
+        if not self._ok:
+            return {"error": "no hf token"}
+        try:
+            import httpx
+            sn = name.lower().replace(" ", "-").replace("_", "-")
+            rid = f"{self._user}/{sn}"
+            async with httpx.AsyncClient() as c:
+                r = await c.post(
+                    "https://huggingface.co/api/repos/create",
+                    headers={"Authorization": f"Bearer {self._token}", "Content-Type": "application/json"},
+                    json={"name": sn, "type": "space", "sdk": "docker"},
+                )
+                if not r.is_success:
+                    return {"error": r.text[:200]}
+                if secrets:
+                    for k, v in secrets.items():
+                        await c.post(
+                            f"https://huggingface.co/api/spaces/{rid}/secrets",
+                            headers={"Authorization": f"Bearer {self._token}", "Content-Type": "application/json"},
+                            json={"key": k, "value": v},
+                        )
+            await bus.pub("notification", {"message": f"Space ready: {rid}"})
+            return {"space": rid, "url": f"https://huggingface.co/spaces/{rid}"}
+        except Exception as e:
+            return {"error": str(e)}
+
+    async def delete(self, name: str) -> dict[str, Any]:
+        if not self._ok:
+            return {"error": "no hf token"}
+        try:
+            import httpx
+            rid = f"{self._user}/{name}" if "/" not in name else name
+            async with httpx.AsyncClient() as c:
+                await c.delete(
+                    f"https://huggingface.co/api/repos/{rid}",
+                    headers={"Authorization": f"Bearer {self._token}"},
+                )
+            return {"ok": True}
+        except Exception as e:
+            return {"error": str(e)}
+
+    async def status(self) -> dict[str, Any]:
+        return {"ok": self._ok, "user": self._user or ""}
+
+
+hf = HF()
+
+
+# ── FastAPI ───────────────────────────────────────────────────
+
+app = FastAPI(title="OpenCode")
+
+
+@app.on_event("startup")
+async def boot() -> None:
+    await hf.setup()
+
+
+class ChatIn(BaseModel):
+    message: str
+
+class CreateIn(BaseModel):
+    goal: str
+    name: str | None = None
+
+class SettingsIn(BaseModel):
+    provider: str = ""
+    api_key: str = ""
+    model: str = ""
+
+class SpaceIn(BaseModel):
+    name: str
+    secrets: dict[str, str] | None = None
+
+
+@app.get("/")
+async def root():
+    return HTMLResponse(open("static/index.html").read())
+
+
+@app.get("/api/events")
+async def events():
+    return StreamingResponse(bus.stream(), media_type="text/event-stream")
+
+
+@app.post("/api/chat")
+async def chat(body: ChatIn):
+    m = body.message.lower()
+
+    if m.startswith("create ") or m.startswith("build "):
+        goal = m[7:] if m.startswith("create ") else m[6:]
+        e = await store.add(goal)
+        return {"type": "created", "id": e.id, "goal": goal}
+
+    if m.startswith("delete "):
+        eid = m[7:].strip()
+        await store.drop(eid)
+        return {"type": "info", "message": f"Removed {eid}"}
+
+    return {"type": "info", "message": "Try: create <goal> or build <goal>"}
+
+
+@app.get("/api/projects")
+async def list_all():
+    return [
+        {"id": e.id, "name": e.name, "goal": e.goal, "status": e.state.value,
+         "created": e.created, "error": e.error, "space_url": e.space_url}
+        for e in store.all()
+    ]
+
+
+@app.post("/api/projects")
+async def new_project(body: CreateIn):
+    e = await store.add(body.goal, body.name)
+    sp = None
+    if hf.ready:
+        try:
+            sp = await hf.create(
+                body.name or f"oc-{e.id}",
+                {"HF_TOKEN": os.environ.get("HF_TOKEN", ""), "PROJECT": e.id},
+            )
+            if "error" not in sp:
+                e.space_id = sp["space"]
+                e.space_url = sp["url"]
+        except Exception:
+            pass
+    return {"id": e.id, "goal": e.goal, "space": sp}
+
+
+@app.delete("/api/projects/{eid}")
+async def delete_entry(eid: str):
+    e = store.get(eid)
+    if not e:
+        raise HTTPException(404)
+    if e.space_id and hf.ready:
+        await hf.delete(e.space_id)
+    await store.drop(eid)
+    return {"ok": True}
+
+
+@app.get("/api/hf/status")
+async def hf_stat():
+    return await hf.status()
+
+
+@app.post("/api/hf/create")
+async def hf_mk(body: SpaceIn):
+    r = await hf.create(body.name, body.secrets)
+    if "error" in r:
+        raise HTTPException(400, r["error"])
+    return r
+
+
+@app.delete("/api/hf/space/{name}")
+async def hf_rm(name: str):
+    r = await hf.delete(name)
+    if "error" in r:
+        raise HTTPException(400, r["error"])
+    return r
+
+
+@app.post("/api/settings")
+async def set_cfg(body: SettingsIn):
+    if body.api_key:
+        os.environ["OC_KEY"] = body.api_key
+    if body.provider:
+        os.environ["OC_PROVIDER"] = body.provider
+    if body.model:
+        os.environ["OC_MODEL"] = body.model
+    return {"ok": True}
+
+
+@app.get("/api/settings")
+async def get_cfg():
+    return {
+        "provider": os.environ.get("OC_PROVIDER", "openrouter"),
+        "model": os.environ.get("OC_MODEL", "gpt-4o"),
+        "token_set": bool(os.environ.get("HF_TOKEN")),
+    }

static/index.html

@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OpenCode</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:system-ui,-apple-system,sans-serif;background:#0b1120;color:#e2e8f0;height:100vh;display:flex;overflow:hidden}
+
+/* ── Sticky Left Bar ── */
+.sbar{width:42px;min-width:42px;background:#080e1a;border-right:1px solid #1e293b;display:flex;flex-direction:column;align-items:center;padding:6px 0;z-index:20}
+.sbar .spc{flex:1}
+.sbar button{width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#475569;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;margin:2px 0}
+.sbar button:hover{background:#1e293b;color:#e2e8f0}
+
+/* ── Main ── */
+.main{flex:1;display:flex;overflow:hidden}
+
+/* ── Dashboard ── */
+#dash{display:flex;width:100%;height:100%}
+.dl{width:280px;min-width:280px;border-right:1px solid #1e293b;display:flex;flex-direction:column;background:#0b1120}
+.dlh{padding:14px 16px;border-bottom:1px solid #1e293b;display:flex;justify-content:space-between;align-items:center}
+.dlh h2{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.6px}
+.dlh button{padding:5px 12px;border:none;border-radius:5px;background:#6366f1;color:#fff;cursor:pointer;font-size:12px;font-weight:600}
+.dlh button:hover{background:#4f46e5}
+.pl{flex:1;overflow-y:auto;padding:8px}
+.pi{padding:9px 12px;border-radius:6px;cursor:pointer;margin-bottom:3px;position:relative}
+.pi:hover{background:#131d31}
+.pi.act{background:#131d31;border-left:2px solid #6366f1}
+.pi .nm{font-size:13px;font-weight:500}
+.pi .st{font-size:11px;margin-top:1px}
+.pi .st.s0{color:#64748b}
+.pi .st.s1{color:#fbbf24}
+.pi .st.s2{color:#60a5fa}
+.pi .st.s3{color:#22d3ee}
+.pi .st.s4{color:#34d399}
+.pi .st.s5{color:#f87171}
+.pi .del{position:absolute;top:6px;right:6px;background:none;border:none;color:#ef4444;cursor:pointer;font-size:13px;opacity:0;padding:2px 4px;border-radius:3px}
+.pi:hover .del{opacity:1}
+.pi .del:hover{background:rgba(239,68,68,.15)}
+
+.dr{flex:1;display:flex;align-items:center;justify-content:center}
+.hero{text-align:center}
+.hero .ic{width:80px;height:80px;margin:0 auto 20px;background:#131d31;border:2px solid #1e293b;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#6366f1}
+.hero h1{font-size:22px;font-weight:700;margin-bottom:6px}
+.hero p{color:#64748b;font-size:13px;margin-bottom:8px}
+.hero .ln{color:#6366f1;font-size:12px;font-family:monospace}
+
+/* ── Project View ── */
+#pview{display:none;width:100%;height:100%}
+.pvi{display:flex;width:100%;height:100%}
+.sp{width:260px;min-width:260px;border-right:1px solid #1e293b;display:flex;flex-direction:column;background:#0b1120;transition:margin-left .2s,width .2s,min-width .2s}
+.sp.c{ margin-left:-260px;width:0;min-width:0;border-right:none}
+.sph{padding:10px 14px;border-bottom:1px solid #1e293b;display:flex;justify-content:space-between;align-items:center}
+.sph h3{font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
+.sph button{background:none;border:none;color:#475569;cursor:pointer;font-size:15px;padding:2px 6px;border-radius:4px}
+.sph button:hover{color:#e2e8f0;background:#1e293b}
+.sl{flex:1;overflow-y:auto;padding:6px}
+.si{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:12px;color:#64748b;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.si:hover{background:#131d31;color:#e2e8f0}
+.si.act{background:#131d31;color:#e2e8f0;border-left:2px solid #6366f1}
+
+.ca{flex:1;display:flex;flex-direction:column;min-width:0}
+.ct{padding:8px 14px;border-bottom:1px solid #1e293b;display:flex;align-items:center;gap:6px;background:#0b1120}
+.ct button{background:none;border:none;color:#64748b;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:5px;display:flex;align-items:center;gap:4px}
+.ct button:hover{color:#e2e8f0;background:#131d31}
+.ct .ttl{font-size:12px;font-weight:600;color:#94a3b8;margin-left:2px}
+
+.cm{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
+.msg{max-width:78%;padding:9px 13px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap}
+.msg.u{align-self:flex-end;background:#6366f1;color:#fff;border-bottom-right-radius:3px}
+.msg.a{align-self:flex-start;background:#131d31;color:#e2e8f0;border-bottom-left-radius:3px}
+.msg.s{align-self:center;background:transparent;color:#475569;font-size:11px}
+
+.ci{padding:10px 14px;border-top:1px solid #1e293b;background:#0b1120}
+.cir{display:flex;gap:8px}
+.cir input{flex:1;padding:9px 13px;border:1px solid #1e293b;border-radius:7px;background:#0b1120;color:#e2e8f0;font-size:13px;outline:none}
+.cir input:focus{border-color:#6366f1}
+.cir button{padding:9px 18px;border:none;border-radius:7px;background:#6366f1;color:#fff;cursor:pointer;font-weight:600;font-size:12px}
+.cir button:hover{background:#4f46e5}
+
+/* ── Notification ── */
+#nbar{display:none;position:fixed;top:0;left:42px;right:0;background:#1e293b;border-bottom:1px solid #fbbf24;padding:7px 14px;z-index:100;font-size:12px;align-items:center;gap:8px}
+#nbar.s{display:flex}
+#nbar .nc{color:#fbbf24}
+#nbar .nx{margin-left:auto;background:none;border:none;color:#475569;cursor:pointer;font-size:15px;padding:2px 6px;border-radius:4px}
+#nbar .nx:hover{color:#e2e8f0;background:#334155}
+
+/* ── Overlays ── */
+.ov{display:none;position:fixed;top:0;left:42px;right:0;bottom:0;z-index:150}
+.ov.s{display:block}
+.ov .bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
+.ov .pnl{position:absolute;top:0;left:0;bottom:0;width:380px;background:#131d31;border-right:1px solid #1e293b;padding:18px;overflow-y:auto}
+.ov .pnl h2{font-size:14px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
+.ov .pnl h2 button{margin-left:auto;background:none;border:none;color:#475569;cursor:pointer;font-size:17px;padding:2px 6px;border-radius:4px}
+.sec{margin-bottom:16px}
+.sec h3{font-size:11px;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
+.sr{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #0b1120;font-size:12px}
+.sr .vl{color:#64748b;font-family:monospace;font-size:11px}
+.sr select,.sr input{padding:4px 8px;border:1px solid #1e293b;border-radius:4px;background:#0b1120;color:#e2e8f0;font-size:11px;outline:none}
+.sr select:focus,.sr input:focus{border-color:#6366f1}
+.hi{padding:8px 0;border-bottom:1px solid #0b1120}
+.hi h4{font-size:13px;margin-bottom:3px}
+.hi p{font-size:12px;color:#64748b;line-height:1.5}
+
+/* ── Modals ── */
+.mod{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;align-items:center;justify-content:center}
+.mod.s{display:flex}
+.mod .bx{background:#131d31;border:1px solid #1e293b;border-radius:10px;padding:20px;width:420px;max-height:75vh;overflow-y:auto}
+.mod .bx h2{font-size:15px;margin-bottom:14px}
+.fg{margin-bottom:10px}
+.fg label{display:block;font-size:11px;color:#64748b;margin-bottom:3px}
+.fg input,.fg textarea{width:100%;padding:7px 11px;border:1px solid #1e293b;border-radius:5px;background:#0b1120;color:#e2e8f0;font-size:12px;outline:none}
+.fg textarea{resize:vertical;min-height:50px;font-family:inherit}
+.fg input:focus,.fg textarea:focus{border-color:#6366f1}
+.ma{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
+.ma button{padding:7px 14px;border:none;border-radius:5px;cursor:pointer;font-weight:600;font-size:12px}
+.bp{background:#6366f1;color:#fff}
+.bp:hover{background:#4f46e5}
+.bs{background:#1e293b;color:#e2e8f0}
+.bs:hover{background:#334155}
+.bd{background:#ef4444;color:#fff}
+.bd:hover{background:#dc2626}
+
+::-webkit-scrollbar{width:5px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}
+</style>
+</head>
+<body>
+
+<div id="nbar"><span class="nc">&#9888;</span><span id="ntxt"></span><button class="nx" onclick="hiden()">&times;</button></div>
+
+<div class="sbar">
+  <div class="spc"></div>
+  <button onclick="tset()" title="Settings">&#9881;</button>
+  <button onclick="thelp()" title="Help">&#10067;</button>
+</div>
+
+<div class="main">
+
+<!-- Dashboard -->
+<div id="dash">
+  <div class="dl">
+    <div class="dlh"><h2>Projects</h2><button onclick="mcreate()">+ New</button></div>
+    <div class="pl" id="pl"></div>
+  </div>
+  <div class="dr">
+    <div class="hero">
+      <div class="ic">&#9670;</div>
+      <h1>OpenCode</h1>
+      <p>Create or open a project to start</p>
+      <div class="ln" id="hln">&#9654; Ready</div>
+    </div>
+  </div>
+</div>
+
+<!-- Project View -->
+<div id="pview">
+  <div class="pvi">
+    <div class="sp" id="sp">
+      <div class="sph"><h3>Sessions</h3><button onclick="nsess()">+</button></div>
+      <div class="sl" id="sl"></div>
+    </div>
+    <div class="ca">
+      <div class="ct">
+        <button onclick="bdash()">&#8592; Dashboard</button>
+        <button onclick="tsess()" title="Toggle Sessions">&#9776;</button>
+        <span class="ttl" id="cttl">Project</span>
+      </div>
+      <div class="cm" id="cm"></div>
+      <div class="ci">
+        <div class="cir">
+          <input id="ci" placeholder="Type a message..." onkeydown="if(event.key==='Enter')send()">
+          <button onclick="send()">Send</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+</div><!-- /main -->
+
+<!-- Settings -->
+<div class="ov" id="setov">
+  <div class="bg" onclick="tset()"></div>
+  <div class="pnl">
+    <h2>Settings <button onclick="tset()">&times;</button></h2>
+    <div class="sec">
+      <h3>Provider</h3>
+      <div class="sr"><span>Provider</span><select id="sprov" onchange="sv()"><option value="openrouter">OpenRouter</option><option value="nvidia">NVIDIA</option><option value="gemini">Gemini</option><option value="custom">Custom</option></select></div>
+      <div class="sr"><span>API Key</span><input type="password" id="sapi" placeholder="sk-..." style="width:170px" onchange="sv()"></div>
+      <div class="sr"><span>Model</span><select id="smod" onchange="sv()"><option value="gpt-4o">GPT-4o</option><option value="gpt-4o-mini">GPT-4o Mini</option><option value="claude-3.5-sonnet">Claude 3.5 Sonnet</option><option value="gemini-2.0-flash">Gemini 2.0 Flash</option></select></div>
+    </div>
+    <div class="sec">
+      <h3>Hugging Face</h3>
+      <div class="sr"><span>Token</span><span class="vl" id="hftok">-</span></div>
+      <div class="sr"><span>User</span><span class="vl" id="hfus">-</span></div>
+    </div>
+  </div>
+</div>
+
+<!-- Help -->
+<div class="ov" id="hlpov">
+  <div class="bg" onclick="thelp()"></div>
+  <div class="pnl">
+    <h2>Help <button onclick="thelp()">&times;</button></h2>
+    <div class="hi"><h4>Getting Started</h4><p>Click "+ New" to create a project. Select it to open the chat. Type messages or commands to interact.</p></div>
+    <div class="hi"><h4>Commands</h4><p><b>create &lt;goal&gt;</b> or <b>build &lt;goal&gt;</b> - create a project from chat<br><b>delete &lt;id&gt;</b> - remove a project</p></div>
+    <div class="hi"><h4>Spaces</h4><p>Each project can have a Hugging Face Space. Set HF_TOKEN in Space secrets to enable this.</p></div>
+    <div class="hi"><h4>Settings</h4><p>Configure provider, API key, and model in the Settings panel. These apply across all projects.</p></div>
+  </div>
+</div>
+
+<!-- Create Modal -->
+<div class="mod" id="cmod">
+  <div class="bx">
+    <h2>New Project</h2>
+    <div class="fg"><label>Goal</label><textarea id="cg" rows="2" placeholder="What do you want to build?"></textarea></div>
+    <div class="fg"><label>Name (optional)</label><input id="cn" placeholder="my-project"></div>
+    <div class="ma"><button class="bs" onclick="mcreatec()">Cancel</button><button class="bp" onclick="mk()">Create</button></div>
+  </div>
+</div>
+
+<!-- Delete Modal -->
+<div class="mod" id="dmod">
+  <div class="bx">
+    <h2>Delete Project</h2>
+    <p style="font-size:13px;color:#64748b;margin-bottom:14px">This will also delete the associated HF Space.</p>
+    <div class="ma"><button class="bs" onclick="deldc()">Cancel</button><button class="bd" id="deldb" onclick="deld()">Delete</button></div>
+  </div>
+</div>
+
+<script>
+// ── State ──
+let cur = null
+let cses = null
+let sess = []
+let msgs = []
+let sc = false
+let items = []
+let dtar = null
+
+// ── SSE ──
+new EventSource('/api/events').onmessage = e => {
+  try {
+    const d = JSON.parse(e.data)
+    if (['notification','project.created','project.error','project.done'].includes(d.cat)) {
+      notif(d.payload?.message || d.cat)
+    }
+  } catch(_) {}
+}
+
+// ── Notifications ──
+function notif(t) {
+  document.getElementById('ntxt').textContent = t
+  document.getElementById('nbar').classList.add('s')
+}
+function hiden() { document.getElementById('nbar').classList.remove('s') }
+
+// ── Views ──
+function dash() {
+  document.getElementById('dash').style.display = 'flex'
+  document.getElementById('pview').style.display = 'none'
+  cur = null
+  load()
+}
+
+function pview(id) {
+  cur = id
+  document.getElementById('dash').style.display = 'none'
+  document.getElementById('pview').style.display = 'flex'
+  const e = items.find(x => x.id === id)
+  document.getElementById('cttl').textContent = e ? e.goal : 'Project'
+  sess = [{id:'d',name:'Session 1'}]
+  cses = 'd'
+  msgs = []
+  rsess()
+  rmsgs()
+  addm('Agent ready. Type a message.', 's')
+}
+function bdash() { dash() }
+
+// ── Projects ──
+async function load() {
+  try {
+    const r = await fetch('/api/projects')
+    items = await r.json()
+    rlist()
+  } catch(_) {}
+}
+
+function rlist() {
+  const el = document.getElementById('pl')
+  if (!items.length) {
+    el.innerHTML = '<div style="color:#475569;font-size:12px;padding:16px;text-align:center">No projects yet.</div>'
+    return
+  }
+  const st = {created:'s0',planning:'s1',building:'s2',running:'s3',done:'s4',failed:'s5'}
+  el.innerHTML = items.map(e => `
+    <div class="pi ${e.id===cur?'act':''}" onclick="openp('${e.id}')">
+      <div class="nm">${esc(e.goal)}</div>
+      <div class="st ${st[e.status]||'s0'}">${e.status}${e.space_url?' \u2197':''}</div>
+      <button class="del" onclick="event.stopPropagation();deldm('${e.id}')">&#128465;</button>
+    </div>
+  `).join('')
+  const h = document.getElementById('hln')
+  if (items.length) h.textContent = items.length + ' project' + (items.length>1?'s':'') + ' \u2022 Ready'
+  else h.textContent = '\u25b6 Ready'
+}
+
+function openp(id) { pview(id) }
+
+function mcreate() { document.getElementById('cmod').classList.add('s'); document.getElementById('cg').value=''; document.getElementById('cn').value='' }
+function mcreatec() { document.getElementById('cmod').classList.remove('s') }
+
+async function mk() {
+  const g = document.getElementById('cg').value.trim()
+  const n = document.getElementById('cn').value.trim()
+  if (!g) return
+  mcreatec()
+  try {
+    await fetch('/api/projects',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({goal:g,name:n||undefined})})
+    notif('Created: ' + g)
+    load()
+  } catch(_) {}
+}
+
+function deldm(id) { dtar=id; document.getElementById('dmod').classList.add('s') }
+function deldc() { document.getElementById('dmod').classList.remove('s'); dtar=null }
+async function deld() {
+  if (!dtar) return
+  deldc()
+  try {
+    await fetch('/api/projects/'+dtar,{method:'DELETE'})
+    if (cur===dtar) dash()
+    load()
+  } catch(_) {}
+}
+
+// ── Sessions ──
+function rsess() {
+  document.getElementById('sl').innerHTML = sess.map(s =>
+    `<div class="si ${s.id===cses?'act':''}" onclick="ssel('${s.id}')">${esc(s.name)}</div>`
+  ).join('')
+}
+
+function ssel(id) {
+  cses = id
+  rsess()
+  msgs = []
+  rmsgs()
+  addm('Switched session.', 's')
+}
+
+function nsess() {
+  const id = 's'+Date.now().toString(36)
+  sess.push({id,name:'Session '+sess.length})
+  cses = id
+  rsess()
+  msgs = []
+  rmsgs()
+  addm('New session.', 's')
+}
+
+function tsess() {
+  sc = !sc
+  document.getElementById('sp').classList.toggle('c',sc)
+}
+
+// ── Chat ──
+function addm(t, ty='a') { msgs.push({t,ty}); rmsgs() }
+function rmsgs() {
+  const el = document.getElementById('cm')
+  el.innerHTML = msgs.map(m => `<div class="msg ${m.ty==='u'?'u':m.ty==='s'?'s':'a'}">${esc(m.t)}</div>`).join('')
+  el.scrollTop = el.scrollHeight
+}
+
+async function send() {
+  const inp = document.getElementById('ci')
+  const m = inp.value.trim()
+  if (!m) return
+  inp.value = ''
+  addm(m, 'u')
+  try {
+    const r = await fetch('/api/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:m})})
+    const d = await r.json()
+    if (d.type==='created') {
+      addm('Project created: ' + d.goal, 's')
+      load()
+    } else {
+      addm(d.message || JSON.stringify(d), 'a')
+    }
+  } catch(e) { addm('Error: '+e.message, 'a') }
+}
+
+// ── Settings ──
+function tset() {
+  const o = document.getElementById('setov')
+  o.classList.toggle('s')
+  if (o.classList.contains('s')) refreshSettings()
+}
+async function refreshSettings() {
+  try {
+    const r = await fetch('/api/settings')
+    const d = await r.json()
+    document.getElementById('hftok').textContent = d.token_set ? 'Set' : 'Not set'
+    const s = await fetch('/api/hf/status').then(r=>r.json()).catch(()=>({}))
+    document.getElementById('hfus').textContent = s.user || '-'
+  } catch(_) {}
+}
+function sv() {
+  fetch('/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
+    provider:document.getElementById('sprov').value,
+    api_key:document.getElementById('sapi').value,
+    model:document.getElementById('smod').value
+  })})
+}
+
+// ── Help ──
+function thelp() { document.getElementById('hlpov').classList.toggle('s') }
+
+// ── Util ──
+function esc(s) { const d=document.createElement('div'); d.textContent=s; return d.innerHTML }
+
+// ── Init ──
+dash()
+</script>
+</body>
+</html>