pi2web 0.2.0 → 0.2.1

package/web/hid-keyboard.js

@@ -0,0 +1,420 @@
+(() => {
+  'use strict';
+
+  // Wire contract: Nozzala v1-codex-full 1.0.0, build 51AE6B3BF94B49FF.
+  // Reference: CodexFull WebHID Console v0.1.0 (2026-08-31), DEVELOPMENT.md.
+  // Host requests use {id,m,p} without a newline; replies/notifications end in LF.
+  // RPCs are serialized, use IDs 0..998, and wait 50ms after each reply.
+  const REPORT_ID = 6;
+  const CHANNEL_JSON = 2;
+  const REPORT_BYTES = 63;
+  const PAYLOAD_BYTES = 61;
+  const VENDOR_ID = 0x303A;
+  const PRODUCT_ID = 0x8360;
+  const USAGE_PAGE = 0xFF00;
+  const USAGE = 1;
+  const STORAGE_KEY = 'rpSessionKeyboardBindings';
+  // Adjacent slots deliberately alternate across the color wheel so all six
+  // remain easy to distinguish when they are lit at the same time.
+  const PALETTE = ['#FF3040', '#00D9FF', '#FFE600', '#3D5AFE', '#30E070', '#D840FF'];
+  const BUSY_STATUSES = new Set(['starting', 'streaming', 'stopping']);
+  // codex-full firmware effects that remain meaningful on one independently
+  // bound key. Spatial effects such as snake/rainbow are intentionally unused.
+  const EFFECT_OFF = 0;
+  const EFFECT_SOLID = 1;
+  const EFFECT_BREATH = 4;
+  const EFFECT_SHALLOW_BREATH = 6;
+  // Idle stays continuously lit. Active work uses a slow, full-depth breath
+  // so each cycle clearly falls toward dark before returning to full brightness.
+  // Waiting remains a shallow breath to read as a separate third state.
+  const ACTIVITY_LIGHTS = {
+    llm: {effect:EFFECT_BREATH, speed:0.12},
+    tool: {effect:EFFECT_BREATH, speed:0.45},
+    retry: {effect:EFFECT_BREATH, speed:0.8},
+    waiting: {effect:EFFECT_SHALLOW_BREATH, speed:0.1},
+  };
+  const BUSY_LIGHT = {effect:EFFECT_BREATH, speed:0.15};
+
+  // Keep activity in one place; the light phase is derived, never stored twice.
+  const newActivity = () => ({turn:'idle', tools:new Set(), bash:new Set(), dialogs:new Set()});
+  const resetTurn = (activity, turn = 'idle') => { activity.turn = turn; activity.tools.clear(); };
+  const activityPhase = activity => {
+    if (!activity) return 'idle';
+    if (activity.dialogs.size) return 'waiting';
+    if (activity.tools.size || activity.bash.size) return 'tool';
+    return activity.turn;
+  };
+
+  const normalizeColor = value => {
+    const color = String(value || '').trim().toUpperCase();
+    return /^#[0-9A-F]{6}$/.test(color) ? color : null;
+  };
+
+  class JsonLineAssembler {
+    constructor() { this.reset(); }
+    reset() { this.decoder = new TextDecoder(); this.buffer = ''; }
+    feed(data) {
+      this.buffer += this.decoder.decode(data, {stream:true});
+      const messages = [];
+      let newline;
+      while ((newline = this.buffer.indexOf('\n')) >= 0) {
+        const line = this.buffer.slice(0, newline).trim();
+        this.buffer = this.buffer.slice(newline + 1);
+        if (line) messages.push(JSON.parse(line));
+      }
+      return messages;
+    }
+  }
+
+  class SessionKeyboardController {
+    constructor({onKey, onStateChange, onBindingsChange, onError} = {}) {
+      this.onKey = onKey;
+      this.onStateChange = onStateChange;
+      this.onBindingsChange = onBindingsChange;
+      this.onError = onError;
+      this.device = null;
+      this.closePromise = Promise.resolve();
+      this.requestId = 0;
+      this.queue = Promise.resolve();
+      this.pending = new Map();
+      this.assembler = new JsonLineAssembler();
+      this.agents = new Map();
+      this.activities = new Map();
+      this.sentLights = new Map();
+      this.lastPress = new Map();
+      this.syncRequested = false;
+      this.forceSync = false;
+      this.syncPromise = null;
+      this.bindings = this.loadBindings();
+      this.handleInputReport = this.handleInputReport.bind(this);
+      this.handleDisconnect = this.handleDisconnect.bind(this);
+      navigator.hid?.addEventListener('disconnect', this.handleDisconnect);
+    }
+
+    loadBindings() {
+      try {
+        const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+        if (!Array.isArray(parsed)) return new Map();
+        return new Map(parsed.flatMap(item => {
+          const slot = Number(item?.slot), agentId = String(item?.agentId || ''), color = normalizeColor(item?.color);
+          return Number.isInteger(slot) && slot >= 0 && slot < 6 && agentId && color ? [[slot, {agentId, color}]] : [];
+        }));
+      } catch { return new Map(); }
+    }
+
+    saveBindings() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.getBindings()));
+      this.onBindingsChange?.(this.getBindings());
+      this.syncLights(true).catch(error => this.fail(error));
+    }
+
+    get connected() { return Boolean(this.device?.opened); }
+    getBindings() { return [...this.bindings].sort(([a], [b]) => a - b).map(([slot, value]) => ({slot, ...value})); }
+    getBinding(agentId) { return this.getBindings().find(binding => binding.agentId === agentId) || null; }
+    getSlot(slot) { const value = this.bindings.get(Number(slot)); return value ? {slot:Number(slot), ...value} : null; }
+    getFreeSlots() { return Array.from({length:6}, (_, slot) => slot).filter(slot => !this.bindings.has(slot)); }
+
+    nextColor() {
+      const used = new Set(this.getBindings().map(binding => binding.color));
+      return PALETTE.find(color => !used.has(color)) || PALETTE[this.bindings.size % PALETTE.length];
+    }
+
+    bind(agentId, slot, color = this.nextColor()) {
+      slot = Number(slot); color = normalizeColor(color);
+      if (!agentId || !Number.isInteger(slot) || slot < 0 || slot > 5 || !color) throw Error('无效的键盘绑定');
+      const occupied = this.bindings.get(slot);
+      if (occupied && occupied.agentId !== agentId) throw Error(`按键 ${slot + 1} 已被其他 Session 使用`);
+      for (const [boundSlot, binding] of this.bindings) if (binding.agentId === agentId) this.bindings.delete(boundSlot);
+      this.bindings.set(slot, {agentId, color});
+      this.saveBindings();
+      return this.getSlot(slot);
+    }
+
+    autoBind(agentId) {
+      const existing = this.getBinding(agentId);
+      if (existing) return existing;
+      const slot = this.getFreeSlots()[0];
+      return slot === undefined ? null : this.bind(agentId, slot, this.nextColor());
+    }
+
+    unbind(agentId) {
+      const entry = [...this.bindings].find(([, binding]) => binding.agentId === agentId);
+      if (!entry) return false;
+      this.bindings.delete(entry[0]);
+      this.saveBindings();
+      return true;
+    }
+
+    setColor(agentId, color) {
+      color = normalizeColor(color);
+      const entry = [...this.bindings].find(([, binding]) => binding.agentId === agentId);
+      if (!entry || !color) throw Error('无效的 Session 颜色');
+      entry[1].color = color;
+      this.saveBindings();
+      return {slot:entry[0], ...entry[1]};
+    }
+
+    setAgents(agents) {
+      this.agents = new Map((agents || []).map(agent => [agent.agentId, agent]));
+      for (const agentId of this.activities.keys()) this.reconcileActivity(agentId);
+      this.syncLights().catch(error => this.fail(error));
+    }
+
+    updateAgent(agent) {
+      if (!agent?.agentId) return;
+      this.agents.set(agent.agentId, agent);
+      if (agent.activity) {
+        const activity = this.activities.get(agent.agentId) || newActivity();
+        activity.bash = new Set(agent.activity.bashIds || []);
+        activity.dialogs = new Set(agent.activity.dialogIds || []);
+        this.activities.set(agent.agentId, activity);
+      }
+      this.reconcileActivity(agent.agentId);
+      this.syncLights().catch(error => this.fail(error));
+    }
+
+    setAgentSnapshot(agent) {
+      // A gap invalidates old details; restore independent work from the server.
+      // Older servers omit activity and fall back to ordinary Agent status.
+      this.activities.delete(agent.agentId);
+      this.updateAgent(agent);
+    }
+
+    reconcileActivity(agentId) {
+      const activity = this.activities.get(agentId), status = this.agents.get(agentId)?.status;
+      if (!activity) return;
+      if (!status || ['unloaded', 'stopped', 'error'].includes(status)) {
+        this.activities.delete(agentId);
+        return;
+      }
+      // Status describes the LLM run, not independent !bash commands or dialogs.
+      if (!BUSY_STATUSES.has(status)) resetTurn(activity);
+      if (activityPhase(activity) === 'idle') this.activities.delete(agentId);
+    }
+
+    handleAgentEvent(agentId, event) {
+      const activity = this.activities.get(agentId) || newActivity();
+      const previous = activityPhase(activity);
+      switch (event.type) {
+        case 'agent_start':
+          resetTurn(activity, 'llm');
+          break;
+        case 'message_start':
+          if ((event.message?.role || event.role) !== 'assistant') return;
+          activity.turn = 'llm';
+          break;
+        case 'message_update':
+          activity.turn = 'llm';
+          break;
+        case 'tool_execution_start':
+        case 'tool_execution_update':
+          activity.turn = 'llm';
+          activity.tools.add(event.toolCallId || event.toolName || 'default');
+          break;
+        case 'tool_execution_end':
+          activity.tools.delete(event.toolCallId || event.toolName || 'default');
+          break;
+        case 'bash_execution_start':
+        case 'bash_execution_update':
+          activity.bash.add(event.id || 'default');
+          break;
+        case 'bash_execution_end':
+          activity.bash.delete(event.id || 'default');
+          break;
+        case 'auto_retry_start':
+          resetTurn(activity, 'retry');
+          break;
+        case 'auto_retry_end':
+          activity.turn = event.success === false ? 'idle' : 'llm';
+          break;
+        case 'extension_ui_request':
+          activity.dialogs.add(event.requestId);
+          break;
+        case 'extension_ui_response':
+          activity.dialogs.delete(event.requestId);
+          break;
+        case 'agent_end':
+          resetTurn(activity, event.willRetry ? 'retry' : 'idle');
+          break;
+        case 'agent_settled':
+          resetTurn(activity);
+          break;
+        default:
+          return;
+      }
+      const phase = activityPhase(activity);
+      if (phase === 'idle') this.activities.delete(agentId); else this.activities.set(agentId, activity);
+      if (phase !== previous) this.syncLights().catch(error => this.fail(error));
+    }
+
+    isBusy(agentId) { return BUSY_STATUSES.has(this.agents.get(agentId)?.status); }
+
+    collection(device) {
+      return device.collections.find(item => item.usagePage === USAGE_PAGE && item.usage === USAGE &&
+        item.outputReports.some(report => report.reportId === REPORT_ID) && item.inputReports.some(report => report.reportId === REPORT_ID));
+    }
+
+    async connect({request = true} = {}) {
+      if (!window.isSecureContext || !navigator.hid) throw Error('WebHID 需要 Chrome/Edge，并通过 HTTPS 或 localhost 打开');
+      let devices = (await navigator.hid.getDevices()).filter(device => device.vendorId === VENDOR_ID && device.productId === PRODUCT_ID && this.collection(device));
+      if (!devices.length && request) devices = await navigator.hid.requestDevice({filters:[{vendorId:VENDOR_ID, productId:PRODUCT_ID, usagePage:USAGE_PAGE, usage:USAGE}]});
+      if (!devices.length) return false;
+      const device = devices[0];
+      // Finish the previous close and sync before reusing the same HIDDevice.
+      await this.closePromise;
+      await this.syncPromise?.catch(() => undefined);
+      try {
+        if (!device.opened) await device.open();
+        if (!this.collection(device)) throw Error('键盘缺少兼容的 Vendor HID 接口');
+        if (this.device && this.device !== device) await this.disconnect();
+        if (this.device === device) device.removeEventListener('inputreport', this.handleInputReport);
+        this.device = device;
+        device.addEventListener('inputreport', this.handleInputReport);
+        this.assembler.reset(); this.sentLights.clear();
+        await this.syncLights(true);
+        if (this.device !== device || !device.opened) throw Error('键盘已断开');
+      } catch (error) {
+        // disconnect() clears local state even if close() fails. Keep the
+        // initialization error as the reason reported to the caller.
+        if (this.device === device) await this.disconnect().catch(() => undefined);
+        else if (device.opened) await device.close().catch(() => undefined);
+        throw error;
+      }
+      this.onStateChange?.({connected:true, name:device.productName || 'Codex Micro'});
+      return true;
+    }
+
+    async restoreAuthorized() {
+      if (!window.isSecureContext || !navigator.hid) return false;
+      try { return await this.connect({request:false}); }
+      catch (error) { this.fail(error); return false; }
+    }
+
+    async disconnect() {
+      if (!this.device) return this.closePromise;
+      const device = this.device; this.device = null;
+      device.removeEventListener('inputreport', this.handleInputReport);
+      // Detach and notify before awaiting the OS: close() can fail or stall.
+      for (const waiter of this.pending.values()) { clearTimeout(waiter.timer); waiter.reject(Error('键盘已断开')); }
+      this.pending.clear(); this.assembler.reset(); this.sentLights.clear();
+      this.syncRequested = false; this.forceSync = false;
+      const closing = device.opened ? device.close() : Promise.resolve();
+      this.closePromise = closing.catch(() => undefined);
+      this.onStateChange?.({connected:false, name:''});
+      return closing;
+    }
+
+    handleDisconnect(event) { if (event.device === this.device) this.disconnect().catch(error => this.fail(error)); }
+
+    handleInputReport(event) {
+      if (event.device !== this.device || Number(event.reportId) !== REPORT_ID) return;
+      try {
+        const bytes = new Uint8Array(event.data.buffer, event.data.byteOffset, event.data.byteLength);
+        if (bytes.length < 2 || bytes[0] !== CHANNEL_JSON || bytes[1] > PAYLOAD_BYTES || bytes[1] > bytes.length - 2) throw Error('收到无效的键盘 HID 数据');
+        for (const message of this.assembler.feed(bytes.slice(2, 2 + bytes[1]))) this.handleMessage(message);
+      } catch (error) { this.fail(error); }
+    }
+
+    handleMessage(message) {
+      if (Object.prototype.hasOwnProperty.call(message, 'id')) {
+        const waiter = this.pending.get(String(message.id));
+        if (waiter) { this.pending.delete(String(message.id)); clearTimeout(waiter.timer); waiter.resolve(message); }
+        return;
+      }
+      if (message.m !== 'v.oai.hid' || !/^AG0[0-5]$/.test(message.p?.k) || Number(message.p?.act) !== 1) return;
+      const slot = Number(message.p.k.slice(-1)), now = Date.now();
+      if (now - (this.lastPress.get(slot) || 0) < 250) return;
+      this.lastPress.set(slot, now);
+      const binding = this.getSlot(slot);
+      if (binding) this.onKey?.(binding, message);
+    }
+
+    nextId() { this.requestId = this.requestId >= 998 ? 0 : this.requestId + 1; return this.requestId; }
+
+    reports(message) {
+      const bytes = new TextEncoder().encode(message), reports = [];
+      for (let offset = 0; offset < bytes.length; offset += PAYLOAD_BYTES) {
+        const fragment = bytes.slice(offset, offset + PAYLOAD_BYTES), report = new Uint8Array(REPORT_BYTES);
+        report[0] = CHANNEL_JSON; report[1] = fragment.length; report.set(fragment, 2); reports.push(report);
+      }
+      return reports;
+    }
+
+    transmit(request) {
+      const device = this.device;
+      const job = this.queue.then(async () => {
+        if (this.device !== device || !device?.opened) throw Error('键盘未连接');
+        const response = new Promise((resolve, reject) => {
+          const timer = setTimeout(() => { this.pending.delete(String(request.id)); reject(Error('键盘响应超时')); }, 5000);
+          this.pending.set(String(request.id), {resolve, reject, timer});
+        });
+        // A timeout/disconnect can reject the reply while sendReport is still
+        // pending. Observe it now; the await below still propagates the error.
+        response.catch(() => undefined);
+        try {
+          for (const report of this.reports(JSON.stringify(request))) {
+            if (this.device !== device || !device.opened) throw Error('键盘已断开');
+            await device.sendReport(REPORT_ID, report);
+          }
+          const result = await response;
+          if (result?.error) throw Error(result.error.message || '键盘拒绝了灯光设置');
+          await new Promise(resolve => setTimeout(resolve, 50));
+          return result;
+        } catch (error) {
+          const waiter = this.pending.get(String(request.id));
+          if (waiter) clearTimeout(waiter.timer);
+          this.pending.delete(String(request.id));
+          throw error;
+        }
+      });
+      this.queue = job.catch(() => undefined);
+      return job;
+    }
+
+    lightRequest(slot, color, effect, speed = 0) {
+      const enabled = effect !== EFFECT_OFF;
+      return {id:this.nextId(), m:'v.oai.thstatus', p:[{id:slot, c:parseInt(color.slice(1), 16), b:enabled ? 1 : 0, e:effect, s:speed, sk:0, sa:0}]};
+    }
+
+    lightState(slot) {
+      const binding = this.bindings.get(slot), active = Boolean(binding && this.agents.has(binding.agentId));
+      if (!active) return {color:binding?.color || '#000000', effect:EFFECT_OFF, speed:0};
+      const phase = activityPhase(this.activities.get(binding.agentId));
+      let animation = ACTIVITY_LIGHTS[phase];
+      if (!animation && this.agents.get(binding.agentId)?.status === 'waiting_for_user') animation = ACTIVITY_LIGHTS.waiting;
+      if (!animation && this.isBusy(binding.agentId)) animation = BUSY_LIGHT;
+      return {color:binding.color, effect:animation?.effect || EFFECT_SOLID, speed:animation?.speed || 0};
+    }
+
+    async syncLights(force = false) {
+      if (!this.connected) return;
+      this.syncRequested = true;
+      this.forceSync ||= force;
+      if (this.syncPromise) return this.syncPromise;
+      const device = this.device;
+      // Defer the first pass so synchronous updates use the latest state. Clear
+      // the worker inside its own finally, even when every light is a cache hit.
+      this.syncPromise = Promise.resolve().then(async () => {
+        try {
+          if (this.device !== device || !device.opened) throw Error('键盘已断开');
+          do {
+            this.syncRequested = false;
+            const forcePass = this.forceSync; this.forceSync = false;
+            for (let slot = 0; slot < 6; slot++) {
+              const {color, effect, speed} = this.lightState(slot), signature = `${color}:${effect}:${speed}`;
+              if (!forcePass && this.sentLights.get(slot) === signature) continue;
+              await this.transmit(this.lightRequest(slot, color, effect, speed));
+              if (this.device !== device || !device.opened) throw Error('键盘已断开');
+              this.sentLights.set(slot, signature);
+            }
+          } while (this.syncRequested && this.connected);
+        } finally { this.syncPromise = null; }
+      });
+      return this.syncPromise;
+    }
+
+    fail(error) { this.onError?.(error instanceof Error ? error : Error(String(error))); }
+  }
+
+  window.SessionKeyboardController = SessionKeyboardController;
+})();

package/web/index.html

@@ -8,12 +8,11 @@
   <title>Remote Pi</title>
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/styles.css">
-  <link rel="stylesheet" href="/vendor/xterm.css">
 </head>
 <body>
 <header>
   <div class="brand"><img src="/icon.svg" alt="" width="32" height="32"><h1>Remote Pi</h1></div>
-  <label class="api-field">服务地址 <input id="api" placeholder="http://127.0.0.1:11318"></label>
+  <a href="/collab.html" id="collabLink" title="多 Agent 协作看板" style="color:var(--blue)">协作</a>
   <button id="openConfig" title="连接、通知与语音设置">配置</button>
   <span id="status" class="muted">未配对</span>
   <span id="serverInfo" class="muted"></span>
@@ -21,7 +20,7 @@
 <main>
   <aside>
     <section id="workspaceSection">
-      <div class="section-title"><div class="section-heading"><button id="workspaceBack" class="mobile-only" title="返回主页" aria-label="返回主页">←</button><h2 id="workspaceHeading">Workspace</h2></div><span class="workspace-home-actions"><button id="refreshWs" title="刷新">↻</button><button id="addWs">添加</button></span></div>
+      <div class="section-title"><div class="section-heading"><button id="workspaceBack" class="mobile-only" title="返回主页" aria-label="返回主页">←</button><h2 id="workspaceHeading">Workspace</h2></div><span class="workspace-home-actions"><select id="backendFilter" class="backend-filter" title="按 Backend 过滤 Workspace 与 Session 列表" aria-label="按 Backend 过滤 Workspace 与 Session 列表" hidden></select><button id="refreshWs" title="刷新">↻</button><button id="addWs">添加</button></span></div>
       <select id="workspaces" size="3" aria-label="Workspace"></select>
       <div id="mobileWorkspaces" class="mobile-only" aria-label="Workspaces"></div>
       <div id="workspaceBrowser">
@@ -46,6 +45,7 @@
       <button id="undo" class="agent-action" title="在 Session Tree 中回退输入或 Agent 输出">Undo</button>
       <button id="sessionTree" class="agent-action">Session</button>
       <button id="controls" class="agent-action">模型</button>
+      <button id="mcp" class="agent-action">MCP</button>
       <button id="compact" class="agent-action">Compact</button>
       <button id="stop" class="agent-action">停止</button>
       <button id="abort" class="agent-action danger-action">Abort</button>
@@ -59,10 +59,12 @@
     <div id="widgets"></div>
     <div id="messages" aria-live="polite"><div class="empty">选择或创建 Agent 开始对话</div></div>
     <form id="prompt">
+      <div id="queueBar" hidden><span id="queueText"></span><button type="button" id="queueClear" title="清空队列并把消息放回输入框">清空队列</button></div>
       <div id="mentionPicker" hidden><div class="picker-head"><button type="button" id="mentionUp">↑</button><b id="mentionPath">.</b><button type="button" id="mentionClose">×</button></div><div id="mentionItems"></div></div>
+      <div id="commandPicker" hidden><div class="picker-head"><b>命令 · prompt template / skill</b><button type="button" id="commandClose">×</button></div><div id="commandItems"></div></div>
       <div class="composer-row">
         <select id="sendMode" title="发送方式"><option value="prompt">Prompt</option><option value="steer">Steer</option><option value="follow-up">Follow-up</option></select>
-        <textarea id="input" placeholder="输入 @ 引用文件；Ctrl/⌘+Enter 发送"></textarea>
+        <textarea id="input" placeholder="输入 @ 引用文件，/ 使用命令，! 执行 Shell；Ctrl/⌘+Enter 发送"></textarea>
         <button id="voiceInput" type="button" title="开始语音输入" hidden>🎙</button>
         <button type="submit">发送</button>
       </div>
@@ -70,15 +72,15 @@
   </article>
 </main>
 <div id="contextMenu" class="context-menu" hidden><button id="menuStartAgent">启动 Agent</button><button id="menuOpenTerminal">在 Terminal 中打开</button><button id="menuSetCwd">设为 Agent 工作路径</button><button id="menuMention">在输入框中引用</button></div>
-<dialog id="configDialog"><form method="dialog" id="configForm"><h2>Remote Pi 配置</h2><section class="config-section"><h3>连接</h3><button id="connect" type="button">输入配对码</button><small id="configConnectionStatus" class="muted"></small></section><section class="config-section"><h3>浏览器通知与语音</h3><div class="config-actions"><button id="notifications" type="button" title="启用所有 Agent 的完成通知">启用通知</button><button id="voicePlayback" type="button" title="启用 Agent 语音摘要播放" hidden>启用语音</button></div><small id="browserNotificationStatus" class="muted"></small></section><section class="config-section"><h3>邮件通知</h3><p id="mailNotificationAvailability" class="muted"></p><label class="toggle-row"><input id="mailNotificationEnabled" type="checkbox">启动邮件通知</label><label>邮件通知聚合时间（秒）<input id="mailAggregationDelay" type="number" min="0" max="86400" step="1" value="0"><small class="muted">首个任务完成后等待这段时间，期间完成的其他任务合并到同一封邮件；0 表示立即发送。</small></label><label class="toggle-row"><input id="mailIncludeResponse" type="checkbox" checked>包含 Agent 回复内容</label><label class="toggle-row"><input id="mailIncludeSessionDetails" type="checkbox" checked>包含 Session 名称和路径</label><small class="muted">如果回复内容和 Session 信息都不包含，邮件只会说明有任务完成。</small></section><div class="dialog-actions"><button id="configClose" type="button">关闭</button><button id="configSave" type="button">保存邮件设置</button></div></form></dialog>
-<dialog id="pairDialog"><form method="dialog" id="pairForm"><h2>连接 Remote Pi</h2><p class="muted">连接成功后可选择是否将配对码保存到浏览器本地存储。请仅在可信设备上保存。</p><label>服务地址<input id="pairBase" required></label><label>配对码<input id="pairToken" type="password" autocomplete="off" required autofocus></label><div class="dialog-actions"><button id="pairCancel" type="button">取消</button><button id="pairSubmit" type="submit" value="default">连接</button></div></form></dialog>
-<div id="agentContextMenu" class="context-menu" hidden><button id="menuArchiveAgent">Archive</button><button id="menuCloseTerminal" hidden>关闭 Terminal</button></div>
+<dialog id="configDialog"><form method="dialog" id="configForm"><h2>Remote Pi 配置</h2><section class="config-section"><h3>Backend 连接</h3><div id="backendList"></div><div class="config-actions"><button id="connect" type="button">添加 Backend</button><button id="disconnectAll" type="button" hidden>断开全部</button></div><small id="configConnectionStatus" class="muted"></small></section><section class="config-section"><h3>六键 Session 键盘</h3><div class="config-actions"><button id="keyboardConnect" type="button">连接键盘</button><button id="keyboardDisconnect" type="button" hidden>断开键盘</button></div><small id="keyboardStatus" class="muted">未连接 · 需要 Chrome/Edge 和 HTTPS 或 localhost</small><div id="keyboardSlots" class="keyboard-slots" aria-label="键盘按键绑定"></div></section><section class="config-section"><h3>浏览器通知与语音</h3><div class="config-actions"><button id="notifications" type="button" title="启用所有 Agent 的完成通知">启用通知</button><button id="voicePlayback" type="button" title="启用 Agent 语音摘要播放" hidden>启用语音</button></div><small id="browserNotificationStatus" class="muted"></small></section><section class="config-section"><h3>邮件通知</h3><p id="mailNotificationAvailability" class="muted"></p><label class="toggle-row"><input id="mailNotificationEnabled" type="checkbox">启动邮件通知</label><label>邮件通知聚合时间（秒）<input id="mailAggregationDelay" type="number" min="0" max="86400" step="1" value="0"><small class="muted">首个任务完成后等待这段时间，期间完成的其他任务合并到同一封邮件；0 表示立即发送。</small></label><label class="toggle-row"><input id="mailIncludeResponse" type="checkbox" checked>包含 Agent 回复内容</label><label class="toggle-row"><input id="mailIncludeSessionDetails" type="checkbox" checked>包含 Session 名称和路径</label><label class="toggle-row"><input id="mailCollabEscalations" type="checkbox" checked>协作会话需要人工裁定或停滞时立即发信</label><small class="muted">如果回复内容和 Session 信息都不包含，邮件只会说明有任务完成。</small></section><div class="dialog-actions"><button id="configClose" type="button">关闭</button><button id="configSave" type="button">保存邮件设置</button></div></form></dialog>
+<dialog id="pairDialog"><form method="dialog" id="pairForm"><h2>连接 Backend</h2><p class="muted">可以添加多个 backend；连接成功后可选择是否将配对码保存到浏览器本地存储。请仅在可信设备上保存。</p><label>短名称<input id="pairName" placeholder="例如 home / lab，显示在 Session 标签上"></label><label>服务地址<input id="pairBase" required></label><label>配对码<input id="pairToken" type="password" autocomplete="off" placeholder="服务端使用 --no-auth 时留空" autofocus></label><div class="dialog-actions"><button id="pairCancel" type="button">取消</button><button id="pairSubmit" type="submit" value="default">连接</button></div></form></dialog>
+<div id="agentContextMenu" class="context-menu" hidden><button id="menuBindKeyboard">绑定键盘按键…</button><button id="menuKeyboardColor">更换按键颜色…</button><button id="menuUnbindKeyboard">取消按键绑定</button><button id="menuArchiveAgent">Archive</button><button id="menuCloseTerminal" hidden>关闭 Terminal</button></div>
 <dialog id="modal"><form method="dialog"><h2 id="modalTitle"></h2><div id="modalBody"></div><div class="dialog-actions"><button id="modalCancel" type="button">取消</button><button id="modalOk" type="submit" value="default">确定</button></div></form></dialog>
 <div id="toast" hidden></div>
-<script src="/vendor/xterm.js"></script>
-<script src="/vendor/addon-fit.js"></script>
 <script src="/vendor/marked.js"></script>
 <script src="/vendor/dompurify.js"></script>
+<script src="/hid-keyboard.js"></script>
+<script src="/backend-state.js"></script>
 <script src="/app.js"></script>
 </body>
 </html>

package/web/styles.css

@@ -27,3 +27,62 @@
 .msg summary .summary-label{display:none;min-width:0;flex:1}
 .msg.derived-title[open] summary .summary-text{display:none}
 .msg.derived-title[open] summary .summary-label{display:block}
+
+/* Slash command picker reuses the @-mention picker chrome. */
+#commandPicker{position:absolute;left:115px;right:80px;bottom:88px;max-height:330px;overflow:auto;background:#252a33;border:1px solid #667085;border-radius:7px;box-shadow:0 8px 24px #0008;z-index:15}
+#commandPicker .picker-item b{display:block}
+#commandPicker .picker-item small{display:block;margin-top:2px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@media(max-width:700px){#commandPicker{left:8px;right:8px;bottom:116px;max-height:45vh}}
+@media(max-width:620px){#commandPicker{left:10px;right:10px}}
+
+/* Activity group: tool calls, bash output, retries and extension chatter collapse into one card
+   whose summary tracks the newest item so streaming stays visible without flooding the transcript. */
+.msg.activity-group{border-left-color:var(--yellow);background:#262b35}
+.msg.activity-group>summary{color:var(--muted)}
+.msg.activity-group>summary .summary-text{color:var(--text)}
+.msg.activity-group .activity-count{flex:0 0 auto;margin-left:10px;padding:1px 8px;border-radius:999px;font-size:11px;background:#3b4252;color:var(--muted)}
+.msg.activity-group>summary:before{content:'\25B8  \2699';margin-right:7px}
+.msg.activity-group[open]>summary:before{content:'\25BE  \2699'}
+.activity-items{padding:0 10px 10px}
+.activity-items .msg{margin:6px 0;background:#2f3542}
+.activity-items .msg summary{padding:7px 9px;font-size:13px}
+.activity-items .msg-content{padding:0 10px 10px;font-size:13px}
+.msg.tool.tool-error{border-left-color:var(--red)}
+.msg.dialog{border-left-color:var(--blue);background:#2f3644}
+.msg.voice{border-left-color:#b48ead}
+
+/* Multi-backend connections: short-name tag on sessions and the sidebar filter. */
+.backend-tag{flex:0 0 auto;max-width:92px;padding:2px 7px;border:1px solid #6b7688;border-radius:999px;background:#39404e;color:#d8dee9;font:700 10px/1.4 system-ui,sans-serif;text-transform:uppercase;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.backend-filter{max-width:140px;padding:4px 6px;font-size:12px}
+.backend-row{display:flex;align-items:center;gap:10px;margin:6px 0;padding:8px;background:var(--input);border:1px solid var(--line);border-radius:6px}
+.backend-row-info{flex:1;min-width:0}
+.backend-row-info b,.backend-row-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.backend-row-info small{margin-top:2px;color:var(--muted)}
+.backend-row-actions{display:flex;gap:6px}.backend-row-actions button{padding:4px 8px;font-size:12px}
+
+/* Six-key WebHID session keyboard. */
+.key-binding{flex:0 0 auto;min-width:27px;padding:2px 6px;border:1px solid var(--key-color);border-radius:5px;background:#20232b;color:#fff;font:700 11px ui-monospace,monospace;text-align:center;box-shadow:inset 3px 0 var(--key-color)}
+.keyboard-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
+.keyboard-slot{min-width:0;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--input)}
+.keyboard-slot b,.keyboard-slot small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.keyboard-slot b{padding-left:9px;border-left:4px solid var(--key-color,#586174)}
+.keyboard-slot small{margin-top:3px;color:var(--muted)}
+.keyboard-slot-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
+.keyboard-slot-actions button{padding:4px 6px;font-size:12px}
+@media(max-width:700px){.keyboard-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
+
+/* Queued steering/follow-up messages waiting for the running turn. */
+#queueBar{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 10px;font-size:12px;color:#161c24;background:var(--blue);border-radius:6px}
+#queueBar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#queueBar button{padding:3px 8px;font-size:12px;color:#161c24;background:#ffffffcc;border-color:#ffffff66}
+/* Tool calls a tool made itself (codemode scripts, MCP batches) stay inside their caller's card. */
+.nested-tools{margin-top:10px;padding-left:10px;border-left:2px solid var(--line)}
+.nested-tools .msg{margin:5px 0}
+.tool-duration{margin-left:8px;font-size:11px;color:var(--muted)}
+/* MCP server list: what Pi reads from mcp.json, with an enable/disable toggle. */
+.mcp-list{max-height:55vh;overflow:auto}
+.mcp-row{display:flex;align-items:center;gap:10px;margin:6px 0;padding:9px;background:var(--input);border-radius:6px}
+.mcp-row.mcp-off{opacity:.6}
+.mcp-info{flex:1;min-width:0}
+.mcp-info small{display:block;margin-top:3px;white-space:pre-wrap;word-break:break-word}
+.mcp-error{color:var(--red);white-space:pre-wrap;word-break:break-word}