Delete app.py

app.py

@@ -1,872 +0,0 @@
-#!/usr/bin/env python3
-"""
-opencode mobile web UI  ·  single file  ·  Hugging Face Space ready
-==================================================================
-
-One process that:
-  1. launches the `opencode serve` backend on 127.0.0.1:<internal>,
-  2. reverse-proxies its API (REST + SSE) on 0.0.0.0:7860,
-  3. serves a mobile-first chat interface with model selection.
-
-No pip dependencies — standard library only.
-
-Environment:
-  PORT / OPENCODE_PORT   public port            (default 7860)
-  OPENCODE_HOST          public bind host       (default 0.0.0.0)
-  INTERNAL_PORT          backend port           (default 4096)
-  OPENCODE_BIN           path to the binary     (auto-detected otherwise)
-  WORKSPACE              agent working dir      (default /app/workspace or $HOME)
-  APP_PASSWORD           optional password for the UI (HTTP Basic auth)
-  ANTHROPIC_API_KEY / OPENAI_API_KEY / ...  picked up by opencode automatically.
-
-Archive  : 2026-10-18
-Target   : opencode 1.19.x server API
-"""
-
-import base64
-import http.server
-import json
-import os
-import shutil
-import signal
-import socket
-import subprocess
-import sys
-import threading
-import time
-import urllib.error
-import urllib.request
-
-# --------------------------------------------------------------------------- #
-# configuration
-# --------------------------------------------------------------------------- #
-
-PUBLIC_HOST = os.environ.get("OPENCODE_HOST", "0.0.0.0")
-PUBLIC_PORT = int(os.environ.get("OPENCODE_PORT", os.environ.get("PORT", "7860")))
-INTERNAL_HOST = "127.0.0.1"
-INTERNAL_PORT = int(os.environ.get("INTERNAL_PORT", "4096"))
-APP_PASSWORD = os.environ.get("APP_PASSWORD", "").strip()
-WORKSPACE = os.environ.get(
-    "WORKSPACE",
-    "/app/workspace" if os.path.isdir("/app/workspace") else os.path.expanduser("~"),
-)
-
-_print_lock = threading.Lock()
-
-
-def log(*a):
-    with _print_lock:
-        print("[space]", *a, flush=True)
-
-
-# --------------------------------------------------------------------------- #
-# backend lifecycle
-# --------------------------------------------------------------------------- #
-
-def find_opencode():
-    env = os.environ.get("OPENCODE_BIN")
-    if env and os.path.isfile(env):
-        return env
-    found = shutil.which("opencode")
-    if found:
-        return found
-    for c in (
-        os.path.expanduser("~/.opencode/bin/opencode"),
-        "/root/.opencode/bin/opencode",
-        "/home/user/.opencode/bin/opencode",
-    ):
-        if os.path.isfile(c) and os.access(c, os.X_OK):
-            return c
-    sys.exit("[space] FATAL: opencode binary not found (set OPENCODE_BIN)")
-
-
-def wait_ready(timeout=60):
-    deadline = time.time() + timeout
-    url = f"http://{INTERNAL_HOST}:{INTERNAL_PORT}/api/session"
-    while time.time() < deadline:
-        try:
-            with urllib.request.urlopen(url, timeout=3) as r:
-                if r.status == 200:
-                    return True
-        except Exception:
-            pass
-        time.sleep(0.4)
-    return False
-
-
-def start_backend():
-    binary = find_opencode()
-    os.makedirs(WORKSPACE, exist_ok=True)
-    cmd = [binary, "serve", "--hostname", INTERNAL_HOST, "--port", str(INTERNAL_PORT)]
-    log("starting backend:", " ".join(cmd), "(cwd=%s)" % WORKSPACE)
-    proc = subprocess.Popen(cmd, cwd=WORKSPACE, env=os.environ.copy())
-    if not wait_ready():
-        proc.terminate()
-        sys.exit("[space] FATAL: opencode backend did not become ready")
-    log("backend ready on %s:%d" % (INTERNAL_HOST, INTERNAL_PORT))
-    return proc
-
-
-# --------------------------------------------------------------------------- #
-# HTTP proxy + UI server
-# --------------------------------------------------------------------------- #
-
-HOP_BY_HOP = {
-    "connection", "keep-alive", "proxy-authenticate", "proxy-authorization",
-    "te", "trailers", "transfer-encoding", "upgrade", "content-length", "host",
-    "accept-encoding",
-}
-
-
-class Handler(http.server.BaseHTTPRequestHandler):
-    protocol_version = "HTTP/1.1"
-    server_version = "opencode-space/1.0"
-
-    # -- helpers ---------------------------------------------------------- #
-
-    def log_message(self, *a):  # silence access log
-        pass
-
-    def _authenticated(self):
-        if not APP_PASSWORD:
-            return True
-        header = self.headers.get("Authorization", "")
-        if not header.startswith("Basic "):
-            return False
-        try:
-            decoded = base64.b64decode(header[6:]).decode("utf-8", "replace")
-        except Exception:
-            return False
-        # Accept "APP_PASSWORD" on its own or as the password part of user:password.
-        return decoded == APP_PASSWORD or decoded.split(":", 1)[-1] == APP_PASSWORD
-
-    def _require_auth(self):
-        if self._authenticated():
-            return True
-        self.send_response(401)
-        self.send_header("WWW-Authenticate", 'Basic realm="opencode"')
-        self.send_header("Content-Length", "0")
-        self.end_headers()
-        return False
-
-    def _send(self, status, body=b"", ctype="application/octet-stream"):
-        if isinstance(body, str):
-            body = body.encode("utf-8")
-        self.send_response(status)
-        self.send_header("Content-Type", ctype)
-        self.send_header("Content-Length", str(len(body)))
-        self.send_header("Cache-Control", "no-store")
-        self.end_headers()
-        if self.command != "HEAD":
-            self.wfile.write(body)
-
-    def _send_json(self, obj, status=200):
-        self._send(status, json.dumps(obj), "application/json; charset=utf-8")
-
-    def _upstream_url(self):
-        path = self.path if self.path.startswith("/") else "/" + self.path
-        return f"http://{INTERNAL_HOST}:{INTERNAL_PORT}{path}"
-
-    def _read_body(self):
-        length = int(self.headers.get("Content-Length") or 0)
-        return self.rfile.read(length) if length else None
-
-    def _forward_headers(self):
-        out = {}
-        for k, v in self.headers.items():
-            if k.lower() in HOP_BY_HOP:
-                continue
-            out[k] = v
-        return out
-
-    # -- routing ---------------------------------------------------------- #
-
-    def do_GET(self):
-        self._dispatch("GET")
-
-    def do_POST(self):
-        self._dispatch("POST")
-
-    def do_PUT(self):
-        self._dispatch("PUT")
-
-    def do_PATCH(self):
-        self._dispatch("PATCH")
-
-    def do_DELETE(self):
-        self._dispatch("DELETE")
-
-    def do_HEAD(self):
-        self._dispatch("HEAD")
-
-    def do_OPTIONS(self):
-        self.send_response(204)
-        self.send_header("Access-Control-Allow-Origin", "*")
-        self.send_header("Access-Control-Allow-Headers", "content-type, authorization")
-        self.send_header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE,OPTIONS")
-        self.send_header("Content-Length", "0")
-        self.end_headers()
-
-    def _dispatch(self, method):
-        if not self._require_auth():
-            return
-        path = self.path.split("?", 1)[0]
-        try:
-            if path == "/healthz":
-                return self._send(200, "ok", "text/plain")
-            if path in ("/", "/index.html"):
-                return self._send(200, INDEX_HTML, "text/html; charset=utf-8")
-            if path == "/app.css":
-                return self._send(200, APP_CSS, "text/css; charset=utf-8")
-            if path == "/app.js":
-                return self._send(200, APP_JS, "application/javascript; charset=utf-8")
-            if path.startswith("/api/"):
-                if path == "/api/event" and method == "GET":
-                    return self._proxy_sse()
-                return self._proxy(method)
-            return self._send(404, "not found", "text/plain")
-        except (BrokenPipeError, ConnectionResetError):
-            pass
-        except Exception as e:  # noqa: BLE001
-            log("dispatch error:", repr(e))
-            try:
-                self._send(502, f"proxy error: {e}", "text/plain")
-            except Exception:
-                pass
-
-    # -- plain proxy ------------------------------------------------------ #
-
-    def _proxy(self, method):
-        body = self._read_body()
-        req = urllib.request.Request(self._upstream_url(), data=body, method=method)
-        for k, v in self._forward_headers().items():
-            req.add_header(k, v)
-        try:
-            with urllib.request.urlopen(req, timeout=300) as up:
-                data = up.read()
-                status = up.status
-                ctype = up.headers.get("Content-Type", "application/octet-stream")
-        except urllib.error.HTTPError as e:
-            data = e.read()
-            status = e.code
-            ctype = e.headers.get("Content-Type", "application/json")
-        self.send_response(status)
-        self.send_header("Content-Type", ctype)
-        self.send_header("Content-Length", str(len(data)))
-        self.send_header("Cache-Control", "no-store")
-        self.end_headers()
-        if method != "HEAD":
-            self.wfile.write(data)
-
-    # -- SSE proxy -------------------------------------------------------- #
-
-    def _proxy_sse(self):
-        req = urllib.request.Request(self._upstream_url(), method="GET")
-        req.add_header("Accept", "text/event-stream")
-        up = urllib.request.urlopen(req, timeout=None)
-
-        self.send_response(200)
-        self.send_header("Content-Type", "text/event-stream; charset=utf-8")
-        self.send_header("Cache-Control", "no-cache, no-transform")
-        self.send_header("X-Accel-Buffering", "no")
-        self.send_header("Transfer-Encoding", "chunked")
-        self.end_headers()
-
-        def chunk(payload: bytes):
-            if not payload:
-                return
-            self.wfile.write(b"%x\r\n" % len(payload) + payload + b"\r\n")
-            self.wfile.flush()
-
-        read = getattr(up, "read1", None) or up.read
-        try:
-            while True:
-                data = read(4096)
-                if not data:
-                    break
-                chunk(data)
-        except (BrokenPipeError, ConnectionResetError, socket.timeout):
-            pass
-        finally:
-            try:
-                self.wfile.write(b"0\r\n\r\n")
-                self.wfile.flush()
-            except Exception:
-                pass
-            up.close()
-
-
-class ThreadingServer(http.server.ThreadingHTTPServer):
-    daemon_threads = True
-    allow_reuse_address = True
-
-
-# --------------------------------------------------------------------------- #
-# front-end assets
-# --------------------------------------------------------------------------- #
-
-INDEX_HTML = r"""<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
-<meta name="theme-color" content="#0b0b0f" />
-<meta name="mobile-web-app-capable" content="yes" />
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-<title>opencode</title>
-<link rel="stylesheet" href="/app.css" />
-</head>
-<body>
-<header id="topbar">
-  <button id="btn-menu" class="icon" aria-label="Sessions">&#9776;</button>
-  <div id="title-wrap">
-    <div id="title">opencode</div>
-    <button id="btn-model" class="model-chip" aria-label="Select model">
-      <span class="dot"></span><span id="model-name">model</span><span class="caret">&#9662;</span>
-    </button>
-  </div>
-  <button id="btn-new" class="icon" aria-label="New chat">&#43;</button>
-</header>
-
-<main id="messages">
-  <div id="empty" class="empty">
-    <div class="empty-logo">&#9678;</div>
-    <div class="empty-title">opencode</div>
-    <div class="empty-sub">Ask anything. Pick a model up top.</div>
-  </div>
-</main>
-
-<form id="composer">
-  <textarea id="input" rows="1" placeholder="Message opencode&#8230;" enterkeyhint="send"></textarea>
-  <button id="btn-send" type="submit" aria-label="Send">&#10148;</button>
-  <button id="btn-stop" type="button" aria-label="Stop" hidden>&#9632;</button>
-</form>
-
-<!-- model sheet -->
-<div id="sheet-model" class="sheet" hidden>
-  <div class="sheet-backdrop"></div>
-  <div class="sheet-panel">
-    <div class="sheet-grab"></div>
-    <div class="sheet-head"><span>Model</span><button class="icon" data-close>&#10005;</button></div>
-    <input id="model-search" class="search" placeholder="Search models&#8230;" />
-    <div id="model-list" class="list"></div>
-    <div class="manual">
-      <input id="manual-model" placeholder="providerID/modelID (manual)" />
-      <button id="manual-apply">Set</button>
-    </div>
-  </div>
-</div>
-
-<!-- sessions sheet -->
-<div id="sheet-sessions" class="sheet" hidden>
-  <div class="sheet-backdrop"></div>
-  <div class="sheet-panel">
-    <div class="sheet-grab"></div>
-    <div class="sheet-head"><span>Sessions</span><button class="icon" data-close>&#10005;</button></div>
-    <div id="session-list" class="list"></div>
-  </div>
-</div>
-
-<div id="toast" class="toast" hidden></div>
-<script src="/app.js"></script>
-</body>
-</html>
-"""
-
-APP_CSS = r""":root{
-  --bg:#0b0b0f; --bg2:#141418; --bg3:#1c1c22; --fg:#ececf1; --muted:#8b8b96;
-  --line:#26262e; --accent:#c9a86a; --accent2:#7c9cff; --user:#1f2a44; --radius:16px;
-}
-*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
-html,body{margin:0;height:100%}
-body{
-  background:var(--bg);color:var(--fg);
-  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-  display:flex;flex-direction:column;
-  height:100dvh;overscroll-behavior:none;
-}
-#topbar{
-  display:flex;align-items:center;gap:10px;
-  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
-  background:rgba(11,11,15,.92);backdrop-filter:blur(12px);
-  border-bottom:1px solid var(--line);
-  position:sticky;top:0;z-index:20;
-}
-#title-wrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
-#title{font-weight:600;font-size:15px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.model-chip{
-  display:inline-flex;align-items:center;gap:6px;max-width:100%;
-  background:var(--bg3);border:1px solid var(--line);color:var(--muted);
-  border-radius:999px;padding:3px 10px;font-size:12px;
-}
-.model-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
-.model-chip #model-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.model-chip .caret{font-size:9px;opacity:.7}
-.icon{
-  background:transparent;border:0;color:var(--fg);font-size:20px;line-height:1;
-  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
-}
-.icon:active{background:var(--bg3)}
-
-#messages{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:14px;
-  scroll-behavior:smooth;overscroll-behavior:contain}
-.msg{display:flex;max-width:100%}
-.msg.user{justify-content:flex-end}
-.bubble{max-width:86%;border-radius:var(--radius);padding:10px 13px;word-wrap:break-word;overflow-wrap:anywhere}
-.msg.user .bubble{background:var(--user);border:1px solid #2b3a5e;border-bottom-right-radius:6px}
-.msg.assistant .bubble{background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:6px;max-width:96%;width:100%}
-.part+.part{margin-top:8px}
-.part.text{white-space:pre-wrap}
-.part.text code{background:var(--bg3);padding:1px 5px;border-radius:6px;font-size:.9em}
-.part.text pre{background:#0e0e12;border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;font-size:13px;margin:6px 0}
-.part.text pre code{background:none;padding:0}
-details.part{border:1px solid var(--line);border-radius:10px;background:#101014;overflow:hidden}
-details.part>summary{list-style:none;cursor:pointer;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
-details.part>summary::-webkit-details-marker{display:none}
-details.part .body{padding:0 10px 10px;font-size:13px;color:#c9c9d2}
-details.part pre{margin:6px 0 0;background:#0b0b0e;border:1px solid var(--line);border-radius:8px;padding:8px;overflow:auto;max-height:320px}
-.status{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
-.status.running{background:var(--accent2);animation:pulse 1s infinite}
-.status.completed{background:#4ec97a}
-.status.error{background:#e06a6a}
-@keyframes pulse{50%{opacity:.35}}
-.tname{color:var(--fg);font-weight:500}
-.err{color:#ff9c9c;font-size:13px;margin-top:6px}
-.reasoning{opacity:.85}
-.cursor{display:inline-block;width:7px;height:15px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite}
-@keyframes blink{50%{opacity:0}}
-
-.empty{margin:auto;text-align:center;color:var(--muted);padding:40px 20px}
-.empty-logo{font-size:44px;color:var(--accent);margin-bottom:10px}
-.empty-title{font-size:20px;color:var(--fg);font-weight:600}
-.empty-sub{font-size:13px;margin-top:4px}
-
-#composer{
-  display:flex;align-items:flex-end;gap:8px;padding:10px 10px calc(env(safe-area-inset-bottom) + 10px);
-  background:rgba(11,11,15,.95);border-top:1px solid var(--line);position:sticky;bottom:0;
-}
-#input{
-  flex:1;resize:none;max-height:40vh;min-height:44px;
-  background:var(--bg3);color:var(--fg);border:1px solid var(--line);border-radius:14px;
-  padding:11px 13px;font:16px/1.4 inherit;outline:none;
-}
-#input:focus{border-color:#3a3a46}
-#btn-send,#btn-stop{
-  width:46px;height:46px;flex:none;border:0;border-radius:14px;font-size:18px;
-  background:var(--accent);color:#1a1406;display:flex;align-items:center;justify-content:center;
-}
-#btn-stop{background:#e06a6a;color:#fff}
-#btn-send:disabled{opacity:.4}
-
-.sheet{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end}
-.sheet[hidden]{display:none}
-.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
-.sheet-panel{position:relative;background:var(--bg2);border-top-left-radius:20px;border-top-right-radius:20px;
-  border-top:1px solid var(--line);max-height:78dvh;display:flex;flex-direction:column;
-  padding-bottom:calc(env(safe-area-inset-bottom) + 8px);animation:up .18s ease}
-@keyframes up{from{transform:translateY(14px);opacity:.6}}
-.sheet-grab{width:38px;height:4px;border-radius:2px;background:#3a3a46;margin:8px auto 0}
-.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 4px;font-weight:600}
-.search{margin:6px 14px;background:var(--bg3);border:1px solid var(--line);border-radius:12px;color:var(--fg);
-  padding:10px 12px;font:15px inherit;outline:none}
-.list{overflow-y:auto;padding:4px 8px 8px}
-.group{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:10px 10px 4px}
-.row{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:12px}
-.row:active{background:var(--bg3)}
-.row.sel{background:var(--bg3)}
-.row .r-main{flex:1;min-width:0}
-.row .r-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.row .r-s{color:var(--muted);font-size:12px}
-.row .check{color:var(--accent)}
-.manual{display:flex;gap:8px;padding:8px 14px;border-top:1px solid var(--line)}
-.manual input{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:12px;color:var(--fg);padding:10px 12px;font:14px inherit;outline:none}
-.manual button{background:var(--bg3);border:1px solid var(--line);border-radius:12px;color:var(--fg);padding:0 16px;font:14px inherit}
-.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 76px);
-  background:#26262e;color:#fff;padding:9px 14px;border-radius:999px;font-size:13px;z-index:60;max-width:90%;
-  border:1px solid #34343e}
-.toast[hidden]{display:none}
-"""
-
-APP_JS = r"""'use strict';
-const $ = (s) => document.querySelector(s);
-const state = {
-  sessionID: localStorage.getItem('oc.session') || null,
-  model: JSON.parse(localStorage.getItem('oc.model') || 'null'),
-  models: [], providers: {},
-  messages: [], lastJSON: '', busy: false, streaming: false,
-};
-const el = {
-  messages: $('#messages'), input: $('#input'), send: $('#btn-send'), stop: $('#btn-stop'),
-  title: $('#title'), modelName: $('#model-name'), modelList: $('#model-list'),
-  search: $('#model-search'), sessionList: $('#session-list'), toast: $('#toast'),
-  empty: $('#empty'),
-};
-
-function toast(msg){ el.toast.textContent = msg; el.toast.hidden = false;
-  clearTimeout(toast._t); toast._t = setTimeout(()=>el.toast.hidden=true, 2600); }
-
-async function api(path, opts){
-  const r = await fetch(path, Object.assign({headers:{'Content-Type':'application/json'}}, opts||{}));
-  if(!r.ok){ let t=''; try{t=await r.text();}catch(e){} throw new Error(r.status+' '+t.slice(0,200)); }
-  if(r.status===204) return null;
-  const ct = r.headers.get('Content-Type')||'';
-  return ct.includes('json') ? r.json() : r.text();
-}
-
-function esc(s){ return (s||'').replace(/[&<>"']/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
-
-function md(src){
-  let s = esc(src||'');
-  const blocks = [];
-  s = s.replace(/```([\s\S]*?)```/g, (m,code)=>{ blocks.push('<pre><code>'+code.trim()+'\n</code></pre>'); return '\u0000'+(blocks.length-1)+'\u0000'; });
-  s = s.replace(/`([^`\n]+)`/g, '<code>$1</code>');
-  s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-  s = s.replace(/(^|\n)(#{1,3})\s*(.+)/g, (m,p,h,t)=>p+'<strong>'+t+'</strong>');
-  s = s.replace(/\u0000(\d+)\u0000/g, (m,i)=>blocks[+i]);
-  return s;
-}
-
-function toolBody(p){
-  const st = p.state||{};
-  const bits = [];
-  if(st.input && Object.keys(st.input).length) bits.push('<pre>'+esc(JSON.stringify(st.input,null,2))+'</pre>');
-  if(st.content){
-    let txt = '';
-    try { txt = typeof st.content==='string' ? st.content : JSON.stringify(st.content,null,2); } catch(e){}
-    if(txt) bits.push('<pre>'+esc(txt.slice(0,4000))+'</pre>');
-  }
-  if(st.error) bits.push('<div class="err">'+esc(typeof st.error==='string'?st.error:JSON.stringify(st.error))+'</div>');
-  return bits.join('') || '<div class="r-s">'+(st.status||'')+'</div>';
-}
-
-function renderMessage(m){
-  const isUser = m.type==='user';
-  const wrap = document.createElement('div');
-  wrap.className = 'msg '+(isUser?'user':'assistant');
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble';
-  if(isUser){
-    bubble.innerHTML = '<div class="part text">'+md(m.text||'')+'</div>';
-  } else {
-    const parts = Array.isArray(m.content) ? m.content : [];
-    for(const p of parts){
-      if(p.type==='text'){
-        bubble.insertAdjacentHTML('beforeend','<div class="part text">'+md(p.text||'')+'</div>');
-      } else if(p.type==='reasoning'){
-        bubble.insertAdjacentHTML('beforeend',
-          '<details class="part reasoning"><summary>reasoning</summary><div class="body">'+md(p.text||'')+'</div></details>');
-      } else if(p.type==='tool'){
-        const st=(p.state&&p.state.status)||'';
-        bubble.insertAdjacentHTML('beforeend',
-          '<details class="part"><summary><span class="status '+esc(st)+'"></span>'+
-          '<span class="tname">'+esc(p.name||'tool')+'</span><span>'+esc(st)+'</span></summary>'+
-          '<div class="body">'+toolBody(p)+'</div></details>');
-      } else {
-        bubble.insertAdjacentHTML('beforeend','<div class="part"><pre>'+esc(JSON.stringify(p,null,2).slice(0,2000))+'</pre></div>');
-      }
-    }
-    if(!parts.length && !m.error) bubble.insertAdjacentHTML('beforeend','<div class="part text"><span class="cursor"></span></div>');
-    if(m.error) bubble.insertAdjacentHTML('beforeend','<div class="err">'+esc(m.error.message||JSON.stringify(m.error))+'</div>');
-  }
-  wrap.appendChild(bubble);
-  return wrap;
-}
-
-function computeBusy(all){
-  const msgs = (all||[]).filter(m=>m.type==='user'||m.type==='assistant');
-  if(!msgs.length) return false;
-  const last = msgs[msgs.length-1];
-  if(last.type==='user') return true;
-  if(last.type==='assistant'){
-    if(!last.time || !last.time.completed) return true;
-    const parts = last.content||[];
-    if(parts.some(p=>p.type==='tool' && p.state && (p.state.status==='running'||p.state.status==='streaming'))) return true;
-  }
-  return false;
-}
-
-function nearBottom(){ return el.messages.scrollHeight - el.messages.scrollTop - el.messages.clientHeight < 120; }
-
-function render(){
-  const wasBottom = nearBottom();
-  const visible = state.messages.filter(m=>m.type==='user'||m.type==='assistant');
-  el.messages.innerHTML = '';
-  if(!visible.length){
-    el.messages.appendChild(el.empty || (()=>{const d=document.createElement('div');d.className='empty';d.innerHTML='<div class="empty-title">opencode</div><div class="empty-sub">Ask anything.</div>';return d;})());
-  } else {
-    for(const m of visible) el.messages.appendChild(renderMessage(m));
-  }
-  if(wasBottom) el.messages.scrollTop = el.messages.scrollHeight;
-}
-
-function setBusy(b){
-  state.busy = b;
-  el.send.hidden = b; el.stop.hidden = !b;
-}
-
-async function refreshMessages(){
-  if(!state.sessionID) return;
-  try{
-    const r = await api('/api/session/'+encodeURIComponent(state.sessionID)+'/message?order=asc&limit=200');
-    const data = (r && r.data) || [];
-    const j = JSON.stringify(data);
-    if(j===state.lastJSON) return;
-    state.lastJSON = j;
-    state.messages = data;
-    render();
-    setBusy(computeBusy(data));
-  }catch(e){ /* ignore transient */ }
-}
-
-async function refreshSessions(){
-  try{
-    const r = await api('/api/session?limit=60');
-    const data = (r && r.data) || [];
-    el.sessionList.innerHTML = '';
-    if(!data.length){ el.sessionList.innerHTML = '<div class="row r-s">No sessions yet</div>'; return; }
-    for(const s of data){
-      const row = document.createElement('div');
-      row.className = 'row'+(s.id===state.sessionID?' sel':'');
-      row.innerHTML = '<div class="r-main"><div class="r-t">'+esc(s.title||s.id)+'</div>'+
-        '<div class="r-s">'+esc((s.model? (s.model.providerID+'/'+s.model.id):'') )+'</div></div>'+
-        (s.id===state.sessionID?'<span class="check">\u2713</span>':'');
-      row.onclick = ()=>selectSession(s.id);
-      el.sessionList.appendChild(row);
-    }
-  }catch(e){ toast('sessions: '+e.message); }
-}
-
-function renderModels(){
-  const q = (el.search.value||'').toLowerCase();
-  el.modelList.innerHTML = '';
-  const models = state.models.filter(m=>{
-    const hay = ((m.providerID||'')+'/'+(m.id||'')+' '+(m.name||'')).toLowerCase();
-    return !q || hay.includes(q);
-  });
-  if(!state.models.length){
-    el.modelList.innerHTML = '<div class="group">no models</div>'+
-      '<div class="row r-s">No models available. Add a provider API key as a Space secret '+
-      '(e.g. ANTHROPIC_API_KEY), then reload.</div>';
-    return;
-  }
-  const byProv = {};
-  for(const m of models){ (byProv[m.providerID]=byProv[m.providerID]||[]).push(m); }
-  const cur = state.model;
-  for(const pid of Object.keys(byProv).sort()){
-    const g = document.createElement('div'); g.className='group';
-    g.textContent = (state.providers[pid] && state.providers[pid].name) || pid;
-    el.modelList.appendChild(g);
-    for(const m of byProv[pid]){
-      const sel = cur && cur.providerID===m.providerID && cur.id===m.id;
-      const row = document.createElement('div'); row.className='row'+(sel?' sel':'');
-      row.innerHTML = '<div class="r-main"><div class="r-t">'+esc(m.name||m.id)+'</div>'+
-        '<div class="r-s">'+esc(m.providerID+'/'+m.id)+'</div></div>'+(sel?'<span class="check">\u2713</span>':'');
-      row.onclick = ()=>{ setModel({providerID:m.providerID, id:m.id, name:m.name||m.id}); closeSheets(); };
-      el.modelList.appendChild(row);
-    }
-  }
-}
-
-async function loadModels(){
-  try{
-    const [models, providers] = await Promise.all([ api('/api/model'), api('/api/provider') ]);
-    state.models = (models && models.data) || [];
-    state.providers = {};
-    for(const p of ((providers && providers.data)||[])) state.providers[p.id]=p;
-    renderModels();
-  }catch(e){ /* non fatal */ }
-}
-
-async function loadModelsUntilReady(){
-  // /api/model can be empty right after boot until the plugin/provider catalog settles.
-  for(let i=0;i<20;i++){
-    await loadModels();
-    if(state.models.length) return;
-    await new Promise(r=>setTimeout(r,2000));
-  }
-}
-
-async function setModel(m){
-  state.model = {providerID:m.providerID, id:m.id, name:m.name||m.id};
-  localStorage.setItem('oc.model', JSON.stringify(state.model));
-  el.modelName.textContent = state.model.name;
-  renderModels();
-  if(state.sessionID){
-    try{ await api('/api/session/'+encodeURIComponent(state.sessionID)+'/model',
-      {method:'POST', body: JSON.stringify({model:{providerID:m.providerID, id:m.id}})}); }
-    catch(e){ toast('model: '+e.message); }
-  }
-}
-
-async function ensureSession(){
-  if(state.sessionID) return state.sessionID;
-  const body = {};
-  if(state.model) body.model = {providerID:state.model.providerID, id:state.model.id};
-  const r = await api('/api/session', {method:'POST', body: JSON.stringify(body)});
-  state.sessionID = r.data.id;
-  localStorage.setItem('oc.session', state.sessionID);
-  updateTitle(r.data.title||'');
-  return state.sessionID;
-}
-
-async function selectSession(id){
-  state.sessionID = id; localStorage.setItem('oc.session', id);
-  state.messages=[]; state.lastJSON='';
-  closeSheets();
-  try{ const r = await api('/api/session/'+encodeURIComponent(id)); updateTitle(r.data.title||''); }catch(e){}
-  await refreshMessages();
-  refreshSessions();
-}
-
-function updateTitle(t){
-  el.title.textContent = t || 'opencode';
-  document.title = t || 'opencode';
-}
-
-async function send(){
-  const text = el.input.value.trim();
-  if(!text || state.busy) return;
-  el.input.value=''; autosize();
-  try{
-    const id = await ensureSession();
-    state.lastJSON='';
-    setBusy(true);
-    await api('/api/session/'+encodeURIComponent(id)+'/prompt', {method:'POST', body: JSON.stringify({prompt:{text}})});
-    refreshMessages();
-  }catch(e){ setBusy(false); toast('send: '+e.message); }
-}
-
-async function stop(){
-  if(!state.sessionID) return;
-  try{ await api('/api/session/'+encodeURIComponent(state.sessionID)+'/interrupt', {method:'POST', body:'{}'}); }
-  catch(e){ toast('stop: '+e.message); }
-}
-
-async function newChat(){
-  state.sessionID=null; state.messages=[]; state.lastJSON=''; localStorage.removeItem('oc.session');
-  updateTitle(''); closeSheets(); render(); setBusy(false); loadModels();
-  el.input.focus();
-}
-
-function autosize(){ el.input.style.height='auto'; el.input.style.height=Math.min(el.input.scrollHeight, window.innerHeight*0.4)+'px'; }
-
-function openSheet(sel){ document.querySelector(sel).hidden=false; }
-function closeSheets(){ document.querySelectorAll('.sheet').forEach(s=>s.hidden=true); }
-
-// ---- SSE ----
-let refreshTimer=null, modelsTimer=null;
-function scheduleRefresh(){ if(refreshTimer) return; refreshTimer=setTimeout(()=>{refreshTimer=null; refreshMessages();},250); }
-function scheduleModels(){ if(modelsTimer) return; modelsTimer=setTimeout(()=>{modelsTimer=null; loadModels();},1200); }
-function onEvent(type){
-  if(!type) return;
-  if(type.indexOf('session.')===0) scheduleRefresh();
-  if(type==='model.updated'||type==='catalog.updated'||type==='provider.updated'||
-     type==='plugin.updated'||type==='models-dev.refreshed') scheduleModels();
-}
-
-async function startStream(){
-  for(;;){
-    try{
-      const r = await fetch('/api/event', {headers:{'Accept':'text/event-stream'}});
-      if(!r.ok || !r.body) throw new Error('sse '+r.status);
-      const reader = r.body.getReader(); const dec=new TextDecoder();
-      let buf='';
-      for(;;){
-        const {done,value} = await reader.read();
-        if(done) break;
-        if(!value) continue;
-        buf += dec.decode(value,{stream:true});
-        let idx;
-        while((idx=buf.indexOf('\n'))>=0){
-          const line = buf.slice(0,idx).trim(); buf = buf.slice(idx+1);
-          if(line.slice(0,5)==='data:'){
-            const payload = line.slice(5).trim();
-            if(payload){ try{ onEvent(JSON.parse(payload).type); }catch(e){} }
-          }
-        }
-        if(buf.length>1<<16) buf='';
-      }
-    }catch(e){ /* reconnect */ }
-    await new Promise(res=>setTimeout(res, 1500));
-  }
-}
-
-// ---- wire up ----
-$('#btn-send').onclick = (e)=>{ e.preventDefault(); send(); };
-$('#composer').onsubmit = (e)=>{ e.preventDefault(); send(); };
-$('#btn-stop').onclick = stop;
-$('#btn-new').onclick = newChat;
-$('#btn-menu').onclick = ()=>{ refreshSessions(); openSheet('#sheet-sessions'); };
-$('#btn-model').onclick = ()=>{ loadModels(); openSheet('#sheet-model'); };
-el.search.oninput = renderModels;
-$('#manual-apply').onclick = ()=>{
-  const v = $('#manual-model').value.trim();
-  if(!v.includes('/')) return toast('use providerID/modelID');
-  const [pid, mid] = v.split('/');
-  setModel({providerID:pid, id:mid, name:v}); closeSheets();
-};
-document.querySelectorAll('[data-close]').forEach(b=>b.onclick=closeSheets);
-document.querySelectorAll('.sheet-backdrop').forEach(b=>b.onclick=closeSheets);
-el.input.addEventListener('input', autosize);
-el.input.addEventListener('keydown', (e)=>{
-  if(e.key==='Enter' && !e.shiftKey && !e.isComposing){ e.preventDefault(); send(); }
-});
-
-(async function init(){
-  if(state.model) el.modelName.textContent = state.model.name;
-  await loadModelsUntilReady();
-  if(!state.model && state.models.length){ const m=state.models[0]; await setModel({providerID:m.providerID,id:m.id,name:m.name||m.id}); }
-  if(!state.model){ el.modelName.textContent = 'pick model'; }
-  if(state.sessionID){
-    try{ const r=await api('/api/session/'+encodeURIComponent(state.sessionID)); updateTitle(r.data.title||''); }
-    catch(e){ state.sessionID=null; localStorage.removeItem('oc.session'); }
-  }
-  await refreshMessages();
-  render();
-  setInterval(refreshMessages, 1500);
-  startStream();
-})();
-"""
-
-
-# --------------------------------------------------------------------------- #
-# main
-# --------------------------------------------------------------------------- #
-
-def main():
-    backend = start_backend()
-
-    server = ThreadingServer((PUBLIC_HOST, PUBLIC_PORT), Handler)
-    server.timeout = None
-
-    stopping = threading.Event()
-
-    def shutdown(signum, _frame):
-        if stopping.is_set():
-            return
-        stopping.set()
-        log("signal", signum, "- shutting down")
-        try:
-            backend.terminate()
-            backend.wait(timeout=8)
-        except Exception:
-            try:
-                backend.kill()
-            except Exception:
-                pass
-        threading.Thread(target=server.shutdown, daemon=True).start()
-
-    signal.signal(signal.SIGTERM, shutdown)
-    signal.signal(signal.SIGINT, shutdown)
-
-    log(f"UI listening on http://{PUBLIC_HOST}:{PUBLIC_PORT}"
-        + ("  (password protected)" if APP_PASSWORD else ""))
-    try:
-        server.serve_forever(poll_interval=0.5)
-    finally:
-        shutdown(0, None)
-
-
-if __name__ == "__main__":
-    main()