@my-life-buddies/cli 0.11.0 → 0.13.3

package/dist/web/app.js

@@ -1,6 +1,18 @@
 (() => {
   "use strict";
 
+  const hosted = document.body?.hasAttribute?.("data-hosted-preview") === true;
+  const hostedBuddyId = hosted ? new URL(location.href).searchParams.get("buddyId") : "";
+  const connectionUrl = hosted ? new URL(`../api/buddies/${encodeURIComponent(hostedBuddyId)}/preview`, location.href) : undefined;
+  let connectionInstance = "", connectionReady = !hosted, connectionBusy = false, devPollBusy = false;
+  let connectionChecked = false, connectionFailure = "", devAction = "";
+  function previewApiUrl(path) {
+    if (!hosted) return path;
+    const url = new URL(connectionUrl.href + path);
+    url.searchParams.set("instance", connectionInstance);
+    return url.href;
+  }
+  window.previewApiUrl = previewApiUrl;
   const $ = (selector) => document.querySelector(selector);
   const elements = {
     projectName: $("#project-name"),
@@ -53,6 +65,7 @@
     buddy: undefined,
     dev: { phase: "idle", revision: 0 },
     simulator: { messages: [] },
+    simulatorLoaded: false,
     debug: {
       source: "observed",
       generatedAt: new Date().toISOString(),
@@ -88,7 +101,8 @@
   }
 
   async function api(path, options = {}) {
-    const response = await fetch(path, {
+    const instance = connectionInstance;
+    const response = await fetch(previewApiUrl(path), {
       ...options,
       headers: {
         Accept: "application/json",
@@ -97,8 +111,9 @@
       },
     });
     const value = await response.json().catch(() => ({}));
+    if (hosted && (!connectionReady || instance !== connectionInstance)) throw Object.assign(new Error("本地连接已改变，请等待重新连接"), {status:409, code:"PREVIEW_CONNECTION_CHANGED"});
     if (!response.ok) {
-      const error = new Error(value?.error?.message || `请求失败（HTTP ${response.status}）`);
+      const error = new Error((typeof value?.error === "string" ? value.error : value?.error?.message) || `请求失败（HTTP ${response.status}）`);
       error.code = value?.error?.code || "PREVIEW_REQUEST_FAILED";
       error.status = response.status;
       throw error;
@@ -121,14 +136,14 @@
   }
 
   function formatDuration(value) {
-    if (!Number.isFinite(value)) return "—";
+    if (!Number.isFinite(value)) return "未记录";
     if (value < 1000) return `${Math.round(value)} ms`;
     return `${(value / 1000).toFixed(value < 10_000 ? 2 : 1)} s`;
   }
 
   function formatTime(value, seconds = true) {
     const date = new Date(value);
-    if (!Number.isFinite(date.getTime())) return "—";
+    if (!Number.isFinite(date.getTime())) return "未记录";
     return new Intl.DateTimeFormat("zh-CN", {
       hour: "2-digit",
       minute: "2-digit",
@@ -172,9 +187,10 @@
 
   function phaseCopy(phase) {
     return {
-      idle: "未启动",
+      idle: hosted ? "已连接但 DEV 未启动" : "未启动",
+      disconnected: "未连接本地工程",
       starting: "正在启动",
-      ready: "DEV 在线",
+      ready: "DEV 运行中",
       stopping: "正在停止",
       failed: "启动失败",
     }[phase] || phase;
@@ -183,6 +199,7 @@
   function applyDevState(next) {
     if (!next || !Number.isFinite(next.revision)) return false;
     if (Number.isFinite(state.dev?.revision) && next.revision < state.dev.revision) return false;
+    if (next.phase === "ready" && state.dev.phase !== "ready") state.simulatorLoaded = false;
     state.dev = next;
     if (next.ready?.buddy) state.buddy = next.ready.buddy;
     return true;
@@ -230,18 +247,20 @@
   let pairingRequest = 0;
 
   function renderDev() {
-    const phase = state.dev.phase;
+    const phase = connectionReady ? (devAction === "start" ? "starting" : devAction === "stop" ? "stopping" : state.dev.phase) : "disconnected";
+    renderWorkbench();
     if (!elements.pairingPanel.hidden && pairingRevision !== state.dev.revision) void togglePairing(true);
     elements.connectionState.dataset.phase = phase;
-    elements.connectionLabel.textContent = phaseCopy(phase);
-    elements.devControl.disabled = phase === "starting" || phase === "stopping";
+    elements.connectionLabel.textContent = phase === "disconnected" ? "未连接本地工程" : phaseCopy(phase);
+    elements.devControl.disabled = !connectionReady || Boolean(devAction) || phase === "starting" || phase === "stopping";
     elements.devControl.dataset.action = phase === "ready" ? "stop" : "start";
-    elements.devControl.textContent = phase === "ready" ? "停止 DEV" : phase === "starting" ? "正在启动…" : phase === "stopping" ? "正在停止…" : "启动 DEV";
+    elements.devControl.textContent = devAction === "start" ? "正在启动…" : devAction === "stop" ? "正在停止…" : phase === "failed" ? "重试启动" : phase === "ready" ? "停止 DEV" : phase === "starting" ? "正在启动…" : phase === "stopping" ? "正在停止…" : "启动 DEV";
     elements.environmentAgent.textContent = phase === "ready"
       ? `${state.dev.ready?.agentId || "已就绪"} · CLI 托管`
       : phaseCopy(phase);
 
     const active = state.simulator.activeRun;
+    elements.pairDevice.disabled = !connectionReady || phase !== "ready";
     elements.buddyStatus.textContent = phase !== "ready"
       ? phaseCopy(phase)
       : active
@@ -252,7 +271,7 @@
     elements.resetConversation.disabled = phase !== "ready" || Boolean(active) || state.resetting || state.sending || state.resetUnavailable;
     elements.resetConversation.title = state.resetUnavailable ? "当前平台暂不支持重开会话" : active ? "请等待当前回复完成后再清空" : "结束当前开发版对话，开始一段全新会话";
     elements.devControl.disabled ||= state.resetting;
-    elements.messageInput.disabled = phase !== "ready" || Boolean(active) || state.resetting || state.sending;
+    elements.messageInput.disabled = phase !== "ready" || !state.simulatorLoaded || Boolean(active) || state.resetting || state.sending;
     elements.sendMessage.hidden = Boolean(active);
     updateSendButton();
     syncPolling();
@@ -266,6 +285,45 @@
     }
   }
 
+  function renderWorkbench() {
+    if (!hosted) return;
+    const phase = connectionReady ? (devAction === "start" ? "starting" : devAction === "stop" ? "stopping" : state.dev.phase) : "disconnected";
+    const runs = state.debug.runs || [];
+    const active = state.simulator.activeRun;
+    document.body.dataset.connection = connectionReady ? "connected" : "disconnected";
+    document.body.dataset.devPhase = phase;
+    document.body.dataset.hasRuns = String(runs.length > 0);
+    document.body.dataset.busy = String(phase === "starting" || phase === "stopping" || state.sending || Boolean(active));
+    const guide = $("#workbench-state");
+    const history = Boolean(state.simulator.messages?.length);
+    $("#debug-buddy-name").textContent = state.buddy?.name || new URL(location.href).searchParams.get("buddyName") || "我的搭子";
+    const copy = !connectionChecked ? ["正在检查连接", "读取本地工程的连接状态。"]
+      : phase === "disconnected" ? [connectionInstance ? "本地连接已断开" : "连接本地工程", connectionFailure || (connectionInstance ? "正在等待重新连接。保留当前记录，连接恢复后继续调试。" : "点击上方「连接工程」，复制指令到终端运行。")]
+      : phase === "starting" ? ["正在启动调试", "正在准备运行环境，启动完成后即可发送消息。"]
+      : phase === "stopping" ? ["正在停止调试", "等待运行环境退出，当前记录会保留。"]
+      : phase === "failed" ? ["调试未能启动", "查看上方错误信息，修复工程后点击「重试启动」。"]
+      : phase === "idle" ? ["工程已连接", "点击上方「启动 DEV」，开始体验搭子。"]
+      : !state.simulatorLoaded ? ["正在读取对话", "同步当前会话，完成后即可发送消息。"]
+      : state.sending ? ["正在发送消息", "提交成功后，这里会显示本次执行过程。"]
+      : active ? ["等待执行记录", "消息已提交，正在同步本次执行过程。"]
+      : ["开始一轮调试", history ? "右侧保留了历史对话。本地执行记录从本次连接开始，发一条新消息即可查看。" : "在右侧发一条消息，观察搭子的回复与执行过程。"];
+    guide.hidden = phase === "ready" && runs.length > 0;
+    $("#workbench-state-title").textContent = copy[0];
+    $("#workbench-state-copy").textContent = copy[1];
+    $("#connection-description").textContent = !connectionChecked ? "检查中" : phase === "disconnected" ? "等待连接" : "仅用于本地调试";
+    const connectButton = $("#get-connect-command");
+    connectButton.className = `button ${connectionReady ? "button-secondary" : "button-primary"}`;
+    connectButton.textContent = connectionReady ? "连接指令" : connectionInstance ? "重新连接" : "连接工程";
+    const hint = $("#preview-hint");
+    hint.textContent = phase !== "ready" ? (phase === "disconnected" ? "连接工程后开始体验" : phase === "starting" ? "正在启动，稍后即可发送" : "启动 DEV 后开始体验")
+      : !state.simulatorLoaded ? "正在读取对话，请稍候" : state.resetting ? "正在清空对话，请稍候" : state.sending ? "正在发送，请稍候"
+      : active ? (state.simulator.streaming?.text ? "正在生成回复" : "消息已送达，等待回复") : "Enter 发送，Shift + Enter 换行";
+    if (!state.project) elements.buddyName.textContent = new URL(location.href).searchParams.get("buddyName") || "我的搭子";
+    const empty = elements.chatMessages.querySelector(".chat-empty");
+    if (empty) empty.textContent = phase === "ready" ? "发一条消息，开始体验" : phase === "disconnected" ? "连接后，在这里体验搭子的回复" : "启动 DEV 后，开始对话";
+    elements.messageInput.placeholder = active ? "等待当前回复完成" : phase === "ready" ? "给搭子发一条消息" : "等待调试就绪";
+  }
+
   function runOrdinal(run, index, runs) {
     // Older running preview servers have no ordinal yet. Never infer a message
     // association from list positions or timestamps; this is a display number only.
@@ -317,8 +375,8 @@
     elements.runStatus.textContent = runStatusCopy(run?.status || "idle");
     elements.metricAccept.textContent = formatDuration(run?.acceptLatencyMs);
     elements.metricFirst.textContent = formatDuration(run?.firstTextLatencyMs);
-    elements.metricResponse.textContent = run?.completion === "no_reply" ? "—" : formatDuration(run?.responseTimeMs);
-    elements.metricMessages.textContent = String(state.simulator.messages?.length || 0);
+    elements.metricResponse.textContent = formatDuration(run?.responseTimeMs);
+    elements.metricMessages.textContent = state.simulatorLoaded ? String(state.simulator.messages?.length || 0) : "读取中";
     renderOverview(run);
     renderTimeline(run);
   }
@@ -351,46 +409,54 @@
     elements.overviewEmpty.hidden = Boolean(run);
     elements.overviewContent.hidden = !run;
     if (!run) return;
+    const finished = ["completed", "failed", "cancelled"].includes(run.status);
+    const measuredFirstText = Number.isFinite(run.firstTextLatencyMs);
+    const hasText = measuredFirstText || (state.simulator.streaming?.runId === run.runId && Boolean(state.simulator.streaming.text));
+    const noReply = run.completion === "no_reply";
+    const interrupted = ["failed", "cancelled", "cancel_requested"].includes(run.status);
+    const progress = $("#run-progress");
+    if (progress) {
+      clear(progress);
+      const stages = [
+        ["消息已提交", "done"],
+        ["等待回复", hasText || finished ? "done" : "active"],
+        [finished && !hasText ? "未记录流式输出" : "生成回复", hasText ? (finished ? "done" : "active") : finished ? "skipped" : "waiting"],
+        [run.status === "failed" ? "执行失败" : run.status === "cancelled" ? "已停止" : noReply ? "未产生回复" : "完成", finished ? (interrupted ? "error" : "done") : "waiting"],
+      ];
+      if (interrupted) stages.forEach(stage => { if (stage[1] === "active") stage[1] = "error"; });
+      for (const [label, status] of stages) progress.append(node("li", { "data-stage": status }, label));
+    }
     clear(elements.waterfall);
-    const accept = Number.isFinite(run.acceptLatencyMs) ? run.acceptLatencyMs : 0;
-    const first = Number.isFinite(run.firstTextLatencyMs) ? run.firstTextLatencyMs : undefined;
-    const total = Number.isFinite(run.responseTimeMs)
-      ? run.responseTimeMs
-      : Math.max(accept, Date.now() - new Date(run.startedAt).getTime());
-    const waitingForText = Math.max(0, (first ?? total) - accept);
-    const streaming = first === undefined ? 0 : Math.max(0, total - first);
-    const maximum = Math.max(total, 1);
-    const rows = [
-      ["App Server 接收", accept],
-      [first === undefined ? "等待首段文字" : "首段文字前", waitingForText],
-      [run.status === "completed" ? "完整回复生成" : "回复生成中", streaming],
-    ];
-    for (const [label, duration] of rows) {
+    // Only report observed timings. A finished run with missing telemetry never keeps counting.
+    const timingRows = [["消息接收", run.acceptLatencyMs], ["首段文字", run.firstTextLatencyMs], ["总耗时", run.responseTimeMs]];
+    const maximum = Math.max(1, ...timingRows.map(([,value]) => Number.isFinite(value) ? value : 0));
+    elements.waterfall.hidden = !timingRows.some(([,value]) => Number.isFinite(value));
+    for (const [label, duration] of timingRows) {
+      if (!Number.isFinite(duration)) continue;
       const row = node("div", { class: "waterfall-row" });
       row.append(node("span", {}, label));
       const track = node("span", { class: "waterfall-track" });
       const fill = node("span", { class: "waterfall-fill" });
-      fill.style.transform = `scaleX(${Math.max(0.015, duration / maximum)})`;
+      fill.style.transform = `scaleX(${duration / maximum})`;
       track.append(fill);
       row.append(track, node("strong", {}, formatDuration(duration)));
       elements.waterfall.append(row);
     }
     elements.runSummaryCopy.textContent = run.status === "failed"
-      ? "这个本地回合在 Agent 侧执行失败，没有形成完整回复；请到执行时间线和协议日志查看失败位置。"
-      : run.status === "cancelled"
-        ? "这个本地回合已被停止，尚未完成的回复已经作废；此前已经生效的平台写操作不会自动回滚。"
-      : run.completion === "no_reply"
-          ? "这个本地回合已经结束，但没有观察到新的完整回复。"
-      : run.status === "completed"
-      ? `本次本地回合在 ${formatDuration(run.firstTextLatencyMs)} 收到首段文字，并在 ${formatDuration(run.responseTimeMs)} 完成正式回复。`
-      : run.status === "cancel_requested"
-        ? "停止请求已经发往 App Server；输入框会在本地回合真正结束后重新开放。"
-        : first === undefined
-          ? "当前本地回合正在等待第一段真实输出。收到后，模拟器会立即开始追加文字。"
-          : "当前本地回合正在生成回复，调试器与 App 模拟器会同步展示文字增量。";
+      ? "本轮执行失败。查看执行时间线定位问题，或展开协议日志中的错误详情。"
+      : run.status === "cancelled" ? "本轮已停止。已完成的平台写入不会自动撤销。"
+      : noReply ? "本轮已结束，没有产生新的完整回复。"
+      : run.status === "completed" ? (measuredFirstText ? `回复已完成，首段文字耗时 ${formatDuration(run.firstTextLatencyMs)}。` : "回复已完成，本轮未记录首段文字耗时。")
+      : run.status === "cancel_requested" ? "正在停止，结束后可以继续发送消息。"
+      : hasText ? "正在生成回复，右侧同步展示输出。" : "消息已提交，等待搭子开始回复。";
   }
 
+  let timelineSignature = "", contextSignature = "", protocolSignature = "";
+  const expandedLogs = new Map();
   function renderTimeline(run) {
+    const signature = JSON.stringify([run?.runId, state.debug.events]);
+    if (signature === timelineSignature) return;
+    timelineSignature = signature;
     clear(elements.timelineList);
     const events = (state.debug.events || []).filter((event) => !run || event.runId === run.runId);
     if (!events.length) {
@@ -410,6 +476,9 @@
   }
 
   function renderContext() {
+    const signature = JSON.stringify(state.simulator.messages);
+    if (signature === contextSignature) return;
+    contextSignature = signature;
     clear(elements.contextList);
     elements.contextSource.textContent = "平台聊天记录";
     const messages = state.simulator.messages || [];
@@ -419,7 +488,7 @@
     }
     for (const message of messages) {
       const row = node("article", { class: "context-row", "data-role": message.role });
-      row.append(node("span", { class: "context-role" }, message.role));
+      row.append(node("span", { class: "context-role" }, message.role === "user" ? "用户" : message.role === "assistant" ? "搭子" : message.role));
       row.append(node("p", { class: "context-text" }, message.text));
       row.append(node("time", { class: "context-time", dateTime: message.createdAt }, formatTime(message.createdAt)));
       elements.contextList.append(row);
@@ -427,13 +496,33 @@
   }
 
   function renderProtocol() {
+    const signature = JSON.stringify(state.debug.events);
+    if (signature === protocolSignature) return;
+    protocolSignature = signature;
     clear(elements.protocolLog);
     const events = state.debug.events || [];
     if (!events.length) {
       elements.protocolLog.append(node("p", { class: "timeline-empty" }, "本机还没有协议事件。"));
       return;
     }
-    for (const event of events) {
+    for (const [index, event] of events.entries()) {
+      if (hosted) {
+        const key = event.eventId || `${event.timestamp}:${event.type}:${index}`;
+        const row = node("details", { class: "protocol-entry" });
+        const error = event.type === "agent.stderr" || /failed|error/.test(event.type);
+        row.open = expandedLogs.get(key) ?? error;
+        row.dataset.level = error ? "error" : "info";
+        row.addEventListener("toggle", () => expandedLogs.set(key, row.open));
+        const summary = node("summary");
+        summary.append(node("time", { dateTime: event.timestamp }, formatTime(event.timestamp)));
+        summary.append(node("span", { class: "log-summary" }, (event.summary || event.type).split("\n")[0]));
+        summary.append(node("span", { class: "log-channel" }, event.channel));
+        row.append(summary);
+        row.append(node("p", { class: "log-meta" }, `${event.type}${event.runId ? ` / ${event.runId}` : ""}${Number.isFinite(event.durationMs) ? ` / ${formatDuration(event.durationMs)}` : ""}`));
+        if (event.summary?.includes("\n")) row.append(node("pre", { class: "runtime-log-text" }, event.summary));
+        elements.protocolLog.append(row);
+        continue;
+      }
       const row = node("div", { class: "protocol-row" });
       row.append(node("time", { class: "protocol-time", dateTime: event.timestamp }, formatTime(event.timestamp)));
       row.append(node("span", { class: "protocol-channel" }, event.channel));
@@ -451,6 +540,20 @@
 
   let messageSignature = "";
   let followMessages = true;
+  let liveReply, liveReplyText = "";
+  function renderLiveReply() {
+    if (!liveReply) return;
+    const text = state.simulator.streaming?.runId === state.simulator.activeRun?.runId ? state.simulator.streaming?.text || "" : "";
+    if (text === liveReplyText) return;
+    liveReplyText = text;
+    clear(liveReply);
+    if (text) { liveReply.className = "message-content"; liveReply.append(node("div", { class: "message-bubble", "aria-label": "搭子正在回复" }, text)); }
+    else {
+      const indicator = node("div", { class: "replying-indicator", "aria-label": "搭子正在准备回复" });
+      indicator.append(node("i"), node("i"), node("i")); liveReply.append(indicator);
+    }
+    if (followMessages) followLatestMessages();
+  }
 
   function followLatestMessages() {
     followMessages = true;
@@ -460,14 +563,15 @@
 
   function renderMessages() {
     renderWidgets();
-    const signature = JSON.stringify([state.simulator.messages, Boolean(state.simulator.activeRun)]);
-    if (signature === messageSignature) return;
+    const signature = JSON.stringify([state.simulator.messages, state.simulator.activeRun?.runId]);
+    if (signature === messageSignature) { renderLiveReply(); return; }
     messageSignature = signature;
     const previousTop = elements.chatMessages.scrollTop;
     clear(elements.chatMessages);
+    liveReply = undefined; liveReplyText = "";
     const messages = state.simulator.messages || [];
     if (!messages.length && !state.simulator.activeRun) {
-      elements.chatMessages.append(node("div", { class: "chat-empty", "aria-label": "暂无消息" }));
+      elements.chatMessages.append(node("div", { class: "chat-empty", "aria-label": "暂无消息" }, hosted ? (state.dev.phase === "ready" ? "发一条消息，开始体验" : "启动 DEV 后，开始对话") : ""));
     }
     let renderedDay;
     for (const message of messages) {
@@ -485,9 +589,10 @@
     }
     if (state.simulator.activeRun) {
       const row = node("div", { class: "message-row typing-row", "data-role": "assistant" });
-      const indicator = node("div", { class: "replying-indicator", "aria-label": "搭子正在准备回复" });
-      indicator.append(node("i"), node("i"), node("i"));
-      row.append(messageAvatar("assistant"), indicator);
+      liveReply = node("div", { class: "message-content" });
+      liveReplyText = "\0";
+      renderLiveReply();
+      row.append(messageAvatar("assistant"), liveReply);
       elements.chatMessages.append(row);
     }
     if (followMessages) followLatestMessages();
@@ -501,6 +606,7 @@
     renderRuns();
     renderContext();
     renderProtocol();
+    renderWorkbench();
   }
 
   function renderAll() {
@@ -531,38 +637,45 @@
       renderContext();
       await refreshDebug();
     } catch (cause) {
-      if (cause?.code !== "SIMULATOR_NOT_READY") showError(cause);
+      if (hosted && (!connectionReady || cause?.status === 409)) void refreshConnection();
+      else if (cause?.code !== "SIMULATOR_NOT_READY") showError(cause);
     } finally {
       state.pollingBusy = false;
     }
   }
 
   function syncPolling() {
-    if (state.dev.phase === "ready" && state.polling === undefined) {
+    if (connectionReady && state.dev.phase === "ready" && state.polling === undefined) {
       void refreshSimulator();
       state.polling = window.setInterval(() => void refreshSimulator(), 1200);
-    } else if (state.dev.phase !== "ready" && state.polling !== undefined) {
+    } else if ((!connectionReady || state.dev.phase !== "ready") && state.polling !== undefined) {
       window.clearInterval(state.polling);
       state.polling = undefined;
     }
   }
 
   async function controlDev() {
-    if (state.dev.phase === "starting" || state.dev.phase === "stopping") return;
-    elements.devControl.disabled = true;
+    if (!connectionReady || state.dev.phase === "starting" || state.dev.phase === "stopping") return;
+    if (devAction) return;
+    devAction = state.dev.phase === "ready" ? "stop" : "start";
+    elements.errorBanner.hidden = true;
+    renderDev();
     try {
-      const path = state.dev.phase === "ready" ? "/api/dev/stop" : "/api/dev/start";
+      const path = `/api/dev/${devAction}`;
       const value = await api(path, { method: "POST" });
       applyDevState(value.state);
       if (state.dev.phase !== "ready" && path.endsWith("stop")) state.simulator = { messages: state.simulator.messages || [] };
       renderAll();
     } catch (cause) {
       showError(cause);
+    } finally {
+      devAction = "";
+      renderDev();
     }
   }
 
   function updateSendButton() {
-    const ready = state.dev.phase === "ready" && !state.simulator.activeRun && !state.resetting && !state.sending;
+    const ready = connectionReady && !devAction && state.simulatorLoaded && state.dev.phase === "ready" && !state.simulator.activeRun && !state.resetting && !state.sending;
     elements.sendMessage.disabled = !ready || !elements.messageInput.value.trim();
   }
 
@@ -571,8 +684,9 @@
   async function sendMessage(event) {
     event.preventDefault();
     const text = elements.messageInput.value;
-    if (!text.trim() || state.dev.phase !== "ready" || state.simulator.activeRun || state.resetting || state.sending) return;
+    if (!text.trim() || !state.simulatorLoaded || devAction || state.dev.phase !== "ready" || state.simulator.activeRun || state.resetting || state.sending) return;
     state.sending = true;
+    elements.errorBanner.hidden = true;
     followLatestMessages();
     renderDev();
     elements.messageInput.disabled = true;
@@ -679,6 +793,7 @@
   function applySimulatorState(next) {
     if ((next.conversationRevision || 0) < (state.simulator.conversationRevision || 0)) return false;
     state.simulator = next;
+    state.simulatorLoaded = true;
     return true;
   }
 
@@ -686,6 +801,7 @@
     if (elements.resetConversation.disabled) return;
     if (!window.confirm("清空当前对话并重新开始？\n这会结束当前开发版会话，重置聊天上下文、记忆和该会话的主动服务。旧记录仅在服务端留档；搭子资料和工程文件会保留。")) return;
     state.resetting = true;
+    elements.errorBanner.hidden = true;
     widgets?.reset();
     state.simulatorRequest++;
     elements.resetConversation.textContent = "正在清空…";
@@ -738,6 +854,7 @@
   }
 
   async function boot() {
+    if (hosted && !connectionReady) { void refreshConnection(); return; }
     try {
       const [project, dev, debug] = await Promise.all([
         api("/api/project"),
@@ -748,7 +865,7 @@
       state.dev = dev.state;
       state.debug = debug.debug;
       renderAll();
-      connectEvents();
+      if (!hosted) connectEvents();
       // Load the cloud profile independently of Agent startup. If it fails,
       // the local project and DEV controls remain usable and show the error.
       const { buddy } = await api("/api/buddy");
@@ -759,6 +876,97 @@
     }
   }
 
+  function disconnected(message = "未连接本地工程") {
+    connectionReady = false;
+    state.dev = { phase: "idle", revision: -1 };
+    state.simulatorRequest++;
+    widgets?.reset();
+    void togglePairing(false);
+    renderDev(); syncPolling();
+    $("#local-status").textContent = "本地工程";
+  }
+
+  async function refreshConnection() {
+    if (connectionBusy) return;
+    connectionBusy = true;
+    try {
+      const response = await fetch(connectionUrl, { signal: AbortSignal.timeout(5000) });
+      const value = await response.json();
+      if (!response.ok) throw new Error(value.error || "连接状态读取失败");
+      connectionChecked = true; connectionFailure = "";
+      $("#connect-command").textContent = value.command;
+      $("#copy-connect-command").disabled = false;
+      if (!value.connected) { disconnected(); return; }
+      const changed = connectionInstance !== value.instanceId;
+      const newlyConnected = !connectionReady || changed;
+      connectionInstance = value.instanceId;
+      connectionReady = true;
+      const projectName = (value.projectRoot || "").split(/[\\/]/).filter(Boolean).at(-1) || "本地工程";
+      $("#local-status").textContent = projectName;
+      $("#local-status").title = value.projectRoot || "本地工程";
+      $("#machine-name").textContent = value.machineName || "未提供";
+      $("#project-root").textContent = value.projectRoot || "未提供";
+      if (newlyConnected) {
+        $("#connect-instructions").hidden = true;
+        $("#get-connect-command").setAttribute("aria-expanded", "false");
+        state.dev = { phase: "idle", revision: -1 };
+        if (changed) {
+          state.simulator = { messages: [] }; state.simulatorLoaded = false; state.debug = { runs: [], events: [], messages: [] };
+          state.selectedRunId = ""; pendingSend = undefined; state.buddy = undefined;
+        }
+        elements.errorBanner.hidden = true;
+        renderDev();
+        await boot();
+      }
+    } catch (cause) {
+      const message = cause.message || "连接已中断，正在重试…";
+      connectionChecked = true; connectionFailure = message;
+      disconnected(message);
+      if (!$("#connect-instructions").hidden) { $("#connect-command").textContent = message; $("#copy-connect-command").disabled = true; }
+    }
+    finally { connectionBusy = false; }
+  }
+
+  async function pollHostedDev() {
+    if (!connectionReady || devPollBusy) return;
+    devPollBusy = true;
+    try {
+      const [dev, debug] = await Promise.all([api("/api/dev"), api("/api/debug")]);
+      applyDevState(dev.state); state.debug = debug.debug; renderAll();
+    } catch (cause) {
+      // Polling conflicts are connection transitions, already explained by the workbench state.
+      if (!connectionReady || cause?.status === 409) void refreshConnection();
+      else showError(cause);
+    }
+    finally { devPollBusy = false; }
+  }
+
+  if (hosted) {
+    renderDev();
+    const engineeringDetails = $(".connection-details");
+    document.addEventListener("pointerdown", event => {
+      if (engineeringDetails.open && !engineeringDetails.contains(event.target)) engineeringDetails.open = false;
+    });
+    document.addEventListener("keydown", event => {
+      if (event.key === "Escape" && engineeringDetails.open) {
+        engineeringDetails.open = false;
+        engineeringDetails.querySelector("summary").focus();
+      }
+    });
+    $("#get-connect-command").addEventListener("click", () => {
+      $("#connect-instructions").hidden = !$("#connect-instructions").hidden;
+      $("#get-connect-command").setAttribute("aria-expanded", String(!$("#connect-instructions").hidden));
+      void refreshConnection();
+    });
+    $("#copy-connect-command").addEventListener("click", async () => {
+      try { await navigator.clipboard.writeText($("#connect-command").textContent); toast("连接指令已复制，请在当前搭子的工程目录执行"); }
+      catch { showError(new Error("请手动复制下方的完整连接指令")); }
+    });
+    const statusTimer = window.setInterval(() => void refreshConnection(), 2000);
+    const devTimer = window.setInterval(() => void pollHostedDev(), 1200);
+    window.addEventListener("pagehide", () => { window.clearInterval(statusTimer); window.clearInterval(devTimer); window.clearInterval(state.polling); });
+  }
+
   elements.resetConversation.addEventListener("click", () => void resetConversation());
   elements.latestMessages.addEventListener("click", followLatestMessages);
   elements.chatMessages.addEventListener("scroll", () => {

package/dist/web/index.html

@@ -93,10 +93,10 @@
                 <h2 id="run-title">尚无本地回合</h2>
                 <span class="status-pill" id="run-status" data-status="idle">等待消息</span>
               </div>
-              <div class="run-reference" id="run-reference" hidden>
+              <details class="run-reference" id="run-reference" hidden><summary>回合标识</summary>
                 <span id="run-id"></span>
                 <button type="button" class="text-button" id="copy-run-id" disabled>复制 ID</button>
-              </div>
+              </details>
             </div>
             <div class="run-controls">
               <label class="run-picker-label" for="run-picker">切换回合</label>
@@ -112,10 +112,10 @@
           </div>
 
           <dl class="run-metrics" aria-label="本地回合指标">
-            <div><dt>接收</dt><dd id="metric-accept">—</dd></div>
-            <div><dt>首段文字</dt><dd id="metric-first">—</dd></div>
-            <div><dt>完整耗时</dt><dd id="metric-response">—</dd></div>
-            <div><dt>消息</dt><dd id="metric-messages">0</dd></div>
+            <div><dt>接收</dt><dd id="metric-accept">未记录</dd></div>
+            <div><dt>首段文字</dt><dd id="metric-first">未记录</dd></div>
+            <div><dt>完整耗时</dt><dd id="metric-response">未记录</dd></div>
+            <div><dt>会话消息</dt><dd id="metric-messages">0</dd></div>
           </dl>
 
         </div>
@@ -125,15 +125,14 @@
             <div class="overview-grid">
               <article class="run-summary">
                 <div class="section-heading">
-                  <div><h3>这一次发生了什么</h3><p>从消息到回复，按真实事件还原。</p></div>
-                  <span class="source-label">本机观测</span>
+                  <div><h3>执行过程</h3></div>
                 </div>
                 <div class="empty-state" id="overview-empty">
-                  <span class="empty-glyph" aria-hidden="true">↗</span>
                   <h4>发一条消息，开始记录</h4>
-                  <p>这里会按本地回合展示真实的接收、首段文字、生成过程和完成状态。</p>
+                  <p>右侧发送消息后，这里显示本次执行过程。</p>
                 </div>
                 <div id="overview-content" hidden>
+                  <ol class="run-progress" id="run-progress" aria-label="回合执行进度"></ol>
                   <div class="waterfall" id="waterfall" aria-label="本地回合耗时分布"></div>
                   <p class="run-summary-copy" id="run-summary-copy"></p>
                 </div>
@@ -144,8 +143,8 @@
                 <h3>DEV · 私聊</h3>
                 <dl>
                   <div><dt>Agent</dt><dd id="environment-agent">等待启动</dd></div>
-                  <div><dt>Runtime</dt><dd id="environment-runtime">—</dd></div>
-                  <div><dt>模型</dt><dd id="environment-model">—</dd></div>
+                  <div><dt>Runtime</dt><dd id="environment-runtime">未记录</dd></div>
+                  <div><dt>模型</dt><dd id="environment-model">未记录</dd></div>
                 </dl>
               </article>
             </div>
@@ -153,15 +152,14 @@
 
           <section id="panel-timeline" class="debug-panel" role="tabpanel" aria-labelledby="tab-timeline" hidden>
             <div class="section-heading">
-              <div><h3>执行时间线</h3><p>按发生顺序查看消息发送、流式输出和会话状态。</p></div>
-              <span class="source-label">真实事件</span>
+              <div><h3>执行时间线</h3><p>查看当前回合的事件。</p></div>
             </div>
             <ol class="timeline" id="timeline-list"></ol>
           </section>
 
           <section id="panel-context" class="debug-panel" role="tabpanel" aria-labelledby="tab-context" hidden>
             <div class="section-heading">
-              <div><h3>当前对话记录</h3><p>展示平台保存的当前对话消息。</p></div>
+              <div><h3>当前对话记录</h3><p>包含当前会话的历史消息，不限于所选回合。</p></div>
               <span class="source-label" id="context-source">平台聊天记录</span>
             </div>
             <div class="context-list" id="context-list"></div>
@@ -169,7 +167,7 @@
 
           <section id="panel-protocol" class="debug-panel" role="tabpanel" aria-labelledby="tab-protocol" hidden>
             <div class="section-heading">
-              <div><h3>协议日志</h3><p>Runtime 输出、错误堆栈与 MLB 通信事件。</p></div>
+              <div><h3>协议日志</h3><p>查看当前本地连接的完整日志。</p></div>
               <button class="text-button" id="copy-protocol" type="button">复制可见日志</button>
             </div>
             <div class="protocol-log" id="protocol-log" role="log" aria-live="polite"></div>