@my-life-buddies/cli 0.1.2

package/dist/web/app.js

@@ -0,0 +1,724 @@
+(() => {
+  "use strict";
+
+  const $ = (selector) => document.querySelector(selector);
+  const elements = {
+    projectName: $("#project-name"),
+    connectionState: $("#connection-state"),
+    connectionLabel: $("#connection-label"),
+    devControl: $("#dev-control"),
+    errorBanner: $("#error-banner"),
+    errorMessage: $("#error-message"),
+    pairDevice: $("#pair-device"),
+    pairingPanel: $("#pairing-panel"),
+    pairingBody: $("#pairing-body"),
+    runPicker: $("#run-picker"),
+    previousRun: $("#previous-run"),
+    nextRun: $("#next-run"),
+    followLatestRun: $("#follow-latest-run"),
+    runReference: $("#run-reference"),
+    runId: $("#run-id"),
+    copyRunId: $("#copy-run-id"),
+    runTitle: $("#run-title"),
+    runStatus: $("#run-status"),
+    metricAccept: $("#metric-accept"),
+    metricFirst: $("#metric-first"),
+    metricResponse: $("#metric-response"),
+    metricMessages: $("#metric-messages"),
+    overviewEmpty: $("#overview-empty"),
+    overviewContent: $("#overview-content"),
+    waterfall: $("#waterfall"),
+    runSummaryCopy: $("#run-summary-copy"),
+    environmentAgent: $("#environment-agent"),
+    environmentRuntime: $("#environment-runtime"),
+    environmentModel: $("#environment-model"),
+    timelineList: $("#timeline-list"),
+    contextList: $("#context-list"),
+    contextSource: $("#context-source"),
+    protocolLog: $("#protocol-log"),
+    buddyName: $("#buddy-name"),
+    buddyStatus: $("#buddy-status"),
+    chatMessages: $("#chat-messages"),
+    chatEmpty: $("#chat-empty"),
+    composer: $("#composer"),
+    messageInput: $("#message-input"),
+    sendMessage: $("#send-message"),
+    toast: $("#toast"),
+  };
+
+  const state = {
+    project: undefined,
+    buddy: undefined,
+    dev: { phase: "idle", revision: 0 },
+    simulator: { messages: [] },
+    debug: {
+      source: "observed",
+      generatedAt: new Date().toISOString(),
+      runs: [],
+      events: [],
+      messages: [],
+    },
+    selectedRunId: "",
+    followLatestRun: true,
+    reportedFailureRevision: -1,
+    polling: undefined,
+    pollingBusy: false,
+    toastTimer: undefined,
+  };
+
+  function clear(node) {
+    while (node.firstChild) node.removeChild(node.firstChild);
+  }
+
+  function node(tag, attributes = {}, text) {
+    const element = document.createElement(tag);
+    for (const [name, value] of Object.entries(attributes)) {
+      if (name === "class") element.className = value;
+      else if (name.includes("-")) element.setAttribute(name, value);
+      else element[name] = value;
+    }
+    if (text !== undefined) element.textContent = text;
+    return element;
+  }
+
+  async function api(path, options = {}) {
+    const response = await fetch(path, {
+      ...options,
+      headers: {
+        Accept: "application/json",
+        ...(options.body ? { "Content-Type": "application/json" } : {}),
+        ...(options.headers || {}),
+      },
+    });
+    const value = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      const error = new Error(value?.error?.message || `请求失败（HTTP ${response.status}）`);
+      error.code = value?.error?.code || "PREVIEW_REQUEST_FAILED";
+      error.status = response.status;
+      throw error;
+    }
+    return value;
+  }
+
+  function showError(cause) {
+    elements.errorMessage.textContent = cause instanceof Error ? cause.message : "操作未能完成";
+    elements.errorBanner.hidden = false;
+  }
+
+  function toast(message) {
+    window.clearTimeout(state.toastTimer);
+    elements.toast.textContent = message;
+    elements.toast.hidden = false;
+    state.toastTimer = window.setTimeout(() => {
+      elements.toast.hidden = true;
+    }, 2200);
+  }
+
+  function formatDuration(value) {
+    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 "—";
+    return new Intl.DateTimeFormat("zh-CN", {
+      hour: "2-digit",
+      minute: "2-digit",
+      ...(seconds ? { second: "2-digit" } : {}),
+      hour12: false,
+    }).format(date);
+  }
+
+  function dayKey(value) {
+    const date = new Date(value);
+    if (!Number.isFinite(date.getTime())) return undefined;
+    return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+  }
+
+  function dayLabel(value) {
+    const date = new Date(value);
+    if (!Number.isFinite(date.getTime())) return undefined;
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+    if (dayKey(date) === dayKey(today)) return "今天";
+    if (dayKey(date) === dayKey(yesterday)) return "昨天";
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
+  }
+
+  function messageAvatar(role) {
+    const avatar = node("span", {
+      class: `message-avatar ${role === "user" ? "person-avatar" : "buddy-message-avatar"}`,
+      "aria-hidden": "true",
+    });
+    if (role !== "user") avatar.textContent = "搭";
+    return avatar;
+  }
+
+  function phaseCopy(phase) {
+    return {
+      idle: "未启动",
+      starting: "正在启动",
+      ready: "DEV 在线",
+      stopping: "正在停止",
+      failed: "启动失败",
+    }[phase] || phase;
+  }
+
+  function applyDevState(next) {
+    if (!next || !Number.isFinite(next.revision)) return false;
+    if (Number.isFinite(state.dev?.revision) && next.revision < state.dev.revision) return false;
+    state.dev = next;
+    if (next.ready?.buddy) state.buddy = next.ready.buddy;
+    return true;
+  }
+
+  function runStatusCopy(status) {
+    return {
+      accepted: "已接收",
+      pending: "等待 Agent",
+      running: "正在回复",
+      cancel_requested: "正在停止",
+      completed: "已完成",
+      failed: "执行失败",
+      cancelled: "已取消",
+      idle: "等待消息",
+    }[status] || status;
+  }
+
+  function currentRun() {
+    const runs = state.debug.runs || [];
+    return runs.find((run) => run.runId === state.selectedRunId) || runs[0];
+  }
+
+  function renderProject() {
+    if (!state.project) return;
+    const localName = state.project.buddyId || "未绑定搭子";
+    const buddy = state.dev.ready?.buddy || state.buddy;
+    const name = buddy?.name || localName;
+    elements.projectName.textContent = name;
+    elements.buddyName.textContent = name;
+    elements.buddyName.title = buddy?.tagline || "";
+    const note = document.querySelector(".preview-note");
+    if (note) note.textContent = buddy ? (buddy.isDev ? "开发预览版 · 仅你可见" : "搭搭 App") : "搭搭 App · DEV";
+    elements.environmentRuntime.textContent = "Node.js · Buddy Runtime";
+    elements.environmentModel.textContent = state.project.model || "未指定";
+  }
+
+  let pairingRevision = -1;
+  let pairingRequest = 0;
+
+  function renderDev() {
+    const phase = state.dev.phase;
+    if (!elements.pairingPanel.hidden && pairingRevision !== state.dev.revision) void togglePairing(true);
+    elements.connectionState.dataset.phase = phase;
+    elements.connectionLabel.textContent = phaseCopy(phase);
+    elements.devControl.disabled = phase === "starting" || phase === "stopping";
+    elements.devControl.dataset.action = phase === "ready" ? "stop" : "start";
+    elements.devControl.textContent = 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.buddyStatus.textContent = phase !== "ready"
+      ? phaseCopy(phase)
+      : active
+        ? state.simulator.streaming?.text
+          ? "正在输入…"
+          : "正在思考…"
+        : "DEV 在线";
+    elements.messageInput.disabled = phase !== "ready" || Boolean(active);
+    elements.sendMessage.hidden = Boolean(active);
+    updateSendButton();
+    syncPolling();
+    if (
+      phase === "failed"
+      && state.dev.error?.message
+      && state.reportedFailureRevision !== state.dev.revision
+    ) {
+      state.reportedFailureRevision = state.dev.revision;
+      showError(new Error(state.dev.error.message));
+    }
+  }
+
+  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.
+    return Number.isInteger(run.ordinal) && run.ordinal > 0 ? run.ordinal : runs.length - index;
+  }
+
+  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)}`;
+  }
+
+  let runPickerSignature = "";
+
+  function renderRuns() {
+    const runs = state.debug.runs || [];
+    const choosing = document.activeElement === elements.runPicker;
+    if (!state.selectedRunId || !runs.some((run) => run.runId === state.selectedRunId)) {
+      state.followLatestRun = true;
+      state.selectedRunId = runs[0]?.runId || "";
+    } else if (state.followLatestRun && !choosing) {
+      state.selectedRunId = runs[0].runId;
+    }
+
+    const options = runs.map((run, index) => [run.runId, runOptionLabel(run, index, runs)]);
+    const signature = JSON.stringify(options);
+    // Polling must not rebuild an open native menu or override its keyboard selection.
+    // Apply deferred changes on blur; unchanged snapshots keep the same option nodes.
+    if (!choosing) {
+      if (signature !== runPickerSignature) {
+        elements.runPicker.replaceChildren(...(options.length ? options : [["", "尚无运行记录"]])
+          .map(([value, label]) => node("option", { value }, label)));
+        runPickerSignature = signature;
+      }
+      elements.runPicker.value = state.selectedRunId;
+    }
+    elements.runPicker.disabled = !runs.length;
+    const index = runs.findIndex((run) => run.runId === state.selectedRunId);
+    elements.previousRun.disabled = index < 0 || index >= runs.length - 1;
+    elements.nextRun.disabled = index <= 0;
+    elements.followLatestRun.checked = state.followLatestRun;
+
+    const run = currentRun();
+    elements.runTitle.textContent = run ? `第 ${runOrdinal(run, index, runs)} 轮` : "尚无本地回合";
+    elements.runReference.hidden = !run;
+    elements.runId.textContent = run?.runId || "";
+    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);
+    renderOverview(run);
+    renderTimeline(run);
+  }
+
+  function selectRun(runId) {
+    if (!(state.debug.runs || []).some((run) => run.runId === runId)) return;
+    state.selectedRunId = runId;
+    state.followLatestRun = false;
+    renderDebug();
+  }
+
+  function stepRun(offset) {
+    const runs = state.debug.runs || [];
+    const index = runs.findIndex((run) => run.runId === state.selectedRunId);
+    if (index >= 0 && runs[index + offset]) selectRun(runs[index + offset].runId);
+  }
+
+  async function copyRunId() {
+    const run = currentRun();
+    if (!run) return;
+    try {
+      await navigator.clipboard.writeText(run.runId);
+      toast("回合 ID 已复制");
+    } catch {
+      showError(new Error("浏览器未允许复制，请手动选择回合 ID"));
+    }
+  }
+
+  function renderOverview(run) {
+    elements.overviewEmpty.hidden = Boolean(run);
+    elements.overviewContent.hidden = !run;
+    if (!run) return;
+    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) {
+      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)})`;
+      track.append(fill);
+      row.append(track, node("strong", {}, formatDuration(duration)));
+      elements.waterfall.append(row);
+    }
+    elements.runSummaryCopy.textContent = run.status === "failed"
+      ? "这个本地回合在 Agent 侧执行失败，没有形成完整回复；请到执行时间线和协议日志查看失败位置。"
+      : run.status === "cancelled"
+        ? "这个本地回合已被停止，尚未完成的回复已经作废；此前已经生效的平台写操作不会自动回滚。"
+      : run.completion === "no_reply"
+          ? "这个本地回合已经结束，但没有观察到新的完整回复。"
+      : run.status === "completed"
+      ? `本次本地回合在 ${formatDuration(run.firstTextLatencyMs)} 收到首段文字，并在 ${formatDuration(run.responseTimeMs)} 完成正式回复。`
+      : run.status === "cancel_requested"
+        ? "停止请求已经发往 App Server；输入框会在本地回合真正结束后重新开放。"
+        : first === undefined
+          ? "当前本地回合正在等待第一段真实输出。收到后，模拟器会立即开始追加文字。"
+          : "当前本地回合正在生成回复，调试器与 App 模拟器会同步展示文字增量。";
+  }
+
+  function renderTimeline(run) {
+    clear(elements.timelineList);
+    const events = (state.debug.events || []).filter((event) => !run || event.runId === run.runId);
+    if (!events.length) {
+      elements.timelineList.append(node("li", { class: "timeline-empty" }, run ? "这个本地回合暂无可见事件。" : "发一条消息后，执行事件会出现在这里。"));
+      return;
+    }
+    for (const event of [...events].reverse()) {
+      const item = node("li", { class: "timeline-item" });
+      item.append(node("time", { class: "timeline-time", dateTime: event.timestamp }, formatTime(event.timestamp)));
+      item.append(node("span", { class: "timeline-dot", "aria-hidden": "true" }));
+      const copy = node("div", { class: "timeline-copy" });
+      copy.append(node("strong", {}, event.summary));
+      copy.append(node("p", {}, `${event.type}${Number.isFinite(event.durationMs) ? ` · ${formatDuration(event.durationMs)}` : ""}`));
+      item.append(copy);
+      elements.timelineList.append(item);
+    }
+  }
+
+  function renderContext() {
+    clear(elements.contextList);
+    elements.contextSource.textContent = "平台聊天记录";
+    const messages = state.simulator.messages || [];
+    if (!messages.length) {
+      elements.contextList.append(node("p", { class: "timeline-empty" }, "当前会话还没有消息。"));
+      return;
+    }
+    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("p", { class: "context-text" }, message.text));
+      row.append(node("time", { class: "context-time", dateTime: message.createdAt }, formatTime(message.createdAt)));
+      elements.contextList.append(row);
+    }
+  }
+
+  function renderProtocol() {
+    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) {
+      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));
+      row.append(node("span", { class: "protocol-type", title: event.summary }, event.type));
+      row.append(node("span", { class: "protocol-duration" }, formatDuration(event.durationMs)));
+      if (event.type === "agent.stdout" || event.type === "agent.stderr") {
+        row.append(node("pre", { class: "runtime-log-text" }, event.summary));
+      }
+      elements.protocolLog.append(row);
+    }
+  }
+
+  function renderMessages() {
+    clear(elements.chatMessages);
+    const messages = state.simulator.messages || [];
+    if (!messages.length && !state.simulator.activeRun) {
+      elements.chatMessages.append(node("div", { class: "chat-empty", "aria-label": "暂无消息" }));
+    }
+    let renderedDay;
+    for (const message of messages) {
+      const messageDay = dayKey(message.createdAt);
+      if (messageDay && messageDay !== renderedDay && dayLabel(message.createdAt) !== "今天") {
+        elements.chatMessages.append(node("div", { class: "chat-date" }, dayLabel(message.createdAt)));
+        renderedDay = messageDay;
+      }
+      const row = node("div", { class: "message-row", "data-role": message.role });
+      const wrap = node("div", { class: "message-content" });
+      wrap.append(node("div", { class: "message-bubble" }, message.text));
+      if (message.role === "user") row.append(wrap);
+      else row.append(messageAvatar("assistant"), wrap);
+      elements.chatMessages.append(row);
+    }
+    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);
+      elements.chatMessages.append(row);
+    }
+    window.requestAnimationFrame(() => {
+      elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+    });
+  }
+
+  function renderDebug() {
+    renderRuns();
+    renderContext();
+    renderProtocol();
+  }
+
+  function renderAll() {
+    renderProject();
+    renderDev();
+    renderDebug();
+    renderMessages();
+  }
+
+  async function refreshDebug() {
+    const value = await api("/api/debug");
+    state.debug = value.debug;
+    renderDebug();
+  }
+
+  async function refreshSimulator() {
+    if (state.dev.phase !== "ready" || state.pollingBusy) return;
+    state.pollingBusy = true;
+    try {
+      const value = await api("/api/simulator/state");
+      state.simulator = value.state;
+      renderDev();
+      renderMessages();
+      renderContext();
+      await refreshDebug();
+    } catch (cause) {
+      if (cause?.code !== "SIMULATOR_NOT_READY") showError(cause);
+    } finally {
+      state.pollingBusy = false;
+    }
+  }
+
+  function syncPolling() {
+    if (state.dev.phase === "ready" && state.polling === undefined) {
+      void refreshSimulator();
+      state.polling = window.setInterval(() => void refreshSimulator(), 1200);
+    } else if (state.dev.phase !== "ready" && state.polling !== undefined) {
+      window.clearInterval(state.polling);
+      state.polling = undefined;
+    }
+  }
+
+  async function controlDev() {
+    if (state.dev.phase === "starting" || state.dev.phase === "stopping") return;
+    elements.devControl.disabled = true;
+    try {
+      const path = state.dev.phase === "ready" ? "/api/dev/stop" : "/api/dev/start";
+      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);
+    }
+  }
+
+  function updateSendButton() {
+    const ready = state.dev.phase === "ready" && !state.simulator.activeRun;
+    elements.sendMessage.disabled = !ready || !elements.messageInput.value.trim();
+  }
+
+  let pendingSend;
+
+  async function sendMessage(event) {
+    event.preventDefault();
+    const text = elements.messageInput.value;
+    if (!text.trim() || state.dev.phase !== "ready" || state.simulator.activeRun) return;
+    elements.messageInput.disabled = true;
+    elements.sendMessage.disabled = true;
+    // Keep the logical message identity after an unknown outcome; retries are user initiated.
+    if (!pendingSend || pendingSend.text !== text) {
+      pendingSend = { text, idempotencyKey: window.crypto.randomUUID
+        ? window.crypto.randomUUID()
+        : `preview-${Date.now()}-${Math.random().toString(16).slice(2)}` };
+    }
+    const { idempotencyKey } = pendingSend;
+    try {
+      const accepted = await api("/api/simulator/messages", {
+        method: "POST",
+        body: JSON.stringify({ text, idempotencyKey }),
+      });
+      pendingSend = undefined;
+      elements.messageInput.value = "";
+      resizeComposer();
+      state.simulator.activeRun = { runId: accepted.runId, status: "pending" };
+      renderDev();
+      renderMessages();
+      await refreshSimulator();
+    } catch (cause) {
+      showError(cause);
+      renderDev();
+    }
+  }
+
+  function resizeComposer() {
+    elements.messageInput.style.height = "auto";
+    elements.messageInput.style.height = `${Math.min(elements.messageInput.scrollHeight, 78)}px`;
+    updateSendButton();
+  }
+
+  function activateTab(tab) {
+    const tabs = [...document.querySelectorAll('[role="tab"]')];
+    for (const item of tabs) {
+      const selected = item === tab;
+      item.setAttribute("aria-selected", String(selected));
+      item.tabIndex = selected ? 0 : -1;
+      const panel = document.getElementById(item.getAttribute("aria-controls"));
+      panel.hidden = !selected;
+    }
+  }
+
+  async function togglePairing(force) {
+    const requestId = ++pairingRequest;
+    pairingRevision = state.dev.revision;
+    const open = force ?? elements.pairingPanel.hidden;
+    elements.pairingPanel.hidden = !open;
+    elements.pairDevice.setAttribute("aria-expanded", String(open));
+    if (!open) return;
+    clear(elements.pairingBody);
+    elements.pairingBody.append(node("p", { class: "pairing-status" }, "正在读取真机入口…"));
+    try {
+      const { pairing } = await api("/api/device/pairing");
+      if (requestId !== pairingRequest || elements.pairingPanel.hidden) return;
+      const copy = node("div");
+      clear(elements.pairingBody);
+      if (pairing.status === "ready") {
+        if (typeof pairing.qrCodeDataUrl !== "string" || !pairing.qrCodeDataUrl.startsWith("data:image/png;base64,")) {
+          throw new Error("二维码生成失败，请重新打开真机预览。");
+        }
+        elements.pairingBody.append(node("img", {
+          class: "pairing-qr", src: pairing.qrCodeDataUrl, width: "256", height: "256", alt: "打开当前开发版搭子的二维码",
+        }));
+        copy.append(node("p", { class: "pairing-status" }, "真机入口已准备好"));
+        copy.append(node("p", { class: "pairing-hint" }, "使用支持 App 链接的扫码工具打开。手机需安装支持预览入口的搭搭 App，并登录同一开发者账号。"));
+        if (pairing.code) copy.append(node("p", { class: "pairing-code" }, pairing.code));
+        const link = node("a", { class: "pairing-link", href: pairing.url }, pairing.url);
+        copy.append(link);
+      } else {
+        copy.append(node("p", { class: "pairing-status" }, "真机预览暂不可用"));
+        copy.append(node("p", { class: "pairing-hint" }, pairing.reason));
+      }
+      elements.pairingBody.append(copy);
+    } catch (cause) {
+      if (requestId !== pairingRequest || elements.pairingPanel.hidden) return;
+      clear(elements.pairingBody);
+      elements.pairingBody.append(node("p", { class: "pairing-status" }, cause instanceof Error ? cause.message : "真机入口读取失败"));
+    }
+  }
+
+  async function copyProtocol() {
+    const text = (state.debug.events || []).map((event) => [
+      event.timestamp,
+      event.channel,
+      event.type,
+      event.runId || "-",
+      Number.isFinite(event.durationMs) ? `${event.durationMs}ms` : "-",
+      event.summary,
+    ].join("\t")).join("\n");
+    try {
+      await navigator.clipboard.writeText(text);
+      toast("协议日志已复制");
+    } catch {
+      showError(new Error("浏览器未允许复制，请在协议日志中手动选择"));
+    }
+  }
+
+  function connectEvents() {
+    const events = new EventSource("/api/events");
+    events.addEventListener("dev.state", (event) => {
+      try {
+        if (applyDevState(JSON.parse(event.data))) renderDev();
+      } catch {
+        // A malformed local event is ignored; the next API refresh repairs state.
+      }
+    });
+    events.addEventListener("simulator.state", (event) => {
+      try {
+        const value = JSON.parse(event.data);
+        state.simulator = value.state;
+        state.debug = value.debug;
+        renderDev();
+        renderDebug();
+        renderMessages();
+      } catch {
+        // Polling remains the reconciliation path for a malformed or missed local event.
+      }
+    });
+  }
+
+  async function boot() {
+    try {
+      const [project, dev, debug] = await Promise.all([
+        api("/api/project"),
+        api("/api/dev"),
+        api("/api/debug"),
+      ]);
+      state.project = project.project;
+      state.dev = dev.state;
+      state.debug = debug.debug;
+      renderAll();
+      connectEvents();
+      // Load the cloud profile independently of Agent startup. If it fails,
+      // the local project and DEV controls remain usable and show the error.
+      const { buddy } = await api("/api/buddy");
+      state.buddy = state.dev.ready?.buddy || buddy;
+      renderProject();
+    } catch (cause) {
+      showError(cause);
+    }
+  }
+
+  elements.devControl.addEventListener("click", () => void controlDev());
+  elements.composer.addEventListener("submit", (event) => void sendMessage(event));
+  elements.messageInput.addEventListener("input", resizeComposer);
+  elements.messageInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+      event.preventDefault();
+      elements.composer.requestSubmit();
+    }
+  });
+  elements.runPicker.addEventListener("change", () => {
+    selectRun(elements.runPicker.value);
+  });
+  elements.runPicker.addEventListener("blur", renderDebug);
+  elements.previousRun.addEventListener("click", () => stepRun(1));
+  elements.nextRun.addEventListener("click", () => stepRun(-1));
+  elements.followLatestRun.addEventListener("change", () => {
+    state.followLatestRun = elements.followLatestRun.checked;
+    renderDebug();
+  });
+  elements.copyRunId.addEventListener("click", () => void copyRunId());
+  elements.pairDevice.addEventListener("click", () => void togglePairing());
+  $("#close-pairing").addEventListener("click", () => void togglePairing(false));
+  $("#dismiss-error").addEventListener("click", () => { elements.errorBanner.hidden = true; });
+  $("#copy-protocol").addEventListener("click", () => void copyProtocol());
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !elements.pairingPanel.hidden) void togglePairing(false);
+  });
+  for (const tab of document.querySelectorAll('[role="tab"]')) {
+    tab.addEventListener("click", () => activateTab(tab));
+    tab.addEventListener("keydown", (event) => {
+      const tabs = [...document.querySelectorAll('[role="tab"]')].filter((item) => !item.hidden);
+      const index = tabs.indexOf(tab);
+      const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+        ? tabs[(index + 1) % tabs.length]
+        : event.key === "ArrowLeft" || event.key === "ArrowUp"
+          ? tabs[(index - 1 + tabs.length) % tabs.length]
+          : event.key === "Home"
+            ? tabs[0]
+            : event.key === "End"
+              ? tabs[tabs.length - 1]
+              : undefined;
+      if (target) {
+        event.preventDefault();
+        activateTab(target);
+        target.focus();
+      }
+    });
+  }
+
+  void boot();
+})();