优化全能创作

core/frontend/src/omni-session-page.css

@@ -1463,25 +1463,29 @@
   color: #66707d;
 }
 
-.omni-send-pending {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: rgba(255, 255, 255, .72);
-  font-size: 12px;
+.omni-chat-stack {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: min(670px, 82%);
 }
 
-.omni-send-spinner,
-.omni-typing i {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+.omni-chat-stack .omni-chat-bubble {
+  max-width: 100%;
+}
+
+/* 发送中:不要文案;用户气泡略提亮 + 柔和呼吸,发出去后恢复纯黑 */
+.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 {
-  border: 1.5px solid rgba(255, 255, 255, .28);
-  border-top-color: #fff;
-  animation: omniSpin .7s linear infinite;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
 }
 
 .omni-chat-bubble.is-thinking {
@@ -1502,6 +1506,7 @@
 .omni-typing i {
   width: 6px;
   height: 6px;
+  border-radius: 50%;
   background: var(--klein);
   opacity: .35;
   animation: omniTyping 1.1s ease-in-out infinite;
@@ -1515,19 +1520,6 @@
   40% { opacity: 1; transform: translateY(-2px); }
 }
 
-.omni-process-skeleton,
-.omni-think-skeleton {
-  height: 168px;
-  border-radius: var(--r-md, 12px);
-  background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 45%, #eef1f5 100%);
-  background-size: 220% 100%;
-  animation: omniShimmer 1.2s ease infinite;
-}
-
-.omni-think-skeleton {
-  display: none;
-}
-
 .omni-chat-bubble.is-reasoning {
   display: flex;
   flex-direction: column;
@@ -1557,6 +1549,25 @@
   padding-left: 10px;
 }
 
+@keyframes omniSendPulse {
+  0%, 100% {
+    background: #3a424e;
+    box-shadow: 0 0 0 0 rgba(58, 66, 78, 0);
+  }
+  50% {
+    background: #4a5360;
+    box-shadow: 0 0 0 4px rgba(58, 66, 78, .12);
+  }
+}
+
+.omni-process-skeleton {
+  height: 168px;
+  border-radius: var(--r-md, 12px);
+  background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 45%, #eef1f5 100%);
+  background-size: 220% 100%;
+  animation: omniShimmer 1.2s ease infinite;
+}
+
 @keyframes omniShimmer {
   0% { background-position: 100% 0; }
   100% { background-position: -100% 0; }

core/frontend/src/routes/omni-session.tsx

@@ -326,14 +326,16 @@ function ElicitCard({
   // 素材选择闸门:先轻量询问,用户愿意时再展开真正的选择卡
   if (phase === "gate") {
     const gateAnswer = saved._asset_gate;
-    const selectedLabel = gateField?.options?.find((option) => option.value === gateAnswer)?.label;
+    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">
-          <p className="omni-chat-text">{gateLabel}</p>
+          <p className="omni-chat-text">{message.text || gateLabel}</p>
           {!submitted ? (
             <div className="omni-gate-actions">
               {(gateField?.options || []).map((option) => (
@@ -1188,15 +1190,11 @@ export function OmniSessionPage({
                 <Sparkles />
               </span>
             )}
-            <div className="omni-chat-bubble">
-              {message.role === "user" ? <MentionChips refs={refs} tone="user" /> : null}
-              {body ? <p className="omni-chat-text">{body}</p> : null}
-              {pending ? (
-                <span className="omni-send-pending">
-                  <span className="omni-send-spinner" />
-                  发送中
-                </span>
-              ) : null}
+            <div className={`omni-chat-stack${pending ? " is-pending" : ""}`}>
+              <div className="omni-chat-bubble" aria-busy={pending || undefined}>
+                {message.role === "user" ? <MentionChips refs={refs} tone="user" /> : null}
+                {body ? <p className="omni-chat-text">{body}</p> : null}
+              </div>
             </div>
           </div>
         );
@@ -1248,36 +1246,36 @@ export function OmniSessionPage({
           {streaming && !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${liveText || liveReasoning ? "" : " is-thinking"}${liveReasoning && !liveText ? " is-reasoning" : ""}`}>
-                  {liveText ? (
-                    <p className="omni-chat-text">{liveText}</p>
-                  ) : liveReasoning ? (
-                    <>
-                      <div className="omni-think-head">
-                        <span className="omni-typing" aria-hidden="true">
-                          <i />
-                          <i />
-                          <i />
-                        </span>
-                        <span>{activeTool ? `${activeTool}…` : "思考中"}</span>
-                      </div>
-                      <p className="omni-think-text">{liveReasoning}</p>
-                    </>
-                  ) : (
-                    <>
-                      <span className="omni-typing" aria-hidden="true">
-                        <i />
-                        <i />
-                        <i />
-                      </span>
-                      <span>{activeTool ? `${activeTool}…` : isVideo ? "正在整理方案" : "正在思考"}</span>
-                    </>
-                  )}
+                <div className="omni-chat-bubble">
+                  <p className="omni-chat-text">{liveText}</p>
+                </div>
+              </div>
+            ) : liveReasoning ? (
+              <div className="omni-chat-row agent is-live">
+                <span className="omni-chat-avatar">
+                  <Sparkles />
+                </span>
+                <div className="omni-chat-bubble is-reasoning">
+                  <div className="omni-think-head">
+                    <span className="omni-typing" aria-hidden="true"><i /><i /><i /></span>
+                    <span>{activeTool ? `${activeTool}…` : "正在整理方案"}</span>
+                  </div>
+                  <p className="omni-think-text">{liveReasoning}</p>
+                </div>
+              </div>
+            ) : (
+              <div className="omni-chat-row agent is-live" aria-label="正在回复">
+                <span className="omni-chat-avatar">
+                  <Sparkles />
+                </span>
+                <div className="omni-chat-bubble is-thinking" aria-hidden="true">
+                  <span className="omni-typing"><i /><i /><i /></span>
+                  <span>{activeTool ? `${activeTool}…` : isVideo ? "正在整理方案" : "正在思考"}</span>
                 </div>
               </div>
             )