fix: preserve sessions tab render on navigation

Author: awsl233777

tests/unit/config-tabs-ui.test.mjs

@@ -408,7 +408,8 @@ test('web ui script defines provider mode metadata for codex only', () => {
     assert.match(appScript, /const enteringUsageTab = nextTab === 'usage';/);
     assert.match(appScript, /this\.loadSessionsUsage\(\);/);
     assert.match(appScript, /if \(targetTab === previousTab\) {/);
-    assert.match(appScript, /const shouldDeferApply = isLeavingSessions;/);
+    assert.match(appScript, /const shouldPreserveSessionRender = isLeavingSessions && this\.preserveSessionRenderOnTabLeave === true;/);
+    assert.match(appScript, /const shouldDeferApply = isLeavingSessions && !shouldPreserveSessionRender;/);
     assert.match(appScript, /if \(isLeavingSessions && !this\.isSessionPanelFastHidden\(\)\) {/);
     assert.match(appScript, /switchState\.pendingTarget = targetTab;/);
     assert.match(appScript, /if \(ticket !== liveState\.ticket\) return;/);

tests/unit/session-tab-switch-performance.test.mjs

@@ -425,6 +425,45 @@ test('deferred teardown is skipped when user quickly switches back to sessions',
     assert.strictEqual(teardownCount, 0);
 });
 
+test('switchMainTab can preserve rendered sessions when leaving and returning to the browser tab', () => {
+    const calls = {
+        teardown: 0,
+        prepare: 0,
+        loadSessions: 0
+    };
+    const vm = {
+        mainTab: 'sessions',
+        configMode: 'codex',
+        sessionsLoadedOnce: true,
+        preserveSessionRenderOnTabLeave: true,
+        sessionListRenderEnabled: true,
+        sessionPreviewRenderEnabled: true,
+        scheduleSessionTabDeferredTeardown() {
+            calls.teardown += 1;
+        },
+        teardownSessionTabRender() {
+            calls.teardown += 1;
+        },
+        prepareSessionTabRender() {
+            calls.prepare += 1;
+        },
+        loadSessions() {
+            calls.loadSessions += 1;
+        },
+        refreshClaudeModelContext() {}
+    };
+
+    switchMainTab.call(vm, 'usage');
+    assert.strictEqual(vm.mainTab, 'usage');
+    assert.strictEqual(vm.sessionListRenderEnabled, true);
+    assert.strictEqual(vm.sessionPreviewRenderEnabled, true);
+    assert.deepStrictEqual(calls, { teardown: 0, prepare: 0, loadSessions: 0 });
+
+    switchMainTab.call(vm, 'sessions');
+    assert.strictEqual(vm.mainTab, 'sessions');
+    assert.deepStrictEqual(calls, { teardown: 0, prepare: 0, loadSessions: 0 });
+});
+
 test('loadSessions replays the latest pending request after an in-flight list refresh completes', async () => {
     const apiCalls = [];
     let resolveFirstRequest = null;

tests/unit/web-ui-behavior-parity.test.mjs

@@ -444,6 +444,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'promptComposerVarValuesRaw',
         'sessionConverting',
         'sessionImportingNative',
+        'preserveSessionRenderOnTabLeave',
         'sessionSortMode',
         'sessionsUsageCompareEnabled',
         'sessionsUsageSelectedDayKey',

web-ui/app.js

@@ -232,6 +232,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 sessionPreviewHeaderEl: null,
                 sessionPreviewHeaderResizeObserver: null,
                 sessionListRenderEnabled: false,
+                preserveSessionRenderOnTabLeave: true,
                 sessionListVisibleCount: 0,
                 sessionListInitialBatchSize: 40,
                 sessionListLoadStep: 80,

web-ui/modules/app.methods.navigation.mjs

@@ -489,9 +489,10 @@
                 return;
             }
             const isLeavingSessions = previousTab === 'sessions' && targetTab !== 'sessions';
-            const shouldDeferApply = isLeavingSessions;
+            const shouldPreserveSessionRender = isLeavingSessions && this.preserveSessionRenderOnTabLeave === true;
+            const shouldDeferApply = isLeavingSessions && !shouldPreserveSessionRender;
             if (isLeavingSessions && !this.isSessionPanelFastHidden()) {
-                this.setSessionPanelFastHidden(true);
+                this.setSessionPanelFastHidden(!shouldPreserveSessionRender);
             }
             if (shouldDeferApply && typeof this.suspendSessionTabRender === 'function') {
                 this.suspendSessionTabRender();

web-ui/session-helpers.mjs

@@ -90,7 +90,7 @@ export function switchMainTab(tab) {
     emitSessionLoadDebug(this, 'switchMainTab:start', `from=${previousTab}\nto=${nextTab}`);
     this.mainTab = nextTab;
 
-    if (leavingSessions) {
+    if (leavingSessions && this.preserveSessionRenderOnTabLeave !== true) {
         const teardown = () => {
             if (this.mainTab === 'sessions') return;
             if (typeof this.finalizeSessionTabTeardown === 'function') {
@@ -156,7 +156,13 @@ export function switchMainTab(tab) {
     if (nextTab !== 'orchestration' && typeof this.stopTaskOrchestrationPolling === 'function') {
         this.stopTaskOrchestrationPolling();
     }
-    if (nextTab === 'sessions') {
+    if (
+        nextTab === 'sessions'
+        && (
+            !this.sessionListRenderEnabled
+            || !this.sessionPreviewRenderEnabled
+        )
+    ) {
         this.prepareSessionTabRender();
     }
     const shouldLoadTrashListOnSettingsEnter = nextTab === 'settings'