fix: stabilize thinking block animation and bg streaming

static/src/components/chat/ChatArea.vue

@@ -42,7 +42,8 @@
             :class="{
               'streaming-content': action.streaming,
               'completed-tool': action.type === 'tool' && !action.streaming,
-              'immediate-show': action.streaming || action.type === 'text'
+              'immediate-show': action.streaming || action.type === 'text' || action.type === 'thinking',
+              'thinking-finished': action.type === 'thinking' && !action.streaming
             }"
           >
             <div

static/src/composables/useLegacySocket.ts

@@ -388,7 +388,27 @@ export async function initializeLegacySocket(ctx: any) {
             return action;
         };
 
+        const drainStreamingBufferImmediately = () => {
+            if (!streamingState.buffer.length) {
+                return;
+            }
+            const chunk = streamingState.buffer.join('');
+            streamingState.buffer.length = 0;
+            applyTextChunk(chunk);
+        };
+
         const scheduleStreamingFlush = () => {
+            const shouldFlushImmediately = typeof document !== 'undefined' && document.hidden === true;
+            if (shouldFlushImmediately) {
+                stopStreamingTimer();
+                drainStreamingBufferImmediately();
+                if (streamingState.apiCompleted) {
+                    finalizeStreamingText({ force: true });
+                } else {
+                    scheduleFinalizationAfterDrain();
+                }
+                return;
+            }
             if (streamingState.timer !== null) {
                 logStreamingDebug('scheduleStreamingFlush:timer-exists', snapshotStreamingState());
                 return;
@@ -814,7 +834,12 @@ export async function initializeLegacySocket(ctx: any) {
             });
             streamingState.apiCompleted = true;
             streamingState.pendingCompleteContent = data?.full_content || '';
-            if (!streamingState.buffer.length) {
+            const hidden = typeof document !== 'undefined' && document.hidden === true;
+            if (hidden) {
+                stopStreamingTimer();
+                drainStreamingBufferImmediately();
+                finalizeStreamingText({ force: true });
+            } else if (!streamingState.buffer.length) {
                 scheduleFinalizationAfterDrain();
             } else {
                 scheduleStreamingFlush();

static/src/styles/components/chat/_chat-area.scss

@@ -295,6 +295,10 @@
     animation-delay: 100ms;
 }
 
+.action-item.thinking-finished {
+    animation: none;
+}
+
 .progress-indicator {
     position: absolute;
     bottom: 0;