From 9de304758a1fe143710cfd6c7d86d17c6edb323a Mon Sep 17 00:00:00 2001
From: wsp1911 <mr.wanger2018@outlook.com>
Date: Sun, 29 Mar 2026 21:38:00 +0800
Subject: [PATCH 1/2] fix: collapse completed file operation cards by default

---
 .../flow_chat/tool-cards/BaseToolCard.scss    | 18 +++++++
 .../src/flow_chat/tool-cards/BaseToolCard.tsx | 14 +++++
 .../tool-cards/FileOperationToolCard.tsx      | 54 ++++++++++++++++---
 3 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
index b8484607..471a7e3e 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
@@ -156,6 +156,24 @@
   z-index: 0;
 }
 
+.tool-card-icon-affordance-hit {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-accent-500, #60a5fa);
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+}
+
 /* Same square box so tool glyph and chevron share center (no circular fill). */
 .tool-card-icon-marks {
   position: relative;
diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
index 2c7a4d40..4a2ac738 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
@@ -132,6 +132,8 @@ export interface ToolCardHeaderProps {
   affordanceKind?: ToolCardHeaderAffordanceKind;
   /** Override context: expanded state for chevron rotation */
   headerExpanded?: boolean;
+  /** Optional dedicated affordance click handler for the left icon rail. */
+  onAffordanceClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   /** Action text */
   action?: string;
   /** Main content */
@@ -151,6 +153,7 @@ export const ToolCardHeader: React.FC<ToolCardHeaderProps> = ({
   expandAffordance,
   affordanceKind,
   headerExpanded,
+  onAffordanceClick,
   action,
   content,
   extra,
@@ -188,6 +191,17 @@ export const ToolCardHeader: React.FC<ToolCardHeaderProps> = ({
               </span>
             )}
           </div>
+          {showExpandHint && onAffordanceClick && (
+            <button
+              type="button"
+              className="tool-card-icon-affordance-hit"
+              onClick={(e) => {
+                e.stopPropagation();
+                onAffordanceClick(e);
+              }}
+              aria-label={isPanelAffordance ? 'Open details' : 'Expand details'}
+            />
+          )}
         </div>
       )}
       {action && <span className="tool-card-action">{action}</span>}
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
index ade67e71..f880b4ee 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
@@ -56,10 +56,12 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
   const toolId = toolItem.id ?? toolCall?.id;
   
   const [isErrorExpanded, setIsErrorExpanded] = useState(false);
+  const [isContentExpanded, setIsContentExpanded] = useState(status !== 'completed');
   const [operationDiffStats, setOperationDiffStats] = useState<{ additions: number; deletions: number } | null>(null);
   
   const hasInitializedCompletionEffectRef = useRef(false);
   const previousCompletionEndTimeRef = useRef<number | null>(toolItem.endTime ?? null);
+  const previousStatusRef = useRef(status);
   const { cardRootRef } = useToolCardHeightContract({
     toolId,
     toolName: toolItem.toolName,
@@ -162,6 +164,17 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     }
   }, [error, clearError, currentFilePath]);
 
+  useEffect(() => {
+    if (previousStatusRef.current !== status) {
+      if (status === 'completed' && !isFailed) {
+        setIsContentExpanded(false);
+      } else if (status !== 'completed') {
+        setIsContentExpanded(true);
+      }
+      previousStatusRef.current = status;
+    }
+  }, [isFailed, status]);
+
   const localDiffStats = useMemo(() => {
     if (status !== 'completed' || isFailed) return null;
     if (toolItem.toolName === 'Write' && contentPreview) {
@@ -239,7 +252,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     status,
     toolItem.toolName,
   ]);
-  
+
   const getErrorMessage = () => {
     if (toolResult && 'error' in toolResult) {
       return toolResult.error;
@@ -431,7 +444,18 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
       <ToolCardHeader
         icon={renderToolIcon()}
         iconClassName={iconClassName}
-        headerExpanded={isFailed ? isErrorExpanded : undefined}
+        headerExpanded={
+          isFailed
+            ? isErrorExpanded
+            : hasExpandableContent
+              ? isContentExpanded
+              : undefined
+        }
+        onAffordanceClick={
+          hasExpandableContent
+            ? () => setIsContentExpanded(prev => !prev)
+            : undefined
+        }
         action={actionText}
       content={
         <>
@@ -632,6 +656,18 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     return <>{t('toolCards.file.delete')}: <span className="delete-file-name">{fileName}</span></>;
   };
 
+  const expandedContent = renderExpandedContent();
+  const hasExpandableContent =
+    status === 'completed' &&
+    !isFailed &&
+    !isDeleteTool &&
+    Boolean(expandedContent);
+
+  const isCardContentExpanded =
+    !isDeleteTool &&
+    !isFailed &&
+    (status === 'completed' ? isContentExpanded : true);
+
   const opensPanelOnClick =
     !isFailed &&
     !isDeleteTool &&
@@ -659,15 +695,21 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
       <BaseToolCard
         status={status}
-        isExpanded={true}
+        isExpanded={isCardContentExpanded}
         onClick={handleCardClick}
         className={`file-operation-card ${isDeleteTool ? 'non-clickable' : ''}`}
         header={renderHeader()}
-        expandedContent={renderExpandedContent()}
+        expandedContent={expandedContent}
         errorContent={isFailed && isErrorExpanded ? renderErrorContent() : null}
         isFailed={isFailed}
-        headerExpandAffordance={opensPanelOnClick || isFailed}
-        headerAffordanceKind={opensPanelOnClick ? 'open-panel-right' : 'expand'}
+        headerExpandAffordance={hasExpandableContent || opensPanelOnClick || isFailed}
+        headerAffordanceKind={
+          hasExpandableContent
+            ? 'expand'
+            : opensPanelOnClick
+              ? 'open-panel-right'
+              : 'expand'
+        }
       />
     </div>
   );

From 613bae3c66239b66f4915a66017f66391a3e3ee0 Mon Sep 17 00:00:00 2001
From: wsp1911 <mr.wanger2018@outlook.com>
Date: Sun, 29 Mar 2026 21:38:00 +0800
Subject: [PATCH 2/2] fix: reduce FlowChat white screen delay when opening
 session

- The blank delay mainly came from lazy-loading the session scene on a primary path
- Prime modern FlowChat state before opening the session scene
- Skip redundant post-mount session resyncs
- Reduce the visible white screen before FlowChat renders
---
 src/web-ui/src/app/scenes/SceneViewport.tsx   |   4 +-
 .../src/flow_chat/services/openBtwSession.ts  |   9 +-
 .../src/flow_chat/services/storeSync.ts       |  20 +-
 .../flow_chat/store/modernFlowChatStore.ts    |  23 ++-
 .../tool-cards/FileOperationToolCard.tsx      | 189 +++++++++---------
 5 files changed, 140 insertions(+), 105 deletions(-)

diff --git a/src/web-ui/src/app/scenes/SceneViewport.tsx b/src/web-ui/src/app/scenes/SceneViewport.tsx
index 4a42ae82..08aa5aff 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.tsx
+++ b/src/web-ui/src/app/scenes/SceneViewport.tsx
@@ -16,9 +16,11 @@ import { useDialogCompletionNotify } from '../hooks/useDialogCompletionNotify';
 import { ProcessingIndicator } from '@/flow_chat/components/modern/ProcessingIndicator';
 import SettingsScene from './settings/SettingsScene';
 import AssistantScene from './assistant/AssistantScene';
+import SessionScene from './session/SessionScene';
 import './SceneViewport.scss';
 
-const SessionScene    = lazy(() => import('./session/SessionScene'));
+// Session is the primary interaction path. Keep it in the main scene bundle so
+// first open does not stall on a lazy chunk fetch/parse before FlowChat mounts.
 const TerminalScene   = lazy(() => import('./terminal/TerminalScene'));
 const GitScene        = lazy(() => import('./git/GitScene'));
 const FileViewerScene = lazy(() => import('./file-viewer/FileViewerScene'));
diff --git a/src/web-ui/src/flow_chat/services/openBtwSession.ts b/src/web-ui/src/flow_chat/services/openBtwSession.ts
index 211b1a1f..cc319ef8 100644
--- a/src/web-ui/src/flow_chat/services/openBtwSession.ts
+++ b/src/web-ui/src/flow_chat/services/openBtwSession.ts
@@ -7,6 +7,7 @@ import { useAgentCanvasStore } from '@/app/components/panels/content-canvas/stor
 import type { CanvasTab } from '@/app/components/panels/content-canvas/types';
 import { flowChatStore } from '../store/FlowChatStore';
 import { flowChatManager } from './FlowChatManager';
+import { syncSessionToModernStore } from './storeSync';
 
 export const BTW_SESSION_PANEL_TYPE = 'btw-session' as const;
 
@@ -89,7 +90,6 @@ export async function openMainSession(
     activateWorkspace?: (workspaceId: string) => void | Promise<unknown>;
   }
 ): Promise<void> {
-  useSceneStore.getState().openScene('session');
   appManager.updateLayout({
     leftPanelActiveTab: 'sessions',
     leftPanelCollapsed: false,
@@ -100,10 +100,13 @@ export async function openMainSession(
   }
 
   if (flowChatStore.getState().activeSessionId === sessionId) {
-    return;
+    syncSessionToModernStore(sessionId);
+  } else {
+    await flowChatManager.switchChatSession(sessionId);
+    syncSessionToModernStore(sessionId);
   }
 
-  await flowChatManager.switchChatSession(sessionId);
+  useSceneStore.getState().openScene('session');
 }
 
 export function openBtwSessionInAuxPane(params: {
diff --git a/src/web-ui/src/flow_chat/services/storeSync.ts b/src/web-ui/src/flow_chat/services/storeSync.ts
index 7846953c..ecc98247 100644
--- a/src/web-ui/src/flow_chat/services/storeSync.ts
+++ b/src/web-ui/src/flow_chat/services/storeSync.ts
@@ -10,6 +10,17 @@ import { createLogger } from '@/shared/utils/logger';
 
 const log = createLogger('StoreSync');
 
+function isSessionAlreadySynced(
+  sessionId: string,
+  session: object,
+  modernStore: ReturnType<typeof useModernFlowChatStore.getState>
+): boolean {
+  return (
+    modernStore.activeSession?.sessionId === sessionId &&
+    modernStore.activeSession === session
+  );
+}
+
 /**
  * Sync session data to new Store
  */
@@ -23,6 +34,9 @@ export function syncSessionToModernStore(sessionId: string): void {
   }
 
   const modernStore = useModernFlowChatStore.getState();
+  if (isSessionAlreadySynced(sessionId, session, modernStore)) {
+    return;
+  }
   modernStore.setActiveSession(session);
 }
 
@@ -61,9 +75,11 @@ export function startAutoSync(): () => void {
       lastSyncedSessionId = currentState.activeSessionId;
       lastSyncedSession = session;
       const modernStore = useModernFlowChatStore.getState();
-      modernStore.setActiveSession(session);
+      if (!isSessionAlreadySynced(currentState.activeSessionId, session, modernStore)) {
+        modernStore.setActiveSession(session);
+      }
     }
   }
 
   return unsubscribe;
-}
\ No newline at end of file
+}
diff --git a/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts b/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
index 63eb0780..bb94d959 100644
--- a/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
@@ -9,6 +9,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { immer } from 'zustand/middleware/immer';
 import type { Session, DialogTurn, ModelRound, FlowItem, FlowToolItem } from '../types/flow-chat';
 import { isCollapsibleTool, READ_TOOL_NAMES, SEARCH_TOOL_NAMES } from '../tool-cards';
+import { flowChatStore } from './FlowChatStore';
 
 /**
  * Explore group statistics (merged computed stats)
@@ -272,11 +273,25 @@ export function sessionToVirtualItems(session: Session | null): VirtualItem[] {
   return items;
 }
 
+function getInitialModernState(): Pick<
+  ModernFlowChatState,
+  'activeSession' | 'virtualItems' | 'visibleTurnInfo'
+> {
+  const legacyState = flowChatStore.getState();
+  const activeSession = legacyState.activeSessionId
+    ? legacyState.sessions.get(legacyState.activeSessionId) ?? null
+    : null;
+
+  return {
+    activeSession,
+    virtualItems: sessionToVirtualItems(activeSession),
+    visibleTurnInfo: null,
+  };
+}
+
 export const useModernFlowChatStore = create<ModernFlowChatState>()(
   immer((set, get) => ({
-    activeSession: null,
-    virtualItems: [],
-    visibleTurnInfo: null,
+    ...getInitialModernState(),
 
     setActiveSession: (session) => {
       const items = sessionToVirtualItems(session);
@@ -333,4 +348,4 @@ export const useFlowChatActions = () =>
     updateVirtualItems: state.updateVirtualItems,
     setVisibleTurnInfo: state.setVisibleTurnInfo,
     clear: state.clear,
-  })));
\ No newline at end of file
+  })));
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
index f880b4ee..76dd4a5d 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
@@ -430,101 +430,6 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     return null;
   };
 
-  const renderHeader = () => {
-    const { className: iconClassName } = getToolIconInfo();
-    const isDeleteTool = toolItem.toolName === 'Delete';
-    const gitRailDisabled =
-      !currentFilePath || !currentWorkspace || !sessionId;
-
-    const actionText = isDeleteTool 
-      ? '' 
-      : (isFailed ? `${toolDisplayInfo.name}${t('toolCards.file.failed')}` : `${toolDisplayInfo.name}:`);
-    
-    return (
-      <ToolCardHeader
-        icon={renderToolIcon()}
-        iconClassName={iconClassName}
-        headerExpanded={
-          isFailed
-            ? isErrorExpanded
-            : hasExpandableContent
-              ? isContentExpanded
-              : undefined
-        }
-        onAffordanceClick={
-          hasExpandableContent
-            ? () => setIsContentExpanded(prev => !prev)
-            : undefined
-        }
-        action={actionText}
-      content={
-        <>
-          <Tooltip content={currentFilePath || fileName} placement="top">
-            <span className={`file-name ${isDeleteTool ? 'file-name--muted' : ''}`}>
-              {fileName}
-            </span>
-          </Tooltip>
-          {!isDeleteTool && !isParamsStreaming && !isFailed && !isLoading && (
-            (currentFileDiffStats.additions > 0 || currentFileDiffStats.deletions > 0)
-          ) && (
-            <span className="diff-preview-group">
-              {currentFileDiffStats.additions > 0 && (
-                <span className="additions">+{currentFileDiffStats.additions}</span>
-              )}
-              {currentFileDiffStats.deletions > 0 && (
-                <span className="deletions">-{currentFileDiffStats.deletions}</span>
-              )}
-            </span>
-          )}
-        </>
-      }
-      extra={
-        <>
-          {isParamsStreaming && (status === 'preparing' || status === 'streaming') && (
-            <span className="params-streaming-indicator">
-              {currentFilePath ? t('toolCards.file.receivingParams') : t('toolCards.file.analyzing')}
-            </span>
-          )}
-          {!isDeleteTool &&
-            !isFailed &&
-            !isLoading &&
-            status === 'completed' &&
-            currentFilePath && (
-              <Tooltip content={t('toolCards.file.viewGitDiff')} placement="top">
-                <div
-                  className={`file-op-git-rail${gitRailDisabled ? ' file-op-git-rail--disabled' : ''}`}
-                >
-                  {!gitRailDisabled && (
-                    <button
-                      type="button"
-                      className="file-op-git-rail__hit"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleOpenBaselineDiff();
-                      }}
-                      aria-label={t('toolCards.file.viewGitDiff')}
-                      title={t('toolCards.file.viewGitDiff')}
-                    />
-                  )}
-                  <div className="file-op-git-rail__visual" aria-hidden>
-                    <GitBranch size={16} strokeWidth={2} />
-                  </div>
-                </div>
-              </Tooltip>
-            )}
-          
-          {isFailed && (
-            <div className="error-expand-indicator">
-              {isErrorExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-            </div>
-          )}
-        </>
-      }
-      statusIcon={isDeleteTool ? null : renderStatusIcon()}
-    />
-    );
-  };
-
   const handleCodeLineClick = useCallback(async (lineNumber: number, filePath?: string) => {
     if (!filePath) return;
     
@@ -674,6 +579,100 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     (Boolean(currentFilePath && sessionId && status === 'completed') ||
       Boolean(currentFilePath && onOpenInEditor));
 
+  const renderHeader = () => {
+    const { className: iconClassName } = getToolIconInfo();
+    const gitRailDisabled =
+      !currentFilePath || !currentWorkspace || !sessionId;
+
+    const actionText = isDeleteTool
+      ? ''
+      : (isFailed ? `${toolDisplayInfo.name}${t('toolCards.file.failed')}` : `${toolDisplayInfo.name}:`);
+
+    return (
+      <ToolCardHeader
+        icon={renderToolIcon()}
+        iconClassName={iconClassName}
+        headerExpanded={
+          isFailed
+            ? isErrorExpanded
+            : hasExpandableContent
+              ? isContentExpanded
+              : undefined
+        }
+        onAffordanceClick={
+          hasExpandableContent
+            ? () => setIsContentExpanded(prev => !prev)
+            : undefined
+        }
+        action={actionText}
+      content={
+        <>
+          <Tooltip content={currentFilePath || fileName} placement="top">
+            <span className={`file-name ${isDeleteTool ? 'file-name--muted' : ''}`}>
+              {fileName}
+            </span>
+          </Tooltip>
+          {!isDeleteTool && !isParamsStreaming && !isFailed && !isLoading && (
+            (currentFileDiffStats.additions > 0 || currentFileDiffStats.deletions > 0)
+          ) && (
+            <span className="diff-preview-group">
+              {currentFileDiffStats.additions > 0 && (
+                <span className="additions">+{currentFileDiffStats.additions}</span>
+              )}
+              {currentFileDiffStats.deletions > 0 && (
+                <span className="deletions">-{currentFileDiffStats.deletions}</span>
+              )}
+            </span>
+          )}
+        </>
+      }
+      extra={
+        <>
+          {isParamsStreaming && (status === 'preparing' || status === 'streaming') && (
+            <span className="params-streaming-indicator">
+              {currentFilePath ? t('toolCards.file.receivingParams') : t('toolCards.file.analyzing')}
+            </span>
+          )}
+          {!isDeleteTool &&
+            !isFailed &&
+            !isLoading &&
+            status === 'completed' &&
+            currentFilePath && (
+              <Tooltip content={t('toolCards.file.viewGitDiff')} placement="top">
+                <div
+                  className={`file-op-git-rail${gitRailDisabled ? ' file-op-git-rail--disabled' : ''}`}
+                >
+                  {!gitRailDisabled && (
+                    <button
+                      type="button"
+                      className="file-op-git-rail__hit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleOpenBaselineDiff();
+                      }}
+                      aria-label={t('toolCards.file.viewGitDiff')}
+                      title={t('toolCards.file.viewGitDiff')}
+                    />
+                  )}
+                  <div className="file-op-git-rail__visual" aria-hidden>
+                    <GitBranch size={16} strokeWidth={2} />
+                  </div>
+                </div>
+              </Tooltip>
+            )}
+
+          {isFailed && (
+            <div className="error-expand-indicator">
+              {isErrorExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+            </div>
+          )}
+        </>
+      }
+      statusIcon={isDeleteTool ? null : renderStatusIcon()}
+    />
+    );
+  };
+
   if (isDeleteTool) {
     return (
       <CompactToolCard