@my-life-buddies/cli 0.13.0 → 0.13.3

package/dist/web/app.js

@@ -5,6 +5,7 @@
   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);
@@ -64,6 +65,7 @@
     buddy: undefined,
     dev: { phase: "idle", revision: 0 },
     simulator: { messages: [] },
+    simulatorLoaded: false,
     debug: {
       source: "observed",
       generatedAt: new Date().toISOString(),
@@ -109,7 +111,7 @@
       },
     });
     const value = await response.json().catch(() => ({}));
-    if (hosted && (!connectionReady || instance !== connectionInstance)) throw new Error("本地连接已改变，请等待重新连接");
+    if (hosted && (!connectionReady || instance !== connectionInstance)) throw Object.assign(new Error("本地连接已改变，请等待重新连接"), {status:409, code:"PREVIEW_CONNECTION_CHANGED"});
     if (!response.ok) {
       const error = new Error((typeof value?.error === "string" ? value.error : value?.error?.message) || `请求失败（HTTP ${response.status}）`);
       error.code = value?.error?.code || "PREVIEW_REQUEST_FAILED";
@@ -134,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",
@@ -197,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;
@@ -244,18 +247,20 @@
   let pairingRequest = 0;
 
   function renderDev() {
-    const phase = connectionReady ? state.dev.phase : "disconnected";
+    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 = phase === "disconnected" ? "未连接本地工程" : phaseCopy(phase);
-    elements.devControl.disabled = !connectionReady || phase === "starting" || phase === "stopping";
+    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
@@ -266,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();
@@ -280,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.
@@ -331,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);
   }
@@ -365,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) {
@@ -424,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 || [];
@@ -433,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);
@@ -441,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));
@@ -465,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;
@@ -474,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) {
@@ -499,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();
@@ -515,6 +606,7 @@
     renderRuns();
     renderContext();
     renderProtocol();
+    renderWorkbench();
   }
 
   function renderAll() {
@@ -545,7 +637,8 @@
       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;
     }
@@ -563,20 +656,26 @@
 
   async function controlDev() {
     if (!connectionReady || state.dev.phase === "starting" || state.dev.phase === "stopping") return;
-    elements.devControl.disabled = true;
+    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();
   }
 
@@ -585,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;
@@ -693,6 +793,7 @@
   function applySimulatorState(next) {
     if ((next.conversationRevision || 0) < (state.simulator.conversationRevision || 0)) return false;
     state.simulator = next;
+    state.simulatorLoaded = true;
     return true;
   }
 
@@ -700,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 = "正在清空…";
@@ -781,7 +883,7 @@
     widgets?.reset();
     void togglePairing(false);
     renderDev(); syncPolling();
-    $("#local-status").textContent = message;
+    $("#local-status").textContent = "本地工程";
   }
 
   async function refreshConnection() {
@@ -791,6 +893,7 @@
       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; }
@@ -798,17 +901,29 @@
       const newlyConnected = !connectionReady || changed;
       connectionInstance = value.instanceId;
       connectionReady = true;
-      $("#local-status").textContent = ["已连接本地工程", value.machineName, value.projectRoot].filter(Boolean).join(" · ");
+      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.debug = { runs: [], events: [], messages: [] };
+          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) { disconnected(cause.message || "连接已中断，正在重试…"); }
+    } 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; }
   }
 
@@ -818,14 +933,29 @@
     try {
       const [dev, debug] = await Promise.all([api("/api/dev"), api("/api/debug")]);
       applyDevState(dev.state); state.debug = debug.debug; renderAll();
-    } catch (cause) { showError(cause); }
+    } 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 () => {

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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@my-life-buddies/cli",
-  "version": "0.13.0",
+  "version": "0.13.3",
   "type": "module",
   "description": "搭搭 Developer Platform 命令行工具",
   "publishConfig": {
@@ -39,7 +39,7 @@
     "ws": "8.21.3"
   },
   "devDependencies": {
-    "@buddy/cli-core": "0.13.0",
-    "@buddy/preview": "0.13.0"
+    "@buddy/cli-core": "0.13.3",
+    "@buddy/preview": "0.13.3"
   }
 }