@my-life-buddies/cli 0.13.0 → 0.14.1

package/dist/web/app.js

@@ -5,6 +5,8 @@
   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 = "";
+  let eventSource, eventSourceInstance = "", liveEventsActive = false, pollingInterval = 0;
   function previewApiUrl(path) {
     if (!hosted) return path;
     const url = new URL(connectionUrl.href + path);
@@ -64,6 +66,7 @@
     buddy: undefined,
     dev: { phase: "idle", revision: 0 },
     simulator: { messages: [] },
+    simulatorLoaded: false,
     debug: {
       source: "observed",
       generatedAt: new Date().toISOString(),
@@ -109,7 +112,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 +137,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 +200,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 +248,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,8 +272,8 @@
     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.sendMessage.hidden = Boolean(active);
+    elements.messageInput.disabled = phase !== "ready" || !state.simulatorLoaded || state.resetting || state.sending;
+    elements.sendMessage.hidden = false;
     updateSendButton();
     syncPolling();
     if (
@@ -280,6 +286,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 || (state.debug.diagnostics?.records || []).some(record => record.kind !== "log"));
+    $("#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.
@@ -288,7 +333,7 @@
 
   function runOptionLabel(run, index, runs) {
     const date = dayKey(run.startedAt) === dayKey(new Date()) ? "" : `${dayLabel(run.startedAt) || ""} `;
-    return `第 ${runOrdinal(run, index, runs)} 轮 · ${date}${formatTime(run.startedAt)} · ${runStatusCopy(run.status)}`;
+    return `第 ${runOrdinal(run, index, runs)} 轮 · ${date}${formatTime(run.startedAt)} · ${(run.completion === "no_reply" && run.status === "completed" ? "未观察到回复" : runStatusCopy(run.status))}`;
   }
 
   let runPickerSignature = "";
@@ -328,11 +373,11 @@
     elements.runId.title = run?.runId || "";
     elements.copyRunId.disabled = !run;
     elements.runStatus.dataset.status = run?.status || "idle";
-    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.runStatus.textContent = run?.completion === "no_reply" && run.status === "completed" ? "未观察到回复" : runStatusCopy(run?.status || "idle");
+    elements.metricAccept.textContent = formatElapsedSeconds(run?.acceptLatencyMs);
+    elements.metricFirst.textContent = formatElapsedSeconds(run?.firstTextLatencyMs);
+    elements.metricResponse.textContent = run?.completion === "no_reply" ? "未观察到回复" : formatElapsedSeconds(replyEndLatency(run));
+    elements.metricMessages.textContent = state.simulatorLoaded ? String(state.simulator.messages?.length || 0) : "读取中";
     renderOverview(run);
     renderTimeline(run);
   }
@@ -361,52 +406,78 @@
     }
   }
 
+  function formatElapsedSeconds(value) {
+    return Number.isFinite(value) ? `${Number((value / 1000).toFixed(3))} 秒` : "未记录";
+  }
+
+  function replyEndLatency(run) {
+    if (run?.status !== "completed") return undefined;
+    // updatedAt records Preview observing the terminal state. responseTimeMs and
+    // completedAt use the platform message timestamp and are not reply-end timings.
+    const elapsed = Date.parse(run.updatedAt) - Date.parse(run.startedAt);
+    return Number.isFinite(elapsed) && elapsed >= 0 ? elapsed : undefined;
+  }
+
   function renderOverview(run) {
     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], ["回复结束", noReply ? undefined : replyEndLatency(run)]];
+    const maximum = Math.max(1, ...timingRows.map(([,value]) => Number.isFinite(value) ? value : 0));
+    elements.waterfall.hidden = !timingRows.some(([,value]) => Number.isFinite(value));
+    const timingHeading = node("div", { class: "timing-heading" });
+    timingHeading.append(node("span", {}, "起点：Preview 发起发送（0 秒）"), node("span", {}, "累计时间，不可相加"));
+    elements.waterfall.append(timingHeading);
+    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)));
+      row.append(track, node("strong", {}, `发送后 ${formatElapsedSeconds(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 ? "" : "本轮未记录首字耗时。")
+      : run.status === "cancel_requested" ? "正在停止，结束后可以继续发送消息。"
+      : hasText ? "正在生成回复，右侧同步展示输出。" : "消息已提交，等待搭子开始回复。";
+    elements.runSummaryCopy.hidden = !elements.runSummaryCopy.textContent;
   }
 
+  let timelineSignature = "", contextSignature = "", protocolSignature = "";
+  const expandedLogs = new Map();
+  const diagnostics = window.createPreviewDiagnostics?.({ node, formatTime, formatDuration, toast, showError });
+  diagnostics?.update(state.debug);
   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);
+    const events = (state.debug.events || []).filter((event) => event.type !== "run.output.delta" && (!run || event.runId === run.runId));
     if (!events.length) {
       elements.timelineList.append(node("li", { class: "timeline-empty" }, run ? "这个本地回合暂无可见事件。" : "发一条消息后，执行事件会出现在这里。"));
       return;
@@ -424,6 +495,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 +507,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 +515,34 @@
   }
 
   function renderProtocol() {
+    if (diagnostics) { diagnostics.update(state.debug); return; }
+    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 +560,27 @@
 
   let messageSignature = "";
   let followMessages = true;
+  let liveReply, liveReplyBubble, 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;
+    if (text) {
+      if (!liveReplyBubble) {
+        clear(liveReply);
+        liveReplyBubble = node("div", { class: "message-bubble", "aria-label": "搭子正在回复" });
+        liveReplyBubble.append(document.createTextNode(text));
+        liveReply.append(liveReplyBubble);
+      } else liveReplyBubble.firstChild.data = text;
+    }
+    else {
+      clear(liveReply); liveReplyBubble = undefined;
+      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 +590,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; liveReplyBubble = 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 +616,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 +633,7 @@
     renderRuns();
     renderContext();
     renderProtocol();
+    renderWorkbench();
   }
 
   function renderAll() {
@@ -545,16 +664,22 @@
       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() {
+    const interval = liveEventsActive ? 30000 : 1200;
+    if (state.polling !== undefined && pollingInterval !== interval) {
+      window.clearInterval(state.polling); state.polling = undefined;
+    }
     if (connectionReady && state.dev.phase === "ready" && state.polling === undefined) {
       void refreshSimulator();
-      state.polling = window.setInterval(() => void refreshSimulator(), 1200);
+      pollingInterval = interval;
+      state.polling = window.setInterval(() => void refreshSimulator(), interval);
     } else if ((!connectionReady || state.dev.phase !== "ready") && state.polling !== undefined) {
       window.clearInterval(state.polling);
       state.polling = undefined;
@@ -563,20 +688,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.resetting && !state.sending;
     elements.sendMessage.disabled = !ready || !elements.messageInput.value.trim();
   }
 
@@ -585,8 +716,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.resetting || state.sending) return;
     state.sending = true;
+    elements.errorBanner.hidden = true;
     followLatestMessages();
     renderDev();
     elements.messageInput.disabled = true;
@@ -606,10 +738,10 @@
       pendingSend = undefined;
       elements.messageInput.value = "";
       resizeComposer();
-      state.simulator.activeRun = { runId: accepted.runId, status: "pending" };
+      if (state.simulator.latestRun?.runId !== accepted.runId) state.simulator.activeRun = { runId: accepted.runId, status: "pending" };
       renderDev();
       renderMessages();
-      await refreshSimulator();
+      void refreshSimulator();
     } catch (cause) {
       showError(cause);
     } finally {
@@ -674,6 +806,7 @@
   }
 
   async function copyProtocol() {
+    if (diagnostics) return diagnostics.copyLogs();
     const text = (state.debug.events || []).map((event) => [
       event.timestamp,
       event.channel,
@@ -692,7 +825,10 @@
 
   function applySimulatorState(next) {
     if ((next.conversationRevision || 0) < (state.simulator.conversationRevision || 0)) return false;
+    if (Number.isFinite(next.stateRevision) && Number.isFinite(state.simulator.stateRevision)
+      && next.stateRevision < state.simulator.stateRevision) return false;
     state.simulator = next;
+    state.simulatorLoaded = true;
     return true;
   }
 
@@ -700,6 +836,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 = "正在清空…";
@@ -729,8 +866,20 @@
   }
 
   function connectEvents() {
-    const events = new EventSource("/api/events");
+    if (eventSource && eventSourceInstance === connectionInstance) return;
+    closeEvents();
+    const events = new EventSource(previewApiUrl("/api/events"));
+    eventSource = events; eventSourceInstance = connectionInstance;
+    events.addEventListener("open", () => {
+      if (eventSource !== events) return;
+      liveEventsActive = true; syncPolling();
+    });
+    events.addEventListener("error", () => {
+      if (eventSource !== events) return;
+      liveEventsActive = false; syncPolling();
+    });
     events.addEventListener("dev.state", (event) => {
+      if (eventSource !== events) return;
       try {
         if (applyDevState(JSON.parse(event.data))) { renderDev(); renderWidgets(); }
       } catch {
@@ -738,12 +887,15 @@
       }
     });
     events.addEventListener("simulator.state", (event) => {
+      if (eventSource !== events || state.resetting) return;
       try {
         const value = JSON.parse(event.data);
+        const before = JSON.stringify([state.simulator.activeRun, Boolean(state.simulator.streaming?.text), state.simulatorLoaded]);
         if (!applySimulatorState(value.state)) return;
-        state.debug = value.debug;
-        renderDev();
-        renderDebug();
+        if (value.debug) state.debug = value.debug;
+        const after = JSON.stringify([state.simulator.activeRun, Boolean(state.simulator.streaming?.text), state.simulatorLoaded]);
+        if (before !== after) renderDev();
+        if (value.debug) renderDebug();
         renderMessages();
       } catch {
         // Polling remains the reconciliation path for a malformed or missed local event.
@@ -751,6 +903,11 @@
     });
   }
 
+  function closeEvents() {
+    eventSource?.close(); eventSource = undefined; eventSourceInstance = ""; liveEventsActive = false;
+  }
+  window.addEventListener("pagehide", closeEvents);
+
   async function boot() {
     if (hosted && !connectionReady) { void refreshConnection(); return; }
     try {
@@ -775,13 +932,14 @@
   }
 
   function disconnected(message = "未连接本地工程") {
+    closeEvents();
     connectionReady = false;
     state.dev = { phase: "idle", revision: -1 };
     state.simulatorRequest++;
     widgets?.reset();
     void togglePairing(false);
     renderDev(); syncPolling();
-    $("#local-status").textContent = message;
+    $("#local-status").textContent = "本地工程";
   }
 
   async function refreshConnection() {
@@ -791,24 +949,39 @@
       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;
+      if (changed) closeEvents();
       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 || "连接已中断，正在重试…"); }
+      if (value.liveEvents) connectEvents();
+    } 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; }
   }
 
@@ -817,15 +990,31 @@
     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) { showError(cause); }
+      if (applyDevState(dev.state)) renderDev();
+      state.debug = debug.debug; renderDebug();
+    } 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 () => {