fix(flow-chat): stabilize streamed layout transitions

src/web-ui/src/app/scenes/SceneViewport.scss

@@ -57,7 +57,7 @@
     margin: 0;
   }
 
-  // ── Lazy chunk loading (matches flow_chat ProcessingIndicator dots) ──
+  // ── Lazy chunk loading ────────────────────────────────
 
   &__lazy-fallback {
     position: absolute;
@@ -67,13 +67,6 @@
     justify-content: center;
     pointer-events: none;
     z-index: 1;
-
-    .processing-indicator {
-      max-width: none;
-      width: auto;
-      margin: 0;
-      padding: 0;
-    }
   }
 
   // ── Scene slot ────────────────────────────────────────

src/web-ui/src/app/scenes/SceneViewport.tsx

@@ -21,7 +21,7 @@ import type { SceneTabId } from '../components/SceneBar/types';
 import { useSceneManager } from '../hooks/useSceneManager';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useDialogCompletionNotify } from '../hooks/useDialogCompletionNotify';
-import { ProcessingIndicator } from '@/flow_chat/components/modern/ProcessingIndicator';
+import { DotMatrixLoader } from '@/component-library';
 import SettingsScene from './settings/SettingsScene';
 import AssistantScene from './assistant/AssistantScene';
 import SessionScene from './session/SessionScene';
@@ -195,7 +195,7 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
                       aria-busy="true"
                       aria-label={t('loading.scenes')}
                     >
-                      <ProcessingIndicator visible />
+                      <DotMatrixLoader size="medium" />
                     </div>
                   ) : null
                 }

src/web-ui/src/app/scenes/assistant/AssistantScene.scss

@@ -11,12 +11,5 @@
     align-items: center;
     justify-content: center;
     pointer-events: none;
-
-    .processing-indicator {
-      max-width: none;
-      width: auto;
-      margin: 0;
-      padding: 0;
-    }
   }
 }

src/web-ui/src/app/scenes/assistant/AssistantScene.tsx

@@ -2,7 +2,7 @@ import React, { Suspense, lazy, useMemo, useEffect } from 'react';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { WorkspaceKind } from '@/shared/types';
-import { ProcessingIndicator } from '@/flow_chat/components/modern/ProcessingIndicator';
+import { DotMatrixLoader } from '@/component-library';
 import { useMyAgentStore } from '../my-agent/myAgentStore';
 import './AssistantScene.scss';
 
@@ -78,7 +78,7 @@ const AssistantScene: React.FC<AssistantSceneProps> = ({ workspacePath }) => {
             aria-busy="true"
             aria-label={t('loading.scenes')}
           >
-            <ProcessingIndicator visible />
+            <DotMatrixLoader size="medium" />
           </div>
         )}
       >

src/web-ui/src/features/dispatch/DispatchJobObserver.test.ts

@@ -18,6 +18,11 @@ import {
   SessionExecutionState,
 } from '@/flow_chat/state-machine/types';
 import { scheduleModelResponseStatus } from '@/flow_chat/services/flow-chat-manager/RuntimeStatusModule';
+import {
+  getRuntimeStatus,
+  showRuntimeStatus,
+  useRuntimeStatusStore,
+} from '@/flow_chat/store/runtimeStatusStore';
 
 const mocks = vi.hoisted(() => ({
   listJobs: vi.fn(),
@@ -245,10 +250,12 @@ describe('DispatchJobObserver', () => {
   beforeEach(() => {
     vi.useFakeTimers();
     dispatchJobStore.getState().clear();
+    useRuntimeStatusStore.getState().reset();
     flowChatStore.setState(() => ({
       sessions: new Map(),
       activeSessionId: null,
     }));
+    useRuntimeStatusStore.getState().reset();
     stateMachineManager.clear();
     mocks.listJobs.mockReset().mockResolvedValue([]);
     mocks.status.mockReset();
@@ -526,25 +533,6 @@ describe('DispatchJobObserver', () => {
   it('cancels delayed runtime status rendering when a terminal snapshot drains', async () => {
     registerRunningJob();
     installProcessingProjection();
-    flowChatStore.updateDialogTurn('session-1', 'turn-1', turn => ({
-      ...turn,
-      modelRounds: turn.modelRounds.map(round => ({
-        ...round,
-        items: [{
-          id: 'runtime-status-main-round-1',
-          type: 'text',
-          content: '\u200B',
-          timestamp: 1,
-          status: 'streaming',
-          isStreaming: true,
-          isMarkdown: false,
-          runtimeStatus: {
-            phase: 'waiting_model',
-            scope: 'main',
-          },
-        }],
-      })),
-    }));
     const context = createTerminalContext();
     scheduleModelResponseStatus(
       context,
@@ -553,7 +541,13 @@ describe('DispatchJobObserver', () => {
       'round-1',
       { delayMs: 1000 },
     );
+    showRuntimeStatus({
+      sessionId: 'session-1',
+      turnId: 'turn-1',
+      roundId: 'round-1',
+    });
     expect(context.runtimeStatusTimers.size).toBe(1);
+    expect(getRuntimeStatus('session-1')).toBeDefined();
     mocks.status.mockResolvedValue(status({
       state: 'succeeded',
       cursor: 0,
@@ -562,28 +556,11 @@ describe('DispatchJobObserver', () => {
     const cleanup = installDispatchJobObserver(context);
 
     await vi.advanceTimersByTimeAsync(0);
-    const settledItems = flowChatStore
-      .getState()
-      .sessions
-      .get('session-1')!
-      .dialogTurns[0]
-      .modelRounds[0]
-      .items;
     expect(context.runtimeStatusTimers.size).toBe(0);
-    expect(settledItems).toHaveLength(0);
+    expect(getRuntimeStatus('session-1')).toBeUndefined();
 
     await vi.advanceTimersByTimeAsync(1000);
-    const itemsAfterTimerDeadline = flowChatStore
-      .getState()
-      .sessions
-      .get('session-1')!
-      .dialogTurns[0]
-      .modelRounds[0]
-      .items;
-    expect(itemsAfterTimerDeadline).toHaveLength(0);
-    expect(itemsAfterTimerDeadline.some(item => (
-      item.type === 'text' && item.runtimeStatus
-    ))).toBe(false);
+    expect(getRuntimeStatus('session-1')).toBeUndefined();
     cleanup();
   });
 

src/web-ui/src/features/dispatch/DispatchJobObserver.ts

@@ -6,6 +6,7 @@ import { notificationService } from '@/shared/notification-system';
 import { agenticEventListener } from '@/flow_chat/services/AgenticEventListener';
 import type { FlowChatContext } from '@/flow_chat/services/flow-chat-manager/types';
 import { clearRuntimeStatus } from '@/flow_chat/services/flow-chat-manager/RuntimeStatusModule';
+import { clearRuntimeStatusState } from '@/flow_chat/store/runtimeStatusStore';
 import { stateMachineManager } from '@/flow_chat/state-machine';
 import {
   SessionExecutionEvent,
@@ -258,6 +259,8 @@ function reconcileDispatchTerminalRuntime(
   const lastTurn = dialogTurns[dialogTurns.length - 1];
   if (lastTurn) {
     clearRuntimeStatus(context, sessionId, lastTurn.id);
+  } else {
+    clearRuntimeStatusState({ sessionId });
   }
   context.activeTextItems?.get(sessionId)?.clear();
   context.contentBuffers?.get(sessionId)?.clear();

src/web-ui/src/flow_chat/components/FlowTextBlock.scss

@@ -136,24 +136,6 @@
     }
   }
 
-  &--runtime-status {
-    display: flex;
-    align-items: center;
-    gap: var(--flowchat-control-gap);
-    min-height: 1.5rem;
-    color: var(--color-text-muted);
-    font-size: var(--flowchat-font-size-base);
-    line-height: var(--flowchat-support-line-height);
-    opacity: 0.86;
-  }
-
-  &__runtime-status-icon {
-    flex: 0 0 auto;
-  }
-
-  &__runtime-status-text {
-    overflow-wrap: anywhere;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {

src/web-ui/src/flow_chat/components/FlowTextBlock.test.tsx

@@ -16,13 +16,6 @@ vi.mock('@/component-library', () => ({
     mocks.markdownRenderer(props);
     return <div data-testid="markdown-renderer">{props.content}</div>;
   },
-  DotMatrixLoader: () => <div data-testid="dot-matrix-loader" />,
-}));
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: () => [],
-  }),
 }));
 
 vi.mock('./modern/FlowChatContext', () => ({
@@ -70,4 +63,5 @@ describe('FlowTextBlock', () => {
 
     expect(mocks.markdownRenderer).toHaveBeenCalledTimes(1);
   });
+
 });

src/web-ui/src/flow_chat/components/FlowTextBlock.tsx

@@ -5,9 +5,7 @@
  */
 
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { MarkdownRenderer } from '@/component-library';
-import { DotMatrixLoader } from '@/component-library';
 import type { MarkdownTraceContext } from '@/component-library';
 import type { FlowTextItem } from '../types/flow-chat';
 import { useFlowChatContext } from './modern/FlowChatContext';
@@ -34,34 +32,6 @@ interface FlowTextBlockProps {
   testAttributes?: Record<`data-${string}`, string | number | boolean | undefined>;
 }
 
-const RuntimeStatusBlock: React.FC<Pick<FlowTextBlockProps, 'textItem' | 'className' | 'testId' | 'testAttributes'>> = ({
-  textItem,
-  className = '',
-  testId,
-  testAttributes,
-}) => {
-  const { t } = useTranslation('flow-chat/processing-hints');
-  const rawHints = t('items', { returnObjects: true });
-  const hints = Array.isArray(rawHints)
-    ? rawHints.filter((item): item is string => typeof item === 'string')
-    : [];
-  const hintIndex = hints.length > 0
-    ? Math.abs(textItem.id.split('').reduce((acc, ch) => acc + ch.charCodeAt(0), 0)) % hints.length
-    : 0;
-  const hint = hints[hintIndex] ?? '';
-
-  return (
-    <div
-      className={`flow-text-block flow-text-block--runtime-status ${className}`}
-      data-testid={testId}
-      {...testAttributes}
-    >
-      <DotMatrixLoader size="small" className="flow-text-block__runtime-status-icon" />
-      {hint && <span className="flow-text-block__runtime-status-text">{hint}</span>}
-    </div>
-  );
-};
-
 /**
  * Use React.memo to avoid unnecessary re-renders.
  * Re-render only when key textItem fields change.
@@ -169,17 +139,6 @@ export const FlowTextBlock = React.memo<FlowTextBlockProps>(({
   const isActivelyStreaming = (isStreaming && isContentGrowing) || isRevealing;
   const markdownTraceContext = isStartupRenderTraceEnabled() ? traceContext : undefined;
 
-  if (textItem.runtimeStatus) {
-    return (
-      <RuntimeStatusBlock
-        textItem={textItem}
-        className={className}
-        testId={testId}
-        testAttributes={testAttributes}
-      />
-    );
-  }
-
   return (
     <div
       className={`flow-text-block ${className} ${isActivelyStreaming ? 'streaming flow-text-block--streaming' : ''}`}

src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.review-action.test.tsx

@@ -44,15 +44,6 @@ vi.mock('../modern/VirtualItemRenderer', async () => {
   };
 });
 
-vi.mock('../modern/ProcessingIndicator', () => ({
-  ProcessingIndicator: () => <div />,
-}));
-
-vi.mock('../modern/processingIndicatorVisibility', () => ({
-  shouldReserveProcessingIndicatorSpace: () => false,
-  shouldShowProcessingIndicator: () => false,
-}));
-
 vi.mock('../modern/useExploreGroupState', () => ({
   useExploreGroupState: () => ({
     exploreGroupStates: {},
@@ -72,6 +63,7 @@ vi.mock('./DeepReviewActionBar', () => ({
 }));
 
 vi.mock('@/component-library', () => ({
+  DotMatrixLoader: () => <span data-testid="dot-matrix-loader" />,
   IconButton: ({
     children,
     onClick,
@@ -163,6 +155,7 @@ vi.mock('../../store/modernFlowChatStore', () => ({
 
 vi.mock('../../services/ReviewActionBarPersistenceService', () => ({
   loadPersistedReviewState: vi.fn(() => Promise.resolve(null)),
+  persistReviewActionState: vi.fn(() => Promise.resolve()),
 }));
 
 function createReviewSession(): Session {

src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss

@@ -142,6 +142,14 @@
     }
   }
 
+  &__runtime-status .runtime-status-slot__content {
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0 var(--flowchat-content-inline-pad);
+    box-sizing: border-box;
+  }
+
   &__action-bar-wrapper {
     position: absolute;
     inset: 0;
@@ -265,6 +273,12 @@
   }
 }
 
+@media (max-width: 768px) {
+  .btw-session-panel__runtime-status .runtime-status-slot__content {
+    padding: 0 var(--flowchat-content-inline-pad-mobile);
+  }
+}
+
 @keyframes btw-session-panel-stop-spin {
   to {
     transform: rotate(360deg);