function renderConversation() {
  const renderVersion = ++state.conversationRenderVersion;
  captureConversationScrollPosition();
  captureTraceScrollPositions();
  captureTraceBodyScrollPositions();
  const introMessages = [
    {
      role: "system",
      title: "界面模式",
      text: "这里是用户工作台：可以整理任务、查看 Device Pod summary 和纯文本事件流。对话会发送到受控 Code Agent 后端；页面不会直接发送硬件变更。",
      status: "source"
    },
    codeAgentStatusMessage(state.codeAgentAvailability)
  ];
  replaceChildren(el.conversationList, ...[...introMessages, ...state.chatMessages].map(messageCard));
  restoreConversationScrollPosition();
  restoreTraceScrollPositions();
  restoreTraceBodyScrollPositions();
  scheduleCodeAgentSessionPersist();
  window.requestAnimationFrame(() => {
    if (renderVersion !== state.conversationRenderVersion) return;
    restoreConversationScrollPosition({ deferred: true });
    restoreTraceScrollPositions(el.conversationList, { deferred: true });
    restoreTraceBodyScrollPositions(el.conversationList, { deferred: true });
  });
}

function initConversationScrollMemory() {
  for (const eventName of ["wheel", "touchstart", "pointerdown"]) {
    el.conversationList.addEventListener(eventName, markConversationScrollIntent, { passive: true });
  }
  el.conversationList.addEventListener("keydown", (event) => {
    if (isScrollIntentKey(event.key)) markConversationScrollIntent();
  });
  el.conversationList.addEventListener("scroll", () => {
    captureConversationScrollPosition();
  }, { passive: true });
}

function markConversationScrollIntent() {
  state.conversationScrollUserActiveUntil = Date.now() + SCROLL_USER_ACTIVITY_MS;
}

function isScrollIntentKey(key) {
  return ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "].includes(key);
}

function captureConversationScrollPosition() {
  state.conversationScrollPosition = {
    top: el.conversationList.scrollTop,
    left: el.conversationList.scrollLeft,
    bottomGap: scrollBottomGap(el.conversationList)
  };
}

function restoreConversationScrollPosition(options = {}) {
  if (options.deferred === true && Date.now() < state.conversationScrollUserActiveUntil) return;
  const position = state.conversationScrollPosition;
  if (!position) return;
  writeConversationScrollTop(scrollTopForPosition(el.conversationList, position));
  el.conversationList.scrollLeft = Math.min(position.left, Math.max(0, el.conversationList.scrollWidth - el.conversationList.clientWidth));
}

function captureTraceScrollPositions(root = el.conversationList) {
  for (const list of root.querySelectorAll(".message-trace-events[data-trace-ui-key]")) {
    rememberTraceScrollPosition(list.dataset.traceUiKey, list);
  }
}

function rememberTraceScrollPosition(traceUiKey, list) {
  if (!traceUiKey || !list) return;
  state.traceScrollPositions.set(traceUiKey, {
    top: list.scrollTop,
    left: list.scrollLeft,
    bottomGap: scrollBottomGap(list)
  });
}

function restoreTraceScrollPositions(root = el.conversationList, options = {}) {
  for (const list of root.querySelectorAll(".message-trace-events[data-trace-ui-key]")) {
    if (options.deferred === true && isTraceScrollUserActive(list.dataset.traceUiKey)) continue;
    const position = state.traceScrollPositions.get(list.dataset.traceUiKey);
    if (!position) continue;
    writeTraceScrollTop(list, scrollTopForPosition(list, position));
    list.scrollLeft = Math.min(position.left, Math.max(0, list.scrollWidth - list.clientWidth));
  }
}

function captureTraceBodyScrollPositions(root = el.conversationList) {
  for (const body of root.querySelectorAll(".message-trace-body")) {
    rememberTraceBodyScrollPosition(body);
  }
}

function traceBodyScrollKey(body) {
  const list = body?.closest?.(".message-trace-events[data-trace-ui-key]");
  const row = body?.closest?.(".message-trace-row[data-trace-row-id]");
  const traceUiKey = list?.dataset?.traceUiKey;
  const rowId = row?.dataset?.traceRowId;
  return traceUiKey && rowId ? `${traceUiKey}:${rowId}` : null;
}

function rememberTraceBodyScrollPosition(body) {
  const key = traceBodyScrollKey(body);
  if (!key || !body) return;
  state.traceBodyScrollPositions.set(key, elementScrollPosition(body));
}

function restoreTraceBodyScrollPositions(root = el.conversationList, options = {}) {
  for (const body of root.querySelectorAll(".message-trace-body")) {
    const key = traceBodyScrollKey(body);
    if (!key) continue;
    if (options.deferred === true && isTraceBodyScrollUserActive(key)) continue;
    const position = state.traceBodyScrollPositions.get(key);
    if (!position) continue;
    restoreElementScrollPosition(body, position);
  }
}

function markTraceBodyScrollIntent(body) {
  const key = traceBodyScrollKey(body);
  if (!key) return;
  state.traceBodyScrollUserActiveUntil.set(key, Date.now() + SCROLL_USER_ACTIVITY_MS);
}

function isTraceBodyScrollUserActive(key) {
  if (!key) return false;
  return Date.now() < Number(state.traceBodyScrollUserActiveUntil.get(key) ?? 0);
}

function elementScrollPosition(element) {
  return {
    top: element.scrollTop,
    left: element.scrollLeft,
    bottomGap: scrollBottomGap(element)
  };
}

function restoreElementScrollPosition(element, position) {
  if (!element || !position) return;
  element.scrollTop = scrollTopForPosition(element, position);
  element.scrollLeft = Math.min(position.left, Math.max(0, element.scrollWidth - element.clientWidth));
}

function scrollBottomGap(element) {
  return Math.max(0, element.scrollHeight - element.clientHeight - element.scrollTop);
}

function scrollTopForPosition(element, position) {
  const maxTop = Math.max(0, element.scrollHeight - element.clientHeight);
  if (Number(position.bottomGap) <= SCROLL_BOTTOM_PIN_PX) return maxTop;
  return Math.min(position.top, maxTop);
}

function markTraceScrollIntent(traceUiKey) {
  if (!traceUiKey) return;
  state.traceScrollUserActiveUntil.set(traceUiKey, Date.now() + SCROLL_USER_ACTIVITY_MS);
}

function isTraceScrollUserActive(traceUiKey) {
  if (!traceUiKey) return false;
  return Date.now() < Number(state.traceScrollUserActiveUntil.get(traceUiKey) ?? 0);
}

function writeConversationScrollTop(top) {
  if (el.conversationList.scrollTop === top) return;
  state.traceProgrammaticScrollWrites += 1;
  el.conversationList.scrollTop = top;
}

function writeTraceScrollTop(list, top) {
  if (!list || list.scrollTop === top) return;
  state.traceProgrammaticScrollWrites += 1;
  list.scrollTop = top;
}

function patchMessageTracePanel(message) {
  const traceUiKey = messageTraceUiKey(message);
  if (!traceUiKey) return false;
  const panel = el.conversationList.querySelector(`.message-trace[data-trace-ui-key="${cssEscape(traceUiKey)}"]`);
  if (!panel) return false;
  const replacement = messageTracePanel(message);
  if (!replacement) {
    panel.remove();
    return true;
  }
  patchTracePanelElement(panel, replacement);
  return true;
}

function patchTracePanelElement(panel, replacement) {
  panel.open = replacement.open;
  const currentSummary = panel.querySelector("summary");
  const nextSummary = replacement.querySelector("summary");
  if (currentSummary && nextSummary) {
    currentSummary.className = nextSummary.className;
    currentSummary.textContent = nextSummary.textContent;
  }

  const currentToolbar = panel.querySelector(".message-trace-toolbar");
  const nextToolbar = replacement.querySelector(".message-trace-toolbar");
  if (currentToolbar && nextToolbar) {
    currentToolbar.replaceChildren(...nextToolbar.childNodes);
  } else if (!currentToolbar && nextToolbar) {
    const list = panel.querySelector(".message-trace-events");
    panel.insertBefore(nextToolbar, list);
  } else if (currentToolbar && !nextToolbar) {
    currentToolbar.remove();
  }

  const currentList = panel.querySelector(".message-trace-events[data-trace-ui-key]");
  const nextList = replacement.querySelector(".message-trace-events[data-trace-ui-key]");
  if (currentList && nextList) {
    captureTraceBodyScrollPositions(currentList);
    currentList.dataset.traceMode = nextList.dataset.traceMode ?? "";
    patchTraceEventList(currentList, [...nextList.children]);
    restoreTraceBodyScrollPositions(currentList);
  }
}

function cssEscape(value) {
  if (window.CSS && typeof window.CSS.escape === "function") return window.CSS.escape(value);
  return String(value).replace(/["\\]/gu, "\\$&");
}


function renderGateTable() {
  const rows = filteredGateRows();
  const loading = state.gateDiagnostics.loading;
  const payload = state.gateDiagnostics.payload;
  const statusTone = gatePayloadTone();
  const loadedAt = state.gateDiagnostics.loadedAt;
  el.gateSourceStatus.textContent = loading
    ? "读取 live 后端中"
    : payload
      ? `live 后端 ${rows.length}/${state.gateDiagnostics.rows.length} 行`
      : state.gateDiagnostics.error
        ? "live 后端阻塞"
        : "等待 live 后端";
  el.gateSourceStatus.className = `state-tag tone-${toneClass(statusTone)}`;
  el.gateSourceStatus.title = payload
    ? `route=${payload.route}; observedAt=${payload.observedAt ?? loadedAt ?? "unknown"}`
    : state.gateDiagnostics.error ?? "等待 /v1/diagnostics/gate";

  if (loading && state.gateDiagnostics.rows.length === 0) {
    const tr = document.createElement("tr");
    tr.append(tableCell("正在读取 live 后端聚合。", "wrap", 8));
    replaceChildren(el.gateReviewBody, tr);
    return;
  }

  if (rows.length === 0) {
    const tr = document.createElement("tr");
    tr.append(tableCell("没有匹配当前过滤条件的复核行。", "wrap", 8));
    replaceChildren(el.gateReviewBody, tr);
    return;
  }

  replaceChildren(el.gateReviewBody, ...rows.map(gateTableRow));
}

function filteredGateRows() {
  const filter = el.gateStatusFilter.value;
  const query = el.gateSearch.value.trim().toLowerCase();
  return state.gateDiagnostics.rows.filter((row) => {
    if (filter !== "all" && row.status !== filter) return false;
    if (!query) return true;
    return [
      row.category,
      row.check,
      row.status,
      row.owner,
      row.detail,
      ...(row.evidence ?? []),
      row.updatedAt,
      row.next
    ].join(" ").toLowerCase().includes(query);
  });
}

function gateTableRow(row) {
  const tr = document.createElement("tr");
  tr.dataset.status = row.status;
  tr.dataset.statusKey = row.statusKey;
  tr.append(tableCell(row.category, "wrap"));
  tr.append(tableCell(row.check, "wrap"));
  const status = document.createElement("td");
  status.append(badge(row.status, row.statusKey));
  tr.append(status);
  tr.append(tableCell(row.owner, "mono wrap"));
  tr.append(tableCell(row.detail, "wrap"));
  tr.append(tableCell((row.evidence ?? []).join(" / "), "mono wrap"));
  tr.append(tableCell(formatTimestamp(row.updatedAt), "mono wrap"));
  tr.append(tableCell(row.next, "wrap"));
  return tr;
}

function normalizeGateRow(row) {
  const statusKey = normalizeGateStatusKey(row.statusKey ?? row.status);
  return {
    category: oneLine(row.category || "内部复核"),
    check: oneLine(row.check || "未命名检查项"),
    status: gateStatusLabel(row.status, statusKey),
    statusKey,
    owner: oneLine(row.owner || "未标明"),
    detail: oneLine(row.detail || "live 后端未返回关键细节"),
    evidence: normalizeEvidenceList(row.evidence),
    updatedAt: row.updatedAt || new Date().toISOString(),
    next: oneLine(row.next || "等待维护者补充下一步。"),
    sourceKind: "LIVE-BACKEND"
  };
}

function gateLiveBlockerRow(response) {
  const now = new Date().toISOString();
  return normalizeGateRow({
    category: "健康检查",
    check: "内部复核 live 后端聚合",
    status: "阻塞",
    statusKey: response.timeout ? "failed" : "blocked",
    owner: "hwlab-cloud-api /v1/diagnostics/gate",
    detail: response.error || "live 后端聚合不可用；页面不会回退到 SOURCE 静态拓扑。",
    evidence: [
      "GET /v1/diagnostics/gate",
      response.status ? `HTTP ${response.status}` : null,
      response.timeout ? `timeoutMs=${response.timeoutMs}` : null
    ].filter(Boolean),
    updatedAt: now,
    next: "先恢复后端聚合接口，再刷新本表。"
  });
}

function gatePayloadTone() {
  if (state.gateDiagnostics.loading) return "pending";
  if (!state.gateDiagnostics.payload) return state.gateDiagnostics.error ? "blocked" : "source";
  const rows = state.gateDiagnostics.rows;
  if (rows.some((row) => row.statusKey === "failed")) return "failed";
  if (rows.some((row) => row.statusKey === "blocked")) return "blocked";
  if (rows.some((row) => row.statusKey === "pending")) return "pending";
  return "pass";
}

function renderAgentChatStatus(status, result = null) {
  const labels = {
    idle: "等待输入",
    running: "处理中",
    completed: "DEV-LIVE 回复",
    source: "SOURCE 回复",
    failed: "后端失败",
    timeout: "等待超时",
    canceled: "已取消",
    error: "请求错误",
    blocked: "服务受阻"
  };
  el.agentChatStatus.textContent = agentStatusLabel(status, result, labels);
  el.agentChatStatus.className = `state-tag tone-${toneClass(agentStatusTone(status, result))}`;
  el.commandInput.disabled = status === "running";
  el.commandSend.disabled = status === "running";
  el.commandSend.textContent = status === "running" ? "发送中" : "发送";
  if (result?.conversationId) {
    el.agentChatStatus.title = `${result.provider ?? "provider"} / ${result.model ?? "model"} / ${result.backend ?? "backend"}`;
  } else {
    el.agentChatStatus.removeAttribute("title");
  }
}

function renderCodeAgentSummary() {
  const summary = currentCodeAgentStatusSummary();
  el.codeAgentSummary.className = `code-agent-summary tone-border-${toneClass(summary.tone)}`;
  el.codeAgentSummary.dataset.codeAgentStatusKind = summary.kind;
  el.codeAgentSummaryIcon.textContent = summary.icon;
  el.codeAgentSummaryIcon.className = `code-agent-summary-icon tone-${toneClass(summary.tone)}`;
  el.codeAgentSummaryLabel.textContent = summary.label;
  el.codeAgentSummaryLabel.className = `code-agent-summary-label tone-${toneClass(summary.tone)}`;
  el.codeAgentSummaryCapability.textContent = summary.capabilityLevel;
  el.codeAgentSummaryTrace.textContent = `trace ${summary.lastTraceId}`;
  replaceChildren(el.codeAgentSummaryDetail, ...codeAgentSummaryRows(summary));
}

function currentCodeAgentStatusSummary() {
  return classifyCodeAgentStatusSummary({
    availability: state.codeAgentAvailability,
    latestMessage: latestChatResult(),
    live: state.liveSurface
  });
}

function codeAgentSummaryRows(summary) {
  return [
    codeAgentSummaryRow("codeAgent.status", summary.codeAgentStatus, summary.tone),
    codeAgentSummaryRow("provider/mode/backend", summary.providerModeBackend, "source"),
    codeAgentSummaryRow("capabilityLevel", summary.capabilityLevel, summary.tone),
    codeAgentSummaryRow("session", summary.sessionSummary, sessionSummaryTone(summary)),
    codeAgentSummaryRow("sessionId/status", summary.sessionIdStatus, sessionSummaryTone(summary)),
    codeAgentSummaryRow("会话提示", summary.sessionLifecycleHint, sessionSummaryTone(summary)),
    codeAgentSummaryRow("workspace", summary.workspace, "source"),
    codeAgentSummaryRow("sandbox", summary.sandbox, "source"),
    codeAgentSummaryRow("runnerKind", summary.runnerKind, summary.kind === "long-lived-session" ? "ok" : "source"),
    codeAgentSummaryRow("protocol", summary.protocol, summary.runtimePathTone),
    codeAgentSummaryRow("implementationType", summary.implementationType, summary.runtimePathTone),
    codeAgentSummaryRow("providerTrace.command", summary.providerTraceCommand, summary.runtimePathTone),
    codeAgentSummaryRow("providerTrace.terminalStatus", summary.providerTraceTerminalStatus, summary.runtimePathTone),
    codeAgentSummaryRow("运行路径语义", summary.runtimePathLabel, summary.runtimePathTone),
    codeAgentSummaryRow("toolCalls", summary.toolCalls, summary.toolCalls === "none" ? "source" : summary.tone),
    codeAgentSummaryRow("skills", summary.skills, summary.skills === "none" ? "source" : summary.tone),
    codeAgentSummaryRow("conversation facts", conversationFactsSummary(summary.latestMessage?.conversationFacts), summary.latestMessage?.conversationFacts ? "source" : "blocked"),
    codeAgentSummaryRow("fact traces", conversationFactTracesSummary(summary.latestMessage?.conversationFacts), summary.latestMessage?.conversationFacts ? "source" : "blocked"),
    codeAgentSummaryRow("runnerTrace", summary.runnerTrace, "source"),
    codeAgentSummaryRow("readiness blockers", summary.blockersLabel, summary.readinessBlockers.length > 0 ? "blocked" : "source"),
    codeAgentSummaryRow("last traceId", summary.lastTraceId, "source"),
    codeAgentSummaryRow("当前部署 revision", summary.deploymentRevision, "source")
  ];
}

function codeAgentSummaryRow(label, value, tone) {
  const row = document.createElement("div");
  row.className = "code-agent-summary-row";
  row.append(textSpan(label, "code-agent-summary-key"), textSpan(value, `code-agent-summary-value tone-${toneClass(tone)}`));
  return row;
}

function sessionSummaryTone(summary) {
  if (summary.kind === "long-lived-session") return "ok";
  if (summary.kind === "blocked" || summary.kind === "skill-cli-api-blocked") return "blocked";
  if (["read-only-session-tools", "stateless-one-shot", "fallback-text-chat-only", "degraded"].includes(summary.kind)) return "warn";
  return "source";
}

function agentStatusLabel(status, result, labels) {
  if (status !== "failed") return labels[status] ?? statusLabel(status);
  const presentation = agentFailurePresentation(result?.error, { result });
  return (
    {
      timeout: "等待超时",
      provider: "Provider 不可用",
      runner_busy: "Runner 忙碌",
      session_blocked: "Session 受阻",
      canceled: "已取消",
      runner_blocked: "Runner 受阻",
      api_error: "API 错误",
      needs_config: "需要配置",
      capability_unavailable: "能力未开放",
      security_blocked: "安全阻断",
      fallback: "仍是 fallback",
      retryable: "可重试"
    }[presentation.category] ?? labels.failed
  );
}

function agentStatusTone(status, result) {
  if (status === "completed") return "dev-live";
  if (["failed", "blocked", "timeout", "canceled", "error"].includes(status)) return "blocked";
  if (status === "running") return "pending";
  return "source";
}

function sourceTitle(result) {
  return `Code Agent 回复 ${shortTime(result.updatedAt ?? new Date().toISOString())}`;
}

function sourceFixtureTitle(result) {
  return `Code Agent SOURCE 回复 ${shortTime(result.updatedAt ?? new Date().toISOString())}`;
}

function textFallbackTitle(result) {
  return `Code Agent 文本 fallback 回复 ${shortTime(result.updatedAt ?? new Date().toISOString())}`;
}

function classifyCodeAgentCompletion(result, { blockedError = null } = {}) {
  if (result?.status === "canceled") {
    return {
      status: "canceled",
      replied: false,
      sourceKind: "BLOCKED",
      title: "Code Agent 已取消"
    };
  }
  if (result?.status === "timeout") {
    return {
      status: "timeout",
      replied: false,
      sourceKind: "BLOCKED",
      title: "Code Agent 无新事件超时"
    };
  }
  if (result?.status === "error") {
    return {
      status: "failed",
      replied: false,
      sourceKind: "BLOCKED",
      title: "Code Agent 返回错误"
    };
  }
  if (isStructuredBlockedChatResult(result)) {
    return {
      status: "failed",
      replied: false,
      sourceKind: "BLOCKED",
      title: agentFailurePresentation(structuredBlockedErrorFromResult(result), { result }).title
    };
  }
  if (blockedError) {
    return {
      status: "failed",
      replied: false,
      sourceKind: "BLOCKED",
      title: agentFailurePresentation(blockedError, { result }).title
    };
  }
  if (isRealCompletedChatResult(result)) {
    return {
      status: "completed",
      replied: true,
      sourceKind: "DEV-LIVE",
      title: sourceTitle(result)
    };
  }
  if (isSourceFixtureChatResult(result)) {
    return {
      status: "source",
      replied: true,
      sourceKind: "SOURCE",
      title: sourceFixtureTitle(result)
    };
  }
  if (isTextFallbackChatResult(result)) {
    return {
      status: "source",
      replied: true,
      sourceKind: "TEXT-FALLBACK",
      title: textFallbackTitle(result)
    };
  }
  return {
    status: "failed",
    replied: false,
    sourceKind: "BLOCKED",
    title: result?.status === "completed" && !result?.blocker ? "Code Agent 完成证据不足" : agentFailurePresentation(result?.error, { result }).title
  };
}

function isStructuredBlockedChatResult(result) {
  const error = result?.error && typeof result.error === "object" ? result.error : {};
  return Boolean(
    result &&
    typeof result === "object" &&
    (
      result.blocker?.code ||
      error.blocker?.code ||
      result.capabilityLevel === "hwlab-api-control-blocked"
    )
  );
}

function structuredBlockedErrorFromResult(result) {
  if (!isStructuredBlockedChatResult(result)) return null;
  const error = result?.error && typeof result.error === "object" ? result.error : {};
  const blocker = error.blocker ?? result?.blocker ?? {};
  const code = normalizeErrorCode(error.code ?? blocker.code ?? "code_agent_blocked");
  const selectedBlocker = blocker;
  return {
    ...error,
    code,
    layer: error.layer ?? selectedBlocker.layer,
    category: error.category ?? selectedBlocker.category,
    blocker: selectedBlocker,
    retryable: error.retryable ?? selectedBlocker.retryable,
    userMessage: error.userMessage ?? selectedBlocker.userMessage,
    message: error.message ?? selectedBlocker.summary ?? selectedBlocker.zh ?? selectedBlocker.message ?? code,
    traceId: error.traceId ?? result?.traceId,
    route: error.route ?? selectedBlocker.route,
    toolName: error.toolName ?? selectedBlocker.toolName
  };
}


function failureMessage(result) {
  const presentation = agentFailurePresentation(structuredBlockedErrorFromResult(result) ?? result?.error, { result });
  if (presentation.category !== "unknown") {
    return presentation.text;
  }
  if (result?.error?.code === "provider_unavailable" || result?.availability?.status === "blocked") {
    const availability = result.error?.providerStatus || result.availability?.status !== "blocked"
      ? codeAgentAvailabilityFromResult(result)
      : result.availability ?? codeAgentAvailabilityFromResult(result);
    return codeAgentBlockedSummary(availability);
  }
  const missing = [
    ...(result.error?.missingCommands ?? []),
    ...(result.error?.missingEnv ?? [])
  ].filter(Boolean);
  const suffix = missing.length ? ` 缺口：${missing.join("、")}。` : "";
  return `Code Agent 调用失败：${result.error?.message ?? "未知错误"}。${suffix}请稍后重试或联系维护者补齐后端 provider。`;
}

function agentErrorFromHttpResponse(response, traceId) {
  const payloadError = response.data?.error;
  const code = response.timeout
    ? "client_timeout"
    : normalizeErrorCode(
      (payloadError && typeof payloadError === "object" ? payloadError.code : null) ??
      (typeof payloadError === "string" ? payloadError : null) ??
      response.data?.code ??
      "request_failed"
    );
  const error = new Error(response.timeout
    ? `Code Agent 超过 ${response.timeoutMs}ms 无新事件；已保留输入，可稍后重试。`
    : payloadError?.userMessage || response.error || "Code Agent 请求失败");
  error.traceId = response.data?.traceId || traceId;
  error.code = code;
  error.layer = payloadError && typeof payloadError === "object" ? payloadError.layer : undefined;
  error.blocker = payloadError && typeof payloadError === "object" ? payloadError.blocker : undefined;
  error.retryable = payloadError && typeof payloadError === "object" ? payloadError.retryable : response.timeout ? true : undefined;
  error.userMessage = payloadError && typeof payloadError === "object" ? payloadError.userMessage : undefined;
  error.missingConfig = payloadError && typeof payloadError === "object" ? payloadError.missingConfig : undefined;
  error.route = payloadError && typeof payloadError === "object" ? payloadError.route : undefined;
  error.toolName = payloadError && typeof payloadError === "object" ? payloadError.toolName : undefined;
  error.timeoutMs = response.timeoutMs ?? (payloadError && typeof payloadError === "object" ? payloadError.timeoutMs : undefined);
  error.hardTimeoutMs = payloadError && typeof payloadError === "object" ? payloadError.hardTimeoutMs : undefined;
  error.idleMs = response.idleMs ?? (payloadError && typeof payloadError === "object" ? payloadError.idleMs : undefined);
  error.lastActivityAt = response.lastActivityAt ?? (payloadError && typeof payloadError === "object" ? payloadError.lastActivityAt : undefined);
  error.waitingFor = response.waitingFor ?? (payloadError && typeof payloadError === "object" ? payloadError.waitingFor : undefined);
  error.providerStatus = payloadError && typeof payloadError === "object" ? payloadError.providerStatus : response.status;
  error.category = payloadError && typeof payloadError === "object" ? payloadError.category : undefined;
  return error;
}

function agentFailurePresentation(error, { result = null, traceId = null } = {}) {
  const code = normalizeErrorCode(error?.code);
  const message = String(error?.message ?? result?.error?.message ?? "").trim();
  const structuredBlocker = error?.blocker ?? result?.error?.blocker ?? result?.blocker ?? null;
  const userMessage = String(error?.userMessage ?? result?.error?.userMessage ?? structuredBlocker?.userMessage ?? "").trim();
  const observedTraceId = result?.traceId || error?.traceId || traceId || null;
  const traceSuffix = observedTraceId ? ` trace=${observedTraceId}` : "";
  const timeoutMs = error?.timeoutMs ?? result?.error?.timeoutMs ?? timeoutMsFromText(message);
  const hardTimeoutMs = error?.hardTimeoutMs ?? result?.error?.hardTimeoutMs;
  const idleMs = error?.idleMs ?? result?.error?.idleMs;
  const lastActivityAt = error?.lastActivityAt ?? result?.error?.lastActivityAt;
  const waitingFor = error?.waitingFor ?? result?.error?.waitingFor;
  const providerStatus = error?.providerStatus ?? result?.error?.providerStatus;

  if (code === "codex_stdio_hard_timeout") {
    return {
      category: "timeout",
      title: "Code Agent 达到硬性上限",
      text: `Code Agent 达到硬性总时长上限${hardTimeoutMs ? ` ${hardTimeoutMs}ms` : ""}；输入已保留，可稍后重试或缩小问题范围。${traceSuffix}`
    };
  }

  if (isTimeoutFailure(code, message)) {
    const detail = [
      typeof idleMs === "number" ? `idleMs=${idleMs}` : null,
      lastActivityAt ? `lastActivityAt=${lastActivityAt}` : null,
      waitingFor ? `waitingFor=${waitingFor}` : null
    ].filter(Boolean).join("；");
    return {
      category: "timeout",
      title: "Code Agent 无新事件超时",
      text: `Code Agent ${timeoutMs ? `超过 ${timeoutMs}ms ` : ""}无新事件；输入已保留，可稍后重试或缩小问题范围。${detail ? ` ${detail}。` : ""}${traceSuffix}`
    };
  }

  if (code === "codex_stdio_canceled" || code === "session_canceled") {
    return {
      category: "canceled",
      title: "Code Agent 已取消",
      text: `本次 Codex stdio 请求已取消；输入、sessionId 和 traceId 已保留，可重试上一条消息。${traceSuffix}`
    };
  }

  if (userMessage) {
    const category = error?.category ?? result?.error?.category ?? structuredBlocker?.category ?? "runner_blocked";
    return {
      category,
      title: titleForBlockerCategory(category, code),
      text: `${userMessage}${traceSuffix}`
    };
  }

  if (code === "session_busy") {
    return {
      category: "runner_busy",
      title: "会话忙/请等待",
      text: `Codex stdio runner 正在处理上一轮请求；输入已保留，请等待当前请求完成或取消后重试。${traceSuffix}`
    };
  }

  if (code === "session_expired") {
    return {
      category: "session_blocked",
      title: "会话已过期",
      text: `当前 session 已过期；输入已保留，可重新发送建立新的 Codex stdio session。${traceSuffix}`
    };
  }

  if (["session_reuse_conflict", "session_failed", "session_interrupted", "session_canceled", "session_timeout", "session_error"].includes(code)) {
    return {
      category: "session_blocked",
      title: "Code Agent Session 受阻",
      text: `当前 session 已过期、失败、中断或与 conversation 绑定不一致；输入已保留，可重新发送建立新的 Codex stdio session。${traceSuffix}`
    };
  }

  if ([
    "runner_unavailable",
    "tool_unavailable",
    "skills_unavailable",
    "security_blocked",
    "codex_stdio_blocked",
    "codex_stdio_failed",
    "codex_stdio_protocol_blocked",
    "codex_stdio_empty_response",
    "codex_stdio_command_probe_failed"
  ].includes(code)) {
    return {
      category: "runner_blocked",
      title: "Code Agent Runner 受阻",
      text: `Codex stdio runner 返回 ${code}；本次不会 fallback 冒充 Codex session。${message ? `原因：${message}。` : ""}${traceSuffix}`
    };
  }

  if (["invalid_params", "parse_error", "request_failed", "cloud_api_proxy_failed", "upstream_unavailable"].includes(code)) {
    return {
      category: "api_error",
      title: "Code Agent API 错误",
      text: `Code Agent API 请求失败；输入已保留，可稍后重试。${message ? `原因：${message}。` : ""}${traceSuffix}`
    };
  }

  if (code === "provider_unavailable" || providerStatus) {
    return {
      category: "provider",
      title: "Code Agent Provider 不可用",
      text: providerStatus
        ? `Code Agent provider 返回 HTTP ${providerStatus}；本次未生成回复，输入已保留，可稍后重试。${traceSuffix}`
        : `Code Agent provider 暂不可用；本次未生成回复，输入已保留，可稍后重试。${traceSuffix}`
    };
  }

  return {
    category: "unknown",
    title: "Code Agent 返回失败",
    text: `Code Agent 调用失败：${message || "未知错误"}。请稍后重试或联系维护者补齐后端 provider。${traceSuffix}`
  };
}

function titleForBlockerCategory(category, code) {
  const value = String(category ?? "").trim();
  if (value === "needs_config") return "Code Agent 需要配置";
  if (value === "security_blocked" || code === "security_blocked") return "Code Agent 安全阻断";
  if (value === "fallback" || code === "text_chat_only_fallback") return "Code Agent 仍是 fallback";
  if (value === "timeout") return "Code Agent 无新事件超时";
  if (value === "canceled" || code === "codex_stdio_canceled") return "Code Agent 已取消";
  if (value === "runner_busy") return "Code Agent Runner 忙碌";
  if (value === "session_blocked") return "Code Agent Session 受阻";
  if (value === "runner_blocked") return "Code Agent Runner 受阻";
  if (value === "api_error") return "Code Agent API 错误";
  if (value === "capability_unavailable") return "Code Agent 能力未开放";
  if (value === "retryable") return "Code Agent 可重试";
  return "Code Agent 服务受阻";
}

function normalizeErrorCode(code) {
  const normalized = String(code ?? "").trim();
  return normalized || "code_agent_failed";
}

function isTimeoutFailure(code, message) {
  return ["client_timeout", "proxy_timeout", "cloud_api_proxy_timeout", "codex_stdio_timeout", "codex_stdio_idle_timeout", "codex_stdio_hard_timeout"].includes(code) ||
    /\b(?:timeout|timed out|abort|aborted|超时|请求超过|无新事件)\b/iu.test(message);
}

function isCodeAgentTimeoutError(error, fallbackMessage = "") {
  const code = normalizeErrorCode(error?.code);
  const message = [error?.message, error?.userMessage, fallbackMessage]
    .filter(Boolean)
    .join(" ");
  return isTimeoutFailure(code, message);
}

function timeoutMsFromText(message) {
  const match = String(message ?? "").match(/(?:timed out after|timeout after|请求超时|请求超过|超过)\s*(\d+)\s*ms/iu);
  if (!match) return null;
  const value = Number.parseInt(match[1], 10);
  return Number.isInteger(value) && value > 0 ? value : null;
}

function messageCard(message) {
  const article = document.createElement("article");
  article.className = `message-card message-${toneClass(message.role)} status-${toneClass(message.status)}`;
  article.append(textSpan(roleLabel(message.role), "message-role"));
  article.append(textSpan(message.title, "message-title"));
  article.append(messageCopyNode(message));
  const pendingContext = messagePendingContextPanel(message);
  if (pendingContext) article.append(pendingContext);
  const sessionContext = messageSessionContinuityPanel(message);
  if (sessionContext) article.append(sessionContext);
  const runtimePath = messageRuntimePathPanel(message);
  if (runtimePath) article.append(runtimePath);
  const tracePanel = messageTracePanel(message);
  if (tracePanel) article.append(tracePanel);
  const actions = messageActionsPanel(message);
  if (actions) article.append(actions);
  return article;
}

function messageCopyNode(message) {
  if (!shouldRenderMessageMarkdown(message)) {
    return textSpan(message.text, "message-copy");
  }
  const node = document.createElement("div");
  node.className = "message-copy message-copy-markdown";
  const markdown = String(message.text ?? "");
  try {
    node.innerHTML = renderMessageMarkdown(markdown);
  } catch (error) {
    node.textContent = markdown || `Markdown 渲染失败：${error.message}`;
  }
  hardenRenderedMarkdown(node);
  return node;
}

function shouldRenderMessageMarkdown(message) {
  return message?.role === "agent" && MESSAGE_MARKDOWN_STATUSES.includes(String(message.status ?? "").toLowerCase());
}

function messageActionsPanel(message) {
  if (message.role !== "agent") return null;
  const actions = [];
  if (message.status === "running") {
    actions.push(actionButton("取消当前请求", "cancel", () => cancelAgentMessage(message.id), "取消当前 in-flight Codex stdio 请求"));
    if (message.retryInput) {
      actions.push(actionButton("重试上一条", "retry", () => restartRunningAgentMessage(message.id), "先取消当前 trace，再用同一输入重新发送"));
    }
  }
  if (canRetryTerminalAgentMessage(message)) {
    actions.push(actionButton("重试上一条", "retry", () => retryAgentMessage(message.id), "保留 conversation/trace 记录并重新发送上一条输入"));
  }
  if (message.traceId) {
    actions.push(actionButton("回放 trace", "trace", () => replayAgentTrace(message.id), "从 runnerTrace store 重新读取真实事件"));
  }
  if (actions.length === 0 && !message.traceReplayStatus) return null;
  const panel = document.createElement("div");
  panel.className = "message-actions";
  panel.append(...actions);
  if (message.traceReplayStatus) {
    panel.append(textSpan(message.traceReplayStatus, "message-action-status"));
  }
  return panel;
}

function actionButton(label, action, onClick, title) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = `message-action message-action-${action}`;
  button.textContent = label;
  button.title = title;
  button.addEventListener("click", onClick);
  return button;
}

function canRetryTerminalAgentMessage(message) {
  return Boolean(
    message?.retryInput &&
    ["failed", "timeout", "error", "canceled"].includes(String(message.status ?? "").toLowerCase())
  );
}

async function restartRunningAgentMessage(messageId) {
  const message = state.chatMessages.find((item) => item.id === messageId);
  if (!message?.retryInput || message.status !== "running") return;
  await cancelAgentMessage(messageId);
  const canceled = state.chatMessages.find((item) => item.id === messageId);
  if (canceled?.status !== "canceled" || state.chatPending) {
    setAgentActionStatus(messageId, "取消未确认，当前 trace 仍在等待后端；已保留输入，可等待真实超时或后端结果后再重试。");
    return;
  }
  await submitAgentMessage(message.retryInput, {
    conversationId: canceled.conversationId || state.conversationId || undefined,
    sessionId: isTerminalSessionStatus(canceled.session?.status ?? canceled.runnerTrace?.sessionStatus ?? canceled.status)
      ? undefined
      : canceled.sessionId,
    threadId: isTerminalSessionStatus(canceled.session?.status ?? canceled.runnerTrace?.sessionStatus ?? canceled.status)
      ? undefined
      : canceled.threadId ?? threadIdFrom(canceled),
    retryOf: canceled.traceId
  });
}

async function retryAgentMessage(messageId) {
  const message = state.chatMessages.find((item) => item.id === messageId);
  if (!message?.retryInput) return;
  if (state.chatPending) {
    setAgentActionStatus(messageId, "当前仍有请求处理中；请先取消当前请求，或等待真实超时/后端结果后再重试。");
    return;
  }
  await submitAgentMessage(message.retryInput, {
    conversationId: message.conversationId || state.conversationId || undefined,
    sessionId: isTerminalSessionStatus(message.session?.status ?? message.runnerTrace?.sessionStatus ?? message.status)
      ? undefined
      : message.sessionId,
    threadId: isTerminalSessionStatus(message.session?.status ?? message.runnerTrace?.sessionStatus ?? message.status)
      ? undefined
      : message.threadId ?? threadIdFrom(message),
    retryOf: message.traceId
  });
}

function setAgentActionStatus(messageId, text) {
  const index = state.chatMessages.findIndex((message) => message.id === messageId);
  if (index < 0) return;
  state.chatMessages[index] = {
    ...state.chatMessages[index],
    traceReplayStatus: text,
    updatedAt: new Date().toISOString()
  };
  renderConversation();
}

async function cancelAgentMessage(messageId) {
  const index = state.chatMessages.findIndex((message) => message.id === messageId);
  if (index < 0) return;
  const message = state.chatMessages[index];
  const traceId = message.traceId;
  const sessionId = message.sessionId || message.runnerTrace?.sessionId || state.currentRequest?.sessionId || state.sessionId;
  const threadId = message.threadId || message.runnerTrace?.threadId || state.currentRequest?.threadId || state.threadId;
  const response = await cancelAgentRequest({
    traceId,
    conversationId: message.conversationId || state.conversationId,
    sessionId,
    threadId
  });
  const payload = response.data ?? {};
  const runnerTrace = payload.runnerTrace ?? latestTraceSnapshot(traceId);
  if (response.ok && payload.canceled === true) {
    state.canceledTraces.add(traceId);
    stopRunningTraceStream(traceId);
    state.chatPending = false;
    state.currentRequest = null;
    state.sessionId = payload.sessionId || sessionId || state.sessionId;
    state.sessionStatus = payload.session?.status ?? runnerTrace?.sessionStatus ?? "canceled";
    state.chatMessages[index] = {
      ...message,
      title: "Code Agent 已取消",
      text: payload.userMessage || "当前 Codex stdio 请求已取消；输入、sessionId、traceId 和最后 trace event 已保留，可重试上一条消息。",
      status: "canceled",
      sessionId: payload.sessionId || sessionId || message.sessionId,
      threadId: payload.threadId || threadId || message.threadId,
      sessionContinuity: failedSessionContinuity(message.sessionContinuity, { code: "codex_stdio_canceled" }),
      session: payload.session ?? message.session,
      runnerTrace,
      traceReplayStatus: lastTraceEventLabel(runnerTrace),
      updatedAt: new Date().toISOString(),
      error: payload.error ?? {
        code: "codex_stdio_canceled",
        category: "canceled",
        retryable: true,
        message: "user canceled current Code Agent request"
      }
    };
    if (message.retryInput) el.commandInput.value = message.retryInput;
  } else {
    state.chatMessages[index] = {
      ...message,
      title: "Code Agent 取消受阻",
      text: payload.error?.userMessage || response.error || "当前请求没有可取消的 in-flight Codex stdio session；输入和 trace 已保留。",
      status: "failed",
      threadId,
      sessionContinuity: failedSessionContinuity(message.sessionContinuity, { code: "cancel_blocked" }),
      runnerTrace,
      traceReplayStatus: lastTraceEventLabel(runnerTrace),
      updatedAt: new Date().toISOString(),
      error: payload.error ?? {
        code: "cancel_blocked",
        category: "cancel_blocked",
        retryable: true,
        message: response.error || "cancel blocked"
      }
    };
    if (message.retryInput) el.commandInput.value = message.retryInput;
  }
  renderAgentChatStatus(state.chatMessages[index].status, state.chatMessages[index]);
  renderCodeAgentSummary();
  renderConversation();
  renderDrafts();
  renderDevicePodPanel(state.liveSurface);
}

function stopRunningTraceStream(traceId) {
  const id = nonEmptyString(traceId);
  if (!id) return;
  const close = state.traceStreams.get(id);
  if (typeof close === "function") close();
  state.traceStreams.delete(id);
}

async function cancelAgentRequest({ traceId, conversationId, sessionId, threadId }) {
  return fetchJson("/v1/agent/chat/cancel", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Trace-Id": traceId,
      "Prefer": "respond-async"
    },
    timeoutMs: CODE_AGENT_CANCEL_TIMEOUT_MS,
    timeoutName: "Code Agent cancel",
    body: JSON.stringify({
      traceId,
      conversationId,
      sessionId,
      threadId
    })
  });
}

async function replayAgentTrace(messageId) {
  const index = state.chatMessages.findIndex((message) => message.id === messageId);
  if (index < 0) return;
  const message = state.chatMessages[index];
  if (!message.traceId) return;
  const response = await fetchJson(`/v1/agent/chat/trace/${encodeURIComponent(message.traceId)}`, {
    timeoutMs: Math.min(Math.max(API_TIMEOUT_MS, 5000), FULL_TRACE_REPLAY_TIMEOUT_MS),
    timeoutName: "Code Agent trace replay"
  });
  if (response.ok) {
    const runnerTrace = runnerTraceFromSnapshot({ ...response.data, fullTraceLoaded: true }, message.runnerTrace);
    state.chatMessages[index] = {
      ...message,
      runnerTrace,
      threadId: runnerTrace.threadId ?? message.threadId,
      traceReplayStatus: `完整 trace 已回放：${runnerTrace.events?.length ?? 0} 个原始 event；${lastTraceEventLabel(runnerTrace)}`,
      updatedAt: response.data?.updatedAt ?? new Date().toISOString()
    };
    if (shouldReconcileCodeAgentResult(state.chatMessages[index], runnerTrace)) {
      reconcileCodeAgentResult(message.id, { quiet: true });
    }
  } else {
    state.chatMessages[index] = {
      ...message,
      traceReplayStatus: response.error || "trace 回放失败",
      updatedAt: new Date().toISOString()
    };
  }
  renderCodeAgentSummary();
  renderConversation();
  renderDevicePodPanel(state.liveSurface);
}

function maybeReplayFullTraceForMessage(message) {
  if (!message || !message.traceId || message.runnerTrace?.eventsCompacted !== true) return;
  if (state.fullTraceReplayInFlight.has(message.traceId)) return;
  replayFullTrace(message.id, { quiet: true });
}

async function replayFullTrace(messageId, options = {}) {
  const index = state.chatMessages.findIndex((message) => message.id === messageId);
  if (index < 0) return false;
  const message = state.chatMessages[index];
  if (!message.traceId) return false;
  if (state.fullTraceReplayInFlight.has(message.traceId)) return false;
  state.fullTraceReplayInFlight.add(message.traceId);
  try {
    const response = await fetchJson(`/v1/agent/chat/trace/${encodeURIComponent(message.traceId)}`, {
      timeoutMs: Math.min(Math.max(API_TIMEOUT_MS, 5000), FULL_TRACE_REPLAY_TIMEOUT_MS),
      timeoutName: "Code Agent full trace replay"
    });
    if (!response.ok) return false;
    const currentIndex = state.chatMessages.findIndex((item) => item.id === messageId);
    if (currentIndex < 0) return false;
    const current = state.chatMessages[currentIndex];
    const runnerTrace = runnerTraceFromSnapshot({ ...response.data, fullTraceLoaded: true }, current.runnerTrace);
    state.chatMessages[currentIndex] = {
      ...current,
      runnerTrace,
      threadId: runnerTrace.threadId ?? current.threadId,
      traceReplayStatus: `完整 trace 已回放：${runnerTrace.events?.length ?? 0} 个原始 event；${lastTraceEventLabel(runnerTrace)}`,
      updatedAt: response.data?.updatedAt ?? new Date().toISOString()
    };
    if (shouldReconcileCodeAgentResult(state.chatMessages[currentIndex], runnerTrace)) {
      reconcileCodeAgentResult(messageId, { quiet: true });
    }
    if (options.quiet !== true) {
      renderCodeAgentSummary();
      renderConversation();
      renderDevicePodPanel(state.liveSurface);
    } else {
      renderConversation();
    }
    return true;
  } finally {
    state.fullTraceReplayInFlight.delete(message.traceId);
  }
}

function lastTraceEventLabel(runnerTrace) {
  const event = runnerTrace?.lastEvent ?? (Array.isArray(runnerTrace?.events) ? runnerTrace.events.at(-1) : null);
  if (!event) return "lastEvent=none";
  return `lastEvent=${event.label ?? `${event.type ?? "event"}:${event.status ?? "observed"}`}`;
}

function messageSessionContinuityPanel(message) {
  if (message.role !== "agent" || message.status === "running") return null;
  const continuity = message.sessionContinuity ?? completedSessionContinuity(message, pendingSessionContinuity({
    conversationId: message.conversationId,
    sessionId: message.sessionId,
    threadId: message.threadId,
    retryOf: message.retryOf
  }));
  if (!continuity) return null;
  const fields = [
    ["状态", continuity.label],
    ["conversation", continuity.returned?.conversationId ?? message.conversationId],
    ["session", continuity.returned?.sessionId ?? message.sessionId ?? "未确认"],
    ["thread", continuity.returned?.threadId ?? message.threadId ?? "未确认"],
    ["lifecycle", message.sessionLifecycleStatus ?? message.sessionSummary?.status ?? message.session?.lifecycleStatus],
    ["提示", message.sessionSummary?.userMessage ?? message.sessionLifecycle?.userMessage],
    ["requestedSession", continuity.requested?.sessionId],
    ["requestedThread", continuity.requested?.threadId],
    ["retryOf", continuity.requested?.retryOf ?? message.retryOf],
    ["missing", continuity.missing?.join("、")],
    ["changed", continuity.changed?.join("、")]
  ];
  const list = document.createElement("div");
  list.className = "message-session-grid";
  for (const [label, value] of fields) {
    if (value === undefined || value === null || value === "") continue;
    const item = document.createElement("div");
    item.className = "message-session-row";
    item.append(textSpan(label, "message-session-key"), textSpan(value, "message-session-value mono"));
    if (label === "conversation" || label === "session" || label === "thread") {
      item.append(copyButton(value, label));
    }
    list.append(item);
  }
  return messageCompactDetails({
    className: "message-session-context",
    tone: continuity.tone,
    badgeLabel: continuity.label,
    badgeTone: continuity.tone,
    summary: continuity.summary,
    dialogTitle: "会话明细",
    body: list
  });
}

function messagePendingContextPanel(message) {
  if (message.status !== "running") return null;
  const continuity = message.sessionContinuity ?? pendingSessionContinuity({
    conversationId: message.conversationId,
    sessionId: message.sessionId,
    threadId: message.threadId,
    retryOf: message.retryOf
  });
  const fields = [
    ["状态", continuity.label],
    ["traceId", message.traceId],
    ["conversation", message.conversationId],
    ["session", message.sessionId ?? message.runnerTrace?.sessionId ?? "等待后端分配"],
    ["thread", message.threadId ?? message.runnerTrace?.threadId ?? "等待后端分配"],
    ["sessionStatus", message.runnerTrace?.sessionStatus],
    ["lifecycle", message.runnerTrace?.sessionLifecycleStatus],
    ["activityTimeout", `${formatTraceDuration(CODE_AGENT_TIMEOUT_MS)} 无新事件`]
  ];
  const section = document.createElement("section");
  section.className = "message-pending-context tone-border-pending";
  const header = document.createElement("div");
  header.className = "message-pending-head";
  header.append(badge("处理中", "pending"), textSpan(continuity.summary, "message-pending-summary"));
  const list = document.createElement("div");
  list.className = "message-pending-grid";
  for (const [label, value] of fields) {
    if (value === undefined || value === null || value === "") continue;
    const item = document.createElement("div");
    item.className = "message-pending-row";
    item.append(textSpan(label, "message-pending-key"), textSpan(value, "message-pending-value mono"));
    if (label === "traceId" || label === "conversation" || label === "session") {
      item.append(copyButton(value, label));
    }
    list.append(item);
  }
  section.append(header, list);
  return section;
}


function messageRuntimePathPanel(message) {
  if (message.role !== "agent") return null;
  const runtimePath = codeAgentRuntimePathFromMessage(message);
  if (!runtimePath) return null;
  const rows = document.createElement("div");
  rows.className = "message-runtime-grid";
  for (const row of runtimePath.rows) {
    const item = document.createElement("div");
    item.className = `message-runtime-row${row.missing ? " message-runtime-row-missing" : ""}`;
    item.append(textSpan(row.label, "message-runtime-key"), textSpan(row.value, "message-runtime-value mono"));
    if (!row.missing && (row.label === "providerTrace.command" || row.label === "providerTrace.terminalStatus" || row.label === "protocol")) {
      item.append(copyButton(row.value, row.label));
    }
    rows.append(item);
  }
  if (runtimePath.missingFields.length > 0) {
    const item = document.createElement("div");
    item.className = "message-runtime-row message-runtime-row-missing message-runtime-row-wide";
    item.append(
      textSpan("缺失字段", "message-runtime-key"),
      textSpan(runtimePath.missingFields.join(", "), "message-runtime-value mono")
    );
    rows.append(item);
  }
  const details = messageCompactDetails({
    className: "message-runtime-path",
    tone: runtimePath.tone,
    badgeLabel: runtimePath.label,
    badgeTone: runtimePath.tone,
    summary: runtimePath.summary,
    dialogTitle: "运行路径明细",
    body: rows
  });
  details.dataset.runtimePathKind = runtimePath.kind;
  return details;
}

function messageCompactDetails({ className, tone, badgeLabel, badgeTone, summary, dialogTitle, body }) {
  const section = document.createElement("section");
  section.className = `${className} message-compact-details tone-border-${toneClass(tone)}`;
  const trigger = document.createElement("button");
  trigger.type = "button";
  trigger.className = "message-compact-summary";
  trigger.setAttribute("aria-haspopup", "dialog");
  trigger.append(
    badge(badgeLabel, badgeTone),
    textSpan(summary, "message-compact-summary-text")
  );
  trigger.addEventListener("click", () => {
    openWorkbenchDialog({
      title: dialogTitle,
      body,
      restoreFocus: trigger
    });
  });
  section.append(trigger);
  return section;
}

function boundedJson(value, maxLength = 6000) {
  let text = "";
  try {
    text = JSON.stringify(value, null, 2);
  } catch {
    text = String(value ?? "");
  }
  return text.length > maxLength ? `${text.slice(0, maxLength)}\n...字段已截断` : text;
}

function messageTracePanel(message) {
  const trace = message.runnerTrace && typeof message.runnerTrace === "object" ? message.runnerTrace : null;
  if (!trace && !message.traceId) return null;
  const details = document.createElement("details");
  details.className = "message-trace";
  const traceUiKey = messageTraceUiKey(message);
  if (traceUiKey) details.dataset.traceUiKey = traceUiKey;
  const storedOpen = traceUiKey ? state.traceDetailsOpen.get(traceUiKey) : undefined;
  details.open = typeof storedOpen === "boolean" ? storedOpen : defaultTraceDetailsOpen(message);
  if (traceUiKey) {
    details.addEventListener("toggle", () => {
      state.traceDetailsOpen.set(traceUiKey, details.open);
    });
  }
  const summary = document.createElement("summary");
  summary.className = "message-meta";
  summary.textContent = runnerTraceHeadline(message, trace);
  const list = document.createElement("ol");
  list.className = "message-trace-events";
  if (traceUiKey) {
    list.dataset.traceUiKey = traceUiKey;
    for (const eventName of ["wheel", "touchstart", "pointerdown"]) {
      list.addEventListener(eventName, () => markTraceScrollIntent(traceUiKey), { passive: true });
    }
    list.addEventListener("keydown", (event) => {
      if (isScrollIntentKey(event.key)) markTraceScrollIntent(traceUiKey);
    });
    list.addEventListener("scroll", () => rememberTraceScrollPosition(traceUiKey, list), { passive: true });
  }
  const events = Array.isArray(trace?.events) ? trace.events : [];
  const rows = traceDisplayRows(trace, events);
  if (events.length === 0) {
    const item = document.createElement("li");
    item.textContent = `trace=${message.traceId ?? "pending"}；等待后端事件。`;
    list.append(item);
  } else {
    const toolbar = messageTraceToolbar(message, trace, events, rows);
    list.dataset.traceMode = "all";
    renderTraceEventList(list, rows);
    details.append(summary, toolbar, list);
    return details;
  }
  details.append(summary, list);
  return details;
}

function messageTraceUiKey(message) {
  const traceId = nonEmptyString(message.traceId);
  const messageId = nonEmptyString(message.id ?? message.messageId);
  if (!traceId && !messageId) return null;
  return `${messageId ?? "message"}:${traceId ?? "trace"}`;
}

function defaultTraceDetailsOpen(message) {
  return ["running", "completed", "source", "failed", "timeout", "canceled", "error"].includes(message.status);
}

function messageTraceToolbar(message, trace, events, rows) {
  const toolbar = document.createElement("div");
  toolbar.className = "message-trace-toolbar";
  const rawTotal = Number.isInteger(trace?.eventCount) ? trace.eventCount : events.length;
  const count = textSpan(messageTraceCountText(trace, rawTotal, events.length, rows.length), "message-trace-count");
  toolbar.append(count);
  toolbar.append(traceActionButton("复制 JSON", () => copyTextToClipboard(messageTraceJson(message, trace, events)), "复制完整 trace JSON"));
  toolbar.append(traceActionButton("下载 trace", () => downloadTraceJson(message, trace, events), "下载完整 trace JSON 文件"));
  return toolbar;
}

function messageTraceCountText(trace, rawTotal, loadedTotal, readableTotal) {
  if (trace?.eventsCompacted === true && trace?.fullTraceLoaded !== true) {
    return `完整 trace 回放中 / 当前可读事件 ${readableTotal} / 已载入原始 ${loadedTotal} / 后端原始 ${rawTotal}`;
  }
  return `显示全部可读事件 ${readableTotal} / 已载入原始 ${loadedTotal} / 后端原始 ${rawTotal}`;
}

function renderTraceEventList(list, rows) {
  patchTraceEventList(list, rows.map((row, index) => traceEventRowNode(row, index)));
}

function patchTraceEventList(list, nextItems) {
  const currentById = new Map();
  for (const current of [...list.children]) {
    const rowId = current.dataset.traceRowId;
    if (rowId && !currentById.has(rowId)) currentById.set(rowId, current);
  }
  const retained = new Set();
  for (let index = 0; index < nextItems.length; index += 1) {
    const next = nextItems[index];
    const rowId = next.dataset.traceRowId;
    const current = rowId ? currentById.get(rowId) : null;
    const item = current && !retained.has(current) ? current : next;
    if (item === current) patchTraceRowElement(current, next);
    const before = list.children[index] ?? null;
    if (before !== item) list.insertBefore(item, before);
    retained.add(item);
  }
  for (const current of [...list.children]) {
    if (!retained.has(current)) current.remove();
  }
}

function patchTraceRowElement(current, next) {
  current.className = next.className;
  current.dataset.traceRowKey = next.dataset.traceRowKey ?? "";
  current.dataset.traceRowId = next.dataset.traceRowId ?? "";
  const currentHeader = current.querySelector(".message-trace-line");
  const nextHeader = next.querySelector(".message-trace-line");
  if (currentHeader && nextHeader) {
    currentHeader.className = nextHeader.className;
    if (currentHeader.textContent !== nextHeader.textContent) currentHeader.textContent = nextHeader.textContent;
  } else if (!currentHeader && nextHeader) {
    current.prepend(nextHeader);
  } else if (currentHeader && !nextHeader) {
    currentHeader.remove();
  }
  const currentBody = current.querySelector(".message-trace-body");
  const nextBody = next.querySelector(".message-trace-body");
  if (currentBody && nextBody) {
    patchTraceBodyElement(currentBody, nextBody);
  } else if (!currentBody && nextBody) {
    current.append(nextBody);
  } else if (currentBody && !nextBody) {
    currentBody.remove();
  }
}

function patchTraceBodyElement(currentBody, nextBody) {
  const position = elementScrollPosition(currentBody);
  currentBody.className = nextBody.className;
  currentBody.dataset.traceBodyId = nextBody.dataset.traceBodyId ?? "";
  currentBody.dataset.traceBodyFormat = nextBody.dataset.traceBodyFormat ?? "text";
  if (currentBody.dataset.traceBodyText !== nextBody.dataset.traceBodyText) {
    currentBody.dataset.traceBodyText = nextBody.dataset.traceBodyText ?? "";
    renderTraceBodyContent(currentBody, currentBody.dataset.traceBodyText, currentBody.dataset.traceBodyFormat);
  }
  restoreElementScrollPosition(currentBody, position);
  rememberTraceBodyScrollPosition(currentBody);
}

function traceEventRowNode(row, index = 0) {
  const item = document.createElement("li");
  item.className = `message-trace-row tone-border-${toneClass(row.tone)}`;
  const rowId = traceRowId(row, index);
  item.dataset.traceRowId = rowId;
  item.dataset.traceRowKey = traceRowKey(row);
  const header = document.createElement("div");
  header.className = "message-trace-line";
  header.textContent = row.header;
  item.append(header);
  if (row.body) {
    const body = document.createElement(row.bodyFormat === "markdown" ? "div" : "pre");
    body.className = row.bodyFormat === "markdown" ? "message-trace-body message-trace-markdown message-copy-markdown" : "message-trace-body";
    body.dataset.traceBodyId = rowId;
    body.dataset.traceBodyFormat = row.bodyFormat === "markdown" ? "markdown" : "text";
    body.dataset.traceBodyText = row.body;
    installTraceBodyScrollListeners(body);
    renderTraceBodyContent(body, row.body, body.dataset.traceBodyFormat);
    item.append(body);
  }
  return item;
}

function renderTraceBodyContent(body, text, format = "text") {
  if (format === "markdown") {
    try {
      body.innerHTML = renderMessageMarkdown(text);
      hardenRenderedMarkdown(body);
    } catch (error) {
      body.textContent = text || `Markdown 渲染失败：${error.message}`;
    }
    return;
  }
  body.textContent = text;
}

function installTraceBodyScrollListeners(body) {
  for (const eventName of ["wheel", "touchstart", "pointerdown"]) {
    body.addEventListener(eventName, () => markTraceBodyScrollIntent(body), { passive: true });
  }
  body.addEventListener("keydown", (event) => {
    if (isScrollIntentKey(event.key)) markTraceBodyScrollIntent(body);
  });
  body.addEventListener("scroll", () => rememberTraceBodyScrollPosition(body), { passive: true });
}

function traceRowId(row, index = 0) {
  if (row?.rowId) return String(row.rowId);
  if (row?.seq !== null && row?.seq !== undefined) return `event:${row.seq}`;
  return `row:${index}:${traceRowKey(row)}`;
}

function traceRowKey(row) {
  return `${row.header}\n${row.body ?? ""}\n${row.bodyFormat ?? "text"}\n${row.tone ?? ""}`;
}