pi2web 0.2.6 → 0.2.12

package/web/collab.js

@@ -58,7 +58,11 @@
       const fields = (body.error?.fieldErrors || [])
         .map(entry => `${entry.path}: ${entry.message}`)
         .join('；');
-      throw Error(`${body.error?.message || `HTTP ${response.status}`}${fields ? ` (${fields})` : ''}`);
+      const error = Error(
+        `${body.error?.message || `HTTP ${response.status}`}${fields ? ` (${fields})` : ''}`
+      );
+      error.status = response.status;
+      throw error;
     }
     return body.data;
   }
@@ -66,8 +70,15 @@
   const requiresAuth = async base => {
     try {
       return (await request(base, '', '/health')).authRequired !== false;
-    } catch {
-      return true;
+    } catch (error) {
+      if (error.status === 401) return true;
+      if (error.status === 403)
+        throw Error(
+          '服务拒绝访问（403）：无认证服务默认仅允许本机访问；请检查服务地址、代理和 --no-auth 设置'
+        );
+      if (error.status === 404) throw Error('服务未提供 /health（404）：请检查地址和远端版本');
+      if (error instanceof TypeError) throw Error('无法访问服务：请检查地址、网络及浏览器跨域限制（CORS）');
+      throw error;
     }
   };
   const post = (url, body = {}) => api(url, {method: 'POST', body: JSON.stringify(body)});
@@ -1076,5 +1087,8 @@
   };
   window.addEventListener('beforeunload', () => state.ws?.close());
 
-  connect(state.base, state.token).catch(() => openPair());
+  connect(state.base, state.token).catch(error => {
+    toast(`自动连接失败：${error.message}`);
+    openPair();
+  });
 })();

package/web/index.html

@@ -44,10 +44,13 @@
       <button id="sessionName" class="agent-action" title="修改 Session 名称">命名</button>
       <button id="undo" class="agent-action" title="在 Session Tree 中回退输入或 Agent 输出">Undo</button>
       <button id="sessionTree" class="agent-action">Session</button>
+      <button id="sessionPerformance" class="agent-action" title="分析当前会话的模型与工具耗时">耗时</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="switchPrompt" class="agent-action" title="仅新会话首次对话前可切换 System Prompt">切换 Prompt</button>
       <button id="compact" class="agent-action">Compact</button>
+      <button id="safePause" class="agent-action" title="当前工具执行完后、下一次调用模型前暂停；之后发送消息即可继续">安全暂停</button>
       <button id="stop" class="agent-action">停止</button>
       <button id="abort" class="agent-action danger-action">Abort</button>
     </div>
@@ -61,7 +64,7 @@
     <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="queueBar" hidden><span id="queueText"></span><div id="queueItems"></div><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">
@@ -74,7 +77,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>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="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><label>发送快捷键 <select id="enterSendMode" aria-label="发送快捷键"><option value="ctrl-enter">Ctrl/⌘+Enter 发送，Enter 换行</option><option value="enter">Enter 发送，Shift+Enter 换行</option></select></label><small class="muted">仅保存在本浏览器，立即生效。输入法选词时的 Enter 不会发送。</small></section><section class="config-section"><h3>Sotto 语音输入</h3><p class="muted">语音输入始终使用提供当前页面的本机 Backend 配置；本机未启用识别时不可用。音频不会发送给远端 Backend，识别出的文字仍可用于远端会话。</p><label class="toggle-row"><input id="sottoEnabled" type="checkbox">启用 Sotto 语音识别（默认关闭）</label><label>Endpoint（pi2web 服务所在机器的本机地址）<input id="sottoEndpoint" type="url" value="http://127.0.0.1:8766" placeholder="http://127.0.0.1:8766"></label><small id="sottoSettingsStatus" class="muted">使用本机 Sotto 已加载的 ASR 模型；未开启时不显示输入框旁的麦克风。</small><div class="config-actions"><button id="saveSotto" type="button">保存语音输入设置</button></div></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>

package/web/styles.css

@@ -72,8 +72,12 @@
 @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{display:flex;align-items:flex-start;flex-wrap:wrap;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}
+#queueItems{flex-basis:100%;max-height:140px;overflow:auto;order:3}
+.queue-item{display:flex;align-items:center;gap:8px;padding:3px 0}
+.queue-item span{flex:1;min-width:0;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)}
@@ -96,7 +100,9 @@
 #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}
+.activity-speed{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--blue)}
 .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}
+.performance-list{max-height:58vh;overflow:auto}.performance-run{border:1px solid var(--line);border-radius:6px;margin:8px 0;padding:8px}.performance-run summary{cursor:pointer}.performance-row{margin:9px 0;font-size:12px}.performance-label{display:block;white-space:normal;overflow-wrap:anywhere;margin-bottom:3px}.performance-track{position:relative;height:9px;background:#1a1e26;border-radius:4px}.performance-track i{position:absolute;height:100%;border-radius:4px;min-width:2px}.performance-model{background:var(--blue)}.performance-tool{background:var(--yellow)}.performance-compaction,.performance-retry{background:#b48ead}

package/web/voice-pcm.js

@@ -0,0 +1,36 @@
+// AudioWorklet: forward microphone frames as mono float32 PCM without recording or re-encoding.
+class VoicePcmProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.samples = new Float32Array(4096);
+    this.offset = 0;
+    this.finished = false;
+    this.port.onmessage = event => {
+      if (event.data?.type !== 'flush' || this.finished) return;
+      this.finished = true;
+      if (this.offset) {
+        const tail = this.samples.slice(0, this.offset).buffer;
+        this.port.postMessage(tail, [tail]);
+        this.offset = 0;
+      }
+      this.port.postMessage({type: 'flushed'});
+    };
+  }
+  process(inputs) {
+    if (this.finished) return false;
+    const channels = inputs[0];
+    if (!channels?.length) return true;
+    for (let i = 0; i < channels[0].length; i++) {
+      let sample = 0;
+      for (const channel of channels) sample += channel[i] / channels.length;
+      this.samples[this.offset++] = sample;
+      if (this.offset === this.samples.length) {
+        this.port.postMessage(this.samples.buffer, [this.samples.buffer]);
+        this.samples = new Float32Array(4096);
+        this.offset = 0;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor('voice-pcm', VoicePcmProcessor);