pi2web 0.2.1 → 0.2.6

package/web/hid-keyboard.js

@@ -9,9 +9,9 @@
   const CHANNEL_JSON = 2;
   const REPORT_BYTES = 63;
   const PAYLOAD_BYTES = 61;
-  const VENDOR_ID = 0x303A;
+  const VENDOR_ID = 0x303a;
   const PRODUCT_ID = 0x8360;
-  const USAGE_PAGE = 0xFF00;
+  const USAGE_PAGE = 0xff00;
   const USAGE = 1;
   const STORAGE_KEY = 'rpSessionKeyboardBindings';
   // Adjacent slots deliberately alternate across the color wheel so all six
@@ -28,33 +28,40 @@
   // 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},
+    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};
+  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(); };
+  // The server maintains each Agent's activity (see src/activity.ts); lights only map it.
   const activityPhase = activity => {
+    const kind = activity?.phase?.kind;
     if (!activity) return 'idle';
-    if (activity.dialogs.size) return 'waiting';
-    if (activity.tools.size || activity.bash.size) return 'tool';
-    return activity.turn;
+    if (activity.dialogs?.length) return 'waiting';
+    if (kind === 'running_tools' || activity.bash?.length) return 'tool';
+    if (kind === 'retrying') return 'retry';
+    return kind && kind !== 'idle' ? 'llm' : 'idle';
   };
 
   const normalizeColor = value => {
-    const color = String(value || '').trim().toUpperCase();
+    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 = ''; }
+    constructor() {
+      this.reset();
+    }
+    reset() {
+      this.decoder = new TextDecoder();
+      this.buffer = '';
+    }
     feed(data) {
-      this.buffer += this.decoder.decode(data, {stream:true});
+      this.buffer += this.decoder.decode(data, {stream: true});
       const messages = [];
       let newline;
       while ((newline = this.buffer.indexOf('\n')) >= 0) {
@@ -95,11 +102,19 @@
       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(); }
+        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() {
@@ -108,11 +123,22 @@
       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)); }
+    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));
@@ -120,11 +146,14 @@
     }
 
     bind(agentId, slot, color = this.nextColor()) {
-      slot = Number(slot); color = normalizeColor(color);
-      if (!agentId || !Number.isInteger(slot) || slot < 0 || slot > 5 || !color) throw Error('无效的键盘绑定');
+      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);
+      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);
@@ -151,7 +180,7 @@
       if (!entry || !color) throw Error('无效的 Session 颜色');
       entry[1].color = color;
       this.saveBindings();
-      return {slot:entry[0], ...entry[1]};
+      return {slot: entry[0], ...entry[1]};
     }
 
     setAgents(agents) {
@@ -160,104 +189,55 @@
       this.syncLights().catch(error => this.fail(error));
     }
 
+    /** An Agent's status, with its server activity when the update carries one. */
     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);
-      }
+      if (agent.activity) this.activities.set(agent.agentId, agent.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);
+    setActivity(agentId, activity) {
+      this.activities.set(agentId, activity);
+      this.reconcileActivity(agentId);
+      this.syncLights().catch(error => this.fail(error));
     }
 
     reconcileActivity(agentId) {
-      const activity = this.activities.get(agentId), status = this.agents.get(agentId)?.status;
-      if (!activity) return;
-      if (!status || ['unloaded', 'stopped', 'error'].includes(status)) {
+      const status = this.agents.get(agentId)?.status;
+      if (
+        !status ||
+        ['unloaded', 'stopped', 'error'].includes(status) ||
+        activityPhase(this.activities.get(agentId)) === 'idle'
+      )
         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); }
+    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));
+      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 (!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.
@@ -270,7 +250,8 @@
         if (this.device === device) device.removeEventListener('inputreport', this.handleInputReport);
         this.device = device;
         device.addEventListener('inputreport', this.handleInputReport);
-        this.assembler.reset(); this.sentLights.clear();
+        this.assembler.reset();
+        this.sentLights.clear();
         await this.syncLights(true);
         if (this.device !== device || !device.opened) throw Error('键盘已断开');
       } catch (error) {
@@ -280,62 +261,97 @@
         else if (device.opened) await device.close().catch(() => undefined);
         throw error;
       }
-      this.onStateChange?.({connected:true, name:device.productName || 'Codex Micro'});
+      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; }
+      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;
+      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;
+      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:''});
+      this.onStateChange?.({connected: false, name: ''});
       return closing;
     }
 
-    handleDisconnect(event) { if (event.device === this.device) this.disconnect().catch(error => this.fail(error)); }
+    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 数据');
+        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); }
+      } 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); }
+        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 (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; }
+    nextId() {
+      this.requestId = this.requestId >= 998 ? 0 : this.requestId + 1;
+      return this.requestId;
+    }
 
     reports(message) {
-      const bytes = new TextEncoder().encode(message), reports = [];
+      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);
+        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;
     }
@@ -345,7 +361,10 @@
       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);
+          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
@@ -373,17 +392,25 @@
 
     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}]};
+      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 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.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};
+      return {color: binding.color, effect: animation?.effect || EFFECT_SOLID, speed: animation?.speed || 0};
     }
 
     async syncLights(force = false) {
@@ -399,21 +426,27 @@
           if (this.device !== device || !device.opened) throw Error('键盘已断开');
           do {
             this.syncRequested = false;
-            const forcePass = this.forceSync; this.forceSync = 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}`;
+              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; }
+        } finally {
+          this.syncPromise = null;
+        }
       });
       return this.syncPromise;
     }
 
-    fail(error) { this.onError?.(error instanceof Error ? error : Error(String(error))); }
+    fail(error) {
+      this.onError?.(error instanceof Error ? error : Error(String(error)));
+    }
   }
 
   window.SessionKeyboardController = SessionKeyboardController;

package/web/index.html

@@ -46,6 +46,7 @@
       <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="systemPrompt" class="agent-action" title="查看此 Agent 的 System Prompt 与模板">Prompt</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,6 +60,7 @@
     <div id="widgets"></div>
     <div id="messages" aria-live="polite"><div class="empty">选择或创建 Agent 开始对话</div></div>
     <form id="prompt">
+      <div id="activityBar" hidden></div>
       <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>
@@ -72,7 +74,7 @@
   </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>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="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>System Prompt 与 Agent 模板</h3><p class="muted">查看、修改 Pi 的全局 System Prompt（<code>~/.pi/agent/SYSTEM.md</code>、<code>APPEND_SYSTEM.md</code>），并管理新建 Agent 时可选择的模板（<code>~/.pi/pi2web/agent-templates/*.md</code>）。作用于当前 Workspace 所在的 Backend。</p><div class="config-actions"><button id="openSystemPrompts" type="button">管理 System Prompt…</button></div></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>
@@ -80,6 +82,7 @@
 <script src="/vendor/marked.js"></script>
 <script src="/vendor/dompurify.js"></script>
 <script src="/hid-keyboard.js"></script>
+<script src="/activity-view.js"></script>
 <script src="/backend-state.js"></script>
 <script src="/app.js"></script>
 </body>

package/web/styles.css

@@ -86,3 +86,17 @@
 .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}
+.template-tag{flex:0 0 auto;max-width:110px;padding:2px 7px;border:1px solid #b48ead;border-radius:999px;background:#3a3443;color:#e5d4ef;font:700 10px/1.4 system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.prompt-text{white-space:pre-wrap;word-break:break-word;max-height:45vh;overflow:auto;margin:6px 0;padding:8px;background:#20232b;border:1px solid var(--line);border-radius:5px;font:12px/1.45 ui-monospace,monospace}
+.prompt-editor{min-height:140px;max-height:45vh;resize:vertical;font:12px/1.45 ui-monospace,monospace}
+.prompt-preview{margin:10px 0}.prompt-preview summary{cursor:pointer;color:var(--blue)}.prompt-preview>small{display:block;margin-top:6px;word-break:break-all}
+.template-row{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--line)}.template-info{flex:1;min-width:0}.template-info b,.template-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-row button{padding:4px 8px}
+.template-editor{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#262a33}
+#activityBar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px;padding:6px 10px;font-size:12px;background:#2f3542;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:6px}
+#activityBar[hidden],.agent-activity[hidden]{display:none}
+.activity-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
+.activity-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.elapsed{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--yellow)}
+.activity-run{margin-left:auto;color:var(--muted);white-space:nowrap}
+.agent-activity{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:#c9d1de}
+.agent-activity .activity-chip{flex:1;min-width:0}