niuma-codex 0.0.0-stage → 0.0.1-beta.10

package/dist/assets/control/app.js

@@ -0,0 +1,1858 @@
+(() => {
+  const overview = document.getElementById("overview");
+  const emptyState = document.getElementById("empty-state");
+  const controlPageTitle = document.getElementById("control-page-title");
+  const controlPageIntro = document.getElementById("control-page-intro");
+  const refreshButton = document.getElementById("refresh-control");
+  const refreshStatus = document.getElementById("refresh-status");
+  const turnAuditCoverage = document.getElementById("turn-audit-coverage");
+  const turnAuditSummary = document.getElementById("turn-audit-summary");
+  const turnAuditList = document.getElementById("turn-audit-list");
+  const turnAuditEmpty = document.getElementById("turn-audit-empty");
+  const turnAuditLoadMoreSessionsButton = document.getElementById("turn-audit-load-more-sessions");
+  const sessionsList = document.getElementById("sessions-list");
+  const sessionsEmpty = document.getElementById("sessions-empty");
+  const followerTracesList = document.getElementById("follower-traces-list");
+  const followerTracesEmpty = document.getElementById("follower-traces-empty");
+  const followerTracesCoverage = document.getElementById("follower-traces-coverage");
+  const clearFollowerTracesButton = document.getElementById("clear-follower-traces");
+  const logsList = document.getElementById("logs-list");
+  const logsEmpty = document.getElementById("logs-empty");
+  const errorLogTab = document.getElementById("error-log-tab");
+  const debugLogTab = document.getElementById("debug-log-tab");
+  const loadMoreLogsButton = document.getElementById("load-more-logs");
+  const daemonLifecycleDetails = document.getElementById("daemon-lifecycle-details");
+  const daemonStartButton = document.getElementById("daemon-start");
+  const daemonStopButton = document.getElementById("daemon-stop");
+  const daemonRestartButton = document.getElementById("daemon-restart");
+  const daemonActionConfirmationLabel = document.getElementById("daemon-action-confirmation-label");
+  const daemonActionConfirmationInput = document.getElementById("daemon-action-confirmation");
+  const daemonActionSubmitButton = document.getElementById("daemon-action-submit");
+  const daemonMetricsStatus = document.getElementById("daemon-metrics-status");
+  const daemonMetricsSubtitle = document.getElementById("daemon-metrics-subtitle");
+  const daemonMetricsSummary = document.getElementById("daemon-metrics-summary");
+  const daemonMetricsEmpty = document.getElementById("daemon-metrics-empty");
+  const daemonCpuChart = document.getElementById("daemon-cpu-chart");
+  const daemonMemoryChart = document.getElementById("daemon-memory-chart");
+  const daemonCpuChartTitle = document.getElementById("daemon-cpu-chart-title");
+  const daemonMemoryChartTitle = document.getElementById("daemon-memory-chart-title");
+  const daemonMetricsRangeButtons = [
+    document.getElementById("daemon-metrics-range-5m"),
+    document.getElementById("daemon-metrics-range-15m"),
+    document.getElementById("daemon-metrics-range-1h"),
+    document.getElementById("daemon-metrics-range-6h"),
+    document.getElementById("daemon-metrics-range-24h"),
+    document.getElementById("daemon-metrics-range-48h"),
+  ].filter(Boolean);
+  const connectionsCurrent = document.getElementById("connections-current");
+  const connectionsStatus = document.getElementById("connections-status");
+  const connectionsEmpty = document.getElementById("connections-empty");
+  const CONTROL_PAGES = Object.freeze({
+    "/connections": { key: "connections", title: "外部连接", intro: "查看当前设备连接与额度占用，页面可见时每 3 秒刷新。", sectionId: "control-page-connections", navId: "control-nav-connections" },
+    "/": { key: "overview", title: "概览", intro: "查看当前设备上的 daemon 运行概览和生命周期。", sectionId: "control-page-overview", navId: "control-nav-overview" },
+    "/sessions": { key: "sessions", title: "会话跟踪", intro: "查看 follower 生命周期、共享订阅和租约快照。", sectionId: "control-page-sessions", navId: "control-nav-sessions" },
+    "/subscriptions": { key: "subscriptions", title: "会话订阅", intro: "查看最近 24 小时的会话订阅 Trace。", sectionId: "control-page-subscriptions", navId: "control-nav-subscriptions" },
+    "/turn-audit": { key: "turn-audit", title: "Turn 推送审计", intro: "查看最近 24 小时的安全投递证据。", sectionId: "control-page-turn-audit", navId: "control-nav-turn-audit" },
+    "/logs": { key: "logs", title: "诊断日志", intro: "查看安全投影后的错误与调试日志。", sectionId: "control-page-logs", navId: "control-nav-logs" },
+  });
+  const currentPage = CONTROL_PAGES[window.location.pathname];
+  if (!currentPage) return;
+  if (
+    !overview
+    || !emptyState
+    || !refreshButton
+    || !refreshStatus
+    || !controlPageTitle
+    || !controlPageIntro
+    || !sessionsList
+    || !sessionsEmpty
+    || !logsList
+    || !logsEmpty
+    || !errorLogTab
+    || !debugLogTab
+    || !loadMoreLogsButton
+  ) return;
+
+  // 路由只显示并读取其所属模块，避免控制台同时读取无关的本机管理快照。
+  for (const page of Object.values(CONTROL_PAGES)) {
+    const section = document.getElementById(page.sectionId);
+    const navigationLink = document.getElementById(page.navId);
+    if (!section || !navigationLink) return;
+    section.hidden = page.key !== currentPage.key;
+    const isCurrentPage = page.key === currentPage.key;
+    if (isCurrentPage) navigationLink.setAttribute("aria-current", "page");
+    else navigationLink.removeAttribute("aria-current");
+    toggleBootstrapClass(navigationLink, "active", isCurrentPage);
+  }
+  controlPageTitle.textContent = currentPage.title;
+  controlPageIntro.textContent = currentPage.intro;
+
+  // 旧的最小 DOM 测试夹具不含 Trace 区域；真实静态页面始终完整启用此功能。
+  const followerTracesEnabled = Boolean(
+    followerTracesList && followerTracesEmpty && followerTracesCoverage,
+  );
+  const turnAuditAvailable = Boolean(
+    turnAuditCoverage
+    && turnAuditSummary
+    && turnAuditList
+    && turnAuditEmpty,
+  );
+  const daemonMetricsEnabled = Boolean(
+    daemonMetricsStatus
+    && daemonMetricsSubtitle
+    && daemonMetricsSummary
+    && daemonMetricsEmpty
+    && daemonCpuChart
+    && daemonMemoryChart
+    && daemonCpuChartTitle
+    && daemonMemoryChartTitle,
+  );
+
+  let selectedLogKind = "error";
+  let intendedLogKind = "error";
+  const logSnapshots = { error: null, debug: null };
+  const logRequestGenerations = { error: 0, debug: 0 };
+  let controlRefreshGeneration = 0;
+  let daemonLifecycleOperation = null;
+  let selectedDaemonAction = null;
+  let daemonActionBusy = false;
+  const turnAuditEventsButton = document.getElementById("turn-audit-view-events");
+  const turnAuditSessionsButton = document.getElementById("turn-audit-view-sessions");
+  const turnAuditEventCount = document.getElementById("turn-audit-event-count");
+  const turnAuditHistoryNote = document.getElementById("turn-audit-history-note");
+  let turnAuditView = turnAuditEventsButton ? "events" : "sessions";
+  const triggerFilters = document.getElementById("trigger-filters");
+  const triggerTypeSelect = document.getElementById("trigger-filter-type");
+  const triggerFilterNames = ["all", "attention", "processing", "accepted", "recovered"];
+  let triggerStatus = "all";
+  let triggerType = "all";
+  let triggerSnapshot = null;
+  let triggerGeneration = 0;
+  let triggerBusy = false;
+  let triggerError = false;
+  let triggerExhausted = false;
+  let turnAuditSnapshot = null;
+  let turnAuditListGeneration = 0;
+  let turnAuditSessionPageRequest = null;
+  let turnAuditRefreshPending = false;
+  const turnAuditDetailGenerations = new Map();
+  const turnAuditDetails = new Map();
+  const turnAuditDetailRequests = new Set();
+  const daemonActionConfirmations = { stop: "STOP", restart: "RESTART" };
+  const DAEMON_METRICS_RANGE_LABELS = Object.freeze({ "5m": "5 分钟", "15m": "15 分钟", "1h": "1 小时", "6h": "6 小时", "24h": "24 小时", "48h": "48 小时" });
+  let selectedDaemonMetricsRange = "15m";
+  let daemonMetricsRangeGeneration = 0;
+
+  function beginLogRequest(kind) {
+    logRequestGenerations[kind] += 1;
+    return logRequestGenerations[kind];
+  }
+
+  function isCurrentLogRequest(kind, generation) {
+    return logRequestGenerations[kind] === generation;
+  }
+
+  async function getControlJson(url) {
+    const response = await fetch(url, {
+      cache: "no-store",
+      // 同源 GET 不会由脚本设置 Origin，固定根 Referer 保持既有来源证明。
+      referrer: `${window.location.origin}/`,
+    });
+    const payload = await response.json();
+    if (payload.code !== 0 || !payload.data) {
+      throw new Error("Control snapshot unavailable");
+    }
+    return payload.data;
+  }
+
+  function textElement(tagName, value, className = "") {
+    const element = document.createElement(tagName);
+    element.textContent = String(value);
+    if (className) element.className = className;
+    return element;
+  }
+
+  // 不依赖额外 DOM 封装，保持 Bootstrap 状态类在真实浏览器和最小测试 DOM 中一致。
+  function toggleBootstrapClass(element, className, enabled) {
+    const classes = new Set(element.className.split(/\s+/u).filter(Boolean));
+    if (enabled) classes.add(className);
+    else classes.delete(className);
+    element.className = [...classes].join(" ");
+  }
+
+  // 仅映射 Control 严格投影的可信枚举，不能从宿主机、IP 或 UA 补猜资料。
+  const BROWSER_LABELS = {
+    chrome: "Chrome",
+    chromium: "Chromium",
+    firefox: "Firefox",
+    safari: "Safari",
+    unknown: "未知浏览器",
+  };
+  const PLATFORM_LABELS = {
+    android: "Android",
+    ios: "iOS",
+    linux: "Linux",
+    macos: "macOS",
+    unknown: "未知平台",
+    windows: "Windows",
+  };
+
+  function formatDeviceInfoSubtitle(deviceInfo) {
+    if (deviceInfo.product === "native" && deviceInfo.platform === "ios") {
+      return `${deviceInfo.model} · iOS ${deviceInfo.system_version}`;
+    }
+    return `${BROWSER_LABELS[deviceInfo.browser]} · ${PLATFORM_LABELS[deviceInfo.platform]}`;
+  }
+
+  function formatLocalTime(value, milliseconds = false) {
+    if (value === null || value === undefined) return "无";
+    let date;
+    try {
+      date = value instanceof Date ? value : new Date(value);
+    } catch {
+      return "无";
+    }
+    // Control 的缺失时间可投影为 0；不得把它误显示为 1970 年。
+    if (!Number.isFinite(date.getTime()) || date.getTime() <= 0) return "无";
+    // 由浏览器按当前设备时区格式化，避免把 daemon 时间误解为服务器本地时间。
+    return new Intl.DateTimeFormat(undefined, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      ...(milliseconds ? { fractionalSecondDigits: 3, hourCycle: "h23" } : {}),
+      timeZoneName: "short",
+    }).format(date);
+  }
+
+  function appendDefinition(list, label, value) {
+    const item = document.createElement("div");
+    item.className = "col";
+    item.append(
+      textElement("dt", label, "small text-body-secondary"),
+      textElement("dd", value, "font-monospace text-break mb-0"),
+    );
+    list.append(item);
+  }
+
+  function formatMemoryRss(bytes) {
+    if (!Number.isSafeInteger(bytes) || bytes < 0) return "unknown";
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
+  }
+
+  function formatPercent(value) {
+    if (typeof value !== "number" || !Number.isFinite(value)) return "unknown";
+    return `${value.toFixed(1)}%`;
+  }
+
+  function formatOptionalPercent(value) {
+    return value === null ? "采样不足" : formatPercent(value);
+  }
+
+  function formatOptionalMemory(value) {
+    return value === null ? "采样不足" : formatMemoryRss(value);
+  }
+
+  function metricsStatusClass(status) {
+    if (status === "healthy") return "badge text-bg-success";
+    if (status === "warning") return "badge text-bg-warning";
+    if (status === "critical") return "badge text-bg-danger";
+    return "badge text-bg-secondary";
+  }
+
+  function appendMetricSummary(label, value) {
+    const item = document.createElement("div");
+    item.className = "col";
+    item.append(
+      textElement("dt", label, "small text-body-secondary"),
+      textElement("dd", value, "font-monospace text-break mb-0"),
+    );
+    daemonMetricsSummary.append(item);
+  }
+
+  // 复用图表实例，刷新数据时保留响应式布局，避免重复绑定鼠标事件。
+  const metricCharts = new Map();
+  function renderMetricChart(canvas, samples, valueOf, maxValue, color) {
+    if (typeof Chart === "undefined") return;
+    const isCpu = canvas === daemonCpuChart;
+    const unit = isCpu ? "%" : "MiB";
+    const data = samples.map((sample) => ({ x: sample.sampled_at_ms, y: valueOf(sample) }));
+    // 限定真实采样范围，避免线性轴的整刻度扩展出额外日期。
+    const minTime = data.length ? data[0].x - (data.length === 1 ? 5000 : 0) : undefined;
+    const maxTime = data.length ? data[data.length - 1].x + (data.length === 1 ? 5000 : 0) : undefined;
+    const existing = metricCharts.get(canvas);
+    if (existing) {
+      existing.data.datasets[0].data = data;
+      existing.data.datasets[0].pointRadius = samples.length === 1 ? 3 : 0;
+      existing.options.scales.x.min = minTime;
+      existing.options.scales.x.max = maxTime;
+      existing.update("none");
+      return;
+    }
+    metricCharts.set(canvas, new Chart(canvas, {
+      type: "line",
+      data: { datasets: [{
+        label: isCpu ? "CPU" : "RSS",
+        data,
+        borderColor: color,
+        borderWidth: 2,
+        pointRadius: samples.length === 1 ? 3 : 0,
+        pointHoverRadius: 4,
+        tension: 0,
+        // 停机或休眠造成的采样空档保持断线，不能画成连续运行。
+        spanGaps: 15_000,
+      }] },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        parsing: false,
+        interaction: { mode: "nearest", axis: "x", intersect: false },
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            displayColors: false,
+            callbacks: {
+              title: (items) => items.length ? formatLocalTime(items[0].parsed.x) : "",
+              label: (item) => `${item.dataset.label}: ${item.parsed.y.toFixed(2)} ${unit}`,
+            },
+          },
+        },
+        scales: {
+          x: {
+            type: "linear",
+            min: minTime,
+            max: maxTime,
+            grid: { display: false },
+            ticks: {
+              maxTicksLimit: 5,
+              maxRotation: 0,
+              callback: (value) => ["24h", "48h"].includes(selectedDaemonMetricsRange)
+                ? [new Date(value).toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" }),
+                  new Date(value).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false })]
+                : new Date(value).toLocaleTimeString("zh-CN", { hour12: false }),
+            },
+          },
+          y: {
+            min: 0,
+            suggestedMax: maxValue,
+            title: { display: true, text: unit },
+            ticks: { maxTicksLimit: 5 },
+          },
+        },
+      },
+    }));
+  }
+
+  function updateDaemonMetricsRangeView() {
+    if (!daemonMetricsEnabled) return;
+    const label = DAEMON_METRICS_RANGE_LABELS[selectedDaemonMetricsRange] ?? "15 分钟";
+    daemonCpuChartTitle.textContent = `CPU 最近 ${label}`;
+    daemonMemoryChartTitle.textContent = `RSS 最近 ${label}`;
+    daemonCpuChart.setAttribute("aria-label", `CPU 最近 ${label}趋势`);
+    daemonMemoryChart.setAttribute("aria-label", `RSS 最近 ${label}趋势`);
+    for (const button of daemonMetricsRangeButtons) {
+      const active = button.getAttribute("data-daemon-metrics-range") === selectedDaemonMetricsRange
+        || button.getAttribute("id") === `daemon-metrics-range-${selectedDaemonMetricsRange}`;
+      toggleBootstrapClass(button, "active", active);
+      button.setAttribute("aria-pressed", active ? "true" : "false");
+    }
+  }
+
+  function renderDaemonMetrics(current, history) {
+    if (!daemonMetricsEnabled) return;
+    updateDaemonMetricsRangeView();
+    daemonMetricsStatus.className = metricsStatusClass(current?.status);
+    daemonMetricsStatus.textContent = current?.status ?? "unknown";
+    daemonMetricsSummary.replaceChildren();
+    const sample = current?.current ?? null;
+    const summary = current?.summary ?? {};
+    const samples = Array.isArray(history?.list) ? history.list : [];
+    daemonMetricsEmpty.hidden = Boolean(sample || samples.length);
+    daemonMetricsSubtitle.textContent = sample
+      ? `最近采样：${formatLocalTime(sample.sampled_at_ms)}，采样间隔 ${Math.round((current.sample_interval_ms ?? 0) / 1000)} 秒`
+      : "daemon 正在启动或尚未形成两次采样。";
+    appendMetricSummary("CPU 当前", sample ? formatPercent(sample.cpu_percent) : "采样不足");
+    appendMetricSummary("CPU 1 分钟平均", formatOptionalPercent(summary.cpu_avg_1m ?? null));
+    appendMetricSummary("RSS 当前", sample ? formatMemoryRss(sample.memory_rss_bytes) : "采样不足");
+    appendMetricSummary("RSS 5 分钟峰值", formatOptionalMemory(summary.memory_rss_peak_5m ?? null));
+    renderMetricChart(daemonCpuChart, samples, (entry) => entry.cpu_percent, 100, "#0d6efd");
+    renderMetricChart(daemonMemoryChart, samples, (entry) => entry.memory_rss_bytes / (1024 * 1024), 1, "#198754");
+  }
+
+  function renderDaemonMetricsUnavailable() {
+    if (!daemonMetricsEnabled) return;
+    updateDaemonMetricsRangeView();
+    daemonMetricsStatus.className = "badge text-bg-secondary";
+    daemonMetricsStatus.textContent = "unavailable";
+    daemonMetricsSubtitle.textContent = "daemon 未运行或资源采样暂不可读取。";
+    daemonMetricsSummary.replaceChildren();
+    appendMetricSummary("CPU 当前", "不可用");
+    appendMetricSummary("CPU 1 分钟平均", "不可用");
+    appendMetricSummary("RSS 当前", "不可用");
+    appendMetricSummary("RSS 5 分钟峰值", "不可用");
+    daemonMetricsEmpty.hidden = false;
+    renderMetricChart(daemonCpuChart, [], (entry) => entry.cpu_percent, 100, "#0d6efd");
+    renderMetricChart(daemonMemoryChart, [], (entry) => entry.memory_rss_bytes / (1024 * 1024), 1, "#198754");
+  }
+
+  async function refreshDaemonMetricsHistoryRange(range) {
+    if (!daemonMetricsEnabled || !Object.prototype.hasOwnProperty.call(DAEMON_METRICS_RANGE_LABELS, range)) return;
+    selectedDaemonMetricsRange = range;
+    updateDaemonMetricsRangeView();
+    const generation = ++daemonMetricsRangeGeneration;
+    try {
+      const [metricsCurrent, metricsHistory] = await Promise.all([
+        getControlJson("/api/v1/control/daemon-metrics/current").catch(() => null),
+        getControlJson(`/api/v1/control/daemon-metrics/history?range=${range}`).catch(() => null),
+      ]);
+      if (generation !== daemonMetricsRangeGeneration) return;
+      if (metricsCurrent && metricsHistory) renderDaemonMetrics(metricsCurrent, metricsHistory);
+      else renderDaemonMetricsUnavailable();
+    } catch {
+      if (generation === daemonMetricsRangeGeneration) renderDaemonMetricsUnavailable();
+    }
+  }
+
+  // 使用绝对时间快照；手动刷新之外不新增轮询或自动倒计时。
+  function executionTime(value) {
+    return Number.isSafeInteger(value) && value >= 0 ? new Date(value).toLocaleString() : "尚无记录";
+  }
+  function renderOverview(data) {
+    const service=data.execution_service;
+    const availability={ready:"可用",recovering:"正在恢复",blocked:"等待安全退出确认",stopped:"已停止",unknown:"尚未取得执行服务状态"};
+    const phases={current:"正常运行",checking:"检查安装",waiting_idle:"等待现有任务结束",draining:"等待在途请求结束",exit_requested:"等待旧执行服务退出",starting:"启动执行服务",retrying:"等待下次尝试",blocked:"等待安全退出确认",stopped:"已停止",unknown:"尚未取得执行服务状态"};
+    const catalogStates={uninitialized:"尚未读取",loading:"正在刷新",fresh:"已刷新",stale:"缓存已过期",unknown:"尚未取得目录状态"};
+    const coverage={unknown:"尚未确认",partial:"部分会话",complete:"完整目录"};
+    const values = [
+      ["daemon", data.daemon?.state ?? "unknown"],
+      ["PID", data.pid ?? "unknown"],
+      ["daemon 内存（RSS）", formatMemoryRss(data.memory_rss_bytes)],
+      ["App Server", data.app_server ?? "unknown"],
+      ["执行服务入口", service?.provider === "cli" ? "Codex CLI" : service?.provider === "desktop" ? "Codex 桌面端" : "尚未取得入口"],
+      ["执行服务", availability[service?.availability] ?? availability.unknown],
+      ["恢复阶段", phases[service?.phase] ?? phases.unknown],
+      ["下次尝试", executionTime(service?.next_retry_at_ms)],
+      ["会话目录", catalogStates[service?.catalog?.state] ?? catalogStates.unknown],
+      ["目录覆盖", coverage[service?.catalog?.coverage] ?? coverage.unknown],
+      ["目录最后刷新", executionTime(service?.catalog?.last_success_at_ms)],
+      ["Desktop IPC", data.desktop_ipc ?? "unknown"],
+      ["HTTP Gateway", data.http_gateway ?? "unknown"],
+      ["Direct", data.direct ?? "unknown"],
+      ["Relay", data.relay ?? "unknown"],
+    ];
+    overview.replaceChildren();
+    for (const [label, value] of values) appendDefinition(overview, label, value);
+    emptyState.hidden = data.daemon?.state !== "stopped";
+    renderDaemonLifecycle(data);
+  }
+
+  function renderDaemonLifecycle(data) {
+    if (!daemonLifecycleDetails) return;
+    daemonLifecycleOperation = data.lifecycle?.operation ?? null;
+    const values = [
+      ["状态", data.daemon?.state ?? "unknown"],
+      ["当前操作", daemonLifecycleOperation ?? "无"],
+    ];
+    daemonLifecycleDetails.replaceChildren();
+    for (const [label, value] of values) appendDefinition(daemonLifecycleDetails, label, value);
+  }
+
+  function holderIdentity(holder) {
+    if (holder?.kind === "unknown") return "未知 IPC 来源";
+    return holder?.client_name ?? holder?.client_id ?? holder?.kind ?? "未知 IPC 来源";
+  }
+
+  function subscriptionActionLabel(action) {
+    // 只展示 Control 已验证的动作，避免页面从其它字段推断订阅生命周期。
+    return {
+      started: "已开始 daemon 订阅",
+      reused: "跳过重复订阅，复用现有订阅",
+      retained: "保留现有 daemon 订阅",
+      draining: "订阅排空中",
+      stopped: "订阅已停止",
+    }[action] ?? "Trace 暂不可用";
+  }
+
+  function followerPhaseLabel(phase) {
+    // 保留协议枚举供排障，同时附上稳定的中文简称方便快速理解。
+    const labels = {
+      discovering: "发现中",
+      baselining: "建立基线",
+      following: "跟踪中",
+      terminal_draining: "收尾中",
+      released: "已释放",
+    };
+    const label = labels[phase];
+    return label ? `${phase}（${label}）` : phase ?? "未知";
+  }
+
+  function createSubscriptionTraceButton(traceId, leaseId) {
+    // 明细仅由用户点击读取；多个 lease 可以安全复用同一个 trace_id。
+    const button = textElement("button", leaseId ? "查看加载时间线" : "查看会话订阅 Trace", "btn btn-sm btn-outline-secondary mt-3");
+    button.setAttribute("type", "button");
+    const timeline = document.createElement("div");
+    timeline.className = "list-group list-group-flush mt-3";
+    button.addEventListener("click", () => {
+      void loadFollowerTraceDetail(traceId, button, timeline, leaseId);
+    });
+    return { button, timeline };
+  }
+
+  function renderSubscription(subscription) {
+    const details = document.createElement("details");
+    details.className = "subscription border rounded p-3 mt-3";
+    details.append(textElement("summary", "daemon 订阅", "fw-semibold"));
+    if (!subscription) {
+      details.append(textElement("p", "Trace 暂不可用", "text-body-secondary small mt-3 mb-0"));
+      return details;
+    }
+
+    const definitions = document.createElement("dl");
+    definitions.className = "row row-cols-1 row-cols-sm-2 g-3 mt-3 mb-0";
+    appendDefinition(definitions, "阶段", followerPhaseLabel(subscription.phase));
+    appendDefinition(
+      definitions,
+      "维持租约",
+      subscription.lease_kinds.map((kind) => followerTraceLeaseKindLabel(kind)).join("、") || "无",
+    );
+    appendDefinition(definitions, "开始时间", formatLocalTime(subscription.started_at_ms));
+    appendDefinition(definitions, "宽限截止", formatLocalTime(subscription.release_at_ms));
+    const trace = createSubscriptionTraceButton(subscription.trace_id);
+    details.append(definitions, trace.button, trace.timeline);
+    return details;
+  }
+
+  function renderLease(lease, subscription) {
+    const details = document.createElement("details");
+    details.className = "lease border rounded p-3";
+    details.append(textElement("summary", `租约 ${lease.lease_id} · ${lease.kind}`, "fw-semibold"));
+
+    const definitions = document.createElement("dl");
+    definitions.className = "row row-cols-1 row-cols-sm-2 g-3 mt-3 mb-0";
+    appendDefinition(definitions, "身份", holderIdentity(lease.holder));
+    appendDefinition(definitions, "身份类型", lease.holder?.kind ?? "unknown");
+    appendDefinition(definitions, "证据来源", lease.holder?.evidence ?? "unverified");
+    if (lease.holder?.client_id) appendDefinition(definitions, "Client ID", lease.holder.client_id);
+    if (lease.holder?.binding_id) appendDefinition(definitions, "Binding ID", lease.holder.binding_id);
+    appendDefinition(definitions, "获得时间", formatLocalTime(lease.acquired_at_ms));
+    appendDefinition(definitions, "最近活动", formatLocalTime(lease.last_seen_at_ms));
+    appendDefinition(definitions, "订阅动作", subscriptionActionLabel(lease.subscription_action));
+    if (subscription && typeof lease.trace_id === "string" && lease.trace_id.length > 0) {
+      // 操作集中在标题下方，避免加载结果把另一个按钮推到长详情底部。
+      const actions = document.createElement("div");
+      actions.className = "lease-actions d-flex flex-wrap align-items-center gap-2 mt-3";
+      actions.setAttribute("role", "group");
+      actions.setAttribute("aria-label", "租约诊断操作");
+      const trace = createSubscriptionTraceButton(lease.trace_id);
+      toggleBootstrapClass(trace.button, "mt-3", false);
+      actions.append(trace.button);
+      details.append(actions, definitions, trace.timeline);
+      if (lease.kind === "open") {
+        const loading = createSubscriptionTraceButton(lease.trace_id, lease.lease_id);
+        toggleBootstrapClass(loading.button, "mt-3", false);
+        actions.append(loading.button);
+        details.append(loading.timeline);
+      }
+    } else {
+      details.append(definitions, textElement("p", "Trace 暂不可用", "text-body-secondary small mt-3 mb-0"));
+    }
+    return details;
+  }
+
+  function renderFollowers(data) {
+    sessionsList.replaceChildren();
+    sessionsEmpty.hidden = data.list.length !== 0;
+    for (const follower of data.list) {
+      const article = document.createElement("article");
+      article.className = "session card card-body shadow-sm";
+      article.append(textElement("h3", follower.title || "未命名会话", "h5"));
+      article.append(textElement("p", follower.thread_id, "small font-monospace text-break text-body-secondary"));
+
+      const metadata = document.createElement("dl");
+      metadata.className = "row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3 mb-0";
+      appendDefinition(metadata, "阶段", followerPhaseLabel(follower.phase));
+      appendDefinition(metadata, "登记代际", follower.registered_generation ?? "未登记");
+      appendDefinition(metadata, "快照", follower.snapshot_observed ? "已观察" : "未观察");
+      appendDefinition(metadata, "宽限截止", formatLocalTime(follower.release_at_ms));
+      appendDefinition(metadata, "活跃租约", follower.leases.length);
+      article.append(metadata);
+      article.append(renderSubscription(follower.subscription));
+
+      const leases = document.createElement("div");
+      leases.className = "leases vstack gap-2 mt-3";
+      for (const lease of follower.leases) leases.append(renderLease(lease, follower.subscription));
+      article.append(leases);
+      sessionsList.append(article);
+    }
+  }
+
+  function followerTraceTransportLabel(transport) {
+    return {
+      local: "本机打开",
+      direct: "Direct 打开",
+      relay: "Relay 打开",
+    }[transport] ?? "已记录来源";
+  }
+
+  function followerTraceCoverageLabel(coverage) {
+    if (coverage?.status === "complete") return "Trace 记录完整。";
+    if (coverage?.status === "partial") return "Trace 记录部分可读，结果可能不完整。";
+    if (coverage?.status === "historical_unverified") {
+      return "历史记录，当前 follower 状态不可用。";
+    }
+    return "Trace 覆盖状态未知。";
+  }
+
+  function followerTraceStepLabel(step) {
+    if (step?.loading) return {
+      selected: "点击侧栏任务", restored: "恢复会话页面", request_started: "开始请求会话流",
+      snapshot_received: "浏览器收到首个快照", history_ready: "浏览器历史正文就绪", content_presented: "前台正文首屏显示（绘制机会）",
+      open_received: "Desktop 收到打开请求", identity_ready: "会话身份核验完成", lease_acquired: "取得 open lease",
+      shell_sent: "Desktop 发送会话壳", history_sent: "Desktop 发送历史正文", stream_closed: "会话流关闭",
+    }[step.loading.phase] ?? "加载步骤";
+    if (step?.event_kind === "lease") {
+      return step.transition === "acquired"
+        ? "已取得订阅租约"
+        : step.transition === "released"
+          ? "已释放订阅租约"
+          : "已记录订阅租约";
+    }
+    const settingsGateLabels = {
+      waiting_for_settings_snapshot: "等待当前控制代际完整 settings snapshot",
+      settings_snapshot_ready: "当前控制代际 settings snapshot 已就绪",
+      settings_snapshot_invalidated: "settings snapshot 基线已失效，等待当前代际新 snapshot",
+    };
+    const stage = step?.stage ?? step?.latest_stage;
+    if (stage === "ipc_settings_snapshot_gate_changed") {
+      return settingsGateLabels[step.outcome] ?? "已记录步骤";
+    }
+    const stageLabels = {
+      lease_acquired: "已取得订阅租约",
+      lease_released: "已释放订阅租约",
+      subscription_started: "已开始 daemon 订阅",
+      subscription_stopped: "订阅已停止",
+      subscription_stop_failed: "订阅停止失败",
+      open_requested: "已请求打开会话",
+      open_rejected: "会话打开已拒绝",
+      initial_snapshot_started: "已开始读取初始快照",
+      initial_snapshot_sent: "已发送初始快照",
+      initial_snapshot_failed: "初始快照读取失败",
+      open_lease_acquired: "已取得打开租约",
+      open_lease_released: "已释放打开租约",
+      follower_intent_registered: "已登记 follower 意图",
+      related_lease_snapshot: "已观察到关联租约",
+      ipc_checked: "已检查 IPC",
+      probe_decided: "已决定 follower 探测",
+      following_sent: "已发送跟随请求",
+      following_send_failed: "跟随请求发送失败",
+      snapshot_observed: "已观察到 snapshot",
+      probe_timeout: "follower 探测超时",
+      recovery_probe_started: "已开始恢复探测",
+      follower_phase_changed: "follower 阶段已更新",
+      ipc_connection_lost: "IPC 连接已断开",
+      ipc_connection_recovered: "IPC 连接已恢复",
+      thread_read_started: "已开始读取会话",
+      thread_read_succeeded: "会话读取完成",
+      thread_read_failed: "会话读取失败",
+      thread_read_retry_scheduled: "会话读取已安排重试",
+      thread_read_cancelled: "会话读取已取消",
+      related_lease_acquired: "关联 follower 租约已取得",
+      related_lease_released: "关联 follower 租约已释放",
+      follower_retained: "follower 已保持",
+      detail_sync_changed: "详情同步状态已更新",
+      open_stream_closed: "打开连接已关闭",
+    };
+    return stageLabels[stage] ?? "已记录步骤";
+  }
+
+  function followerTraceLeaseKindLabel(kind) {
+    return {
+      active: "活跃租约",
+      open: "打开租约",
+      remote: "远端租约",
+    }[kind] ?? "已记录租约";
+  }
+
+  function followerTraceLeaseSourceLabel(source) {
+    return {
+      active_turn: "活跃 Turn",
+      external_open: "外部打开",
+      desktop_following: "Desktop following",
+    }[source] ?? "已记录来源";
+  }
+
+  function followerTraceLeaseTransitionLabel(transition) {
+    return {
+      acquired: "已取得",
+      released: "已释放",
+    }[transition] ?? "已记录变更";
+  }
+
+  function followerTraceKindLabel(traceKind) {
+    return traceKind === "legacy_open"
+      ? "旧版外部打开 Trace"
+      : traceKind === "subscription"
+        ? "会话订阅 Trace"
+        : "已记录 Trace";
+  }
+
+  function renderFollowerTraceSteps(container, data) {
+    container.replaceChildren();
+    const complete = data.coverage?.status === "complete";
+    // 明细独立展示 coverage，不能把受限读取的空结果解释为没有订阅记录。
+    if (!complete) {
+      container.append(textElement("p", followerTraceCoverageLabel(data.coverage), "list-group-item text-body-secondary"));
+    }
+    if (!Array.isArray(data.list) || data.list.length === 0) {
+      container.append(textElement("p", complete
+        ? "没有可显示的会话订阅 Trace 步骤。"
+        : "当前未读到 Trace 步骤，无法确认该订阅是否没有步骤。", "list-group-item text-body-secondary"));
+      return;
+    }
+    for (const step of data.list) {
+      const item = document.createElement("article");
+      item.className = "trace-step list-group-item";
+      item.append(textElement("h4", followerTraceStepLabel(step), "h6"));
+      const details = document.createElement("dl");
+      details.className = "row row-cols-1 row-cols-sm-2 g-3 mb-0";
+      appendDefinition(details, "时间", formatLocalTime(step.occurred_at_ms));
+      if (step.event_kind === "lease") {
+        // schema v2 lease 与 lifecycle 字段互斥，按 discriminator 展示真实含义。
+        appendDefinition(details, "租约种类", followerTraceLeaseKindLabel(step.lease_kind));
+        appendDefinition(details, "来源", followerTraceLeaseSourceLabel(step.source));
+        appendDefinition(details, "变更", followerTraceLeaseTransitionLabel(step.transition));
+        appendDefinition(details, "订阅动作", subscriptionActionLabel(step.action));
+        if (step.source_transport) {
+          appendDefinition(details, "传输", followerTraceTransportLabel(step.source_transport));
+        }
+        if (step.client_class) appendDefinition(details, "客户端类型", step.client_class);
+      } else {
+        if (step.event_kind === "lifecycle") appendDefinition(details, "阶段", step.stage ?? "未知");
+        appendDefinition(details, "结果", step.outcome ?? "未知");
+        // 没有 discriminator 的 schema v1 继续按原有 scope 形状渲染。
+        if (step.scope === "thread") appendDefinition(details, "范围", "关联 follower 事件");
+      }
+      if (step.loading) {
+        appendDefinition(details, "加载编号", step.loading.load_id);
+        appendDefinition(details, "计时来源", step.loading.clock === "browser" ? "浏览器（自选择 / 恢复起）" : "Desktop（自收到请求起）");
+        appendDefinition(details, "累计耗时", `${step.loading.elapsed_ms} ms`);
+      }
+      if (step.purpose) appendDefinition(details, "读取用途", step.purpose);
+      if (step.duration_ms !== undefined) appendDefinition(details, "耗时", `${step.duration_ms} ms`);
+      if (step.applied !== undefined) appendDefinition(details, "已应用", step.applied ? "是" : "否");
+      if (step.attempt !== undefined) appendDefinition(details, "尝试", step.attempt);
+      if (step.retry_delay_ms !== undefined) {
+        appendDefinition(details, "重试延迟", `${step.retry_delay_ms} ms`);
+      }
+      if (Array.isArray(step.lease_kinds)) {
+        appendDefinition(
+          details,
+          "关联租约",
+          step.lease_kinds.map((kind) => followerTraceLeaseKindLabel(kind)).join("、"),
+        );
+      }
+      item.append(details);
+      container.append(item);
+    }
+  }
+
+  /** 两端各自排序并作差；不能把报告抵达时间当作浏览器事件发生时间。 */
+  function renderLoadingTimeline(container, data) {
+    container.replaceChildren();
+    const steps = (data.list ?? []).filter(step => step.loading);
+    if (!steps.length) {
+      container.append(textElement("p", "暂无加载采样：旧客户端、尚未上报或记录不可用。", "text-body-secondary small"));
+      return;
+    }
+    const summary = document.createElement("div");
+    summary.className = "alert alert-secondary";
+    const browser = steps.filter(step => step.loading.clock === "browser").sort((a, b) => a.loading.elapsed_ms - b.loading.elapsed_ms || a.sequence - b.sequence);
+    const daemon = steps.filter(step => step.loading.clock === "daemon").sort((a, b) => a.loading.elapsed_ms - b.loading.elapsed_ms || a.sequence - b.sequence);
+    const end = browser.find(step => step.loading.phase === "content_presented");
+    summary.append(textElement("strong", end ? `选择 / 恢复到正文显示：${end.loading.elapsed_ms} ms` : "正文显示耗时：尚未取得完整采样"));
+    const intervals = [
+      [browser, "selected", "request_started", "点击后准备"],
+      [browser, "restored", "request_started", "恢复后准备"],
+      [browser, "request_started", "snapshot_received", "等待有效快照（含重试）"],
+      [browser, "snapshot_received", "history_ready", "等待历史正文"],
+      [browser, "history_ready", "content_presented", "正文呈现"],
+      [daemon, "open_received", "identity_ready", "Desktop 身份核验"],
+      [daemon, "identity_ready", "lease_acquired", "Desktop 取得租约"],
+      [daemon, "lease_acquired", "history_sent", "Desktop 准备并发送历史"],
+    ];
+    const measured = [];
+    for (const [entries, from, to, label] of intervals) {
+      const start = entries.find(step => step.loading.phase === from);
+      const finish = entries.find(step => step.loading.phase === to);
+      if (!start || !finish || finish.loading.elapsed_ms < start.loading.elapsed_ms) continue;
+      const ms = finish.loading.elapsed_ms - start.loading.elapsed_ms;
+      summary.append(textElement("div", `${label}：${ms} ms`, "small"));
+      if (entries === browser) measured.push({ label, ms });
+    }
+    const slowest = measured.sort((a, b) => b.ms - a.ms)[0];
+    if (slowest) summary.append(textElement("div", `当前已采集浏览器阶段中耗时最长：${slowest.label}（${slowest.ms} ms）`, "small mt-2"));
+    summary.append(textElement("div", "浏览器数据为客户端测量；两端时钟独立，不作跨端差值。首屏不包含图片全部解码完成，缺失采样不计为 0。", "small mt-2"));
+    container.append(summary);
+    container.append(textElement("p", `加载编号：${steps[0].loading.load_id}`, "small font-monospace text-break text-body-secondary"));
+    if (data.coverage?.status !== "complete") container.append(textElement("p", followerTraceCoverageLabel(data.coverage), "text-body-secondary small"));
+    for (const [label, entries] of [["浏览器时间线", browser], ["Desktop 时间线", daemon]]) {
+      container.append(textElement("h4", label, "h6 mt-3"));
+      const list = document.createElement("ol");
+      list.className = "list-group list-group-numbered";
+      let previous = null;
+      for (const step of entries) {
+        const item = document.createElement("li");
+        item.className = "list-group-item";
+        const ms = step.loading.elapsed_ms;
+        item.append(textElement("span", `${followerTraceStepLabel(step)} · ${ms} ms`, "fw-semibold"));
+        // 新样本显示来源端发生时间；旧样本只能展示账本记录时间，不能据耗时反推。
+        const occurredAt = step.loading.occurred_at_ms;
+        const timeLabel = occurredAt === undefined ? "记录时间（发生时间未采集）" : "发生时间";
+        item.append(textElement("div", `${timeLabel}：${formatLocalTime(occurredAt ?? step.occurred_at_ms, true)}`, "small text-body-secondary"));
+        if (previous !== null) item.append(textElement("div", `距上一阶段 ${ms - previous} ms`, "small text-body-secondary"));
+        previous = ms;
+        list.append(item);
+      }
+      if (!entries.length) list.append(textElement("li", "尚无此端采样", "list-group-item text-body-secondary"));
+      container.append(list);
+    }
+  }
+
+  async function loadFollowerTraceDetail(traceId, button, container, leaseId) {
+    button.disabled = true;
+    try {
+      const data = await getControlJson(
+        `/api/v1/control/follower-trace-detail?trace_id=${encodeURIComponent(traceId)}&page=1&page_size=50${leaseId ? `&lease_id=${encodeURIComponent(leaseId)}` : ""}`,
+      );
+      if (leaseId) renderLoadingTimeline(container, data);
+      else renderFollowerTraceSteps(container, data);
+      // 不完整结果允许用户按需重读，不引入自动轮询或重试。
+      button.hidden = !leaseId && data.coverage?.status === "complete";
+      if (!button.hidden) {
+        button.textContent = leaseId ? "刷新加载时间线" : "重新读取 Trace 步骤";
+        button.disabled = false;
+      }
+    } catch {
+      // 明细失败不替换已加载的列表，也不显示账本或底层错误内容。
+      container.replaceChildren(textElement(
+        "p",
+        "Trace 步骤读取失败，请手动刷新后重试。",
+        "list-group-item text-body-secondary",
+      ));
+      button.disabled = false;
+    }
+  }
+
+  async function clearFollowerTraces() {
+    if (!followerTracesEnabled || !clearFollowerTracesButton) return;
+    if (!window.confirm("将清空全部会话订阅 Trace，且无法恢复。是否继续？")) return;
+
+    // 先使此前读取失效，防止清空前的慢响应把旧账本重新渲染到页面。
+    controlRefreshGeneration += 1;
+    clearFollowerTracesButton.disabled = true;
+    try {
+      const response = await fetch("/api/v1/control/follower-traces/clear", {
+        cache: "no-store",
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: "{}",
+      });
+      const payload = await response.json();
+      if (payload.code !== 0 || payload.data?.cleared !== true) {
+        throw new Error("Control follower trace clear unavailable");
+      }
+      // daemon 已确认清空后立即替换局部视图；无关快照失败不能让旧 Trace 留在页面上。
+      renderFollowerTraces({
+        list: [],
+        coverage: { status: "complete", reasons: [] },
+      });
+      await refreshCurrentPage();
+      refreshStatus.textContent = "会话订阅 Trace 已清空。";
+    } catch {
+      // 不向页面展示 daemon 或文件系统错误，失败时保留已显示的 Trace 供继续排查。
+      refreshStatus.textContent = "Trace 清空失败，请稍后重试。";
+    } finally {
+      clearFollowerTracesButton.disabled = false;
+    }
+  }
+
+  function renderFollowerTraces(data) {
+    if (!followerTracesEnabled) return;
+    followerTracesList.replaceChildren();
+    followerTracesEmpty.hidden = data.list.length !== 0;
+    followerTracesEmpty.textContent = data.coverage?.status === "complete"
+      ? "最近 24 小时没有会话订阅 Trace。"
+      : "当前未读到会话订阅 Trace，记录可能不完整。";
+    followerTracesCoverage.textContent = followerTraceCoverageLabel(data.coverage);
+    for (const trace of data.list) {
+      const article = document.createElement("article");
+      article.className = "trace card card-body shadow-sm";
+      article.append(textElement("h3", trace.title || "未命名会话", "h5"));
+      article.append(textElement("p", trace.thread_id, "small font-monospace text-break text-body-secondary"));
+      const details = document.createElement("dl");
+      details.className = "row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3 mb-0";
+      const traceKind = followerTraceKindLabel(trace.trace_kind);
+      appendDefinition(details, "Trace 类型", traceKind);
+      if (trace.trace_kind === "legacy_open") {
+        appendDefinition(details, "来源", followerTraceTransportLabel(trace.source_transport));
+        appendDefinition(details, "客户端", trace.client_class ?? "unknown");
+      }
+      if (trace.initial_lease_kind) {
+        appendDefinition(details, "初始租约", followerTraceLeaseKindLabel(trace.initial_lease_kind));
+      }
+      appendDefinition(details, `最后${traceKind} 步骤`, followerTraceStepLabel(trace));
+      appendDefinition(details, "结果", trace.outcome ?? "未知");
+      appendDefinition(details, "总耗时", `${trace.duration_ms ?? 0} ms`);
+      article.append(details);
+      const button = textElement("button", `展开${traceKind} 步骤`, "btn btn-sm btn-outline-secondary mt-3");
+      button.setAttribute("type", "button");
+      const timeline = document.createElement("div");
+      timeline.className = "list-group list-group-flush mt-3";
+      button.addEventListener("click", () => {
+        void loadFollowerTraceDetail(trace.trace_id, button, timeline);
+      });
+      article.append(button, timeline);
+      followerTracesList.append(article);
+    }
+  }
+
+  function renderLogEntry(entry, kind) {
+    const article = document.createElement("article");
+    article.className = "log-entry card card-body shadow-sm";
+    article.append(textElement("h3", formatLocalTime(entry.ts), "h5"));
+
+    const definitions = document.createElement("dl");
+    definitions.className = "row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3 mb-0";
+    const fields = kind === "error"
+      ? ["failure_id", "component", "channel", "operation", "failure_kind"]
+      : ["component", "channel", "event", "outcome"];
+    for (const field of fields) appendDefinition(definitions, field, entry[field]);
+    article.append(definitions);
+    return article;
+  }
+
+  function renderLogs() {
+    const snapshot = logSnapshots[selectedLogKind];
+    errorLogTab.setAttribute("aria-selected", String(selectedLogKind === "error"));
+    debugLogTab.setAttribute("aria-selected", String(selectedLogKind === "debug"));
+    toggleBootstrapClass(errorLogTab, "active", selectedLogKind === "error");
+    toggleBootstrapClass(debugLogTab, "active", selectedLogKind === "debug");
+    logsList.replaceChildren();
+    const entries = snapshot?.list ?? [];
+    for (const entry of entries) logsList.append(renderLogEntry(entry, selectedLogKind));
+    logsEmpty.textContent = selectedLogKind === "error"
+      ? "当前没有错误日志。"
+      : "当前没有调试日志。";
+    logsEmpty.hidden = entries.length !== 0;
+    loadMoreLogsButton.hidden = !snapshot || entries.length >= snapshot.total;
+  }
+
+  const turnAuditStatusLabels = {
+    sse_received: "Bridge 已接收",
+    send_started: "开始发送",
+    server_accepted: "Server 已接受",
+    server_registered: "Server 已接收",
+    send_failed: "发送失败",
+    deadline_expired: "投递期限已到",
+    dropped_busy: "并发繁忙已丢弃",
+    skipped_duplicate: "重复通知已跳过",
+    bridge_not_observed: "未观察 Bridge",
+    awaiting_bridge: "等待 Bridge",
+    unverifiable: "缺少投递证据",
+    not_required: "无需推送",
+  };
+  const turnAuditStageLabels = {
+    source_observed: "已观察源事件",
+    terminal_observed: "已观察终态",
+    ...turnAuditStatusLabels,
+  };
+  const turnAuditStagePhases = new Set([
+    "terminal_observed",
+    "source_observed",
+    "sse_received",
+    "send_started",
+    "server_accepted",
+    "server_registered",
+    "send_failed",
+    "deadline_expired",
+    "dropped_busy",
+    "skipped_duplicate",
+  ]);
+  const turnAuditStageFailureReasons = new Set([
+    "network",
+    "invalid_response",
+    "http_error",
+    "business_error",
+    "unknown",
+  ]);
+  const turnAuditObservationReasons = {
+    awaiting_authoritative_read: "等待终态详情核验",
+    read_failed: "终态详情读取失败",
+    live_fence_closed: "通知事件发布尚未就绪",
+  };
+  const turnAuditStageIdPattern = /^[A-Za-z0-9][A-Za-z0-9._:-]{0,255}$/u;
+  const isAttentionSession = (session) => Number.isSafeInteger(session.attention_count)
+    && session.attention_count > 0;
+
+  function turnAuditSummaryValue(summary, key) {
+    return summary?.[key] ?? 0;
+  }
+
+  function isValidTurnAuditStage(stage) {
+    if (!stage || typeof stage !== "object") return false;
+    const allowedKeys = new Set([
+      "phase",
+      "occurred_at",
+      "source_event_id",
+      "delivery_id",
+      "push_id",
+      "reason",
+      "duration_ms",
+      "http_status",
+      "server_code",
+    ]);
+    if (Object.keys(stage).some((key) => !allowedKeys.has(key))) return false;
+    const hasSafeId = (value) => value === undefined
+      || (typeof value === "string" && turnAuditStageIdPattern.test(value));
+    return stage
+      && typeof stage === "object"
+      && turnAuditStagePhases.has(stage.phase)
+      && Number.isSafeInteger(stage.occurred_at)
+      && stage.occurred_at >= 0
+      && hasSafeId(stage.source_event_id)
+      && hasSafeId(stage.delivery_id)
+      && hasSafeId(stage.push_id)
+      && (stage.reason === undefined
+        || (stage.phase === "send_failed" && turnAuditStageFailureReasons.has(stage.reason))
+        || (stage.phase === "terminal_observed" && Object.hasOwn(turnAuditObservationReasons, stage.reason)))
+      && (stage.duration_ms === undefined
+        || (Number.isSafeInteger(stage.duration_ms) && stage.duration_ms >= 0))
+      && (stage.http_status === undefined
+        || (stage.phase === "send_failed"
+          && Number.isSafeInteger(stage.http_status)
+          && stage.http_status >= 100
+          && stage.http_status <= 599))
+      && (stage.server_code === undefined
+        || (stage.phase === "send_failed"
+          && Number.isSafeInteger(stage.server_code)
+          && stage.server_code >= 0
+          && stage.server_code <= 999999));
+  }
+
+  function turnAuditFailureContext(stage) {
+    if (stage.phase === "terminal_observed") return turnAuditObservationReasons[stage.reason] ?? null;
+    if (stage.phase !== "send_failed") return null;
+    if (stage.reason === "network") return "Push Server 网络请求失败";
+    if (stage.reason === "invalid_response") {
+      return stage.http_status === undefined
+        ? "Push Server 响应无效"
+        : `Push Server 响应无效（HTTP ${stage.http_status}）`;
+    }
+    if (stage.reason === "business_error") {
+      const details = [
+        ...(stage.http_status === undefined ? [] : [`HTTP ${stage.http_status}`]),
+        ...(stage.server_code === undefined ? [] : [`服务码 ${stage.server_code}`]),
+      ];
+      return details.length === 0 ? "Push Server 业务拒绝" : `Push Server 业务拒绝（${details.join("，")}）`;
+    }
+    if (stage.reason === "http_error" && stage.http_status !== undefined) {
+      const response = `Push Server 返回 HTTP ${stage.http_status}`;
+      return stage.server_code === undefined ? response : `${response}（服务码 ${stage.server_code}）`;
+    }
+    if (stage.server_code !== undefined) return `Push Server 业务拒绝（服务码 ${stage.server_code}）`;
+    if (stage.reason === "http_error") return "Push Server 返回 HTTP 错误";
+    return stage.reason === "unknown" ? "Push Server 请求失败（原因未知）" : null;
+  }
+
+  function turnAuditDuration(durationMs) {
+    if (!Number.isSafeInteger(durationMs) || durationMs < 0) return null;
+    if (durationMs < 1000) return `耗时 ${durationMs} ms`;
+    return `耗时 ${Math.round(durationMs / 10) / 100} 秒`;
+  }
+
+  function turnAuditStageText(stage) {
+    const parts = [turnAuditStageLabels[stage.phase] ?? "阶段不可得"];
+    const failureContext = turnAuditFailureContext(stage);
+    const duration = turnAuditDuration(stage.duration_ms);
+    if (failureContext) parts.push(failureContext);
+    if (duration) parts.push(duration);
+    return parts.join(" · ");
+  }
+
+  function renderTurnAuditSummary(summary) {
+    const labels = {
+      terminal: "终态",
+      push_required: "应推送",
+      not_required: "无需推送",
+      server_accepted: "Server 已接受",
+    server_registered: "Server 已接收",
+      bridge_not_observed: "未观察 Bridge",
+      send_failed: "发送失败",
+      awaiting_bridge: "等待 Bridge",
+      unverifiable: "缺少投递证据",
+    };
+    for (const [key, label] of Object.entries(labels)) {
+      const button = document.getElementById(`turn-audit-summary-${key.replaceAll("_", "-")}`);
+      if (button) button.textContent = `${label} ${turnAuditSummaryValue(summary, key)}`;
+    }
+  }
+
+  function renderTurnAuditCoverage(coverage) {
+    if (!turnAuditCoverage) return;
+    const status = coverage?.status === "complete" ? "完整" : "部分覆盖，证据可能不可得";
+    const reasons = Array.isArray(coverage?.reasons) && coverage.reasons.length > 0
+      ? `（${coverage.reasons.join("、")}）`
+      : "";
+    turnAuditCoverage.textContent = `证据覆盖：${status}${reasons}`;
+    turnAuditCoverage.className = coverage?.status === "complete"
+      ? "alert alert-success"
+      : "alert alert-warning";
+  }
+
+  function renderTurnAuditDetail(detail) {
+    const section = document.createElement("section");
+    section.className = "turn-audit-detail border-top pt-3 mt-3";
+    section.append(textElement("h4", "Turn 明细", "h6"));
+
+    const definitions = document.createElement("dl");
+    definitions.className = "row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3 mb-0";
+    appendDefinition(definitions, "结果", detail.outcome ?? "内容不可得");
+    appendDefinition(definitions, "最新状态", turnAuditStatusLabels[detail.latest_status] ?? detail.latest_status ?? "内容不可得");
+    appendDefinition(definitions, "终态时间", formatLocalTime(detail.terminal_at));
+    section.append(definitions);
+
+    const timeline = Array.isArray(detail.stages)
+      && detail.stages.length > 0
+      && detail.stages.every(isValidTurnAuditStage)
+      ? detail.stages
+      : null;
+    if (timeline) {
+      const stages = document.createElement("ol");
+      stages.className = "audit-timeline list-group list-group-numbered my-3";
+      for (const stage of timeline) {
+        const item = document.createElement("li");
+        item.className = "list-group-item d-flex flex-column flex-sm-row justify-content-between gap-2";
+        item.append(
+          textElement("span", turnAuditStageText(stage), "badge text-bg-primary text-wrap text-start"),
+          textElement("time", formatLocalTime(stage.occurred_at), "small text-body-secondary"),
+        );
+        stages.append(item);
+      }
+      section.append(stages);
+    }
+
+    const userText = detail.user_text ?? "用户消息不可得";
+    const finalText = detail.final_text ?? "最终回答不可得";
+    section.append(
+      textElement("h4", "用户消息", "h6 mt-3"),
+      textElement("pre", userText, "bg-body-tertiary border rounded p-3 text-break mb-0"),
+    );
+    if (detail.user_text_truncated === true) {
+      section.append(textElement("p", "用户消息已截断", "small text-warning mt-2 mb-0"));
+    }
+    section.append(
+      textElement("h4", "最终回答", "h6 mt-3"),
+      textElement("pre", finalText, "bg-body-tertiary border rounded p-3 text-break mb-0"),
+    );
+    if (detail.final_text_truncated === true) {
+      section.append(textElement("p", "最终回答已截断", "small text-warning mt-2 mb-0"));
+    }
+    section.append(
+      textElement("h4", "失败摘要", "h6 mt-3"),
+      textElement("p", detail.failure_summary ?? "无固定失败摘要", "text-danger mb-0"),
+    );
+    return section;
+  }
+
+  const triggerLabels = { pending_input: "等待输入", pending_approval: "等待授权", turn_completed: "回答完成", turn_failed: "执行失败" };
+
+  function renderTriggerList() {
+    const entries = triggerSnapshot?.list ?? [];
+    turnAuditList.replaceChildren();
+    turnAuditEmpty.hidden = entries.length !== 0;
+    turnAuditEmpty.textContent = triggerBusy ? "正在读取推送触发事件…" : triggerError ? "读取失败，请点击刷新当前页重试。" : triggerStatus !== "all" || triggerType !== "all" ? "最近 24 小时没有符合筛选条件的事件，可切换全部或调整触发类型。" : "最近 24 小时没有可读取的推送触发事件。";
+    if (turnAuditEventCount) turnAuditEventCount.textContent = triggerSnapshot ? `已显示 ${entries.length} / ${triggerSnapshot.total} 次触发 · 最新在前${triggerExhausted && entries.length < triggerSnapshot.total ? " · 列表期间有变化，请刷新查看最新事件" : ""}` : "";
+    if (turnAuditHistoryNote) turnAuditHistoryNote.hidden = !triggerSnapshot?.coverage?.reasons?.includes("historical_gap");
+    for (const event of entries) {
+      const article = document.createElement("article");
+      article.className = "border rounded p-3 text-break";
+      const header = document.createElement("div");
+      header.className = "d-flex flex-column flex-sm-row justify-content-between gap-2 mb-2";
+      header.append(textElement("h3", triggerLabels[event.event_type] ?? "推送触发", "h6 mb-0"),
+        textElement("time", formatLocalTime(event.triggered_at), "small text-body-secondary"));
+      article.append(header, textElement("p", event.title || "未命名会话", "fw-semibold mb-2"));
+      const summary = event.summary ?? "消息摘要不可得";
+      article.append(textElement("p", Array.from(summary).slice(0, 180).join("") + (Array.from(summary).length > 180 ? "…" : ""), "mb-2"));
+      article.append(textElement("p", turnAuditStatusLabels[event.latest_status] ?? "状态不可得", "small fw-semibold mb-2"));
+      // 异常类别独立显示，不能把执行失败误写成推送失败。
+      const failurePhases = ["send_failed", "deadline_expired", "dropped_busy"];
+      const acceptedAt = event.stages.reduce((last, stage) => stage.phase === "server_accepted" ? Math.max(last, stage.occurred_at) : last, -1);
+      const recovered = event.latest_status === "server_accepted" && event.stages.some(stage => failurePhases.includes(stage.phase) && stage.occurred_at <= acceptedAt);
+      if (event.event_type === "turn_failed") article.append(textElement("p", "执行异常", "small text-danger mb-2"));
+      if (recovered) article.append(textElement("p", "重试后恢复", "small text-warning mb-2"));
+      else if (failurePhases.includes(event.latest_status) || event.latest_status === "bridge_not_observed") {
+        article.append(textElement("p", "推送异常 · 请展开投递证据排查", "small text-danger mb-2"));
+      }
+      const details = document.createElement("details");
+      details.append(textElement("summary", "查看投递证据", "text-primary"));
+      const ids = document.createElement("dl"); ids.className = "small mt-3 mb-2";
+      appendDefinition(ids, "会话 ID", event.thread_id);
+      appendDefinition(ids, "Turn ID", event.turn_id ?? "不可得");
+      appendDefinition(ids, "触发事件 ID", event.source_event_id);
+      details.append(ids, textElement("pre", summary, "text-break text-wrap bg-body-tertiary p-3 rounded"));
+      if (event.summary_truncated) details.append(textElement("p", "摘要已截断", "small text-body-secondary"));
+      const stages = document.createElement("ol"); stages.className = "list-group list-group-numbered";
+      for (const stage of event.stages ?? []) {
+        const item = document.createElement("li"); item.className = "list-group-item small text-break";
+        item.append(textElement("span", `${turnAuditStageText(stage)} · ${formatLocalTime(stage.occurred_at)}`));
+        if (stage.delivery_id) item.append(textElement("div", `投递 ID：${stage.delivery_id}`, "text-body-secondary"));
+        stages.append(item);
+      }
+      details.append(stages); article.append(details); turnAuditList.append(article);
+    }
+    if (turnAuditLoadMoreSessionsButton) {
+      turnAuditLoadMoreSessionsButton.textContent = "加载更多触发事件";
+      turnAuditLoadMoreSessionsButton.hidden = !triggerSnapshot || triggerExhausted || entries.length >= triggerSnapshot.total;
+      turnAuditLoadMoreSessionsButton.disabled = triggerBusy;
+    }
+    if (triggerSnapshot) renderTurnAuditCoverage(triggerSnapshot.coverage);
+  }
+
+  async function loadTriggerEvents(more = false) {
+    if (more && (triggerBusy || triggerExhausted || !triggerSnapshot || triggerSnapshot.list.length >= triggerSnapshot.total)) return;
+    const generation = ++triggerGeneration;
+    const snapshot = triggerSnapshot;
+    const page = more ? snapshot.page + 1 : 1;
+    triggerBusy = true; triggerError = false; renderTurnAuditList();
+    try {
+      const query = `${triggerStatus === "all" ? "" : `&status=${triggerStatus}`}${triggerType === "all" ? "" : `&event_type=${triggerType}`}`;
+      const data = await getControlJson(`/api/v1/control/turn-notifications/events?page=${page}&page_size=50${query}`);
+      if (generation !== triggerGeneration) return;
+      if (!Array.isArray(data.list) || data.page !== page || data.page_size !== 50 || !Number.isSafeInteger(data.total)
+        || data.total < data.list.length) throw new Error("Trigger page unavailable");
+      // 刷新与切换后旧请求失效；分页合并按事件身份去重，不按 Turn 去重。
+      const combined = more ? [...snapshot.list, ...data.list] : data.list;
+      const unique = new Map(combined.map(event => [`${event.thread_id}\0${event.source_event_id}`, event]));
+      triggerSnapshot = { ...data, list: [...unique.values()] };
+      // offset 分页期间新增头部事件会使去重后的数量小于 total；到达响应末页即停止。
+      triggerExhausted = more ? data.list.length === 0 || page * data.page_size >= data.total : data.list.length >= data.total;
+    } catch {
+      if (generation === triggerGeneration) {
+        triggerError = true;
+        refreshStatus.textContent = "推送触发事件读取失败，请刷新重试。";
+      }
+    } finally {
+      if (generation === triggerGeneration) { triggerBusy = false; renderTurnAuditList(); }
+    }
+  }
+
+  function selectTurnAuditView(view) {
+    if (turnAuditView === view) return;
+    turnAuditView = view;
+    // 失效另一视图的在途请求，防止迟到响应改变当前内容或状态提示。
+    triggerGeneration++; triggerBusy = false;
+    controlRefreshGeneration++;
+    if (!daemonActionBusy) refreshButton.disabled = false;
+    for (const [threadId, generation] of turnAuditDetailGenerations) turnAuditDetailGenerations.set(threadId, generation + 1);
+    turnAuditDetailRequests.clear();
+    turnAuditListGeneration++; turnAuditSessionPageRequest = null; turnAuditRefreshPending = false;
+    refreshStatus.textContent = "";
+    renderTurnAuditList();
+    if (view === "events" && !triggerSnapshot) void loadTriggerEvents();
+    if (view === "sessions" && !turnAuditSnapshot) void refreshTurnAuditPage();
+  }
+
+  function renderTurnAuditList() {
+    if (!turnAuditAvailable || !turnAuditList || !turnAuditEmpty) return;
+    for (const [button, view] of [[turnAuditEventsButton, "events"], [turnAuditSessionsButton, "sessions"]]) {
+      if (button) { button.setAttribute("aria-pressed", String(turnAuditView === view)); button.className = turnAuditView === view ? "btn btn-primary" : "btn btn-outline-primary"; }
+    }
+    if (triggerFilters) triggerFilters.hidden = turnAuditView !== "events";
+    for (const status of triggerFilterNames) {
+      const button = document.getElementById(`trigger-filter-${status}`);
+      if (button) { button.setAttribute("aria-pressed", String(triggerStatus === status)); button.className = triggerStatus === status ? "btn btn-sm btn-primary" : "btn btn-sm btn-outline-primary"; }
+    }
+    if (turnAuditView === "events") { renderTriggerList(); return; }
+    if (turnAuditEventCount) turnAuditEventCount.textContent = "";
+    if (turnAuditHistoryNote) turnAuditHistoryNote.hidden = true;
+    if (turnAuditLoadMoreSessionsButton) turnAuditLoadMoreSessionsButton.textContent = "加载更多会话";
+    if (turnAuditSnapshot) renderTurnAuditCoverage(turnAuditSnapshot.coverage);
+    turnAuditEmpty.textContent = "当前没有 Turn 审计会话。";
+    const entries = turnAuditSnapshot?.list ?? [];
+    turnAuditList.replaceChildren();
+    turnAuditEmpty.hidden = entries.length !== 0;
+    for (const session of entries) {
+      const article = document.createElement("article");
+      article.className = isAttentionSession(session)
+        ? "turn-audit-entry attention card card-body shadow-sm border-warning"
+        : "turn-audit-entry card card-body shadow-sm";
+      const button = textElement(
+        "button",
+        `${session.title || "未命名会话"} · ${session.thread_id}`,
+        "turn-audit-session btn btn-link p-0 text-start fw-semibold",
+      );
+      button.setAttribute("id", `turn-audit-session-${session.thread_id}`);
+      button.setAttribute("type", "button");
+      button.addEventListener("click", () => {
+        void loadTurnAuditDetail(session);
+      });
+      article.append(button);
+
+      const metadata = document.createElement("dl");
+      metadata.className = "row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-3 mt-3 mb-0";
+      appendDefinition(metadata, "Turn 数", session.turn_count ?? "内容不可得");
+      appendDefinition(metadata, "应推送", session.push_required ?? "内容不可得");
+      appendDefinition(metadata, "Server 已接受", session.server_accepted ?? "内容不可得");
+      appendDefinition(metadata, "需关注", session.attention_count ?? "内容不可得");
+      appendDefinition(metadata, "最近终态时间", formatLocalTime(session.latest_terminal_at));
+      article.append(metadata);
+      const detailState = turnAuditDetails.get(session.thread_id);
+      if (detailState) {
+        for (const detail of detailState.list) article.append(renderTurnAuditDetail(detail));
+        if (detailState.list.length < detailState.total) {
+          const more = textElement("button", "加载更多 Turn", "btn btn-sm btn-outline-secondary mt-3");
+          more.setAttribute("id", `turn-audit-more-${session.thread_id}`);
+          more.setAttribute("type", "button");
+          more.addEventListener("click", () => {
+            void loadTurnAuditDetail(session, detailState.page + 1);
+          });
+          article.append(more);
+        }
+      }
+      turnAuditList.append(article);
+    }
+    if (turnAuditLoadMoreSessionsButton) {
+      turnAuditLoadMoreSessionsButton.hidden = !turnAuditSnapshot
+        || entries.length >= turnAuditSnapshot.total;
+      turnAuditLoadMoreSessionsButton.disabled = turnAuditSessionPageRequest !== null
+        || turnAuditRefreshPending;
+    }
+  }
+
+  async function loadMoreTurnAuditSessions() {
+    const snapshot = turnAuditSnapshot;
+    if (
+      !turnAuditAvailable
+      || !snapshot
+      || snapshot.list.length >= snapshot.total
+      || turnAuditSessionPageRequest
+      || turnAuditRefreshPending
+    ) return;
+
+    const request = { snapshot, generation: turnAuditListGeneration };
+    const nextPage = snapshot.page + 1;
+    turnAuditSessionPageRequest = request;
+    renderTurnAuditList();
+    try {
+      const data = await getControlJson(
+        `/api/v1/control/turn-notifications?page=${nextPage}&page_size=50`,
+      );
+      if (turnAuditSessionPageRequest !== request || turnAuditListGeneration !== request.generation) return;
+      if (
+        !Array.isArray(data.list)
+        || data.page !== nextPage
+        || data.page_size !== 50
+        || !Number.isSafeInteger(data.total)
+        || data.total < snapshot.list.length + data.list.length
+      ) {
+        throw new Error("Turn audit session page unavailable");
+      }
+      turnAuditSnapshot = { ...data, list: [...snapshot.list, ...data.list] };
+      renderTurnAuditCoverage(data.coverage);
+      renderTurnAuditSummary(data.summary);
+    } catch {
+      // 补页失败不替换当前已读取的会话页，用户可手动再次尝试。
+      if (turnAuditSessionPageRequest === request && turnAuditListGeneration === request.generation) refreshStatus.textContent = "Turn 审计会话读取失败，请稍后重试。";
+    } finally {
+      if (turnAuditSessionPageRequest === request) {
+        turnAuditSessionPageRequest = null;
+        renderTurnAuditList();
+      }
+    }
+  }
+
+  async function loadTurnAuditDetail(session, page = 1) {
+    if (!turnAuditAvailable) return;
+    const threadId = session.thread_id;
+    const current = turnAuditDetails.get(threadId);
+    // 首次展开只读第一页；后续页必须由用户显式点击“加载更多”触发。
+    if ((page === 1 && current) || (current && page <= current.page) || turnAuditDetailRequests.has(threadId)) return;
+    const generation = (turnAuditDetailGenerations.get(threadId) ?? 0) + 1;
+    turnAuditDetailGenerations.set(threadId, generation);
+    turnAuditDetailRequests.add(threadId);
+    try {
+      const detail = await getControlJson(
+        `/api/v1/control/turn-notifications/detail?thread_id=${encodeURIComponent(threadId)}&page=${page}&page_size=50`,
+      );
+      if (turnAuditDetailGenerations.get(threadId) !== generation) return;
+      if (!Array.isArray(detail.list) || detail.page !== page || detail.page_size !== 50
+        || !Number.isSafeInteger(detail.total) || detail.total < detail.list.length) {
+        throw new Error("Turn detail unavailable");
+      }
+      const list = page === 1 ? detail.list : [...(current?.list ?? []), ...detail.list];
+      turnAuditDetails.set(threadId, { list, page, total: detail.total });
+      renderTurnAuditList();
+    } catch {
+      // 明细失败只影响当前会话，保留已成功的列表快照和其它明细。
+      if (turnAuditDetailGenerations.get(threadId) === generation) refreshStatus.textContent = "Turn 明细读取失败，请稍后重试。";
+    } finally {
+      if (turnAuditDetailGenerations.get(threadId) === generation) turnAuditDetailRequests.delete(threadId);
+    }
+  }
+
+  async function refreshTurnAuditPage() {
+    if (!turnAuditAvailable) return;
+    // 时间列表与旧终态汇总独立读取，历史核对慢或失败不能阻断事件展示。
+    const eventLoad = turnAuditView === "events" ? loadTriggerEvents() : Promise.resolve();
+    const refreshGeneration = controlRefreshGeneration;
+    const turnAuditGeneration = ++turnAuditListGeneration;
+    // 刷新始终以第 1 页为新的审计会话基线，旧补页响应不得回写。
+    turnAuditSessionPageRequest = null;
+    // 刷新完成前禁止补页，避免旧快照与新一代响应交错覆盖。
+    turnAuditRefreshPending = true;
+    renderTurnAuditList();
+    try {
+      const turnAuditData = await getControlJson("/api/v1/control/turn-notifications?page=1&page_size=50");
+      if (
+        controlRefreshGeneration !== refreshGeneration
+        || turnAuditGeneration !== turnAuditListGeneration
+      ) return;
+      // 仅当前成功快照才失效明细与在途请求，失败时保留最近成功内容。
+      for (const [threadId, generation] of turnAuditDetailGenerations) {
+        turnAuditDetailGenerations.set(threadId, generation + 1);
+      }
+      turnAuditDetails.clear();
+      turnAuditSnapshot = turnAuditData;
+      if (turnAuditView === "sessions") renderTurnAuditCoverage(turnAuditData.coverage);
+      renderTurnAuditSummary(turnAuditData.summary);
+      renderTurnAuditList();
+    } finally {
+      await eventLoad;
+      if (turnAuditGeneration === turnAuditListGeneration) {
+        // 刷新失败也要恢复旧快照的补页入口；只有当前代次可以解除禁用。
+        turnAuditRefreshPending = false;
+        renderTurnAuditList();
+      }
+    }
+  }
+
+  async function refreshLogsPage(kind) {
+    const logRequestGeneration = beginLogRequest(kind);
+    const logsData = await getControlJson(`/api/v1/control/logs?kind=${kind}&page=1&page_size=50`);
+    if (!isCurrentLogRequest(kind, logRequestGeneration)) return;
+    logSnapshots[kind] = logsData;
+    // 用户切换 kind 后，旧刷新只更新自身缓存，不触碰当前可见日志。
+    if (selectedLogKind === kind && intendedLogKind === kind) renderLogs();
+  }
+
+  const CONNECTION_STATE_LABELS = { probe: "探测中", active: "可用", draining: "正在释放" };
+  let connectionsBusy = false;
+  let connectionsTimer = null;
+  let connectionsPageClosed = false;
+
+  function renderConnections(data) {
+    connectionsCurrent.replaceChildren();
+    connectionsEmpty.hidden = true;
+    if (data.availability !== "available") {
+      connectionsStatus.textContent = "daemon 未运行，当前连接状态不可读取。";
+      return;
+    }
+    const groups = new Map();
+    const groupFor = (row) => {
+      if (!groups.has(row.binding_ref)) groups.set(row.binding_ref, {
+        name: row.client_name === "unknown" ? "名称不可用" : row.client_name,
+        ref: row.binding_ref, sessions: [], pending: { direct: 0, relay: 0 },
+      });
+      return groups.get(row.binding_ref);
+    };
+    for (const row of data.list) groupFor(row).sessions.push(row);
+    for (const row of data.pending) groupFor(row).pending[row.transport] += row.count;
+    connectionsEmpty.hidden = groups.size !== 0;
+    for (const group of [...groups.values()].sort((a, b) => a.name.localeCompare(b.name) || a.ref.localeCompare(b.ref))) {
+      const section = document.createElement("section");
+      section.className = "card shadow-sm";
+      const body = document.createElement("div");
+      body.className = "card-body";
+      body.append(textElement("h3", group.name, "h5 mb-1"),
+        textElement("p", `设备引用 ${group.ref}`, "small font-monospace text-body-secondary text-break mb-3"));
+      const quota = document.createElement("p");
+      quota.className = "mb-3";
+      const occupied = group.sessions.filter(row => row.occupies_slot).length;
+      const direct = group.sessions.filter(row => row.transport === "direct" && row.occupies_slot).length;
+      const relay = group.sessions.filter(row => row.transport === "relay" && row.occupies_slot).length;
+      quota.textContent = `共享业务额度 ${occupied} / ${data.limits.shared} · Direct ${direct} · Relay ${relay}`;
+      for (const transport of ["direct", "relay"]) {
+        if (group.pending[transport]) quota.append(textElement("span",
+          ` · ${transport === "direct" ? "Direct" : "Relay"} 创建预约 ${group.pending[transport]}`));
+      }
+      body.append(quota);
+      if (group.sessions.length) {
+        const scroll = document.createElement("div");
+        scroll.className = "table-responsive";
+        const table = document.createElement("table");
+        table.className = "table table-sm align-middle mb-0";
+        const caption = textElement("caption", `${group.name} 的当前连接会话`, "visually-hidden");
+        const head = document.createElement("thead");
+        const header = document.createElement("tr");
+        for (const label of ["通道 / 会话引用", "状态", "额度", "建立时间", "到期时间", "在途 / 订阅"]) {
+          const cell = textElement("th", label, "text-nowrap");
+          cell.setAttribute("scope", "col");
+          header.append(cell);
+        }
+        head.append(header);
+        const rows = document.createElement("tbody");
+        for (const row of group.sessions.sort((a, b) => a.transport.localeCompare(b.transport) || a.created_at_ms - b.created_at_ms)) {
+          const tr = document.createElement("tr");
+          const identity = document.createElement("td");
+          identity.append(textElement("div", row.transport === "direct" ? "Direct" : "Relay"),
+            textElement("div", row.session_ref, "small font-monospace text-nowrap"));
+          const state = document.createElement("td");
+          state.append(textElement("span", CONNECTION_STATE_LABELS[row.state],
+            `badge ${row.state === "draining" ? "text-bg-warning" : row.state === "active" ? "text-bg-success" : "text-bg-secondary"}`));
+          tr.append(identity, state, textElement("td", row.occupies_slot ? "占用" : "不占用", "text-nowrap"),
+            textElement("td", formatLocalTime(row.created_at_ms), "small text-nowrap"),
+            textElement("td", formatLocalTime(row.expires_at_ms), "small text-nowrap"),
+            textElement("td", `${row.in_flight} / ${row.subscriptions}`, "font-monospace text-nowrap"));
+          rows.append(tr);
+        }
+        table.append(caption, head, rows);
+        scroll.append(table);
+        body.append(scroll);
+      }
+      section.append(body);
+      connectionsCurrent.append(section);
+    }
+    connectionsStatus.textContent = `快照时间：${formatLocalTime(data.captured_at_ms)} · ${data.list.length} 条会话 · 每 3 秒刷新`;
+  }
+
+  function stopConnectionsRefresh() {
+    if (connectionsTimer !== null) clearTimeout(connectionsTimer);
+    connectionsTimer = null;
+  }
+
+  function scheduleConnectionsRefresh() {
+    stopConnectionsRefresh();
+    if (!connectionsPageClosed && !document.hidden) {
+      // 在读取完成后再预约下一轮；慢请求与手动刷新不会产生并发查询。
+      connectionsTimer = setTimeout(() => { connectionsTimer = null; void refreshConnections(); }, 3_000);
+    }
+  }
+
+  async function refreshConnections() {
+    if (connectionsBusy || connectionsPageClosed || document.hidden) return;
+    stopConnectionsRefresh();
+    connectionsBusy = true;
+    refreshButton.disabled = true;
+    refreshStatus.textContent = "正在刷新…";
+    try {
+      const data = await getControlJson("/api/v1/control/connections");
+      if (connectionsPageClosed) return;
+      renderConnections(data);
+      refreshStatus.textContent = "已刷新。";
+    } catch {
+      if (connectionsPageClosed) return;
+      connectionsStatus.textContent = "读取失败，保留上次快照，数据可能已过时。可手动刷新重试。";
+      refreshStatus.textContent = "刷新失败，请稍后重试。";
+    } finally {
+      connectionsBusy = false;
+      refreshButton.disabled = false;
+      if (!connectionsPageClosed) scheduleConnectionsRefresh();
+    }
+  }
+
+  async function refreshCurrentPage() {
+    if (currentPage.key === "connections") return refreshConnections();
+    controlRefreshGeneration += 1;
+    const refreshGeneration = controlRefreshGeneration;
+    refreshButton.disabled = true;
+    refreshStatus.textContent = "正在刷新…";
+    try {
+      if (currentPage.key === "overview") {
+        const metricsRange = selectedDaemonMetricsRange;
+        daemonMetricsRangeGeneration += 1;
+        const [data, metricsCurrent, metricsHistory] = await Promise.all([
+          getControlJson("/api/v1/control/overview"),
+          getControlJson("/api/v1/control/daemon-metrics/current").catch(() => null),
+          getControlJson(`/api/v1/control/daemon-metrics/history?range=${metricsRange}`).catch(() => null),
+        ]);
+        if (controlRefreshGeneration !== refreshGeneration) return;
+        renderOverview(data);
+        if (metricsCurrent && metricsHistory) renderDaemonMetrics(metricsCurrent, metricsHistory);
+        else renderDaemonMetricsUnavailable();
+      }
+      if (currentPage.key === "sessions") {
+        const data = await getControlJson("/api/v1/control/followers?page=1&page_size=50");
+        if (controlRefreshGeneration !== refreshGeneration) return;
+        renderFollowers(data);
+      }
+      if (currentPage.key === "subscriptions") {
+        const data = await getControlJson("/api/v1/control/follower-traces?page=1&page_size=50");
+        if (controlRefreshGeneration !== refreshGeneration) return;
+        renderFollowerTraces(data);
+      }
+      if (currentPage.key === "turn-audit") await refreshTurnAuditPage();
+
+      if (currentPage.key === "logs") await refreshLogsPage(selectedLogKind);
+      if (controlRefreshGeneration === refreshGeneration) refreshStatus.textContent = currentPage.key === "turn-audit" && turnAuditView === "events" && triggerError
+        ? "推送触发事件读取失败，请刷新重试。" : "已刷新。";
+    } catch {
+      if (controlRefreshGeneration === refreshGeneration) refreshStatus.textContent = "刷新失败，请稍后重试。";
+    } finally {
+      if (controlRefreshGeneration === refreshGeneration) refreshButton.disabled = false;
+    }
+  }
+
+  async function selectLogKind(kind) {
+    intendedLogKind = kind;
+    if (kind === selectedLogKind) {
+      refreshStatus.textContent = "";
+      return;
+    }
+    if (logSnapshots[kind]) {
+      selectedLogKind = kind;
+      renderLogs();
+      refreshStatus.textContent = "";
+      return;
+    }
+
+    const logRequestGeneration = beginLogRequest(kind);
+    refreshStatus.textContent = "正在读取日志…";
+    try {
+      const logsData = await getControlJson(
+        `/api/v1/control/logs?kind=${kind}&page=1&page_size=50`,
+      );
+      if (!isCurrentLogRequest(kind, logRequestGeneration)) return;
+      logSnapshots[kind] = logsData;
+      if (intendedLogKind !== kind) return;
+      // 首次读取成功后才切换视图，失败时保留最近一次成功日志。
+      selectedLogKind = kind;
+      renderLogs();
+      refreshStatus.textContent = "日志已更新。";
+    } catch {
+      if (
+        isCurrentLogRequest(kind, logRequestGeneration)
+        && intendedLogKind === kind
+      ) {
+        refreshStatus.textContent = "日志读取失败，请稍后重试。";
+      }
+    }
+  }
+
+  async function loadMoreLogs() {
+    const kind = selectedLogKind;
+    const previous = logSnapshots[kind];
+    if (!previous || previous.list.length >= previous.total) return;
+
+    const logRequestGeneration = beginLogRequest(kind);
+    loadMoreLogsButton.disabled = true;
+    try {
+      const next = await getControlJson(
+        `/api/v1/control/logs?kind=${kind}&page=${previous.page + 1}&page_size=50`,
+      );
+      if (!isCurrentLogRequest(kind, logRequestGeneration)) return;
+      logSnapshots[kind] = {
+        ...next,
+        list: [...previous.list, ...next.list],
+      };
+      if (selectedLogKind === kind) renderLogs();
+    } catch {
+      if (
+        isCurrentLogRequest(kind, logRequestGeneration)
+        && selectedLogKind === kind
+      ) {
+        refreshStatus.textContent = "日志读取失败，请稍后重试。";
+      }
+    } finally {
+      loadMoreLogsButton.disabled = false;
+    }
+  }
+
+  function updateDaemonActionSubmitState() {
+    if (!daemonActionSubmitButton || !daemonActionConfirmationInput) return;
+    const confirmation = daemonActionConfirmations[selectedDaemonAction];
+    daemonActionSubmitButton.disabled = daemonActionBusy
+      || !confirmation
+      || daemonActionConfirmationInput.value !== confirmation;
+  }
+
+  function clearDaemonActionConfirmation() {
+    selectedDaemonAction = null;
+    if (daemonActionConfirmationInput) {
+      daemonActionConfirmationInput.value = "";
+      daemonActionConfirmationInput.hidden = true;
+    }
+    if (daemonActionConfirmationLabel) {
+      daemonActionConfirmationLabel.textContent = "";
+      daemonActionConfirmationLabel.hidden = true;
+    }
+    if (daemonActionSubmitButton) {
+      daemonActionSubmitButton.hidden = true;
+      daemonActionSubmitButton.disabled = true;
+    }
+  }
+
+  function setDaemonActionBusy(busy) {
+    daemonActionBusy = busy;
+    // 动作会使旧刷新过期；由动作负责恢复其占用的刷新按钮。
+    refreshButton.disabled = busy;
+    for (const button of [daemonStartButton, daemonStopButton, daemonRestartButton]) {
+      if (button) button.disabled = busy;
+    }
+    if (daemonActionConfirmationInput) daemonActionConfirmationInput.disabled = busy;
+    updateDaemonActionSubmitState();
+  }
+
+  function selectDaemonAction(action) {
+    if (daemonActionBusy || !daemonActionConfirmationInput || !daemonActionSubmitButton) return;
+    selectedDaemonAction = action;
+    // 每次选择高风险操作都丢弃上一次输入，避免确认内容跨操作复用。
+    daemonActionConfirmationInput.value = "";
+    daemonActionConfirmationInput.hidden = false;
+    if (daemonActionConfirmationLabel) {
+      daemonActionConfirmationLabel.textContent = `请输入 ${daemonActionConfirmations[action]} 以继续`;
+      daemonActionConfirmationLabel.hidden = false;
+    }
+    daemonActionSubmitButton.hidden = false;
+    updateDaemonActionSubmitState();
+  }
+
+  function hasExpectedDaemonActionResult(data, action) {
+    const hasExactKeys = (value, keys) => {
+      const actual = Object.keys(value);
+      return actual.length === keys.length
+        && keys.every((key) => Object.prototype.hasOwnProperty.call(value, key));
+    };
+    if (
+      !data
+      || typeof data !== "object"
+      || Array.isArray(data)
+      || !hasExactKeys(data, ["action", "outcome", "daemon"])
+      || data.action !== action
+      || !data.daemon
+      || typeof data.daemon !== "object"
+      || Array.isArray(data.daemon)
+    ) return false;
+
+    if (action === "stop") {
+      return (data.outcome === "stopped" || data.outcome === "already_stopped")
+        && hasExactKeys(data.daemon, ["state"])
+        && data.daemon.state === "stopped";
+    }
+    if (action === "restart") {
+      return data.outcome === "restarted"
+        && hasExactKeys(data.daemon, ["state", "mode"])
+        && data.daemon.state === "running"
+        && data.daemon.mode === "background";
+    }
+    if (!hasExactKeys(data.daemon, ["state", "mode"]) || data.daemon.state !== "running") {
+      return false;
+    }
+    if (data.outcome === "started") return data.daemon.mode === "background";
+    return data.outcome === "already_running"
+      && (data.daemon.mode === "foreground" || data.daemon.mode === "background");
+  }
+
+  async function executeDaemonAction(action) {
+    const confirmation = daemonActionConfirmations[action];
+    if (confirmation && daemonActionConfirmationInput?.value !== confirmation) return;
+
+    // 先使正在进行的页面快照过期，避免动作后的新状态被旧请求回写。
+    controlRefreshGeneration += 1;
+    setDaemonActionBusy(true);
+    try {
+      const body = confirmation ? { action, confirmation } : { action };
+      const response = await fetch("/api/v1/control/daemon/action", {
+        cache: "no-store",
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const payload = await response.json();
+      if (payload.code !== 0 || !hasExpectedDaemonActionResult(payload.data, action)) {
+        throw new Error("Control daemon lifecycle action unavailable");
+      }
+      clearDaemonActionConfirmation();
+      await refreshCurrentPage();
+    } catch {
+      // 不向本机页面暴露服务返回 message 或下游错误文本。
+      refreshStatus.textContent = "生命周期操作失败，请查看安全日志后重试。";
+    } finally {
+      // 无论成功或失败，确认输入都只属于当前一次动作。
+      clearDaemonActionConfirmation();
+      setDaemonActionBusy(false);
+    }
+  }
+
+  refreshButton.addEventListener("click", () => {
+    void refreshCurrentPage();
+  });
+  errorLogTab.addEventListener("click", () => {
+    void selectLogKind("error");
+  });
+  debugLogTab.addEventListener("click", () => {
+    void selectLogKind("debug");
+  });
+  loadMoreLogsButton.addEventListener("click", () => {
+    void loadMoreLogs();
+  });
+  // 条件变更清空旧快照并由 generation 隔离在途分页；同条件刷新仍可保留快照。
+  function changeTriggerFilters(status, type) {
+    if (status === triggerStatus && type === triggerType) return;
+    triggerStatus = status; triggerType = type;
+    triggerSnapshot = null; triggerExhausted = false;
+    refreshStatus.textContent = "";
+    void loadTriggerEvents();
+  }
+  for (const status of triggerFilterNames) document.getElementById(`trigger-filter-${status}`)?.addEventListener("click", () => changeTriggerFilters(status, triggerType));
+  triggerTypeSelect?.addEventListener("input", () => changeTriggerFilters(triggerStatus, triggerTypeSelect.value));
+  turnAuditEventsButton?.addEventListener("click", () => selectTurnAuditView("events"));
+  turnAuditSessionsButton?.addEventListener("click", () => selectTurnAuditView("sessions"));
+  turnAuditLoadMoreSessionsButton?.addEventListener("click", () => {
+    if (turnAuditView === "events") void loadTriggerEvents(true);
+    else void loadMoreTurnAuditSessions();
+  });
+  clearFollowerTracesButton?.addEventListener("click", () => {
+    void clearFollowerTraces();
+  });
+  daemonStartButton?.addEventListener("click", () => {
+    void executeDaemonAction("start");
+  });
+  daemonStopButton?.addEventListener("click", () => {
+    selectDaemonAction("stop");
+  });
+  daemonRestartButton?.addEventListener("click", () => {
+    selectDaemonAction("restart");
+  });
+  daemonActionConfirmationInput?.addEventListener("input", () => {
+    updateDaemonActionSubmitState();
+  });
+  daemonActionSubmitButton?.addEventListener("click", () => {
+    if (selectedDaemonAction) void executeDaemonAction(selectedDaemonAction);
+  });
+  for (const button of daemonMetricsRangeButtons) {
+    button.addEventListener("click", () => {
+      const range = button.getAttribute("data-daemon-metrics-range")
+        ?? button.getAttribute("id")?.replace("daemon-metrics-range-", "");
+      void refreshDaemonMetricsHistoryRange(range);
+    });
+  }
+
+  if (currentPage.key === "connections") {
+    document.addEventListener("visibilitychange", () => {
+      stopConnectionsRefresh();
+      if (!document.hidden) void refreshConnections();
+    });
+    window.addEventListener("pagehide", () => { connectionsPageClosed = true; stopConnectionsRefresh(); });
+    // 浏览器返回缓存页面时恢复可见性调度。
+    window.addEventListener("pageshow", (event) => {
+      if (!event.persisted) return;
+      connectionsPageClosed = false;
+      void refreshConnections();
+    });
+  }
+  // 其他栏目仍只在首次加载及用户显式操作时读取。
+  void refreshCurrentPage();
+})();