@my-life-buddies/cli 0.13.3 → 0.14.1

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);
@@ -271,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" || !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 (
@@ -304,10 +305,10 @@
       : 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" ? "等待连接" : "仅用于本地调试";
@@ -321,7 +322,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 +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 = "";
@@ -372,10 +373,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 +406,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 +434,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 +455,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 +515,7 @@
   }
 
   function renderProtocol() {
+    if (diagnostics) { diagnostics.update(state.debug); return; }
     const signature = JSON.stringify(state.debug.events);
     if (signature === protocolSignature) return;
     protocolSignature = signature;
@@ -540,15 +560,22 @@
 
   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 +595,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 +672,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;
@@ -675,7 +707,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 +716,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 +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 {
@@ -774,6 +806,7 @@
   }
 
   async function copyProtocol() {
+    if (diagnostics) return diagnostics.copyLogs();
     const text = (state.debug.events || []).map((event) => [
       event.timestamp,
       event.channel,
@@ -792,6 +825,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 +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 {
@@ -840,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.
@@ -853,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 {
@@ -877,6 +932,7 @@
   }
 
   function disconnected(message = "未连接本地工程") {
+    closeEvents();
     connectionReady = false;
     state.dev = { phase: "idle", revision: -1 };
     state.simulatorRequest++;
@@ -898,6 +954,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 +975,7 @@
         renderDev();
         await boot();
       }
+      if (value.liveEvents) connectEvents();
     } catch (cause) {
       const message = cause.message || "连接已中断，正在重试…";
       connectionChecked = true; connectionFailure = message;
@@ -932,7 +990,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();

package/dist/web/diagnostics.js

@@ -0,0 +1,184 @@
+(() => {
+  "use strict";
+  window.createPreviewDiagnostics = ({ node, formatTime, formatDuration, toast, showError }) => {
+    const $ = id => document.getElementById(id);
+    const models = $("model-records"), logs = $("protocol-log");
+    const modelConversation = $("models-conversation"), logConversation = $("logs-conversation");
+    const kind = $("models-kind"), level = $("logs-level");
+    const modelSearch = $("models-search"), logSearch = $("logs-search");
+    let snapshot = {}, conversation = "", visibleLogs = [];
+    const cached = new Map(), expanded = new Map();
+    const object = value => value && typeof value === "object" && !Array.isArray(value) ? value : {};
+    const json = value => typeof value === "string" ? value : JSON.stringify(value, null, 2);
+    const number = value => typeof value === "number" && Number.isFinite(value) && value >= 0;
+    const metricHelp = {
+      "模型响应耗时": "本次模型请求发出至响应结束。",
+      "模型首字耗时": "本次模型请求发出至首段输出。",
+      "结束原因": "模型停止原因；toolUse 表示请求调用工具。",
+      "输入 Token": "本次调用的输入 Token 数。",
+      "输出 Token": "本次调用的输出 Token 数。",
+      "缓存读取": "本次调用读取缓存的 Token 数。",
+      "缓存写入": "本次调用写入缓存的 Token 数。",
+      "总 Token": "本次调用上报的 Token 总数。",
+    };
+    function section(label, value, key) {
+      const details = node("details", { class: "diagnostic-section", "data-detail": key });
+      details.append(node("summary", {}, label));
+      details.append(node("pre", {}, json(value)));
+      return details;
+    }
+    function metrics(pairs) {
+      const list = node("dl", { class: "diagnostic-metrics" });
+      for (const [label, value] of pairs) {
+        const item = node("div");
+        const detail = node("dd", {}, value);
+        if (metricHelp[label]) {
+          detail.append(node("p", { class: "metric-help" }, metricHelp[label]));
+        }
+        item.append(node("dt", {}, label), detail);
+        list.append(item);
+      }
+      return list;
+    }
+    async function copy(text) {
+      try { await navigator.clipboard.writeText(text); toast("日志已复制"); }
+      catch { showError(new Error("浏览器未允许复制，请展开原始日志后手动选择")); }
+    }
+    function describe(record) {
+      const data = object(record.data), payload = object(data.payload);
+      if (record.kind === "request") {
+        const messages = payload.messages || payload.input;
+        const count = Array.isArray(messages) ? `${messages.length} 条上下文` : "请求上下文";
+        return `${typeof payload.model === "string" ? payload.model : "模型未上报"} · ${count}${Array.isArray(payload.tools) ? ` · ${payload.tools.length} 个工具` : ""}`;
+      }
+      const content = Array.isArray(data.content) ? data.content : [];
+      const texts = content.filter(item => item?.type === "text").map(item => item.text).filter(text => typeof text === "string");
+      const tools = content.filter(item => item?.type === "toolCall").map(item => item.name).filter(name => typeof name === "string");
+      return typeof data.error === "string" ? data.error : tools.length ? `请求工具：${tools.join("、")}` : texts.join(" ") || record.title;
+    }
+    function row(record, model) {
+      const data = object(record.data);
+      const details = node("details", { class: "diagnostic-entry", "data-record": record.id, "data-detail": "entry" });
+      details.dataset.level = data.error || data.stopReason === "error" ? "error" : record.level;
+      const summary = node("summary");
+      summary.append(node("span", { class: "diagnostic-badge", "data-kind": record.kind }, model ? record.kind === "request" ? "请求" : "响应" : record.level.toUpperCase()));
+      const heading = node("span", { class: "diagnostic-heading" });
+      heading.append(node("strong", {}, model ? record.kind === "request" ? "模型请求" : "模型响应" : record.title));
+      if (model) heading.append(node("span", { class: "diagnostic-preview" }, describe(record)));
+      summary.append(heading, node("time", { dateTime: record.timestamp, title: record.timestamp }, formatTime(record.timestamp)));
+      details.append(summary);
+      const body = node("div", { class: "diagnostic-body" });
+      const meta = node("div", { class: "diagnostic-meta" });
+      meta.append(node("span", {}, `${record.convoKey || "未标注会话"} · ${record.source}`));
+      const button = node("button", { type: "button", class: "text-button" }, "复制原始日志");
+      button.addEventListener("click", () => void copy(record.raw));
+      meta.append(button); body.append(meta);
+      if (record.truncated || (model && !record.data)) {
+        body.append(node("p", { class: "diagnostic-warning" }, record.truncated
+          ? "日志已截断，无法还原完整数据。请查看原始日志。"
+          : "尚未收到完整数据，或日志格式无法解析。已保留原始日志。"));
+      }
+      if (model && record.data) {
+        if (record.kind === "request") {
+          const payload = object(data.payload);
+          const messages = payload.messages ?? payload.input;
+          const system = payload.system ?? (Array.isArray(messages) ? messages.filter(item => ["system", "developer"].includes(item?.role)) : undefined);
+          if (system != null && (!Array.isArray(system) || system.length)) body.append(section("系统提示词", system, "system"));
+          if (messages != null) body.append(section(`请求上下文${Array.isArray(messages) ? ` · ${messages.length} 条` : ""}`, messages, "messages"));
+          if (payload.tools != null) body.append(section(`可用工具${Array.isArray(payload.tools) ? ` · ${payload.tools.length} 个` : ""}`, payload.tools, "tools"));
+          const { messages: _messages, input: _input, system: _system, tools: _tools, ...parameters } = payload;
+          body.append(section("模型与请求参数", parameters, "parameters"));
+          body.append(section("完整请求体", data.payload ?? data, "payload"));
+        } else {
+          const usage = object(data.usage);
+          body.append(metrics([
+            ["模型响应耗时", number(data.ms) ? formatDuration(data.ms) : "未上报"],
+            ["模型首字耗时", number(data.firstTokenMs) ? formatDuration(data.firstTokenMs) : "未上报"],
+            ["结束原因", typeof data.stopReason === "string" ? data.stopReason : "未上报"],
+          ]));
+          const tokenFields = [["输入 Token", "input"], ["输出 Token", "output"], ["缓存读取", "cacheRead"], ["缓存写入", "cacheWrite"], ["总 Token", "totalTokens"]];
+          body.append(metrics(tokenFields.map(([label, key]) => [label, number(usage[key]) ? String(usage[key]) : "未上报"])));
+          if (typeof data.error === "string" && data.error) body.append(node("p", { class: "diagnostic-warning" }, data.error));
+          const content = Array.isArray(data.content) ? data.content : [];
+          content.forEach((block, index) => {
+            if (!block || typeof block !== "object") return;
+            const label = block.type === "text" ? "响应正文" : block.type === "thinking" ? "思考内容（日志已提供）" : block.type === "toolCall" ? `工具调用请求 · ${block.name || "未命名"}` : `响应片段 · ${block.type || index + 1}`;
+            body.append(section(label, block.type === "text" ? block.text : block, `content-${index}`));
+          });
+          if (data.content != null && !content.length) body.append(section("响应内容", data.content, "content"));
+          if (data.usage != null) body.append(section("完整用量", data.usage, "usage"));
+        }
+      }
+      body.append(section("原始日志", record.raw, "raw"));
+      details.append(body);
+      return details;
+    }
+    function reconcile(container, records, model, emptyText) {
+      const prefix = model ? "model:" : "log:";
+      const wanted = new Set();
+      records.forEach((record, index) => {
+        const key = prefix + record.id;
+        wanted.add(key);
+        const signature = JSON.stringify(record);
+        let entry = cached.get(key);
+        if (!entry || entry.signature !== signature) {
+          if (entry) expanded.set(key, [...entry.node.querySelectorAll("details"), entry.node].filter(item => item.open).map(item => item.dataset.detail));
+          const element = row(record, model);
+          for (const item of [...element.querySelectorAll("details"), element]) item.open = (expanded.get(key) || []).includes(item.dataset.detail);
+          entry?.node.remove();
+          entry = { node: element, signature };
+          cached.set(key, entry);
+        }
+        if (container.children[index] !== entry.node) container.insertBefore(entry.node, container.children[index] || null);
+      });
+      for (const child of [...container.children]) if (!wanted.has(prefix + child.dataset.record)) child.remove();
+      if (!records.length) {
+        const empty = node("div", { class: "diagnostic-empty" });
+        empty.append(node("strong", {}, emptyText[0]), node("p", {}, emptyText[1]));
+        container.append(empty);
+      }
+    }
+    function updateConversations(records) {
+      const keys = [...new Set(records.map(record => record.convoKey).filter(Boolean))].sort();
+      if (conversation && !keys.includes(conversation)) keys.push(conversation);
+      for (const select of [modelConversation, logConversation]) {
+        if (document.activeElement === select) continue;
+        const signature = JSON.stringify(keys);
+        if (select.dataset.options !== signature) {
+          select.replaceChildren(node("option", { value: "" }, "全部会话"), ...keys.map(key => node("option", { value: key }, key)));
+          select.dataset.options = signature;
+        }
+        select.value = conversation;
+      }
+    }
+    function render() {
+      const runtime = snapshot.diagnostics?.records || [];
+      updateConversations(runtime);
+      const matches = (record, search) => (!conversation || record.convoKey === conversation) && (!search || record.raw.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
+      const modelRecords = runtime.filter(record => record.kind === "request" || record.kind === "response");
+      const filteredModels = modelRecords.filter(record => (!kind.value || record.kind === kind.value) && matches(record, modelSearch.value.trim()));
+      reconcile(models, filteredModels, true, modelRecords.length
+        ? ["没有匹配的模型记录", "试试其他会话、类型或关键词。"]
+        : ["等待模型调用", "启动 DEV 并发送消息后，Runtime 提供的模型请求与响应会出现在这里。旧版本或未输出这些日志的 Runtime 可先查看运行日志。"]);
+      $("models-count").textContent = `${filteredModels.length} 条记录${snapshot.diagnostics?.dropped ? ` · 已淘汰 ${snapshot.diagnostics.dropped} 条较早日志` : ""}`;
+      const events = snapshot.events || [];
+      const deltas = events.filter(event => event.type === "run.output.delta").length;
+      const other = events.filter(event => event.type !== "run.output.delta" && (!snapshot.diagnostics || !/^agent\.(stdout|stderr)$/.test(event.type))).map(event => ({
+        id: event.eventId, timestamp: event.timestamp, source: event.channel, level: /failed|error|stderr/.test(event.type) ? "error" : "info", title: event.summary || event.type,
+        kind: "log", raw: `${event.timestamp} ${event.channel} ${event.type}${event.runId ? ` ${event.runId}` : ""}\n${event.summary || ""}`,
+      }));
+      const allLogs = [...runtime, ...other].sort((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
+      visibleLogs = allLogs.filter(record => (!level.value || record.level === level.value || level.value === "error" && (record.data?.error || record.data?.stopReason === "error")) && matches(record, logSearch.value.trim()));
+      reconcile(logs, visibleLogs, false, allLogs.length ? ["没有匹配的日志", "调整会话、级别或搜索条件后再试。"] : ["等待运行日志", "启动 DEV 后，这里会保留进程输出与连接事件。"]);
+      $("logs-count").textContent = `${visibleLogs.length} 条可见日志${deltas ? ` · 已折叠 ${deltas} 条文字分片事件` : ""}${snapshot.diagnostics?.dropped ? ` · 已淘汰 ${snapshot.diagnostics.dropped} 条较早日志` : ""}`;
+      const retained = new Set([...runtime.map(record => record.id), ...other.map(record => record.id)]);
+      for (const key of cached.keys()) if (!retained.has(key.slice(key.indexOf(":") + 1))) { cached.delete(key); expanded.delete(key); }
+    }
+    for (const select of [modelConversation, logConversation]) {
+      select.addEventListener("change", () => { conversation = select.value; render(); });
+      select.addEventListener("blur", render);
+    }
+    for (const input of [kind, level, modelSearch, logSearch]) input.addEventListener(input.type === "search" ? "input" : "change", render);
+    return { update(next) { snapshot = next; render(); }, copyLogs() { return copy(visibleLogs.map(record => record.raw).join("\n\n")); } };
+  };
+})();