优化全能创作

2026-09-11 19:11:27 +08:00
parent dbcac8a44b
commit 02e5dbfb60
25 changed files with 2398 additions and 462 deletions
@@ -602,10 +602,11 @@ export const api = {
    );
  },
  /**
-   * 发一条消息 → SSE 流。事件:tool / reasoning / delta / message / task / credits / done / error。
-   * 和 agentScriptStream 同一套 fetch + ReadableStream(EventSource 只支持 GET,这里要 POST 带 body)。
+   * 发一条消息 → 异步整理方案。成功 **202** `{conversation_id, agent_status}`，
+   * 闸门短路径可能 **200** 带 `messages`；冲突 **409**（团队已有对话在整理方案）。
+   * 前端靠 getCreation / messages?after_seq= 轮询进度，离开页面也不中断 Celery。
   */
-  async creationSendStream(
+  creationSend(
    id: string,
    payload: {
      kind?: "text" | "elicit_answer";
@@ -615,50 +616,29 @@ export const api = {
      answers?: Record<string, string | string[]>;
      model_config_id?: string;
      params?: Record<string, string>;
-    },
-    onEvent: (evt: { type: string; [k: string]: unknown }) => void,
-    signal?: AbortSignal
-  ): Promise<void> {
-    const token = getToken();
-    const headers = new Headers({ "Content-Type": "application/json", Accept: "text/event-stream" });
-    if (token) headers.set("Authorization", `Token ${token}`);
-    const response = await fetch(`${API_BASE}/api/ai/creations/${id}/send/`, {
+    }
+  ) {
+    return request<{
+      conversation_id: string;
+      agent_status: "idle" | "planning" | "awaiting_user";
+      messages?: CreationMessage[];
+    }>(`/api/ai/creations/${id}/send/`, {
      method: "POST",
-      headers,
      body: JSON.stringify(payload),
-      signal
    });
-    if (!response.ok || !response.body) {
-      const text = await response.text().catch(() => "");
-      let message = text || "发送失败";
-      try {
-        const data = JSON.parse(text) as Record<string, unknown>;
-        if (typeof data.detail === "string") message = data.detail;
-      } catch {
-        /* 非 JSON 错误体,用原文 */
-      }
-      throw new ApiError(response.status, message);
-    }
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder("utf-8");
-    let buffer = "";
-    for (;;) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-      let sep: number;
-      while ((sep = buffer.indexOf("\n\n")) !== -1) {
-        const frame = buffer.slice(0, sep);
-        buffer = buffer.slice(sep + 2);
-        const dataLine = frame.split("\n").find((l) => l.startsWith("data:"));
-        if (!dataLine) continue;
-        try {
-          onEvent(JSON.parse(dataLine.slice(5).trim()));
-        } catch {
-          /* 跳过解析失败的帧 */
-        }
-      }
-    }
+  },
+  /**
+   * 终止整理方案(planning)。成功 **200** `{conversation_id, agent_status: idle}`；
+   * 非 planning **409**。服务端放锁 + Redis 取消标,离开页面再进也生效。
+   */
+  cancelCreationAgent(id: string) {
+    return request<{
+      conversation_id: string;
+      agent_status: "idle" | "planning" | "awaiting_user";
+    }>(`/api/ai/creations/${id}/cancel/`, {
+      method: "POST",
+      body: JSON.stringify({}),
+    });
  },
  adoptScript(projectId: string, script_version_id: string) {
    return request<ScriptVersion>(`/api/projects/${projectId}/adopt-script/`, {
@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { ChevronDown, SlidersHorizontal, Sparkles } from "lucide-react";
 import { CustomSelect } from "./custom-select";
 import { modelDurations, modelResolutions } from "./free-create/constants";
@@ -102,8 +103,10 @@ export function OmniParamBar({
  onDuration: (value: string) => void;
 }) {
  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState<{ top?: number; bottom?: number; left: number; width: number } | null>(null);
  const [customOn, setCustomOn] = useState(isVideo ? duration !== "智能时长" : true);
  const wrapRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);

  const capability = isVideo ? "video" as const : "image" as const;
  const selected = useMemo(
@@ -123,13 +126,45 @@ export function OmniParamBar({
    setCustomOn(isVideo ? duration !== "智能时长" : true);
  }, [isVideo, duration]);

+  function placeMenu() {
+    const el = wrapRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const gutter = 8;
+    const width = Math.min(330, window.innerWidth - gutter * 2);
+    const spaceBelow = window.innerHeight - rect.bottom - gutter;
+    const spaceAbove = rect.top - gutter;
+    const up = spaceBelow < 280 && spaceAbove > spaceBelow;
+    let left = rect.right - width;
+    left = Math.min(Math.max(gutter, left), window.innerWidth - width - gutter);
+    if (up) setMenuPos({ bottom: window.innerHeight - rect.top + 8, left, width });
+    else setMenuPos({ top: rect.bottom + 8, left, width });
+  }
+
+  useLayoutEffect(() => {
+    if (!menuOpen) {
+      setMenuPos(null);
+      return;
+    }
+    placeMenu();
+  }, [menuOpen, customOn]);
+
  useEffect(() => {
    if (!menuOpen) return;
    const onDown = (event: MouseEvent) => {
-      if (!wrapRef.current?.contains(event.target as Node)) setMenuOpen(false);
+      const target = event.target as Node;
+      if (wrapRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      setMenuOpen(false);
    };
+    const onReposition = () => placeMenu();
    document.addEventListener("mousedown", onDown);
-    return () => document.removeEventListener("mousedown", onDown);
+    window.addEventListener("resize", onReposition);
+    window.addEventListener("scroll", onReposition, true);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      window.removeEventListener("resize", onReposition);
+      window.removeEventListener("scroll", onReposition, true);
+    };
  }, [menuOpen]);

  useEffect(() => {
@@ -191,49 +226,66 @@ export function OmniParamBar({
          <span>{duration}</span>
          <ChevronDown />
        </button>
-        <div className="omni-duration-menu" hidden={!menuOpen}>
-          <span className="omni-duration-title">{isVideo ? "时长" : "生成张数"}</span>
-          {isVideo ? (
-            <div className="omni-duration-modes">
-              <button
-                type="button"
-                className={!customOn ? "active" : ""}
-                onClick={() => {
-                  setCustomOn(false);
-                  onDuration("智能时长");
-                  setMenuOpen(false);
+        {menuOpen && menuPos
+          ? createPortal(
+              <div
+                ref={menuRef}
+                className="omni-duration-menu is-portal"
+                style={{
+                  position: "fixed",
+                  top: menuPos.top,
+                  bottom: menuPos.bottom,
+                  left: menuPos.left,
+                  width: menuPos.width,
+                  right: "auto",
+                  zIndex: 10000,
                }}
              >
-                <Sparkles />
-                <span>智能时长</span>
-              </button>
-              <button
-                type="button"
-                className={customOn ? "active" : ""}
-                onClick={() => setCustomOn(true)}
-              >
-                <SlidersHorizontal />
-                <span>自定义时长</span>
-              </button>
-            </div>
-          ) : null}
-          <div className="omni-duration-values" hidden={isVideo && !customOn}>
-            {(isVideo ? durations.filter((value) => value !== "智能时长") : durations).map((value) => (
-              <button
-                type="button"
-                key={value}
-                className={duration === value ? "active" : ""}
-                onClick={() => {
-                  onDuration(value);
-                  setCustomOn(true);
-                  setMenuOpen(false);
-                }}
-              >
-                {value}
-              </button>
-            ))}
-          </div>
-        </div>
+                <span className="omni-duration-title">{isVideo ? "时长" : "生成张数"}</span>
+                {isVideo ? (
+                  <div className="omni-duration-modes">
+                    <button
+                      type="button"
+                      className={!customOn ? "active" : ""}
+                      onClick={() => {
+                        setCustomOn(false);
+                        onDuration("智能时长");
+                        setMenuOpen(false);
+                      }}
+                    >
+                      <Sparkles />
+                      <span>智能时长</span>
+                    </button>
+                    <button
+                      type="button"
+                      className={customOn ? "active" : ""}
+                      onClick={() => setCustomOn(true)}
+                    >
+                      <SlidersHorizontal />
+                      <span>自定义时长</span>
+                    </button>
+                  </div>
+                ) : null}
+                <div className="omni-duration-values" hidden={isVideo && !customOn}>
+                  {(isVideo ? durations.filter((value) => value !== "智能时长") : durations).map((value) => (
+                    <button
+                      type="button"
+                      key={value}
+                      className={duration === value ? "active" : ""}
+                      onClick={() => {
+                        onDuration(value);
+                        setCustomOn(true);
+                        setMenuOpen(false);
+                      }}
+                    >
+                      {value}
+                    </button>
+                  ))}
+                </div>
+              </div>,
+              document.body,
+            )
+          : null}
      </div>
    </>
  );
@@ -565,7 +565,8 @@
 }

 .omni-duration-control:has(.omni-duration-menu:not([hidden])) {
-  z-index: 190;
+  /* 最外层：盖过会话确认卡、sticky 输入框等 */
+  z-index: 400;
 }

 .omni-duration-trigger {
@@ -612,7 +613,7 @@
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
-  z-index: 190;
+  z-index: 400;
  width: 330px;
  padding: 16px;
  border: 1px solid rgba(34, 42, 54, .10);
@@ -625,6 +626,11 @@
  display: none;
 }

+.omni-duration-menu.is-up {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
 .omni-duration-title {
  display: block;
  margin-bottom: 10px;
@@ -1423,6 +1429,21 @@
  background: var(--klein);
 }

+.omni-history-status.generating {
+  color: #1a6bb5;
+}
+
+.omni-history-status.generating::before {
+  background: #2f8fef;
+  box-shadow: 0 0 0 3px rgba(47, 143, 239, 0.22);
+  animation: omni-history-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes omni-history-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.55; transform: scale(0.85); }
+}
+
 /* CustomSelect 对齐稿里的 custom-select-trigger */
 .omni-parameter .rs-select {
  width: 100%;
@@ -104,7 +104,8 @@

 .omni-session-feed {
  flex: 1 1 auto;
-  padding: 30px 0 18px;
+  /* 底部留给 sticky composer(+确认卡高度余量),最后一条消息/确认卡滚到输入框上方,不被挡住 */
+  padding: 30px 0 168px;
  background: transparent;
 }

@@ -120,6 +121,8 @@
   这里改用 .is-user 避开 —— 本文件相对设计稿唯一的类名改动。 */
 .omni-chat-row.is-user {
  justify-content: flex-end;
+  /* 用户气泡常从乐观 id 换成服务端 id；入场动画会让它闪一下，关掉 */
+  animation: none;
 }

 .omni-chat-avatar {
@@ -328,8 +331,18 @@
 }

 .omni-plan-points i,
-.omni-plan-summary i {
+.omni-plan-points .omni-plan-point-body,
+.omni-plan-summary i,
+.omni-plan-summary .omni-plan-point-body {
+  display: block;
  font-style: normal;
+  font-weight: 400;
+  color: #525965;
+}
+
+.omni-strategy-grid .omni-strategy-value {
+  white-space: pre-wrap;
+  word-break: break-word;
 }

 .omni-plan-timeline {
@@ -921,6 +934,7 @@
  color: #fff;
  background: var(--klein);
  cursor: pointer;
+  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
 }

 .omni-session-send svg {
@@ -928,6 +942,22 @@
  height: 16px;
 }

+/* 整理方案中:发送钮变成终止(方块),中性深色贴合 omni 工具条 */
+.omni-session-send.is-stop {
+  background: #2a2f38;
+  color: #fff;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
+}
+
+.omni-session-send.is-stop:hover:not(:disabled) {
+  background: #3a404a;
+}
+
+.omni-session-send.is-stop svg {
+  width: 12px;
+  height: 12px;
+}
+
 .omni-process-card {
  padding: 0;
 }
@@ -1286,6 +1316,9 @@
 /* ── 确认闸门(.omni-confirm-card)· 设计稿里是方案卡下面那条操作行,这里独立成卡。
   积分数字挂在按钮里 —— 用户按下去之前就该知道要花多少。 */
 .omni-confirm-card {
+  position: relative;
+  /* 不要压过 sticky composer(z-index:3);下拉菜单自身另有更高 z-index */
+  z-index: 1;
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
@@ -1296,6 +1329,8 @@
  border: 1px solid rgba(34, 42, 54, .10);
  border-radius: 14px;
  background: #fff;
+  /* 时长/参数下拉要冒出卡片，不能被裁 */
+  overflow: visible;
 }

 .omni-confirm-copy {
@@ -1317,15 +1352,43 @@
 }

 .omni-confirm-params {
+  position: relative;
+  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
+  overflow: visible;
 }

 .omni-confirm-params .omni-duration-control {
  position: relative;
-  z-index: 20;
+  z-index: 80;
+}
+
+.omni-confirm-params .omni-duration-control:has(.omni-duration-menu:not([hidden])) {
+  z-index: 120;
+}
+
+/* 确认卡贴着输入框：时长菜单向上展开，避免「超出」压到 composer */
+.omni-confirm-params .omni-duration-menu {
+  top: auto;
+  bottom: calc(100% + 8px);
+  right: 0;
+  left: auto;
+  width: min(330px, calc(100vw - 48px));
+  max-height: min(360px, calc(100vh - 120px));
+  overflow-y: auto;
+}
+
+.omni-confirm-params .omni-parameter:has(.custom-select-shell.open) {
+  z-index: 40;
+}
+
+.omni-confirm-params .omni-parameter .custom-select-menu {
+  /* 贴底时也优先向上翻，避免被 sticky composer 挡住 */
+  top: auto;
+  bottom: calc(100% + 6px);
 }

 .omni-confirm-hint {
@@ -1386,10 +1449,11 @@
 .omni-mention-chips {
  display: flex;
  flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }

 .omni-mention-chip {
+  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
@@ -1400,6 +1464,34 @@
  line-height: 1.2;
 }

+.omni-mention-chip.has-thumb {
+  max-width: none;
+  padding: 0;
+  border-radius: 10px;
+  background: transparent;
+  border: 0;
+  overflow: visible;
+}
+
+.omni-mention-thumb {
+  display: block;
+  width: 52px;
+  height: 52px;
+  padding: 0;
+  border: 1px solid rgba(34, 42, 54, .1);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f3f4f7;
+  cursor: zoom-in;
+}
+
+.omni-mention-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .omni-mention-chip i {
  flex: 0 0 auto;
  padding: 2px 6px;
@@ -1416,7 +1508,7 @@
  white-space: nowrap;
 }

-.omni-mention-chip button {
+.omni-mention-chip .omni-mention-remove {
  width: 16px;
  height: 16px;
  display: grid;
@@ -1429,12 +1521,23 @@
  cursor: pointer;
 }

-.omni-mention-chip button svg {
+.omni-mention-chip.has-thumb .omni-mention-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  color: #fff;
+  background: rgba(34, 42, 54, .72);
+  box-shadow: 0 2px 6px rgba(20, 27, 38, .18);
+}
+
+.omni-mention-chip .omni-mention-remove svg {
  width: 11px;
  height: 11px;
 }

-.omni-mention-chips.is-user .omni-mention-chip {
+.omni-mention-chips.is-user .omni-mention-chip:not(.has-thumb) {
  color: #fff;
  background: rgba(255, 255, 255, .14);
 }
@@ -1444,11 +1547,20 @@
  background: #edf5ff;
 }

+.omni-chat-stack .omni-mention-chips.is-user {
+  justify-content: flex-end;
+  margin: 0 0 8px;
+}
+
+.omni-mention-chips.is-user .omni-mention-chip.has-thumb .omni-mention-thumb {
+  border-color: var(--border-faint);
+}
+
 .omni-mention-chips.is-composer {
  margin: 0 2px 8px;
 }

-.omni-mention-chips.is-composer .omni-mention-chip {
+.omni-mention-chips.is-composer .omni-mention-chip:not(.has-thumb) {
  color: #2b3240;
  background: #edf5ff;
  border: 1px solid rgba(0, 47, 167, .12);
@@ -1459,7 +1571,7 @@
  background: var(--klein);
 }

-.omni-mention-chips.is-composer .omni-mention-chip button {
+.omni-mention-chips.is-composer .omni-mention-chip:not(.has-thumb) .omni-mention-remove {
  color: #66707d;
 }

@@ -1471,15 +1583,98 @@
  max-width: min(670px, 82%);
 }

+/* 用户短消息(如「嗯」)勿被下方 time+操作条撑宽;气泡贴合文案,长文仍受 max-width 约束 */
+.omni-chat-row.is-user .omni-chat-stack {
+  align-items: flex-end;
+  width: fit-content;
+}
+
 .omni-chat-stack .omni-chat-bubble {
  max-width: 100%;
 }

-/* 发送中:不要文案;用户气泡略提亮 + 柔和呼吸,发出去后恢复纯黑 */
+.omni-chat-row.is-user .omni-chat-stack .omni-chat-bubble {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.omni-user-message-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 24px;
+  margin-top: 2px;
+  color: var(--black-alpha-48);
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .15s ease, visibility 0s linear .15s;
+}
+
+.omni-chat-row.is-user:hover .omni-user-message-actions,
+.omni-chat-row.is-user:focus-within .omni-user-message-actions {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.omni-user-message-actions time {
+  margin-right: 8px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.omni-user-message-actions button {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: var(--r-md);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.omni-user-message-actions button:hover:not(:disabled) {
+  color: var(--accent-black);
+  background: var(--black-alpha-4);
+}
+
+.omni-user-message-actions button:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.omni-user-message-actions svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 发送中:不要文案;左侧柔和呼吸高亮,气泡本身不变形 */
+.omni-chat-row.is-user .omni-chat-stack.is-pending {
+  padding-left: 6px;
+}
+
+.omni-chat-row.is-user .omni-chat-stack.is-pending::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 3px;
+  border-radius: 2px;
+  background: #5b6572;
+  animation: omniSendPulse 1.35s ease-in-out infinite;
+  pointer-events: none;
+}
+
 .omni-chat-row.is-user .omni-chat-stack.is-pending .omni-chat-bubble {
  background: #3a424e;
  border-color: #3a424e;
-  animation: omniSendPulse 1.35s ease-in-out infinite;
 }

 .omni-send-spinner {
@@ -1497,29 +1692,6 @@
  color: #5c6570;
 }

-.omni-typing {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.omni-typing i {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--klein);
-  opacity: .35;
-  animation: omniTyping 1.1s ease-in-out infinite;
-}
-
-.omni-typing i:nth-child(2) { animation-delay: .15s; }
-.omni-typing i:nth-child(3) { animation-delay: .3s; }
-
-@keyframes omniTyping {
-  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
-  40% { opacity: 1; transform: translateY(-2px); }
-}
-
 .omni-chat-bubble.is-reasoning {
  display: flex;
  flex-direction: column;
@@ -1549,14 +1721,37 @@
  padding-left: 10px;
 }

+.omni-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.omni-typing i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--klein);
+  opacity: .35;
+  animation: omniTyping 1.1s ease-in-out infinite;
+}
+
+.omni-typing i:nth-child(2) { animation-delay: .15s; }
+.omni-typing i:nth-child(3) { animation-delay: .3s; }
+
+@keyframes omniTyping {
+  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-2px); }
+}
+
@keyframes omniSendPulse {
  0%, 100% {
-    background: #3a424e;
-    box-shadow: 0 0 0 0 rgba(58, 66, 78, 0);
+    background: #5b6572;
+    opacity: .45;
  }
  50% {
-    background: #4a5360;
-    box-shadow: 0 0 0 4px rgba(58, 66, 78, .12);
+    background: #8b95a3;
+    opacity: 1;
  }
 }

@@ -1602,7 +1797,7 @@
  right: 12px;
  bottom: 12px;
  z-index: 81;
-  width: min(420px, calc(100vw - 24px));
+  width: min(560px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -1713,6 +1908,105 @@
  word-break: break-word;
 }

+.omni-prompt-block.is-shot {
+  border-color: rgba(0, 47, 167, .10);
+  background: linear-gradient(180deg, #fbfcff 0%, #fff 48%);
+}
+
+.omni-prompt-meta,
+.omni-prompt-shot-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.omni-prompt-meta div,
+.omni-prompt-shot-fields div {
+  min-width: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f6f8fb;
+}
+
+.omni-prompt-shot-fields {
+  grid-template-columns: 1fr;
+  margin-bottom: 10px;
+}
+
+.omni-prompt-meta dt,
+.omni-prompt-shot-fields dt {
+  margin: 0;
+  color: #858b94;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.omni-prompt-meta dd,
+.omni-prompt-shot-fields dd {
+  margin: 4px 0 0;
+  color: #272d37;
+  font-size: 13px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.omni-prompt-block.is-table {
+  padding: 10px;
+}
+
+.omni-prompt-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid rgba(34, 42, 54, .08);
+  background: #fff;
+}
+
+.omni-prompt-table {
+  width: 100%;
+  min-width: 420px;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.omni-prompt-table th,
+.omni-prompt-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(34, 42, 54, .07);
+  color: #2b3240;
+  font-size: 12px;
+  line-height: 1.55;
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+}
+
+.omni-prompt-table th {
+  position: sticky;
+  top: 0;
+  color: #5c6570;
+  background: #f6f8fb;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.omni-prompt-table th:first-child,
+.omni-prompt-table td:first-child {
+  width: 72px;
+  color: var(--klein);
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.omni-prompt-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.omni-prompt-table tbody tr:hover td {
+  background: #fafbff;
+}
+

 .omni-gate-bubble {
  display: flex;
@@ -1754,3 +2048,16 @@
  font-size: 12px;
  color: #8a93a0;
 }
+
+
+.omni-session-upload-wrap.is-uploading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.omni-upload-status {
+  font-size: 12px;
+  color: #5c6570;
+  white-space: nowrap;
+}
@@ -17,7 +17,7 @@ import {
  WandSparkles,
  X,
 } from "lucide-react";
-import { api } from "../api";
+import { api, ApiError } from "../api";
 import { findCatalogModel } from "../components/omni-param-bar";
 import { modelResolutions } from "../components/free-create/constants";
 import { ConfirmModal } from "../components/overlays";
@@ -424,7 +424,11 @@ export function OmniCreatePage({
                    navigate("omniSession", { conversationId: conversation.id, firstMessage: text, firstRefs: pendingRefs, firstUploads: sessionUploads });
                  })
                  .catch((error) => {
-                    onNotify?.("error", (error as Error).message);
+                    const status = (error as { status?: number }).status;
+                    onNotify?.(
+                      status === 409 ? "info" : "error",
+                      (error as Error).message || "创建失败",
+                    );
                    setStarting(false);
                  });
              }}
@@ -615,7 +619,7 @@ export function OmniHistoryPage({
            <article
              className="omni-history-item"
              key={item.id}
-              data-status={item.status}
+              data-status={item.agent_status === "planning" ? "generating" : item.status}
              onClick={() => navigate("omniSession", { conversationId: item.id })}
            >
              {item.cover_url ? (
@@ -627,9 +631,19 @@ export function OmniHistoryPage({
              )}
              <div>
                <span
-                  className={`omni-history-status${item.status === "completed" ? " completed" : ""}`}
+                  className={`omni-history-status${
+                    item.agent_status === "planning"
+                      ? " generating"
+                      : item.status === "completed"
+                        ? " completed"
+                        : ""
+                  }`}
                >
-                  {item.status === "completed" ? "已完成" : "进行中"}
+                  {item.agent_status === "planning"
+                    ? "生成中"
+                    : item.status === "completed"
+                      ? "已完成"
+                      : "进行中"}
                </span>
                <h2>{item.title}</h2>
                <p>
@@ -710,6 +710,8 @@ export type FreeVideoUploadResult = {
  width: number | null;
  height: number | null;
  thumb_url: string;
+  review_status?: "active" | "failed" | "processing";
+  in_library?: boolean;
 };

 // 自由创作·人物素材库(火山 Assets API 引用登记)
@@ -920,8 +922,12 @@ export type CreationMessage = {
  task: string | null;
  seq: number;
  created_at: string;
+  /** 前端乐观发送用的稳定 key,避免本地气泡换成服务端 id 时整条卸载重闪 */
+  clientKey?: string;
 };

+export type CreationAgentStatus = "idle" | "planning" | "awaiting_user";
+
 export type CreationConversation = {
  id: string;
  title: string;
@@ -929,6 +935,8 @@ export type CreationConversation = {
  preset: string;
  params: Record<string, string>;
  status: "running" | "completed" | "failed";
+  agent_status: CreationAgentStatus;
+  agent_started_at?: string | null;
  message_count: number;
  cover_url: string;
  last_active_at: string;