@sksoftofficial/ocduet 0.2.1

package/src/plugin/web/app.js

@@ -0,0 +1,1716 @@
+(() => {
+  "use strict";
+
+  const $ = (id) => document.getElementById(id);
+  const els = {
+    project: $("project-name"), list: $("session-list"),
+    timeline: $("timeline"), empty: $("empty"), input: $("input"),
+    send: $("send-btn"), stop: $("stop-btn"), sessionsBtn: $("sessions-btn"),
+    toast: $("toast"), main: $("main"), search: $("session-search"), newSession: $("new-session"),
+    activity: $("activity"), activityLabel: $("activity-label"), activityTime: $("activity-time"),
+    permissions: $("permissions"), questions: $("questions"), modalRoot: $("modal-root"),
+    menuBtn: $("menu-btn"), sessionMenu: $("session-menu"), menuDelete: $("menu-delete"), menuLevel: $("menu-level"),
+    cmdBtn: $("cmd-btn"), menuUsage: $("menu-usage"),
+    modelPill: $("model-pill"), modelPillLabel: $("model-pill-label"),
+    variantPill: $("variant-pill"), variantPillLabel: $("variant-pill-label"),
+    contextPill: $("context-pill"), contextRing: $("context-ring"), contextLabel: $("context-pill-label"),
+  };
+
+  // ---------- token ----------
+  const TOKEN_KEY = "ocduet-token";
+  const RELAY_ROUTE_KEY = "ocduet-relay-route"; // { origin, d } — the always-on route
+  // write text only when it actually changed — identical textContent/style writes
+  // still dirty layout and are the #1 source of streaming jank
+  function setText(el, v) { if (el && el.textContent !== v) el.textContent = v; }
+  const hash = new URLSearchParams(location.hash.replace(/^#/, ""));
+  if (hash.get("t")) {
+    try { localStorage.setItem(TOKEN_KEY, hash.get("t")); } catch {}
+    history.replaceState(null, "", location.pathname);
+  }
+  let token = null;
+  try { token = localStorage.getItem(TOKEN_KEY); } catch {}
+
+  // ---------- state ----------
+  const state = {
+    instances: new Map(),   // instanceId -> { info, sessions[] }
+    selected: null,         // sessionID
+    selectedInstance: null, // instanceId
+    connected: false,
+    rpcSeq: 0,
+    rpcPending: new Map(),
+    refetchTimer: null,
+    listTimer: null,
+    busy: new Map(),
+    statuses: new Map(),
+    permissions: new Map(),
+    questions: new Map(),
+    modelChoices: new Map(),
+    levels: new Map(),
+    providers: new Map(),
+    providersLoading: new Set(),
+    lastActivity: new Map(),
+    filter: "",
+    loading: false,
+    loadVersion: 0,
+    everSelected: false,
+  };
+
+  // ---------- helpers ----------
+  function toast(text, ms = 2500) {
+    // swallow only the generic connection-state texts — actionable messages
+    // ("That opencode instance is offline — start X…", delete errors, …) must
+    // reach the user, otherwise taps look completely dead
+    const t = String(text);
+    if (t === "Your desktop is offline." || t.startsWith("Connection lost")) return;
+    els.toast.textContent = text;
+    els.toast.hidden = false;
+    clearTimeout(toast._t);
+    toast._t = setTimeout(() => { els.toast.hidden = true; }, ms);
+  }
+
+  function timeAgo(ts) {
+    if (!ts) return "";
+    const s = Math.max(0, (Date.now() - ts) / 1000);
+    if (s < 60) return "now";
+    if (s < 3600) return `${Math.floor(s / 60)}m`;
+    if (s < 86400) return `${Math.floor(s / 3600)}h`;
+    return `${Math.floor(s / 86400)}d`;
+  }
+
+  function esc(s) {
+    return String(s ?? "").replace(/[&<>"']/g, (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+  }
+
+  function renderText(text) {
+    const parts = String(text ?? "").split(/```/);
+    let html = "";
+    for (let i = 0; i < parts.length; i++) {
+      if (i % 2 === 1) {
+        const nl = parts[i].indexOf("\n");
+        const lang = nl > 0 ? parts[i].slice(0, nl).trim() : "";
+        const body = nl >= 0 ? parts[i].slice(nl + 1) : parts[i];
+        html += `<pre data-lang="${esc(lang)}">${esc(body)}</pre>`;
+      } else {
+        html += esc(parts[i]).replace(/`([^`\n]+)`/g, "<code>$1</code>")
+          .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
+      }
+    }
+    return html;
+  }
+
+  // ---------- websocket ----------
+  let ws = null;
+  let retryMs = 800;
+  let retryTimer = null;
+  let failingSince = null; // set while the LAN origin can't connect
+
+  // off-LAN fallback: if this page came from the desktop's LAN origin and it
+  // has been unreachable for a while, hop to the relay route (carrying the
+  // token in the hash — the relay origin then runs the normal pairing flow,
+  // words check included). sessionStorage guards against redirect loops.
+  function tryRelayFallback() {
+    try {
+      if (sessionStorage.getItem("ocduet-relay-hop")) return false;
+      const raw = localStorage.getItem(RELAY_ROUTE_KEY);
+      if (!raw) return false;
+      const route = JSON.parse(raw);
+      if (!route?.origin || route.origin === location.origin) return false;
+      sessionStorage.setItem("ocduet-relay-hop", "1");
+      location.replace(`${route.origin}/?d=${encodeURIComponent(route.d)}${token ? `#t=${encodeURIComponent(token)}` : ""}`);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  function setConn(mode, label) {
+    state.connected = mode === "on";
+    $("sync-dot").className = `status-dot ${mode}`;
+    $("sync-note").textContent =
+      mode === "on" ? "Connected" :
+      mode === "wait" ? "Connecting…" :
+      mode === "recon" ? "Reconnecting" :
+      (label || "Disconnected");
+    updateChrome();
+    renderActivity();
+  }
+
+  function killSocket() {
+    if (!ws) return;
+    const old = ws;
+    ws = null;
+    old.onclose = null;
+    try { old.close(); } catch {}
+  }
+
+  let lastMsgAt = Date.now();
+  let sec = null; // {pd, dp, sendN, recvN, pendingEcho} — the encrypted channel
+
+  // ---------- e2ee (WebCrypto; mirrors src/e2ee.js on the daemon) ----------
+  const te = new TextEncoder();
+  const b64 = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf)));
+  const unb64 = (s) => Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
+  const PD_TAG = Uint8Array.from([0x50, 0x32, 0x44, 0]); // "P2D\0" phone->daemon
+  const DP_TAG = Uint8Array.from([0x44, 0x32, 0x50, 0]); // "D2P\0" daemon->phone
+  const hs1Msg = (phonePub, eph, tok, ts) => `ocduet-hs1|${phonePub}|${eph}|${tok}|${ts}`;
+  const hs2Msg = (phonePub, phoneEph, daemonEph) => `ocduet-hs2|${phonePub}|${phoneEph}|${daemonEph}`;
+  const hsInfo = (phonePub, phoneEph, daemonEph) => `ocduet-e2ee-v1|${phonePub}|${phoneEph}|${daemonEph}`;
+  async function sha256hex(str) {
+    return [...new Uint8Array(await crypto.subtle.digest("SHA-256", te.encode(str)))]
+      .map((b) => b.toString(16).padStart(2, "0")).join("");
+  }
+  function ivFor(tag, n) {
+    const iv = new Uint8Array(12);
+    iv.set(tag, 0);
+    new DataView(iv.buffer).setBigUint64(4, BigInt(n));
+    return iv;
+  }
+  async function encFrame(key, tag, n, obj) {
+    return b64(await crypto.subtle.encrypt({ name: "AES-GCM", iv: ivFor(tag, n) }, key, te.encode(JSON.stringify(obj))));
+  }
+  async function decFrame(key, tag, n, ctB64) {
+    const pt = await crypto.subtle.decrypt({ name: "AES-GCM", iv: ivFor(tag, n) }, key, unb64(ctB64));
+    return JSON.parse(new TextDecoder().decode(pt));
+  }
+  function openIdb() {
+    return new Promise((resolve, reject) => {
+      const r = indexedDB.open("ocduet-keys", 1);
+      r.onupgradeneeded = () => r.result.createObjectStore("keys");
+      r.onsuccess = () => resolve(r.result);
+      r.onerror = () => reject(r.error);
+    });
+  }
+  async function idbGet(key) {
+    const db = await openIdb();
+    return new Promise((resolve, reject) => {
+      const rq = db.transaction("keys", "readonly").objectStore("keys").get(key);
+      rq.onsuccess = () => resolve(rq.result || null);
+      rq.onerror = () => reject(rq.error);
+    });
+  }
+  let identityPromise = null;
+  function ensureIdentity() {
+    identityPromise ??= (async () => {
+      try {
+        const rec = await idbGet(location.origin);
+        if (!rec?.priv || !rec?.daemonPub || !rec?.phoneId || !rec?.phonePubB64) return null;
+        return rec;
+      } catch {
+        return null;
+      }
+    })();
+    return identityPromise;
+  }
+  async function startHandshake() {
+    const rec = await ensureIdentity();
+    if (!rec) {
+      if (token) location.href = `/pair#t=${encodeURIComponent(token)}`;
+      else setConn("off", "Not paired");
+      return false;
+    }
+    const eph = await crypto.subtle.generateKey({ name: "X25519" }, false, ["deriveBits"]);
+    const ephB64 = b64(await crypto.subtle.exportKey("raw", eph.publicKey));
+    const ts = Date.now();
+    const sig = await crypto.subtle.sign({ name: "Ed25519" }, rec.priv, te.encode(hs1Msg(rec.phonePubB64, ephB64, token, ts)));
+    sec = { eph, rec, ephB64, pendingEcho: null, established: false };
+    ws.send(JSON.stringify({ t: "hs1", phonePub: rec.phonePubB64, eph: ephB64, token, ts, sig: b64(sig) }));
+    return true;
+  }
+  async function finishHandshake(hs2) {
+    const { rec, eph, ephB64 } = sec;
+    const daemonPub = await crypto.subtle.importKey("raw", unb64(rec.daemonPub), { name: "Ed25519" }, false, ["verify"]);
+    const okSig = await crypto.subtle.verify({ name: "Ed25519" }, daemonPub, unb64(hs2.sig), te.encode(hs2Msg(rec.phonePubB64, ephB64, hs2.eph)));
+    if (!okSig || unb64(hs2.eph).length !== 32) { try { ws.close(4003, "daemon signature failed"); } catch {} return; }
+    const shared = await crypto.subtle.deriveBits({ name: "X25519", public: await crypto.subtle.importKey("raw", unb64(hs2.eph), { name: "X25519" }, false, []) }, eph.privateKey, 256);
+    const hkdf = await crypto.subtle.importKey("raw", shared, "HKDF", false, ["deriveBits"]);
+    const okm = new Uint8Array(await crypto.subtle.deriveBits({ name: "HKDF", hash: "SHA-256", salt: te.encode("ocduet-e2ee-v1"), info: te.encode(hsInfo(rec.phonePubB64, ephB64, hs2.eph)) }, hkdf, 512));
+    const imp = (raw) => crypto.subtle.importKey("raw", raw, { name: "AES-GCM" }, false, ["encrypt", "decrypt"]);
+    sec = {
+      ...sec,
+      pd: await imp(okm.subarray(0, 32)),
+      dp: await imp(okm.subarray(32, 64)),
+      sendN: 1, recvN: 0,
+      pendingEcho: await sha256hex(hs2.eph),
+    };
+    const ct = await encFrame(sec.pd, PD_TAG, 0, { t: "hs3", ts: Date.now(), echo: sec.pendingEcho });
+    ws.send(JSON.stringify({ t: "sec", n: 0, ct }));
+  }
+
+  function connect() {
+    clearTimeout(retryTimer);
+    killSocket();
+    sec = null;
+    if (!token) {
+      setConn("off", "Not paired");
+      return;
+    }
+    const proto = location.protocol === "https:" ? "wss" : "ws";
+    setConn("wait", "Connecting");
+    ws = new WebSocket(`${proto}://${location.host}/ws?e2ee=1`);
+
+    ws.onopen = () => { retryMs = 800; failingSince = null; startHandshake(); };
+    ws.onmessage = (ev) => {
+      lastMsgAt = Date.now();
+      let msg;
+      try { msg = JSON.parse(ev.data); } catch { return; }
+      if (msg.t === "hs2") return void finishHandshake(msg);
+      if (msg.t !== "sec" || !sec) return;
+      (async () => {
+        try {
+          if (!sec.established) {
+            if (msg.n !== 0) throw new Error("bad hs3 counter");
+            const m = await decFrame(sec.dp, DP_TAG, 0, msg.ct);
+            if (m?.t !== "hs4" || !m.ok) throw new Error("bad hs4");
+            sec.established = true;
+            sec.recvN = 1;
+            retryMs = 800;
+            failingSince = null;
+            setConn("on", "Connected");
+            return;
+          }
+          if (msg.n !== sec.recvN) throw new Error("replay/out-of-order");
+          sec.recvN++;
+          dispatch(await decFrame(sec.dp, DP_TAG, msg.n, msg.ct));
+        } catch (err) {
+          try { ws && ws.close(4002, "bad frame"); } catch {}
+        }
+      })();
+    };
+    ws.onclose = (ev) => {
+      if (ws !== null) {
+        ws = null;
+        sec = null;
+        state.statuses.clear();
+        if (ev?.code === 4003) { setConn("off", "Not paired on this daemon — re-scan the QR"); return; }
+        if (ev?.code === 4001) { setConn("off", "Handshake failed — reload or re-pair"); return; }
+        setConn("recon", "Reconnecting");
+        for (const [id, pending] of state.rpcPending) {
+          if (pending.survive) continue;
+          clearTimeout(pending.timer);
+          state.rpcPending.delete(id);
+          pending.reject(new Error("Connection lost. Reconnecting to your desktop…"));
+        }
+        clearTimeout(retryTimer);
+        if (!failingSince) failingSince = Date.now();
+        // ~15s of continuous failure on the LAN origin → try the relay
+        if (Date.now() - failingSince > 15_000 && tryRelayFallback()) return;
+        retryTimer = setTimeout(connect, retryMs);
+        retryMs = Math.min(retryMs * 1.7, 10000);
+      }
+    };
+    ws.onerror = () => { try { ws && ws.close(); } catch {} };
+  }
+
+  function dispatch(msg) {
+    if (msg.t === "hello") return onHello(msg);
+    if (msg.t === "instances") return onInstances(msg.instances);
+    if (msg.t === "rpcResult") return onRpcResult(msg);
+    if (msg.t === "event") return onEvent(msg.event, msg.instanceId);
+    if (msg.t === "clients") return;
+  }
+
+  let hiddenAt = 0;
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) { hiddenAt = Date.now(); return; }
+    const away = hiddenAt ? Date.now() - hiddenAt : 0;
+    if (!ws || ws.readyState > 1 || Date.now() - lastMsgAt > 90_000) connect();
+    // the page may have been frozen with the socket alive — missed events never replay
+    if (away > 10_000 && state.connected && state.selected && state.selectedInstance) {
+      loadMessages(state.selectedInstance, state.selected, false);
+    }
+  });
+
+  let sendChain = Promise.resolve();
+  function send(obj) {
+    if (!ws || ws.readyState !== 1 || !sec?.established) return;
+    const n = sec.sendN++;
+    const s = sec;
+    sendChain = sendChain.then(async () => {
+      if (sec !== s || !ws || ws.readyState !== 1) return; // stale (reconnected) frame
+      const ct = await encFrame(s.pd, PD_TAG, n, obj);
+      if (sec === s && ws && ws.readyState === 1) ws.send(JSON.stringify({ t: "sec", n, ct }));
+    }).catch(() => {});
+  }
+
+  function rpc(method, args = {}, instanceId = null) {
+    return new Promise((resolve, reject) => {
+      if (!state.connected) return reject(new Error("Your desktop is offline."));
+      const id = String(++state.rpcSeq);
+      const timer = setTimeout(() => {
+        if (state.rpcPending.has(id)) {
+          state.rpcPending.delete(id);
+          reject(new Error("rpc timeout"));
+        }
+      }, method === "session.prompt" || method === "session.compact" ? 30 * 60 * 1000 : 15000);
+      state.rpcPending.set(id, { resolve, reject, timer, survive: method === "session.prompt" || method === "session.compact" });
+      send({ t: "rpc", id, instanceId, method, args });
+    });
+  }
+
+  function onRpcResult(msg) {
+    const p = state.rpcPending.get(String(msg.id));
+    if (!p) return;
+    clearTimeout(p.timer);
+    state.rpcPending.delete(String(msg.id));
+    if (msg.ok) p.resolve(msg.result);
+    else p.reject(new Error(msg.error || "rpc failed"));
+  }
+
+  // ---------- data flow ----------
+  function flattenSessions() {
+    const out = [];
+    for (const [instId, inst] of state.instances) {
+      for (const s of inst.sessions || []) {
+        out.push({ instId, inst, session: s });
+      }
+    }
+    return out;
+  }
+
+  function sessionDirOf(instId, sid) {
+    const inst = state.instances.get(instId);
+    const s = inst?.sessions?.find((x) => sessionID(x) === sid);
+    return s?.directory || inst?.directory;
+  }
+
+  function sessionLabel(inst, s) {
+    const base = s?.directory?.split("/").filter(Boolean).pop();
+    return base || projectName(inst);
+  }
+
+  function dirArg(instId, sid) {
+    const d = sessionDirOf(instId, sid);
+    return d ? { directory: d } : {};
+  }
+
+  function onHello(msg) {
+    // remember the relay route — enables off-LAN fallback without a new QR
+    if (msg.relay?.url && msg.relay.desktopId) {
+      try {
+        const origin = new URL(msg.relay.url).origin;
+        const route = { origin, d: String(msg.relay.desktopId) };
+        if (localStorage.getItem(RELAY_ROUTE_KEY) !== JSON.stringify(route)) {
+          localStorage.setItem(RELAY_ROUTE_KEY, JSON.stringify(route));
+        }
+      } catch {}
+    }
+    onInstances(msg.instances);
+    scheduleListRefetch();
+    refreshPermissions();
+    refreshQuestions();
+    for (const instId of state.instances.keys()) loadLevel(instId);
+    // events missed while disconnected are gone for good — re-pull the open timeline
+    if (state.selected && state.selectedInstance) loadMessages(state.selectedInstance, state.selected, false);
+    // prompts/compacts very likely reached the server before the socket dropped —
+    // resolve survivors so their follow-up refresh shows the truth instead of refilling the input
+    for (const [id, pending] of state.rpcPending) {
+      if (!pending.survive) continue;
+      state.rpcPending.delete(id);
+      clearTimeout(pending.timer);
+      pending.resolve(undefined);
+    }
+  }
+
+  function onInstances(list) {
+    const next = new Map();
+    for (const inst of list || []) next.set(inst.id, inst);
+    state.instances = next;
+    if (!state.selected && !state.everSelected) {
+      const latest = flattenSessions().sort(
+        (a, b) => sessionTime(b.instId, b.session) - sessionTime(a.instId, a.session))[0];
+      if (latest) selectSession(latest.instId, latest.session.id ?? latest.session.sessionID);
+    }
+    renderSessions();
+    updateChrome();
+    renderActivity();
+  }
+
+  function onEvent(event, instanceId) {
+    if (!event || !event.type) return;
+    const p = event.properties ?? {};
+    const sid = p.sessionID ?? p.session_id ?? p.info?.sessionID ?? p.message?.sessionID ?? p.part?.sessionID;
+    const key = activityKey(instanceId, sid);
+    if (sid && instanceId && (event.type.startsWith("message.") || event.type === "session.idle" || event.type === "session.status")) {
+      state.lastActivity.set(key, Date.now());
+    }
+    if (event.type.startsWith("session.")) scheduleListRefetch();
+    if (event.type === "session.deleted") {
+      const goneID = p.info?.id ?? p.sessionID ?? p.id;
+      if (goneID) dropSession(instanceId, goneID);
+    }
+    if (event.type === "session.status" && sid) {
+      const status = p.status?.type ?? p.status;
+      state.statuses.set(key, status);
+      setBusy(instanceId, sid, status === "busy" || status === "retry", status === "retry" ? "Retrying" : "Working");
+    }
+    if ((event.type === "session.idle" || event.type === "session.error") && sid) {
+      state.statuses.set(key, "idle");
+      setBusy(instanceId, sid, false);
+      if (event.type === "session.error") toast(p.error?.data?.message || p.error?.message || "The agent encountered an error.");
+      if (sid === state.selected && instanceId === state.selectedInstance) scheduleRefetch();
+    }
+    if (event.type.startsWith("message.")) {
+      if (sid === state.selected && instanceId === state.selectedInstance) scheduleRefetch();
+      if (sid && instanceId) {
+        const info = p.info ?? p.message;
+        if (!state.statuses.has(key)) {
+          if (info?.role === "user" || (info?.role === "assistant" && !info.time?.completed)) setBusy(instanceId, sid, true);
+          if (info?.role === "assistant" && (info.error || (info.time?.completed && info.finish !== "tool-calls"))) setBusy(instanceId, sid, false);
+        }
+        const part = p.part;
+        if (state.busy.has(key) && part) {
+          const busy = state.busy.get(key);
+          busy.label = part.type === "tool" && ["pending", "running"].includes(part.state?.status)
+            ? `Running ${part.tool || "tool"}` : part.type === "reasoning" ? "Thinking" : "Working";
+        }
+      }
+    }
+    if (event.type === "permission.updated" || event.type === "permission.asked" || event.type === "permission.v2.asked") {
+      const pid = p.id ?? p.requestID;
+      if (sid && pid && state.levels.get(instanceId) !== "auto") {
+        let m = state.permissions.get(key);
+        if (!m) { m = new Map(); state.permissions.set(key, m); }
+        m.set(pid, { id: pid, sessionID: sid, type: p.type ?? p.permission ?? p.action ?? "tool", pattern: p.pattern ?? p.patterns ?? p.resources, title: p.title });
+        if (key !== activityKey(state.selectedInstance, state.selected)) toast("Another session is waiting for permission");
+      }
+    }
+    if (event.type === "permission.replied" || event.type === "permission.v2.replied") {
+      removePermission(instanceId, p.sessionID, p.permissionID ?? p.requestID);
+    }
+    if (event.type === "question.asked" || event.type === "question.v2.asked") {
+      const qid = p.id ?? p.requestID;
+      if (sid && qid) {
+        const key = activityKey(instanceId, sid);
+        if (!state.questions.has(key)) state.questions.set(key, []);
+        const list = state.questions.get(key);
+        if (!list.some((q) => q.id === String(qid))) {
+          list.push({ id: String(qid), sessionID: sid, questions: Array.isArray(p.questions) ? p.questions : [], time: Date.now() });
+          if (key !== activityKey(state.selectedInstance, state.selected)) toast("Another session is asking a question");
+        }
+      }
+    }
+    if (event.type === "question.replied" || event.type === "question.rejected"
+      || event.type === "question.v2.replied" || event.type === "question.v2.rejected") {
+      removeQuestion(instanceId, p.sessionID, p.requestID ?? p.id);
+    }
+    // targeted rendering only — a full sidebar/card pass per streaming event
+    // is what froze typing and restarted the CSS dot animation mid-pulse
+    if (sid && (event.type.startsWith("message.") || event.type === "session.status"
+      || event.type === "session.idle" || event.type === "session.error")) {
+      patchSidebarRow(instanceId, sid);
+      if (key === activityKey(state.selectedInstance, state.selected)) renderActivity();
+    }
+    if (event.type === "permission.updated" || event.type === "permission.asked" || event.type === "permission.v2.asked"
+      || event.type === "permission.replied" || event.type === "permission.v2.replied") {
+      if (sid) patchSidebarRow(instanceId, sid);
+      renderPermissions();
+    }
+    if (event.type.startsWith("question.")) renderQuestions();
+  }
+
+  // remove a session locally (deleted here or elsewhere) and, if it was open,
+  // hand selection back to the auto-picker so the top session loads next
+  function dropSession(instanceId, sid) {
+    const inst = state.instances.get(instanceId);
+    if (inst?.sessions) inst.sessions = inst.sessions.filter((s) => sessionID(s) !== sid);
+    const key = activityKey(instanceId, sid);
+    state.busy.delete(key);
+    state.permissions.delete(key);
+    state.lastActivity.delete(key);
+    try { localStorage.removeItem(`ocduet-draft:${instanceId}:${sid}`); } catch {}
+    if (state.selected === sid && state.selectedInstance === instanceId) {
+      state.selected = null;
+      state.selectedInstance = null;
+      state.everSelected = false;
+      state.messages = new Map();
+      state.loading = false;
+      renderTimeline();
+      renderPermissions();
+      renderQuestions();
+    }
+    renderSessions();
+    updateChrome();
+  }
+
+  function scheduleListRefetch() {
+    clearTimeout(state.listTimer);
+    state.listTimer = setTimeout(async () => {
+      try {
+        const list = await rpc("instances.list");
+        onInstances(list);
+      } catch {}
+    }, 250);
+  }
+
+  function scheduleRefetch() {
+    clearTimeout(state.refetchTimer);
+    state.refetchTimer = setTimeout(() => {
+      if (state.selected && state.selectedInstance) loadMessages(state.selectedInstance, state.selected, false);
+    }, 180);
+  }
+
+  async function loadMessages(instanceId, sessionID, showSpinner) {
+    const version = ++state.loadVersion;
+    try {
+      const msgs = await rpc("session.messages", { id: sessionID, ...dirArg(instanceId, sessionID) }, instanceId);
+      if (state.selected !== sessionID || state.selectedInstance !== instanceId || version !== state.loadVersion) return;
+      const map = new Map();
+      for (const m of msgs || []) map.set(m.id ?? m.info?.id, m);
+      state.messages = map;
+      state.loading = false;
+      const key = activityKey(instanceId, sessionID);
+      if (!state.statuses.has(key)) {
+        const last = msgs?.[msgs.length - 1];
+        const info = last?.info ?? last;
+        const running = info && !info.error && (info.role === "user" ||
+          (info.role === "assistant" && (!info.time?.completed || info.finish === "tool-calls")));
+        setBusy(instanceId, sessionID, !!running);
+      }
+      renderTimeline();
+      renderSessions();
+      updateChrome();
+      renderActivity();
+    } catch (err) {
+      if (state.selected === sessionID && state.selectedInstance === instanceId && version === state.loadVersion) {
+        state.loading = false;
+        if (showSpinner) toast(String(err.message || err));
+        updateChrome();
+      }
+    }
+  }
+
+  // ---------- rendering ----------
+  function sessionID(s) { return s.sessionID ?? s.id; }
+  function sessionTime(instId, s) {
+    return Math.max(s.time?.updated ?? s.time?.created ?? 0, state.lastActivity.get(activityKey(instId, sessionID(s))) ?? 0);
+  }
+  function sessionTitle(s) { return s.title || `${String(sessionID(s) || "Session").slice(0, 8)}…`; }
+  function projectName(inst) { return inst?.project?.name || inst?.directory?.split("/").pop() || "opencode"; }
+  function activityKey(instanceId, sid) { return `${instanceId}:${sid}`; }
+  function setBusy(instanceId, sid, busy, label = null) {
+    const key = activityKey(instanceId, sid);
+    if (busy) {
+      const previous = state.busy.get(key);
+      state.busy.set(key, { since: previous?.since ?? Date.now(), label: label ?? previous?.label ?? "Working" });
+    } else state.busy.delete(key);
+  }
+
+  function removePermission(instanceId, sessionID, permissionID) {
+    if (!sessionID || !permissionID) return;
+    const key = activityKey(instanceId, sessionID);
+    const m = state.permissions.get(key);
+    if (!m) return;
+    m.delete(permissionID);
+    if (!m.size) state.permissions.delete(key);
+  }
+
+  function renderPermissions() {
+    const box = els.permissions;
+    if (!box) return;
+    const before = box.querySelectorAll(".permission").length;
+    const key = activityKey(state.selectedInstance, state.selected);
+    const list = [...(state.permissions.get(key)?.values() ?? [])];
+    box.innerHTML = "";
+    box.hidden = list.length === 0;
+    for (const perm of list) {
+      const div = document.createElement("div");
+      div.className = "permission";
+      const pattern = Array.isArray(perm.pattern) ? perm.pattern.join(" ") : perm.pattern;
+      div.innerHTML = `
+        <div class="permission-head"><svg><use href="#i-shield"/></svg>Permission needed</div>
+        <div class="permission-title">${esc(perm.title || perm.type)}</div>
+        ${pattern ? `<span class="permission-pattern" title="${esc(String(pattern))}">${esc(String(pattern))}</span>` : ""}
+        <div class="permission-actions">
+          <button class="allow" data-response="once">Allow</button>
+          <button data-response="always">Always</button>
+          <button class="deny" data-response="reject">Deny</button>
+        </div>`;
+      for (const btn of div.querySelectorAll(".permission-actions button")) {
+        btn.onclick = () => respondPermission(state.selectedInstance, state.selected, perm.id, btn.dataset.response, btn);
+      }
+      box.appendChild(div);
+    }
+    if (list.length > before) {
+      const last = box.lastElementChild;
+      if (last) last.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }
+
+  async function respondPermission(instanceId, sessionID, permissionID, response, btn) {
+    if (!instanceId || !sessionID || !state.connected) return;
+    const actions = btn.closest(".permission-actions");
+    for (const b of actions.querySelectorAll("button")) b.disabled = true;
+    try {
+      await rpc("permission.respond", { sessionID, permissionID, response, ...dirArg(instanceId, sessionID) }, instanceId);
+      removePermission(instanceId, sessionID, permissionID);
+    } catch (err) {
+      const msg = String(err?.message || err);
+      toast(msg.includes("not found") ? "Permission already resolved" : msg);
+      if (msg.includes("not found")) removePermission(instanceId, sessionID, permissionID);
+      else for (const b of actions.querySelectorAll("button")) b.disabled = false;
+    }
+    renderPermissions();
+    renderSessions();
+  }
+
+  async function refreshPermissions() {
+    if (!state.connected) return;
+    const live = new Map();
+    const dir = state.selected && state.instances.get(state.selectedInstance)
+      ? dirArg(state.selectedInstance, state.selected) : {};
+    await Promise.all([...state.instances.keys()].map(async (instId) => {
+      try {
+        const list = await rpc("permission.list", dir, instId);
+        for (const req of list || []) {
+          const sid = req?.sessionID;
+          const pid = req?.id ?? req?.permissionID;
+          if (!sid || !pid) continue;
+          const key = activityKey(instId, sid);
+          if (!live.has(key)) live.set(key, new Map());
+          live.get(key).set(pid, { id: pid, sessionID: sid, type: req.type ?? req.permission ?? req.action ?? "tool", pattern: req.pattern ?? req.patterns ?? req.resources, title: req.title });
+        }
+      } catch {}
+    }));
+    state.permissions = live;
+    renderPermissions();
+    renderSessions();
+  }
+
+  // ---------- questions ----------
+  function removeQuestion(instanceId, sessionID, questionID) {
+    if (!instanceId || !sessionID || !questionID) return;
+    const key = activityKey(instanceId, sessionID);
+    const list = state.questions.get(key);
+    if (!list) return;
+    const next = list.filter((q) => q.id !== String(questionID));
+    if (next.length) state.questions.set(key, next);
+    else state.questions.delete(key);
+    renderQuestions();
+  }
+
+  function renderQuestions() {
+    const box = els.questions;
+    if (!box) return;
+    const before = box.querySelectorAll(".question").length;
+    const key = activityKey(state.selectedInstance, state.selected);
+    const list = state.questions.get(key) ?? [];
+    box.innerHTML = "";
+    box.hidden = list.length === 0;
+    for (const req of list) {
+      const card = document.createElement("div");
+      card.className = "permission question";
+      const qs = req.questions?.length ? req.questions : [{ question: "The question details didn't load — type your answer below.", header: "Question", options: [] }];
+      const immediate = qs.length === 1 && !qs[0].multiple;
+      let html = `<div class="permission-head"><svg><use href="#i-bolt"/></svg>${esc(qs[0]?.header || "Question")}</div>`;
+      for (const q of qs) {
+        if (q.question) html += `<div class="permission-title">${esc(q.question)}</div>`;
+        html += `<div class="question-options">`;
+        for (const [i, opt] of (q.options ?? []).entries()) {
+          html += `<button class="question-option" data-q="${qs.indexOf(q)}" data-i="${i}"><span>${esc(opt.label)}</span>${opt.description ? `<small>${esc(opt.description)}</small>` : ""}</button>`;
+        }
+        html += `</div>`;
+        if (q.custom !== false) {
+          html += `<div class="question-custom"><button class="question-custom-btn">Type your own answer</button><div class="question-custom-row" hidden><input type="text" placeholder="Your answer" maxlength="500"><button class="allow">Send</button></div></div>`;
+        }
+      }
+      if (!immediate) html += `<div class="permission-actions"><button class="allow question-submit" disabled>Answer</button></div>`;
+      card.innerHTML = html;
+
+      const selections = new Map();
+      for (const btn of card.querySelectorAll(".question-option")) {
+        const qi = Number(btn.dataset.q);
+        const oi = Number(btn.dataset.i);
+        const multi = !!qs[qi]?.multiple;
+        btn.onclick = () => {
+          if (immediate) { respondQuestion(req, [[qs[0].options[oi].label]], card); return; }
+          const cur = selections.get(qi) ?? new Set();
+          if (multi) { cur.has(oi) ? cur.delete(oi) : cur.add(oi); }
+          else { cur.clear(); cur.add(oi); }
+          selections.set(qi, cur);
+          for (const b of card.querySelectorAll(`.question-option[data-q="${qi}"]`)) {
+            b.classList.toggle("selected", (selections.get(qi) ?? new Set()).has(Number(b.dataset.i)));
+          }
+          updateSubmit();
+        };
+      }
+      for (const wrap of card.querySelectorAll(".question-custom")) {
+        const qi = [...card.querySelectorAll(".question-custom")].indexOf(wrap);
+        const toggle = wrap.querySelector(".question-custom-btn");
+        const row = wrap.querySelector(".question-custom-row");
+        const input = wrap.querySelector("input");
+        const send = wrap.querySelector(".question-custom-row .allow");
+        if (toggle) toggle.onclick = () => {
+          if (toggle.hidden) return;
+          toggle.hidden = true;
+          row.hidden = false;
+          input.focus();
+        };
+        if (send) send.onclick = () => {
+          const v = input.value.trim();
+          if (!v) return;
+          const answers = qs.map((q, idx) => {
+            if (idx === qi) return [v];
+            const cur = selections.get(idx);
+            return cur?.size ? [...cur].map((i) => q.options[i]?.label).filter(Boolean) : [];
+          });
+          if (answers.some((a, idx) => !a.length && qs[idx].custom === false && !(idx === qi))) {
+            toast("Answer every question first");
+            return;
+          }
+          respondQuestion(req, answers, card);
+        };
+        if (input) input.onkeydown = (ev) => { if (ev.key === "Enter") { ev.preventDefault(); send?.click(); } };
+      }
+      const submitBtn = card.querySelector(".question-submit");
+      const updateSubmit = () => {
+        if (!submitBtn) return;
+        const ok = qs.every((q, idx) => (selections.get(idx))?.size || q.custom !== false);
+        submitBtn.disabled = !ok;
+      };
+      if (submitBtn) submitBtn.onclick = () => {
+        const answers = qs.map((q, idx) => {
+          const typed = card.querySelectorAll(".question-custom")[idx]?.querySelector("input")?.value?.trim();
+          if (typed) return [typed];
+          const cur = selections.get(idx);
+          return cur?.size ? [...cur].map((i) => q.options[i]?.label).filter(Boolean) : [];
+        });
+        if (answers.some((a) => !a.length)) { toast("Answer every question first"); return; }
+        respondQuestion(req, answers, card);
+      };
+      box.appendChild(card);
+    }
+    if (list.length > before) {
+      const last = box.lastElementChild;
+      if (last) last.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }
+
+  async function respondQuestion(req, answers, card) {
+    const instanceId = state.selectedInstance;
+    if (!instanceId || !state.connected) return;
+    card.querySelectorAll("button").forEach((b) => (b.disabled = true));
+    try {
+      await rpc("question.respond", { requestID: req.id, answers, ...dirArg(instanceId, req.sessionID) }, instanceId);
+      removeQuestion(instanceId, req.sessionID, req.id);
+    } catch (err) {
+      const msg = String(err?.message || err);
+      toast(msg.includes("not found") ? "Question already answered" : msg);
+      card.querySelectorAll("button").forEach((b) => (b.disabled = false));
+    }
+  }
+
+  async function refreshQuestions() {
+    if (!state.connected) return;
+    const live = new Map();
+    const dir = state.selected && state.instances.get(state.selectedInstance)
+      ? dirArg(state.selectedInstance, state.selected) : {};
+    await Promise.all([...state.instances.keys()].map(async (instId) => {
+      try {
+        const list = await rpc("question.list", dir, instId);
+        for (const req of list || []) {
+          const sid = req?.sessionID;
+          const qid = req?.id;
+          if (!sid || !qid || !Array.isArray(req.questions)) continue;
+          const key = activityKey(instId, sid);
+          if (!live.has(key)) live.set(key, []);
+          if (!live.get(key).some((q) => q.id === String(qid))) live.get(key).push({ id: String(qid), sessionID: sid, questions: req.questions, time: req.time });
+        }
+      } catch {}
+    }));
+    state.questions = live;
+    renderQuestions();
+  }
+
+  // ---------- controls (model / variant / permission level) ----------
+  function currentModel() {
+    const key = state.selectedInstance && state.selected ? activityKey(state.selectedInstance, state.selected) : null;
+    const choice = key ? state.modelChoices.get(key) : null;
+    if (choice) return choice;
+    const cur = flattenSessions().find(({ instId, session }) => instId === state.selectedInstance && sessionID(session) === state.selected);
+    const m = cur?.session?.model;
+    if (m?.providerID && (m.id ?? m.modelID)) return { providerID: m.providerID, modelID: m.id ?? m.modelID, variant: m.variant };
+    return null;
+  }
+
+  function fmtTokens(n) {
+    return n >= 1000 ? `${Math.round(n / 1000)}k` : String(n);
+  }
+
+  function contextUsage() {
+    const msgs = [...(state.messages?.values?.() || [])];
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const info = msgs[i].info ?? msgs[i];
+      if (info.role === "assistant" && info.time?.completed) {
+        const t = info.tokens || {};
+        return { used: (t.input || 0) + (t.cache?.read || 0) + (t.cache?.write || 0) + (t.reasoning || 0) + (t.output || 0) };
+      }
+    }
+    return null;
+  }
+
+  function modelLimit() {
+    const m = currentModel();
+    if (!m || !state.selectedInstance) return null;
+    const provider = (state.providers.get(providersKey(state.selectedInstance)) || []).find((p) => p.id === m.providerID);
+    return provider?.models?.find((x) => x.id === m.modelID)?.context || null;
+  }
+
+  const RING_C = 2 * Math.PI * 8;
+
+  function renderControls() {
+    const m = currentModel();
+    const enabled = state.connected && !!state.selectedInstance;
+    setText(els.modelPillLabel, m ? (m.modelID || "").split("/").pop() : "Model");
+    if (els.modelPill.disabled !== !enabled) els.modelPill.disabled = !enabled;
+    if (els.variantPill.hidden !== !m) els.variantPill.hidden = !m;
+    if (els.variantPill.disabled !== !enabled) els.variantPill.disabled = !enabled;
+    setText(els.variantPillLabel, m ? (m.variant && m.variant !== "default" ? m.variant.charAt(0).toUpperCase() + m.variant.slice(1) : "Default") : "Variant");
+    const usage = contextUsage();
+    const limit = modelLimit();
+    if (els.contextPill.hidden !== !m) els.contextPill.hidden = !m;
+    if (usage && usage.used > 0) {
+      const pct = limit ? Math.min(1, usage.used / limit) : null;
+      setText(els.contextLabel, fmtTokens(usage.used));
+      els.contextPill.title = limit ? `Context: ${usage.used.toLocaleString()} of ${limit.toLocaleString()} tokens (${Math.round(pct * 100)}%)` : `Context: ${usage.used.toLocaleString()} tokens (model limit unknown)`;
+      els.contextPill.classList.toggle("warn", pct !== null && pct > 0.75);
+      els.contextPill.classList.toggle("full", pct !== null && pct > 0.9);
+      const display = pct === null ? "none" : "";
+      if (els.contextRing.style.display !== display) els.contextRing.style.display = display;
+      const dash = pct === null ? String(RING_C) : String(RING_C * (1 - pct));
+      if (els.contextRing.style.strokeDashoffset !== dash) els.contextRing.style.strokeDashoffset = dash;
+    } else {
+      setText(els.contextLabel, "—");
+      els.contextPill.title = "";
+      els.contextPill.classList.remove("warn", "full");
+      els.contextRing.style.display = "none";
+      els.contextRing.style.strokeDashoffset = String(RING_C);
+    }
+  }
+
+  function providersKey(instanceId) {
+    return instanceId + ":" + (sessionDirOf(instanceId, state.selected) || "");
+  }
+
+  async function ensureProviders(instanceId) {
+    if (!instanceId) return;
+    const key = providersKey(instanceId);
+    if (state.providers.has(key) || state.providersLoading.has(key)) return;
+    state.providersLoading.add(key);
+    try {
+      const dir = sessionDirOf(instanceId, state.selected);
+      state.providers.set(key, await rpc("provider.list", dir ? { directory: dir } : {}, instanceId) || []);
+    } catch {
+      state.providers.delete(key);
+    } finally {
+      state.providersLoading.delete(key);
+    }
+  }
+
+  async function loadLevel(instanceId) {
+    if (!instanceId) return;
+    try {
+      state.levels.set(instanceId, await rpc("permission.level", {}, instanceId));
+    } catch {}
+    renderControls();
+  }
+
+  function closeModal() {
+    els.modalRoot.hidden = true;
+    els.modalRoot.innerHTML = "";
+  }
+
+  function openModal(build) {
+    els.modalRoot.innerHTML = "";
+    const backdrop = document.createElement("div");
+    backdrop.className = "modal-backdrop";
+    const modal = document.createElement("div");
+    modal.className = "modal";
+    modal.setAttribute("role", "dialog");
+    backdrop.appendChild(modal);
+    els.modalRoot.appendChild(backdrop);
+    els.modalRoot.hidden = false;
+    backdrop.onmousedown = (e) => { if (e.target === backdrop) closeModal(); };
+    build(modal, closeModal);
+    return modal;
+  }
+
+  function modalHead(modal, title, close) {
+    const head = document.createElement("div");
+    head.className = "modal-head";
+    head.innerHTML = `<div class="modal-title">${esc(title)}</div>`;
+    const btn = document.createElement("button");
+    btn.className = "icon-button";
+    btn.setAttribute("aria-label", "Close");
+    btn.innerHTML = `<svg><use href="#i-close"/></svg>`;
+    btn.onclick = close;
+    head.appendChild(btn);
+    modal.appendChild(head);
+  }
+
+  function optionRow({ title, sub, active, icon, onclick }) {
+    const row = document.createElement("button");
+    row.className = "modal-option" + (active ? " active" : "");
+    row.innerHTML = `${icon ? `<svg><use href="${icon}"/></svg>` : ""}
+      <span class="option-body"><span class="option-title">${esc(title)}</span>${sub ? `<span class="sub">${esc(sub)}</span>` : ""}</span>
+      ${active ? `<svg class="check"><use href="#i-check"/></svg>` : ""}`;
+    row.onclick = onclick;
+    return row;
+  }
+
+  function openModelModal() {
+    const instanceId = state.selectedInstance;
+    if (!instanceId) return;
+    let renderList = () => {};
+    ensureProviders(instanceId).then(() => { if (!els.modalRoot.hidden) renderList(); });
+    let filter = "";
+    openModal((modal, close) => {
+      modalHead(modal, "Model", close);
+      const search = document.createElement("input");
+      search.type = "search";
+      search.placeholder = "Search models…";
+      search.className = "modal-search";
+      search.autocomplete = "off";
+      search.addEventListener("input", () => { filter = search.value.toLowerCase().trim(); renderList(); });
+      modal.appendChild(search);
+      const body = document.createElement("div");
+      body.className = "modal-body";
+      modal.appendChild(body);
+      renderList = () => {
+        const current = currentModel();
+        body.innerHTML = "";
+        const providers = state.providers.get(providersKey(instanceId));
+        if (!providers) {
+          body.innerHTML = `<div class="modal-empty">Loading models…</div>`;
+          return;
+        }
+        let shown = 0;
+        for (const provider of providers) {
+          const models = (provider.models || []).filter((m) =>
+            `${m.name} ${m.id} ${provider.name}`.toLowerCase().includes(filter));
+          if (!models.length) continue;
+          shown += models.length;
+          const label = document.createElement("div");
+          label.className = "modal-group-label";
+          label.textContent = provider.name;
+          body.appendChild(label);
+          for (const m of models) {
+            const active = current?.providerID === provider.id && current?.modelID === m.id;
+            body.appendChild(optionRow({
+              title: m.name,
+              sub: `${m.id}${m.context ? ` · ${Math.round(m.context / 1000)}k ctx` : ""}`,
+              active,
+              onclick: () => {
+                const key = activityKey(instanceId, state.selected);
+                state.modelChoices.set(key, { providerID: provider.id, modelID: m.id, variant: active ? (current?.variant ?? null) : null });
+                renderControls();
+                close();
+              },
+            }));
+          }
+        }
+        if (!shown) body.innerHTML = `<div class="modal-empty">No matching models</div>`;
+      };
+      renderList();
+      if (!matchMedia("(pointer: coarse)").matches) setTimeout(() => search.focus(), 30);
+    });
+  }
+
+  function currentVariants() {
+    const m = currentModel();
+    if (!m || !state.selectedInstance) return [];
+    const provider = (state.providers.get(providersKey(state.selectedInstance)) || []).find((p) => p.id === m.providerID);
+    const model = provider?.models?.find((x) => x.id === m.modelID);
+    const vs = model?.variants;
+    if (Array.isArray(vs)) return vs.filter((v) => typeof v === "string");
+    return Object.keys(vs || {});
+  }
+
+  function openVariantModal() {
+    const instanceId = state.selectedInstance;
+    if (!instanceId) return;
+    const variants = currentVariants();
+    openModal((modal, close) => {
+      modalHead(modal, "Variant", close);
+      const body = document.createElement("div");
+      body.className = "modal-body";
+      modal.appendChild(body);
+      const pick = (v) => {
+        const base = currentModel() || {};
+        state.modelChoices.set(activityKey(instanceId, state.selected), {
+          providerID: base.providerID, modelID: base.modelID, variant: v || null,
+        });
+        renderControls();
+        close();
+      };
+      const cur = currentModel()?.variant;
+      body.appendChild(optionRow({ title: "Default", sub: "Model default", active: !cur || cur === "default", onclick: () => pick(null) }));
+      for (const v of variants) {
+        body.appendChild(optionRow({ title: v.charAt(0).toUpperCase() + v.slice(1), active: cur === v, onclick: () => pick(v) }));
+      }
+      if (!variants.length) {
+        const note = document.createElement("div");
+        note.className = "modal-empty";
+        note.textContent = "This model has no variants";
+        body.appendChild(note);
+      }
+    });
+  }
+
+  function quotaResetLabel(ms) {
+    if (!ms || !Number.isFinite(ms) || ms <= Date.now()) return "";
+    let secs = Math.round((ms - Date.now()) / 1000);
+    const days = Math.floor(secs / 86400);
+    secs -= days * 86400;
+    const hours = Math.floor(secs / 3600);
+    const mins = Math.floor((secs % 3600) / 60);
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${mins}m`;
+    if (mins > 0) return `${mins}m`;
+    return "<1m";
+  }
+
+  function openUsageModal() {
+    const instanceIds = [...state.instances.keys()];
+    if (!instanceIds.length) return;
+    const multi = instanceIds.length > 1;
+    openModal((modal, close) => {
+      modalHead(modal, "Usage", close);
+      const body = document.createElement("div");
+      body.className = "modal-body quota-body";
+      modal.appendChild(body);
+      const clampPctLocal = (v) => Math.max(0, Math.min(100, v));
+      const renderProviders = (holder, data) => {
+        if (!data?.ok || !Array.isArray(data.providers) || !data.providers.length) {
+          holder.innerHTML = `<div class="modal-empty">${esc(data?.error || "No usage providers found")}</div>`;
+          return;
+        }
+        for (const p of data.providers) {
+          const section = document.createElement("div");
+          section.className = "quota-provider";
+          if (!p.ok) {
+            section.innerHTML = `<div class="quota-name">${esc(p.name)}</div><div class="quota-error">${esc(p.error)}</div>`;
+            holder.appendChild(section);
+            continue;
+          }
+          let html = `<div class="quota-name">${esc(p.name)}</div>`;
+          if (typeof p.resetsAvailable === "number" && p.resetsAvailable > 0) {
+            html += `<div class="quota-resets">${p.resetsAvailable} reset${p.resetsAvailable === 1 ? "" : "s"} available</div>`;
+          }
+          for (const w of p.windows) {
+            const used = 100 - w.remainingPct;
+            const tone = w.remainingPct >= 50 ? "ok" : w.remainingPct >= 20 ? "warn" : "low";
+            const reset = quotaResetLabel(w.resetMs);
+            html += `<div class="quota-window"><div class="quota-row"><span class="quota-label">${esc(w.label)}</span><span class="quota-pct ${tone}">${used}% used${reset ? ` · ${reset}` : ""}</span></div><div class="quota-track"><i class="${tone}" style="width:${clampPctLocal(used)}%"></i></div></div>`;
+          }
+          section.innerHTML = html;
+          holder.appendChild(section);
+        }
+        if (data.updatedAt) {
+          const t = document.createElement("div");
+          t.className = "quota-updated";
+          t.textContent = `Updated ${new Date(data.updatedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+          holder.appendChild(t);
+        }
+      };
+      for (const instId of instanceIds) {
+        const inst = state.instances.get(instId);
+        const wrap = document.createElement("div");
+        wrap.className = "quota-instance";
+        const label = () => (multi ? `<div class="quota-inst-name">${esc(projectName(inst))}</div>` : "");
+        wrap.innerHTML = `${label()}<div class="modal-empty">Loading usage…</div>`;
+        body.appendChild(wrap);
+        rpc("quota.get", {}, instId)
+          .then((data) => {
+            const holder = document.createElement("div");
+            wrap.innerHTML = label();
+            wrap.appendChild(holder);
+            renderProviders(holder, data);
+          })
+          .catch((err) => { wrap.innerHTML = `${label()}<div class="modal-empty">${esc(String(err?.message || err))}</div>`; });
+      }
+    });
+  }
+
+  function openLevelModal() {
+    const instanceId = state.selectedInstance;
+    if (!instanceId) return;
+    const current = state.levels.get(instanceId) || "ask";
+    openModal((modal, close) => {
+      modalHead(modal, "Permission level", close);
+      const body = document.createElement("div");
+      body.className = "modal-body";
+      modal.appendChild(body);
+      const pick = async (level) => {
+        state.levels.set(instanceId, level);
+        renderControls();
+        close();
+        try { await rpc("permission.level", { level }, instanceId); }
+        catch (err) { toast(String(err?.message || err)); state.levels.set(instanceId, current); renderControls(); }
+      };
+      body.appendChild(optionRow({
+        title: "Ask", sub: "Show a card on this phone and wait for you", active: current !== "auto", icon: "#i-shield",
+        onclick: () => pick("ask"),
+      }));
+      body.appendChild(optionRow({
+        title: "Auto-approve", sub: "Approve tool permissions automatically", active: current === "auto", icon: "#i-bolt",
+        onclick: () => pick("auto"),
+      }));
+    });
+  }
+
+  els.modelPill.onclick = openModelModal;
+  els.variantPill.onclick = openVariantModal;
+
+  function openCommandsModal() {
+    openModal((modal, close) => {
+      modalHead(modal, "Commands", close);
+      const body = document.createElement("div");
+      body.className = "modal-body";
+      modal.appendChild(body);
+      for (const c of [
+        { cmd: "/compact", sub: "Summarize and compact this session's context" },
+        { cmd: "/share", sub: "Create a share link for this session" },
+      ]) {
+        body.appendChild(optionRow({
+          title: c.cmd,
+          sub: c.sub,
+          onclick: () => {
+            close();
+            els.input.value = `${c.cmd} `;
+            flushDraft();
+            autosize();
+            els.input.focus();
+            els.input.setSelectionRange(els.input.value.length, els.input.value.length);
+          },
+        }));
+      }
+      const hint = document.createElement("div");
+      hint.className = "confirm-text";
+      hint.textContent = "Picking a command fills the input — press send to run it.";
+      body.appendChild(hint);
+    });
+  }
+  els.cmdBtn.onclick = () => { toggleMenu(false); openCommandsModal(); };
+
+  // ---------- session menu ----------
+  function toggleMenu(open) {
+    if (open && (!state.selected || !state.selectedInstance)) return;
+    els.sessionMenu.hidden = !open;
+    els.menuBtn.setAttribute("aria-expanded", String(open));
+  }
+
+  function openDeleteConfirm() {
+    if (!state.selected || !state.selectedInstance || !state.connected) return;
+    const cur = flattenSessions().find(({ instId, session }) => instId === state.selectedInstance && sessionID(session) === state.selected);
+    openModal((modal, close) => {
+      modalHead(modal, "Delete session", close);
+      const body = document.createElement("div");
+      body.className = "modal-body";
+      const text = document.createElement("div");
+      text.className = "confirm-text";
+      text.textContent = `Permanently delete “${cur ? sessionTitle(cur.session) : "this session"}” and all of its messages? This cannot be undone.`;
+      body.appendChild(text);
+      modal.appendChild(body);
+      const actions = document.createElement("div");
+      actions.className = "modal-actions";
+      const cancel = document.createElement("button");
+      cancel.textContent = "Cancel";
+      cancel.onclick = close;
+      const del = document.createElement("button");
+      del.className = "primary-danger";
+      del.textContent = "Delete";
+      del.onclick = async () => {
+        cancel.disabled = true;
+        del.disabled = true;
+        del.textContent = "Deleting…";
+        const instanceId = state.selectedInstance;
+        const sid = state.selected;
+        try {
+          await rpc("session.delete", { id: sid, ...dirArg(instanceId, sid) }, instanceId);
+          dropSession(instanceId, sid);
+          close();
+          scheduleListRefetch();
+          setTimeout(scheduleListRefetch, 1500);
+          toast("Session deleted");
+        } catch (err) {
+          toast(String(err?.message || err));
+          cancel.disabled = false;
+          del.disabled = false;
+          del.textContent = "Delete";
+        }
+      };
+      actions.append(cancel, del);
+      modal.appendChild(actions);
+    });
+  }
+
+  els.menuBtn.onclick = (e) => { e.stopPropagation(); toggleMenu(els.sessionMenu.hidden); };
+  els.menuUsage.onclick = () => { toggleMenu(false); openUsageModal(); };
+  els.menuLevel.onclick = () => { toggleMenu(false); openLevelModal(); };
+  els.menuDelete.onclick = () => { toggleMenu(false); openDeleteConfirm(); };
+  document.addEventListener("click", (e) => {
+    if (!els.sessionMenu.hidden && !els.sessionMenu.contains(e.target) && !els.menuBtn.contains(e.target)) toggleMenu(false);
+  });
+
+  function updateChrome() {
+    const current = flattenSessions().find(({ instId, session }) => instId === state.selectedInstance && sessionID(session) === state.selected);
+    setText(els.project, current ? sessionTitle(current.session) : "Your workspace, anywhere");
+    setText($("session-subtitle"), current ? sessionLabel(current.inst, current.session) : "The mobile companion for opencode");
+    const enabled = state.connected && !!current;
+    if (els.input.disabled !== !enabled) els.input.disabled = !enabled;
+    const sendDisabled = !enabled || !els.input.value.trim();
+    if (els.send.disabled !== sendDisabled) els.send.disabled = sendDisabled;
+    if (els.menuBtn.disabled !== !enabled) els.menuBtn.disabled = !enabled;
+    if (els.cmdBtn.disabled !== !state.connected) els.cmdBtn.disabled = !state.connected;
+    if (els.sessionMenu.hidden === false && !current) toggleMenu(false);
+    renderControls();
+    $("pairing-steps").hidden = !!token;
+    let title = "Good work travels with you.";
+    let description = "Your desktop session, right here. Choose a session to keep the conversation going.";
+    if (!token) description = "Pair your phone with opencode and take your workspace with you. All you need is the same Wi-Fi.";
+    else if (!state.connected) { title = "Finding your desktop…"; description = "Keep opencode running and stay on the same network. We'll reconnect automatically."; }
+    else if (!state.instances.size) { title = "Ready when you are."; description = "Open opencode on your desktop. Your projects and sessions will appear here automatically."; }
+    else if (state.loading || (current && !els.timeline.children.length && state.busy.has(activityKey(state.selectedInstance, state.selected)))) { title = "Opening your session…"; description = "Picking up the conversation from your desktop."; }
+    else if (current) { title = "A little space for your next idea."; description = "Send a message below. The conversation stays in sync with your desktop."; }
+    else { title = "Your workspace is connected."; description = "Start a session in opencode on your desktop to see it here."; }
+    $("empty-title").textContent = title;
+    $("empty-description").textContent = description;
+  }
+
+  let activityTimer = null;
+  // some opencode builds complete cross-directory runs without emitting any
+  // events (and the prompt rpc then hangs) — session.messages still works, so
+  // poll the open session while it is busy to surface replies anyway
+  let busyPollTimer = null;
+  function syncBusyPolling() {
+    const need = state.connected && state.busy.has(activityKey(state.selectedInstance, state.selected));
+    if (need && !busyPollTimer) {
+      busyPollTimer = setInterval(() => {
+        if (!state.connected || !state.busy.has(activityKey(state.selectedInstance, state.selected))) {
+          clearInterval(busyPollTimer);
+          busyPollTimer = null;
+          return;
+        }
+        loadMessages(state.selectedInstance, state.selected, false);
+        // cross-directory runs never emit question/permission events, so the
+        // cards only appear through periodic live queries while busy
+        refreshQuestions();
+        refreshPermissions();
+      }, 2500);
+    } else if (!need && busyPollTimer) {
+      clearInterval(busyPollTimer);
+      busyPollTimer = null;
+    }
+  }
+  function renderActivity() {
+    const busy = state.busy.get(activityKey(state.selectedInstance, state.selected));
+    const active = state.connected && !!busy;
+    if (els.activity.hidden !== !active) els.activity.hidden = !active;
+    if (active) {
+      setText(els.activityLabel, busy.label);
+      const seconds = Math.floor((Date.now() - busy.since) / 1000);
+      setText(els.activityTime, seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`);
+      if (!activityTimer) activityTimer = setInterval(renderActivity, 1000);
+      // never blank the page behind the activity bar — keep the empty-state
+      // hero (the "getting data" component) visible until messages render
+      els.empty.hidden = !!els.timeline.children.length;
+    } else {
+      clearInterval(activityTimer);
+      activityTimer = null;
+      els.empty.hidden = !!els.timeline.children.length;
+    }
+    syncBusyPolling();
+    const sendDisabled = !state.connected || !state.selected || !els.input.value.trim();
+    if (els.send.disabled !== sendDisabled) els.send.disabled = sendDisabled;
+  }
+
+  // ---------- sidebar (keyed diffing: never rebuild rows we can patch) ----------
+  const rowNodes = new Map(); // "instId:sid" -> button element
+  let sidebarListedEmpty = false;
+
+  function rowStateClasses(div, instId, inst, s) {
+    const offline = inst.attached === false;
+    const selected = sessionID(s) === state.selected && instId === state.selectedInstance;
+    const key = activityKey(instId, sessionID(s));
+    const cls = "session" + (selected ? " active" : "") + (offline ? " offline" : "")
+      + (state.busy.has(key) ? " busy" : "") + (state.permissions.has(key) ? " pending" : "");
+    // identical className writes can restart CSS animations — never assign what you already have
+    if (div.className !== cls) div.className = cls;
+    const aria = selected ? "true" : "false";
+    if (div.getAttribute("aria-current") !== aria) div.setAttribute("aria-current", aria);
+    if (div.title !== sessionTitle(s)) div.title = sessionTitle(s);
+  }
+
+  function patchRow(div, instId, inst, s) {
+    const sig = `${div.className}\x00${div.title}`;
+    rowStateClasses(div, instId, inst, s);
+    if (`${div.className}\x00${div.title}` === sig) return; // nothing structural changed
+    const meta = div.querySelector(".meta");
+    const project = meta.querySelector(".project");
+    const label = sessionLabel(inst, s);
+    if (project.textContent !== label) project.textContent = label;
+    let tag = meta.querySelector(".offline-tag");
+    if (inst.attached === false && !tag) {
+      tag = document.createElement("span");
+      tag.className = "offline-tag";
+      tag.textContent = "offline";
+      meta.insertBefore(tag, meta.querySelector("time"));
+    } else if (inst.attached !== false && tag) tag.remove();
+  }
+
+  function buildRow(instId, inst, s) {
+    const div = document.createElement("button");
+    div._instId = instId;
+    div._sid = sessionID(s);
+    div.innerHTML = `<svg class="session-icon"><use href="#i-chat"/></svg><div class="session-content"><div class="name"></div>
+    <div class="meta"><span class="dot"></span><span class="project"></span><time></time></div></div>`;
+    div.querySelector(".name").textContent = sessionTitle(s);
+    div.querySelector(".project").textContent = sessionLabel(inst, s);
+    div.querySelector("time").textContent = timeAgo(sessionTime(instId, s));
+    rowStateClasses(div, instId, inst, s);
+    div.onclick = () => { selectSession(instId, sessionID(s)); toggleSessions(false); };
+    return div;
+  }
+
+  // hot path: update ONE row's classes + age (busy toggles, permission dots)
+  function patchSidebarRow(instId, sid) {
+    const div = rowNodes.get(instId + ":" + sid);
+    if (!div) return;
+    const inst = state.instances.get(instId);
+    const s = inst?.sessions?.find((x) => sessionID(x) === sid);
+    if (s) patchRow(div, instId, inst, s);
+  }
+
+  function renderSessions() {
+    const all = flattenSessions();
+    const sorted = all.filter(({ inst, session }) => `${sessionTitle(session)} ${sessionLabel(inst, session)}`.toLowerCase().includes(state.filter)).sort(
+      (a, b) => sessionTime(b.instId, b.session) - sessionTime(a.instId, a.session));
+    setText($("session-count"), String(all.length));
+    if (sorted.length === 0) {
+      rowNodes.clear();
+      els.list.innerHTML = state.filter ? `<div class="list-empty"><strong>No matching sessions</strong>Try another title or project name.</div>` : `<div class="list-empty"><strong>Your sessions will live here</strong>Open opencode on your desktop to get started.</div>`;
+      sidebarListedEmpty = true;
+      return;
+    }
+    if (sidebarListedEmpty) { els.list.innerHTML = ""; sidebarListedEmpty = false; }
+    const seen = new Set();
+    let anchor = null;
+    for (const { instId, inst, session: s } of sorted) {
+      const key = instId + ":" + sessionID(s);
+      seen.add(key);
+      let div = rowNodes.get(key);
+      if (!div) { div = buildRow(instId, inst, s); rowNodes.set(key, div); }
+      else patchRow(div, instId, inst, s);
+      div._s = s;
+      setText(div.querySelector("time"), timeAgo(sessionTime(instId, s)));
+      // append in sorted order — moves existing nodes, only worth skipping when
+      // the row is already in the right place
+      if (anchor ? anchor.nextSibling !== div : els.list.firstChild !== div) els.list.insertBefore(div, anchor ? anchor.nextSibling : els.list.firstChild);
+      anchor = div;
+    }
+    for (const [key, div] of rowNodes) {
+      if (!seen.has(key)) { div.remove(); rowNodes.delete(key); }
+    }
+  }
+
+  // refresh age labels without touching anything else
+  setInterval(() => {
+    if (document.hidden || !rowNodes.size) return;
+    for (const div of rowNodes.values()) {
+      if (div._s) setText(div.querySelector("time"), timeAgo(sessionTime(div._instId, div._s)));
+    }
+  }, 30000);
+
+  function partToolSummary(part) {
+    const st = part.state ?? {};
+    const input = st.input ?? part.input ?? {};
+    let detail = input.command || input.filePath || input.pattern || input.query || input.url
+      || input.path || input.name || input.content || "";
+    if (Array.isArray(detail)) detail = detail.join(" ");
+    if (typeof detail === "object") detail = JSON.stringify(detail);
+    const tool = part.tool ?? "tool";
+    const title = st.title || tool;
+    return { tool, title, detail: String(detail).slice(0, 80), status: st.status ?? "" };
+  }
+
+  function renderPart(part) {
+    if (!part) return "";
+    switch (part.type) {
+      case "text":
+        return part.text?.trim() ? `<div class="bubble">${renderText(part.text)}</div>` : "";
+      case "reasoning":
+        return "";
+      case "tool": {
+        const t = partToolSummary(part);
+        const st = part.state ?? {};
+        const out = st.output ?? st.error ?? "";
+        const outText = typeof out === "string" ? out : out ? JSON.stringify(out, null, 2) : "";
+        return `<details class="tool" data-part-id="${esc(part.id || "")}"><summary><span class="tool-status">${esc(t.status)}</span><span class="tool-title">${esc(t.title)}</span><span class="tool-detail">${esc(t.detail)}</span></summary>${outText ? `<pre>${esc(String(outText).slice(0, 4000))}</pre>` : ""}</details>`;
+      }
+      case "step-start":
+        return "";
+      case "step-finish":
+        return "";
+      case "agent":
+        return `<div class="part-step">↳ ${esc(part.name ?? "agent")}</div>`;
+      default:
+        return "";
+    }
+  }
+
+  function renderTimeline() {
+    const msgs = [...(state.messages?.values?.() || [])];
+    const nearBottom = els.main.scrollHeight - els.main.scrollTop - els.main.clientHeight < 120;
+    const expanded = new Set([...els.timeline.querySelectorAll("details[open]")].map(el => el.dataset.partId));
+    // keyed diff: only rebuild messages whose html changed, keep the rest in place
+    const existing = new Map();
+    for (const el of [...els.timeline.children]) if (el._id) existing.set(el._id, el);
+    const seen = new Set();
+    let anchor = null;
+    for (const [msgIdx, m] of msgs.entries()) {
+      const info = m.info ?? m;
+      const parts = m.parts ?? info.parts ?? [];
+      const role = info.role ?? m.role;
+      const body = (Array.isArray(parts) ? parts : []).map(renderPart).join("");
+      // Reasoning and step-only messages are activity, not empty chat bubbles.
+      if (!body) continue;
+      const id = m.id ?? info.id ?? "idx" + msgIdx;
+      const created = info.time?.created;
+      const time = created ? new Date(created).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";
+      const sig = `${role}\x00${time}\x00${body}`;
+      let el = existing.get(id);
+      if (el) {
+        if (el._sig === sig) { seen.add(id); }
+        else {
+          el.className = `msg ${role === "user" ? "user" : "assistant"}`;
+          el.innerHTML = `<div class="role">${role === "user" ? "You" : "opencode"}<time>${esc(time)}</time></div>${body}`;
+          for (const detail of el.querySelectorAll("details")) {
+            if (detail.dataset.partId && expanded.has(detail.dataset.partId)) detail.open = true;
+          }
+          el._sig = sig;
+          seen.add(id);
+        }
+      } else {
+        el = document.createElement("div");
+        el._id = id;
+        el._sig = sig;
+        el.className = `msg ${role === "user" ? "user" : "assistant"}`;
+        el.innerHTML = `<div class="role">${role === "user" ? "You" : "opencode"}<time>${esc(time)}</time></div>${body}`;
+        seen.add(id);
+      }
+      if (anchor ? anchor.nextSibling !== el : els.timeline.firstChild !== el) els.timeline.insertBefore(el, anchor ? anchor.nextSibling : els.timeline.firstChild);
+      anchor = el;
+    }
+    for (const el of existing.values()) if (!seen.has(el._id)) el.remove();
+    els.empty.hidden = !!els.timeline.children.length;
+    renderActivity();
+    if (nearBottom) els.main.scrollTop = els.main.scrollHeight;
+  }
+
+  async function selectSession(instanceId, sessionID) {
+    const inst = state.instances.get(instanceId);
+    if (inst && inst.attached === false) {
+      const name = (inst.directory || "").split("/").filter(Boolean).pop();
+      toast(`That opencode instance is offline${name ? ` — start ${name} to open this session` : ""}`);
+      return;
+    }
+    state.selected = sessionID;
+    state.selectedInstance = instanceId;
+    state.everSelected = true;
+    state.messages = new Map();
+    state.loading = true;
+    renderSessions();
+    updateChrome();
+    renderTimeline();
+    renderPermissions();
+    renderQuestions();
+    els.main.scrollTop = 0;
+    await loadMessages(instanceId, sessionID, true);
+    restoreDraft();
+    refreshPermissions();
+    refreshQuestions();
+    loadLevel(instanceId);
+    ensureProviders(instanceId).then(() => renderControls()).catch(() => {});
+  }
+
+  // ---------- composer ----------
+  const draftKey = () => `ocduet-draft:${state.selectedInstance ?? "-"}:${state.selected ?? "-"}`;
+  function saveDraft() {
+    try {
+      const v = els.input.value;
+      if (v) localStorage.setItem(draftKey(), v);
+      else localStorage.removeItem(draftKey());
+    } catch {}
+  }
+  // localStorage is synchronous disk I/O — never per keystroke
+  let draftTimer = null;
+  function queueDraftSave() {
+    clearTimeout(draftTimer);
+    draftTimer = setTimeout(saveDraft, 400);
+  }
+  function flushDraft() { clearTimeout(draftTimer); saveDraft(); }
+  addEventListener("pagehide", flushDraft);
+  document.addEventListener("visibilitychange", () => { if (document.hidden) flushDraft(); });
+  function restoreDraft() {
+    let v = "";
+    try { v = localStorage.getItem(draftKey()) ?? ""; } catch {}
+    els.input.value = v;
+    autosize();
+  }
+  function autosize() {
+    els.input.style.height = "auto";
+    els.input.style.height = Math.min(els.input.scrollHeight, window.innerHeight * 0.25) + "px";
+  }
+
+  async function sendPrompt() {
+    const text = els.input.value.trim();
+    if (!text || !state.selected || !state.selectedInstance || !state.connected) return;
+    const instanceId = state.selectedInstance;
+    const sid = state.selected;
+    if (text === "/compact") {
+      els.input.value = "";
+      flushDraft();
+      autosize();
+      toast("Compacting…");
+      try {
+        await rpc("session.compact", { id: sid, ...dirArg(instanceId, sid) }, instanceId);
+        toast("Compacted");
+        loadMessages(instanceId, sid, false);
+      } catch (err) {
+        toast(String(err?.message || err));
+      }
+      return;
+    }
+    if (text === "/share") {
+      els.input.value = "";
+      flushDraft();
+      autosize();
+      toast("Creating share link…");
+      try {
+        const res = await rpc("session.share", { id: sid, ...dirArg(instanceId, sid) }, instanceId);
+        const url = res?.share?.url || res?.url || "";
+        if (url) {
+          try { await navigator.clipboard.writeText(url); toast("Link copied to clipboard"); } catch { toast(url); }
+        } else toast("Shared (no url returned)");
+      } catch (err) {
+        toast(String(err?.message || err));
+      }
+      return;
+    }
+    els.input.value = "";
+    flushDraft();
+    autosize();
+    state.statuses.delete(activityKey(instanceId, sid));
+    setBusy(instanceId, sid, true);
+    renderSessions();
+    renderActivity();
+    els.main.scrollTop = els.main.scrollHeight;
+    try {
+      const choice = state.modelChoices.get(activityKey(instanceId, sid));
+      await rpc("session.prompt", {
+        id: sid,
+        text,
+        ...dirArg(instanceId, sid),
+        ...(choice ? { model: { providerID: choice.providerID, modelID: choice.modelID }, variant: choice.variant } : {}),
+      }, instanceId);
+      setBusy(instanceId, sid, false);
+      if (state.selected === sid && state.selectedInstance === instanceId) loadMessages(instanceId, sid, false);
+    } catch (err) {
+      setBusy(instanceId, sid, false);
+      if (!els.input.value && state.selected === sid && state.selectedInstance === instanceId) { els.input.value = text; flushDraft(); }
+      toast(String(err.message || err));
+    }
+    renderSessions();
+    renderActivity();
+    autosize();
+  }
+
+  els.send.onclick = sendPrompt;
+  els.input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendPrompt(); }
+  });
+  els.input.addEventListener("input", () => {
+    queueDraftSave();
+    autosize();
+    // only the send button's availability depends on typing — nothing else re-renders
+    const sendDisabled = !state.connected || !state.selected || !els.input.value.trim();
+    if (els.send.disabled !== sendDisabled) els.send.disabled = sendDisabled;
+  });
+  els.stop.onclick = async () => {
+    if (state.selected && state.selectedInstance) {
+      const instanceId = state.selectedInstance;
+      const sid = state.selected;
+      try {
+        await rpc("session.abort", { id: sid, ...dirArg(instanceId, sid) }, instanceId);
+        state.statuses.set(activityKey(instanceId, sid), "idle");
+        setBusy(instanceId, sid, false);
+        renderSessions();
+        renderActivity();
+      } catch (err) { toast(String(err.message || err)); }
+    }
+  };
+  function toggleSessions(open) {
+    document.body.classList.toggle("sessions-open", open);
+    $("workspace").inert = open && matchMedia("(max-width: 719px)").matches;
+    els.sessionsBtn.setAttribute("aria-expanded", String(open));
+    $("sidebar-backdrop").hidden = !open;
+    if (open) requestAnimationFrame(() => {
+      if (document.body.classList.contains("sessions-open")) {
+        (matchMedia("(max-width: 719px)").matches ? $("close-sessions") : els.search).focus();
+      }
+    });
+    else if (matchMedia("(max-width: 719px)").matches) els.sessionsBtn.focus();
+  }
+  els.sessionsBtn.onclick = () => toggleSessions(!document.body.classList.contains("sessions-open"));
+  $("close-sessions").onclick = $("sidebar-backdrop").onclick = () => toggleSessions(false);
+
+  // new session: create in the active instance (first attached one as fallback),
+  // then open it ready to type
+  els.newSession.onclick = async () => {
+    let instId = state.selectedInstance;
+    if (!instId || state.instances.get(instId)?.attached === false) {
+      instId = [...state.instances.entries()].find(([, i]) => i.attached !== false)?.[0] ?? null;
+    }
+    if (!instId) { toast("No opencode instance online — start opencode on your desktop"); return; }
+    els.newSession.disabled = true;
+    try {
+      const created = await rpc("session.create", {}, instId);
+      const sid = created?.id ?? created?.info?.id;
+      if (!sid) throw new Error("no session id in reply");
+      try { onInstances(await rpc("instances.list")); } catch {}
+      await selectSession(instId, sid);
+      toggleSessions(false);
+      els.input.focus();
+    } catch (err) {
+      toast(String(err?.message || err));
+    } finally {
+      els.newSession.disabled = false;
+    }
+  };
+  els.search.addEventListener("input", () => { state.filter = els.search.value.toLowerCase().trim(); renderSessions(); });
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      if (!els.modalRoot.hidden) { closeModal(); return; }
+      if (!els.sessionMenu.hidden) { toggleMenu(false); return; }
+      toggleSessions(false);
+    }
+    if (event.key === "/" && !["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) {
+      event.preventDefault();
+      toggleSessions(true);
+    }
+    if (event.key === "Tab" && document.body.classList.contains("sessions-open") && matchMedia("(max-width: 719px)").matches) {
+      const focusable = [...$("sessions").querySelectorAll("button, input")];
+      const first = focusable[0], last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+    }
+  });
+  matchMedia("(min-width: 720px)").addEventListener("change", () => toggleSessions(false));
+
+  state.messages = new Map();
+  renderSessions();
+  els.input.value = ""; // kill browser session-restore phantoms; real drafts restore on select
+  flushDraft();
+  connect();
+})();