revert: remove custom frontend SPA, restore opencode's native web UI

DELIVERABLES.md

@@ -1,41 +0,0 @@
-# OpenCode-Serve — Final Working State
-
-## Architecture
-```
-HF Load Balancer (HTTP/2)
-    ↓
-uvicorn gateway :7860 (HF-exposed)
-    ├─ /terminal/*  → ttyd :7681 (embedded bash)
-    ├─ /            → redirect HTML (auto-load latest session)
-    ├─ /server/<base> (bare) → redirect HTML
-    └─ /*           → opencode serve :4096 (chat API + SPA)
-```
-
-## Key Files
-- `Dockerfile` — debian:bookworm-slim + python3 + opencode + ttyd + uvicorn/httpx
-- `entrypoint.sh` — starts ttyd, opencode serve, uvicorn gateway
-- `backend/app/main.py` — FastAPI gateway with proxy + redirect logic
-- `cleaner.py` — SQLite self-healing daemon (from opencode-cli)
-
-## Routes Verified
-| Route | Behavior | Status |
-|-------|----------|--------|
-| `GET /` | Redirect HTML → auto-load latest session | ✅ |
-| `GET /server/<base>` | Redirect HTML → auto-load latest session | ✅ |
-| `GET /server/<base>/session/<id>` | Chat UI (opencode SPA) | ✅ |
-| `GET /api/session` | Proxy → opencode (50 sessions) | ✅ |
-| `GET /global/health` | Proxy → opencode | ✅ |
-| `GET /terminal/` | Proxy → ttyd (embedded bash) | ✅ |
-| `GET /_healthz` | Gateway health check | ✅ |
-
-## URLs
-- **Space**: https://jishnupg-opencode-serve.hf.space
-- **Chat**: `https://jishnupg-opencode-serve.hf.space/server/<base64(SPACE_URL)>/session/<session_id>`
-- **Terminal**: https://jishnupg-opencode-serve.hf.space/terminal/
-- **API**: https://jishnupg-opencode-serve.hf.space/api/session
-
-## Key Learnings
-1. **Previous proxy failures (HTTP/2 INTERNAL_ERROR)**: Caused by using `StreamingResponse` for ALL responses. Fixed by buffering normal responses and only streaming SSE/chunked.
-2. **ttyd `--base-path`**: Doesn't work as expected. Fixed by stripping `/terminal` prefix in proxy.
-3. **`PYTHONPATH=/app`**: Required because entrypoint `cd`s to `/projects/default`.
-4. **HF only exposes one port (7860)**: Must proxy everything through a single gateway.

Dockerfile

@@ -33,7 +33,6 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 RUN mkdir -p /projects/default
 
 COPY backend/ /app/backend/
-COPY frontend/ /app/frontend/
 COPY cleaner.py /cleaner.py
 COPY entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh

backend/app/main.py

@@ -1,59 +1,80 @@
-"""OpenCode-Serve gateway.
+"""Terminal-on-top-of-opencode gateway.
 
 Routes:
-  /assets/*     -> frontend static files
-  /terminal/*   -> ttyd on :7681 (internal)
-  /             -> frontend SPA index.html
-  /favicon-*.png, /apple-touch-*.png, /site.webmanifest -> frontend assets
-  /*            -> opencode serve on :4096 (passthrough)
+  /terminal/*  -> ttyd on :7681 (internal, terminal)
+  /            -> redirect HTML (auto-load latest session)
+  /server/<base> (bare, no session id) -> redirect HTML
+  /*           -> opencode serve on :4096 (passthrough)
 """
 from __future__ import annotations
 
 import asyncio
-import mimetypes
 import os
-from pathlib import Path
 from urllib.parse import urlencode
 
 import httpx
 from fastapi import FastAPI, Request, WebSocket
-from fastapi.responses import HTMLResponse, JSONResponse, Response, StreamingResponse
+from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse, Response
 
-OC_HOST = "127.0.0.1"
-OC_PORT = int(os.environ.get("OPENCODE_PORT", "4096"))
+OC_HOST  = "127.0.0.1"
+OC_PORT  = int(os.environ.get("OPENCODE_PORT", "4096"))
 TTYD_PORT = int(os.environ.get("TTYD_PORT", "7681"))
 
-FRONTEND_DIR = Path("/app/frontend")
-
 app = FastAPI(docs_url=None, redoc_url=None, openapi_url=None)
 
 
-def _read_frontend(name: str) -> bytes | None:
-    p = FRONTEND_DIR / name
-    if p.exists() and p.is_file():
-        return p.read_bytes()
-    return None
-
-
-_INDEX_HTML = _read_frontend("index.html") or b"<h1>frontend not found</h1>"
+_REDIRECT_HTML = r"""<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>OpenCode</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#0d1117;color:#c9d1d9;font-family:'JetBrains Mono',Menlo,monospace;
+     display:flex;align-items:center;justify-content:center;height:100vh}
+.box{background:#161b22;padding:28px 36px;border:1px solid #30363d;border-radius:8px;
+     max-width:560px;text-align:center}
+h2{color:#58a6ff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
+pre{color:#c9d1d9;font-size:12px;line-height:1.6;text-align:left;
+    white-space:pre-wrap;word-break:break-all;background:transparent;margin:0}
+a{color:#22c55e;text-decoration:none}a:hover{text-decoration:underline}
+</style>
+</head>
+<body>
+<div class="box">
+  <h2>OpenCode</h2>
+  <pre id="s">loading&hellip;</pre>
+</div>
+<script>
+(async function(){
+var s=document.getElementById("s"),h=location.protocol+"//"+location.host;
+try{
+  var r=await fetch("/api/session");
+  if(!r.ok)throw new Error(r.status+" "+r.statusText);
+  var d=await r.json(),arr=(d&&d.data)||[];
+  if(!arr.length){s.innerHTML='no sessions yet &mdash; <a href="/server/">open dashboard</a>';return}
+  var sid=arr[0].id,dest="/server/"+btoa(h)+"/session/"+encodeURIComponent(sid);
+  s.innerHTML='<a href="'+dest+'">opening session&hellip;</a>';
+  location.replace(dest);
+}catch(e){s.innerHTML="error: "+e.message+"<br>try <a href='/server/'>/server/</a>"}
+})();
+</script>
+</body>
+</html>"""
 
 
 def _is_terminal(path: str) -> bool:
     return path == "/terminal" or path.startswith("/terminal/")
 
 
-def _is_frontend_asset(path: str) -> bool:
-    if path.startswith("assets/"):
-        return True
-    if path in ("favicon-96x96-v3.png", "favicon-v3.svg", "favicon-v3.ico",
-                "apple-touch-icon-v3.png", "site.webmanifest", "social-share.png"):
-        return True
-    return False
-
-
 def _needs_redirect(path: str) -> bool:
     if not path or path in ("/", ""):
         return True
+    if path.startswith("/server"):
+        parts = [p for p in path.split("/") if p]
+        # /server, /server/, /server/<base>  -- no session id present
+        if len(parts) < 4:
+            return True
     return False
 
 
@@ -70,42 +91,43 @@ async def _forward(request: Request, port: int, path: str):
         headers[k] = v
 
     body = await request.body()
+    timeout = httpx.Timeout(600.0, connect=10.0)
 
-    client = httpx.AsyncClient(timeout=httpx.Timeout(600.0, connect=10.0), follow_redirects=False)
-    try:
-        up = await client.send(
-            client.build_request(method=request.method, url=url, headers=headers, content=body if body else None),
-            stream=True,
-        )
-    except (httpx.ConnectError, httpx.ConnectTimeout, httpx.HTTPError) as exc:
-        await client.aclose()
-        return Response(status_code=502, content=f"upstream {port} unreachable: {exc}".encode())
-
-    resp_headers = {}
-    for k, v in up.headers.items():
-        kl = k.lower()
-        if kl in ("content-length", "content-encoding", "transfer-encoding", "connection"):
-            continue
-        resp_headers[k] = v
-
-    ct = up.headers.get("content-type", "application/octet-stream")
-
-    async def relay():
+    async with httpx.AsyncClient(timeout=timeout, follow_redirects=False) as client:
         try:
-            async for chunk in up.aiter_bytes():
-                if chunk:
-                    yield chunk
-        finally:
-            try:
-                await up.aclose()
-            except Exception:
-                pass
-            try:
-                await client.aclose()
-            except Exception:
-                pass
-
-    return StreamingResponse(relay(), status_code=up.status_code, headers=resp_headers, media_type=ct)
+            up = await client.request(
+                method=request.method,
+                url=url,
+                headers=headers,
+                content=body if body else None,
+            )
+        except (httpx.ConnectError, httpx.ConnectTimeout, httpx.HTTPError) as exc:
+            return Response(status_code=502, content=f"upstream {port} unreachable: {exc}".encode())
+
+        # Build response headers
+        resp_headers = {}
+        for k, v in up.headers.items():
+            kl = k.lower()
+            if kl in ("content-length", "content-encoding", "transfer-encoding", "connection"):
+                continue
+            resp_headers[k] = v
+
+        ct = up.headers.get("content-type", "application/octet-stream")
+
+        # For SSE / streaming: relay raw bytes
+        if "text/event-stream" in ct or "chunked" in up.headers.get("transfer-encoding", ""):
+            async def relay():
+                try:
+                    async for chunk in up.aiter_bytes():
+                        yield chunk
+                finally:
+                    await up.aclose()
+            return StreamingResponse(relay(), status_code=up.status_code, headers=resp_headers, media_type=ct)
+
+        # Buffer entire response (most responses are small JSON or HTML)
+        content = up.content
+        await up.aclose()
+        return Response(status_code=up.status_code, content=content, headers=resp_headers, media_type=ct)
 
 
 @app.get("/_healthz", include_in_schema=False)
@@ -115,34 +137,19 @@ async def healthz():
 
 @app.api_route(
     "/{path:path}",
-    methods=["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"],
+    methods=["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"],
     include_in_schema=False,
 )
 async def main_route(request: Request, path: str):
     full = "/" + path
-
-    # Terminal proxy
     if _is_terminal(full):
-        fwd_path = path[len("terminal"):]
+        # Strip /terminal prefix when forwarding to ttyd
+        fwd_path = path[len("terminal"):]  # "terminal/foo" -> "/foo"
         if not fwd_path or fwd_path[0] != "/":
             fwd_path = "/" + fwd_path
         return await _forward(request, TTYD_PORT, fwd_path)
-
-    # Frontend assets
-    if _is_frontend_asset(path):
-        name = path.split("/", 1)[-1] if "/" in path else path
-        data = _read_frontend(name)
-        if data is not None:
-            ct, _ = mimetypes.guess_type(name)
-            return Response(content=data, media_type=ct or "application/octet-stream")
-
-    # Frontend SPA: serve index.html for / or /server/ paths
-    if _needs_redirect(full) or (path.startswith("server") and not any(
-        seg in path.split("/") for seg in ("session", "message", "event", "prompt")
-    )):
-        return Response(content=_INDEX_HTML, media_type="text/html")
-
-    # Everything else -> opencode upstream
+    if _needs_redirect(full):
+        return HTMLResponse(content=_REDIRECT_HTML, status_code=200)
     return await _forward(request, OC_PORT, path)
 
 
@@ -150,16 +157,13 @@ async def main_route(request: Request, path: str):
 async def ws_route(websocket: WebSocket, path: str):
     full = "/" + path
     target_port = TTYD_PORT if _is_terminal(full) else OC_PORT
-    target_url = f"ws://{OC_HOST}:{target_port}/{path}"
+    target_url  = f"ws://{OC_HOST}:{target_port}/{path}"
     if websocket.query_params:
         target_url += "?" + urlencode(websocket.query_params)
-
     import websockets as ws_lib
-
     await websocket.accept()
     try:
-        async with ws_lib.connect(target_url, max_size=32 * 1024 * 1024) as upstream:
-
+        async with ws_lib.connect(target_url, max_size=32*1024*1024) as upstream:
             async def c2s():
                 try:
                     while True:
@@ -172,7 +176,6 @@ async def ws_route(websocket: WebSocket, path: str):
                             await upstream.send(msg["bytes"])
                 except Exception:
                     return
-
             async def s2c():
                 try:
                     async for raw in upstream:
@@ -182,7 +185,6 @@ async def ws_route(websocket: WebSocket, path: str):
                             await websocket.send_bytes(raw)
                 except Exception:
                     return
-
             await asyncio.gather(c2s(), s2c())
     except Exception:
         try:

frontend/chat.js

@@ -1,20 +0,0 @@
-// OpenCode-Serve SPA
-// Provides a ChatGPT-style sidebar with full session management backed by
-// opencode's existing /api/session and /api/session/{id}/message APIs.
-//
-// Architecture:
-//   - Vanilla ES modules, no build step
-//   - Single-page app that consumes opencode's HTTP API verbatim
-//   - localStorage holds UI state only: pinnedIds, archivedIds, drawerCollapsed,
-//     lastSessionId, draftMessage. Authoritative session data always comes from
-//     /api/session so that nothing is duplicated.
-//   - SSE on /api/event streams real-time updates for sessions and messages.
-//   - Title auto-generation is sent through opencode's existing session APIs.
-//
-// All UI state is intentionally local; opencode remains the source of truth
-// for session lifecycle.
-
-import { mount } from "./components.js";
-import { openOverlay } from "./ui.js";
-
-mount();

frontend/components.js

@@ -1,587 +0,0 @@
-/* components.js — sidebar + chat shell. Everything lives here. */
-
-import {
-  listSessions, getSession, createSession, deleteSessions, renameSession,
-  getMessages, sendMessage, sessionStatus, abortSession,
-  listProviders, listAgents, openEventStream, partText,
-} from "./http.js";
-import {
-  h, clear, debounce, formatTimeAgo, groupByDate, setOverlay, openOverlay,
-  promptInput, confirmAction, snackbar,
-} from "./ui.js";
-import {
-  getPinnedIds, getArchivedIds, getLastSessionId, setLastSessionId,
-  getDrawerCollapsed, setDrawerCollapsed,
-  getSelectedModel, setSelectedModel, getSelectedAgent, setSelectedAgent,
-  getDraft, setDraft, togglePin, toggleArchive,
-  refreshSessions, getFilteredSessions, subscribe,
-  upsertSessionFromEvent, updateSessionFromEvent,
-} from "./store.js";
-
-// ─── state ───
-let _currentSessionId = null;
-let _abortCtrl = null;
-let _sidebarOpen = window.innerWidth > 860;
-let _search = "";
-let _showArchived = false;
-let _sending = false;
-let _agents = [];
-let _providers = [];
-let _currentAgent = null;
-let _currentModel = null;
-let _sse = null;
-
-// ─── root DOM references (created in mount) ───
-let _root;
-let _sidebar;
-let _chat;
-let _msgContainer;
-let _inputBox;
-let _titleEl;
-
-// ─── sidebar ───
-function renderSidebar() {
-  clear(_sidebar);
-  const collapsed = getDrawerCollapsed();
-  _sidebar.style.width = collapsed ? "0px" : "";
-  _sidebar.style.minWidth = collapsed ? "0px" : "";
-  _sidebar.style.overflow = collapsed ? "hidden" : "";
-  _sidebar.style.padding = collapsed ? "0" : "";
-
-  if (collapsed) {
-    const btn = h("button", { title: "Open sidebar", style: { padding: "10px", fontSize: "18px", color: "var(--fg-2)" }, text: "\u2630" });
-    btn.addEventListener("click", () => { setDrawerCollapsed(false); renderSidebar(); });
-    _sidebar.appendChild(btn);
-    return;
-  }
-
-  // Header
-  const header = h("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 12px", borderBottom: "1px solid var(--border)" } });
-  const collapseBtn = h("button", { title: "Collapse sidebar", style: { padding: "6px 10px", color: "var(--fg-3)", fontSize: "14px" }, text: "\u25c0" });
-  collapseBtn.addEventListener("click", () => { setDrawerCollapsed(true); renderSidebar(); });
-  const newBtn = h("button", { style: { padding: "6px 14px", background: "var(--accent)", color: "#0a0a0a", borderRadius: "6px", fontWeight: "600", fontSize: "13px" }, text: "New Chat" });
-  newBtn.addEventListener("click", newChat);
-  header.append(collapseBtn, h("div", { style: { flex: "1" } }), newBtn);
-  _sidebar.appendChild(header);
-
-  // Search
-  const searchWrap = h("div", { style: { padding: "10px 12px 6px" } });
-  const searchInput = h("input", {
-    placeholder: "Search chats...",
-    value: _search,
-    style: { width: "100%", padding: "8px 10px", background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: "6px", fontSize: "13px" },
-  });
-  searchInput.addEventListener("input", (e) => { _search = e.target.value; renderSessionList(); });
-  searchWrap.appendChild(searchInput);
-  _sidebar.appendChild(searchWrap);
-
-  // Toggle archived
-  const toggleRow = h("div", { style: { padding: "4px 12px", display: "flex", gap: "8px" } });
-  const archiveBtn = h("button", {
-    style: { padding: "4px 10px", fontSize: "12px", borderRadius: "4px", color: _showArchived ? "var(--accent)" : "var(--fg-3)", border: _showArchived ? "1px solid var(--accent)" : "1px solid var(--border)" },
-    text: "Archived",
-  });
-  archiveBtn.addEventListener("click", () => { _showArchived = !_showArchived; renderSidebar(); });
-  toggleRow.appendChild(archiveBtn);
-  _sidebar.appendChild(toggleRow);
-
-  // Session list
-  const listWrap = h("div", { style: { flex: "1", overflow: "auto", padding: "0 6px" } });
-  _sidebar.appendChild(listWrap);
-
-  // Re-render just the list part
-  _renderSessionListInto(listWrap);
-}
-
-function renderSessionList() {
-  // Find the list container and re-render
-  if (!_sidebar) return;
-  const listWrap = _sidebar.querySelector("div:last-child");
-  if (!listWrap) return;
-  _renderSessionListInto(listWrap);
-}
-
-function _renderSessionListInto(container) {
-  clear(container);
-  const sessions = getFilteredSessions({ search: _search, showArchived: _showArchived });
-  if (!sessions.length) {
-    container.appendChild(h("div", { style: { padding: "24px 12px", textAlign: "center", color: "var(--fg-3)", fontSize: "13px" }, text: _search ? "No matches" : "No chats yet" }));
-    return;
-  }
-
-  const groups = groupByDate(sessions);
-  for (const [label, items] of Object.entries(groups)) {
-    if (!items.length) continue;
-    const section = h("div", { style: { marginBottom: "8px" } });
-    const heading = h("div", { style: { padding: "8px 12px 4px", fontSize: "11px", fontWeight: "600", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.05em" }, text: label });
-    section.appendChild(heading);
-    for (const s of items) {
-      section.appendChild(renderSessionItem(s));
-    }
-    container.appendChild(section);
-  }
-}
-
-function renderSessionItem(s) {
-  const pinned = getPinnedIds().has(s.id);
-  const active = s.id === _currentSessionId;
-  const archived = getArchivedIds().has(s.id);
-  const preview = s.__preview || s.title || "New chat";
-  const modelLabel = (s.model && s.model.id) ? s.model.id.split("/").pop() : "";
-
-  const row = h("div", {
-    style: {
-      padding: "10px 12px",
-      borderRadius: "6px",
-      cursor: "pointer",
-      background: active ? "var(--bg-3)" : "transparent",
-      marginBottom: "2px",
-      position: "relative",
-    },
-    "data-sid": s.id,
-  });
-  row.addEventListener("click", () => openSession(s.id));
-
-  // Hover effects
-  row.addEventListener("mouseenter", () => { if (!active) row.style.background = "var(--bg-2)"; });
-  row.addEventListener("mouseleave", () => { if (!active) row.style.background = "transparent"; });
-
-  const titleRow = h("div", { style: { display: "flex", alignItems: "center", gap: "6px" } });
-  if (pinned) titleRow.appendChild(h("span", { style: { fontSize: "11px", color: "var(--accent)" }, text: "\u{1F4CC}" }));
-  titleRow.appendChild(h("span", {
-    style: { flex: "1", fontSize: "13px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: active ? "600" : "400" },
-    text: preview,
-  }));
-
-  // Actions menu button (on hover)
-  const actionsWrap = h("div", { style: { display: "flex", gap: "2px", opacity: "0", transition: "opacity .12s" } });
-  row.addEventListener("mouseenter", () => { actionsWrap.style.opacity = "1"; });
-  row.addEventListener("mouseleave", () => { actionsWrap.style.opacity = "0"; });
-
-  const pinBtn = h("button", { title: pinned ? "Unpin" : "Pin", style: { padding: "2px 5px", fontSize: "12px", color: "var(--fg-3)" }, text: pinned ? "\u{1F4CC}" : "\u{1F4CE}" });
-  pinBtn.addEventListener("click", (e) => { e.stopPropagation(); togglePin(s.id); renderSessionList(); });
-  const renameBtn = h("button", { title: "Rename", style: { padding: "2px 5px", fontSize: "12px", color: "var(--fg-3)" }, text: "\u270F\uFE0F" });
-  renameBtn.addEventListener("click", (e) => { e.stopPropagation(); renameSessionAction(s); });
-  const archiveBtn2 = h("button", { title: archived ? "Restore" : "Archive", style: { padding: "2px 5px", fontSize: "12px", color: "var(--fg-3)" }, text: archived ? "\u21A9\uFE0F" : "\u{1F4E6}" });
-  archiveBtn2.addEventListener("click", (e) => { e.stopPropagation(); toggleArchive(s.id); renderSessionList(); });
-  const deleteBtn = h("button", { title: "Delete", style: { padding: "2px 5px", fontSize: "12px", color: "var(--danger)" }, text: "\u{1F5D1}\uFE0F" });
-  deleteBtn.addEventListener("click", (e) => { e.stopPropagation(); deleteSessionAction(s); });
-  actionsWrap.append(pinBtn, renameBtn, archiveBtn2, deleteBtn);
-
-  titleRow.appendChild(actionsWrap);
-  row.appendChild(titleRow);
-
-  // Meta line
-  const meta = h("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "3px", fontSize: "11px", color: "var(--fg-3)" } });
-  meta.appendChild(h("span", { text: formatTimeAgo(s.time && s.time.updated) }));
-  if (modelLabel) meta.appendChild(h("span", { text: modelLabel, style: { padding: "1px 5px", background: "var(--bg-3)", borderRadius: "3px" } }));
-  row.appendChild(meta);
-
-  return row;
-}
-
-// ─── session actions ───
-async function newChat() {
-  try {
-    const s = await createSession();
-    const id = s && s.id;
-    if (id) {
-      await openSession(id);
-      renderSidebar();
-    }
-  } catch (e) {
-    snackbar("Failed to create chat", "error");
-  }
-}
-
-async function openSession(id) {
-  if (_abortCtrl) { _abortCtrl.abort(); _abortCtrl = null; }
-  _sending = false;
-  _currentSessionId = id;
-  setLastSessionId(id);
-  renderSidebar();
-  renderChat();
-  // Load messages
-  await loadMessages(id);
-}
-
-async function loadMessages(id) {
-  if (!_msgContainer) return;
-  clear(_msgContainer);
-  _msgContainer.appendChild(h("div", { class: "skeleton", style: { height: "60px", marginBottom: "8px" } }));
-  _msgContainer.appendChild(h("div", { class: "skeleton", style: { height: "40px", width: "70%", marginBottom: "8px" } }));
-
-  try {
-    const { messages } = await getMessages(id);
-    clear(_msgContainer);
-    if (!messages.length) {
-      _msgContainer.appendChild(h("div", {
-        style: { padding: "40px 20px", textAlign: "center", color: "var(--fg-3)" },
-        html: '<div style="font-size:36px;margin-bottom:12px">&#x1F4AC;</div><div style="font-size:14px">Send a message to start the conversation</div>',
-      }));
-      return;
-    }
-    for (const m of messages) {
-      renderMessage(m);
-    }
-    _msgContainer.scrollTop = _msgContainer.scrollHeight;
-  } catch (e) {
-    clear(_msgContainer);
-    _msgContainer.appendChild(h("div", { style: { padding: "40px", textAlign: "center", color: "var(--danger)" }, text: "Failed to load messages" }));
-  }
-}
-
-function renderMessage(m) {
-  const role = (m.role || "user").toLowerCase();
-  const isUser = role === "user";
-  const wrap = h("div", {
-    style: {
-      padding: "16px 20px",
-      borderBottom: "1px solid var(--border)",
-      background: isUser ? "transparent" : "var(--bg-1)",
-      maxWidth: "100%",
-    },
-  });
-  const label = h("div", {
-    style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px", fontSize: "12px", fontWeight: "600", color: isUser ? "var(--fg-2)" : "var(--accent)" },
-    text: isUser ? "You" : "Assistant",
-  });
-  wrap.appendChild(label);
-
-  const content = h("div", {
-    style: { fontSize: "14px", lineHeight: "1.7", whiteSpace: "pre-wrap", wordBreak: "break-word" },
-  });
-
-  // Render parts
-  if (m.parts && m.parts.length) {
-    for (const p of m.parts) {
-      if (p.type === "text") {
-        content.appendChild(h("div", { text: p.text || "" }));
-      } else if (p.type === "reasoning") {
-        // Collapsible reasoning
-        const details = h("details", { style: { marginBottom: "8px", color: "var(--fg-3)", fontSize: "12px" } });
-        details.appendChild(h("summary", { text: "Reasoning", style: { cursor: "pointer", marginBottom: "4px" } }));
-        details.appendChild(h("div", { text: p.text || "", style: { whiteSpace: "pre-wrap", padding: "8px", background: "var(--bg-2)", borderRadius: "4px" } }));
-        content.appendChild(details);
-      } else if (p.type === "tool-invocation") {
-        const toolWrap = h("div", { style: { margin: "8px 0", padding: "8px 12px", background: "var(--bg-2)", borderRadius: "6px", border: "1px solid var(--border)", fontSize: "12px" } });
-        toolWrap.appendChild(h("div", { style: { fontWeight: "600", marginBottom: "4px", color: "var(--fg-2)" }, text: p.toolInvocation && p.toolInvocation.toolName ? p.toolInvocation.toolName : "Tool" }));
-        if (p.toolInvocation && p.toolInvocation.state === "result") {
-          toolWrap.appendChild(h("div", { text: String((p.toolInvocation.result || "").slice(0, 500)), style: { color: "var(--fg-3)" } }));
-        }
-        content.appendChild(toolWrap);
-      }
-    }
-  } else if (m.content) {
-    // Fallback: plain content string
-    if (typeof m.content === "string") {
-      content.appendChild(h("div", { text: m.content }));
-    } else if (Array.isArray(m.content)) {
-      for (const part of m.content) {
-        if (typeof part === "string") content.appendChild(h("div", { text: part }));
-        else if (part && part.text) content.appendChild(h("div", { text: part.text }));
-      }
-    }
-  }
-  wrap.appendChild(content);
-  _msgContainer.appendChild(wrap);
-}
-
-// ─── chat view ───
-function renderChat() {
-  clear(_chat);
-  if (!_currentSessionId) {
-    _chat.appendChild(h("div", {
-      style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--fg-3)" },
-      html: '<div style="text-align:center"><div style="font-size:48px;margin-bottom:16px">&#x1F44B;</div><div style="font-size:16px;margin-bottom:8px">Welcome to OpenCode</div><div style="font-size:13px">Select a chat or start a new one</div></div>',
-    }));
-    return;
-  }
-
-  // Header
-  const hdr = h("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 16px", borderBottom: "1px solid var(--border)", background: "var(--bg-1)" } });
-  const menuBtn = h("button", { title: "Toggle sidebar", style: { padding: "6px 10px", color: "var(--fg-2)", fontSize: "16px" }, text: "\u2630" });
-  menuBtn.addEventListener("click", () => { _sidebarOpen = !_sidebarOpen; _sidebar.style.display = _sidebarOpen ? "" : "none"; });
-  _titleEl = h("span", { style: { flex: "1", fontSize: "14px", fontWeight: "600", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, text: "Loading..." });
-  const statusEl = h("span", { style: { fontSize: "11px", color: "var(--fg-3)" } });
-  const abortBtn = h("button", { title: "Stop generating", style: { padding: "4px 10px", borderRadius: "4px", background: "var(--danger)", color: "#fff", fontSize: "12px", display: "none" }, text: "Stop" });
-  abortBtn.addEventListener("click", () => { if (_abortCtrl) _abortCtrl.abort(); });
-  hdr.append(menuBtn, _titleEl, statusEl, abortBtn);
-  _chat.appendChild(hdr);
-
-  // Messages container
-  _msgContainer = h("div", { style: { flex: "1", overflow: "auto" } });
-  _chat.appendChild(_msgContainer);
-
-  // Input area
-  const inputArea = h("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--border)", background: "var(--bg-1)" } });
-
-  // Model/Agent selector row
-  const selectorRow = h("div", { style: { display: "flex", gap: "8px", marginBottom: "8px", alignItems: "center" } });
-  const agentSelect = h("select", { style: { padding: "4px 8px", background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: "4px", fontSize: "12px", color: "var(--fg-2)" } });
-  agentSelect.appendChild(h("option", { value: "", text: "Agent: build" }));
-  for (const a of _agents) {
-    const opt = h("option", { value: a.id || a, text: a.id || a });
-    if ((getSelectedAgent() || "build") === (a.id || a)) opt.selected = true;
-    agentSelect.appendChild(opt);
-  }
-  agentSelect.addEventListener("change", () => setSelectedAgent(agentSelect.value));
-  selectorRow.appendChild(agentSelect);
-  inputArea.appendChild(selectorRow);
-
-  // Text input
-  const inputWrap = h("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" } });
-  _inputBox = h("textarea", {
-    placeholder: "Message...",
-    rows: "1",
-    style: { flex: "1", padding: "10px 14px", background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: "8px", fontSize: "14px", resize: "none", maxHeight: "180px", lineHeight: "1.5", minHeight: "42px" },
-  });
-
-  // Auto-resize textarea
-  _inputBox.addEventListener("input", () => {
-    _inputBox.style.height = "auto";
-    _inputBox.style.height = Math.min(_inputBox.scrollHeight, 180) + "px";
-  });
-
-  // Ctrl+Enter to send
-  _inputBox.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      submitMessage();
-    }
-  });
-
-  // Restore draft
-  if (_currentSessionId) {
-    const draft = getDraft(_currentSessionId);
-    if (draft) _inputBox.value = draft;
-  }
-
-  // Save draft on input
-  _inputBox.addEventListener("input", () => {
-    if (_currentSessionId) setDraft(_currentSessionId, _inputBox.value);
-  });
-
-  const sendBtn = h("button", { title: "Send (Enter)", style: { padding: "10px 16px", background: "var(--accent)", color: "#0a0a0a", borderRadius: "8px", fontWeight: "600", fontSize: "14px", height: "42px" }, text: "Send" });
-  sendBtn.addEventListener("click", submitMessage);
-
-  inputWrap.append(_inputBox, sendBtn);
-  inputArea.appendChild(inputWrap);
-  _chat.appendChild(inputArea);
-
-  // Load title from session data
-  loadSessionTitle();
-}
-
-async function loadSessionTitle() {
-  if (!_currentSessionId || !_titleEl) return;
-  try {
-    const s = await getSession(_currentSessionId);
-    if (s) {
-      _titleEl.textContent = s.title || "Untitled";
-      // Update sidebar to reflect new title
-      renderSessionList();
-    }
-  } catch {
-    _titleEl.textContent = "Chat";
-  }
-}
-
-async function submitMessage() {
-  if (!_inputBox || !_currentSessionId || _sending) return;
-  const text = _inputBox.value.trim();
-  if (!text) return;
-
-  _sending = true;
-  const agent = getSelectedAgent() || "build";
-  _inputBox.value = "";
-  setDraft(_currentSessionId, "");
-
-  // Append user message optimistically
-  renderMessage({ role: "user", parts: [{ type: "text", text }], content: text });
-  _msgContainer.scrollTop = _msgContainer.scrollHeight;
-
-  // Create assistant placeholder
-  const assistantEl = h("div", {
-    style: { padding: "16px 20px", borderBottom: "1px solid var(--border)", background: "var(--bg-1)" },
-  });
-  assistantEl.appendChild(h("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px", fontSize: "12px", fontWeight: "600", color: "var(--accent)" }, text: "Assistant" }));
-  const contentEl = h("div", { style: { fontSize: "14px", lineHeight: "1.7", whiteSpace: "pre-wrap", wordBreak: "break-word", color: "var(--fg-3)" }, text: "Thinking..." });
-  assistantEl.appendChild(contentEl);
-  _msgContainer.appendChild(assistantEl);
-  _msgContainer.scrollTop = _msgContainer.scrollHeight;
-
-  // Find abort button and show it
-  const abortBtn = _chat.querySelector("button[title='Stop generating']");
-  if (abortBtn) abortBtn.style.display = "";
-
-  _abortCtrl = new AbortController();
-
-  try {
-    const parts = [{ type: "text", text }];
-    const resp = await sendMessage(_currentSessionId, parts, { agent, signal: _abortCtrl.signal });
-    if (resp && resp.ok && resp.data) {
-      // Render full response from resp.data
-      clear(contentEl);
-      const data = resp.data;
-      if (data.parts && data.parts.length) {
-        for (const p of data.parts) {
-          if (p.type === "text") contentEl.appendChild(h("div", { text: p.text || "" }));
-          else if (p.type === "reasoning") {
-            const d = h("details", { style: { marginBottom: "8px", color: "var(--fg-3)", fontSize: "12px" } });
-            d.appendChild(h("summary", { text: "Reasoning", style: { cursor: "pointer", marginBottom: "4px" } }));
-            d.appendChild(h("div", { text: p.text || "", style: { whiteSpace: "pre-wrap", padding: "8px", background: "var(--bg-2)", borderRadius: "4px" } }));
-            contentEl.appendChild(d);
-          }
-        }
-      } else if (data.content) {
-        if (typeof data.content === "string") contentEl.textContent = data.content;
-        else contentEl.textContent = JSON.stringify(data.content);
-      }
-      contentEl.style.color = "";
-    } else if (resp && resp.data) {
-      // Error or unexpected format
-      clear(contentEl);
-      contentEl.textContent = typeof resp.data === "string" ? resp.data : JSON.stringify(resp.data);
-      contentEl.style.color = "var(--danger)";
-    }
-  } catch (e) {
-    if (e.name === "AbortError") {
-      clear(contentEl);
-      contentEl.textContent = "(stopped)";
-      contentEl.style.color = "var(--fg-3)";
-    } else {
-      clear(contentEl);
-      contentEl.textContent = "Error: " + (e.message || "Unknown error");
-      contentEl.style.color = "var(--danger)";
-    }
-  } finally {
-    _sending = false;
-    _abortCtrl = null;
-    if (abortBtn) abortBtn.style.display = "none";
-    _msgContainer.scrollTop = _msgContainer.scrollHeight;
-    // Refresh title in sidebar
-    renderSessionList();
-  }
-}
-
-// ─── session actions ───
-async function renameSessionAction(s) {
-  const title = await promptInput("Rename chat", "Enter new title", s.title || "");
-  if (title && title !== s.title) {
-    try {
-      await renameSession(s.id, title);
-      renderSessionList();
-      if (s.id === _currentSessionId && _titleEl) _titleEl.textContent = title;
-      snackbar("Renamed");
-    } catch (e) {
-      snackbar("Rename failed", "error");
-    }
-  }
-}
-
-async function deleteSessionAction(s) {
-  const ok = await confirmAction("Delete chat?", `Delete "${s.title || "Untitled"}"? This cannot be undone.`, { okText: "Delete", danger: true });
-  if (!ok) return;
-  try {
-    await deleteSessions([s.id]);
-    snackbar("Deleted");
-    if (_currentSessionId === s.id) {
-      _currentSessionId = null;
-      setLastSessionId(null);
-      renderChat();
-    }
-    renderSessionList();
-  } catch (e) {
-    snackbar("Delete failed", "error");
-  }
-}
-
-// ─── SSE ───
-function startSSE() {
-  if (_sse) _sse.close();
-  _sse = openEventStream((evt) => {
-    const t = evt && evt.type;
-    if (t === "session.updated" || t === "session.created") {
-      updateSessionFromEvent(evt);
-      // Reload title if it's current session
-      if (_currentSessionId && evt.data && ((evt.data.id || evt.aggregateID) === _currentSessionId)) {
-        loadSessionTitle();
-      }
-    } else if (t === "session.deleted") {
-      const id = evt.data && evt.data.id;
-      if (id) {
-        const sessions = getFilteredSessions();
-        // Just refresh
-        refreshSessions().then(() => renderSessionList());
-      }
-    } else if (t === "message.updated" || t === "message.part.updated") {
-      // Could stream partial messages, but for now we do full response
-    }
-  }, (err) => {
-    // SSE error — will auto-retry inside openEventStream
-  });
-}
-
-// ─── boot ───
-export async function mount() {
-  _root = document.getElementById("root");
-  clear(_root);
-
-  // Add overlay and snackbar containers
-  const overlayHost = h("div", { id: "overlay", style: { display: "none" } });
-  const snackHost = h("div", { id: "snackbars", style: { position: "fixed", bottom: "16px", right: "16px", zIndex: "9999", display: "flex", flexDirection: "column", gap: "8px" } });
-
-  // Layout
-  const layout = h("div", { style: { display: "flex", height: "100vh", width: "100vw" } });
-
-  // Sidebar
-  _sidebar = h("div", {
-    id: "sidebar",
-    style: {
-      width: "280px",
-      minWidth: "280px",
-      background: "var(--bg)",
-      borderRight: "1px solid var(--border)",
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      transition: "width .15s",
-    },
-  });
-
-  // Main chat
-  _chat = h("div", { id: "chat", style: { flex: "1", display: "flex", flexDirection: "column", minWidth: "0" } });
-
-  layout.append(_sidebar, _chat);
-  _root.append(layout, overlayHost, snackHost);
-
-  // Load initial data
-  await refreshSessions();
-  renderSidebar();
-  renderChat();
-
-  // Open last session or show welcome
-  const lastId = getLastSessionId();
-  const sessions = getFilteredSessions();
-  if (lastId && sessions.find(s => s.id === lastId)) {
-    await openSession(lastId);
-  } else if (sessions.length) {
-    // Auto-open the most recent
-    await openSession(sessions[0].id);
-  }
-
-  // Start SSE
-  startSSE();
-
-  // Periodic refresh (every 30s) to catch any missed updates
-  setInterval(async () => {
-    await refreshSessions();
-    renderSessionList();
-  }, 30000);
-
-  // Subscribe to store changes
-  subscribe(() => {
-    renderSessionList();
-  });
-}

frontend/http.js

@@ -1,185 +0,0 @@
-/* http.js — thin fetch helpers around opencode's API */
-
-const H = {
-  json: { "content-type": "application/json", accept: "application/json" },
-};
-
-export async function api(path, opts = {}) {
-  const r = await fetch(path, {
-    method: opts.method || "GET",
-    headers: { ...H.json, ...(opts.headers || {}) },
-    body: opts.body ? JSON.stringify(opts.body) : undefined,
-    signal: opts.signal,
-  });
-  const text = await r.text();
-  let data = null;
-  if (text) {
-    try {
-      data = JSON.parse(text);
-    } catch {
-      data = text;
-    }
-  }
-  return { ok: r.ok, status: r.status, data, headers: r.headers };
-}
-
-export async function listSessions(workspace) {
-  const q = workspace ? `?directory=${encodeURIComponent(workspace)}` : "";
-  const r = await api(`/api/session${q}`);
-  return r.ok ? (r.data && r.data.data) || [] : [];
-}
-
-export async function getSession(id) {
-  const r = await api(`/api/session/${encodeURIComponent(id)}`);
-  return r.ok ? r.data : null;
-}
-
-export async function createSession(body = {}) {
-  const r = await api("/api/session", { method: "POST", body });
-  return r.ok ? r.data : null;
-}
-
-export async function deleteSessions(ids) {
-  if (!ids || !ids.length) return { ok: true };
-  const r = await api("/api/session/delete", { method: "POST", body: { ids } });
-  return r;
-}
-
-export async function renameSession(id, title) {
-  try {
-    const r = await api(`/api/session/${id}`, {
-      method: "PATCH",
-      body: { title },
-    });
-    if (r.ok) return r.data;
-  } catch {}
-  // Fallback for older opencode builds that use body title
-  const r = await api(`/api/session/${id}`, {
-    method: "PATCH",
-    body: { title },
-  });
-  return r.ok ? r.data : null;
-}
-
-export async function shareSession(id) {
-  const r = await api(`/api/session/${id}/share`, { method: "POST" });
-  return r.ok ? r.data : null;
-}
-
-export async function initSession(id) {
-  const r = await api(`/api/session/${id}/init`, {
-    method: "POST",
-    body: { messageID: "" },
-  });
-  return r.ok ? r.data : null;
-}
-
-export async function getMessages(id, cursor, signal) {
-  const q = new URLSearchParams();
-  if (cursor) q.set("cursor", cursor);
-  const qstr = q.toString();
-  const r = await fetch(`/api/session/${encodeURIComponent(id)}/message${qstr ? "?" + qstr : ""}`, {
-    headers: { accept: "application/json" },
-    signal,
-  });
-  if (!r.ok) return { messages: [], hasMore: false };
-  const json = await r.json();
-  return {
-    messages: (json && json.data) || [],
-    cursor: json && json.cursor,
-  };
-}
-
-export async function sendMessage(id, parts, opts = {}) {
-  return api(`/api/session/${encodeURIComponent(id)}/message`, {
-    method: "POST",
-    body: { parts, agent: opts.agent || "build" },
-    signal: opts.signal,
-  });
-}
-
-export async function sessionStatus(id) {
-  const r = await api(`/api/session/${encodeURIComponent(id)}/status`);
-  return r.ok ? r.data : null;
-}
-
-export async function abortSession(id) {
-  return api(`/api/session/${encodeURIComponent(id)}/abort`, {
-    method: "POST",
-  });
-}
-
-export async function abortSessionStatus(id) {
-  return api(`/api/session/${encodeURIComponent(id)}/abort`, {
-    method: "POST",
-    body: {},
-  });
-}
-
-export async function listProviders() {
-  const r = await api("/api/provider");
-  return r.ok ? (r.data && r.data.data) || [] : [];
-}
-
-export async function listAgents() {
-  const r = await api("/api/agent");
-  return r.ok ? (r.data && r.data.data) || [] : [];
-}
-
-export function openEventStream(onEvent, onError, signal) {
-  // opencode's SSE endpoint is /api/event; it streams session lifecycle and
-  // message progress events. We keep the connection alive and rebind handlers
-  // on disconnect so transient network blips do not break the UI.
-  let es = null;
-  let retry = 0;
-  let stopped = false;
-
-  async function connect() {
-    if (stopped) return;
-    try {
-      es = new EventSource("/api/event");
-      es.onmessage = (e) => {
-        retry = 0;
-        try {
-          const data = JSON.parse(e.data);
-          onEvent && onEvent(data);
-        } catch (err) {
-          onError && onError(err);
-        }
-      };
-      es.onerror = () => {
-        if (es) {
-          es.close();
-          es = null;
-        }
-        if (stopped) return;
-        retry = Math.min(retry + 1, 6);
-        const delay = 500 * Math.pow(2, retry);
-        setTimeout(connect, delay);
-        onError && onError(new Error("sse disconnected"));
-      };
-    } catch (err) {
-      onError && onError(err);
-      setTimeout(connect, 1000);
-    }
-  }
-
-  connect();
-
-  return {
-    close() {
-      stopped = true;
-      if (es) {
-        es.close();
-        es = null;
-      }
-    },
-  };
-}
-
-export function partText(p) {
-  if (!p) return "";
-  if (p.type === "text") return p.text || "";
-  if (p.type === "reasoning") return p.text || "";
-  return "";
-}

frontend/index.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>OpenCode</title>
-<link rel="icon" href="/favicon-96x96-v3.png" sizes="96x96">
-<style>
-*,*::before,*::after{box-sizing:border-box}
-html,body,#root{height:100%;margin:0;padding:0}
-body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;background:#0a0a0a;color:#ececec;overflow:hidden;-webkit-font-smoothing:antialiased}
-a{color:inherit;text-decoration:none}
-button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0}
-input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
-::-webkit-scrollbar{width:8px;height:8px}
-::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:8px}
-::-webkit-scrollbar-thumb:hover{background:#3a3a3a}
-::-webkit-scrollbar-track{background:transparent}
-:root{--bg:#0a0a0a;--bg-1:#171717;--bg-2:#1f1f1f;--bg-3:#2a2a2a;--fg:#ececec;--fg-2:#a0a0a0;--fg-3:#6e6e6e;--accent:#10a37f;--danger:#ef4146;--warn:#f0b232;--border:#2a2a2a;--border-hi:#3a3a3a;--radius:8px;--shadow:0 4px 12px rgba(0,0,0,0.4)}
-.skeleton{background:linear-gradient(90deg,#1f1f1f 0%,#2a2a2a 50%,#1f1f1f 100%);background-size:200% 100%;animation:s 1.4s infinite;border-radius:6px}
-@keyframes s{0%{background-position:200% 0}100%{background-position:-200% 0}}
-.fade-in{animation:fade .18s ease-out}
-@keyframes fade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
-</style>
-</head>
-<body>
-<div id="root"><div style="display:flex;align-items:center;justify-content:center;height:100%;color:#6e6e6e">loading\u2026</div></div>
-<script type="module" src="/assets/chat.js"></script>
-</body>
-</html>

frontend/store.js

@@ -1,158 +0,0 @@
-/* store.js — session state + localStorage UI metadata */
-
-import { listSessions, renameSession as apiRename, deleteSessions as apiDelete } from "./http.js";
-
-const LS_KEY = "oc_ui_meta";
-const LS_LAST = "oc_last_session";
-
-// UI-only metadata that lives in localStorage
-let _meta = {};
-try {
-  _meta = JSON.parse(localStorage.getItem(LS_KEY) || "{}");
-} catch {
-  _meta = {};
-}
-
-function saveMeta() {
-  localStorage.setItem(LS_KEY, JSON.stringify(_meta));
-}
-
-export function getPinnedIds() { return new Set(_meta.pinned || []); }
-export function getArchivedIds() { return new Set(_meta.archived || []); }
-export function getFavorites() { return new Set(_meta.favorites || []); }
-export function getLastSessionId() { return _meta.lastSessionId || localStorage.getItem(LS_LAST) || null; }
-export function setLastSessionId(id) { _meta.lastSessionId = id; localStorage.setItem(LS_LAST, id || ""); saveMeta(); }
-export function getDrawerCollapsed() { return !!_meta.drawerCollapsed; }
-export function setDrawerCollapsed(v) { _meta.drawerCollapsed = v; saveMeta(); }
-export function getSelectedModel() { return _meta.selectedModel || null; }
-export function setSelectedModel(v) { _meta.selectedModel = v; saveMeta(); }
-export function getSelectedAgent() { return _meta.selectedAgent || null; }
-export function setSelectedAgent(v) { _meta.selectedAgent = v; saveMeta(); }
-export function getDraft(sessionId) { return (_meta.drafts || {})[sessionId] || ""; }
-export function setDraft(sessionId, text) {
-  if (!_meta.drafts) _meta.drafts = {};
-  if (text) _meta.drafts[sessionId] = text;
-  else delete _meta.drafts[sessionId];
-  saveMeta();
-}
-
-export function togglePin(id) {
-  const s = getPinnedIds();
-  if (s.has(id)) s.delete(id); else s.add(id);
-  _meta.pinned = [...s];
-  saveMeta();
-  return s.has(id);
-}
-
-export function toggleArchive(id) {
-  const s = getArchivedIds();
-  if (s.has(id)) s.delete(id); else s.add(id);
-  _meta.archived = [...s];
-  saveMeta();
-  return s.has(id);
-}
-
-export function toggleFavorite(id) {
-  const s = getFavorites();
-  if (s.has(id)) s.delete(id); else s.add(id);
-  _meta.favorites = [...s];
-  saveMeta();
-  return s.has(id);
-}
-
-// Live session list
-let _sessions = [];
-let _listeners = new Set();
-let _loading = false;
-let _error = null;
-
-export function getSessions() { return _sessions; }
-export function subscribe(fn) { _listeners.add(fn); return () => _listeners.delete(fn); }
-function emit() { for (const fn of _listeners) fn(_sessions); }
-
-export function getFilteredSessions({ search = "", showArchived = false } = {}) {
-  const pinned = getPinnedIds();
-  const archived = getArchivedIds();
-  let list = _sessions;
-
-  if (!showArchived) {
-    list = list.filter(s => !archived.has(s.id));
-  }
-
-  if (search) {
-    const q = search.toLowerCase();
-    list = list.filter(s => (s.title || "").toLowerCase().includes(q));
-  }
-
-  // Sort: pinned first, then by updated time
-  list = [...list].sort((a, b) => {
-    const pa = pinned.has(a.id) ? 1 : 0;
-    const pb = pinned.has(b.id) ? 1 : 0;
-    if (pa !== pb) return pb - pa;
-    const ua = (a.time && a.time.updated) || 0;
-    const ub = (b.time && b.time.updated) || 0;
-    return ub - ua;
-  });
-
-  return list;
-}
-
-export async function refreshSessions() {
-  _loading = true;
-  _error = null;
-  try {
-    _sessions = await listSessions();
-  } catch (e) {
-    _error = e;
-  }
-  _loading = false;
-  emit();
-  return _sessions;
-}
-
-export async function renameSession(id, title) {
-  await apiRename(id, title);
-  const s = _sessions.find(x => x.id === id);
-  if (s) s.title = title;
-  emit();
-}
-
-export async function deleteSession(id) {
-  await apiDelete([id]);
-  _sessions = _sessions.filter(s => s.id !== id);
-  emit();
-}
-
-export function upsertSessionFromEvent(evt) {
-  if (!evt || !evt.data) return;
-  const d = evt.data;
-  const existing = _sessions.find(s => s.id === d.id);
-  if (existing) {
-    Object.assign(existing, d);
-  } else {
-    _sessions.unshift(d);
-  }
-  emit();
-}
-
-export function updateSessionFromEvent(evt) {
-  if (!evt || !evt.data) return;
-  const id = (evt.data && evt.data.id) || (evt.aggregateID);
-  if (!id) return;
-  const s = _sessions.find(x => x.id === id);
-  if (s) {
-    // Merge data from event (session.updated events carry full info)
-    const info = evt.data.info || evt.data;
-    if (info) Object.assign(s, info);
-  }
-  emit();
-}
-
-// Title auto-generation
-let _titleTimers = {};
-export function scheduleTitleGeneration(sessionId, userMessage) {
-  if (_titleTimers[sessionId]) return;
-  // Fire-and-forget: send a small message to trigger title, then check back
-  // Actually we just let opencode's own title system handle this.
-  // If the title is still "New session", we can let the user rename.
-}

frontend/ui.js

@@ -1,285 +0,0 @@
-/* ui.js — lightweight DOM helpers. No external runtime. */
-
-export function h(tag, props = {}, children = []) {
-  const el = document.createElement(tag);
-  for (const k in props) {
-    const v = props[k];
-    if (k === "style" && typeof v === "object") Object.assign(el.style, v);
-    else if (k === "class") el.className = v;
-    else if (k === "html") el.innerHTML = v;
-    else if (k === "text") el.textContent = v;
-    else if (k.startsWith("on") && typeof v === "function")
-      el.addEventListener(k.slice(2).toLowerCase(), v);
-    else if (v != null) el.setAttribute(k, v);
-  }
-  for (const c of [].concat(children)) {
-    if (c == null) continue;
-    el.append(c.nodeType ? c : document.createTextNode(String(c)));
-  }
-  return el;
-}
-
-export function clear(el) {
-  while (el.firstChild) el.removeChild(el.firstChild);
-}
-
-export function el(id) {
-  return document.getElementById(id);
-}
-
-let _uid = 0;
-export function uid(prefix = "id") {
-  _uid += 1;
-  return `${prefix}-${_uid}`;
-}
-
-export function debounce(fn, ms = 200) {
-  let t;
-  return (...args) => {
-    clearTimeout(t);
-    t = setTimeout(() => fn(...args), ms);
-  };
-}
-
-export function formatTimeAgo(ts) {
-  if (!ts) return "";
-  const d = new Date(ts);
-  const now = Date.now();
-  const diff = now - ts;
-  const s = Math.floor(diff / 1000);
-  if (s < 60) return "just now";
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m`;
-  const h = Math.floor(m / 60);
-  if (h < 24) return `${h}h`;
-  const day = Math.floor(h / 24);
-  if (day === 0) return "today";
-  if (day === 1) return "yesterday";
-  if (day < 7) return `${day}d`;
-  if (day < 30) return `${Math.floor(day / 7)}w`;
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
-
-export function groupByDate(sessions) {
-  const now = Date.now();
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const yesterday = today.getTime() - 86400000;
-  const week = today.getTime() - 7 * 86400000;
-  const month = today.getTime() - 30 * 86400000;
-
-  const groups = { Today: [], Yesterday: [], "Previous 7 Days": [], "Previous 30 Days": [], Older: [] };
-  for (const s of sessions) {
-    const updated = s.time && s.time.updated ? s.time.updated : 0;
-    if (updated >= today.getTime()) groups.Today.push(s);
-    else if (updated >= yesterday) groups.Yesterday.push(s);
-    else if (updated >= week) groups["Previous 7 Days"].push(s);
-    else if (updated >= month) groups["Previous 30 Days"].push(s);
-    else groups.Older.push(s);
-  }
-  for (const k in groups) {
-    groups[k].sort((a, b) => {
-      const ua = a.time && a.time.updated ? a.time.updated : 0;
-      const ub = b.time && b.time.updated ? b.time.updated : 0;
-      return ub - ua;
-    });
-  }
-  return groups;
-}
-
-export function pickPreview(s) {
-  // The session list itself rarely carries last-message content; we use title
-  // as a fallback preview. When caller already has a preview, prefer that.
-  return s.__preview || s.title || "New chat";
-}
-
-export function setOverlay(node) {
-  const host = document.getElementById("overlay");
-  if (!host) return;
-  while (host.firstChild) host.removeChild(host.firstChild);
-  host.appendChild(node || document.createTextNode(""));
-  host.style.display = node ? "flex" : "none";
-}
-
-export function openOverlay(build, onClose) {
-  const host = document.createElement("div");
-  host.className = "modal-backdrop fade-in";
-  Object.assign(host.style, {
-    position: "fixed",
-    inset: "0",
-    background: "rgba(0,0,0,0.55)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: "9999",
-  });
-  const close = () => {
-    document.body.removeChild(host);
-    document.removeEventListener("keydown", esc);
-    onClose && onClose();
-  };
-  const esc = (e) => {
-    if (e.key === "Escape") close();
-  };
-  host.addEventListener("click", (e) => {
-    if (e.target === host) close();
-  });
-  document.addEventListener("keydown", esc);
-  document.body.appendChild(host);
-  build(host, close);
-  return close;
-}
-
-export function snackbar(text, kind = "info") {
-  const host = document.getElementById("snackbars") || (() => {
-    const n = document.createElement("div");
-    n.id = "snackbars";
-    Object.assign(n.style, {
-      position: "fixed",
-      bottom: "16px",
-      right: "16px",
-      zIndex: "9999",
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px",
-    });
-    document.body.appendChild(n);
-    return n;
-  })();
-  const node = document.createElement("div");
-  node.textContent = text;
-  Object.assign(node.style, {
-    padding: "8px 14px",
-    background: kind === "error" ? "#3a1a1a" : kind === "warn" ? "#3a2e1a" : "#1a2a23",
-    border: `1px solid ${kind === "error" ? "#5a2a2a" : kind === "warn" ? "#5a4a1a" : "#1f3a2c"}`,
-    borderRadius: "6px",
-    color: "#ececec",
-    fontSize: "13px",
-    boxShadow: "var(--shadow)",
-    animation: "fade .2s ease-out",
-  });
-  host.appendChild(node);
-  setTimeout(() => {
-    node.style.opacity = "0";
-    setTimeout(() => node.remove(), 300);
-  }, 2600);
-}
-
-export function promptInput(title, placeholder = "", initial = "") {
-  return new Promise((resolve) => {
-    openOverlay((host, close) => {
-      const wrap = document.createElement("div");
-      Object.assign(wrap.style, {
-        background: "#171717",
-        border: "1px solid var(--border-hi)",
-        borderRadius: "10px",
-        padding: "20px",
-        width: "420px",
-        maxWidth: "90vw",
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px",
-        boxShadow: "var(--shadow)",
-      });
-      const t = document.createElement("div");
-      t.textContent = title;
-      t.style.fontSize = "15px";
-      t.style.fontWeight = "600";
-      wrap.appendChild(t);
-      const input = document.createElement("input");
-      input.value = initial || "";
-      input.placeholder = placeholder;
-      Object.assign(input.style, {
-        padding: "10px 12px",
-        background: "#0a0a0a",
-        border: "1px solid var(--border)",
-        borderRadius: "6px",
-        fontSize: "14px",
-        width: "100%",
-      });
-      input.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") {
-          close();
-          resolve(input.value.trim() || null);
-        }
-        if (e.key === "Escape") {
-          close();
-          resolve(null);
-        }
-      });
-      wrap.appendChild(input);
-      const row = document.createElement("div");
-      Object.assign(row.style, { display: "flex", justifyContent: "flex-end", gap: "8px" });
-      const cancel = document.createElement("button");
-      cancel.textContent = "Cancel";
-      Object.assign(cancel.style, {
-        padding: "8px 14px",
-        borderRadius: "6px",
-        color: "var(--fg-2)",
-      });
-      cancel.addEventListener("click", () => { close(); resolve(null); });
-      const ok = document.createElement("button");
-      ok.textContent = "OK";
-      ok.className = "btn-primary";
-      Object.assign(ok.style, {
-        padding: "8px 14px",
-        borderRadius: "6px",
-        background: "var(--accent)",
-        color: "#0a0a0a",
-        fontWeight: "600",
-      });
-      ok.addEventListener("click", () => { close(); resolve(input.value.trim() || null); });
-      row.append(cancel, ok);
-      wrap.appendChild(row);
-      host.appendChild(wrap);
-      setTimeout(() => input.focus(), 50);
-    });
-  });
-}
-
-export function confirmAction(title, body, opts = {}) {
-  return new Promise((resolve) => {
-    openOverlay((host, close) => {
-      const wrap = document.createElement("div");
-      Object.assign(wrap.style, {
-        background: "#171717",
-        border: "1px solid var(--border-hi)",
-        borderRadius: "10px",
-        padding: "20px",
-        width: "420px",
-        maxWidth: "90vw",
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px",
-      });
-      const t = document.createElement("div");
-      t.textContent = title;
-      t.style.fontSize = "15px";
-      t.style.fontWeight = "600";
-      wrap.appendChild(t);
-      const p = document.createElement("div");
-      p.textContent = body;
-      Object.assign(p.style, { color: "var(--fg-2)", fontSize: "13px", lineHeight: "1.5" });
-      wrap.appendChild(p);
-      const row = document.createElement("div");
-      Object.assign(row.style, { display: "flex", justifyContent: "flex-end", gap: "8px" });
-      const cancel = document.createElement("button");
-      cancel.textContent = opts.cancelText || "Cancel";
-      Object.assign(cancel.style, { padding: "8px 14px", color: "var(--fg-2)" });
-      cancel.addEventListener("click", () => { close(); resolve(false); });
-      const ok = document.createElement("button");
-      ok.textContent = opts.okText || "Confirm";
-      Object.assign(ok.style, {
-        padding: "8px 14px",
-        borderRadius: "6px",
-        background: opts.danger ? "var(--danger)" : "var(--accent)",
-        color: "#0a0a0a",
-        fontWeight: "600",
-      });
-      ok.addEventListener("click", () => { close(); resolve(true); });
-      row.append(cancel, ok);
-      wrap.appendChild(row);
-      host.appendChild(wrap);
-    });
-  });
-}