{submitted ? (action === "revise" ? `已收到对${stepLabel}的修改意见` : `已确认${stepLabel}`) : revising ? `修改${stepLabel}` : `请确认${stepLabel}`} {submitted ? (action === "revise" ? "正在按你的反馈重写" : "继续下一步") : revising ? "写下你的想法，我们按这个重做这一步。" : (message.text || "确认后继续；要改可以直接说。")}

{submitted || revising ? null : (

)}

{!submitted && revising ? (

setFeedback(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Escape") {
                event.preventDefault();
                setRevising(false);
                setFeedback("");
              }
              if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && canSubmit && !disabled) {
                event.preventDefault();
                onReviseSubmit(feedback.trim());
              }
            }}
          />
          <div className="omni-step-confirm-actions">
            <button
              type="button"
              className="is-secondary"
              disabled={disabled}
              onClick={(event) => {
                event.stopPropagation();
                setRevising(false);
                setFeedback("");
              }}
            >
              取消
            </button>
            <button
              type="button"
              disabled={disabled || !canSubmit}
              onClick={(event) => {
                event.stopPropagation();
                if (!canSubmit) return;
                onReviseSubmit(feedback.trim());
              }}
            >
              按这个重做
            </button>
          </div>
        </div>
      ) : null}
    </section>
  );
}

/** 追问默认是普通聊天气泡;下面的卡片只为兼容旧会话数据。 */
function ElicitCard({
  message,
  disabled,
  onSubmit,
  onChatAnswer,
}: {
  message: CreationMessage;
  disabled: boolean;
  /** answers 给模型读(人话),refs 给后端取卖点和参考图。**选素材必须两样都回**,
     只回名字的话同名素材会配错货。 */
  onSubmit: (answers: Record<string, string | string[]>, refs: CreationRef[]) => void;
  /** 普通追问直接在气泡下回答，仍走 text 链路以保留用户消息与上下文。 */
  onChatAnswer: (text: string) => void;
}) {
  const fields = ((message.payload.fields as CreationField[] | undefined) || []).filter(Boolean);
  const submitted = Boolean(message.payload.submitted);
  const saved = (message.payload.answers as Record<string, string | string[]> | undefined) || {};
  const interaction = String(message.payload.interaction || "");
  // hooks 必须在任何 early return 之前：step_confirm / chat / gate 共用同一组件身份
  const [answers, setAnswers] = useState<Record<string, string | string[]>>(saved);
  const [assetOptions, setAssetOptions] = useState<Record<string, CreationRef[]>>({});
  const [assetPicked, setAssetPicked] = useState<Record<string, CreationRef>>({});
  const [customDirection, setCustomDirection] = useState("");
  const [chatAnswer, setChatAnswer] = useState("");

useEffect(() => {
    if (submitted || interaction === "chat" || interaction === "step_confirm") return;
    // 选素材字段要现拉候选:后端只给了 asset_types,具体有哪些素材是团队数据
    const assetFields = fields.filter((f) => f.type === "asset");
    if (assetFields.length === 0) return;
    let cancelled = false;
    void Promise.all(
      assetFields.map((f) =>
        api
          .searchMentions({ types: f.asset_types, limit: 24 })
          .then((res) => [f.key, res.results] as const)
          .catch(() => [f.key, [] as CreationRef[]] as const)
      )
    ).then((pairs) => {
      if (cancelled) return;
      // 同一张图可能既算商品又算资产库素材,两个 type 各返一条 —— 按 id 去重
      setAssetOptions(
        Object.fromEntries(
          pairs.map(([key, refs]) => {
            const seen = new Set<string>();
            return [key, refs.filter((r) => !seen.has(r.id) && seen.add(r.id))];
          })
        )
      );
    });
    return () => {
      cancelled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [message.id, submitted, interaction]);

if (interaction === "step_confirm") {
    return (
      <StepConfirmCard
        message={message}
        disabled={disabled}
        onConfirm={() => onSubmit({ step_action: "confirm" }, [])}
        onReviseSubmit={(feedback) => onSubmit({ step_action: "revise", feedback }, [])}
      />
    );
  }

if (interaction === "selling_point_gate") {
    const sellingPoint = typeof answers.selling_point === "string" ? answers.selling_point : "";
    const savedMode = String(saved.selling_point_mode || "");
    const submitManual = (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      const value = sellingPoint.trim();
      if (!value || disabled) return;
      onSubmit({ selling_point_mode: "manual", selling_point: value }, []);
    };
    return (
      <div className="omni-elicit-slot">
        <section className={`omni-selling-point-card${submitted ? " is-submitted" : ""}`}>
          <header>
            <div>
              <strong>先确定核心卖点</strong>
              <span>它会贯穿后面的策略、脚本和视频画面</span>
            </div>
          </header>
          {submitted ? (
            <p className="omni-selling-point-selected">
              {savedMode === "auto" ? "已交给系统从商品和素材中推荐卖点" : `已使用：${String(saved.selling_point || "")}`}
            </p>
          ) : (
            <form onSubmit={submitManual}>
              <input
                className="input"
                value={sellingPoint}
                disabled={disabled}
                placeholder="输入你最想让用户记住的真实卖点…"
                aria-label="输入商品卖点"
                onChange={(event) => setAnswers((prev) => ({ ...prev, selling_point: event.target.value }))}
              />
              <div className="omni-selling-point-actions">
                <button
                  type="button"
                  className="btn btn-sm btn-ghost"
                  disabled={disabled}
                  onClick={() => onSubmit({ selling_point_mode: "auto", selling_point: "" }, [])}
                >
                  系统推荐卖点
                </button>
                <button type="submit" className="btn btn-sm btn-primary" disabled={disabled || !sellingPoint.trim()}>
                  使用这个卖点
                </button>
              </div>
            </form>
          )}
        </section>
      </div>
    );
  }

if (interaction === "plot_twist_directions") {
    const directions = Array.isArray(message.payload.directions)
      ? message.payload.directions
          .filter((item): item is Record<string, unknown> => Boolean(item) && typeof item === "object")
          .map((item) => ({
            id: String(item.id || "").trim(),
            title: String(item.title || "剧情方向").trim(),
            conflict: String(item.conflict || "").trim(),
            productRole: String(item.product_role || "").trim(),
            reversal: String(item.reversal || "").trim(),
            tone: String(item.tone || "").trim(),
          }))
          .filter((item) => item.id)
      : [];
    // 选卡片只是本地暂存；明确点「确认选择」后才真正提交并开始整理下一步。
    const selected = String(answers.story_direction || saved.story_direction || "");
    const selectedDirection = directions.find(
      (direction) => selected === direction.id || selected === direction.title,
    );
    const submitCustomDirection = (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      const idea = customDirection.trim();
      if (!idea || disabled) return;
      setAnswers((prev) => ({ ...prev, story_direction: idea }));
      setCustomDirection("");
    };
    return (
      <div className="omni-elicit-slot omni-direction-slot">
        <section className={`omni-direction-card${submitted ? " is-submitted" : ""}`}>
          <header className="omni-direction-head">
            <div>
              <strong>三个剧情反转方向</strong>
              <span>选择方向后确认，再继续展开完整方案</span>
            </div>
          </header>
          <div className="omni-direction-list">
            {directions.map((direction, index) => {
              const isSelected = selected === direction.id || selected === direction.title;
              return (
                <button
                  type="button"
                  key={direction.id}
                  className={isSelected ? "is-selected" : ""}
                  disabled={disabled || submitted}
                  onClick={() => setAnswers((prev) => ({ ...prev, story_direction: direction.id }))}
                >
                  <span className="omni-direction-index">方向 {index + 1}</span>
                  <strong>{direction.title}</strong>
                  <p><b>冲突</b>{direction.conflict}</p>
                  <p><b>商品作用</b>{direction.productRole}</p>
                  <p><b>反转</b>{direction.reversal}</p>
                  {direction.tone ? <small>{direction.tone}</small> : null}
                </button>
              );
            })}
          </div>
          {!submitted ? (
            <>
              <form className="omni-direction-custom" onSubmit={submitCustomDirection}>
                <input
                  className="input"
                  value={customDirection}
                  disabled={disabled}
                  onChange={(event) => setCustomDirection(event.target.value)}
                  placeholder="或者写下你自己的剧情想法…"
                  aria-label="输入自己的剧情想法"
                />
                <button type="submit" disabled={disabled || !customDirection.trim()}>选用这个想法</button>
              </form>
              <div className="omni-direction-confirm">
                <span>{selectedDirection ? `已选：${selectedDirection.title}` : selected ? "已选自定义剧情方向" : "请先选择一个方向"}</span>
                {selected ? (
                  <button
                    type="button"
                    className="btn btn-sm btn-ghost"
                    disabled={disabled}
                    onClick={() => setAnswers((prev) => ({ ...prev, story_direction: "" }))}
                  >
                    重新选择
                  </button>
                ) : null}
                <button
                  type="button"
                  className="btn btn-sm btn-primary"
                  disabled={disabled || !selected}
                  onClick={() => onSubmit({ story_direction: selected }, [])}
                >
                  确认选择
                </button>
              </div>
            </>
          ) : null}
        </section>
      </div>
    );
  }

const complete = fields.every((field) => {
    if (field.required === false) return true;
    const value = answers[field.key];
    return Array.isArray(value) ? value.length > 0 : Boolean(value);
  });

const phase = String(message.payload.phase || "pick");
  const gateField = fields[0];
  const gateLabel = gateField?.label || "要我把列表发给你选吗？";

// 素材选择闸门:先轻量询问,用户愿意时再展开真正的选择卡
  if (phase === "gate") {
    const gateAnswer = saved._asset_gate;
    const selectedLabel =
      gateField?.options?.find((option) => option.value === gateAnswer)?.label
      || (gateAnswer ? String(gateAnswer) : undefined);
    return (
      <div className="omni-chat-row agent">
        <span className="omni-chat-avatar">
          <Sparkles />
        </span>
        <div className="omni-chat-bubble omni-gate-bubble">
          <ChatMarkdown text={message.text || gateLabel} />
          {!submitted ? (
            <div className="omni-gate-actions" aria-label="商品选择操作">
              {(gateField?.options || []).map((option, index) => (
                <button
                  type="button"
                  key={option.value}
                  className={index === 0 ? "primary" : ""}
                  disabled={disabled}
                  onClick={() => {
                    if (!gateField?.key) return;
                    onSubmit({ [gateField.key]: option.value }, []);
                  }}
                >
                  {option.label}
                </button>
              ))}
            </div>
          ) : (
            <p className="omni-gate-answered">
              {selectedLabel ? `已选择：${selectedLabel}` : "已完成选择"}
            </p>
          )}
        </div>
      </div>
    );
  }

if (interaction === "chat") {
    const question = message.text || fields[0]?.label || "这项你想怎么定？";
    const submitChatAnswer = (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      const text = chatAnswer.trim();
      if (!text || disabled) return;
      onChatAnswer(text);
      setChatAnswer("");
    };
    return (
      <div className="omni-chat-row agent">
        <span className="omni-chat-avatar">
          <Sparkles />
        </span>
        <div className="omni-chat-stack">
          <div className="omni-chat-bubble">
            <ChatMarkdown text={question} />
          </div>
          {!submitted ? (
            <div className="omni-reply-guide" aria-label="回复操作">
              <form className="omni-chat-question-input" onSubmit={submitChatAnswer}>
                <input
                  className="input"
                  value={chatAnswer}
                  disabled={disabled}
                  onChange={(event) => setChatAnswer(event.target.value)}
                  placeholder="输入你的想法…"
                  aria-label="回答这个问题"
                />
                <button type="submit" aria-label="发送回答" disabled={disabled || !chatAnswer.trim()}>
                  <ArrowUp size={14} />
                </button>
              </form>
            </div>
          ) : null}
        </div>
      </div>
    );
  }

return (
    <div className="omni-elicit-slot">
    <section className={`omni-elicit-card${submitted ? " is-submitted" : ""}`}>
      <header className="omni-elicit-head">
        <strong>还需要你确认</strong>
        <span>{submitted ? "已回答" : "选一下就好"}</span>
      </header>
      <div className="omni-elicit-body">
        {fields.map((field) => {
          const value = answers[field.key];
          return (
            <div className="omni-elicit-field" key={field.key}>
              <label>{field.label}</label>
              {(field.type === "single" || field.type === "multi") && (
                <div className="omni-elicit-options">
                  {(field.options || []).map((option) => {
                    const active =
                      field.type === "multi"
                        ? Array.isArray(value) && value.includes(option.value)
                        : value === option.value;
                    return (
                      <button
                        type="button"
                        key={option.value}
                        className={active ? "active" : ""}
                        onClick={() =>
                          field.type === "multi"
                            ? toggleMulti(field.key, option.value)
                            : setAnswers((prev) => ({ ...prev, [field.key]: option.value }))
                        }
                      >
                        {option.label}
                      </button>
                    );
                  })}
                </div>
              )}
              {field.type === "text" && (
                <input
                  type="text"
                  placeholder={field.placeholder || ""}
                  value={typeof value === "string" ? value : ""}
                  disabled={submitted}
                  onChange={(event) =>
                    setAnswers((prev) => ({ ...prev, [field.key]: event.target.value }))
                  }
                />
              )}
              {field.type === "asset" && (
                <div className="omni-elicit-assets">
                  {(assetOptions[field.key] || []).map((option) => (
                    <button
                      type="button"
                      key={option.id}
                      className={assetPicked[field.key]?.id === option.id ? "active" : ""}
                      onClick={() => {
                        // 高亮按 id 判,不按名字 —— 商品库里同名素材是常态
                        setAssetPicked((prev) => ({ ...prev, [field.key]: option }));
                        setAnswers((prev) => ({ ...prev, [field.key]: option.name }));
                      }}
                    >
                      <img src={option.cover || ""} alt="" />
                      <span>{option.name}</span>
                    </button>
                  ))}
                  {(assetOptions[field.key] || []).length === 0 && <span>暂无可选素材</span>}
                </div>
              )}
            </div>
          );
        })}
      </div>
      {!submitted && (
        <div className="omni-elicit-actions">
          <button
            type="button"
            disabled={disabled || !complete}
            onClick={() => onSubmit(answers, Object.values(assetPicked))}
          >
            提交
          </button>
        </div>
      )}
    </section>
    </div>
  );
}

/**
 * 确认闸门:方案卡下面那条「开始生成 · 约 N 积分」。
 * 点一次就锁住 —— 连点两下后端会 409,但前端也不该让它发生第二次。
 */
function asStringMap(value: unknown): Record<string, string> {
  if (!value || typeof value !== "object") return {};
  const out: Record<string, string> = {};
  for (const [key, item] of Object.entries(value as Record<string, unknown>)) {
    if (item != null && item !== "") out[key] = String(item);
  }
  return out;
}

function paramLine(params: Record<string, string>, isVideo: boolean) {

return [
    params.model,
    isVideo ? params.resolution : "",
    params.ratio,
    isVideo ? params.duration : params.count,
  ]
    .filter(Boolean)
    .join(" · ");
}

return (
    <section className="omni-confirm-card">
      <div className="omni-confirm-copy">
        <strong>{submitted ? "已确认" : `即将用 ${summary} 生成`}</strong>
        <span>{submitted ? "正在提交生成" : "确认前可以改参数。改时长会按新时长重写脚本。"}</span>
      </div>
      {submitted ? null : (
        <div className="omni-confirm-params">
          <OmniParamBar
            isVideo={cardIsVideo}
            disabled={disabled}
            catalogModels={catalogModels}
            model={draft.model || ""}
            resolution={draft.resolution || ""}
            ratio={draft.ratio || ""}
            duration={cardIsVideo ? (draft.duration || "") : (draft.count || "")}
            onModel={(value) => setField("model", value)}
            onResolution={(value) => setField("resolution", value)}
            onRatio={(value) => setField("ratio", value)}
            onDuration={(value) => setField(cardIsVideo ? "duration" : "count", value)}
          />
        </div>
      )}
      {durationChanged ? (
        <p className="omni-confirm-hint">改时长会重新生成脚本。确认后先重写方案，不会直接出片。</p>
      ) : willGenerateInSegments ? (
        <p className="omni-confirm-hint">{durationSeconds} 秒将拆成 2 段生成，每段最长 30 秒；片段完成后先给你预览，再由你决定是否合并成片。</p>
      ) : null}
      <div className="omni-confirm-foot">
        <span>{submitted ? "已确认，正在出片" : "点确认后才会提交生成"}</span>
        <button type="button" disabled={disabled || submitted} onClick={() => onConfirm(draft)}>
          {durationChanged ? "确认并重写脚本" : String(message.payload.label || "开始生成")}
          {!durationChanged && credits > 0 ? <i>约 {credits} 积分</i> : null}
        </button>
      </div>
    </section>
  );
}

return (
    <section className="omni-result-card">
      <div className={`omni-result-media${assets.length > 1 ? " is-grid" : ""}`}>
        {assets.map((asset, index) => {
          const cover = asset.cover || asset.url || "";
          const url = asset.url || cover;
          const video = asset.type === "video";
          const label = String(asset.label || (assets.length > 1 ? `第 ${index + 1} 段` : "生成结果"));
          return (
            <figure className="omni-result-tile" key={asset.id || `${url}-${index}`}>
              <button
                type="button"
                className="omni-result-preview"
                onClick={() => url && setPreview({ src: url, kind: video ? "video" : "image", name: label })}
              >
                <img src={cover} alt={label} />
                {video ? (
                  <span className="omni-result-play" aria-hidden="true">
                    <Play />
                  </span>
                ) : null}
              </button>
              {url ? (
                <a
                  className="omni-result-dl"
                  href={url}
                  download
                  target="_blank"
                  rel="noreferrer"
                  title="下载"
                  aria-label="下载"
                  onClick={(event) => event.stopPropagation()}
                >
                  <Download />
                </a>
              ) : null}
            </figure>
          );
        })}
      </div>
      <div className="omni-result-info">
        <div>
          <strong>{
            isGeneratedVideo
              ? payload.needs_merge ? `已生成 ${assets.length} 段视频` : "视频已生成"
              : assets.length > 1 ? `已生成 ${assets.length} 张图` : "图片已生成"
          }</strong>
          <small>{payload.needs_merge ? "请先预览片段，确认后再合并成片" : meta}</small>
        </div>
        {payload.needs_merge ? (
          <button
            type="button"
            disabled={merging || payload.merge_state === "queued" || payload.merge_state === "processing" || payload.merge_state === "completed"}
            onClick={onMerge}
          >
            {payload.merge_state === "completed" ? "已合并" : merging || payload.merge_state === "queued" || payload.merge_state === "processing" ? "正在合并" : "合并成片"}
          </button>
        ) : null}
      </div>
      <MediaLightbox
        open={Boolean(preview?.src)}
        src={preview?.src || ""}
        kind={preview?.kind}
        name={preview?.name}
        close={() => setPreview(null)}
      />
    </section>
  );
}

function isLocalUserId(id: string) {
  return id.startsWith("local-user-");
}

function serverSeq(message: CreationMessage) {
  const seq = Number(message.seq);
  if (!Number.isFinite(seq) || seq >= Number.MAX_SAFE_INTEGER) return 0;
  return seq;
}

/** 当前列表里已落库消息的最大 seq；乐观 local 用 MAX_SAFE_INTEGER，不算进去 */
function lastKnownServerSeq(list: CreationMessage[]) {
  let max = 0;
  for (const message of list) {
    if (isLocalUserId(message.id)) continue;
    max = Math.max(max, serverSeq(message));
  }
  return max;
}

/** 乐观用户气泡:发请求前立刻上屏,poll/202 回来再换成服务端消息 */
function makeLocalUserMessage(text: string, refs: CreationRef[], id?: string): CreationMessage {
  const localId = id || `local-user-${Date.now()}`;
  return {
    id: localId,
    role: "user",
    kind: "text",
    text: text || "",
    payload: {},
    refs: refs || [],
    task: null,
    seq: Number.MAX_SAFE_INTEGER,
    created_at: new Date().toISOString(),
    clientKey: localId,
  };
}

/**
 * 把服务端用户消息嵌进本地列表。
 * 只替换「当前 pending 的 local 气泡」，绝不按正文去覆盖历史已发布用户消息
 * （编辑后重发相同文案时，旧气泡和新气泡必须同时存在）。
 */
function replaceLocalUser(prev: CreationMessage[], message: CreationMessage): CreationMessage[] {
  const existing = prev.findIndex((m) => m.id === message.id);
  if (existing !== -1) {
    const next = [...prev];
    const prevMsg = prev[existing];
    next[existing] = { ...message, clientKey: prevMsg.clientKey || message.clientKey || message.id };
    return next;
  }
  if (message.role === "user") {
    const knownSeq = lastKnownServerSeq(prev);
    const isFreshServerUser = serverSeq(message) > knownSeq;
    // 仅当这条服务端用户消息确实是「新一轮」时，才拿它替换 pending local
    if (isFreshServerUser) {
      const localIdx = prev.findIndex((m) => isLocalUserId(m.id) && sameUserBubble(m, message));
      if (localIdx !== -1) {
        const next = [...prev];
        const local = prev[localIdx];
        next[localIdx] = { ...message, clientKey: local.clientKey || local.id };
        return next;
      }
      // 也允许按「唯一 pending local」对齐（正文被服务端微调时）
      const pendingLocals = prev
        .map((m, idx) => ({ m, idx }))
        .filter(({ m }) => isLocalUserId(m.id));
      if (pendingLocals.length === 1) {
        const { idx, m: local } = pendingLocals[0];
        const next = [...prev];
        next[idx] = { ...message, clientKey: local.clientKey || local.id };
        return next;
      }
    }
  }
  return [...prev, { ...message, clientKey: message.clientKey || message.id }];
}

/**
 * 只折叠「同一轮」里相邻的 local ↔ server 重复；
 * 两个都已落库的用户消息即使正文相同也不合并（允许编辑重发相同文案）。
 */
function collapseDupUser(list: CreationMessage[]): CreationMessage[] {
  const out: CreationMessage[] = [];
  for (const m of list) {
    const last = out[out.length - 1];
    const consecutiveSameText =
      last?.role === "user"
      && m.role === "user"
      && (last.text || "") === (m.text || "");
    const localServerPair =
      consecutiveSameText
      && (isLocalUserId(last.id) !== isLocalUserId(m.id));
    if (localServerPair) {
      if (isLocalUserId(m.id)) {
        out[out.length - 1] = last;
      } else {
        out[out.length - 1] = {
          ...m,
          clientKey: last.clientKey || m.clientKey || m.id,
        };
      }
      continue;
    }
    out.push(m.clientKey ? m : { ...m, clientKey: m.id });
  }
  return out;
}

/** payload 是否实质相同（忽略 key 顺序之外的引用身份） */
function samePayload(a: Record<string, unknown>, b: Record<string, unknown>) {
  return JSON.stringify(a || {}) === JSON.stringify(b || {});
}

/** 两条消息内容是否可原地复用（保持 React 组件身份，避免入场动画重放） */
function sameMessageContent(prev: CreationMessage, next: CreationMessage) {
  return (
    prev.id === next.id
    && prev.kind === next.kind
    && prev.role === next.role
    && (prev.text || "") === (next.text || "")
    && serverSeq(prev) === serverSeq(next)
    && samePayload(prev.payload || {}, next.payload || {})
  );
}

/**
 * 合并服务端消息时保留本地 UI 态：
 * - 乐观 submitted / answers 尚未落库时不要被 poll 冲掉
 * - id/seq/payload 未变则复用原对象引用，避免 elicit / StepConfirm 卸载闪烁
 */
function mergeMessagePreserveLocal(prevHit: CreationMessage | undefined, msg: CreationMessage): CreationMessage {
  if (prevHit && sameMessageContent(prevHit, msg)) {
    return prevHit;
  }
  const clientKey = prevHit?.clientKey || msg.clientKey || msg.id;
  if (!prevHit) {
    return msg.clientKey === clientKey ? msg : { ...msg, clientKey };
  }
  // 开放中的追问：服务端尚未 submitted 时，保住本地已选选项与乐观提交。
  // step_confirm 除外 —— 取消修订时服务端会主动撤回 submitted，必须以服务端为准，
  // 否则会卡在「已收到…正在按你的反馈重写」。
  if (prevHit.kind === "elicit" && msg.kind === "elicit") {
    const prevPayload = prevHit.payload || {};
    const nextPayload = msg.payload || {};
    const isStepConfirm =
      prevPayload.interaction === "step_confirm"
      || nextPayload.interaction === "step_confirm";
    if (!isStepConfirm && prevPayload.submitted && !nextPayload.submitted) {
      return {
        ...msg,
        clientKey,
        payload: {
          ...nextPayload,
          submitted: true,
          answers: prevPayload.answers ?? nextPayload.answers,
        },
      };
    }
    // 字段定义未变时复用旧 payload 引用，避免选中态随 poll 重置
    if (
      !nextPayload.submitted
      && !prevPayload.submitted
      && samePayload(
        { ...prevPayload, answers: undefined, submitted: undefined },
        { ...nextPayload, answers: undefined, submitted: undefined },
      )
    ) {
      return {
        ...prevHit,
        text: msg.text || prevHit.text,
        seq: msg.seq,
        created_at: msg.created_at || prevHit.created_at,
        clientKey,
        payload: prevPayload,
      };
    }
  }
  return { ...msg, clientKey };
}

/**
 * 合并服务端快照时保留尚未 ack 的乐观气泡，并稳住未变消息的对象引用。
 * local 只对上「本轮新出现」的服务端用户消息，绝不按正文吞历史。
 */
function keepUnackedLocals(prev: CreationMessage[], incoming: CreationMessage[]): CreationMessage[] {
  const prevById = new Map(prev.map((m) => [m.id, m]));
  const locals = prev.filter((m) => isLocalUserId(m.id));
  if (!locals.length) {
    let changed = prev.length !== incoming.length;
    const merged = incoming.map((msg, index) => {
      const prevHit = prevById.get(msg.id) || (prev[index]?.id === msg.id ? prev[index] : undefined);
      const next = mergeMessagePreserveLocal(prevHit, msg);
      if (next !== prevHit) changed = true;
      return next;
    });
    if (!changed) {
      // 长度与每条引用都未变 → 直接复用旧数组，阻断无意义重渲染
      let identical = true;
      for (let i = 0; i < merged.length; i += 1) {
        if (merged[i] !== prev[i]) {
          identical = false;
          break;
        }
      }
      if (identical) return prev;
    }
    return merged;
  }
  const knownServerIds = new Set(
    prev.filter((m) => !isLocalUserId(m.id)).map((m) => m.id)
  );
  const knownSeq = lastKnownServerSeq(prev);
  const used = new Set<string>();
  const merged = incoming.map((msg) => {
    const prevHit = prevById.get(msg.id);
    let withKey = mergeMessagePreserveLocal(prevHit, msg);
    if (msg.role !== "user") return withKey;
    const isNewServerUser =
      !knownServerIds.has(msg.id) && serverSeq(msg) > knownSeq;
    if (!isNewServerUser) return withKey;
    const local = locals.find((item) => !used.has(item.id) && sameUserBubble(item, msg));
    if (!local) return withKey;
    used.add(local.id);
    return { ...withKey, clientKey: local.clientKey || local.id };
  });
  const leftover = locals.filter((m) => !used.has(m.id));
  // leftover 追加在末尾；不要对历史做正文去重
  return collapseDupUser(leftover.length ? [...merged, ...leftover] : merged);
}

function withoutLegacyGateArtifacts(list: CreationMessage[]): CreationMessage[] {
  /**
   * 旧版本点「先不用」时会落一条系统伪造的 user 消息,紧接着再回一句空话。
   * 数据先保留,这里只在能确认完整错误序列时隐藏,避免老会话刷新后还显示这组脏气泡。
   */
  const hidden = new Set<string>();
  for (let index = 1; index < list.length; index += 1) {
    const gate = list[index - 1];
    const echo = list[index];
    const gatePayload = gate?.payload || {};
    if (
      gate?.kind !== "elicit"
      || gatePayload.phase !== "gate"
      || (gatePayload.answers as Record<string, unknown> | undefined)?._asset_gate !== "skip"
      || echo?.role !== "user"
      || echo.text !== "先不选素材也可以，有需要再说。"
    ) continue;

hidden.add(echo.id);
    const deadEnd = list[index + 1];
    if (
      deadEnd?.role === "assistant"
      && deadEnd.kind === "text"
      && /^在的[，,]有需要再说(?:一声)?[。.]?$/.test(deadEnd.text.trim())
    ) {
      hidden.add(deadEnd.id);
    }
  }
  return hidden.size ? list.filter((message) => !hidden.has(message.id)) : list;
}

const MENTION_REF_LIMIT = 5;

const MENTION_TABS: Array<{ type: CreationRef["type"]; label: string; Icon: typeof Image }> = [
  { type: "asset", label: "素材", Icon: Image },
  { type: "character", label: "角色", Icon: UserRound },
  { type: "model", label: "模特", Icon: Users },
  { type: "product", label: "商品", Icon: Box },
  { type: "scene", label: "场景", Icon: FolderOpen },
];

function mergeSessionUploads(results: CreationRef[], uploads: CreationRef[], query: string, type: CreationRef["type"]) {
  if (type !== "asset") return results;
  const q = query.trim().toLowerCase();
  // 上传时间倒序:sessionUploads 末尾最新,反过来放最前
  const extras = uploads
    .filter((item) => !q || item.name.toLowerCase().includes(q))
    .slice()
    .reverse();
  const seen = new Set(extras.map((item) => item.id));
  return [...extras, ...results.filter((item) => !seen.has(item.id))];
}

// ────────────────────────────────────────────────────────── 页面

export function OmniSessionPage({
  conversationId,
  firstMessage,
  firstRefs,
  firstUploads,
  modelConfigs,
  navigate,
  onNotify,
}: {
  conversationId: string;
  /** 首页「开始创作」带过来的第一句话。只在刚进页面时发一次,刷新后不重发(它已经在库里)。 */
  firstMessage?: string;
  firstRefs?: CreationRef[];
  firstUploads?: CreationRef[];
  modelConfigs?: ModelConfig[];
  navigate: NavigateFn;
  onNotify?: (type: "success" | "error" | "info", text: string) => void;
}) {
  // 首页带过来的第一句:进页立刻画出用户气泡,不要等 getCreation / creationSend
  const bootLocalIdRef = useRef<string | null>(
    (firstMessage?.trim() || (firstRefs && firstRefs.length > 0))
      ? `local-user-${Date.now()}`
      : null
  );
  const [conversation, setConversation] = useState<CreationConversationDetail | null>(null);
  const [messages, setMessages] = useState<CreationMessage[]>(() => {
    const id = bootLocalIdRef.current;
    if (!id) return [];
    return [makeLocalUserMessage(firstMessage?.trim() || "", firstRefs || [], id)];
  });
  const [prompt, setPrompt] = useState("");
  const [composerHint, setComposerHint] = useState<string | null>(null);
  const [pendingRefs, setPendingRefs] = useState<CreationRef[]>([]);
  const [sessionUploads, setSessionUploads] = useState<CreationRef[]>(firstUploads || []);
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  // 对话引导里的「上传人物图」要直达系统文件选择器，而不是绕回通用素材菜单。
  const quickUploadReplyRef = useRef<ReplyOption | null>(null);
  const composerRef = useRef<HTMLTextAreaElement>(null);
  const [streaming, setStreaming] = useState(false);
  const [liveText, setLiveText] = useState("");
  const [liveReasoning, setLiveReasoning] = useState("");
  const [activeTool, setActiveTool] = useState("");
  const [mentionMenuOpen, setMentionMenuOpen] = useState(false);
  const [mentionTab, setMentionTab] = useState<CreationRef["type"]>("asset");
  const [mentionLoading, setMentionLoading] = useState(false);
  const [mentionResults, setMentionResults] = useState<CreationRef[]>([]);
  const [typeLabels, setTypeLabels] = useState<Record<string, string>>({});
  const mentionWrapRef = useRef<HTMLDivElement>(null);
  const [uploadMenuOpen, setUploadMenuOpen] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [mergingMessageIds, setMergingMessageIds] = useState<string[]>([]);
  const [stopping, setStopping] = useState(false);
  const [promptView, setPromptView] = useState<{ title: string; body: string } | null>(null);
  const [assetsOpen, setAssetsOpen] = useState(false);
  const [assetView, setAssetView] = useState<"grid" | "list">("grid");
  const [assetQuery, setAssetQuery] = useState("");
  const [assetPreview, setAssetPreview] = useState<{ src: string; kind: "image" | "video"; name: string } | null>(null);
  const [pendingUserId, setPendingUserId] = useState<string | null>(() => bootLocalIdRef.current);
  // App 传进来的 onNotify 是内联箭头,**每次 App 重渲染都是新身份**。
  // 直接放进 useEffect / useCallback 依赖会让整条会话被反复重拉、消息数组被反复替换
  // —— 页面看起来就是一直在跳。放进 ref,回调永远拿到最新的那个,身份却是稳定的。
  const notifyRef = useRef(onNotify);
  notifyRef.current = onNotify;
  const notify = useCallback(
    (type: "success" | "error" | "info", text: string) => notifyRef.current?.(type, text),
    []
  );

const editUserMessage = useCallback((message: CreationMessage) => {
    const refs = message.refs || [];
    setPrompt(stripMentionText(message.text, refs));
    setPendingRefs(refs);
    setComposerHint(null);
    requestAnimationFrame(() => {
      composerRef.current?.focus();
      composerRef.current?.setSelectionRange(
        composerRef.current.value.length,
        composerRef.current.value.length,
      );
    });
  }, []);

const feedRef = useRef<HTMLElement>(null);
  const firstSentRef = useRef(false);
  const pendingUserIdRef = useRef<string | null>(bootLocalIdRef.current);
  /** 发送时已见过的最大服务端 seq；只有更新的用户消息才能 ack 当前 pending local */
  const pendingSinceSeqRef = useRef(0);
  const messagesRef = useRef<CreationMessage[]>([]);
  const streamingRef = useRef(false);
  /** 刚发出去后短时间忽略轮询里的陈旧 idle,避免 thinking 被冲掉 */
  const holdPlanningUntilRef = useRef(0);
  /** 用户点了终止:忽略随后可能迟到的 planning 快照,直到真正 idle */
  const userCancelledRef = useRef(false);
  /** 卡在 planning 过久时只提示一次，避免轮询刷屏 */
  const stalePlanningNotifiedRef = useRef(false);

const isVideo = conversation?.mode === "video";
  const params = useMemo(() => conversation?.params || {}, [conversation]);

useEffect(() => {
    let cancelled = false;
    api
      .getCreation(conversationId)
      .then((detail) => {
        if (cancelled) return;
        setConversation(detail);
        // 保留尚未 ack 的乐观用户气泡,避免进页种子/发送中的气泡被首包冲掉
        setMessages((prev) => keepUnackedLocals(prev, detail.messages || []));
        if (bootLocalIdRef.current && pendingUserIdRef.current === bootLocalIdRef.current) {
          const boot = makeLocalUserMessage(
            firstMessage?.trim() || "",
            firstRefs || [],
            bootLocalIdRef.current
          );
          const acked = (detail.messages || []).some(
            (m) => m.role === "user" && sameUserBubble(m, boot)
          );
          if (acked) {
            pendingUserIdRef.current = null;
            setPendingUserId(null);
          }
        }
        // 刷新/重进时若仍在整理方案,直接恢复轮询 UI —— 不要 abort 杀 Celery
        const planning = detail.agent_status === "planning";
        const waitingForFreshTurn =
          !planning
          && streamingRef.current
          && Date.now() < holdPlanningUntilRef.current
          && !turnLooksSettled(detail);
        // 刚发送时这里可能拿到请求之前的 idle 快照。保留 loading，等本轮真正落消息。
        if (waitingForFreshTurn) return;
        streamingRef.current = planning;
        setStreaming(planning);
      })
      .catch((error) => notify("error", (error as Error).message));
    return () => {
      cancelled = true;
    };
  }, [conversationId, notify]);

// 滚的是**整个页面**,不是 feed —— 这一版布局里 feed 没有自己的滚动条
  // (shell 撑满高度、输入框 position:sticky),对 feed 调 scrollTo 是空操作。
  //
  // 三条规则,少一条就会「条来跳去」:
  // 1. 用户手动上滑看历史时**不要拽回底部** —— 只有本来就在底部附近才跟。
  // 2. 流式期间用 instant:每个字符都发一次 smooth,动画会互相打架。
  // 3. 用 rAF 合并同一帧里的多次调用,不要每个 delta 都真滚一次。
  const stickToBottomRef = useRef(true);
  const scrollFrameRef = useRef(0);

useEffect(() => {
    const onScroll = () => {
      const gap = document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
      stickToBottomRef.current = gap < 120;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

// 新消息落地:平滑滚一次
  useEffect(() => {
    scrollToBottom(true);
  }, [messages.length, scrollToBottom]);

// 流式吐字:instant + rAF 合帧,不然逐字 smooth 会把页面抖散
  useEffect(() => {
    if (liveText || liveReasoning) scrollToBottom(false);
  }, [liveText, liveReasoning, scrollToBottom]);

useEffect(() => () => {
    if (scrollFrameRef.current) cancelAnimationFrame(scrollFrameRef.current);
  }, []);

// 首页带过来的第一句话:等会话拉回来、且确认库里还没有消息才发。
  // firstSentRef 挡住 StrictMode 的双次挂载,否则会重复发一条。
  useEffect(() => {
    if (!conversation || firstSentRef.current) return;
    const text = firstMessage?.trim() || "";
    const refs = firstRefs || [];
    if ((!text && refs.length === 0) || conversation.messages.length > 0) {
      firstSentRef.current = true;
      // 库里已有消息时丢掉进页种子,避免和历史重影
      if (bootLocalIdRef.current) {
        const bootId = bootLocalIdRef.current;
        setMessages((prev) => prev.filter((m) => m.id !== bootId));
        if (pendingUserIdRef.current === bootId) {
          pendingUserIdRef.current = null;
          setPendingUserId(null);
        }
      }
      return;
    }
    firstSentRef.current = true;
    void send({ kind: "text", text, refs });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [conversation, firstMessage]);

// 离开页面不再 abort:整理方案在 Celery,断连不该停任务。

useEffect(() => {
    const fromHistory = messages.flatMap((message) => message.refs || []).filter((ref) => ref.type === "asset");
    if (!fromHistory.length) return;
    setSessionUploads((prev) => {
      const seen = new Set(prev.map((item) => item.id));
      const extra = fromHistory.filter((item) => !seen.has(item.id));
      return extra.length ? [...prev, ...extra] : prev;
    });
  }, [messages]);

// 出片在 worker 里跑。刷新后 GENERATING 还在库里,进来立刻拉一次再轮询,
  // 不要等流式对话结束,也不要空等一个间隔才看见进度。
  useEffect(() => {
    if (!hasGenerating) return;
    let cancelled = false;
    const pull = () => {
      api
        .getCreation(conversationId)
        .then((detail) => {
          if (cancelled) return;
          setConversation(detail);
          setMessages((prev) => keepUnackedLocals(prev, detail.messages || []));
        })
        .catch(() => {
          /* 轮询失败静默重试,不打扰用户 */
        });
    };
    pull();
    const timer = window.setInterval(pull, POLL_INTERVAL_MS);
    return () => {
      cancelled = true;
      window.clearInterval(timer);
    };
  }, [hasGenerating, conversationId]);

if (remoteAwaiting) {
      // 轮次结束：立刻收起 thinking，不再被 hold 拖住
      stalePlanningNotifiedRef.current = false;
      clearThinking();
      return;
    }

if (remotePlanning) {
      if (userCancelledRef.current) {
        // 用户已终止:等服务端落到 idle,不把 thinking 又拉起来
        return;
      }
      // 本轮已落 error：不要继续挂「正在整理方案」
      const msgs = detail.messages || [];
      let lastUserIdx = -1;
      for (let i = msgs.length - 1; i >= 0; i -= 1) {
        if (msgs[i].role === "user") {
          lastUserIdx = i;
          break;
        }
      }
      if (lastUserIdx !== -1 && msgs.slice(lastUserIdx + 1).some((m) => m.kind === "error")) {
        stalePlanningNotifiedRef.current = false;
        clearThinking();
        setConversation((prev) => (prev ? { ...prev, agent_status: "idle" } : prev));
        return;
      }
      // 服务端卡死过久（worker 挂掉 / 任务未消费）：尝试 cancel 并收起，避免假 idle 导致下一发 409
      const startedMs = detail.agent_started_at ? Date.parse(detail.agent_started_at) : 0;
      const staleMs = 15 * 60 * 1000;
      if (startedMs && Date.now() - startedMs > staleMs) {
        if (!stalePlanningNotifiedRef.current) {
          stalePlanningNotifiedRef.current = true;
          notify("error", "整理方案超时，已停止，请重试");
          void api.cancelCreationAgent(conversationId).catch(() => {
            /* 已 idle / 竞态忽略 */
          });
        }
        clearThinking();
        setConversation((prev) => (prev ? { ...prev, agent_status: "idle" } : prev));
        return;
      }
      // 服务端确认 planning 后，再续一小段 hold，挡住中间夹杂的旧 idle 快照
      holdPlanningUntilRef.current = Math.max(holdPlanningUntilRef.current, Date.now() + 2500);
      streamingRef.current = true;
      setStreaming(true);
      return;
    }

// idle / 其它:用户终止完成
    stalePlanningNotifiedRef.current = false;
    if (userCancelledRef.current) {
      userCancelledRef.current = false;
    }

// idle：hold 窗口内且本轮还没落助手消息时，忽略陈旧快照；已落消息或窗口过期则收起
    if (holding && streamingRef.current && !turnLooksSettled(detail)) {
      setStreaming(true);
      return;
    }

clearThinking();
  }, [conversationId, notify]);

// awaiting_user 时不要被短暂 streaming 闪回拖进 planning 轮询，否则闸门按钮会跟着灰/闪
  const isPlanning =
    conversation?.agent_status === "planning"
    || (Boolean(streaming) && conversation?.agent_status !== "awaiting_user");

// 若状态已是等待用户而 streaming 仍残留，立刻收起，避免 send 被 streamingRef 卡住、按钮被灰掉
  useEffect(() => {
    if (conversation?.agent_status !== "awaiting_user") return;
    if (!streaming && !streamingRef.current) return;
    holdPlanningUntilRef.current = 0;
    streamingRef.current = false;
    setStreaming(false);
    setLiveText("");
    setLiveReasoning("");
    setActiveTool("");
  }, [conversation?.agent_status, streaming]);

// 整理方案在 Celery:靠 poll 续进度。刷新/重进只要 agent_status=planning 就会接着转。
  useEffect(() => {
    if (!isPlanning) return;
    let cancelled = false;
    const pull = () => {
      api
        .getCreation(conversationId)
        .then((detail) => {
          if (cancelled) return;
          mergeCreationDetail(detail);
        })
        .catch(() => {
          /* 轮询失败静默重试 */
        });
    };
    pull();
    const timer = window.setInterval(pull, AGENT_POLL_INTERVAL_MS);
    return () => {
      cancelled = true;
      window.clearInterval(timer);
    };
  }, [isPlanning, conversationId, mergeCreationDetail]);

const handleSend = () => {
    // 顺序要紧:先判 streaming 再清输入框。反过来的话,流式期间敲一次回车
    // 会把已经打好的内容清空,消息却没发出去。
    if (uploading) return;
    if (streaming && conversation?.agent_status !== "awaiting_user") return;
    const text = prompt.trim();
    if (!text && pendingRefs.length === 0) return;
    setPrompt("");
    setComposerHint(null);
    const refs = pendingRefs;
    setPendingRefs([]);
    void send({ kind: "text", text, refs });
  };

useEffect(() => {
    if (!mentionMenuOpen) return;
    const onDoc = (event: MouseEvent) => {
      if (!mentionWrapRef.current?.contains(event.target as Node)) {
        setMentionMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [mentionMenuOpen]);

const [topbarSlot, setTopbarSlot] = useState<HTMLElement | null>(null);
  useLayoutEffect(() => {
    setTopbarSlot(document.getElementById("omni-session-topbar-slot"));
  }, []);

const sessionHeader = (
        <header className="omni-session-header">
          <button type="button" className="omni-session-back" onClick={() => navigate("omniHistory")}>
            <ArrowLeft />
            <span>创作历史</span>
          </button>
          <div>
            <h1>{conversation?.title || "未命名创作"}</h1>
            <div className="omni-session-meta">
              {[
                conversation?.preset || "自由创作",
                params.model,
                params.resolution && params.ratio
                  ? `${params.resolution} · ${params.ratio}`
                  : params.ratio,
                params.duration,
              ]
                .filter(Boolean)
                .map((text) => (
                  <span key={String(text)}>{text}</span>
                ))}
            </div>
          </div>
        </header>
  );

return (
    <section className={`page-view omni-session-page${assetsOpen ? " has-assets-panel" : ""}`}>
      {topbarSlot ? createPortal(sessionHeader, topbarSlot) : sessionHeader}
      <div className="omni-session-shell">
        <button
          type="button"
          className={`omni-assets-entry${assetsOpen ? " is-open" : ""}`}
          aria-expanded={assetsOpen}
          aria-controls="omni-session-assets-drawer"
          title="查看对话资源"
          onClick={() => setAssetsOpen((open) => !open)}
        >
          <List />
          <span>查看对话资源</span>
        </button>

<main className="omni-session-feed" ref={feedRef} aria-live="polite">
          {visibleMessages.map(renderMessage)}
          {/* 流式中的临时气泡。挂 is-live 关掉入场动画 —— 它每来一个字符都会
              重渲染,带动画的话整条会一直在闪;真消息落地时它被替换掉,
              那一下也不该再演一次入场。 */}
          {(conversation?.agent_status !== "awaiting_user") && (streaming || conversation?.agent_status === "planning") && !hasGenerating ? (
            /生成图片|生成视频/.test(activeTool) && !liveText ? (
              <ProcessCard payload={{ kind: /生成视频/.test(activeTool) ? "video" : "image" }} />
            ) : liveText ? (
              <div className="omni-chat-row agent is-live">
                <span className="omni-chat-avatar">
                  <Sparkles />
                </span>
                <div className="omni-chat-bubble">
                  <ChatMarkdown text={liveText} />
                </div>
              </div>
            ) : (
              <div className="omni-chat-row agent is-live" aria-label="正在回复">
                <span className="omni-chat-avatar">
                  <Sparkles />
                </span>
                <div className={`omni-chat-bubble${liveReasoning ? " is-reasoning" : " is-thinking"}`}>
                  <div className="omni-think-head">
                    <span className="omni-typing" aria-hidden="true"><i /><i /><i /></span>
                    <span>{conversation?.agent_status === "planning" || streaming ? (isVideo ? "正在整理方案" : "正在整理画面") : activeTool ? `${activeTool}…` : liveReasoning ? "思考中" : isVideo ? "正在整理方案" : "正在整理画面"}</span>
                  </div>
                  {liveReasoning ? <p className="omni-think-text">{liveReasoning}</p> : null}
                </div>
              </div>
            )
          ) : null}
        </main>

<footer className={`omni-session-composer${composerHint ? " is-revise-hint" : ""}`}>
          <MentionChips
            refs={pendingRefs}
            tone="composer"
            onRemove={(id) => setPendingRefs((prev) => prev.filter((ref) => ref.id !== id))}
          />
          <textarea
            id="omniSessionPrompt"
            ref={composerRef}
            rows={2}
            placeholder={composerHint || "回复创作助手，也可以继续补充图片或要求……"}
            value={prompt}
            disabled={uploading || (streaming && conversation?.agent_status !== "awaiting_user")}
            onChange={(event) => {
              const value = event.target.value;
              setPrompt(value);
              const caret = event.target.selectionStart ?? 0;
              if (caret > 0 && value.charAt(caret - 1) === "@") void openMentions();
            }}
            onKeyDown={(event) => {
              if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault();
                handleSend();
              }
            }}
          />
          <div className="omni-session-composer-tools">
            <div className="omni-session-composer-options">
              <div className={`omni-session-upload-wrap${uploading ? " is-uploading" : ""}`}>
                <button
                  type="button"
                  className="omni-icon-tool"
                  aria-label={uploading ? "上传审核中" : "添加素材"}
                  title={uploading ? "上传并审核中…" : "添加素材"}
                  disabled={uploading || streaming}
                  onClick={() => {
                    if (uploading || streaming) return;
                    quickUploadReplyRef.current = null;
                    setUploadMenuOpen((open) => !open);
                    setMentionMenuOpen(false);
                  }}
                >
                  {uploading ? <span className="omni-send-spinner" /> : <Plus />}
                </button>
                {uploading ? <span className="omni-upload-status">上传审核中…</span> : null}
                <div className="omni-upload-menu" hidden={!uploadMenuOpen}>
                  <strong>添加参考素材</strong>
                  <button
                    type="button"
                    onClick={() => {
                      setUploadMenuOpen(false);
                      void openMentions();
                    }}
                  >
                    <FolderOpen />
                    <span>
                      从资产库选择<small>引用已有商品、人物或场景</small>
                    </span>
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      quickUploadReplyRef.current = null;
                      setUploadMenuOpen(false);
                      fileInputRef.current?.click();
                    }}
                  >
                    <Upload />
                    <span>
                      本地上传<small>添加电脑中的图片</small>
                    </span>
                  </button>
                </div>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  multiple
                  hidden
                  onChange={async (event) => {
                    const files = Array.from(event.target.files || []);
                    event.target.value = "";
                    if (!files.length) return;
                    const images = files.filter((file) => file.type.startsWith("image/"));
                    if (images.length !== files.length) {
                      notify("info", "全能创作仅支持上传图片");
                    }
                    if (!images.length) return;
                    setUploading(true);
                    try {
                      const quickReply = quickUploadReplyRef.current;
                      const uploadedRefs: CreationRef[] = [];
                      for (const file of images) {
                        const form = new FormData();
                        form.append("file", file);
                        // 后端上传时同步送审并等待通过,期间按钮保持「上传中」
                        const data = await api.uploadFreeVideoRef(form);
                        const ref: CreationRef = {
                          type: "asset",
                          id: data.asset_id,
                          name: data.name || file.name,
                          cover: data.thumb_url || data.url,
                        };
                        setSessionUploads((prev) => (prev.some((item) => item.id === ref.id) ? prev : [...prev, ref]));
                        uploadedRefs.push(ref);
                        if (!quickReply) {
                          setPendingRefs((prev) => {
                            if (prev.some((item) => item.id === ref.id) || prev.length >= MENTION_REF_LIMIT) return prev;
                            return [...prev, ref];
                          });
                        }
                      }
                      notify("success", images.length > 1 ? "素材已上传并通过审核" : "素材已上传并通过审核");
                      if (quickReply && uploadedRefs.length) {
                        quickUploadReplyRef.current = null;
                        void send({ kind: "text", text: uploadReplyText(quickReply), refs: uploadedRefs });
                      }
                    } catch (error) {
                      notify("error", (error as Error).message);
                      quickUploadReplyRef.current = null;
                    } finally {
                      setUploading(false);
                    }
                  }}
                />
              </div>
              <div className="omni-session-mention-wrap" ref={mentionWrapRef}>
                <button
                  type="button"
                  className="omni-icon-tool"
                  aria-label="引用素材"
                  onClick={() => {
                    if (mentionMenuOpen) setMentionMenuOpen(false);
                    else void openMentions("", mentionTab);
                  }}
                >
                  @
                </button>
                <div className="omni-session-mention-menu" hidden={!mentionMenuOpen} role="dialog" aria-label="引用素材">
                  <div className="omni-at-cats" role="tablist">
                    {MENTION_TABS.map((tab) => (
                      <button
                        type="button"
                        key={tab.type}
                        role="tab"
                        aria-selected={mentionTab === tab.type}
                        className={mentionTab === tab.type ? "is-on" : ""}
                        onClick={() => { if (mentionTab !== tab.type) void openMentions("", tab.type); }}
                      >
                        <tab.Icon size={14} />
                        {tab.label}
                      </button>
                    ))}
                  </div>
                  <div className="omni-at-list">
                    {mentionLoading ? (
                      <div className="omni-at-loading" aria-live="polite">
                        <span className="omni-send-spinner" />
                        加载中
                      </div>
                    ) : mentionResults.length === 0 ? (
                      <strong>这类还没有可引用的内容</strong>
                    ) : (
                      mentionResults.map((ref) => (
                        <button type="button" key={ref.id} onClick={() => insertMention(ref)}>
                          {ref.cover ? <img src={ref.cover} alt="" /> : <Play />}
                          <span>
                            {ref.name.split(" · ")[0]}
                            <small>{typeLabels[ref.type] || MENTION_TABS.find((tab) => tab.type === ref.type)?.label}</small>
                          </span>
                        </button>
                      ))
                    )}
                  </div>
                </div>
              </div>
            </div>
            <button
              type="button"
              className={`omni-session-send${isPlanning ? " is-stop" : ""}`}
              aria-label={isPlanning ? "终止" : "发送"}
              title={isPlanning ? "终止整理方案" : "发送"}
              disabled={
                isPlanning
                  ? stopping
                  : (
                    uploading
                    || (streaming && conversation?.agent_status !== "awaiting_user")
                  )
              }
              onClick={() => {
                if (isPlanning) void handleStop();
                else handleSend();
              }}
            >
              {isPlanning ? <Square fill="currentColor" /> : <ArrowUp />}
            </button>
          </div>
        </footer>
      </div>
      {promptView ? (
        <>
          <button type="button" className="omni-prompt-drawer-bg" aria-label="关闭 Prompt" onClick={() => setPromptView(null)} />
          <aside className="omni-prompt-drawer" role="dialog" aria-label={promptView.title}>
            <header>
              <span className="omni-prompt-drawer-file">
                <FileText />
              </span>
              <div>
                <strong>{promptView.title}</strong>
                <small>{documentDescription(promptView.title)}</small>
              </div>
              <button type="button" onClick={() => setPromptView(null)} aria-label="关闭">
                <X />
              </button>
            </header>
            <div className="omni-prompt-doc">
              {promptBlocks(promptView.body).map((block, index) => {
                if (block.type === "meta") {
                  return (
                    <article className="omni-prompt-block is-meta" key={`meta-${index}`}>
                      <h3>视频参数</h3>
                      <dl className="omni-prompt-meta">
                        {block.entries.map((entry) => (
                          <div key={`${entry.label}-${entry.value}`}>
                            <dt>{entry.label}</dt>
                            <dd>{entry.value}</dd>
                          </div>
                        ))}
                      </dl>
                    </article>
                  );
                }
                if (block.type === "table") {
                  return (
                    <article className="omni-prompt-block is-table" key={`table-${index}`}>
                      <div className="omni-prompt-table-wrap">
                        <table className="omni-prompt-table">
                          <thead>
                            <tr>
                              {block.headers.map((header) => (
                                <th key={header}>{header}</th>
                              ))}
                            </tr>
                          </thead>
                          <tbody>
                            {block.rows.map((row, rowIndex) => (
                              <tr key={`row-${rowIndex}`}>
                                {block.headers.map((_, colIndex) => (
                                  <td key={`cell-${rowIndex}-${colIndex}`}>{row[colIndex] || ""}</td>
                                ))}
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </article>
                  );
                }
                if (block.type === "shot") {
                  return (
                    <article className="omni-prompt-block is-shot" key={`shot-${block.heading}-${index}`}>
                      <h3>{block.heading}</h3>
                      {block.fields.length ? (
                        <dl className="omni-prompt-shot-fields">
                          {block.fields.map((field) => (
                            <div key={`${field.label}-${field.value.slice(0, 12)}`}>
                              <dt>{field.label}</dt>
                              <dd>{field.value}</dd>
                            </div>
                          ))}
                        </dl>
                      ) : null}
                      {block.text ? <p>{block.text}</p> : null}
                    </article>
                  );
                }
                return (
                  <article className="omni-prompt-block" key={`text-${block.heading}-${index}`}>
                    {block.heading ? <h3>{block.heading}</h3> : null}
                    {block.text ? <p>{block.text}</p> : null}
                  </article>
                );
              })}
            </div>
          </aside>
        </>
      ) : null}
      {assetsOpen ? (
        <aside
          id="omni-session-assets-drawer"
          className="drawer omni-assets-drawer show"
          role="dialog"
          aria-label="对话资源"
        >
          <header className="drawer-h omni-assets-drawer-head">
            <div>
              <strong>资源</strong>
              <small>{sessionAssets.length ? `本会话 · ${sessionAssets.length} 项` : "仅展示本会话素材"}</small>
            </div>
            <div className="omni-assets-panel-tools">
              <div className="view-toggle" aria-label="资源显示方式">
                <button
                  type="button"
                  className={assetView === "grid" ? "active" : ""}
                  aria-label="网格显示"
                  title="网格显示"
                  onClick={() => setAssetView("grid")}
                >
                  <Grid2X2 />
                </button>
                <button
                  type="button"
                  className={assetView === "list" ? "active" : ""}
                  aria-label="列表显示"
                  title="列表显示"
                  onClick={() => setAssetView("list")}
                >
                  <List />
                </button>
              </div>
              <label className="omni-assets-search">
                <Search />
                <input
                  value={assetQuery}
                  onChange={(event) => setAssetQuery(event.target.value)}
                  placeholder="搜索资源…"
                  aria-label="搜索对话资源"
                />
              </label>
              <button type="button" className="x" onClick={() => setAssetsOpen(false)} aria-label="关闭资源">
                <X />
              </button>
            </div>
          </header>
          <div className="drawer-b omni-assets-drawer-body">
            {sessionAssets.length === 0 ? (
                <div className="omni-assets-empty" role="status">
                  <FolderOpen />
                  <p>本会话还没有素材</p>
                </div>
            ) : visibleSessionAssetGroups.length === 0 ? (
              <div className="omni-assets-empty" role="status">
                <Search />
                <p>没有找到相关资源</p>
              </div>
            ) : (
              visibleSessionAssetGroups.map((group) => (
                  <section className="omni-assets-group" key={group.key}>
                    <h3>
                      {group.label}
                      <em>{group.items.length}</em>
                    </h3>
                    <div className={`omni-assets-grid${group.key === "document" || assetView === "list" ? " is-list" : ""}`}>
                      {group.items.map((asset) => {
                        if (asset.kind === "document") {
                          return (
                            <button
                              type="button"
                              className="omni-assets-card is-doc"
                              key={asset.key}
                              onClick={() => {
                                setPromptView({
                                  title: asset.promptTitle || asset.title,
                                  body: asset.promptBody || "暂无内容",
                                });
                              }}
                            >
                              <span className="omni-assets-thumb is-doc">
                                <FileText />
                              </span>
                              <span className="omni-assets-meta">
                                <strong>{asset.title}</strong>
                                <small>{asset.documentDescription || "文档 · 点击查看"}</small>
                              </span>
                            </button>
                          );
                        }
                        return (
                          <button
                            type="button"
                            className={`omni-assets-card is-${asset.kind}`}
                            key={asset.key}
                            disabled={!asset.src}
                            onClick={() => {
                              if (!asset.src) return;
                              setAssetPreview({
                                src: asset.src,
                                kind: asset.kind === "video" ? "video" : "image",
                                name: asset.title,
                              });
                            }}
                          >
                            <span className="omni-assets-thumb">
                              {asset.thumb ? (
                                <img src={asset.thumb} alt="" />
                              ) : (
                                <i>{asset.kind === "video" ? <Play /> : <Image />}</i>
                              )}
                              {asset.kind === "video" ? (
                                <span className="omni-assets-play" aria-hidden="true">
                                  <Play />
                                </span>
                              ) : null}
                            </span>
                            <span className="omni-assets-meta">
                              <strong>{asset.title}</strong>
                              <small>{asset.kind === "video" ? "视频" : "图片"}</small>
                            </span>
                          </button>
                        );
                      })}
                    </div>
                  </section>
                ))
            )}
          </div>
        </aside>
      ) : null}
      <MediaLightbox
        open={Boolean(assetPreview?.src)}
        src={assetPreview?.src || ""}
        kind={assetPreview?.kind}
        name={assetPreview?.name}
        close={() => setAssetPreview(null)}
      />
    </section>
  );
}

{renderInlineMarkdown(heading[1])}