perf(flow-chat): reduce historical session hydration stalls

src/apps/desktop/src/lib.rs

@@ -660,7 +660,7 @@ pub async fn run() {
 
             // Set up system tray icon.
             let step_started = Instant::now();
-            if let Err(error) = crate::tray::setup_tray(app) {
+            if let Err(error) = crate::tray::setup_tray(app, &startup_trace) {
                 log::warn!("Failed to set up system tray: {}", error);
             }
             startup_trace.record_elapsed_step("native_setup", "setup_tray", step_started);

src/apps/desktop/src/tray.rs

@@ -14,6 +14,7 @@
 //! periodically, and after locale changes.
 
 use std::sync::OnceLock;
+use std::time::Instant;
 
 use tauri::menu::{CheckMenuItemBuilder, MenuBuilder, MenuItemBuilder};
 use tauri::tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent};
@@ -24,6 +25,7 @@ use bitfun_core::service::config::types::AIExperienceConfig;
 use bitfun_core::service::i18n::LocaleId;
 
 use crate::api::app_state::AppState;
+use crate::startup_trace::DesktopStartupTrace;
 
 static TRAY_ICON: OnceLock<tauri::tray::TrayIcon> = OnceLock::new();
 
@@ -164,26 +166,36 @@ async fn tray_toggle_desktop_pet(app: &AppHandle) -> Result<(), String> {
 }
 
 /// Build and attach the system tray icon to the Tauri application.
-pub fn setup_tray(app: &tauri::App) -> Result<(), Box<dyn std::error::Error>> {
+pub fn setup_tray(
+    app: &tauri::App,
+    startup_trace: &DesktopStartupTrace,
+) -> Result<(), Box<dyn std::error::Error>> {
+    let step_started = Instant::now();
     let pet_item = CheckMenuItemBuilder::with_id("toggle_desktop_pet", STRINGS_EN_US.desktop_pet)
         .checked(false)
         .build(app)?;
     let show_item = MenuItemBuilder::with_id("show_window", STRINGS_EN_US.show_app).build(app)?;
     let quit_item = MenuItemBuilder::with_id("quit", STRINGS_EN_US.quit_app).build(app)?;
+    startup_trace.record_elapsed_step("native_setup", "setup_tray.menu_items", step_started);
 
+    let step_started = Instant::now();
     let initial_menu = MenuBuilder::new(app)
         .item(&pet_item)
         .separator()
         .item(&show_item)
         .separator()
         .item(&quit_item)
         .build()?;
+    startup_trace.record_elapsed_step("native_setup", "setup_tray.menu", step_started);
 
+    let step_started = Instant::now();
     let icon = app
         .default_window_icon()
         .ok_or("No default window icon")?
         .clone();
+    startup_trace.record_elapsed_step("native_setup", "setup_tray.icon", step_started);
 
+    let step_started = Instant::now();
     let tray = TrayIconBuilder::new()
         .icon(icon)
         .menu(&initial_menu)
@@ -222,9 +234,13 @@ pub fn setup_tray(app: &tauri::App) -> Result<(), Box<dyn std::error::Error>> {
             _ => {}
         })
         .build(app)?;
+    startup_trace.record_elapsed_step("native_setup", "setup_tray.build", step_started);
 
+    let step_started = Instant::now();
     let _ = TRAY_ICON.set(tray);
+    startup_trace.record_elapsed_step("native_setup", "setup_tray.store", step_started);
 
+    let step_started = Instant::now();
     let app_handle = app.handle().clone();
     tauri::async_runtime::spawn(async move {
         tokio::time::sleep(std::time::Duration::from_secs(2)).await;
@@ -236,6 +252,7 @@ pub fn setup_tray(app: &tauri::App) -> Result<(), Box<dyn std::error::Error>> {
             rebuild_tray_menu(&app_handle).await;
         }
     });
+    startup_trace.record_elapsed_step("native_setup", "setup_tray.spawn_refresh", step_started);
 
     Ok(())
 }

src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss

@@ -130,15 +130,37 @@
 .modern-flowchat-container__history-open-intent-shield {
   position: absolute;
   inset: 0;
-  z-index: 9;
+  z-index: 11;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 76px;
-  pointer-events: none;
+  pointer-events: auto;
+  background: var(--color-bg-scene);
+  contain: paint;
+}
+
+.modern-flowchat-container__history-open-intent-shield::before {
+  content: "";
+  position: absolute;
+  top: 116px;
+  left: 50%;
+  width: min(720px, calc(100% - 48px));
+  height: min(220px, calc(100% - 168px));
+  min-height: 120px;
+  transform: translateX(-50%);
+  border-radius: 8px;
+  opacity: 0.72;
+  background:
+    linear-gradient(90deg, transparent 0 4%, var(--color-surface-hover, rgba(127, 127, 127, 0.12)) 4% 62%, transparent 62% 100%) 0 0 / 100% 24px no-repeat,
+    linear-gradient(90deg, transparent 0 9%, var(--color-surface-hover, rgba(127, 127, 127, 0.12)) 9% 86%, transparent 86% 100%) 0 48px / 100% 24px no-repeat,
+    linear-gradient(90deg, transparent 0 6%, var(--color-surface-hover, rgba(127, 127, 127, 0.12)) 6% 74%, transparent 74% 100%) 0 96px / 100% 24px no-repeat,
+    linear-gradient(90deg, transparent 0 12%, var(--color-surface-hover, rgba(127, 127, 127, 0.12)) 12% 68%, transparent 68% 100%) 0 144px / 100% 24px no-repeat;
 }
 
 .modern-flowchat-container__history-open-intent-spinner {
+  position: relative;
+  z-index: 1;
   width: 18px;
   height: 18px;
   border: 2px solid var(--color-border, rgba(255, 255, 255, 0.16));

src/web-ui/src/flow_chat/components/modern/VirtualMessageList.layout.test.ts

@@ -3,6 +3,7 @@ import {
   estimateTextHeightFromLength,
   estimateVirtualMessageItemHeight,
   getVirtualMessageDefaultItemHeight,
+  selectInitialHistoryRenderWindow,
 } from './virtualMessageListLayout';
 import type { VirtualItem } from '../../store/modernFlowChatStore';
 
@@ -84,3 +85,65 @@ describe('estimateVirtualMessageItemHeight', () => {
     expect(estimateVirtualMessageItemHeight(item)).toBeLessThanOrEqual(160);
   });
 });
+
+describe('selectInitialHistoryRenderWindow', () => {
+  function userItem(turnIndex: number): VirtualItem {
+    const id = `turn-${turnIndex}`;
+    return {
+      type: 'user-message',
+      turnId: id,
+      data: {
+        id: `user-${id}`,
+        content: `prompt ${turnIndex}`,
+        timestamp: turnIndex,
+      },
+    } as VirtualItem;
+  }
+
+  function modelItem(turnIndex: number, textLength = 2000): VirtualItem {
+    const id = `turn-${turnIndex}`;
+    return {
+      type: 'model-round',
+      turnId: id,
+      isLastRound: turnIndex === 7,
+      isTurnComplete: true,
+      data: {
+        id: `round-${id}`,
+        status: 'completed',
+        isStreaming: false,
+        items: [{
+          id: `text-${id}`,
+          type: 'text',
+          content: 'x'.repeat(textLength),
+          status: 'completed',
+          timestamp: turnIndex,
+        }],
+      },
+    } as VirtualItem;
+  }
+
+  it('keeps only the latest render window on large partial history tails', () => {
+    const items = Array.from({ length: 8 }, (_, index) => [
+      userItem(index),
+      modelItem(index),
+    ]).flat();
+
+    const window = selectInitialHistoryRenderWindow(items);
+
+    expect(window.startIndex).toBeGreaterThan(0);
+    expect(window.items.length).toBeLessThan(items.length);
+    expect(window.items[0]?.turnId).toBe('turn-6');
+    expect(window.items.at(-1)?.turnId).toBe('turn-7');
+    expect(window.omittedEstimatedHeightPx).toBeGreaterThan(0);
+  });
+
+  it('keeps all items when the partial history tail is already small', () => {
+    const items = [userItem(0), modelItem(0), userItem(1), modelItem(1)];
+
+    const window = selectInitialHistoryRenderWindow(items);
+
+    expect(window.startIndex).toBe(0);
+    expect(window.items).toHaveLength(items.length);
+    expect(window.omittedEstimatedHeightPx).toBe(0);
+  });
+});

src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss

@@ -83,6 +83,13 @@
     width: 100%;
   }
 
+  &__initial-history-spacer {
+    width: 100%;
+    flex: 0 0 auto;
+    pointer-events: none;
+    overflow-anchor: none;
+  }
+
   &__projection-handoff-overlay {
     position: absolute;
     inset: 0;