orbit-codex-bridge 0.0.0-stage → 0.1.0

package/public/app.js

@@ -0,0 +1,1035 @@
+const select = selector => document.querySelector(selector);
+const escapeHtml = value => String(value ?? '').replace(/[&<>"']/g, character => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[character]));
+const paths = {
+  inbox:'<rect x="3" y="4" width="18" height="16" rx="3"/><path d="M3 13h5l2 3h4l2-3h5"/>',
+  archive:'<rect x="3" y="3" width="18" height="5" rx="1"/><path d="M5 8v12h14V8M10 12h4"/>',
+  devices:'<rect x="2" y="4" width="14" height="12" rx="2"/><path d="M9 16v4H5m4 0h4"/><rect x="17" y="10" width="5" height="11" rx="1"/>',
+  shield:'<path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6z"/><path d="m8 12 3 3 5-6"/>',
+  monitor:'<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M12 17v4M8 21h8"/>',
+  chevron:'<path d="m9 5 7 7-7 7"/>',folder:'<path d="M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+  orbit:'<circle cx="12" cy="12" r="5"/><ellipse cx="12" cy="12" rx="11" ry="4" transform="rotate(-35 12 12)"/>',
+  search:'<circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/>',
+  refresh:'<path d="M20 7a9 9 0 1 0 1 8M20 3v5h-5"/>',
+  database:'<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 4 16 4 16 0V5M4 12c0 4 16 4 16 0"/>',
+  arrow:'<path d="M12 20V4m-6 6 6-6 6 6"/>',back:'<path d="m14 5-7 7 7 7"/>',
+  info:'<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/>',
+  menu:'<path d="M4 6h16M4 12h16M4 18h16"/>',
+  copy:'<rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H3v13h5"/>',
+  clock:'<circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>',
+  settings:'<path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2"/><circle cx="15" cy="17" r="2"/>',
+  terminal:'<rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3m6 0h4"/>',
+  file:'<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h8"/>',
+  searchWeb:'<circle cx="11" cy="11" r="7"/><path d="m16 16 5 5M4 11h14M11 4a11 11 0 0 1 0 14M11 4a11 11 0 0 0 0 14"/>',
+  image:'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/>'
+};
+const icon = name => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || paths.inbox}</svg>`;
+function decorate(parent = document) { parent.querySelectorAll('[data-icon]').forEach(element => { element.innerHTML = icon(element.dataset.icon); }); }
+function markdown(text) { return DOMPurify.sanitize(marked.parse(String(text || ''), { breaks: true }), { ALLOWED_TAGS: ['p','br','strong','b','em','i','s','del','ul','ol','li','blockquote','pre','code','h1','h2','h3','h4','h5','h6','hr','a','table','thead','tbody','tr','th','td','sup','sub','kbd','details','summary'], ALLOWED_ATTR: ['href','title','start','colspan','rowspan'], ALLOW_DATA_ATTR: false, ALLOW_ARIA_ATTR: false }); }
+const state = { threads: [], status: null, selected: null, selectionVersion: 0, historyStatus: 'idle', historyError: '', filter: 'all', project: null, search: '', view: 'sessions', socket: null, pending: new Map(), enabled: new Map(), baseMessages: [], olderMessages: [], cursor: null, liveMessages: new Map(), desktopMessages: [], desktopRuntime: null, selectedSettings: null, models: [], contextUsage: null, settingsBusy: false, reopenModelAfterGrant: false, pendingModelChoice: null, cloudMode: false, cloudUser: null, cloudDevices: [], cloudDeviceId: null, cloudPairCode: null, approvals: new Map(), reconnect: 0, loggedOut: false, busy: false, turnId: null };
+let refreshTimer;
+let toastTimer;
+let reconnectTimer;
+let desktopConnectionAttempt = 0;
+let desktopConnecting = false;
+let workspaceGeneration = 0;
+let cloudRegistrationEnabled = false;
+let cloudAuthVersion = 0;
+const computerInstallCommands = {
+  windows:'$minimum = 24; $node = Get-Command node -ErrorAction SilentlyContinue; if (-not $node -or [int](node -p "process.versions.node.split(\'.\')[0]" 2>$null) -lt $minimum) { if (-not (Get-Command winget -ErrorAction SilentlyContinue)) { throw "需要 Node.js 24+；未检测到 winget，请先从 https://nodejs.org 安装 Node.js 24+。" }; winget install --id OpenJS.NodeJS --exact --source winget --silent --accept-source-agreements --accept-package-agreements; if ($LASTEXITCODE -ne 0) { throw "Node.js 安装失败。" }; $env:Path = "$env:ProgramFiles\\nodejs;$env:Path" }; if ([int](node -p "process.versions.node.split(\'.\')[0]") -lt $minimum) { throw "Node.js 24+ 安装未完成，请重新打开 PowerShell 后重试。" }; npx --yes --package=orbit-codex-bridge orbit login',
+  unix:'npx --yes --package=orbit-codex-bridge orbit login'
+};
+
+function setCloudAuthMode(register = false) {
+  cloudAuthVersion++;
+  const registering = register && cloudRegistrationEnabled;
+  select('#cloud-login-form').hidden = registering;
+  select('#cloud-register-form').hidden = !registering;
+  select('#cloud-auth-title').textContent = registering ? '创建你的 Orbit 账号' : '登录 Orbit';
+  select('#cloud-auth-description').textContent = registering ? '从一台电脑开始，让原来的会话随你出发。' : '登录后，继续连接你的电脑和原有会话。';
+  select('#cloud-show-login').classList.toggle('active', !registering);
+  select('#cloud-show-register').classList.toggle('active', registering);
+  select('#cloud-show-login').setAttribute('aria-pressed', String(!registering));
+  select('#cloud-show-register').setAttribute('aria-pressed', String(registering));
+  select('#cloud-login-error').textContent = '';
+  select('#cloud-register-error').textContent = '';
+  select('#cloud-password').value = '';
+  select('#register-password').value = '';
+  select('#register-password-confirm').value = '';
+}
+
+async function loadCloudConfig() {
+  const response = await fetch('/api/cloud/config', { cache:'no-store' });
+  if (!response.ok) throw new Error('无法读取账号设置，请刷新页面重试。');
+  const config = await response.json();
+  cloudRegistrationEnabled = config.registrationEnabled === true;
+  select('#cloud-auth-tabs').hidden = !cloudRegistrationEnabled;
+  select('#cloud-registration-notice').hidden = cloudRegistrationEnabled;
+  if (!cloudRegistrationEnabled) setCloudAuthMode(false);
+}
+
+function captureCloudPairCode() {
+  const fragment=new URLSearchParams(location.hash.slice(1));
+  if(!fragment.has('pair'))return;
+  state.cloudPairCode=fragment.get('pair');
+  history.replaceState(null,'',location.pathname+location.search);
+}
+
+function toast(text) { select('#toast').textContent = text; select('#toast').hidden = false; clearTimeout(toastTimer); toastTimer = setTimeout(() => { select('#toast').hidden = true; }, 5500); }
+function mergeDesktopMessages(messages = []) {
+  const merged = new Map(state.desktopMessages.map(message => [message.id, message]));
+  for (const message of messages) if (message?.id) merged.set(message.id, message);
+  state.desktopMessages = [...merged.values()].slice(-160);
+}
+function ago(timestamp) {
+  const minutes = Math.max(0, Math.floor((Date.now() - timestamp) / 60000));
+  if (minutes < 1) return '刚刚';
+  if (minutes < 60) return `${minutes} 分钟前`;
+  if (minutes < 1440) return `${Math.floor(minutes / 60)} 小时前`;
+  if (minutes < 10080) return `${Math.floor(minutes / 1440)} 天前`;
+  return new Date(timestamp).toLocaleDateString('zh-CN', { month:'2-digit', day:'2-digit' });
+}
+async function api(url, body, signal) {
+  const generation = workspaceGeneration;
+  const headers = {};
+  if (body !== undefined) headers['Content-Type'] = 'application/json';
+  if (state.cloudMode && state.cloudDeviceId && !url.startsWith('/api/cloud/')) headers['X-Orbit-Device-Id'] = state.cloudDeviceId;
+  const options = body === undefined ? { headers } : { method: 'POST', headers, body: JSON.stringify(body) };
+  if (signal) options.signal = signal;
+  const response = await fetch(url, options);
+  const result = await response.json();
+  if (generation !== workspaceGeneration) throw Object.assign(new Error('工作台已切换。'),{code:'STALE_WORKSPACE'});
+  if (response.status === 401 && state.cloudMode && result.code === 'cloud_login_required') showCloudLogin(result.error);
+  else if (response.status === 401 && state.cloudMode && !state.cloudPairCode && !url.startsWith('/api/cloud/')) showPairing();
+  else if (response.status === 401 && !state.cloudMode && url !== '/api/pair' && !url.startsWith('/api/cloud/')) showPairing();
+  if (!response.ok) throw new Error(result.error || '请求失败。');
+  return result;
+}
+function showPairing() {
+  state.loggedOut = true; clearTimeout(reconnectTimer);
+  state.socket?.close();
+  select('#workspace').hidden = true; select('#pair-screen').hidden = false;
+  select('#cloud-login-screen').hidden = true; select('#cloud-device-screen').hidden = true;
+  const fragment = new URLSearchParams(location.hash.slice(1));
+  if (fragment.has('pair')) { select('#pair-code').value = fragment.get('pair'); history.replaceState(null, '', location.pathname); }
+}
+function showCloudLogin(error = '') {
+  workspaceGeneration++;
+  resetCloudWorkspace();
+  state.cloudMode = true;
+  state.loggedOut = true;
+  state.socket?.close();
+  select('#workspace').hidden = true; select('#pair-screen').hidden = true; select('#cloud-device-screen').hidden = true;
+  select('#cloud-login-screen').hidden = false;
+  setCloudAuthMode(false);
+  select('#cloud-login-error').textContent = error;
+}
+function showCloudDevices(message = '') {
+  workspaceGeneration++;
+  resetCloudWorkspace();
+  state.loggedOut = false;
+  state.cloudDeviceId = null; localStorage.removeItem('orbit_cloud_device_id');
+  select('#workspace').hidden = true; select('#pair-screen').hidden = true; select('#cloud-login-screen').hidden = true;
+  select('#cloud-device-screen').hidden = false;
+  const quota = state.cloudUser?.maxDevices || 1;
+  select('#cloud-devices-title').textContent = state.cloudDevices.length ? '选择要连接的电脑' : '连接你的第一台电脑';
+  const greeting = `已登录 ${state.cloudUser?.displayName || state.cloudUser?.username}。`;
+  select('#cloud-device-message').textContent = state.cloudPairCode
+    ? `${greeting}选择发起连接的电脑，完成本机配对。${message ? ` ${message}` : ''}`
+    : message || greeting + (state.cloudDevices.length ? '选择一台电脑继续。' : '先添加你自己的电脑，连接后即可查看原有会话。');
+  select('#cloud-device-quota').textContent = `套餐 ${state.cloudUser?.plan || 'free'} · 已添加 ${state.cloudDevices.length} / ${quota} 台电脑`;
+  select('#cloud-add-computer').disabled = state.cloudDevices.length >= quota;
+  select('#cloud-add-computer').title = state.cloudDevices.length >= quota ? '已达到设备上限，可移除旧电脑或联系管理员调整额度。' : '';
+  select('#cloud-onboarding').hidden = state.cloudDevices.length > 0;
+  select('#cloud-devices-list').innerHTML = state.cloudDevices.map(device =>
+    `<article class="cloud-computer-card"><button class="device-card cloud-device-option" data-cloud-device="${escapeHtml(device.id)}" ${device.status !== 'active' || !device.online ? 'disabled' : ''}><div class="device-big-icon">${icon('monitor')}</div><h2>${escapeHtml(device.name)}<span class="capability-state ${device.online ? '' : 'pending'}">${device.online ? '在线 · 点击连接' : '等待电脑上线'}</span></h2><p>${device.lastSeen ? `最近在线 · ${ago(device.lastSeen)}` : '请在这台电脑保存连接配置，启动 Orbit 和 Agent。'}</p></button><footer><span>${device.online ? '仅你的账号可连接' : '启动电脑端后刷新状态'}</span><button type="button" class="button small" data-cloud-revoke="${escapeHtml(device.id)}">移除电脑</button></footer></article>`
+  ).join('');
+}
+
+async function refreshCloudDevices() {
+  const workspace = await api('/api/cloud/me');
+  state.cloudUser = workspace.user;
+  state.cloudDevices = workspace.devices || [];
+  showCloudDevices();
+}
+
+function resetCloudWorkspace() {
+  state.loggedOut = true; clearTimeout(reconnectTimer); clearTimeout(refreshTimer); refreshTimer = null;
+  state.selectionVersion++;
+  state.socket?.close();
+  state.socket = null;
+  for (const pending of state.pending.values()) {clearTimeout(pending.timer);pending.reject(new Error('工作台已断开。'))}
+  state.pending.clear();
+  state.selected = null; state.desktopRuntime = null; state.selectedSettings = null; state.contextUsage = null;
+  state.threads = []; state.models = []; state.project = null;
+  state.enabled.clear(); state.approvals.clear(); state.desktopMessages = []; state.baseMessages = [];
+  state.olderMessages = []; state.liveMessages.clear(); state.cursor = null; state.turnId = null; state.busy = false;
+  select('#chat').hidden = true; select('#welcome').hidden = false;
+  select('#messages').replaceChildren(); select('#projects').replaceChildren(); select('#thread-list').replaceChildren();
+  select('#message-input').value = '';
+  select('#workspace').classList.remove('chat-open');
+  select('#sessions-view').hidden = false; select('#devices-view').hidden = true; state.view = 'sessions';
+  for (const dialog of document.querySelectorAll('dialog[open]')) dialog.close();
+}
+async function discoverCloudWorkspace() {
+  const generation = workspaceGeneration;
+  let response;
+  try { response = await fetch('/api/cloud/me', { cache:'no-store' }); }
+  catch (error) { throw new Error('无法连接工作台服务，请检查网络。'); }
+  if (generation !== workspaceGeneration) return 'stale';
+  if (response.status === 404) return 'local';
+  captureCloudPairCode();
+  let configError = '';
+  try { await loadCloudConfig(); }
+  catch (error) { configError = error.message; }
+  if (generation !== workspaceGeneration) return 'stale';
+  if (response.status === 401) {
+    showCloudLogin();
+    select('#cloud-login-error').textContent = configError;
+    return 'login';
+  }
+  if (!response.ok) { showCloudLogin('云端服务暂时不可用，请稍后重试。'); return 'login'; }
+  const workspace = await response.json();
+  state.cloudMode = true; state.loggedOut = false;
+  state.cloudUser = workspace.user; state.cloudDevices = workspace.devices || [];
+  const saved = localStorage.getItem('orbit_cloud_device_id');
+  if (saved && state.cloudDevices.some(device => device.id === saved && device.status === 'active')) state.cloudDeviceId = saved;
+  else if (state.cloudDevices.length === 1 && state.cloudDevices[0].status === 'active' && !state.cloudPairCode) {
+    state.cloudDeviceId = state.cloudDevices[0].id;
+    localStorage.setItem('orbit_cloud_device_id',state.cloudDeviceId);
+  } else {
+    state.cloudDeviceId = null;
+    showCloudDevices();
+    return 'devices';
+  }
+  select('#cloud-device-switcher').hidden = false;
+  const selected = state.cloudDevices.find(device => device.id === state.cloudDeviceId);
+  select('#cloud-device-switcher').textContent = selected?.name || '选择电脑';
+  return 'ready';
+}
+async function refreshThreads() {
+  const data = await api('/api/threads'); state.threads = data.threads;
+  renderProjects(); renderList();
+  if (!state.selected) renderWelcome();
+  else { const updated = state.threads.find(thread => thread.id === state.selected.id); if (updated) state.selected = updated; updateMode(); }
+}
+async function boot() {
+  const generation = ++workspaceGeneration;
+  try {
+    const cloudState = await discoverCloudWorkspace();
+    if (cloudState !== 'local' && cloudState !== 'ready') return;
+    state.status = await api('/api/status');
+    if (generation !== workspaceGeneration) return;
+    state.loggedOut = false;
+    select('#pair-code').value = '';
+    select('#pair-screen').hidden = true; select('#workspace').hidden = false;
+    select('#cloud-login-screen').hidden = true; select('#cloud-device-screen').hidden = true;
+    select('#device-name').textContent = state.status.device;
+    state.enabled = new Map(Object.entries(state.status.execution.grants || {}));
+    await refreshThreads(); connectSocket();
+  } catch (error) {
+    if (error.code === 'STALE_WORKSPACE') return;
+    if (state.cloudMode) showCloudDevices(error.message);
+    else if (!state.loggedOut) { showPairing(); select('#pair-error').textContent = error.message; }
+  }
+}
+function connectSocket() {
+  state.socket?.close();
+  const suffix = state.cloudMode && state.cloudDeviceId ? `?deviceId=${encodeURIComponent(state.cloudDeviceId)}` : '';
+  const socket = new WebSocket(`${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/socket${suffix}`);
+  state.socket = socket;
+  socket.addEventListener('open', () => {
+    if (state.socket !== socket) return;
+    state.reconnect = 0; setConnection(true);
+    if (state.selected) subscribeThread(state.selected.id).catch(error => toast(error.message));
+    refreshThreads().catch(() => {});
+  });
+  socket.addEventListener('message', async event => {
+    if (state.socket !== socket) return;
+    const message = JSON.parse(event.data);
+    if (message.id && state.pending.has(message.id)) {
+      const pending = state.pending.get(message.id); clearTimeout(pending.timer); state.pending.delete(message.id);
+      if (message.error) pending.reject(Object.assign(new Error(message.error), { code:message.code })); else pending.resolve(message.result);
+      return;
+    }
+    if (message.method === 'store/changed') scheduleRefresh();
+    const params = message.params || {};
+    if (params.threadId && params.threadId !== state.selected?.id) return;
+    if (message.method === 'item/agentMessage/delta') {
+      const current = state.liveMessages.get(params.itemId) || { id: params.itemId, role:'assistant', text:'', timestamp:Date.now() };
+      current.text += params.delta || ''; state.liveMessages.set(params.itemId, current); renderMessages();
+    }
+    if (message.method === 'turn/started') { state.busy = true; state.turnId = params.turn.id; updateMode(); }
+    if (message.method === 'turn/completed') { state.busy = false; state.turnId = null; updateMode(); scheduleRefresh(); }
+    if (message.method === 'orbit/desktop' && state.status?.execution.mode === 'desktop') {
+      state.desktopRuntime = params;
+      if (!params.attached) { state.enabled.delete(params.threadId); state.selectedSettings = null; }
+      if (params.attached) mergeDesktopMessages(params.messages || []);
+      state.turnId = params.attached ? params.turnId : null;
+      state.busy = Boolean(state.turnId);
+      state.approvals = new Map((params.attached ? params.approvals || [] : []).map(approval => [approval.requestId, approval]));
+      renderMessages(); renderApprovals(); updateMode();
+    }
+    if (message.method === 'thread/tokenUsage/updated' && state.status?.execution.mode !== 'desktop') {
+      const usage = params.tokenUsage || params.tokenUsageInfo;
+      if (Number.isSafeInteger(usage?.last?.totalTokens) && usage.last.totalTokens >= 0) {
+        state.contextUsage = {
+          usedTokens: usage.last.totalTokens,
+          windowTokens: Number.isSafeInteger(usage.modelContextWindow) && usage.modelContextWindow > 0 ? usage.modelContextWindow : null,
+          cachedTokens: Number.isSafeInteger(usage.last.cachedInputTokens) ? usage.last.cachedInputTokens : null
+        };
+        renderContext();
+      }
+    }
+    if (message.method === 'orbit/control-revoked') {
+      state.enabled.delete(params.threadId);
+      if (params.threadId === state.selected?.id) {
+        state.selectedSettings = null;
+        state.pendingModelChoice = null;
+        state.busy = false; state.turnId = null;
+        state.reopenModelAfterGrant = false;
+        state.desktopRuntime = {threadId:params.threadId,attached:false,reason:params.reason,reasonCode:params.reasonCode};
+        if (select('#model-dialog').open) select('#model-dialog').close();
+        if (select('#control-dialog').open) select('#control-dialog').close();
+        state.approvals.clear(); renderApprovals(); updateMode();
+      }
+    }
+    if (message.method === 'orbit/settings-applied' && params.threadId === state.selected?.id) {
+      state.selectedSettings = { model:params.model,effort:params.effort,pending:false };
+      if (state.desktopRuntime?.attached) state.desktopRuntime = { ...state.desktopRuntime,model:params.model,effort:params.effort };
+      renderModelStatus();
+      toast('下一轮模型参数已应用。');
+    }
+    if (message.method === 'orbit/settings-error' && params.threadId === state.selected?.id) {
+      state.selectedSettings = null;
+      renderModelStatus();
+      toast(params.error || '下一轮模型参数未应用，请重新选择。');
+    }
+    if (message.method === 'orbit/engine') {
+      if (state.status?.execution) state.status.execution.connected = Boolean(params.connected);
+      if (!params.connected) {
+        state.enabled.clear(); state.desktopRuntime = null; state.selectedSettings = null; state.pendingModelChoice = null;
+        if (select('#model-dialog').open) select('#model-dialog').close();
+        if (select('#control-dialog').open) select('#control-dialog').close();
+        state.reopenModelAfterGrant = false;
+        state.approvals.clear(); state.busy = false; state.turnId = null;
+        renderApprovals(); renderMessages();
+      }
+      updateMode();
+    }
+    if (message.method === 'orbit/approval') { state.approvals.set(params.requestId, params); renderApprovals(); }
+    if (message.method === 'serverRequest/resolved') { state.approvals.delete(String(params.requestId)); renderApprovals(); }
+    if (message.method === 'error') toast(params.error?.message || params.message || '执行发生错误，请查看会话状态。');
+  });
+  socket.addEventListener('close', () => {
+    if (state.socket !== socket) return;
+    setConnection(false);
+    for (const pending of state.pending.values()) { clearTimeout(pending.timer); pending.reject(new Error('连接中断，消息不会自动重发。请先检查会话记录。')); }
+    state.pending.clear();
+    scheduleReconnect();
+  });
+  socket.addEventListener('error', () => {});
+}
+function scheduleReconnect() {
+  if (state.loggedOut) return;
+  clearTimeout(reconnectTimer);
+  reconnectTimer = setTimeout(async () => {
+    try {
+      state.status = await api('/api/status');
+      state.enabled = new Map(Object.entries(state.status.execution.grants || {}));
+      connectSocket();
+    } catch { scheduleReconnect(); }
+  }, Math.min(15000, 1000 * 2 ** Math.min(4, state.reconnect++)));
+}
+async function subscribeThread(id) {
+  const selectionVersion = state.selectionVersion;
+  const attempt = ++desktopConnectionAttempt;
+  desktopConnecting = true; updateMode();
+  try {
+    const result = await rpc('thread.subscribe', { threadId: id });
+    if (id !== state.selected?.id || selectionVersion !== state.selectionVersion || attempt !== desktopConnectionAttempt) return;
+    if (result.control) state.enabled.set(id, result.control); else state.enabled.delete(id);
+    state.desktopRuntime = result.runtime || null;
+    state.selectedSettings = result.settings || null;
+    if (result.runtime?.attached) mergeDesktopMessages(result.runtime.messages || []);
+    state.turnId = result.turnId;
+    state.busy = Boolean(result.turnId);
+    state.approvals = new Map((result.approvals || []).map(approval => [approval.requestId, approval]));
+    renderMessages(); renderApprovals();
+  } catch (error) {
+    if (id === state.selected?.id && selectionVersion === state.selectionVersion && attempt === desktopConnectionAttempt) {
+      state.enabled.delete(id); state.selectedSettings = null; state.turnId = null; state.busy = false;
+      state.desktopRuntime = {threadId:id,attached:false,reason:error.message,reasonCode:error.code};
+      state.approvals.clear(); renderApprovals();
+    }
+    throw error;
+  } finally {
+    if (attempt === desktopConnectionAttempt) { desktopConnecting = false; updateMode(); }
+  }
+}
+function setConnection(connected) {
+  select('#connection-pill').innerHTML = `<i class="tiny-dot"></i>${connected ? '原生记录已连接' : '连接已断开'}`;
+  select('#connection-pill').classList.toggle('offline', !connected); updateMode();
+}
+function rpc(method, params) {
+  if (state.socket?.readyState !== WebSocket.OPEN) return Promise.reject(new Error('实时连接尚未就绪。'));
+  const id = crypto.randomUUID ? crypto.randomUUID() : [...crypto.getRandomValues(new Uint8Array(16))].map(value => value.toString(16).padStart(2, '0')).join('');
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => { state.pending.delete(id); reject(new Error('操作超时，不会自动重发。请检查会话状态。')); }, 45000);
+    state.pending.set(id, { resolve, reject, timer });
+    state.socket.send(JSON.stringify({ id, method, params }));
+  });
+}
+function scheduleRefresh() {
+  if (refreshTimer) return;
+  refreshTimer = setTimeout(async () => {
+    refreshTimer = null;
+    try { await refreshThreads(); if (state.selected) await loadMessages(false); } catch {}
+  }, 800);
+}
+function renderProjects() {
+  const projects = new Map();
+  for (const thread of state.threads) {
+    const project = projects.get(thread.projectId) || { name: thread.projectName, count: 0 }; project.count++; projects.set(thread.projectId, project);
+  }
+  select('#projects').innerHTML = [...projects].map(([id, project]) => `<button class="project-item ${state.project === id ? 'active' : ''}" data-project="${escapeHtml(id)}" title="${escapeHtml(project.name)}"><span class="project-dot"></span><span>${escapeHtml(project.name)}</span><small>${project.count}</small></button>`).join('');
+  select('#nav-count').textContent = state.threads.length;
+}
+function filteredThreads() {
+  return state.threads.filter(thread => (!state.project || thread.projectId === state.project)
+    && (state.filter !== 'archived' || thread.archived)
+    && (state.filter !== 'locked' || thread.locked)
+    && (state.filter !== 'pinned' || thread.pinned)
+    && `${thread.title} ${thread.projectName} ${thread.preview}`.toLowerCase().includes(state.search.toLowerCase()))
+    .sort((left, right) => Number(right.pinned) - Number(left.pinned) || right.updatedAt - left.updatedAt);
+}
+function renderList() {
+  const threads = filteredThreads();
+  select('#thread-count').textContent = threads.length;
+  select('#list-title').textContent = state.project ? (state.threads.find(thread => thread.projectId === state.project)?.projectName || '项目会话') : state.filter === 'archived' ? '已归档' : state.filter === 'pinned' ? '已置顶' : '所有会话';
+  select('#list-footer-text').textContent = `${state.threads.length} 条原生记录 · 自动同步`;
+  select('#thread-list').innerHTML = threads.map(thread => `<button class="thread-item ${state.selected?.id === thread.id ? 'selected' : ''}" data-thread="${escapeHtml(thread.id)}"><div class="thread-meta"><span class="project-initial">${escapeHtml(thread.projectName.slice(0,1).toUpperCase())}</span><span class="project-label">${escapeHtml(thread.projectName)}</span><time>${ago(thread.updatedAt)}</time></div><h3>${escapeHtml(thread.title)}</h3><p>${escapeHtml(thread.preview || '点击查看原生会话记录')}</p><div class="thread-badges">${thread.pinned ? '<span class="tag pinned">已置顶</span>' : ''}${thread.locked ? '<span class="tag busy"><i class="tiny-dot"></i>原客户端占用</span>' : '<span class="tag">可查看</span>'}${thread.archived ? '<span class="tag archived">已归档</span>' : ''}<span class="tag">${escapeHtml(thread.provider || 'Codex')}</span></div></button>`).join('') || '<div class="empty">没有找到匹配的会话。<br>试试其他关键词或筛选条件。</div>';
+  document.querySelectorAll('[data-filter]').forEach(button => {
+    const active = button.dataset.filter === state.filter;
+    button.classList.toggle('active', active); button.setAttribute('aria-pressed', String(active));
+  });
+}
+function renderWelcome() {
+  const projects = new Set(state.threads.map(thread => thread.projectId));
+  const archived = state.threads.filter(thread => thread.archived).length;
+  select('#welcome').innerHTML = `<div class="welcome-heading"><div><h2>你的工作，都在这里。</h2><p>连接本机 Codex，从上次停下的地方找到灵感。</p></div><span class="date-label">${new Date().toLocaleDateString('zh-CN', { timeZone:'Asia/Shanghai', month:'long', day:'numeric', weekday:'long' })}</span></div><div class="hero"><div class="hero-grid"></div><div class="hero-orbit"><i></i></div><span class="eyebrow">KEEP THE CONTEXT. FIND YOUR FLOW.</span><h2>工作在电脑上，<br>灵感不必。</h2><p>一个入口，查看真实的项目与原生会话。<br>不再复制粘贴，也不必重新解释。</p><span class="hero-status"><i class="tiny-dot"></i> 本机直读 · 默认只读保护</span></div><div class="stats-grid"><div class="stat-card"><span>${icon('inbox')}原生会话</span><strong>${state.threads.length}</strong><small>来自本机，而非演示数据</small></div><div class="stat-card"><span>${icon('folder')}项目空间</span><strong>${projects.size}</strong><small>按原生归属 / 工作目录分组</small></div><div class="stat-card"><span>${icon('archive')}归档记录</span><strong>${archived}</strong><small>旧上下文，也值得保留</small></div></div><div class="section-heading"><h3>最近的上下文</h3><span>从熟悉的对话开始 ↗</span></div>${state.threads.filter(thread => !thread.archived).slice(0,3).map(thread => `<button class="recent-card" data-thread="${escapeHtml(thread.id)}"><span class="recent-icon">${icon('inbox')}</span><div><strong>${escapeHtml(thread.title)}</strong><p>${escapeHtml(thread.projectName)} · ${ago(thread.updatedAt)}</p></div><span>↗</span></button>`).join('')}<div class="honesty-note">${icon('info')}<span>原生会话列表与历史记录直接读取。授权后可通过桌面 IPC 接入已加载的 Codex 会话；尚未加载的会话需先在 Codex 桌面打开，不会新建或迁移执行器。</span></div>`;
+}
+async function openThread(id) {
+  const thread = state.threads.find(entry => entry.id === id); if (!thread) return;
+  if (select('#model-dialog').open) select('#model-dialog').close();
+  const selectionVersion = ++state.selectionVersion;
+  state.pendingModelChoice = null;
+  state.historyStatus = 'loading'; state.historyError = '';
+  state.selected = thread; state.baseMessages = []; state.olderMessages = []; state.liveMessages.clear(); state.desktopMessages = []; state.desktopRuntime = null; state.selectedSettings = null; state.contextUsage = null; state.approvals.clear(); state.cursor = null; state.busy = false; state.turnId = null;
+  select('#welcome').hidden = true; select('#chat').hidden = false; select('#workspace').classList.add('chat-open');
+  select('#chat-title').textContent = thread.title;
+  select('#chat-subtitle').textContent = `${thread.projectName} / ${thread.provider || 'Codex'}${thread.model ? ` · ${thread.model}` : ''}`;
+  select('#chat-details').innerHTML = `<dl><dt>原生会话 ID</dt><dd>${escapeHtml(id)}</dd><dt>工作目录</dt><dd>${escapeHtml(thread.cwd)}</dd><dt>记录来源 / 分支</dt><dd>${escapeHtml(thread.source)} / ${escapeHtml(thread.branch || '—')}</dd></dl>`;
+  select('#chat-details').hidden = true;
+  select('#messages').replaceChildren(); renderMessages();
+  renderList(); updateMode(); renderApprovals();
+  subscribeThread(id).catch(error => { if (selectionVersion === state.selectionVersion) toast(error.message); });
+  try { await loadMessages(true); } catch (error) { if (selectionVersion === state.selectionVersion) toast(error.message); }
+}
+async function loadMessages(initial, older = false) {
+  const id = state.selected?.id; if (!id) return;
+  const selectionVersion = state.selectionVersion;
+  if (older && state.paging === id) return;
+  if (older) state.paging = id;
+  if (initial || state.historyStatus === 'error') { state.historyStatus = 'loading'; state.historyError = ''; renderMessages(); }
+  const cursor = state.cursor;
+  let data;
+  try { data = await api(`/api/threads/${encodeURIComponent(id)}/messages${older ? `?before=${encodeURIComponent(cursor)}` : ''}`, undefined, AbortSignal.timeout(15000)); }
+  catch (error) {
+    if (id !== state.selected?.id || selectionVersion !== state.selectionVersion) return;
+    state.historyStatus = 'error';
+    state.historyError = error.name === 'TimeoutError' ? '读取原生历史超时，请点击刷新重试。' : error.message;
+    renderMessages();
+    throw new Error(state.historyError);
+  }
+  finally { if (state.paging === id) state.paging = null; }
+  if (id !== state.selected?.id || selectionVersion !== state.selectionVersion) return;
+  state.historyStatus = 'loaded'; state.historyError = '';
+  if (older) state.olderMessages = [...data.messages, ...state.olderMessages];
+  else state.baseMessages = initial ? data.messages : [...new Map([...state.baseMessages, ...data.messages].map(message => [message.id, message])).values()];
+  if (initial || older) state.cursor = data.nextCursor;
+  const persistedIds = new Set(data.messages.map(message => message.id));
+  state.desktopMessages = state.desktopMessages.filter(message => !persistedIds.has(message.id));
+  for (const message of data.messages) state.liveMessages.delete(message.id);
+  renderMessages(initial, older);
+  if (data.truncated && initial) toast('此旧格式会话较大，目前展示末尾 4 MB 范围内的记录。');
+}
+function renderMessages(scroll = false, older = false) {
+  const container = select('#messages');
+  const previousHeight = container.scrollHeight;
+  const previousTop = container.scrollTop;
+  const nearBottom = previousHeight - previousTop - container.clientHeight < 120;
+  const messages = [...new Map([...state.olderMessages, ...state.baseMessages, ...state.desktopMessages, ...state.liveMessages.values()].map(message => [message.id, message])).values()];
+  let loadMore = select('#load-more');
+  if (state.cursor !== null && !loadMore) {
+    loadMore = document.createElement('button'); loadMore.id = 'load-more'; loadMore.className = 'load-more'; loadMore.textContent = '加载更早的记录 ↑';
+  } else if (state.cursor === null && loadMore) { loadMore.remove(); loadMore = null; }
+  if (loadMore && container.firstChild !== loadMore) container.prepend(loadMore);
+
+  const existing = new Map([...container.querySelectorAll(':scope > [data-message-id]')].map(node => [node.dataset.messageId, node]));
+  let empty = container.querySelector(':scope > .empty');
+  container.querySelectorAll(':scope > .empty').forEach(node => { if (messages.length || node !== empty) node.remove(); });
+  let reference = loadMore?.nextSibling || container.firstChild;
+  for (const message of messages) {
+    const id = String(message.id);
+    const activity = message.role === 'activity';
+    let node = existing.get(id);
+    if (node && node.matches('details') !== activity) { if (node === reference) reference = node.nextSibling; node.remove(); node = null; }
+    if (!node) {
+      if (activity) {
+        node = document.createElement('details'); node.className = 'activity-message';
+        node.innerHTML = '<summary><span class="activity-symbol"></span><span class="activity-label"></span><span class="activity-summary"></span><span class="activity-meta"></span></summary><div class="activity-content"></div>';
+      } else {
+        node = document.createElement('article'); node.innerHTML = '<div class="message-head"><span class="message-avatar"></span><strong></strong><time></time><button type="button" class="icon-button message-copy" data-copy-message aria-label="复制消息" title="复制消息"></button></div><div class="message-body"></div><div class="message-attachments"></div>';
+        node.querySelector('[data-copy-message]').innerHTML = icon('copy');
+      }
+      node.dataset.messageId = id;
+    }
+    existing.delete(id);
+    const text = String(message.text || '');
+    const renderKey = activity ? JSON.stringify([message.kind, message.text, message.status, message.exitCode, message.durationMs, message.cwd, message.output, message.arguments, message.changes]) : JSON.stringify([text, message.attachments]);
+    if (node.dataset.messageRenderKey !== renderKey) {
+      if (activity) {
+        renderActivityMessage(node, message);
+      } else {
+        node.querySelector('.message-body').innerHTML = markdown(text);
+        const attachmentContainer = node.querySelector('.message-attachments');
+        attachmentContainer.innerHTML = (message.attachments || []).map(attachment => `<span class="attachment-label">${icon(attachment.type?.includes('image') ? 'image' : 'file')}<span>${escapeHtml(attachment.name || '附件')}</span></span>`).join('');
+        node.querySelectorAll('.message-body pre').forEach(pre => {
+          const button = document.createElement('button');
+          button.type = 'button'; button.className = 'copy-code'; button.dataset.copyCode = 'true';
+          button.setAttribute('aria-label', '复制代码'); button.title = '复制代码'; button.innerHTML = icon('copy');
+          pre.prepend(button);
+        });
+      }
+      node.dataset.messageRenderKey = renderKey;
+      node.querySelectorAll('a').forEach(link => { link.target = '_blank'; link.rel = 'noopener noreferrer'; });
+    }
+    if (!activity) {
+      node.className = `message ${message.role === 'user' ? 'user' : 'assistant'}`;
+      node.querySelector('.message-avatar').textContent = message.role === 'user' ? '你' : '✳';
+      node.querySelector('.message-head strong').textContent = message.role === 'user' ? '你' : 'Codex';
+      const time = message.timestamp ? new Date(message.timestamp).toLocaleString('zh-CN', { hour:'2-digit', minute:'2-digit', month:'2-digit', day:'2-digit' }) : '';
+      if (node.querySelector('time').textContent !== time) node.querySelector('time').textContent = time;
+      node.dataset.messageText = text;
+    }
+    if (node !== reference) container.insertBefore(node, reference);
+    reference = node.nextSibling;
+  }
+  for (const node of existing.values()) node.remove();
+  if (!messages.length) {
+    if (!empty) { empty = document.createElement('div'); empty.className = 'empty'; empty.setAttribute('role', 'status'); container.append(empty); }
+    const text = state.historyStatus === 'loading' ? '正在读取原生上下文…' : state.historyStatus === 'error' ? state.historyError : '这条会话暂无可展示的消息。';
+    if (empty.textContent !== text) empty.textContent = text;
+  }
+  if (older) container.scrollTop = previousTop + container.scrollHeight - previousHeight;
+  else if (scroll || nearBottom) container.scrollTop = container.scrollHeight;
+  else container.scrollTop = previousTop;
+}
+function formatDuration(durationMs) {
+  if (!Number.isFinite(durationMs)) return '';
+  return durationMs >= 1000 ? `${(durationMs / 1000).toFixed(durationMs >= 10000 ? 0 : 1)} 秒` : `${Math.round(durationMs)} 毫秒`;
+}
+function displayValue(value, maxLength = 60000) {
+  if (value === null || value === undefined) return '';
+  let text = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+  return String(text || '').slice(0, maxLength);
+}
+function activityStatusLabel(status) {
+  return ({ completed:'已完成', inProgress:'执行中', running:'执行中', failed:'失败', declined:'已拒绝', cancelled:'已取消' })[status] || '';
+}
+function diffMarkup(diff) {
+  return String(diff || '').split('\n').map(line => {
+    const kind = line.startsWith('+') && !line.startsWith('+++') ? 'diff-added' : line.startsWith('-') && !line.startsWith('---') ? 'diff-removed' : '';
+    return `<span class="${kind}">${escapeHtml(line) || '&nbsp;'}</span>`;
+  }).join('\n');
+}
+function renderActivityMessage(node, message) {
+  const kind = message.kind || 'activity';
+  const labels = { command:'命令执行', fileChange:'文件变更', tool:'工具调用', webSearch:'网页搜索', imageView:'查看图像' };
+  const symbols = { command:'terminal', fileChange:'file', tool:'devices', webSearch:'searchWeb', imageView:'image' };
+  node.dataset.kind = kind;
+  node.querySelector('.activity-symbol').innerHTML = icon(symbols[kind] || 'info');
+  node.querySelector('.activity-label').textContent = labels[kind] || '执行记录';
+  node.querySelector('.activity-summary').textContent = String(message.text || '').slice(0, 180);
+  const meta = [activityStatusLabel(message.status), message.exitCode !== null && message.exitCode !== undefined ? `退出码 ${message.exitCode}` : '', formatDuration(message.durationMs)].filter(Boolean);
+  node.querySelector('.activity-meta').textContent = meta.join(' · ');
+  const details = [];
+  if (kind === 'command') {
+    details.push(`<pre class="activity-command"><code>${escapeHtml(message.text || '')}</code></pre>`);
+    if (message.cwd) details.push(`<div class="activity-path">${escapeHtml(message.cwd)}</div>`);
+    if (message.output) details.push(`<div class="activity-section-label">输出</div><pre class="activity-output"><code>${escapeHtml(message.output)}</code></pre>`);
+  } else if (kind === 'fileChange') {
+    for (const change of message.changes || []) {
+      details.push(`<div class="activity-file"><div class="activity-file-head"><span>${escapeHtml(change.path)}</span><small>${escapeHtml(change.kind || '')}</small></div>${change.diff ? `<pre class="activity-diff"><code>${diffMarkup(change.diff)}</code></pre>` : ''}</div>`);
+    }
+  } else if (kind === 'tool') {
+    if (message.arguments) details.push(`<div class="activity-section-label">参数</div><pre class="activity-output"><code>${escapeHtml(displayValue(message.arguments, 30000))}</code></pre>`);
+    if (message.output) details.push(`<div class="activity-section-label">${message.status === 'failed' ? '错误' : '结果'}</div><pre class="activity-output"><code>${escapeHtml(message.output)}</code></pre>`);
+  } else if (message.text) {
+    details.push(`<pre class="activity-output"><code>${escapeHtml(message.text)}</code></pre>`);
+  }
+  node.querySelector('.activity-content').innerHTML = details.join('') || '<p class="activity-empty">没有可展示的详细信息。</p>';
+}
+async function copyText(text, success) {
+  try {
+    if (!navigator.clipboard?.writeText) throw new Error('clipboard unavailable');
+    await navigator.clipboard.writeText(text);
+    toast(success);
+  } catch { toast('浏览器不允许访问剪贴板。'); }
+}
+function selectedModelSettings() {
+  if (state.status?.execution.mode === 'desktop' && state.selectedSettings?.pending) {
+    return { model:state.selectedSettings.model,effort:state.selectedSettings.effort };
+  }
+  return state.status?.execution.mode === 'desktop'
+    ? { model: state.desktopRuntime?.model || state.selected?.model || null, effort: state.desktopRuntime?.effort ?? null }
+    : { model: state.selectedSettings?.model || state.selected?.model || null, effort: state.selectedSettings?.effort ?? null };
+}
+function formatTokens(value) {
+  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}m`;
+  if (value >= 1000) return `${Math.round(value / 1000)}k`;
+  return String(value);
+}
+function renderContext() {
+  const context = state.status?.execution.mode === 'desktop' ? state.desktopRuntime?.context : state.contextUsage;
+  const meter = select('#context-meter');
+  const label = select('#context-label');
+  const track = meter.querySelector('.context-track');
+  if (!context || !Number.isSafeInteger(context.usedTokens)) {
+    label.textContent = '暂无用量'; meter.title = '当前执行器没有提供准确的上下文用量';
+    track.hidden = true; meter.classList.remove('warning', 'critical'); return;
+  }
+  const windowTokens = context.windowTokens;
+  const percentage = windowTokens ? Math.round(context.usedTokens / windowTokens * 100) : null;
+  label.textContent = `${formatTokens(context.usedTokens)}${windowTokens ? ` / ${formatTokens(windowTokens)} · ${percentage}%` : ' 已用'}`;
+  meter.title = `已用 ${context.usedTokens.toLocaleString('zh-CN')} token${windowTokens ? ` / 上下文窗口 ${windowTokens.toLocaleString('zh-CN')} token` : ''}${context.cachedTokens != null ? `；缓存输入 ${context.cachedTokens.toLocaleString('zh-CN')} token` : ''}`;
+  track.hidden = !windowTokens;
+  if (windowTokens) {
+    track.setAttribute('aria-valuenow', String(Math.min(100, Math.max(0, percentage))));
+    select('#context-fill').style.width = `${Math.min(100, Math.max(0, percentage))}%`;
+    meter.classList.toggle('warning', percentage >= 70);
+    meter.classList.toggle('critical', percentage >= 90);
+  }
+}
+function renderModelStatus() {
+  const { model, effort } = selectedModelSettings();
+  const option = state.models.find(entry => entry.model === model);
+  select('#model-settings-label').textContent = model ? `${option?.displayName || model}${effort ? ` · ${effort}` : ''}${state.selectedSettings?.pending ? ' · 排队中' : ''}` : '模型信息待载入';
+  const desktop = state.status?.execution.mode === 'desktop';
+  select('#model-settings-button').disabled = state.socket?.readyState !== WebSocket.OPEN
+    || state.settingsBusy || (desktop && (desktopConnecting || !state.desktopRuntime?.attached || !state.desktopRuntime.model));
+  select('#model-settings-button').title = desktop && !state.desktopRuntime?.attached
+    ? '先在 Codex 桌面打开这条原会话，并重新连接'
+    : '选择模型和推理级别';
+  renderContext();
+}
+function renderEffortChoices(preferredEffort = null) {
+  const model = state.models.find(entry => entry.model === select('#model-select').value);
+  const available = model?.supportedReasoningEfforts || [];
+  select('#effort-select').innerHTML = '<option value="">默认</option>' + available.map(effort => `<option value="${escapeHtml(effort)}">${escapeHtml(effort)}</option>`).join('');
+  select('#effort-select').value = preferredEffort && available.includes(preferredEffort) ? preferredEffort : model?.defaultReasoningEffort && available.includes(model.defaultReasoningEffort) ? model.defaultReasoningEffort : '';
+}
+function updateMode() {
+  if (!state.selected) return;
+  const thread = state.selected;
+  if (state.enabled.get(thread.id)?.expires <= Date.now()) state.enabled.delete(thread.id);
+  const control = state.enabled.get(thread.id);
+  const connected = state.socket?.readyState === WebSocket.OPEN;
+  const desktop = state.status?.execution.mode === 'desktop';
+  const desktopConnected = desktop && state.status.execution.connected;
+  const attached = desktopConnected && state.desktopRuntime?.attached === true;
+  const blocked = thread.archived || (desktop ? !attached || desktopConnecting : thread.locked && !control && state.status?.execution.mode !== 'endpoint');
+  select('#enable-control').disabled = Boolean(blocked || control);
+  select('#enable-control').textContent = control ? desktop ? '热接管已授权' : '接续已授权' : thread.archived ? '归档只读' : desktopConnecting && desktop ? '连接中…' : desktop && !desktopConnected ? '桌面未连接' : desktop && !attached ? '原会话未连接' : blocked ? '原客户端占用' : desktop ? '授权热接管' : '接续会话';
+  select('#mode-banner').classList.toggle('controlled', Boolean(control));
+  const banner = desktop
+    ? desktopConnecting ? '正在连接这条原会话；历史仍可查看。'
+      : !desktopConnected ? 'Codex 桌面连接已断开。请保持桌面应用运行，再点击“重新连接”。'
+      : !attached ? state.desktopRuntime?.reason || '这条原会话尚未连接。请先在 Codex 桌面打开它，再点击“重新连接”。'
+      : control ? '热接管已授权 · 与电脑共用同一 Codex 执行实例；消息、运行状态和审批实时同步。'
+      : '这条原会话已连接 · 授权后可发送、停止任务和处理审批。'
+    : control ? `原 ID 接续 · ${control.writable ? '工作区可写 / 操作需审批' : '只读执行沙箱'} · ${control.sharedExecution ? '目标服务已加载此会话' : '独立执行实例'}`
+      : thread.locked ? '原客户端持有此会话：独立接续不会抢占桌面执行。' : '只读镜像：查看原生历史不会启动执行实例。';
+  const modeBanner = select('#mode-banner');
+  if (!modeBanner.querySelector('.mode-copy')) modeBanner.innerHTML = `${icon('shield')}<span class="mode-copy"></span><button type="button" class="button small" id="reconnect-desktop">重新连接</button>`;
+  modeBanner.querySelector('.mode-copy').textContent = banner;
+  const retryButton = select('#reconnect-desktop');
+  retryButton.hidden = !desktop || attached && !desktopConnecting;
+  retryButton.disabled = !connected || desktopConnecting;
+  retryButton.textContent = desktopConnecting ? '连接中…' : '重新连接';
+  select('#composer-mode').innerHTML = `${icon('shield')}${control ? desktop ? '热接管 · 桌面权限' : control.writable ? '工作区可写 · 按需审批' : '接续执行 · 只读沙箱' : '原生记录 · 只读镜像'}`;
+  const waitingForTurn = state.busy && (!desktop || !state.turnId);
+  select('#send-message').disabled = !control || !connected || desktop && (!attached || desktopConnecting) || waitingForTurn || state.settingsBusy || !select('#message-input').value.trim();
+  select('#send-message').title = state.busy && desktop ? '追加指令到当前桌面任务' : '沿用原会话发送';
+  select('#stop-turn').hidden = !state.busy || !state.turnId || !control;
+  select('#message-input').placeholder = state.busy && desktop ? '追加指令给电脑上正在运行的任务…' : control ? '沿着原来的上下文继续…' : '先确认接续方式，再沿着这条会话继续…';
+  select('#composer-note').textContent = control ? desktop ? '消息进入原 Codex 桌面会话；任务不会迁移或重启。断线不会自动重发。' : '原会话 ID 不变；断线不会自动重发消息。' : '只读查看不会唤醒或打断电脑上的执行。';
+  renderModelStatus();
+}
+function renderApprovals() {
+  select('#approvals').innerHTML = [...state.approvals.values()].map(approval => `<section class="approval-card" data-approval="${escapeHtml(approval.requestId)}"><strong>${approval.method === 'item/tool/requestUserInput' ? 'Codex 需要你的回答' : '等待你的审批'}</strong><p>${escapeHtml(approval.reason || '请核对操作范围后决定。')}</p>${approval.command ? `<pre>${escapeHtml(approval.command)}</pre>` : ''}${approval.method !== 'item/tool/requestUserInput' ? `<details><summary>查看完整审批范围</summary><pre>${escapeHtml(JSON.stringify(approval, null, 2))}</pre></details>` : ''}${approval.method === 'item/tool/requestUserInput' ? (approval.questions || []).map(question => `<label>${escapeHtml(question.question)}${question.options ? `<small> ${question.options.map(option => escapeHtml(option.label)).join(' / ')}</small>` : ''}<input data-question="${escapeHtml(question.id)}" placeholder="输入你的回答" maxlength="4000"></label>`).join('') + '<button class="button small" data-decision="answers">提交回答</button>' : `<button class="button small" data-decision="decline">拒绝</button>${approval.method !== 'item/permissions/requestApproval' ? '<button class="button small" data-decision="accept">仅允许本次</button>' : '<p>扩大环境权限请在本机处理，首版仅支持拒绝。</p>'}`}</section>`).join('');
+}
+
+function renderDevices() {
+  const status = state.status;
+  const url = status.connectionUrls.find(address => !address.includes('127.0.0.1')) || status.connectionUrls[0];
+  const desktop = status.execution.mode === 'desktop';
+  const executionStatus = desktop ? status.execution.connected ? 'Codex 桌面 IPC 已连接' : 'Codex 桌面 IPC 未连接' : status.execution.mode === 'endpoint' ? 'App Server 端点' : '独立执行器';
+  const hotStatus = desktop && status.desktopHotAttachVerified ? '已验证实时会话' : desktop && status.desktopHotAttachReady ? '可授权热接管' : '未连接';
+  select('#devices-view').innerHTML = `<div class="devices-heading"><span class="eyebrow">CONNECTED TO YOUR WORLD</span><h1>设备与连接</h1><p>电脑负责执行。你的设备，只需要保持连接。</p></div><div class="device-grid"><section class="device-card"><div class="device-big-icon">${icon('monitor')}</div><h2>${escapeHtml(status.device)}<span class="capability-state">本机桥接在线</span></h2><p>直接读取本机原生会话与历史记录，不复制到第三方数据库。</p><dl><dt>原生会话</dt><dd>${state.threads.length} 条 / ${new Set(state.threads.map(thread => thread.projectId)).size} 个空间</dd><dt>数据目录</dt><dd>${escapeHtml(status.home)}</dd><dt>消息通道</dt><dd>${location.protocol === 'https:' ? 'WSS · TLS 加密' : 'WS · 本机 / 可信局域网演示'}</dd><dt>执行连接</dt><dd>${executionStatus}</dd><dt>热接管</dt><dd>${hotStatus}</dd></dl></section><section class="device-card"><div class="device-big-icon">${icon('devices')}</div><h2>把工作台带在身边</h2><p>${status.lanEnabled || status.secureTransport ? '在可信设备上打开地址并配对，即可查看同一份原生记录。二维码包含控制凭据，切勿公开。' : '当前仅监听本机。手机同 Wi-Fi 体验，请停止本次服务，再运行 start.ps1 -Lan。'}</p><div class="connection-url"><code>${escapeHtml(url)}</code><button class="icon-button" id="copy-url" aria-label="复制连接地址">${icon('copy')}</button></div><button id="show-qr" class="button small">显示配对二维码</button><div id="qr-container" class="qr-wrap" hidden></div><p>${status.secureTransport ? '已配置 HTTPS 入口；请确认反向代理正确转发 WebSocket。' : '注意：HTTP / WS 不加密，不要将此端口直接暴露公网。公网必须配置 HTTPS / WSS 与独立鉴权。'}</p></section><section class="device-card wide"><h2>能力状态，透明可见。</h2><div class="capability-row"><span>原生项目 / 全量本机会话 / 归档记录</span><span class="capability-state">真实数据已接入</span></div><div class="capability-row"><span>历史分页 / WebSocket 实时更新</span><span class="capability-state">可体验</span></div><div class="capability-row"><span>接入 Codex 桌面已加载的原会话</span><span class="capability-state ${hotStatus === '未连接' ? 'pending' : ''}">${hotStatus}</span></div><div class="capability-row"><span>追加指令 / 停止任务 / 审批同步</span><span class="capability-state ${status.execution.connected && desktop ? '' : 'pending'}">${desktop && status.execution.connected ? '同一桌面执行实例' : '桌面未连接'}</span></div><div class="capability-row"><span>公网中继 / 多用户 / 计费 / 推送</span><span class="capability-state pending">未实现</span></div><p>Orbit 是独立第三方原型，非 OpenAI 官方产品。桌面 IPC 属内部接口，升级后需重新做兼容测试；商业发布前还需独立安全审计。</p></section></div>`;
+  const cloudRow = select('#devices-view .capability-row:last-of-type');
+  cloudRow.querySelector('span:first-child').textContent = '多用户云中继 / 设备管理后台';
+  cloudRow.querySelector('span:last-child').textContent = state.cloudMode ? '已连接云端账号' : '可独立部署';
+  cloudRow.querySelector('span:last-child').classList.toggle('pending', !state.cloudMode);
+  select('#copy-url').onclick = async () => { try { await navigator.clipboard.writeText(url); toast('连接地址已复制。'); } catch { toast('浏览器不允许复制，请手动复制地址。'); } };
+  select('#show-qr').onclick = async () => {
+    try {
+      const data = await api('/api/pair/qr', { url });
+      select('#qr-container').innerHTML = `<img src="${escapeHtml(data.image)}" alt="敏感的设备配对二维码"><p>${escapeHtml(data.warning)}</p>`;
+      select('#qr-container').hidden = false;
+    } catch (error) { toast(error.message); }
+  };
+}
+
+function closeNav() { select('#workspace').classList.remove('nav-open'); select('#scrim').hidden = true; }
+async function setView(view) {
+  state.view = view; closeNav();
+  state.pendingModelChoice = null;
+  if (select('#model-dialog').open) select('#model-dialog').close();
+  const devices = view === 'devices';
+  select('#sessions-view').hidden = devices; select('#devices-view').hidden = !devices;
+  document.querySelectorAll('[data-view]').forEach(button => button.classList.toggle('active', button.dataset.view === view));
+  select('#breadcrumb-current').textContent = devices ? '设备与连接' : view === 'archived' ? '已归档' : '所有会话';
+  if (devices) { try { state.status = await api('/api/status'); renderDevices(); } catch (error) { toast(error.message); } return; }
+  state.project = null; state.filter = view === 'archived' ? 'archived' : 'all';
+  state.selected = null; select('#workspace').classList.remove('chat-open');
+  select('#welcome').hidden = false; select('#chat').hidden = true;
+  renderProjects(); renderList(); renderWelcome();
+}
+
+decorate();
+select('#pair-form').addEventListener('submit', async event => {
+  event.preventDefault();
+  const button = event.submitter; button.disabled = true; select('#pair-error').textContent = '';
+  try { await api('/api/pair', { code: select('#pair-code').value }); select('#pair-code').value = ''; await boot(); }
+  catch (error) { select('#pair-error').textContent = error.message; }
+  finally { button.disabled = false; }
+});
+select('#cloud-login-form').addEventListener('submit',async event=>{
+  event.preventDefault();
+  const button=event.submitter;button.disabled=true;select('#cloud-login-error').textContent='';
+  try{
+    await api('/api/cloud/login',{username:select('#cloud-username').value,password:select('#cloud-password').value});
+    select('#cloud-password').value='';
+    await boot();
+  }catch(error){select('#cloud-login-error').textContent=error.message}
+  finally{button.disabled=false}
+});
+select('#cloud-show-login').onclick = () => setCloudAuthMode(false);
+select('#cloud-show-register').onclick = () => setCloudAuthMode(true);
+select('#cloud-register-form').addEventListener('submit', async event => {
+  event.preventDefault();
+  const version = cloudAuthVersion;
+  const button = event.submitter;
+  select('#cloud-register-error').textContent = '';
+  if (select('#register-password').value !== select('#register-password-confirm').value) {
+    select('#cloud-register-error').textContent = '两次输入的密码不一致。';
+    select('#register-password-confirm').focus();
+    return;
+  }
+  button.disabled = true;
+  try {
+    await api('/api/cloud/register', {
+      username:select('#register-username').value,
+      displayName:select('#register-display-name').value,
+      password:select('#register-password').value
+    });
+    select('#cloud-register-form').reset();
+    await boot();
+  } catch (error) {
+    if (version === cloudAuthVersion) select('#cloud-register-error').textContent = error.message;
+  } finally { button.disabled = false; }
+});
+select('#cloud-add-computer').onclick = () => {
+  select('#cloud-onboarding').hidden = !select('#cloud-onboarding').hidden;
+  if (!select('#cloud-onboarding').hidden) updateComputerInstallCommand();
+};
+select('#cloud-refresh-devices').onclick = async event => {
+  const button = event.currentTarget;
+  button.disabled = true;
+  try { await refreshCloudDevices(); }
+  catch (error) { toast(error.message); }
+  finally { button.disabled = false; }
+};
+async function copyInstallCommand(commandSelector,statusSelector){
+  const command=select(commandSelector).textContent.trim();
+  const status=select(statusSelector);
+  try {
+    await navigator.clipboard.writeText(command);
+    status.textContent = '命令已复制，粘贴到电脑 PowerShell 或终端运行。';
+  } catch {
+    const temporary = document.createElement('textarea');
+    temporary.value = command;
+    temporary.setAttribute('readonly', '');
+    temporary.style.position = 'fixed';
+    temporary.style.opacity = '0';
+    document.body.append(temporary);
+    temporary.select();
+    const copied = document.execCommand('copy');
+    temporary.remove();
+    status.textContent = copied ? '命令已复制，粘贴到电脑 PowerShell 或终端运行。' : '无法自动复制，请长按命令并手动复制。';
+  }
+}
+select('#cloud-copy-install').onclick=()=>copyInstallCommand('#cloud-install-command','#cloud-install-status');
+function updateComputerInstallCommand(){
+  select('#cloud-install-command').textContent=computerInstallCommands.windows;
+  select('#cloud-install-status').textContent='';
+}
+updateComputerInstallCommand();
+document.addEventListener('click', async event => {
+  const revoke = event.target.closest('[data-cloud-revoke]');
+  if (revoke) {
+    const device = state.cloudDevices.find(item => item.id === revoke.dataset.cloudRevoke);
+    if (!device || !window.confirm(`移除“${device.name}”？其连接密钥将永久失效，重新添加需要生成新配置。`)) return;
+    revoke.disabled = true;
+    try {
+      await api(`/api/cloud/devices/${encodeURIComponent(device.id)}/revoke`, {});
+      await refreshCloudDevices();
+      toast('电脑已移除，其连接密钥已失效。');
+    } catch (error) { toast(error.message); revoke.disabled = false; }
+    return;
+  }
+  const cloudDevice=event.target.closest('[data-cloud-device]');
+  if(cloudDevice){
+    state.cloudDeviceId=cloudDevice.dataset.cloudDevice;
+    localStorage.setItem('orbit_cloud_device_id',state.cloudDeviceId);
+    if(state.cloudPairCode){
+      cloudDevice.disabled=true;
+      try{
+        await api('/api/pair',{code:state.cloudPairCode});
+        state.cloudPairCode=null;
+        showCloudDevices();
+        await boot();
+      }catch(error){
+        showCloudDevices(error.message);
+      }
+      return;
+    }
+    await boot();return;
+  }
+  if(event.target.closest('#cloud-logout-picker')){
+    try{await api('/api/cloud/logout',{});}catch{}
+    localStorage.removeItem('orbit_cloud_device_id');state.cloudDeviceId=null;state.cloudUser=null;state.cloudDevices=[];
+    showCloudLogin();return;
+  }
+  if(event.target.closest('#cloud-device-switcher')){showCloudDevices();return;}
+  if (event.target.closest('#reconnect-desktop')) {
+    const id = state.selected?.id;
+    if (!id || select('#reconnect-desktop').disabled) return;
+    try {
+      await subscribeThread(id);
+      if (id === state.selected?.id) toast(state.desktopRuntime?.attached ? '这条原会话已连接，请授权后操作。' : state.desktopRuntime?.reason || '原会话尚未连接。');
+    } catch (error) { toast(error.message); }
+    return;
+  }
+  const copyCodeButton = event.target.closest('[data-copy-code]');
+  if (copyCodeButton) {
+    await copyText(copyCodeButton.closest('pre')?.querySelector('code')?.textContent || '', '代码已复制。');
+    return;
+  }
+  const copyMessageButton = event.target.closest('[data-copy-message]');
+  if (copyMessageButton) {
+    await copyText(copyMessageButton.closest('[data-message-id]')?.dataset.messageText || '', '消息已复制。');
+    return;
+  }
+  const thread = event.target.closest('[data-thread]');
+  if (thread) { await openThread(thread.dataset.thread); return; }
+  const project = event.target.closest('[data-project]');
+  if (project) {
+    state.project = state.project === project.dataset.project ? null : project.dataset.project; state.filter = 'all';
+    state.view = 'sessions'; select('#sessions-view').hidden = false; select('#devices-view').hidden = true;
+    select('#workspace').classList.remove('chat-open'); closeNav(); renderProjects(); renderList(); return;
+  }
+  const filter = event.target.closest('[data-filter]');
+  if (filter) { state.filter = filter.dataset.filter; renderList(); return; }
+  const nav = event.target.closest('[data-view]');
+  if (nav) { await setView(nav.dataset.view); return; }
+  if (event.target.closest('#load-more')) { try { await loadMessages(false, true); } catch (error) { toast(error.message); } }
+  const decision = event.target.closest('[data-decision]');
+  if (decision) {
+    const card = decision.closest('[data-approval]');
+    const answers = Object.fromEntries([...card.querySelectorAll('[data-question]')].map(input => [input.dataset.question, input.value]));
+    try { await rpc('approval.reply', { requestId:card.dataset.approval, decision:decision.dataset.decision, answers }); state.approvals.delete(card.dataset.approval); renderApprovals(); }
+    catch (error) { toast(error.message); }
+  }
+});
+select('#search').addEventListener('input', event => { state.search = event.target.value; renderList(); });
+document.addEventListener('keydown', event => { if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); select('#search').focus(); } });
+select('#refresh').onclick = async () => {
+  try {
+    await refreshThreads();
+    if (state.selected) {
+      await loadMessages(false);
+      if (state.status?.execution.mode === 'desktop') await subscribeThread(state.selected.id);
+    }
+    toast('原生记录已刷新。');
+  } catch (error) { toast(error.message); }
+};
+select('#menu-button').onclick = () => { select('#workspace').classList.add('nav-open'); select('#scrim').hidden = false; };
+select('#scrim').onclick = closeNav;
+select('#back').onclick = () => select('#workspace').classList.remove('chat-open');
+select('#connect-device').onclick = () => state.cloudMode ? showCloudDevices() : setView('devices');
+select('#details-toggle').onclick = () => { select('#chat-details').hidden = !select('#chat-details').hidden; };
+select('#logout').onclick = async () => {
+  try {
+    if(state.cloudMode){
+      await api('/api/cloud/logout',{});
+      localStorage.removeItem('orbit_cloud_device_id');state.cloudDeviceId=null;state.cloudUser=null;state.cloudDevices=[];
+      showCloudLogin();
+    }else{
+      await api('/api/logout',{});state.enabled.clear();showPairing();
+    }
+  } catch(error){toast(error.message)}
+};
+select('#enable-control').onclick = () => {
+  const desktop = state.status.execution.mode === 'desktop';
+  select('#control-form').reset(); select('#control-error').textContent = '';
+  select('#control-title').textContent = desktop ? '授权热接管' : '沿用原会话';
+  select('#control-description').textContent = desktop ? '不创建新会话、不迁移执行器。Orbit 将订阅并控制 Codex 桌面当前加载的原会话。' : '保持原会话 ID，使用独立执行通道继续。原客户端占用时不会强行抢锁。';
+  select('#control-notice').textContent = desktop ? '消息、追加指令、停止和审批将交给原 Codex 桌面实例；权限与运行策略沿用电脑端设置。' : '如果原客户端仍占用这条会话，Orbit 会拒绝发送，不会强制抢锁。';
+  select('#allow-write-row').hidden = desktop;
+  select('#control-confirm-copy').textContent = desktop ? '我确认授权这台设备向原 Codex 会话发送指令、停止任务并处理审批。' : '我已停止在原客户端使用这条会话，并理解首版限制。';
+  select('#confirm-control-button').textContent = desktop ? '授权热接管 ↗' : '确认接续 ↗';
+  select('#control-dialog').showModal();
+};
+select('#cancel-control').onclick = () => {
+  state.reopenModelAfterGrant = false; state.pendingModelChoice = null;
+  select('#control-dialog').close();
+};
+select('#control-form').addEventListener('submit', async event => {
+  event.preventDefault(); const button = event.submitter; button.disabled = true;
+  const id = state.selected.id;
+  try {
+    const result = await rpc('thread.enable', { threadId:id, confirm:select('#control-confirm').checked, writable:select('#allow-write').checked });
+    state.enabled.set(id, result); select('#control-dialog').close(); updateMode(); toast('已确认接续方式。尚未发送消息。');
+    if (state.reopenModelAfterGrant) {
+      setTimeout(() => {
+        state.reopenModelAfterGrant = false;
+        if (state.selected?.id === id) select('#model-settings-button').click();
+      }, 0);
+    }
+  } catch (error) { select('#control-error').textContent = error.message; }
+  finally { button.disabled = false; }
+});
+async function openModelSettings() {
+  if (select('#model-settings-button').disabled || !state.selected) return;
+  const id = state.selected.id;
+  const selectionVersion = state.selectionVersion;
+  try {
+    const { models } = await api('/api/models');
+    if (selectionVersion !== state.selectionVersion || id !== state.selected?.id) return;
+    state.models = models;
+    const current = selectedModelSettings();
+    const pending = state.pendingModelChoice?.threadId === id ? state.pendingModelChoice : null;
+    const model = pending?.model || current.model;
+    const effort = pending ? pending.effort : current.effort;
+    const dialog = select('#model-dialog');
+    dialog.dataset.threadId = id;
+    dialog.dataset.expectedModel = current.model || '';
+    dialog.dataset.expectedEffort = JSON.stringify(current.effort);
+    select('#model-select').innerHTML = models.map(entry => `<option value="${escapeHtml(entry.model)}">${escapeHtml(entry.displayName)}</option>`).join('');
+    if (model && !models.some(entry => entry.model === model)) {
+      select('#model-select').insertAdjacentHTML('afterbegin', `<option value="" disabled>当前模型 ${escapeHtml(model)} 不在目录中</option>`);
+      select('#model-select').value = '';
+    } else select('#model-select').value = model || '';
+    renderEffortChoices(effort);
+    const authorized = Boolean(state.enabled.get(id));
+    const turnRunning = Boolean(state.desktopRuntime?.turnId);
+    select('#model-description').textContent = authorized
+      ? turnRunning ? '当前任务继续运行；新参数会排队到它完成后的下一轮。' : '更改将在这条会话的下一轮生效。'
+      : turnRunning ? '可以先查看和选择；授权后会排队到当前任务完成。' : '可以先查看可用选项；授权热接管后才能应用更改。';
+    select('#model-note').textContent = state.status.execution.mode === 'desktop'
+      ? turnRunning ? '执行中的任务不会切换；新参数会在它结束后应用，并用于下一轮。' : '只修改原桌面会话的下一轮；运行中的任务不会切换。'
+      : '只对本设备接下来的消息生效；不会修改 Codex 全局设置。';
+    select('#authorize-model').hidden = authorized;
+    select('#apply-model').disabled = !authorized || !select('#model-select').value;
+    select('#apply-model').textContent = turnRunning ? '排到下一轮' : '应用到下一轮';
+    select('#model-error').textContent = '';
+    dialog.showModal();
+    renderModelStatus();
+  } catch (error) { toast(error.message); }
+}
+select('#model-settings-button').onclick = openModelSettings;
+select('#model-select').onchange = () => {
+  renderEffortChoices();
+  select('#apply-model').disabled = !state.enabled.get(select('#model-dialog').dataset.threadId) || !select('#model-select').value;
+};
+select('#cancel-model').onclick = () => { state.pendingModelChoice = null; select('#model-dialog').close(); };
+select('#authorize-model').onclick = () => {
+  if (!state.selected || state.selected.id !== select('#model-dialog').dataset.threadId) return;
+  state.pendingModelChoice = { threadId:state.selected.id,model:select('#model-select').value,effort:select('#effort-select').value || null };
+  state.reopenModelAfterGrant = true;
+  select('#model-dialog').close();
+  select('#enable-control').click();
+};
+select('#model-form').addEventListener('submit', async event => {
+  event.preventDefault();
+  const button = event.submitter;
+  const dialog = select('#model-dialog');
+  const id = dialog.dataset.threadId;
+  const model = select('#model-select').value;
+  const effort = select('#effort-select').value || null;
+  if (!id || id !== state.selected?.id) {
+    select('#model-error').textContent = '会话状态已变化，请重新打开设置。';
+    return;
+  }
+  if (!state.enabled.has(id)) {
+    select('#model-error').textContent = '先授权热接管，才能更改原 Codex 会话设置。';
+    return;
+  }
+  if (model === dialog.dataset.expectedModel && effort === JSON.parse(dialog.dataset.expectedEffort)) { dialog.close(); return; }
+  button.disabled = true; state.settingsBusy = true; select('#model-error').textContent = ''; updateMode();
+  try {
+    const result = await rpc('thread.settings', { threadId:id, model, effort, expectedModel:dialog.dataset.expectedModel, expectedEffort:JSON.parse(dialog.dataset.expectedEffort) });
+    if (id === state.selected?.id) {
+      if (result.queued) state.selectedSettings = { model:result.model,effort:result.effort,pending:true };
+      else {
+        if (state.status.execution.mode === 'desktop' && state.desktopRuntime?.attached) state.desktopRuntime = { ...state.desktopRuntime, model: result.model, effort: result.effort };
+        else state.selectedSettings = { model: result.model, effort: result.effort,pending:false };
+      }
+      state.pendingModelChoice = null;
+      dialog.close();
+      toast(result.queued ? '已排队；当前任务完成后应用到下一轮。' : '下一轮模型参数已更新。');
+      renderModelStatus();
+    }
+  } catch (error) { select('#model-error').textContent = error.message; }
+  finally { button.disabled = false; state.settingsBusy = false; updateMode(); }
+});
+select('#message-input').addEventListener('input', updateMode);
+select('#message-input').addEventListener('keydown', event => {
+  if (event.key === 'Enter' && !event.shiftKey && !event.isComposing && !matchMedia('(max-width:760px)').matches) { event.preventDefault(); if (!select('#send-message').disabled) select('#composer').requestSubmit(); }
+});
+select('#composer').addEventListener('submit', async event => {
+  event.preventDefault(); if (select('#send-message').disabled) return;
+  const id = state.selected.id; const text = select('#message-input').value; const wasBusy = state.busy;
+  const turnId = state.turnId;
+  const steering = wasBusy && state.status.execution.mode === 'desktop';
+  state.busy = true; updateMode();
+  try {
+    const result = await rpc(steering ? 'turn.steer' : 'turn.start', { threadId:id, text, ...(steering ? { turnId } : {}) });
+    if (state.selected?.id === id) { state.turnId = result.completed ? null : result.turnId || (steering ? turnId : null); state.busy = !result.completed; select('#message-input').value = ''; scheduleRefresh(); }
+  } catch (error) { if (state.selected?.id === id) state.busy = wasBusy; toast(error.message); }
+  updateMode();
+});
+select('#stop-turn').onclick = async () => { try { await rpc('turn.interrupt', { threadId:state.selected.id, turnId:state.turnId }); } catch (error) { toast(error.message); } };
+boot();