import { renderIntakePanel } from "./intake-ui.js";
import { getActiveQuestions, renderQuestionsCard } from "./questions-ui.js";
import { displayWorkerLabel, formatWorkerDisplayTitle } from "./display-labels.js";

const HIDE_KINDS = new Set(["worker_stub"]);

/** 中间对话区不展示的内部调度消息（仅出现在右侧「历史」） */
const FEED_HIDDEN_KINDS = new Set([
  "agent_tool",
  "orchestrator_decision",
  "worker_running",
]);

const MSG_CLASS = {
  user_input: "user",
  agent_tool: "agent",
  orchestrator_decision: "agent",
  orchestrator_thinking: "agent",
  orchestrator_prompt: "agent",
  orchestrator_assessment: "agent",
  worker_running: "skill",
  worker_output: "skill",
  worker_questions: "questions",
  error: "error",
};

const MSG_LABEL = {
  user_input: "你",
  agent_tool: "工具",
  orchestrator_decision: "编排器",
  orchestrator_thinking: "编排器 · 思考",
  orchestrator_prompt: "编排器",
  orchestrator_assessment: "编排器 · 内容评价",
  worker_running: "执行单元",
  worker_output: "执行单元",
  worker_questions: "提问",
  error: "错误",
  system_info: "系统",
};

function esc(s) {
  return String(s)
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

function renderThinkingBlock(thinking, { open = false } = {}) {
  const text = (thinking ?? "").trim();
  if (!text) return "";
  return `<details class="msg-thinking"${open ? " open" : ""}>
    <summary>思考过程</summary>
    <pre class="msg-thinking-body">${esc(text)}</pre>
  </details>`;
}

function renderLiveStreamBody(live) {
  if (!live) return "…";
  const parts = [];
  if (live.thinking?.trim()) {
    parts.push(
      `<section class="msg-live-section"><header>思考</header><pre class="msg-live-pre">${esc(live.thinking.trim())}</pre></section>`,
    );
  }
  if (live.output?.trim()) {
    parts.push(
      `<section class="msg-live-section"><header>输出</header><pre class="msg-live-pre">${esc(live.output.trim())}</pre></section>`,
    );
  }
  return parts.length ? parts.join("") : "…";
}

function fmtTime(iso) {
  if (!iso) return "";
  return new Date(iso).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
}

function msgLabel(msg) {
  const k = msg.kind ?? (msg.role === "user" ? "user_input" : "system_info");
  if (k.startsWith("worker") && msg.actor) {
    if (k === "worker_questions") return formatWorkerDisplayTitle(msg.actor, "questions");
    if (k === "worker_output") return formatWorkerDisplayTitle(msg.actor, "output");
    if (k === "worker_running") return formatWorkerDisplayTitle(msg.actor, "running");
    return displayWorkerLabel(msg.actor);
  }
  return MSG_LABEL[k] ?? k;
}

function canEditMessage(msg) {
  return msg.role === "user";
}

function canRefreshMessage(msg) {
  if (msg.role === "user") return false;
  const kind = msg.kind ?? "system_info";
  return kind === "worker_questions" || kind === "worker_output";
}

function renderMsgVariantBadge(msg) {
  const total = msg.branchTotal ?? 1;
  if (total <= 1) return "";
  const index = (msg.branchIndex ?? 0) + 1;
  return `<span class="msg-variant-badge">${index}/${total}</span>`;
}

function hideMsgMenu() {
  const menu = document.getElementById("msg-action-menu");
  if (menu) menu.hidden = true;
  msgMenuState.messageId = null;
}

const msgMenuState = { messageId: null, handlers: null };

function showMsgMenu(card, x, y) {
  const menu = document.getElementById("msg-action-menu");
  if (!menu || !card) return;
  const isReview = card.dataset.review === "1";
  const canEdit = !isReview && card.dataset.canEdit === "1";
  const canDelete = !isReview && Boolean(card.dataset.messageId);
  const hasContext = card.dataset.hasContext === "1";
  const editBtn = document.getElementById("msg-menu-edit");
  const delBtn = document.getElementById("msg-menu-delete");
  const ctxBtn = document.getElementById("msg-menu-context");
  if (editBtn) editBtn.toggleAttribute("hidden", !canEdit);
  if (delBtn) delBtn.toggleAttribute("hidden", !canDelete);
  if (ctxBtn) ctxBtn.toggleAttribute("hidden", !hasContext);
  menu.hidden = false;
  menu.style.left = `${x}px`;
  menu.style.top = `${y}px`;
  msgMenuState.messageId = card.dataset.messageId ?? null;
  const rect = menu.getBoundingClientRect();
  if (rect.right > window.innerWidth) {
    menu.style.left = `${Math.max(4, window.innerWidth - rect.width - 4)}px`;
  }
  if (rect.bottom > window.innerHeight) {
    menu.style.top = `${Math.max(4, window.innerHeight - rect.height - 4)}px`;
  }
}

function wireMsgActionMenu(handlers) {
  const menu = document.getElementById("msg-action-menu");
  if (!menu) return;
  msgMenuState.handlers = handlers;
  if (menu.dataset.wired) return;
  menu.dataset.wired = "1";
  menu.addEventListener("click", async (e) => {
    const action = e.target.closest("[data-msg-menu-action]")?.getAttribute("data-msg-menu-action");
    const messageId = msgMenuState.messageId;
    hideMsgMenu();
    if (!messageId || !action) return;
    const card = document.querySelector(`[data-message-id="${messageId}"]`);
    const bodyEl = card?.querySelector(".msg-body:not(.msg-body-editing)");
    const body = bodyEl?.textContent ?? card?.dataset.originalText ?? "";

    if (action === "copy") {
      try {
        await navigator.clipboard.writeText(body);
      } catch {
        /* ignore */
      }
      return;
    }
    if (action === "view-context") {
      msgMenuState.handlers?.onViewContext?.(messageId);
      return;
    }
    if (action === "edit") {
      startInlineEdit(card, body);
      return;
    }
    if (action === "delete") {
      if (!confirm("删除此消息及之后的对话？")) return;
      msgMenuState.handlers?.onDeleteMessage?.(messageId);
    }
  });
}

function wireMessageContextMenu(feed, handlers) {
  if (!feed || feed.dataset.contextWired) return;
  feed.dataset.contextWired = "1";
  wireMsgActionMenu(handlers);
  feed.addEventListener("contextmenu", (e) => {
    const bubble = e.target.closest(".msg-bubble");
    const card = e.target.closest("[data-message-id]");
    if (!bubble || !card || card.classList.contains("msg-pending")) return;
    e.preventDefault();
    showMsgMenu(card, e.clientX, e.clientY);
  });
}

function startInlineEdit(card, bodyText) {
  if (!card || card.classList.contains("is-editing")) return;
  card.classList.add("is-editing");
  card.dataset.originalText = bodyText;
  card.querySelector(".msg-foot")?.setAttribute("hidden", "");

  const bodyEl = card.querySelector(".msg-body");
  if (!bodyEl) return;

  const messageId = card.dataset.messageId ?? "";
  bodyEl.outerHTML = `
    <div class="msg-body msg-body-editing">
      <textarea class="msg-edit-input" rows="4" aria-label="编辑消息">${esc(bodyText)}</textarea>
      <div class="msg-edit-bar">
        <button type="button" class="btn" data-msg-action="edit-cancel" data-msg-id="${esc(messageId)}">取消</button>
        <button type="button" class="btn btn-primary" data-msg-action="edit-save" data-msg-id="${esc(messageId)}">保存并重新生成</button>
      </div>
      <p class="msg-edit-hint">Ctrl/⌘ + Enter 保存 · Esc 取消</p>
    </div>`;

  const ta = card.querySelector(".msg-edit-input");
  if (ta) {
    ta.focus();
    const len = ta.value.length;
    ta.setSelectionRange(len, len);
    ta.style.height = "auto";
    ta.style.height = `${Math.min(ta.scrollHeight, 320)}px`;
    ta.addEventListener("input", () => {
      ta.style.height = "auto";
      ta.style.height = `${Math.min(ta.scrollHeight, 320)}px`;
    });
    ta.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        e.preventDefault();
        cancelInlineEdit(card);
      }
      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
        e.preventDefault();
        card.querySelector("[data-msg-action=edit-save]")?.click();
      }
    });
  }
}

function cancelInlineEdit(card) {
  if (!card) return;
  const original = card.dataset.originalText ?? "";
  card.classList.remove("is-editing");
  delete card.dataset.originalText;
  card.querySelector(".msg-foot")?.removeAttribute("hidden");
  const editing = card.querySelector(".msg-body-editing");
  if (editing) {
    editing.outerHTML = `<div class="msg-body">${esc(original)}</div>`;
  }
}

function wireMessageFeedActions(feed, handlers) {
  if (!feed || feed.dataset.actionsWired) return;
  feed.dataset.actionsWired = "1";
  feed.addEventListener("click", async (e) => {
    const btn = e.target.closest("[data-msg-action]");
    if (!btn || btn.disabled) return;
    const action = btn.getAttribute("data-msg-action");
    const messageId = btn.getAttribute("data-msg-id");
    if (!messageId && action !== "edit-cancel" && action !== "edit-save") return;

    const card = btn.closest("[data-message-id]");
    const bodyEl = card?.querySelector(".msg-body:not(.msg-body-editing)");
    const body = bodyEl?.textContent ?? card?.dataset.originalText ?? "";

    if (action === "copy") {
      const copyText =
        card?.querySelector(".msg-edit-input")?.value ??
        card?.querySelector(".msg-body")?.textContent ??
        body;
      try {
        await navigator.clipboard.writeText(copyText);
      } catch {
        /* ignore */
      }
      return;
    }

    if (action === "edit") {
      startInlineEdit(card, body);
      return;
    }

    if (action === "edit-cancel") {
      cancelInlineEdit(card);
      return;
    }

    if (action === "edit-save") {
      const ta = card?.querySelector(".msg-edit-input");
      const next = ta?.value?.trim() ?? "";
      const original = (card?.dataset.originalText ?? body).trim();
      cancelInlineEdit(card);
      if (!next || next === original) return;
      handlers.onEditMessage?.(messageId, next);
      return;
    }

    if (action === "refresh") {
      handlers.onRefreshMessage?.(messageId);
      return;
    }

    if (action === "variant-prev") {
      handlers.onSwitchVariant?.(messageId, "prev");
      return;
    }

    if (action === "variant-next") {
      handlers.onSwitchVariant?.(messageId, "next");
    }
  });
}

function msgBody(msg, view) {
  let body = (msg.body ?? msg.text ?? "").trim();
  if (msg.kind === "worker_questions") {
    if (getActiveQuestions(view)) {
      const qs = view.waitingReason?.questions ?? [];
      const n = Array.isArray(qs) ? qs.length : 0;
      return `提问中 · ${n || "?"} 题（请在下方询问卡作答）`;
    }
    if (!body) {
      const wr = view.waitingReason;
      if (wr?.kind === "worker_questions") {
        const qs = wr.questions ?? [];
        const prompts = qs.map((q) =>
          typeof q === "string" ? q : q?.prompt,
        ).filter(Boolean);
        if (prompts.length) body = prompts.map((q) => `- ${q}`).join("\n");
      }
      if (!body) body = "请补充当前 Worker 需要的信息。";
    }
  }
  return body;
}

function formatQuestionsHtml(body) {
  const lines = body
    .split(/\n+/)
    .map((l) => l.replace(/^[-*•]\s*/, "").trim())
    .filter(Boolean);
  if (lines.length <= 1) {
    return `<p class="msg-q-lead">${esc(body)}</p>`;
  }
  return `<ol class="msg-q-list">${lines.map((l) => `<li>${esc(l)}</li>`).join("")}</ol>`;
}

/** 旧会话 skill 选择提示，新流程不再展示 */
const SKILL_SELECTION_RE = /请选择创作 skill|请选择创作类型/;

/** @deprecated 旧会话可能仍处于 skill_selection；新作品不再展示选包 UI */
export function renderSkillPicker(_view, _onPick) {
  const el = document.getElementById("skill-picker");
  if (!el) return;
  el.hidden = true;
  el.innerHTML = "";
}

let activeAgentTab = "timeline";
let lastAutoTabReason = null;
let userPinnedAgentTab = false;

export function setAgentTab(tab, { user = false } = {}) {
  activeAgentTab = tab;
  if (user) userPinnedAgentTab = true;
  const tabs = document.getElementById("agent-tabs");
  tabs?.querySelectorAll(".agent-tab").forEach((btn) => {
    const id = btn.getAttribute("data-tab");
    const active = id === tab && !btn.hidden;
    btn.classList.toggle("active", active);
    btn.setAttribute("aria-selected", active ? "true" : "false");
  });
  for (const id of ["timeline", "review", "progress", "board"]) {
    const panel = document.getElementById(`agent-panel-${id}`);
    panel?.classList.toggle("active", tab === id);
    panel?.toggleAttribute("hidden", tab !== id);
  }
}

function wireAgentTabs() {
  const tabs = document.getElementById("agent-tabs");
  if (!tabs || tabs.dataset.wired) return;
  tabs.dataset.wired = "1";
  tabs.addEventListener("click", (e) => {
    const btn = e.target.closest(".agent-tab");
    if (!btn || btn.hidden) return;
    setAgentTab(btn.getAttribute("data-tab") ?? "timeline", { user: true });
  });
}

function hasUserMessages(view) {
  return (view.messages ?? []).some((m) => m.role === "user");
}

function isSkillSelectionMessage(msg) {
  const body = (msg.body ?? msg.text ?? "").trim();
  return SKILL_SELECTION_RE.test(body);
}

function isStartupPromptMessage(msg, view) {
  if (msg.role === "user") return false;
  const body = (msg.body ?? msg.text ?? "").trim();
  const prompt = (view.intakePrompt ?? "").trim();
  return Boolean(prompt && body === prompt);
}

function shouldShowInFeed(msg, view) {
  if (msg.role === "user") return true;
  const kind = msg.kind ?? "system_info";
  if (HIDE_KINDS.has(kind)) return false;
  if (FEED_HIDDEN_KINDS.has(kind)) return false;
  if (msg.compressed) return false;
  if (isSkillSelectionMessage(msg)) return false;
  if (
    view.waitingReason?.kind === "intake" &&
    !hasUserMessages(view) &&
    isStartupPromptMessage(msg, view)
  ) {
    return false;
  }
  if (kind === "worker_output" && view.waitingReason?.kind === "review_artifact") {
    return false;
  }
  if (kind === "orchestrator_prompt") return false;
  return true;
}

function maybeAutoSwitchTab(view) {
  const reason = view.waitingReason?.kind ?? null;
  // 创作验收改在主对话展示，不再自动跳到侧栏「验收」Tab
  if (reason === "review_artifact") {
    if (lastAutoTabReason !== "review_artifact" && activeAgentTab === "review") {
      setAgentTab("timeline");
    }
  } else if (!userPinnedAgentTab && reason === "worker_questions") {
    if (lastAutoTabReason !== "worker_questions" && activeAgentTab === "review") {
      setAgentTab("timeline");
    }
  }
  lastAutoTabReason = reason;
}

export function renderLifecycle(view) {
  const toggle = document.getElementById("lifecycle-toggle");
  if (!toggle) return;
  const stage = view.lifecycleStage ?? "design";
  document.body.dataset.lifecycle = stage;
  toggle.querySelectorAll("[data-stage]").forEach((btn) => {
    const s = btn.getAttribute("data-stage");
    btn.classList.toggle("active", s === stage);
    if (s === "play") {
      btn.disabled = !view.playReady;
      btn.title = view.playReady
        ? "进入游玩 / 写作"
        : "请先验收 Worker 集（创作定稿）后再切换";
    } else {
      btn.disabled = false;
    }
  });
}

export function renderSkillGuide(view) {
  wireAgentTabs();
  const progressTabBtn = document.getElementById("agent-tab-btn-progress");
  const list = document.getElementById("skill-guide-list");
  const workerPanel = document.getElementById("worker-set-user-panel");
  if (!list) return;

  const hasCatalog =
    view.lifecycleStage === "design" && (view.skillCatalog?.length ?? 0) > 0;
  const hasWorkerView = Boolean(
    view.workerSetView?.workers?.length || view.workerSetView?.contextTags?.length,
  );
  const hasFlowView = Boolean(view.creationFlowView?.steps?.length);
  const show = hasCatalog || hasWorkerView || hasFlowView;

  if (progressTabBtn) {
    progressTabBtn.hidden = !show;
  }

  if (workerPanel) {
    const parts = [];
    if (hasFlowView && view.lifecycleStage === "design") {
      parts.push(renderCreationFlowView(view.creationFlowView));
    }
    if (hasWorkerView && view.lifecycleStage === "design") {
      parts.push(renderWorkerSetUserView(view.workerSetView, { compact: true }));
    }
    workerPanel.innerHTML = parts.join("");
    workerPanel.hidden = !workerPanel.innerHTML;
  }

  if (!show) {
    list.innerHTML = "";
    if (activeAgentTab === "progress") setAgentTab("timeline");
    return;
  }

  list.innerHTML = (view.skillCatalog ?? [])
    .map(
      (s) => `
    <div class="skill-guide-item ${s.status}">
      <span class="skill-guide-dot"></span>
      <div>
        <div class="skill-guide-label">${esc(s.label)} <code>${esc(s.id)}</code>${s.runCount && s.runCount > 1 ? ` <span class="skill-guide-runs">×${s.runCount}</span>` : ""}</div>
        <div class="skill-guide-purpose">${esc(s.purpose)}</div>
      </div>
    </div>`,
    )
    .join("");
}

function renderTagList(tags, emptyLabel) {
  if (!tags?.length) {
    return `<div class="ws-tag-empty">${esc(emptyLabel)}</div>`;
  }
  return `<ol class="ws-tag-order">${tags
    .map((t, i) => {
      const filled =
        t.filled === true
          ? `<span class="ws-tag-filled" title="已写入黑板">✓</span>`
          : t.filled === false
            ? `<span class="ws-tag-pending" title="待写入">○</span>`
            : "";
      const note = t.note ? `<span class="ws-tag-note">${esc(t.note)}</span>` : "";
      return `<li><code>${esc(t.tag)}</code>${filled}${note}</li>`;
    })
    .join("")}</ol>`;
}

function howLabel(how) {
  if (how === "prompt_body") return "注入正文";
  if (how === "resident") return "常驻挂载";
  return "读入黑板";
}

function formatFocusBodyHtml(body) {
  if (body == null) return `<p class="ws-muted">（本块尚无正文，请在下方对话中补充）</p>`;
  if (typeof body === "string") {
    const t = body.trim();
    return t
      ? `<pre class="ws-focus-body-text">${esc(t)}</pre>`
      : `<p class="ws-muted">（本块尚无正文，请在下方对话中补充）</p>`;
  }
  try {
    const pretty = JSON.stringify(body, null, 2);
    return `<pre class="json-pretty ws-focus-body-json" tabindex="0"><code>${highlightJson(pretty)}</code></pre>`;
  } catch {
    return `<pre class="ws-focus-body-text">${esc(String(body))}</pre>`;
  }
}

function renderFocusUnitBanner(focusUnit) {
  if (!focusUnit) return "";
  const isContext =
    focusUnit.kind === "fixed" ||
    (typeof focusUnit.id === "string" &&
      (focusUnit.id.startsWith("fixed:") || focusUnit.id.startsWith("resident:")));
  const kindLabel =
    focusUnit.kind === "worker"
      ? "创造 Worker"
      : focusUnit.kind === "phase"
        ? "创作阶段"
        : "填充上下文";
  const hint = isContext
    ? "请重点审阅高亮区：这是本次要写入 / 验收的上下文正文。"
    : focusUnit.kind === "worker"
      ? "请重点审阅当前 Worker 规格；展示名应使用中文。"
      : "请重点审阅当前创作单位。";
  const bodyHtml = isContext || focusUnit.kind === "phase"
    ? `<div class="ws-focus-body">${formatFocusBodyHtml(focusUnit.body)}</div>`
    : "";
  return `<section class="ws-section ws-focus-banner" data-focus-kind="${esc(focusUnit.kind)}" data-focus-id="${esc(focusUnit.id)}">
    <div class="ws-focus-banner-head">
      <span class="ws-focus-mode">${esc(kindLabel)}</span>
      <span class="ws-focus-label">${esc(focusUnit.label)}</span>
      <code class="ws-focus-id">${esc(focusUnit.id)}</code>
    </div>
    <p class="ws-focus-hint">${esc(hint)}</p>
    ${bodyHtml}
  </section>`;
}

function renderContextTagCards(contextTags, opts = {}) {
  if (!contextTags?.length) return "";
  const compact = opts.compact === true;
  const focusId = opts.focusId || "";
  const focusContext = opts.focusContext === true;
  const fixedFirst = [...contextTags].sort((a, b) => {
    const rank = (k) => (k === "fixed" ? 0 : k === "resident" ? 1 : 2);
    return rank(a.kind) - rank(b.kind);
  });
  const cards = fixedFirst
    .filter((c) => (compact ? c.kind !== "board" : true))
    .map((c) => {
      const kindBadge =
        c.kind === "fixed"
          ? `<span class="ws-badge ws-badge-fixed">纲领</span>`
          : c.kind === "resident"
            ? `<span class="ws-badge ws-badge-resident">常驻</span>`
            : `<span class="ws-badge ws-badge-board">黑板</span>`;
      const filled =
        c.filled === true
          ? `<span class="ws-tag-filled" title="已有内容">✓</span>`
          : `<span class="ws-tag-pending" title="待写入">○</span>`;
      const mountChips = (c.mounts || [])
        .slice(0, compact ? 4 : 12)
        .map(
          (m) =>
            `<span class="ws-mount-chip" title="${esc(howLabel(m.how))}"><span class="ws-mount-how">${esc(howLabel(m.how))}</span>${esc(m.workerName)}</span>`,
        )
        .join("");
      const more =
        (c.mounts?.length ?? 0) > (compact ? 4 : 12)
          ? `<span class="ws-muted">+${c.mounts.length - (compact ? 4 : 12)}</span>`
          : "";
      const isFocus =
        focusId &&
        (c.id === focusId ||
          (focusId.startsWith("fixed:aesthetics") && c.id.startsWith("fixed:aesthetics")) ||
          (focusId === "fixed:aesthetics" && c.id.startsWith("fixed:aesthetics:")));
      const dim = focusContext && focusId && !isFocus ? " ws-dimmed" : "";
      const focusCls = isFocus ? " ws-context-focus" : "";
      return `<article class="ws-context-card kind-${esc(c.kind)}${focusCls}${dim}" data-tag-id="${esc(c.id)}">
        <header class="ws-context-card-head">
          <span class="ws-context-card-title">${esc(c.label)}</span>
          ${kindBadge}
          ${filled}
          ${isFocus ? `<span class="ws-badge ws-badge-focus">本次</span>` : ""}
        </header>
        ${c.preview && !compact ? `<p class="ws-context-preview">${esc(c.preview)}</p>` : ""}
        <div class="ws-mount-row">
          <span class="ws-label">塞进</span>
          <span class="ws-mount-summary">${esc(c.mountSummary || "尚未指定 Worker")}</span>
        </div>
        ${mountChips || more ? `<div class="ws-mount-chips">${mountChips}${more}</div>` : ""}
      </article>`;
    })
    .join("");
  if (!cards) return "";
  const sectionCls = focusContext ? " ws-section-focus-context" : "";
  return `<section class="ws-section ws-context-tags${sectionCls}">
    <h4>${focusContext ? "固定上下文 · 本次要填" : "固定上下文"}</h4>
    <p class="ws-muted ws-context-hint">${
      focusContext
        ? "高亮卡片是本次验收对象；其它块仅供对照。"
        : "与 Worker 解耦：先看纲领挂到谁，再看下方分工。同一块可挂多个 Worker。"
    }</p>
    <div class="ws-context-cards">${cards}</div>
  </section>`;
}

function renderWorkerSetUserView(userView, opts = {}) {
  if (!userView) return "";
  if (userView.parseError) {
    return `<div class="review-parse-error" role="alert">
      <div class="review-parse-error-title">规格无法解析</div>
      <p>${esc(userView.parseError)}</p>
      <p class="review-parse-error-hint">Worker 集必须是 JSON 对象。若模型把说明/提问写进了规格字段，请在下方发送修改意见，让它重写后再接受。</p>
    </div>`;
  }

  const compact = opts.compact === true;
  const parts = [];
  const focusUnit = userView.focusUnit;
  const focusId = focusUnit?.id || "";
  const focusContext =
    focusUnit?.kind === "fixed" ||
    (typeof focusId === "string" &&
      (focusId.startsWith("fixed:") || focusId.startsWith("resident:")));
  const focusWorkerRef =
    focusUnit?.kind === "worker" && focusId.startsWith("worker:")
      ? focusId.slice("worker:".length)
      : "";

  // 当前单位横幅：填充上下文时高亮正文；创造 worker 时标明焦点
  const focusBanner = renderFocusUnitBanner(focusUnit);
  if (focusBanner) parts.push(focusBanner);

  if (userView.headline) {
    parts.push(
      `<section class="ws-section ws-headline"><h4>这次体验</h4><p>${esc(userView.headline)}</p></section>`,
    );
  }

  if (userView.interactionParadigm) {
    parts.push(
      `<section class="ws-section"><h4>交互范式</h4><p>${esc(userView.interactionParadigm)}</p></section>`,
    );
  }

  if (userView.coreWorker) {
    parts.push(
      `<section class="ws-section"><h4>核心 Worker</h4><p><code>${esc(userView.coreWorker)}</code> — 负责推剧情并产出本轮实质内容</p></section>`,
    );
  }

  if (!compact && userView.reasoning) {
    parts.push(
      `<section class="ws-section"><h4>分工推理</h4><p class="ws-reasoning">${esc(userView.reasoning)}</p></section>`,
    );
  }

  if (userView.playModeLabel) {
    parts.push(
      `<section class="ws-section"><h4>游玩方式</h4><p><strong>${esc(userView.playModeLabel)}</strong>${userView.playModeHint ? `<span class="ws-muted"> — ${esc(userView.playModeHint)}</span>` : ""}</p></section>`,
    );
  }

  // 固定上下文独立区（在 worker 之前；填充模式下高亮本次块）
  const contextSection = renderContextTagCards(userView.contextTags, {
    compact,
    focusId,
    focusContext,
  });
  if (contextSection) parts.push(contextSection);

  if (userView.inputProtocol?.length && !userView.contextTags?.some((c) => c.id === "fixed:input_protocol")) {
    const rows = userView.inputProtocol
      .map((p) => `<li><strong>${esc(p.label)}</strong>：${esc(p.value)}</li>`)
      .join("");
    parts.push(`<section class="ws-section"><h4>输入协议</h4><ul class="ws-list">${rows}</ul></section>`);
  }

  if (userView.workers?.length) {
    const cards = userView.workers
      .map((w) => {
        const isFocusWorker = focusWorkerRef && w.id === focusWorkerRef;
        const statusBadge =
          w.status === "gap"
            ? `<span class="ws-badge ws-badge-warn">待补 SKILL</span>`
            : `<span class="ws-badge ws-badge-ok">就绪</span>`;
        const idLine = w.id ? `<code class="ws-worker-id">${esc(w.id)}</code>` : "";
        const roleBadge = w.roleLabel
          ? `<span class="ws-badge ws-badge-role">${esc(w.roleLabel)}</span>`
          : "";
        const acceptBadge = w.acceptanceLabel
          ? `<span class="ws-badge ${w.acceptance === "review" ? "ws-badge-review" : "ws-badge-continue"}">${esc(w.acceptanceLabel)}</span>`
          : "";
        const explicitNote = w.context?.explicit
          ? ""
          : `<div class="ws-inferred">部分读入来自包内默认模板</div>`;
        const rationale = w.rationale
          ? `<div class="ws-row ws-rationale"><span class="ws-label">为何需要</span><span>${esc(w.rationale)}</span></div>`
          : "";
        const merge = w.mergeConsidered
          ? `<div class="ws-row ws-merge"><span class="ws-label">合并考量</span><span>${esc(w.mergeConsidered)}</span></div>`
          : "";
        const reads = w.readsSummary
          ? `<div class="ws-row ws-reads"><span class="ws-label">上下文</span><span>${esc(w.readsSummary)}</span></div>`
          : "";
        const dim =
          focusWorkerRef && !isFocusWorker
            ? " ws-dimmed"
            : focusContext
              ? " ws-dimmed"
              : "";
        const focusCls = isFocusWorker ? " ws-worker-focus" : "";

        return `<article class="ws-worker-card ${w.status}${focusCls}${dim}">
          <header class="ws-worker-head">
            <span class="ws-worker-order">${w.order}</span>
            <span class="ws-worker-name">${esc(w.displayName)}</span>
            ${isFocusWorker ? `<span class="ws-badge ws-badge-focus">本次</span>` : ""}
            ${roleBadge}
            ${acceptBadge}
            ${statusBadge}
          </header>
          ${idLine}
          <div class="ws-row"><span class="ws-label">用来干嘛</span><span>${esc(w.purpose)}</span></div>
          <div class="ws-row"><span class="ws-label">何时调用</span><span>${esc(w.invokeWhen)}</span></div>
          ${rationale}
          ${merge}
          ${reads}
          ${w.gapNote ? `<div class="ws-gap">${esc(w.gapNote)}</div>` : ""}
          <div class="ws-writes">
            <span class="ws-label">写入黑板</span>
            ${w.writes?.length ? w.writes.map((t) => `<code>${esc(t)}</code>`).join(" ") : "—"}
          </div>
          ${explicitNote}
        </article>`;
      })
      .join("");
    parts.push(
      `<section class="ws-section"><h4>游玩 Worker${compact ? "（摘要）" : ""}${focusWorkerRef ? " · 本次规格" : ""}</h4><div class="ws-worker-cards">${cards}</div></section>`,
    );
  }

  if (!compact && userView.tagFlow?.length) {
    const flow = userView.tagFlow
      .map(
        (edge) =>
          `<div class="ws-flow-edge"><span>${edge.from.map((t) => `<code>${esc(t)}</code>`).join(" + ")}</span><span class="ws-flow-arrow">→</span><span>${edge.to.map((t) => `<code>${esc(t)}</code>`).join(" + ")}</span></div>`,
      )
      .join("");
    parts.push(`<section class="ws-section"><h4>数据怎么流</h4><div class="ws-flow">${flow}</div></section>`);
  }

  if (userView.creationUnits?.length) {
    const units = userView.creationUnits
      .map((u) => {
        const kindLabel =
          u.kind === "worker"
            ? "Worker"
            : u.kind === "phase"
              ? "阶段"
              : u.flavor === "resident"
                ? "常驻块"
                : "固定上下文";
        const filled = u.accepted
          ? "已验收"
          : u.current
            ? "进行中"
            : u.filled
              ? "已写"
              : "待谈";
        const weight = u.weighty ? " · 纲领" : "";
        const cls = u.accepted
          ? "ws-task-filled"
          : u.current
            ? "ws-task-planned ws-unit-current"
            : "ws-task-planned";
        return `<li class="ws-task ${cls}"><span class="ws-unit-kind">${esc(kindLabel)}${esc(weight)}</span><span>${esc(u.label)}</span><span class="ws-task-status">${filled}</span>${u.detail ? `<span class="ws-muted"> — ${esc(u.detail)}</span>` : ""}</li>`;
      })
      .join("");
    parts.push(
      `<section class="ws-section"><h4>创作单位</h4><p class="ws-muted" style="margin:0 0 0.5rem">纲领与 Worker 同级；不必先写完 Worker 再填上下文。</p><ul class="ws-task-list">${units}</ul></section>`,
    );
  }

  if (userView.designTasks?.length) {
    const tasks = userView.designTasks
      .map((t) => {
        const cls =
          t.status === "filled"
            ? "ws-task-filled"
            : t.status === "skipped"
              ? "ws-task-skipped"
              : "ws-task-planned";
        const statusLabel =
          t.status === "filled" ? "已填" : t.status === "skipped" ? "跳过" : "待填";
        return `<li class="ws-task ${cls}"><span>${esc(t.label)}</span><code>${esc(t.id)}</code><span class="ws-task-status">${statusLabel}</span>${t.skipReason ? `<span class="ws-muted"> — ${esc(t.skipReason)}</span>` : ""}</li>`;
      })
      .join("");
    parts.push(
      `<section class="ws-section"><h4>设计阶段还需准备</h4><ul class="ws-task-list">${tasks}</ul></section>`,
    );
  }

  if (userView.openQuestions?.length) {
    parts.push(
      `<section class="ws-section ws-open"><h4>待澄清</h4><ul class="ws-list">${userView.openQuestions.map((q) => `<li>${esc(q)}</li>`).join("")}</ul></section>`,
    );
  }

  if (userView.notes && !compact) {
    parts.push(`<section class="ws-section"><h4>补充说明</h4><p>${esc(userView.notes)}</p></section>`);
  }

  return `<div class="ws-user-view">${parts.join("")}</div>`;
}

/** 尝试把正文美化为缩进 JSON；失败则原样 pre */
function formatArtifactBodyHtml(body) {
  const trimmed = (body || "").trim();
  if (!trimmed) {
    return `<p class="empty-sm">（无正文）</p>`;
  }

  const tryParse = (text) => {
    try {
      return JSON.parse(text);
    } catch {
      return null;
    }
  };

  let parsed = tryParse(trimmed);
  if (!parsed) {
    const start = trimmed.indexOf("{");
    const end = trimmed.lastIndexOf("}");
    if (start >= 0 && end > start) {
      parsed = tryParse(trimmed.slice(start, end + 1));
    }
  }
  if (!parsed) {
    const start = trimmed.indexOf("[");
    const end = trimmed.lastIndexOf("]");
    if (start >= 0 && end > start) {
      parsed = tryParse(trimmed.slice(start, end + 1));
    }
  }

  if (parsed != null && typeof parsed === "object") {
    const pretty = JSON.stringify(parsed, null, 2);
    return `<pre class="json-pretty" tabindex="0"><code>${highlightJson(pretty)}</code></pre>`;
  }

  return `<pre class="review-feed-plain">${esc(trimmed)}</pre>`;
}

/** 极简 JSON 着色（仅 key / string / 其它） */
function highlightJson(pretty) {
  return pretty
    .split("\n")
    .map((line) => {
      const m = /^(\s*)("(?:\\.|[^"\\])*")(\s*:\s*)(.*)$/.exec(line);
      if (m) {
        const [, indent, key, colon, rest] = m;
        let valueHtml = esc(rest);
        if (/^"/.test(rest.trim())) {
          valueHtml = `<span class="json-str">${esc(rest)}</span>`;
        } else if (/^(true|false|null)\b/.test(rest.trim())) {
          valueHtml = `<span class="json-lit">${esc(rest)}</span>`;
        } else if (/^-?\d/.test(rest.trim())) {
          valueHtml = `<span class="json-num">${esc(rest)}</span>`;
        }
        return `${indent}<span class="json-key">${esc(key)}</span>${esc(colon)}${valueHtml}`;
      }
      return esc(line);
    })
    .join("\n");
}

function renderCreationFlowView(flowView) {
  if (!flowView) return "";
  if (flowView.parseError) {
    return `<div class="review-parse-error" role="alert">
      <div class="review-parse-error-title">流程无法解析</div>
      <p>${esc(flowView.parseError)}</p>
      <p class="review-parse-error-hint">需要 JSON：steps 数组，每步含 name（与可选 id）、depends_on、可选 params；可含 status=open|closed。</p>
    </div>`;
  }
  if (!flowView.steps?.length) return "";

  const brief = flowView.brief
    ? `<p class="flow-brief">${esc(flowView.brief)}</p>`
    : "";
  const statusLabel =
    flowView.status === "open"
      ? "可继续追加"
      : flowView.status === "closed"
        ? "已收口"
        : "";
  const statusHtml = statusLabel
    ? `<p class="flow-status">${esc(statusLabel)}</p>`
    : "";
  const rows = flowView.steps
    .map((s) => {
      const deps =
        s.depends_on?.length > 0
          ? s.depends_on.map((d) => esc(d)).join("、")
          : "无";
      const occ =
        s.occurrence && s.occurrence > 1
          ? `<span class="flow-occ">第 ${esc(String(s.occurrence))} 次</span>`
          : s.repeatable
            ? `<span class="flow-occ">可反复</span>`
            : "";
      const nameLabel =
        s.id && s.id !== s.name
          ? `${esc(s.name)} <span class="flow-id">(${esc(s.id)})</span>`
          : esc(s.name);
      const paramsText = formatFlowParams(s.params);
      const paramsMissing =
        s.paramsMissing?.length > 0
          ? `<span class="flow-params-missing">缺参：${esc(s.paramsMissing.join("、"))}</span>`
          : "";
      const paramsHtml = paramsText
        ? `<span class="flow-params">${esc(paramsText)}</span>`
        : "";
      return `<li class="flow-step">
        <span class="flow-order">${esc(String(s.order))}</span>
        <span class="flow-name">${nameLabel}${occ}</span>
        ${paramsHtml}
        ${paramsMissing}
        <span class="flow-deps">依赖：${deps}</span>
      </li>`;
    })
    .join("");

  return `<section class="ws-section ws-creation-flow">
    <h4>创作流程</h4>
    ${brief}
    ${statusHtml}
    <ol class="flow-steps">${rows}</ol>
  </section>`;
}

function formatFlowParams(params) {
  if (!params || typeof params !== "object" || Array.isArray(params)) return "";
  const parts = Object.entries(params)
    .filter(([, v]) => v != null && String(v).trim() !== "")
    .map(([k, v]) => `${k}=${typeof v === "string" ? v : JSON.stringify(v)}`);
  return parts.length ? parts.join(" · ") : "";
}

function renderReviewFeedCard(review) {
  const flowHtml = review.creationFlowView
    ? renderCreationFlowView(review.creationFlowView)
    : "";
  const structured = !flowHtml && review.workerSetView
    ? renderWorkerSetUserView(review.workerSetView)
    : "";
  const jsonHtml = formatArtifactBodyHtml(review.body);
  const contextId = review.sourceMessageId || review.id || "";
  const hasContext = review.contextTrace ? "1" : "0";
  const structuredBlock = flowHtml || structured;

  return `
    <article class="msg msg-assistant-row msg-review" data-review="1" data-message-id="${esc(contextId)}" data-can-edit="0" data-has-context="${hasContext}">
      <div class="msg-bubble msg-review-bubble">
        <header class="msg-head">
          <div class="msg-head-main">
            <span class="msg-tag">待验收</span>
            <span class="msg-subtitle">${esc(displayWorkerLabel(review.workerId) || "产物")}</span>
          </div>
        </header>
        ${review.summary ? `<p class="review-feed-summary">${esc(review.summary)}</p>` : ""}
        <p class="review-hint">接受后：本单位过程讨论会折叠，产物进入前情。确认请用底栏「接受目前产物」；要改则在底栏输入修改意见后发送。</p>
        ${structuredBlock ? `<div class="review-worker-set">${structuredBlock}</div>` : ""}
        <section class="review-json-block">
          <h4 class="review-json-title">${structuredBlock ? "规格 JSON" : "产物正文"}</h4>
          ${jsonHtml}
        </section>
      </div>
    </article>`;
}

/** 侧栏验收 Tab 已弃用：验收改在主对话；此处仅隐藏 Tab */
export function renderReviewPanel(view, _handlers = {}) {
  const tabBtn = document.getElementById("agent-tab-btn-review");
  const panel = document.getElementById("review-artifact-panel");
  if (!tabBtn || !panel) return;
  tabBtn.hidden = true;
  panel.innerHTML = "";
  if (activeAgentTab === "review") setAgentTab("timeline");
}

export function renderAgentPanel(view, loading) {
  const focusEl = document.getElementById("agent-focus");
  const traceEl = document.getElementById("tool-trace");
  const timelineEl = document.getElementById("agent-timeline");
  const badgeEl = document.getElementById("burst-badge");
  if (!focusEl || !timelineEl) return;

  const f = view.focus;
  if (f) {
    focusEl.innerHTML = `
      <div class="agent-focus-who">${esc(f.actorLabel)}</div>
      <div class="agent-focus-action">${esc(loading ? "处理中…" : f.action)}</div>
      ${f.detail ? `<div class="agent-focus-detail">${esc(f.detail)}</div>` : ""}`;
  } else {
    focusEl.innerHTML = `<div class="agent-focus-detail">待命</div>`;
  }

  if (badgeEl && view.burst) {
    const show = view.burst.count > 0 || view.phase === "running";
    badgeEl.hidden = !show;
    badgeEl.textContent = `burst ${view.burst.count}/${view.burst.max}`;
  }

  if (traceEl) {
    const trace = view.toolTrace ?? [];
    if (!trace.length) {
      traceEl.hidden = true;
      traceEl.innerHTML = "";
    } else {
      traceEl.hidden = false;
      traceEl.innerHTML = trace
        .map(
          (t) => `
        <div class="tool-trace-item">
          <span class="tool-trace-name">${esc(t.name)}</span>
          <span style="float:right;color:var(--muted)">${fmtTime(t.at)}</span>
          <div>${esc(t.summary || "—")}</div>
        </div>`,
        )
        .join("");
    }
  }

  const items = [];
  for (const msg of view.messages ?? []) {
    if (msg.role === "user") {
      items.push({ kind: "user_input", title: "你", body: msg.text, at: msg.createdAt });
      continue;
    }
    const kind = msg.kind ?? "system_info";
    if (HIDE_KINDS.has(kind)) continue;
    if (isSkillSelectionMessage(msg)) continue;
    items.push({
      kind,
      title: msg.title ?? msgLabel(msg),
      body: msgBody(msg, view).slice(0, 160),
      at: msg.createdAt,
    });
  }
  if (loading && f) {
    const live = view.liveStream;
    items.push({
      kind: "pending",
      title: live?.label ?? f.action,
      body: [live?.thinking, live?.output].filter(Boolean).join("\n").slice(0, 200) || (f.detail ?? ""),
      at: "",
    });
  }
  if (!items.length) {
    timelineEl.innerHTML = `<p class="timeline-empty">调度记录将出现在这里</p>`;
    return;
  }
  timelineEl.innerHTML = items
    .map(
      (it) => `
    <div class="timeline-item">
      <strong>${esc(it.title)}</strong>
      <span style="color:var(--muted);margin-left:6px">${fmtTime(it.at)}</span>
      <div style="margin-top:2px;color:var(--muted)">${esc(it.body)}</div>
    </div>`,
    )
    .join("");
  timelineEl.scrollTop = timelineEl.scrollHeight;
}

export function renderMessageFeed(view, loading, handlers = {}) {
  const feed = document.getElementById("message-feed");
  if (!feed) return;

  if (feed.querySelector(".msg.is-editing")) {
    return;
  }

  const intake =
    view.waitingReason?.kind === "intake" && view.intake?.fields?.length;
  const showIntakePanel = intake && hasUserMessages(view);

  feed.innerHTML = "";

  if (showIntakePanel) {
    const box = document.createElement("div");
    box.className = "intake-panel";
    box.innerHTML = renderIntakePanel(view.intake, { variant: "feed" });
    feed.appendChild(box);
  }

  const visible = (view.messages ?? []).filter((m) => shouldShowInFeed(m, view));

  if (!visible.length && !loading) {
    const reviewing =
      view.waitingReason?.kind === "review_artifact" && view.reviewArtifact;
    if (!reviewing) {
      const p = document.createElement("p");
      p.className = "empty";
      if (view.lifecycleStage === "play") {
        p.textContent = "游玩模式：Agent 将按 Worker 集调度，推进世界与叙事。";
      } else if (view.uiPrompt) {
        const recipeLine = view.selectedRecipe?.name
          ? `\n\n已选配方：${view.selectedRecipe.name}`
          : view.recipes?.length
            ? "\n\n（请先在新建作品时选定配方）"
            : "";
        p.textContent = `${view.uiPrompt}${recipeLine}`;
        p.classList.add("empty-intake");
      } else if (view.waitingReason?.kind === "worker_questions") {
        p.textContent = "在下方回答 Skill 的提问。";
      } else if (intake) {
        p.textContent = "在下方描述你想创作什么；Agent 会收成 Worker 集供你验收。";
      } else {
        p.textContent = "在下方继续对话。";
      }
      p.classList.add("empty-intake");
      feed.appendChild(p);
      return;
    }
  }

  for (const msg of visible) {
    const isUser = msg.role === "user";
    const kind = msg.kind ?? (isUser ? "user_input" : "system_info");
    const body = msgBody(msg, view);
    const card = document.createElement("article");
    card.className = `msg ${MSG_CLASS[kind] ?? "system"}${isUser ? " msg-user-row" : " msg-assistant-row"}`;
    card.dataset.messageId = msg.id;

    const label = msgLabel(msg);
    const subtitle = (msg.title ?? "").trim();
    const showSubtitle =
      !isUser &&
      kind !== "orchestrator_thinking" &&
      subtitle.length > 0 &&
      !label.includes(subtitle) &&
      subtitle !== label;
    const headInner = isUser
      ? `<span class="msg-time">${fmtTime(msg.createdAt)}</span>${renderMsgVariantBadge(msg)}`
      : `<div class="msg-head-main">
          <span class="msg-tag">${esc(label)}</span>
          ${showSubtitle ? `<span class="msg-subtitle">${esc(subtitle)}</span>` : ""}
        </div>
        ${renderMsgVariantBadge(msg)}
        <span class="msg-time">${fmtTime(msg.createdAt)}</span>`;

    card.dataset.canEdit = canEditMessage(msg) ? "1" : "0";
    card.dataset.hasContext = msg.contextTrace ? "1" : "0";
    card.dataset.originalText = body;

    card.innerHTML = `
      <div class="msg-bubble">
        ${!isUser && kind === "worker_questions" ? `<div class="msg-questions-banner">需要你回答</div>` : ""}
        ${isUser ? "" : `<header class="msg-head">${headInner}</header>`}
        ${!isUser && msg.thinking ? renderThinkingBlock(msg.thinking) : ""}
        <div class="msg-body">${kind === "worker_questions" ? formatQuestionsHtml(body) : esc(body)}</div>
        ${isUser ? `<footer class="msg-foot">${headInner}</footer>` : ""}
      </div>`;
    feed.appendChild(card);
  }

  wireMessageFeedActions(feed, handlers);
  wireMessageContextMenu(feed, handlers);

  if (
    view.waitingReason?.kind === "review_artifact" &&
    view.reviewArtifact &&
    !loading
  ) {
    const wrap = document.createElement("div");
    wrap.innerHTML = renderReviewFeedCard(view.reviewArtifact);
    const card = wrap.firstElementChild;
    if (card) feed.appendChild(card);
  }

  if (loading) {
    const pending = document.createElement("article");
    pending.className = "msg agent msg-assistant-row msg-pending";
    pending.id = "msg-live-pending";
    const live = view.liveStream;
    const label = live?.label ?? view.focus?.action ?? "处理中";
    pending.innerHTML = `
      <div class="msg-bubble">
        <header class="msg-head"><span class="msg-tag">${esc(label)}</span><span class="msg-live-indicator">流式输出中</span></header>
        <div class="msg-body msg-live-body">${renderLiveStreamBody(live)}</div>
      </div>`;
    feed.appendChild(pending);
  }

  feed.scrollTop = feed.scrollHeight;
}

/** 轮询时仅更新流式 pending 卡片，避免整页重绘 */
export function updateLiveStreamPanel(view) {
  const pending = document.getElementById("msg-live-pending");
  if (!pending) return;
  const body = pending.querySelector(".msg-live-body");
  if (!body) return;
  const live = view.liveStream;
  const labelEl = pending.querySelector(".msg-tag");
  if (labelEl && live?.label) labelEl.textContent = live.label;
  body.innerHTML = renderLiveStreamBody(live);
  const feed = document.getElementById("message-feed");
  if (feed) feed.scrollTop = feed.scrollHeight;
}

export function renderBoardPanel(view) {
  const panel = document.getElementById("board-panel");
  if (!panel) return;
  const board = view.boardPanel;
  if (!board) {
    panel.innerHTML = `<p class="empty-sm">尚无黑板条目。Worker 写入 tag 后会出现在这里。</p>`;
    return;
  }

  const tagRow = (row, badge) => `
    <li class="board-tag-item" data-board-tag="${esc(row.tag)}">
      <div class="board-tag-head">
        <code>${esc(row.tag)}</code>
        <span class="board-badge">${badge}</span>
        <button type="button" class="btn-sm board-edit-btn" data-edit-tag="${esc(row.tag)}" title="编辑">改</button>
      </div>
      <div class="board-tag-meta">${esc(row.source)} · ${esc(String(row.updatedAt).slice(0, 19))}</div>
      <div class="board-tag-preview">${esc(row.preview)}</div>
    </li>`;

  const finals = (board.finals ?? []).map((r) => tagRow(r, "定稿")).join("");
  const active = (board.active ?? []).map((r) => tagRow(r, "进行中")).join("");

  panel.innerHTML = `
    <div class="board-section">
      <h4>定稿摘要（给下一 Worker）</h4>
      ${
        board.brief
          ? `<pre class="board-brief">${esc(board.brief)}</pre>`
          : `<p class="empty-sm">验收产物后生成。下一 Worker 会自动读到此处。</p>`
      }
    </div>
    <div class="board-section">
      <h4>终产物 tag ${board.finals?.length ? `(${board.finals.length})` : ""}</h4>
      ${finals ? `<ul class="board-tag-list">${finals}</ul>` : `<p class="empty-sm">暂无</p>`}
    </div>
    <div class="board-section">
      <h4>当前活跃 tag ${board.active?.length ? `(${board.active.length})` : ""}</h4>
      ${active ? `<ul class="board-tag-list">${active}</ul>` : `<p class="empty-sm">暂无</p>`}
    </div>
    ${
      board.archivedCount
        ? `<p class="board-archived">已压缩归档 ${board.archivedCount} 个过程 tag（默认不进入后续 Worker 取数）</p>`
        : ""
    }
  `;

  panel.querySelectorAll("[data-edit-tag]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const tag = btn.getAttribute("data-edit-tag");
      if (!tag || !view.id) return;
      const current =
        [...(board.finals ?? []), ...(board.active ?? [])].find((r) => r.tag === tag)
          ?.preview ?? "";
      const next = prompt(`编辑黑板「${tag}」\n（完整内容请从导出或后续增强编辑器查看；此处为预览级修改）`, current);
      if (next == null) return;
      void fetch(`/api/sessions/${encodeURIComponent(view.id)}/board`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tag, content: next }),
      })
        .then(async (res) => {
          const data = await res.json();
          if (!res.ok) throw new Error(data.error || "写入失败");
          window.dispatchEvent(new CustomEvent("wa:session-updated", { detail: data }));
        })
        .catch((err) => alert(err.message));
    });
  });
}

export function renderWorkspace(view, loading, _onPickSkill, handlers = {}) {
  renderLifecycle(view);
  renderSkillPicker(view);
  maybeAutoSwitchTab(view);
  const qHost = document.getElementById("questions-card-host");
  if (qHost) {
    renderQuestionsCard(qHost, view, {
      onSkipQuestions: () => handlers.onSkipQuestions?.(),
    });
  }
  renderMessageFeed(view, loading, handlers);
  renderSkillGuide(view);
  renderReviewPanel(view, handlers);
  renderBoardPanel(view);
  renderAgentPanel(view, loading);
}

document.addEventListener("click", (e) => {
  if (!e.target.closest("#msg-action-menu")) hideMsgMenu();
});
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") hideMsgMenu();
});
document.addEventListener("scroll", hideMsgMenu, true);