@my-life-buddies/cli 0.13.3 → 0.15.0

package/dist/web/app.css

@@ -326,7 +326,8 @@
   .empty-state p { max-width: 30rem; margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.65; }
 
   .waterfall { display: grid; gap: var(--space-md); margin-block-start: var(--space-xl); padding-block-end: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
-  .waterfall-row { display: grid; grid-template-columns: 6rem minmax(5rem, 1fr) 4.5rem; align-items: center; gap: var(--space-md); font-size: var(--text-xs); }
+  .timing-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; color:var(--color-muted); font-size:11px; line-height:1.7; }
+  .waterfall-row { display: grid; grid-template-columns: 6rem minmax(2rem, 1fr) 8.5rem; align-items: center; gap: var(--space-md); font-size: var(--text-xs); }
   .waterfall-track { height: 0.375rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-paper-soft); }
   .waterfall-fill { display: block; height: 100%; min-width: var(--space-2xs); transform-origin: left; border-radius: inherit; background: var(--color-ink); }
   .waterfall-row strong { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-align: end; }
@@ -553,20 +554,21 @@ body[data-hosted-preview] .hosted-page-heading p { display:flex; align-items:cen
 body[data-hosted-preview] .hosted-page-heading p span:first-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:60%; }
 body[data-hosted-preview] .hosted-page-heading h1 { margin:0; font-size:26px; line-height:1.3; letter-spacing:-.035em; font-weight:650; }
 body[data-hosted-preview] .local-connection { border-top:1px solid var(--color-rule); }
-body[data-hosted-preview] .debugger > .sidebar { flex:none; position:static; width:auto; padding:0 20px; border:0; border-bottom:1px solid var(--color-rule); }
+/* Hosted tabs are normal flex content, not the standalone sticky sidebar. */
+body[data-hosted-preview] .debugger > .sidebar { flex:none; position:static; z-index:auto; width:auto; padding:0 20px; border:0; border-bottom:1px solid var(--color-rule); }
 body[data-hosted-preview] .sidebar-section { margin:0; }
 body[data-hosted-preview] .debug-tabs { display:flex; flex-wrap:nowrap; gap:20px; margin:0; }
 body[data-hosted-preview] .debug-tabs button { width:auto; min-height:44px; padding:10px 0; font-size:13px; gap:7px; border-radius:0; white-space:nowrap; }
 body[data-hosted-preview] .debug-tabs button svg { width:15px; height:15px; }
 body[data-hosted-preview] .debug-tabs button[aria-selected="true"] { background:transparent; box-shadow:inset 0 -2px var(--color-accent); }
 body[data-hosted-preview] .run-strip { flex:none; padding:18px 20px 14px; border-bottom:1px solid var(--color-rule); }
-body[data-hosted-preview] .run-heading { align-items:center; flex-wrap:nowrap; gap:16px; }
+body[data-hosted-preview] .run-heading { align-items:center; flex-wrap:wrap; gap:16px; }
 body[data-hosted-preview] .run-identity { flex:1; }
 body[data-hosted-preview] .run-identity > .eyebrow { display:none; }
 body[data-hosted-preview] .run-title-line { margin:0; flex-wrap:nowrap; gap:8px; }
 body[data-hosted-preview] .run-title-line h2 { font-size:17px; letter-spacing:0; }
 body[data-hosted-preview] .status-pill { font-size:11px; padding:3px 7px; }
-body[data-hosted-preview] .run-controls { flex:0 1 270px; gap:6px; }
+body[data-hosted-preview] .run-controls { flex:0 1 340px; min-width:min(100%,340px); max-width:100%; gap:6px; }
 body[data-hosted-preview] .run-picker-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 body[data-hosted-preview] :is(.run-picker,.run-step) { min-height:30px; border-radius:6px; font-size:11px; padding-block:4px; }
 body[data-hosted-preview] .run-step { width:30px; }
@@ -594,7 +596,7 @@ body[data-hosted-preview] .run-summary-copy { margin:16px 0 0; font-size:13px; l
 .run-progress li[data-stage="active"] { border-color:var(--color-accent); color:var(--color-accent); font-weight:600; }
 .run-progress li[data-stage="error"] { border-color:var(--color-error); color:var(--color-error); }
 body[data-hosted-preview] .waterfall { margin:0; padding:0; border:0; gap:12px; }
-body[data-hosted-preview] .waterfall-row { grid-template-columns:70px minmax(0,1fr) 64px; gap:16px; font-size:12px; }
+body[data-hosted-preview] .waterfall-row { grid-template-columns:84px minmax(0,1fr) 132px; gap:12px; font-size:12px; }
 body[data-hosted-preview] .waterfall-track { height:3px; background:transparent; }
 body[data-hosted-preview] .waterfall-fill { min-width:0; background:var(--color-accent); opacity:.45; }
 body[data-hosted-preview] .workbench-state { flex:none; padding:26px 24px; border-bottom:1px solid var(--color-rule); }
@@ -602,7 +604,7 @@ body[data-hosted-preview] .workbench-state h2 { font-size:18px; font-weight:600;
 body[data-hosted-preview] .workbench-state p { max-width:480px; color:var(--color-muted); font-size:13px; line-height:1.8; margin:0; }
 body[data-hosted-preview] .state-mark { display:block; width:32px; height:3px; margin-bottom:20px; background:var(--color-accent); border-radius:2px; }
 body[data-hosted-preview][data-has-runs="false"] .run-strip { display:none; }
-body[data-hosted-preview][data-has-runs="false"] #panel-overview { display:none; }
+
 body[data-hosted-preview][data-dev-phase="disconnected"][data-has-runs="false"] .workbench-state { padding-top:56px; padding-bottom:56px; }
 body[data-hosted-preview][data-dev-phase="disconnected"] .topbar-actions { display:none; }
 body[data-hosted-preview][data-dev-phase="disconnected"] :is(.run-progress li,.replying-indicator i) { animation-play-state:paused; }
@@ -660,3 +662,60 @@ body[data-hosted-preview] .pairing-panel { top:80px; }
   body[data-hosted-preview] .run-controls { flex-basis:100%; }
   body[data-hosted-preview] .simulator-area { padding-inline:12px; }
 }
+
+/* Runtime diagnostics share the existing Preview typography and semantic colors. */
+.diagnostic-source { flex:none; color:var(--color-muted); font-size:11px; }
+.diagnostic-filters { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 12px; }
+.diagnostic-filters label { display:flex; flex:1 1 130px; min-width:0; flex-direction:column; gap:6px; color:var(--color-ink-soft); font-size:11px; }
+.diagnostic-filters .diagnostic-search { flex:1.5 1 160px; }
+.diagnostic-filters :is(select,input) { width:100%; min-width:0; min-height:36px; padding:7px 10px; border:1px solid var(--color-rule-strong); border-radius:6px; background:var(--color-paper-raised); color:var(--color-ink); font:inherit; font-size:12px; }
+.diagnostic-filters :is(select,input):focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
+.diagnostic-note { color:var(--color-muted); font-size:11px; line-height:1.8; margin:12px 0 16px; }
+.diagnostic-entry { border-bottom:1px solid var(--color-rule); min-width:0; }
+.diagnostic-entry > summary { display:flex; align-items:start; gap:10px; padding:16px 0; cursor:pointer; list-style:none; }
+.diagnostic-entry > summary::-webkit-details-marker { display:none; }
+.diagnostic-entry > summary::after { content:'›'; color:var(--color-muted); font-size:18px; line-height:20px; flex:none; }
+.diagnostic-entry[open] > summary::after { transform:rotate(90deg); }
+.diagnostic-entry > summary:hover .diagnostic-heading strong { color:var(--color-accent); }
+.diagnostic-entry > summary:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:3px; }
+.diagnostic-heading { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
+.diagnostic-heading strong { font-size:13px; font-weight:550; line-height:1.5; overflow-wrap:anywhere; }
+.diagnostic-preview { color:var(--color-muted); font-size:12px; line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.diagnostic-badge { flex:none; color:var(--color-ink-soft); background:var(--color-paper-soft); border-radius:4px; padding:3px 5px; min-width:36px; font:10px/1.4 var(--font-mono); text-align:center; }
+.diagnostic-badge[data-kind="response"] { color:var(--color-accent); background:var(--color-accent-soft, var(--color-paper-soft)); }
+.diagnostic-entry[data-level="error"] > summary .diagnostic-badge { color:var(--color-error); background:var(--color-error-soft); }
+.diagnostic-entry[data-level="warn"] > summary .diagnostic-badge { color:var(--color-warning); background:var(--color-warning-soft); }
+.diagnostic-entry time { color:var(--color-muted); font:11px/1.8 var(--font-mono); white-space:nowrap; }
+.diagnostic-body { padding:0 0 18px; }
+.diagnostic-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; color:var(--color-muted); font-size:11px; margin:0 0 12px; }
+.diagnostic-meta > span { overflow-wrap:anywhere; min-width:0; }
+.diagnostic-meta button { font-size:11px; }
+.diagnostic-section { border:1px solid var(--color-rule); border-radius:6px; margin:8px 0 0; overflow:hidden; }
+.diagnostic-section > summary { cursor:pointer; padding:10px 12px; font-size:12px; color:var(--color-ink-soft); }
+.diagnostic-section[open] > summary { border-bottom:1px solid var(--color-rule); }
+.diagnostic-section pre { margin:0; padding:14px; max-height:420px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.85 var(--font-mono); background:var(--color-paper-soft); tab-size:2; }
+.diagnostic-metrics { display:flex; flex-wrap:wrap; gap:16px 24px; margin:18px 0; }
+.diagnostic-metrics div { min-width:70px; }
+.diagnostic-metrics dt { color:var(--color-muted); font-size:10px; margin-bottom:6px; }
+.diagnostic-metrics dd { margin:0; font:12px var(--font-mono); color:var(--color-ink); }
+.metric-help { max-width:220px; margin:6px 0 0; color:var(--color-muted); font:11px/1.7 var(--font-body); white-space:normal; overflow-wrap:anywhere; }
+.run-metrics dd:has(.metric-help) { overflow:visible; white-space:normal; }
+.diagnostic-warning { color:var(--color-error); background:var(--color-error-soft); padding:10px 12px; font-size:12px; line-height:1.8; border-radius:6px; overflow-wrap:anywhere; }
+.diagnostic-empty { padding:44px 0 52px; }
+.diagnostic-empty strong { font-size:15px; font-weight:550; }
+.diagnostic-empty p { max-width:420px; color:var(--color-muted); font-size:12px; line-height:1.9; }
+.diagnostic-explanation { margin-top:24px; color:var(--color-muted); font-size:11px; line-height:1.9; }
+.diagnostic-explanation summary { cursor:pointer; }
+.diagnostic-explanation p { margin:10px 0; }
+.diagnostic-history { margin-top:24px; padding-top:16px; border-top:1px solid var(--color-rule); }
+.diagnostic-history > summary { cursor:pointer; font-size:13px; color:var(--color-ink-soft); }
+.diagnostic-history #context-source { font-size:10px; margin-left:8px; color:var(--color-muted); }
+#panel-overview .run-strip, body[data-hosted-preview] #panel-overview .run-strip { padding:0 0 16px; }
+#panel-protocol .protocol-log { display:block; border:0; }
+@media (max-width:650px) {
+  .diagnostic-filters { gap:10px; }
+  .diagnostic-filters .diagnostic-search { flex-basis:100%; }
+  .diagnostic-entry > summary { gap:7px; }
+  .diagnostic-entry time { font-size:10px; }
+  .diagnostic-source { display:none; }
+}

package/dist/web/app.js

@@ -6,6 +6,7 @@
   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);
@@ -190,6 +191,8 @@
       idle: hosted ? "已连接但 DEV 未启动" : "未启动",
       disconnected: "未连接本地工程",
       starting: "正在启动",
+      reloading: "正在重载",
+      reload_failed: "重载失败 · 等待修正",
       ready: "DEV 运行中",
       stopping: "正在停止",
       failed: "启动失败",
@@ -200,6 +203,7 @@
     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;
+    if (state.dev.phase === "reload_failed" && ["ready", "reloading"].includes(next.phase)) elements.errorBanner.hidden = true;
     state.dev = next;
     if (next.ready?.buddy) state.buddy = next.ready.buddy;
     return true;
@@ -253,8 +257,8 @@
     elements.connectionState.dataset.phase = phase;
     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 = devAction === "start" ? "正在启动…" : devAction === "stop" ? "正在停止…" : phase === "failed" ? "重试启动" : phase === "ready" ? "停止 DEV" : phase === "starting" ? "正在启动…" : phase === "stopping" ? "正在停止…" : "启动 DEV";
+    elements.devControl.dataset.action = ["ready", "reloading", "reload_failed"].includes(phase) ? "stop" : "start";
+    elements.devControl.textContent = devAction === "start" ? "正在启动…" : devAction === "stop" ? "正在停止…" : phase === "failed" ? "重试启动" : ["ready", "reloading", "reload_failed"].includes(phase) ? "停止 DEV" : phase === "starting" ? "正在启动…" : phase === "stopping" ? "正在停止…" : "启动 DEV";
     elements.environmentAgent.textContent = phase === "ready"
       ? `${state.dev.ready?.agentId || "已就绪"} · CLI 托管`
       : phaseCopy(phase);
@@ -271,12 +275,12 @@
     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" || !state.simulatorLoaded || 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 (
-      phase === "failed"
+      (phase === "failed" || phase === "reload_failed")
       && state.dev.error?.message
       && state.reportedFailureRevision !== state.dev.revision
     ) {
@@ -300,17 +304,19 @@
     const copy = !connectionChecked ? ["正在检查连接", "读取本地工程的连接状态。"]
       : phase === "disconnected" ? [connectionInstance ? "本地连接已断开" : "连接本地工程", connectionFailure || (connectionInstance ? "正在等待重新连接。保留当前记录，连接恢复后继续调试。" : "点击上方「连接工程」，复制指令到终端运行。")]
       : phase === "starting" ? ["正在启动调试", "正在准备运行环境，启动完成后即可发送消息。"]
+      : phase === "reloading" ? ["正在重载", "本地文件已修改，正在重新加载；当前回复可能中断。"]
+      : phase === "reload_failed" ? ["重载失败", state.dev.error?.message || "修正文件并保存后自动重试，也可停止 DEV。"]
       : phase === "stopping" ? ["正在停止调试", "等待运行环境退出，当前记录会保留。"]
       : phase === "failed" ? ["调试未能启动", "查看上方错误信息，修复工程后点击「重试启动」。"]
       : phase === "idle" ? ["工程已连接", "点击上方「启动 DEV」，开始体验搭子。"]
       : !state.simulatorLoaded ? ["正在读取对话", "同步当前会话，完成后即可发送消息。"]
-      : state.sending ? ["正在发送消息", "提交成功后，这里会显示本次执行过程。"]
-      : active ? ["等待执行记录", "消息已提交，正在同步本次执行过程。"]
-      : ["开始一轮调试", history ? "右侧保留了历史对话。本地执行记录从本次连接开始，发一条新消息即可查看。" : "在右侧发一条消息，观察搭子的回复与执行过程。"];
-    guide.hidden = phase === "ready" && runs.length > 0;
+      : 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" ? "等待连接" : "仅用于本地调试";
+    $("#connection-description").textContent = !connectionChecked ? "检查中" : phase === "disconnected" ? "等待连接" : "保存自动重载，可能中断回复；Widget 数据不自动迁移。";
     const connectButton = $("#get-connect-command");
     connectButton.className = `button ${connectionReady ? "button-secondary" : "button-primary"}`;
     connectButton.textContent = connectionReady ? "连接指令" : connectionInstance ? "重新连接" : "连接工程";
@@ -321,7 +327,7 @@
     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" ? "给搭子发一条消息" : "等待调试就绪";
+    elements.messageInput.placeholder = active ? "可以继续补充消息" : phase === "ready" ? "给搭子发一条消息" : "等待调试就绪";
   }
 
   function runOrdinal(run, index, runs) {
@@ -332,7 +338,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 = "";
@@ -372,10 +378,10 @@
     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 = formatDuration(run?.responseTimeMs);
+    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);
@@ -405,6 +411,18 @@
     }
   }
 
+  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;
@@ -421,16 +439,19 @@
         ["消息已提交", "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"],
+        [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);
     // Only report observed timings. A finished run with missing telemetry never keeps counting.
-    const timingRows = [["消息接收", run.acceptLatencyMs], ["首段文字", run.firstTextLatencyMs], ["总耗时", run.responseTimeMs]];
+    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" });
@@ -439,26 +460,29 @@
       const fill = node("span", { class: "waterfall-fill" });
       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"
-      ? "本轮执行失败。查看执行时间线定位问题，或展开协议日志中的错误详情。"
+      ? "本轮执行失败。请查看运行日志中的错误详情。"
       : run.status === "cancelled" ? "本轮已停止。已完成的平台写入不会自动撤销。"
-      : noReply ? "本轮已结束，没有产生新的完整回复。"
-      : run.status === "completed" ? (measuredFirstText ? `回复已完成，首段文字耗时 ${formatDuration(run.firstTextLatencyMs)}。` : "回复已完成，本轮未记录首段文字耗时。")
+      : 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;
@@ -496,6 +520,7 @@
   }
 
   function renderProtocol() {
+    if (diagnostics) { diagnostics.update(state.debug); return; }
     const signature = JSON.stringify(state.debug.events);
     if (signature === protocolSignature) return;
     protocolSignature = signature;
@@ -536,19 +561,26 @@
   }
 
   const widgets = window.createSimulatorWidgets?.({ api, avatar: () => messageAvatar("assistant") });
-  function renderWidgets() { widgets?.update({ active: state.dev.phase === "ready" && !state.resetting, conversationRevision: state.simulator.conversationRevision, devRevision: state.dev.revision }); }
+  function renderWidgets() { widgets?.update({ reloading: ["reloading", "reload_failed"].includes(state.dev.phase), active: state.dev.phase === "ready" && !state.resetting, conversationRevision: state.simulator.conversationRevision, devRevision: state.dev.revision }); }
 
   let messageSignature = "";
   let followMessages = true;
-  let liveReply, liveReplyText = "";
+  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;
-    clear(liveReply);
-    if (text) { liveReply.className = "message-content"; liveReply.append(node("div", { class: "message-bubble", "aria-label": "搭子正在回复" }, 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);
     }
@@ -568,7 +600,7 @@
     messageSignature = signature;
     const previousTop = elements.chatMessages.scrollTop;
     clear(elements.chatMessages);
-    liveReply = undefined; liveReplyText = "";
+    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": "暂无消息" }, hosted ? (state.dev.phase === "ready" ? "发一条消息，开始体验" : "启动 DEV 后，开始对话") : ""));
@@ -645,9 +677,14 @@
   }
 
   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;
@@ -657,7 +694,7 @@
   async function controlDev() {
     if (!connectionReady || state.dev.phase === "starting" || state.dev.phase === "stopping") return;
     if (devAction) return;
-    devAction = state.dev.phase === "ready" ? "stop" : "start";
+    devAction = ["ready", "reloading", "reload_failed"].includes(state.dev.phase) ? "stop" : "start";
     elements.errorBanner.hidden = true;
     renderDev();
     try {
@@ -675,7 +712,7 @@
   }
 
   function updateSendButton() {
-    const ready = connectionReady && !devAction && state.simulatorLoaded && 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();
   }
 
@@ -684,7 +721,7 @@
   async function sendMessage(event) {
     event.preventDefault();
     const text = elements.messageInput.value;
-    if (!text.trim() || !state.simulatorLoaded || devAction || 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();
@@ -706,10 +743,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 {
@@ -774,6 +811,7 @@
   }
 
   async function copyProtocol() {
+    if (diagnostics) return diagnostics.copyLogs();
     const text = (state.debug.events || []).map((event) => [
       event.timestamp,
       event.channel,
@@ -792,6 +830,8 @@
 
   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;
@@ -831,8 +871,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 {
@@ -840,12 +892,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.
@@ -853,6 +908,11 @@
     });
   }
 
+  function closeEvents() {
+    eventSource?.close(); eventSource = undefined; eventSourceInstance = ""; liveEventsActive = false;
+  }
+  window.addEventListener("pagehide", closeEvents);
+
   async function boot() {
     if (hosted && !connectionReady) { void refreshConnection(); return; }
     try {
@@ -877,6 +937,7 @@
   }
 
   function disconnected(message = "未连接本地工程") {
+    closeEvents();
     connectionReady = false;
     state.dev = { phase: "idle", revision: -1 };
     state.simulatorRequest++;
@@ -898,6 +959,7 @@
       $("#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;
@@ -918,6 +980,7 @@
         renderDev();
         await boot();
       }
+      if (value.liveEvents) connectEvents();
     } catch (cause) {
       const message = cause.message || "连接已中断，正在重试…";
       connectionChecked = true; connectionFailure = message;
@@ -932,7 +995,8 @@
     devPollBusy = true;
     try {
       const [dev, debug] = await Promise.all([api("/api/dev"), api("/api/debug")]);
-      applyDevState(dev.state); state.debug = debug.debug; renderAll();
+      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();