pi2web 0.2.6 → 0.2.8

package/web/app.js

@@ -79,12 +79,18 @@
       generation: 0
     },
     mediaRecorder: null,
+    voiceStream: null,
     mediaChunks: [],
     mediaStream: null,
     mediaTimer: null,
     mediaAgentId: null,
+    mediaBackendId: null,
+    /** Messages that failed after the user switched away; restored when that Agent is selected again. */
+    failedSends: new Map(),
     mailBackendId: null,
     mailRequest: 0,
+    sottoBackendId: null,
+    sottoSettingsRequest: 0,
     mailNotificationsAvailable: false,
     mailSettings: {
       enabled: false,
@@ -169,15 +175,24 @@
     const body = await response.json().catch(() => ({}));
     if (!response.ok) {
       if (response.status === 401) onUnauthorized?.();
-      throw Error(body.error?.message || `HTTP ${response.status}`);
+      const error = Error(body.error?.message || `HTTP ${response.status}`);
+      error.status = response.status;
+      throw error;
     }
     return body.data;
   }
   async function backendRequiresAuth(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;
     }
   }
   async function requestBackend(backendId, url, options = {}) {
@@ -245,8 +260,20 @@
   }
 
   function cancelVoiceRecording(backendId) {
+    if (
+      state.voiceStream &&
+      (!backendId ||
+        splitResourceKey(state.voiceStream.agentId).backendId === backendId ||
+        state.voiceStream.transcribeBackendId === backendId)
+    )
+      finishSottoStream(state.voiceStream, true);
     if (!state.mediaAgentId) return;
-    if (backendId && splitResourceKey(state.mediaAgentId).backendId !== backendId) return;
+    if (
+      backendId &&
+      splitResourceKey(state.mediaAgentId).backendId !== backendId &&
+      state.mediaBackendId !== backendId
+    )
+      return;
     clearTimeout(state.mediaTimer);
     if (state.mediaRecorder) {
       state.mediaRecorder.onstop = null;
@@ -257,7 +284,9 @@
     state.mediaStream = null;
     state.mediaChunks = [];
     state.mediaAgentId = null;
+    state.mediaBackendId = null;
     $('voiceInput').textContent = '🎙';
+    $('voiceInput').disabled = false;
     $('voiceInput').classList.remove('recording');
   }
 
@@ -265,6 +294,7 @@
     cancelVoiceRecording(backendId);
     if (backendId && state.agent?.backendId !== backendId) return;
     state.agent = null;
+    updateVoiceAvailability();
     state.timeline = null;
     sendFocus();
     localStorage.removeItem('rpAgentId');
@@ -334,12 +364,52 @@
     }
   }
 
+  function applyVoiceStatus(backend, statusInfo) {
+    const voice = state.voiceStream;
+    if (
+      voice &&
+      voice.transcribeBackendId === backend.id &&
+      (!statusInfo.sottoStt?.enabled ||
+        statusInfo.sottoStt.endpoint !== backend.statusInfo?.sottoStt?.endpoint)
+    )
+      finishSottoStream(voice, true);
+    backend.statusInfo = statusInfo;
+    backend.voiceEnabled = Boolean(statusInfo.voiceCapabilities?.tts ?? statusInfo.voiceEnabled);
+    backend.voiceSttEnabled = Boolean(statusInfo.voiceCapabilities?.stt ?? statusInfo.voiceEnabled);
+  }
+  // The page is opened on the user's own pi2web server. Never route microphone audio to a remote Backend.
+  function localBackend() {
+    return (
+      connectedBackends().find(backend => {
+        if (backend.status !== 'connected') return false;
+        try {
+          const url = new URL(backend.base);
+          return (
+            url.origin === location.origin &&
+            url.pathname === '/' &&
+            !url.username &&
+            !url.password &&
+            !url.search &&
+            !url.hash
+          );
+        } catch {
+          return false;
+        }
+      }) || null
+    );
+  }
+  function transcriptionBackend() {
+    if (!state.agent || backendOf(state.agent.backendId)?.status !== 'connected') return null;
+    const backend = localBackend();
+    return backend?.voiceSttEnabled ? backend : null;
+  }
   function updateVoiceAvailability() {
     const backends = connectedBackends();
     state.voiceEnabled = backends.some(backend => backend.voiceEnabled);
-    state.voiceSttEnabled = backends.some(backend => backend.voiceSttEnabled);
+    state.voiceSttEnabled = Boolean(transcriptionBackend());
     $('voicePlayback').hidden = !state.voiceEnabled;
-    $('voiceInput').hidden = !state.voiceSttEnabled;
+    $('voiceInput').hidden = !state.voiceSttEnabled && !state.voiceStream;
+    $('voiceInput').title = '开始语音输入（输入框内 Alt+Shift+V）';
     if (!state.voiceEnabled) stopVoiceAudio();
     updateVoiceButton();
   }
@@ -382,10 +452,9 @@
       statusInfo,
       authRequired,
       serverInfo: `v${statusInfo.version} · Pi ${statusInfo.piVersion}`,
-      reconnectAttempt: 0,
-      voiceEnabled: Boolean(statusInfo.voiceCapabilities?.tts ?? statusInfo.voiceEnabled),
-      voiceSttEnabled: Boolean(statusInfo.voiceCapabilities?.stt ?? statusInfo.voiceEnabled)
+      reconnectAttempt: 0
     });
+    applyVoiceStatus(backend, statusInfo);
 
     try {
       await refreshBackendData(backend);
@@ -1253,6 +1322,12 @@
     sessionKeyboard.updateAgent(agent);
     renderAgentList();
     updateAgentHeader();
+    if (state.agent?.agentId === agentId) {
+      const picker = $('sendMode');
+      if (status === 'streaming' || status === 'waiting_for_user') {
+        if (picker.value === 'prompt') picker.value = 'follow-up';
+      } else picker.value = 'prompt';
+    }
     return agent;
   }
   function updateAgentHeader(agent = state.agent) {
@@ -1490,23 +1565,9 @@
   }
   const autoBindNewSession = agent => sessionKeyboard.autoBind(agent.agentId);
   async function startAgent(relativePath) {
-    if (!state.workspace) return toast('请先选择 Workspace');
     $('contextMenu').hidden = true;
-    try {
-      const backendId = state.workspace.backendId;
-      const created = await postBackend(backendId, '/api/v1/agents', {
-        workspaceId: state.workspace.id,
-        relativeCwd: relativePath
-      });
-      const agent = stampNewItem(backendId, created);
-      const binding = autoBindNewSession(agent);
-      $('agentCwd').value = relativePath;
-      await refreshAgents();
-      await selectAgent(agent);
-      if (binding) toast(`新 Session 已自动绑定到按键 ${binding.slot + 1}`);
-    } catch (error) {
-      toast(error.message);
-    }
+    $('agentCwd').value = relativePath;
+    await createAgent();
   }
   async function openTerminal(relativePath) {
     if (!state.workspace) return toast('请先选择 Workspace');
@@ -1542,14 +1603,24 @@
     }
   }
   async function selectAgent(agent, openView = true) {
+    if (state.agent?.agentId !== agent.agentId) cancelVoiceRecording();
     state.selectedKind = 'agent';
     state.terminalWs?.close();
     state.terminalWs = null;
     state.agent = agent;
+    updateVoiceAvailability();
+    const failed = state.failedSends.get(agent.agentId);
+    if (failed !== undefined) {
+      state.failedSends.delete(agent.agentId);
+      prependInput(failed);
+      toast('之前发送失败的消息已放回输入框');
+    }
     localStorage.rpAgentId = agent.agentId;
     localStorage.rpSelectedKind = 'agent';
     showAgentView();
     updateAgentHeader();
+    $('sendMode').value =
+      agent.status === 'streaming' || agent.status === 'waiting_for_user' ? 'follow-up' : 'prompt';
     if (openView) navigateMobile('agent');
     void syncWorkspaceForSelection(agent);
     if (ownsPath(state.workspace, agent))
@@ -2188,6 +2259,7 @@
       bar = $('queueBar');
     if (!queue) {
       bar.hidden = true;
+      $('queueItems').replaceChildren();
       return;
     }
     const parts = [];
@@ -2196,6 +2268,39 @@
     const preview = [...queue.steering, ...queue.followUp][0] || '';
     $('queueText').textContent =
       `排队中：${parts.join(' · ')}${preview ? ` — ${preview.replace(/\s+/g, ' ').slice(0, 60)}` : ''}`;
+    const items = $('queueItems');
+    items.replaceChildren();
+    for (const [from, label, target] of [
+      ['steering', 'Steer', 'Follow-up'],
+      ['followUp', 'Follow-up', 'Steer']
+    ]) {
+      queue[from].forEach((text, index) => {
+        const row = document.createElement('div');
+        row.className = 'queue-item';
+        const preview = document.createElement('span');
+        preview.textContent = `${label}: ${text}`;
+        preview.title = text;
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = `改为 ${target}`;
+        button.onclick = async () => {
+          const agentId = state.agent.agentId;
+          button.disabled = true;
+          try {
+            await postAgent(agentId, '/queue/move', {from, index, expected: text});
+          } catch (error) {
+            toast(`切换失败：${error.message}`);
+            try {
+              setAgentQueue(agentId, await requestAgent(agentId, '/queue'));
+            } catch {}
+          } finally {
+            button.disabled = false;
+          }
+        };
+        row.append(preview, button);
+        items.append(row);
+      });
+    }
     bar.hidden = false;
   }
   function restoreExtensionRequests(agentId, activity) {
@@ -2313,11 +2418,225 @@
       }
     } else stopVoiceAudio();
   }
+  function updateSottoDraft(voice) {
+    if (state.voiceStream !== voice || state.agent?.agentId !== voice.agentId) return;
+    const input = voice.input,
+      text = [...voice.finals.values(), voice.partial].filter(Boolean).join(' ');
+    if (text === voice.inserted) return;
+    if (input.value.slice(voice.at, voice.at + voice.inserted.length) !== voice.inserted) {
+      finishSottoStream(voice, true);
+      toast('输入框内容已被修改，语音输入已停止；现有文字不会覆盖');
+      return;
+    }
+    input.setRangeText(text, voice.at, voice.at + voice.inserted.length, 'end');
+    voice.inserted = text;
+  }
+  function finishSottoStream(voice, abort = false, reason = '') {
+    if (state.voiceStream !== voice) return;
+    state.voiceStream = null;
+    clearTimeout(voice.timer);
+    clearTimeout(voice.idleTimer);
+    voice.stream?.getTracks().forEach(track => {
+      track.onended = null;
+      track.stop();
+    });
+    voice.node?.disconnect();
+    voice.source?.disconnect();
+    voice.sink?.disconnect();
+    if (voice.node?.port) voice.node.port.onmessage = null;
+    if (voice.node) voice.node.onaudioprocess = null;
+    if (voice.context) void voice.context.close().catch(() => {});
+    if (voice.socket?.readyState === WebSocket.OPEN || voice.socket?.readyState === WebSocket.CONNECTING)
+      voice.socket.close();
+    $('voiceInput').disabled = false;
+    $('voiceInput').classList.remove('recording');
+    $('voiceInput').textContent = '🎙';
+    $('voiceInput').title = '开始语音输入（输入框内 Alt+Shift+V）';
+    if (
+      abort &&
+      voice.partial &&
+      voice.input.value.slice(voice.at, voice.at + voice.inserted.length) === voice.inserted
+    ) {
+      const text = [...voice.finals.values()].filter(Boolean).join(' ');
+      voice.input.setRangeText(text, voice.at, voice.at + voice.inserted.length, 'end');
+    }
+    if (reason) toast(reason);
+  }
+  function finishSottoAudio(voice) {
+    if (state.voiceStream !== voice || voice.phase !== 'draining') return;
+    if (voice.socket.readyState !== WebSocket.OPEN)
+      return finishSottoStream(voice, true, '语音连接已断开，无法完成识别');
+    voice.phase = 'finishing';
+    voice.node?.disconnect();
+    voice.socket.send(JSON.stringify({type: 'stop'}));
+    clearTimeout(voice.timer);
+    voice.timer = setTimeout(() => finishSottoStream(voice, true, '等待语音识别结果超时'), 12000);
+  }
+  function stopSottoStream(voice) {
+    if (state.voiceStream !== voice) return;
+    if (voice.phase === 'starting') return finishSottoStream(voice, true);
+    if (voice.phase !== 'recording') return;
+    voice.phase = 'draining';
+    clearTimeout(voice.idleTimer);
+    voice.source?.disconnect();
+    voice.stream.getTracks().forEach(track => {
+      track.onended = null;
+      track.stop();
+    });
+    $('voiceInput').classList.remove('recording');
+    $('voiceInput').textContent = '…';
+    $('voiceInput').disabled = true;
+    // Keep accepting queued PCM until the worklet confirms that its final buffer was sent.
+    if (voice.node?.port) {
+      voice.timer = setTimeout(() => finishSottoStream(voice, true, '麦克风尾部音频处理超时'), 3000);
+      voice.node.port.postMessage({type: 'flush'});
+    } else finishSottoAudio(voice);
+  }
+  function sendSottoPcm(voice, pcm) {
+    if (state.voiceStream !== voice || !['recording', 'draining'].includes(voice.phase)) return;
+    if (voice.socket.readyState !== WebSocket.OPEN || voice.socket.bufferedAmount >= 500000)
+      return finishSottoStream(voice, true, '实时语音连接中断或处理不过来，录音已停止');
+    voice.socket.send(pcm);
+  }
+  // Dictation survives switching views; it ends when the user stops it or nothing new is recognised.
+  const SOTTO_IDLE_MS = 60000;
+  function touchSottoIdle(voice) {
+    clearTimeout(voice.idleTimer);
+    voice.idleTimer = setTimeout(() => {
+      if (state.voiceStream !== voice || voice.phase !== 'recording') return;
+      toast('1 分钟没有新的识别文字，语音输入已自动停止');
+      stopSottoStream(voice);
+    }, SOTTO_IDLE_MS);
+  }
+  async function startSottoStream() {
+    if (state.voiceStream) return;
+    if (!navigator.mediaDevices?.getUserMedia) return toast('当前浏览器不支持麦克风录音');
+    const Audio = window.AudioContext || window.webkitAudioContext;
+    if (!Audio) return toast('当前浏览器不支持实时音频采集');
+    const agentId = state.agent.agentId,
+      speechBackend = transcriptionBackend(),
+      input = $('input');
+    // One owner from permission acquisition through final result. Cancelling invalidates pending awaits.
+    const voice = {
+      agentId,
+      transcribeBackendId: speechBackend.id,
+      input,
+      at: input.selectionStart,
+      inserted: '',
+      finals: new Map(),
+      partial: '',
+      phase: 'starting',
+      stream: null,
+      context: null,
+      socket: null,
+      timer: null,
+      idleTimer: null,
+      node: null,
+      source: null,
+      sink: null
+    };
+    state.voiceStream = voice;
+    $('voiceInput').textContent = '…';
+    $('voiceInput').title = '正在启动语音输入，点击取消';
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({audio: true});
+      if (state.voiceStream !== voice) {
+        stream.getTracks().forEach(track => track.stop());
+        return;
+      }
+      voice.stream = stream;
+      stream.getTracks().forEach(track => {
+        track.onended = () => finishSottoStream(voice, true, '麦克风已断开或录音权限被撤销');
+      });
+      const context = (voice.context = new Audio());
+      voice.timer = setTimeout(() => finishSottoStream(voice, true, '启动实时语音服务超时'), 30000);
+      if (context.audioWorklet && window.AudioWorkletNode)
+        await context.audioWorklet.addModule('/voice-pcm.js');
+      if (state.voiceStream !== voice) return;
+      if (state.agent?.agentId !== agentId) throw Error('会话已切换');
+      const backend = backendOf(voice.transcribeBackendId);
+      if (backend?.status !== 'connected' || !backend.statusInfo?.sottoStt?.enabled)
+        throw Error('语音识别 Backend 已断开');
+      const url = backend.base.replace(/^http/, 'ws') + '/api/v1/transcribe/ws';
+      const socket = (voice.socket = new WebSocket(
+        url,
+        backend.token ? ['access-token.' + backend.token] : []
+      ));
+      socket.onmessage = event => {
+        if (state.voiceStream !== voice) return;
+        let msg;
+        try {
+          msg = JSON.parse(event.data);
+        } catch {
+          return;
+        }
+        if (msg.type === 'ready') {
+          if (voice.phase !== 'starting') return;
+          try {
+            socket.send(JSON.stringify({type: 'start', sample_rate: context.sampleRate, format: 'float32'}));
+            voice.source = context.createMediaStreamSource(stream);
+            voice.sink = context.createGain();
+            voice.sink.gain.value = 0;
+            if (context.audioWorklet && window.AudioWorkletNode) {
+              voice.node = new AudioWorkletNode(context, 'voice-pcm');
+              voice.node.port.onmessage = e =>
+                e.data?.type === 'flushed' ? finishSottoAudio(voice) : sendSottoPcm(voice, e.data);
+            } else {
+              voice.node = context.createScriptProcessor(4096, 1, 1);
+              voice.node.onaudioprocess = e =>
+                sendSottoPcm(voice, new Float32Array(e.inputBuffer.getChannelData(0)).buffer);
+            }
+            voice.phase = 'recording';
+            voice.source.connect(voice.node);
+            voice.node.connect(voice.sink);
+            voice.sink.connect(context.destination);
+            void context
+              .resume()
+              .catch(error => finishSottoStream(voice, true, `无法启动麦克风：${error.message}`));
+            clearTimeout(voice.timer);
+            touchSottoIdle(voice);
+            $('voiceInput').textContent = '■';
+            $('voiceInput').title = '正在录音，点击停止（停顿不会结束录音）';
+            $('voiceInput').classList.add('recording');
+          } catch (error) {
+            finishSottoStream(voice, true, `无法采集音频：${error.message}`);
+          }
+        } else if (msg.type === 'partial' && voice.phase === 'recording') {
+          const text = String(msg.text || '');
+          if (text && text !== voice.partial) touchSottoIdle(voice);
+          voice.partial = text;
+          updateSottoDraft(voice);
+        } else if (msg.type === 'final') {
+          // A final ends one sentence, not the recording. Only the user's stop ends capture.
+          const text = String(msg.text || '');
+          if (text && voice.phase === 'recording') touchSottoIdle(voice);
+          voice.finals.set(msg.segment, text);
+          voice.partial = '';
+          updateSottoDraft(voice);
+        } else if (msg.type === 'error') {
+          finishSottoStream(voice, true, `Sotto 语音识别：${msg.message || '未知错误'}`);
+        }
+      };
+      socket.onerror = () => finishSottoStream(voice, true, '无法连接 Sotto 实时语音服务');
+      socket.onclose = event => {
+        const expected = voice.phase === 'finishing' && event.code === 1000;
+        finishSottoStream(voice, !expected, expected ? '' : `实时语音连接意外断开（${event.code}）`);
+      };
+    } catch (error) {
+      finishSottoStream(voice, true, `无法开始语音输入：${error.message}`);
+    }
+  }
   async function toggleVoiceInput() {
+    if (state.voiceStream) return stopSottoStream(state.voiceStream);
+    if ($('voiceInput').disabled) return;
     if (!state.voiceSttEnabled) return toast('服务端未启用语音识别');
     if (!state.agent) return toast('请先选择 Agent');
-    if (state.mediaRecorder && state.mediaRecorder.state === 'recording') {
-      state.mediaRecorder.stop();
+    if (transcriptionBackend()?.statusInfo?.sottoStt?.enabled) return startSottoStream();
+    if (state.mediaRecorder) {
+      if (state.mediaRecorder.state === 'recording') {
+        $('voiceInput').disabled = true;
+        state.mediaRecorder.stop();
+      }
       return;
     }
     if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder)
@@ -2334,16 +2653,26 @@
         if (event.data.size) state.mediaChunks.push(event.data);
       };
       state.mediaAgentId = state.agent.agentId;
+      state.mediaBackendId = transcriptionBackend()?.id;
       state.mediaRecorder.onstop = () => void transcribeVoice();
       state.mediaRecorder.start(250);
       $('voiceInput').textContent = '■';
       $('voiceInput').title = '停止并识别';
       $('voiceInput').classList.add('recording');
-      state.mediaTimer = setTimeout(
-        () => state.mediaRecorder?.state === 'recording' && state.mediaRecorder.stop(),
-        60000
-      );
+      state.mediaTimer = setTimeout(() => {
+        if (state.mediaRecorder?.state === 'recording') {
+          $('voiceInput').disabled = true;
+          state.mediaRecorder.stop();
+        }
+      }, 60000);
     } catch (error) {
+      state.mediaStream?.getTracks().forEach(track => track.stop());
+      state.mediaStream = null;
+      state.mediaRecorder = null;
+      state.mediaChunks = [];
+      state.mediaAgentId = null;
+      state.mediaBackendId = null;
+      $('voiceInput').disabled = false;
       toast(`无法录音：${error.message}`);
     }
   }
@@ -2352,37 +2681,38 @@
     const recorder = state.mediaRecorder,
       mime = recorder?.mimeType || 'audio/webm',
       blob = new Blob(state.mediaChunks, {type: mime}),
-      agentId = state.mediaAgentId;
+      agentId = state.mediaAgentId,
+      speechBackendId = state.mediaBackendId;
     state.mediaStream?.getTracks().forEach(track => track.stop());
     state.mediaRecorder = null;
     state.mediaStream = null;
     state.mediaChunks = [];
     state.mediaAgentId = null;
+    state.mediaBackendId = null;
     $('voiceInput').textContent = '…';
+    $('voiceInput').disabled = true;
     $('voiceInput').classList.remove('recording');
     if (!agentId) {
       $('voiceInput').textContent = '🎙';
+      $('voiceInput').disabled = false;
       return;
     }
-    const {backendId, remoteId} = splitResourceKey(agentId),
-      transcribeBackend = backendOf(backendId);
-    if (!transcribeBackend) {
+    const transcribeBackend = backendOf(speechBackendId);
+    if (transcribeBackend?.status !== 'connected') {
       $('voiceInput').textContent = '🎙';
-      return toast('该 Session 的 backend 已断开');
+      $('voiceInput').disabled = false;
+      return toast('语音识别 Backend 已断开');
     }
     try {
-      const response = await fetch(
-        transcribeBackend.base + `/api/v1/agents/${encodeURIComponent(remoteId)}/transcribe`,
-        {
-          method: 'POST',
-          headers: {
-            Authorization: `Bearer ${transcribeBackend.token}`,
-            'Content-Type': mime,
-            'X-Audio-Filename': mime.includes('mp4') ? 'recording.m4a' : 'recording.webm'
-          },
-          body: blob
-        }
-      );
+      const response = await fetch(transcribeBackend.base + '/api/v1/transcribe', {
+        method: 'POST',
+        headers: {
+          ...(transcribeBackend.token ? {Authorization: `Bearer ${transcribeBackend.token}`} : {}),
+          'Content-Type': mime,
+          'X-Audio-Filename': mime.includes('mp4') ? 'recording.m4a' : 'recording.webm'
+        },
+        body: blob
+      });
       const body = await response.json().catch(() => ({}));
       if (!response.ok) throw Error(body.error?.message || `HTTP ${response.status}`);
       const text = body.data?.text?.trim();
@@ -2397,7 +2727,8 @@
       toast(`语音识别失败：${error.message}`);
     } finally {
       $('voiceInput').textContent = '🎙';
-      $('voiceInput').title = '开始语音输入';
+      $('voiceInput').disabled = false;
+      $('voiceInput').title = '开始语音输入（输入框内 Alt+Shift+V）';
     }
   }
   const handledDrafts = new Set();
@@ -2773,6 +3104,58 @@
           : `Backend「${backend.name}」未配置 MailDispatch endpoint、API key 和通知邮箱。`;
   }
 
+  function sottoConfigBackend() {
+    return localBackend();
+  }
+  async function loadSottoSettings() {
+    const backend = sottoConfigBackend();
+    const requestId = ++state.sottoSettingsRequest;
+    state.sottoBackendId = null;
+    $('saveSotto').disabled = true;
+    if (!backend) {
+      $('sottoSettingsStatus').textContent = '请先连接提供当前页面的本机 Backend';
+      return;
+    }
+    $('sottoSettingsStatus').textContent = `正在读取「${backend.name}」的语音输入设置…`;
+    try {
+      const settings = await requestBackend(backend.id, '/api/v1/sotto-stt');
+      if (requestId !== state.sottoSettingsRequest || !$('configDialog').open) return;
+      state.sottoBackendId = backend.id;
+      $('sottoEnabled').checked = settings.enabled;
+      $('sottoEndpoint').value = settings.endpoint;
+      $('saveSotto').disabled = false;
+      $('sottoSettingsStatus').textContent =
+        `语音识别固定使用本机 Backend「${backend.name}」的设置；远端会话共用此配置。`;
+    } catch (error) {
+      if (requestId === state.sottoSettingsRequest)
+        $('sottoSettingsStatus').textContent = `读取失败：${error.message}`;
+    }
+  }
+  async function saveSottoSettings() {
+    const backendId = state.sottoBackendId;
+    if (!backendId) return toast('请先连接 Backend 并读取设置');
+    $('saveSotto').disabled = true;
+    try {
+      const settings = await requestBackend(backendId, '/api/v1/sotto-stt', {
+        method: 'PUT',
+        body: JSON.stringify({enabled: $('sottoEnabled').checked, endpoint: $('sottoEndpoint').value.trim()})
+      });
+      const owner = backendOf(backendId);
+      if (owner) applyVoiceStatus(owner, {...owner.statusInfo, sottoStt: settings});
+      const statusInfo = await requestBackend(backendId, '/api/v1/system/status');
+      const backend = backendOf(backendId);
+      if (backend) applyVoiceStatus(backend, statusInfo);
+      updateVoiceAvailability();
+      $('sottoSettingsStatus').textContent = settings.enabled
+        ? 'Sotto 已连通；输入框旁的麦克风可用，转写使用 Sotto 的同一个 ASR 实例。'
+        : 'Sotto 语音输入已关闭。';
+      toast('语音输入设置已保存');
+    } catch (error) {
+      toast(`Sotto 设置失败：${error.message}`);
+    } finally {
+      $('saveSotto').disabled = !backendOf(backendId);
+    }
+  }
   function updateConfigUi() {
     const connected = connectedBackends().length;
     $('configConnectionStatus').textContent = connected ? `已连接 ${connected} 个 backend` : '当前未配对';
@@ -2787,6 +3170,7 @@
     updateConfigUi();
     renderKeyboardBindings();
     if (!$('configDialog').open) $('configDialog').showModal();
+    void loadSottoSettings();
   }
 
   async function saveMailSettings() {
@@ -2818,6 +3202,11 @@
     }
   }
 
+  const el = (tag, props = {}, ...children) => {
+    const node = Object.assign(document.createElement(tag), props);
+    node.append(...children);
+    return node;
+  };
   function modal(title, build, okText = '确定') {
     const dialog = $('modal'),
       body = $('modalBody');
@@ -2931,6 +3320,7 @@
     const workspace = state.workspace;
     if (!workspace) return toast('请先选择 Workspace');
     const cwd = $('agentCwd').value.trim() || '.';
+    const preferenceKey = `rpLastTemplate:${workspace.backendId}`;
     let sessions,
       templates = [];
     try {
@@ -2965,6 +3355,12 @@
         l.append(s);
         body.append(l);
         const t = templateSelect(body, templates);
+        const preferred = globalThis.localStorage?.getItem(preferenceKey);
+        if (preferred && [...t.options].some(option => option.value === preferred)) t.value = preferred;
+        else if (preferred) {
+          globalThis.localStorage?.removeItem(preferenceKey);
+          toast('上次使用的 System Prompt 模板已删除，改用 Pi 默认');
+        }
         const preview = promptPreviewBox(body, () => ({
           backendId: workspace.backendId,
           workspaceId: workspace.id,
@@ -2989,6 +3385,7 @@
         sessionFile: result.sessionFile,
         templateId: result.templateId
       });
+      localStorage.setItem(preferenceKey, result.templateId || '');
       const agent = stampNewItem(workspace.backendId, created);
       const binding = result.sessionFile ? null : autoBindNewSession(agent);
       await refreshAgents();
@@ -3114,6 +3511,31 @@
       '关闭'
     );
   }
+  async function switchAgentPrompt() {
+    const agent = state.agent;
+    if (!agent) return toast('请先选择 Agent');
+    const [session, catalog] = await Promise.all([
+      requestAgent(agent.agentId, '/session'),
+      requestBackend(agent.backendId, '/api/v1/agent-templates')
+    ]);
+    if (agent.profile !== 'default' || session.entries?.some(entry => entry.type === 'message'))
+      return toast('会话开始后不能切换 System Prompt，请新建会话');
+    const choice = await modal(
+      '切换 System Prompt（仅首次对话前）',
+      body => {
+        const picker = templateSelect(body, catalog.templates || []);
+        picker.value = agent.template?.id || '';
+        return () => picker.value;
+      },
+      '切换'
+    );
+    if (choice === null) return;
+    await postAgent(agent.agentId, '/system-prompt', {templateId: choice});
+    localStorage.setItem(`rpLastTemplate:${agent.backendId}`, choice);
+    agent.template = (catalog.templates || []).find(item => item.id === choice) || undefined;
+    await refreshAgents(true);
+    toast('System Prompt 已切换');
+  }
   /** Manage Pi's global prompt files and the shareable Agent templates of one backend. */
   async function systemPromptManager() {
     if (!requireConnection()) return;
@@ -3135,11 +3557,6 @@
       return toast(`读取失败：${error.message}（Backend 可能版本过旧）`);
     }
     if ($('configDialog').open) $('configDialog').close();
-    const el = (tag, props = {}, ...children) => {
-      const node = Object.assign(document.createElement(tag), props);
-      node.append(...children);
-      return node;
-    };
     const section = (title, note) =>
       el(
         'section',
@@ -3336,6 +3753,108 @@
     if (result.editorText !== undefined) $('input').value = result.editorText;
     toast(result.editorText !== undefined ? '已回退到该用户输入，可编辑后重新发送' : '已回退到所选输出');
   }
+  const performanceTime = ms =>
+    ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(ms < 10000 ? 2 : 1)} s`;
+  function coveredTime(spans) {
+    const intervals = spans.map(span => [span.start, span.end]).sort((a, b) => a[0] - b[0]);
+    let total = 0,
+      end = -Infinity;
+    for (const [from, to] of intervals) {
+      total += Math.max(0, to - Math.max(end, from));
+      end = Math.max(end, to);
+    }
+    return total;
+  }
+  async function showSessionPerformance() {
+    const agent = state.agent;
+    if (!agent) return toast('请选择 Agent');
+    const {runs, legacyTools} = await requestAgent(agent.agentId, '/performance');
+    await modal(
+      '会话耗时分析',
+      body => {
+        const info = document.createElement('p');
+        info.className = 'muted';
+        info.textContent =
+          '横轴为每轮运行的实际时间；同一时间段的工具调用可能并行。模型耗时包含首响应等待与输出；网络、排队和其他开销可能落在空白时间。';
+        body.append(info);
+        if (!runs.length && !legacyTools.length) {
+          body.append(el('p', {textContent: '当前分支没有可分析的耗时记录；新运行结束后会记录精确时间。'}));
+          return null;
+        }
+        const list = el('div', {className: 'performance-list'});
+        const allSpans = runs.flatMap(run => run.spans || []);
+        const total = runs.reduce((sum, run) => sum + Math.max(0, run.end - run.start), 0);
+        const tools = allSpans.filter(span => span.kind === 'tool');
+        const models = allSpans.filter(span => span.kind === 'model');
+        const head = el('p', {
+          textContent: `${runs.length} 轮 · 总运行 ${performanceTime(total)} · 模型 ${performanceTime(coveredTime(models))} · 工具占用 ${performanceTime(coveredTime(tools))}（调用时长累计 ${performanceTime(tools.reduce((n, s) => n + s.end - s.start, 0))}，可能并行）`
+        });
+        list.append(head);
+        const legend = el('p', {
+          className: 'muted',
+          textContent: '蓝色：模型 · 黄色：工具 · 紫色：压缩/重试；空白：其他等待'
+        });
+        list.append(legend);
+        for (const run of [...runs].reverse()) {
+          const duration = Math.max(1, run.end - run.start);
+          const spans = [...(run.spans || [])].sort((a, b) => a.start - b.start || a.end - b.end);
+          const modelTime = coveredTime(spans.filter(span => span.kind === 'model'));
+          const toolTime = coveredTime(spans.filter(span => span.kind === 'tool'));
+          const summary = el('summary', {
+            textContent: `${new Date(run.start).toLocaleString()} · ${performanceTime(duration)} · 模型 ${performanceTime(modelTime)} · 工具 ${performanceTime(toolTime)}${run.incomplete ? ' · 已中断' : ''}`
+          });
+          const details = el('details', {className: 'performance-run'}, summary);
+          for (const span of spans) {
+            const length = Math.max(0, span.end - span.start);
+            const first =
+              span.kind === 'model' && span.firstResponse !== undefined
+                ? ` · 首响应 ${performanceTime(span.firstResponse - span.start)} · 响应 ${performanceTime(span.end - span.firstResponse)}`
+                : '';
+            const label =
+              span.kind === 'model'
+                ? '模型调用'
+                : span.kind === 'tool'
+                  ? `工具 ${span.name || ''}`
+                  : span.kind === 'retry'
+                    ? '重试等待'
+                    : '上下文压缩';
+            const row = el('div', {className: 'performance-row'});
+            const text = el('span', {
+              className: 'performance-label',
+              textContent: `${label} · +${performanceTime(span.start - run.start)} · ${performanceTime(length)}${first}${span.incomplete ? ' · 未完成' : ''}`
+            });
+            const track = el('div', {className: 'performance-track'});
+            const bar = el('i', {className: `performance-${span.kind}`});
+            bar.style.left = `${Math.max(0, Math.min(100, ((span.start - run.start) / duration) * 100))}%`;
+            bar.style.width = `${Math.max(0.35, Math.min(100 - parseFloat(bar.style.left), (length / duration) * 100))}%`;
+            track.append(bar);
+            row.append(text, track);
+            details.append(row);
+          }
+          list.append(details);
+        }
+        if (legacyTools.length) {
+          const old = el('details', {className: 'performance-run'});
+          old.append(
+            el('summary', {
+              textContent: `旧会话：${legacyTools.length} 次工具调用（仅有工具耗时；缺少模型请求数据）`
+            })
+          );
+          for (const span of legacyTools.sort((a, b) => b.end - a.end))
+            old.append(
+              el('div', {
+                className: 'performance-row',
+                textContent: `${new Date(span.end).toLocaleString()} · ${span.name} · ${performanceTime(span.end - span.start)}`
+              })
+            );
+          list.append(old);
+        }
+        body.append(list);
+        return null;
+      },
+      '关闭'
+    );
+  }
   async function showSessionTree() {
     const sourceAgent = state.agent;
     if (!sourceAgent) return toast('请选择 Agent');
@@ -3562,6 +4081,7 @@
   $('openConfig').onclick = openConfig;
   $('configClose').onclick = () => $('configDialog').close();
   $('configSave').onclick = saveMailSettings;
+  $('saveSotto').onclick = saveSottoSettings;
   $('connect').onclick = () => openPair();
   $('keyboardConnect').onclick = async () => {
     try {
@@ -3665,16 +4185,7 @@
     try {
       await postAgent(agent.agentId, '/archive');
       sessionKeyboard.unbind(agent.agentId);
-      if (state.agent?.agentId === agent.agentId) {
-        state.agent = null;
-        localStorage.removeItem('rpAgentId');
-        $('agentTitle').textContent = '请选择 Agent';
-        $('agentStatus').textContent = '';
-        $('agentStateBadge').textContent = '未选择';
-        $('agentStateBadge').className = 'state-badge state-none';
-        $('contextUsage').hidden = true;
-        $('messages').innerHTML = '<div class="empty">选择或创建 Agent 开始对话</div>';
-      }
+      if (state.agent?.agentId === agent.agentId) clearAgentSelection();
       await refreshAgents();
       toast('Agent 已 Archive');
     } catch (e) {
@@ -3713,8 +4224,10 @@
   };
   $('mcp').onclick = () => mcpControls().catch(e => toast(e.message));
   $('systemPrompt').onclick = () => showAgentSystemPrompt().catch(e => toast(e.message));
+  $('switchPrompt').onclick = () => switchAgentPrompt().catch(e => toast(e.message));
   $('openSystemPrompts').onclick = () => systemPromptManager().catch(e => toast(e.message));
   $('sessionTree').onclick = () => showSessionTree().catch(e => toast(e.message));
+  $('sessionPerformance').onclick = () => showSessionPerformance().catch(e => toast(e.message));
   $('undo').onclick = () => revert().catch(e => toast(e.message));
   $('controls').onclick = () => modelControls().catch(e => toast(e.message));
   $('compact').onclick = async () => {
@@ -3732,13 +4245,22 @@
       toast('Compact 完成');
     }
   };
+  function prependInput(text) {
+    $('input').value = text + ($('input').value ? `\n${$('input').value}` : '');
+  }
   $('prompt').onsubmit = async event => {
     event.preventDefault();
     if (!state.agent) return toast('请先创建或选择 Agent');
     const text = $('input').value.trim();
     if (!text) return;
     closeCommandPicker();
-    const mode = $('sendMode').value,
+    const selectedMode = $('sendMode').value,
+      mode =
+        state.agent.status === 'streaming' || state.agent.status === 'waiting_for_user'
+          ? selectedMode === 'steer'
+            ? 'steer'
+            : 'follow-up'
+          : 'prompt',
       agentId = state.agent.agentId;
     $('messages').querySelector('.empty')?.remove();
     // `!cmd` runs inside the Agent session (output is recorded in the Session); `!!cmd` keeps the output out of the model context.
@@ -3763,10 +4285,24 @@
       if (mode !== 'prompt' && sent?.disposition)
         toast(sent.disposition === 'queued' ? '已排队，等待当前回合' : '已送达当前回合');
     } catch (e) {
-      addCard('发送失败', e.message, 'error', true);
+      // The composer is shared: only restore into it while the failed Agent is still selected.
+      if (state.agent?.agentId === agentId) {
+        prependInput(text);
+        addCard('发送失败', e.message, 'error', true);
+      } else {
+        const pending = state.failedSends.get(agentId);
+        state.failedSends.set(agentId, pending === undefined ? text : `${text}\n${pending}`);
+        const agent = state.agents.find(item => item.agentId === agentId);
+        toast(`发送到「${agent ? agentLabel(agent) : agentId}」失败：${e.message}；切回该会话时会放回输入框`);
+      }
     }
   };
   $('input').onkeydown = event => {
+    if (event.altKey && event.shiftKey && event.key.toLowerCase() === 'v' && !event.isComposing) {
+      event.preventDefault();
+      if (!event.repeat) void toggleVoiceInput();
+      return;
+    }
     if (!$('commandPicker').hidden) {
       if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
         event.preventDefault();