From 977dc0e339cb0bec49b107cd7c0be3b9efd2cde3 Mon Sep 17 00:00:00 2001
From: ymkiux <3255284101@qq.com>
Date: Fri, 10 Apr 2026 14:14:59 +0800
Subject: [PATCH 01/17] fix: stabilize web ui startup and reduce usage load

---
 cli.js                                    | 103 ++++++++--
 tests/unit/compact-layout-ui.test.mjs     |   5 +-
 tests/unit/config-tabs-ui.test.mjs        |   6 +-
 tests/unit/run.mjs                        |   1 +
 tests/unit/session-usage-backend.test.mjs | 115 +++++++++++
 tests/unit/web-run-host.test.mjs          | 233 ++++++++++++++++++++++
 tests/unit/web-ui-source-bundle.test.mjs  |   2 +
 tests/unit/web-ui-startup-init.test.mjs   |  93 +++++++++
 web-ui/app.js                             |  47 ++++-
 web-ui/index.html                         |   2 +-
 web-ui/partials/index/layout-header.html  |   2 +-
 web-ui/partials/index/modal-skills.html   |   6 +-
 web-ui/partials/index/panel-docs.html     |  13 +-
 web-ui/partials/index/panel-market.html   |  28 +--
 web-ui/partials/index/panel-usage.html    |   2 +-
 web-ui/styles/navigation-panels.css       |   4 +-
 web-ui/styles/sessions-preview.css        |  10 +-
 17 files changed, 621 insertions(+), 51 deletions(-)
 create mode 100644 tests/unit/session-usage-backend.test.mjs
 create mode 100644 tests/unit/web-ui-startup-init.test.mjs

diff --git a/cli.js b/cli.js
index 6c44a8c2..f553dce3 100644
--- a/cli.js
+++ b/cli.js
@@ -5775,11 +5775,21 @@ async function listSessionUsage(params = {}) {
     const limit = Number.isFinite(rawLimit)
         ? Math.max(1, Math.min(rawLimit, MAX_SESSION_LIST_SIZE))
         : 200;
-    return await listAllSessionsData({
+    const sessions = await listAllSessions({
         source,
         limit,
         forceRefresh: !!params.forceRefresh
     });
+    return Array.isArray(sessions)
+        ? sessions.map((item) => {
+            if (!item || typeof item !== 'object' || Array.isArray(item)) {
+                return item;
+            }
+            const normalized = { ...item };
+            delete normalized.__messageCountExact;
+            return normalized;
+        })
+        : [];
 }
 
 function listSessionPaths(params = {}) {
@@ -10765,6 +10775,82 @@ const PUBLIC_WEB_UI_STATIC_ASSETS = new Set([
 
 function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser }) {
     const connections = new Set();
+    const probeWebUiReadiness = (callback) => {
+        const payload = JSON.stringify({ action: 'status', params: {} });
+        const requestOptions = {
+            hostname: openHost,
+            port,
+            path: '/api',
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8',
+                'Content-Length': Buffer.byteLength(payload, 'utf-8')
+            }
+        };
+        let settled = false;
+        const finish = (ready) => {
+            if (settled) return;
+            settled = true;
+            callback(ready);
+        };
+        const req = http.request(requestOptions, (probeRes) => {
+            if (typeof probeRes.resume === 'function') {
+                probeRes.resume();
+            }
+            probeRes.on('end', () => {
+                finish(probeRes.statusCode === 200);
+            });
+        });
+        req.on('error', () => finish(false));
+        req.setTimeout(1000, () => {
+            try { req.destroy(); } catch (_) {}
+            finish(false);
+        });
+        req.end(payload, 'utf-8');
+    };
+    const openBrowserAfterReady = (url) => {
+        const maxAttempts = 40;
+        const retryDelayMs = 150;
+        let finished = false;
+
+        const finish = (ready) => {
+            if (finished) return;
+            finished = true;
+            if (!ready) {
+                console.warn('! Web UI 就绪探测超时，未自动打开浏览器，请手动访问:', url);
+                return;
+            }
+
+            const platform = process.platform;
+            let command;
+            if (platform === 'win32') {
+                command = `start \"\" \"${url}\"`;
+            } else if (platform === 'darwin') {
+                command = `open \"${url}\"`;
+            } else {
+                command = `xdg-open \"${url}\"`;
+            }
+
+            exec(command, (error) => {
+                if (error) console.warn('无法自动打开浏览器，请手动访问:', url);
+            });
+        };
+        const scheduleProbe = (attempt) => {
+            probeWebUiReadiness((ready) => {
+                if (ready) {
+                    finish(true);
+                    return;
+                }
+                if (attempt >= maxAttempts) {
+                    finish(false);
+                    return;
+                }
+                setTimeout(() => scheduleProbe(attempt + 1), retryDelayMs);
+            });
+        };
+
+        scheduleProbe(1);
+    };
     const writeWebUiAssetError = (res, requestPath, error) => {
         const message = error && error.message ? error.message : String(error);
         console.error(`! Web UI 资源读取失败 [${requestPath}]:`, message);
@@ -11373,21 +11459,8 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
         }
 
         if (!process.env.CODEXMATE_NO_BROWSER && openBrowser) {
-            const platform = process.platform;
-            let command;
             const url = openUrl;
-
-            if (platform === 'win32') {
-                command = `start \"\" \"${url}\"`;
-            } else if (platform === 'darwin') {
-                command = `open \"${url}\"`;
-            } else {
-                command = `xdg-open \"${url}\"`;
-            }
-
-            exec(command, (error) => {
-                if (error) console.warn('无法自动打开浏览器，请手动访问:', url);
-            });
+            openBrowserAfterReady(url);
         }
     });
 
diff --git a/tests/unit/compact-layout-ui.test.mjs b/tests/unit/compact-layout-ui.test.mjs
index 3a68a0b2..da0a662d 100644
--- a/tests/unit/compact-layout-ui.test.mjs
+++ b/tests/unit/compact-layout-ui.test.mjs
@@ -55,10 +55,13 @@ test('styles keep desktop layout wide and session history readable on large scre
     assert.match(styles, /\.main-panel-topbar\s*\{[\s\S]*position:\s*sticky;[\s\S]*top:\s*0;/);
     assert.match(styles, /\.side-item-meta\s*\{[\s\S]*display:\s*flex;[\s\S]*opacity:\s*1;/);
     assert.match(styles, /\.brand-logo\s*\{[\s\S]*width:\s*38px;[\s\S]*height:\s*38px;/);
-    assert.match(styles, /\.content-wrapper\s*\{[\s\S]*max-width:\s*1280px;/);
+    assert.match(styles, /\.content-wrapper\s*\{[\s\S]*width:\s*min\(100%,\s*1480px\);[\s\S]*max-width:\s*none;/);
+    assert.match(styles, /\.mode-content\s*\{[\s\S]*width:\s*100%;/);
     assert.match(styles, /\.trash-item-actions\s*\{[\s\S]*grid-template-columns:\s*repeat\(2,\s*minmax\(116px,\s*116px\)\);/);
     assert.match(styles, /\.trash-item-actions\s+\.btn-mini\s*\{[\s\S]*height:\s*38px;[\s\S]*min-height:\s*38px;[\s\S]*white-space:\s*nowrap;/);
     assert.match(styles, /\.session-layout\s*\{[\s\S]*grid-template-columns:\s*minmax\(260px,\s*360px\)\s*minmax\(0,\s*1fr\);/);
+    assert.match(styles, /\.session-preview-scroll\s*\{[\s\S]*padding-right:\s*52px;/);
+    assert.match(styles, /\.session-timeline\s*\{[\s\S]*right:\s*4px;[\s\S]*width:\s*44px;/);
     assert.match(styles, /\.session-item\s*\{[\s\S]*min-height:\s*102px;/);
 
     const html = readBundledWebUiHtml();
diff --git a/tests/unit/config-tabs-ui.test.mjs b/tests/unit/config-tabs-ui.test.mjs
index 73a04672..62c00aa0 100644
--- a/tests/unit/config-tabs-ui.test.mjs
+++ b/tests/unit/config-tabs-ui.test.mjs
@@ -28,7 +28,8 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /isProviderConfigMode/);
     assert.match(html, /provider-fast-switch-select/);
     assert.match(html, /forceCompactLayout/);
-    assert.match(html, /<script src="\/res\/vue\.global\.js"><\/script>/);
+    assert.match(html, /<script src="\/res\/vue\.global\.prod\.js"><\/script>/);
+    assert.doesNotMatch(html, /<script src="\/res\/vue\.global\.js"><\/script>/);
     assert.match(html, /quickSwitchProvider\(\$event\.target\.value\)/);
     assert.match(html, /onMainTabPointerDown\('sessions', \$event\)/);
     assert.match(html, /onConfigTabPointerDown\('codex', \$event\)/);
@@ -69,6 +70,9 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /:aria-selected="mainTab === 'usage'"/);
     assert.match(html, /id="panel-usage"/);
     assert.match(html, /v-show="mainTab === 'usage'"/);
+    assert.match(usagePanel, /sessionsUsageLoading && !sessionsUsageList\.length" class="session-empty">正在加载 Usage 统计\.\.\.</);
+    assert.match(usagePanel, /sessionsUsageError && !sessionsUsageList\.length" class="usage-empty">/);
+    assert.match(usagePanel, /v-else-if="!sessionsUsageList\.length" class="usage-empty">暂无可用于统计的会话数据/);
     assert.match(html, /data-main-tab="market"/);
     assert.match(html, /onMainTabPointerDown\('market', \$event\)/);
     assert.match(html, /onMainTabClick\('market', \$event\)/);
diff --git a/tests/unit/run.mjs b/tests/unit/run.mjs
index 4a89eae3..9d8ffd80 100644
--- a/tests/unit/run.mjs
+++ b/tests/unit/run.mjs
@@ -31,6 +31,7 @@ await import(pathToFileURL(path.join(__dirname, 'agents-modal-guards.test.mjs'))
 await import(pathToFileURL(path.join(__dirname, 'session-actions-standalone.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'session-browser-timeline-regression.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'session-usage.test.mjs')));
+await import(pathToFileURL(path.join(__dirname, 'session-usage-backend.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'agents-diff-ui.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'text-diff.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'claude-settings-sync.test.mjs')));
diff --git a/tests/unit/session-usage-backend.test.mjs b/tests/unit/session-usage-backend.test.mjs
new file mode 100644
index 00000000..219d5532
--- /dev/null
+++ b/tests/unit/session-usage-backend.test.mjs
@@ -0,0 +1,115 @@
+import assert from 'assert';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const require = createRequire(import.meta.url);
+const fs = require('fs');
+
+const cliPath = path.join(__dirname, '..', '..', 'cli.js');
+const cliContent = fs.readFileSync(cliPath, 'utf-8');
+
+function extractFunction(content, funcName) {
+    const regex = new RegExp(`async function ${funcName}\\([^)]*\\)\\s*\\{[\\s\\S]*?^\\}`, 'm');
+    const match = content.match(regex);
+    if (!match) {
+        throw new Error(`Function ${funcName} not found`);
+    }
+    return match[0];
+}
+
+const listSessionUsageSrc = extractFunction(cliContent, 'listSessionUsage');
+
+function instantiateListSessionUsage(bindings = {}) {
+    const bindingNames = Object.keys(bindings);
+    const bindingValues = Object.values(bindings);
+    return Function(...bindingNames, `${listSessionUsageSrc}\nreturn listSessionUsage;`)(...bindingValues);
+}
+
+test('listSessionUsage uses lightweight session listing without exact hydration', async () => {
+    const calls = [];
+    const listAllSessions = async (params) => {
+        calls.push({ type: 'listAllSessions', params });
+        return [
+            {
+                source: 'codex',
+                sessionId: 'sess-1',
+                messageCount: 12,
+                __messageCountExact: false
+            }
+        ];
+    };
+    const listAllSessionsData = async () => {
+        calls.push({ type: 'listAllSessionsData' });
+        throw new Error('should not call listAllSessionsData');
+    };
+    const listSessionUsage = instantiateListSessionUsage({
+        MAX_SESSION_LIST_SIZE: 300,
+        listAllSessions,
+        listAllSessionsData
+    });
+
+    const result = await listSessionUsage({
+        source: 'all',
+        limit: 200,
+        forceRefresh: true
+    });
+
+    assert.deepStrictEqual(
+        calls,
+        [
+            {
+                type: 'listAllSessions',
+                params: {
+                    source: 'all',
+                    limit: 200,
+                    forceRefresh: true
+                }
+            }
+        ]
+    );
+    assert.deepStrictEqual(result, [
+        {
+            source: 'codex',
+            sessionId: 'sess-1',
+            messageCount: 12
+        }
+    ]);
+});
+
+test('listSessionUsage normalizes source and default limit for lightweight usage aggregation', async () => {
+    const calls = [];
+    const listAllSessions = async (params) => {
+        calls.push(params);
+        return [];
+    };
+    const listSessionUsage = instantiateListSessionUsage({
+        MAX_SESSION_LIST_SIZE: 300,
+        listAllSessions,
+        listAllSessionsData: async () => {
+            throw new Error('should not call listAllSessionsData');
+        }
+    });
+
+    await listSessionUsage({
+        source: 'invalid',
+        limit: '9999',
+        forceRefresh: 1
+    });
+    await listSessionUsage({});
+
+    assert.deepStrictEqual(calls, [
+        {
+            source: 'all',
+            limit: 300,
+            forceRefresh: true
+        },
+        {
+            source: 'all',
+            limit: 200,
+            forceRefresh: false
+        }
+    ]);
+});
diff --git a/tests/unit/web-run-host.test.mjs b/tests/unit/web-run-host.test.mjs
index d3e4d55e..83d42428 100644
--- a/tests/unit/web-run-host.test.mjs
+++ b/tests/unit/web-run-host.test.mjs
@@ -801,6 +801,239 @@ test('createWebServer returns 500 when fallback bundled html generation throws',
     ]);
 });
 
+test('createWebServer waits for api readiness probe before auto-opening the browser', () => {
+    let listenCallback = null;
+    let probeRequest = null;
+    let probeEndHandler = null;
+    const execCalls = [];
+    const createWebServer = instantiateFunction(createWebServerSource, 'createWebServer', {
+        http: {
+            createServer() {
+                return {
+                    listening: false,
+                    on() {},
+                    once() {},
+                    listen(_port, _host, callback) {
+                        this.listening = true;
+                        listenCallback = callback;
+                    },
+                    close(callback) {
+                        this.listening = false;
+                        if (typeof callback === 'function') {
+                            callback();
+                        }
+                    }
+                };
+            },
+            request(options, callback) {
+                probeRequest = { options, callback };
+                return {
+                    on() {},
+                    setTimeout() {},
+                    destroy() {},
+                    end() {}
+                };
+            }
+        },
+        path,
+        __dirname: '/repo',
+        readBundledWebUiHtml() {
+            return '<!doctype html>';
+        },
+        PUBLIC_WEB_UI_DYNAMIC_ASSETS: new Map(),
+        PUBLIC_WEB_UI_STATIC_ASSETS: new Set(),
+        isPathInside() {
+            return true;
+        },
+        fs: {
+            existsSync() {
+                return false;
+            },
+            statSync() {
+                return {
+                    isFile() {
+                        return false;
+                    }
+                };
+            },
+            createReadStream() {
+                throw new Error('unexpected static asset read');
+            }
+        },
+        formatHostForUrl(value) {
+            return value;
+        },
+        DEFAULT_WEB_OPEN_HOST: '127.0.0.1',
+        isAnyAddressHost() {
+            return false;
+        },
+        process: { env: {}, platform: 'win32' },
+        exec(command) {
+            execCalls.push(command);
+        },
+        console: {
+            log() {},
+            warn() {},
+            error() {}
+        },
+        setTimeout() {
+            throw new Error('unexpected retry');
+        },
+        Buffer
+    });
+
+    createWebServer({
+        htmlPath: '/repo/web-ui/index.html',
+        assetsDir: '/repo/res',
+        webDir: '/repo/web-ui',
+        host: '127.0.0.1',
+        port: 3737,
+        openBrowser: true
+    });
+
+    listenCallback();
+    assert.deepStrictEqual(execCalls, []);
+    assert.ok(probeRequest, 'should probe the local api before auto-open');
+    assert.strictEqual(probeRequest.options.hostname, '127.0.0.1');
+    assert.strictEqual(probeRequest.options.port, 3737);
+    assert.strictEqual(probeRequest.options.path, '/api');
+    assert.strictEqual(probeRequest.options.method, 'POST');
+
+    probeRequest.callback({
+        statusCode: 200,
+        resume() {},
+        on(event, handler) {
+            if (event === 'end') {
+                probeEndHandler = handler;
+            }
+        }
+    });
+    assert.deepStrictEqual(execCalls, []);
+
+    probeEndHandler();
+    assert.deepStrictEqual(execCalls, ['start "" "http://127.0.0.1:3737"']);
+});
+
+test('createWebServer retries readiness probe failures before auto-opening the browser', () => {
+    let listenCallback = null;
+    const requestOutcomes = [];
+    const timers = [];
+    const execCalls = [];
+    const createWebServer = instantiateFunction(createWebServerSource, 'createWebServer', {
+        http: {
+            createServer() {
+                return {
+                    listening: false,
+                    on() {},
+                    once() {},
+                    listen(_port, _host, callback) {
+                        this.listening = true;
+                        listenCallback = callback;
+                    },
+                    close(callback) {
+                        this.listening = false;
+                        if (typeof callback === 'function') {
+                            callback();
+                        }
+                    }
+                };
+            },
+            request(_options, callback) {
+                const outcome = requestOutcomes.shift();
+                const handlers = {};
+                return {
+                    on(event, handler) {
+                        handlers[event] = handler;
+                    },
+                    setTimeout() {},
+                    destroy() {},
+                    end() {
+                        if (outcome === 'error') {
+                            handlers.error(new Error('connection refused'));
+                            return;
+                        }
+                        let endHandler = null;
+                        callback({
+                            statusCode: outcome,
+                            resume() {},
+                            on(event, handler) {
+                                if (event === 'end') {
+                                    endHandler = handler;
+                                }
+                            }
+                        });
+                        endHandler();
+                    }
+                };
+            }
+        },
+        path,
+        __dirname: '/repo',
+        readBundledWebUiHtml() {
+            return '<!doctype html>';
+        },
+        PUBLIC_WEB_UI_DYNAMIC_ASSETS: new Map(),
+        PUBLIC_WEB_UI_STATIC_ASSETS: new Set(),
+        isPathInside() {
+            return true;
+        },
+        fs: {
+            existsSync() {
+                return false;
+            },
+            statSync() {
+                return {
+                    isFile() {
+                        return false;
+                    }
+                };
+            },
+            createReadStream() {
+                throw new Error('unexpected static asset read');
+            }
+        },
+        formatHostForUrl(value) {
+            return value;
+        },
+        DEFAULT_WEB_OPEN_HOST: '127.0.0.1',
+        isAnyAddressHost() {
+            return false;
+        },
+        process: { env: {}, platform: 'linux' },
+        exec(command) {
+            execCalls.push(command);
+        },
+        console: {
+            log() {},
+            warn() {},
+            error() {}
+        },
+        setTimeout(callback, ms) {
+            timers.push({ callback, ms });
+            return timers.length;
+        },
+        Buffer
+    });
+
+    requestOutcomes.push('error', 200);
+    createWebServer({
+        htmlPath: '/repo/web-ui/index.html',
+        assetsDir: '/repo/res',
+        webDir: '/repo/web-ui',
+        host: '127.0.0.1',
+        port: 3737,
+        openBrowser: true
+    });
+
+    listenCallback();
+    assert.deepStrictEqual(execCalls, []);
+    assert.strictEqual(timers.length, 1);
+    assert.strictEqual(timers[0].ms, 150);
+
+    timers[0].callback();
+    assert.deepStrictEqual(execCalls, ['xdg-open "http://127.0.0.1:3737"']);
+});
+
 test('resolveSkillTarget rejects explicit unsupported targets instead of falling back', () => {
     assert.strictEqual(resolveSkillTarget({ targetApp: 'claud' }), null);
     assert.strictEqual(resolveSkillTarget({ targetApp: 'claud', target: 'claude' }), null);
diff --git a/tests/unit/web-ui-source-bundle.test.mjs b/tests/unit/web-ui-source-bundle.test.mjs
index 230341d6..a9e3e199 100644
--- a/tests/unit/web-ui-source-bundle.test.mjs
+++ b/tests/unit/web-ui-source-bundle.test.mjs
@@ -24,6 +24,8 @@ test('bundled web ui html inlines partials without leaking include directives',
     assert.match(html, /id="settings-panel-trash"/);
     assert.match(html, /id="settings-panel-device"/);
     assert.match(html, /class="modal modal-wide skills-modal"/);
+    assert.match(html, /<script src="\/res\/vue\.global\.prod\.js"><\/script>/);
+    assert.doesNotMatch(html, /<script src="\/res\/vue\.global\.js"><\/script>/);
     assert.match(html, /<script type="module" src="\/web-ui\/app\.js"><\/script>/);
     assert.doesNotMatch(html, /<script type="module" src="web-ui\/app\.js"><\/script>/);
     assert.doesNotMatch(html, /<!--\s*@include\s+/);
diff --git a/tests/unit/web-ui-startup-init.test.mjs b/tests/unit/web-ui-startup-init.test.mjs
new file mode 100644
index 00000000..f11e5571
--- /dev/null
+++ b/tests/unit/web-ui-startup-init.test.mjs
@@ -0,0 +1,93 @@
+import assert from 'assert';
+import {
+    captureCurrentBundledAppOptions,
+    withGlobalOverrides
+} from './helpers/web-ui-app-options.mjs';
+
+test('mounted defers initial loadAll until after window load and a short timer', async () => {
+    const appOptions = await captureCurrentBundledAppOptions();
+    const registeredListeners = [];
+    const removedListeners = [];
+    const rafCallbacks = [];
+    const timeoutCallbacks = [];
+    const context = {
+        sessionResumeWithYolo: true,
+        claudeConfigs: {},
+        openclawConfigs: {
+            '默认配置': {
+                content: ''
+            }
+        },
+        currentOpenclawConfig: '',
+        initSessionStandalone() {},
+        updateCompactLayoutMode() {},
+        restoreSessionFilterCache() {},
+        restoreSessionPinnedMap() {},
+        onWindowResize() {},
+        handleGlobalKeydown() {},
+        handleBeforeUnload() {},
+        refreshClaudeSelectionFromSettings() {
+            return Promise.resolve();
+        },
+        syncDefaultOpenclawConfigEntry() {
+            return Promise.resolve();
+        },
+        loadAllCalls: 0,
+        loadAll() {
+            this.loadAllCalls += 1;
+        }
+    };
+
+    await withGlobalOverrides({
+        document: {
+            readyState: 'interactive'
+        },
+        localStorage: {
+            getItem() {
+                return null;
+            },
+            setItem() {},
+            removeItem() {}
+        },
+        window: {
+            addEventListener(name, handler, options) {
+                registeredListeners.push({ name, handler, options });
+            },
+            removeEventListener(name, handler) {
+                removedListeners.push({ name, handler });
+            }
+        },
+        requestAnimationFrame(callback) {
+            rafCallbacks.push(callback);
+            return rafCallbacks.length;
+        },
+        cancelAnimationFrame() {},
+        setTimeout(callback, ms) {
+            timeoutCallbacks.push({ callback, ms });
+            return timeoutCallbacks.length;
+        },
+        clearTimeout() {}
+    }, async () => {
+        appOptions.mounted.call(context);
+    });
+
+    assert.strictEqual(context.loadAllCalls, 0);
+    const loadListener = registeredListeners.find((entry) => entry.name === 'load');
+    assert.ok(loadListener, 'mounted should wait for window load before first loadAll');
+
+    loadListener.handler();
+    assert.strictEqual(context.loadAllCalls, 0);
+    assert.strictEqual(rafCallbacks.length, 1);
+
+    rafCallbacks[0]();
+    assert.strictEqual(context.loadAllCalls, 0);
+    assert.strictEqual(timeoutCallbacks.length, 1);
+    assert.strictEqual(timeoutCallbacks[0].ms, 120);
+
+    timeoutCallbacks[0].callback();
+    assert.strictEqual(context.loadAllCalls, 1);
+    assert.ok(
+        removedListeners.some((entry) => entry.name === 'load' && entry.handler === loadListener.handler),
+        'mounted should clean up the one-shot load listener after scheduling the initial refresh'
+    );
+});
diff --git a/web-ui/app.js b/web-ui/app.js
index 049001ab..caca9d14 100644
--- a/web-ui/app.js
+++ b/web-ui/app.js
@@ -411,13 +411,58 @@ document.addEventListener('DOMContentLoaded', () => {
                 this.currentOpenclawConfig = this.openclawConfigs['默认配置'] ? '默认配置' : configNames[0];
             }
             void this.syncDefaultOpenclawConfigEntry({ silent: true });
-            this.loadAll();
+            const runInitialLoad = () => {
+                const triggerLoad = () => {
+                    this._initialLoadTimer = 0;
+                    void this.loadAll();
+                };
+                if (typeof requestAnimationFrame === 'function') {
+                    this._initialLoadRafId = requestAnimationFrame(() => {
+                        this._initialLoadRafId = 0;
+                        if (typeof setTimeout === 'function') {
+                            this._initialLoadTimer = setTimeout(triggerLoad, 120);
+                            return;
+                        }
+                        triggerLoad();
+                    });
+                    return;
+                }
+                if (typeof setTimeout === 'function') {
+                    this._initialLoadTimer = setTimeout(triggerLoad, 120);
+                    return;
+                }
+                triggerLoad();
+            };
+            if (document.readyState === 'complete') {
+                runInitialLoad();
+            } else {
+                this._initialLoadOnWindowLoad = () => {
+                    if (typeof window !== 'undefined' && typeof window.removeEventListener === 'function') {
+                        window.removeEventListener('load', this._initialLoadOnWindowLoad);
+                    }
+                    this._initialLoadOnWindowLoad = null;
+                    runInitialLoad();
+                };
+                window.addEventListener('load', this._initialLoadOnWindowLoad, { once: true });
+            }
         },
 
         beforeUnmount() {
             this.teardownSessionTabRender();
             this.cancelScheduledSessionTabDeferredTeardown();
             this.disconnectSessionPreviewHeaderResizeObserver();
+            if (this._initialLoadOnWindowLoad) {
+                window.removeEventListener('load', this._initialLoadOnWindowLoad);
+                this._initialLoadOnWindowLoad = null;
+            }
+            if (this._initialLoadRafId) {
+                cancelAnimationFrame(this._initialLoadRafId);
+                this._initialLoadRafId = 0;
+            }
+            if (this._initialLoadTimer) {
+                clearTimeout(this._initialLoadTimer);
+                this._initialLoadTimer = 0;
+            }
             window.removeEventListener('resize', this.onWindowResize);
             window.removeEventListener('keydown', this.handleGlobalKeydown);
             window.removeEventListener('beforeunload', this.handleBeforeUnload);
diff --git a/web-ui/index.html b/web-ui/index.html
index 73f2242b..9b98f0e5 100644
--- a/web-ui/index.html
+++ b/web-ui/index.html
@@ -6,7 +6,7 @@
     <title>Codex Mate</title>
     <link rel="icon" type="image/png" href="/res/logo.png">
     <link rel="apple-touch-icon" href="/res/logo.png">
-    <script src="/res/vue.global.js"></script>
+    <script src="/res/vue.global.prod.js"></script>
     <script src="/res/json5.min.js"></script>
     <link rel="stylesheet" href="/web-ui/styles.css">
 </head>
diff --git a/web-ui/partials/index/layout-header.html b/web-ui/partials/index/layout-header.html
index 1ab4ae6a..46f6a5c0 100644
--- a/web-ui/partials/index/layout-header.html
+++ b/web-ui/partials/index/layout-header.html
@@ -233,7 +233,7 @@
                         <div class="panel-header-copy">
                             <div class="panel-kicker">{{ mainTab === 'config' ? 'Configuration' : (mainTab === 'sessions' ? 'Sessions' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? 'Skills' : (mainTab === 'docs' ? 'Docs' : 'Settings')))) }}</div>
                             <h1 class="main-title">{{ mainTab === 'config' ? '本地配置控制台' : (mainTab === 'sessions' ? '会话与导出' : (mainTab === 'usage' ? '本地用量与趋势' : (mainTab === 'market' ? 'Skills 安装与同步' : (mainTab === 'docs' ? 'CLI 安装与文档' : '系统与数据设置')))) }}</h1>
-                            <p class="subtitle">{{ mainTab === 'config' ? '管理 Codex、Claude Code 与 OpenClaw 的本地配置、模型与运行参数。' : (mainTab === 'sessions' ? '浏览、筛选、导出与整理本地会话记录。' : (mainTab === 'usage' ? '查看近 7 / 30 天的会话、消息与来源趋势。' : (mainTab === 'market' ? '整理安装目标、导入来源与分发入口。' : (mainTab === 'docs' ? '把 CLI 安装、升级、卸载命令与排障提示集中放进正文文档页，不再依赖悬浮入口或模态框。' : '管理下载、数据目录、回收站与全局行为。')))) }}</p>
+                            <p class="subtitle">{{ mainTab === 'config' ? '管理本地配置与模型。' : (mainTab === 'sessions' ? '浏览与导出会话。' : (mainTab === 'usage' ? '查看近 7 / 30 天用量。' : (mainTab === 'market' ? '管理本地 Skills。' : (mainTab === 'docs' ? '查看 CLI 安装命令与排障。' : '管理下载、目录与回收站。')))) }}</p>
                         </div>
                     </div>
 
diff --git a/web-ui/partials/index/modal-skills.html b/web-ui/partials/index/modal-skills.html
index 3d5f68fa..5991bf9d 100644
--- a/web-ui/partials/index/modal-skills.html
+++ b/web-ui/partials/index/modal-skills.html
@@ -3,7 +3,7 @@
                 <div class="modal-header skills-modal-header">
                     <div>
                         <div class="modal-title" id="skills-modal-title">Skills 管理</div>
-                        <div class="skills-modal-subtitle">集中管理当前宿主的本地技能目录，支持检索筛选、多选删除、跨应用导入、ZIP 导入与导出。</div>
+                        <div class="skills-modal-subtitle">管理当前宿主的本地 Skills。</div>
                     </div>
                     <div class="modal-header-actions skills-modal-actions">
                         <div class="market-target-switch market-target-switch-compact" role="group" aria-label="选择 Skills 管理目标">
@@ -62,7 +62,7 @@
                     <div class="skills-panel-header">
                         <div class="skills-panel-title-wrap">
                             <div class="skills-panel-title">本地 Skills</div>
-                            <div class="skills-panel-note">支持关键词检索与状态筛选，勾选后可批量删除当前 {{ skillsTargetLabel }} 本地 skill。</div>
+                            <div class="skills-panel-note">可检索、筛选与批量删除。</div>
                         </div>
                         <button
                             class="btn-mini"
@@ -122,7 +122,7 @@
                     <div class="skills-panel-header">
                         <div class="skills-panel-title-wrap">
                             <div class="skills-import-title">跨应用导入</div>
-                            <div class="skills-panel-note">从其他应用扫描并导入未托管技能，支持多选批量导入到当前 {{ skillsTargetLabel }}。</div>
+                            <div class="skills-panel-note">扫描并导入到当前 {{ skillsTargetLabel }}。</div>
                         </div>
                         <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                             {{ skillsScanningImports ? '扫描中...' : '扫描可导入' }}
diff --git a/web-ui/partials/index/panel-docs.html b/web-ui/partials/index/panel-docs.html
index 709fed66..7e8c3a12 100644
--- a/web-ui/partials/index/panel-docs.html
+++ b/web-ui/partials/index/panel-docs.html
@@ -8,7 +8,7 @@
                         <div class="selector-header docs-overview-header">
                             <div>
                                 <span class="selector-title">CLI 安装文档</span>
-                                <div class="skills-panel-note docs-section-note">把原来的悬浮安装入口收进文档页，统一查看 Claude Code / Codex CLI 的安装、升级、卸载命令与常见问题。</div>
+                                <div class="skills-panel-note docs-section-note">查看 Claude Code / Codex CLI 命令。</div>
                             </div>
                         </div>
 
@@ -77,7 +77,7 @@
                         <div class="selector-header docs-section-header">
                             <div>
                                 <span class="selector-title">安装命令</span>
-                                <div class="skills-panel-note docs-section-note">右侧正文直接展示命令卡片，复制即可，不再弹额外模态框。</div>
+                                <div class="skills-panel-note docs-section-note">命令可直接复制。</div>
                             </div>
                         </div>
 
@@ -107,7 +107,7 @@
                         <div class="selector-header docs-section-header">
                             <div>
                                 <span class="selector-title">常见问题</span>
-                                <div class="skills-panel-note docs-section-note">常见权限、PATH、网络镜像问题直接放在文档页底部，减少来回弹窗切换。</div>
+                                <div class="skills-panel-note docs-section-note">常见问题见下。</div>
                             </div>
                         </div>
 
@@ -119,11 +119,10 @@
                                 </ul>
                             </div>
                             <div class="docs-note-card">
-                                <div class="docs-note-title">当前策略</div>
+                                <div class="docs-note-title">规则</div>
                                 <ul class="docs-static-list">
-                                    <li>所有命令按当前包管理器、镜像源和操作类型实时生成。</li>
-                                    <li>自定义镜像仅在安装/升级时附加，卸载命令保持纯净。</li>
-                                    <li>右侧正文保持固定版式，不再使用浮层打断主流程。</li>
+                                    <li>命令按当前包管理器、镜像与操作生成。</li>
+                                    <li>自定义镜像仅用于安装与升级。</li>
                                 </ul>
                             </div>
                         </div>
diff --git a/web-ui/partials/index/panel-market.html b/web-ui/partials/index/panel-market.html
index 21f186e5..7fc49cba 100644
--- a/web-ui/partials/index/panel-market.html
+++ b/web-ui/partials/index/panel-market.html
@@ -8,7 +8,7 @@
                         <div class="selector-header market-overview-header">
                             <div>
                                 <span class="selector-title">Skills 概览</span>
-                                <div class="skills-panel-note">聚焦本地 skills：切换目标、查看已装项、跨应用导入与 ZIP 分发。</div>
+                                <div class="skills-panel-note">切换目标并查看本地 Skills。</div>
                             </div>
                             <div class="settings-tab-actions market-header-actions">
                                 <button type="button" class="btn-tool btn-tool-compact" @click="loadSkillsMarketOverview({ forceRefresh: true, silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
@@ -74,14 +74,14 @@
                             <div class="skills-panel-header">
                                 <div class="skills-panel-title-wrap">
                                     <div class="skills-panel-title">已安装 Skills</div>
-                                    <div class="skills-panel-note">展示当前目录前 6 项；更多操作请进管理弹窗。</div>
+                                    <div class="skills-panel-note">仅显示前 6 项。</div>
                                 </div>
                                 <button type="button" class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
                                     {{ skillsLoading ? '刷新中...' : '刷新本地' }}
                                 </button>
                             </div>
                             <div v-if="skillsLoading && !skillsMarketLocalLoadedOnce" class="skills-empty-state">正在加载本地 Skills...</div>
-                            <div v-else-if="skillsList.length === 0" class="skills-empty-state">当前暂无已安装 skill，可通过 ZIP 或跨应用导入补充。</div>
+                            <div v-else-if="skillsList.length === 0" class="skills-empty-state">当前暂无已安装 skill。</div>
                             <div v-else class="market-preview-list">
                                 <div v-for="skill in skillsMarketInstalledPreview" :key="'market-local-' + skill.name" class="market-preview-item">
                                     <div class="market-preview-main">
@@ -99,14 +99,14 @@
                             <div class="skills-panel-header">
                                 <div class="skills-panel-title-wrap">
                                     <div class="skills-panel-title">可导入来源</div>
-                                    <div class="skills-panel-note">扫描其他应用中的未托管 skill，确认后批量导入到当前 {{ skillsTargetLabel }}。</div>
+                                    <div class="skills-panel-note">扫描并导入到当前 {{ skillsTargetLabel }}。</div>
                                 </div>
                                 <button type="button" class="btn-mini" @click="scanImportableSkills({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
                                     {{ skillsScanningImports ? '扫描中...' : '扫描来源' }}
                                 </button>
                             </div>
                             <div v-if="skillsScanningImports && !skillsMarketImportLoadedOnce" class="skills-empty-state">正在扫描可导入 skill...</div>
-                            <div v-else-if="skillsImportList.length === 0" class="skills-empty-state">暂未扫描到可导入 skill，可点击“扫描来源”重试。</div>
+                            <div v-else-if="skillsImportList.length === 0" class="skills-empty-state">暂未扫描到可导入 skill。</div>
                             <div v-else class="market-preview-list">
                                 <div v-for="skill in skillsMarketImportPreview" :key="'market-import-' + buildSkillImportKey(skill)" class="market-preview-item">
                                     <div class="market-preview-main">
@@ -124,21 +124,21 @@
                             <div class="skills-panel-header">
                                 <div class="skills-panel-title-wrap">
                                     <div class="skills-panel-title">分发入口</div>
-                                    <div class="skills-panel-note">本地管理、跨应用导入与 ZIP 导入，均作用于当前安装目标。</div>
+                                    <div class="skills-panel-note">操作均作用于当前安装目标。</div>
                                 </div>
                             </div>
                             <div class="market-action-grid">
                                 <button type="button" class="market-action-card" @click="openSkillsManager" :disabled="loading || !!initError || skillsMarketBusy">
                                     <span class="market-action-title">本地 Skills 管理</span>
-                                    <span class="market-action-copy">查看并管理当前 {{ skillsTargetLabel }} 的已装 skills</span>
+                                    <span class="market-action-copy">管理当前 {{ skillsTargetLabel }} 的已装 skills</span>
                                 </button>
                                 <button type="button" class="market-action-card" @click="scanImportableSkills({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
                                     <span class="market-action-title">跨应用导入</span>
-                                    <span class="market-action-copy">扫描其他应用并导入到当前 {{ skillsTargetLabel }}</span>
+                                    <span class="market-action-copy">导入到当前 {{ skillsTargetLabel }}</span>
                                 </button>
                                 <button type="button" class="market-action-card" @click="triggerSkillsZipImport" :disabled="loading || !!initError || skillsMarketBusy">
                                     <span class="market-action-title">ZIP 导入</span>
-                                    <span class="market-action-copy">从 ZIP 安装到当前目标</span>
+                                    <span class="market-action-copy">从 ZIP 导入到当前目标</span>
                                 </button>
                             </div>
                         </div>
@@ -146,26 +146,26 @@
                         <div class="skills-panel market-panel market-panel-wide">
                             <div class="skills-panel-header">
                                 <div class="skills-panel-title-wrap">
-                                    <div class="skills-panel-title">市场说明</div>
+                                    <div class="skills-panel-title">操作说明</div>
                                 </div>
                             </div>
                             <div class="market-preview-list">
                                 <div class="market-preview-item">
                                     <div class="market-preview-main">
                                         <div class="market-preview-title">目标切换</div>
-                                        <div class="market-preview-meta">切换 Codex / Claude Code 后，后续操作都会落到当前 {{ skillsTargetLabel }} 目录。</div>
+                                        <div class="market-preview-meta">当前操作写入 {{ skillsTargetLabel }} 目录。</div>
                                     </div>
                                 </div>
                                 <div class="market-preview-item">
                                     <div class="market-preview-main">
                                         <div class="market-preview-title">跨应用导入</div>
-                                        <div class="market-preview-meta">扫描 `Codex`、`Claude Code` 与 `Agents` 中未托管的 skills，并导入到当前宿主。</div>
+                                        <div class="market-preview-meta">从其他宿主导入未托管 skill。</div>
                                     </div>
                                 </div>
                                 <div class="market-preview-item">
                                     <div class="market-preview-main">
-                                        <div class="market-preview-title">ZIP 分发</div>
-                                        <div class="market-preview-meta">通过压缩包分发技能目录，保持本地可控，不依赖外部目录服务。</div>
+                                        <div class="market-preview-title">ZIP 导入</div>
+                                        <div class="market-preview-meta">从 ZIP 导入本地 skill。</div>
                                     </div>
                                 </div>
                             </div>
diff --git a/web-ui/partials/index/panel-usage.html b/web-ui/partials/index/panel-usage.html
index e8f4d282..dd486b1c 100644
--- a/web-ui/partials/index/panel-usage.html
+++ b/web-ui/partials/index/panel-usage.html
@@ -16,7 +16,7 @@
                         </div>
                     </div>
 
-                    <div v-if="sessionsUsageLoading && !sessionsUsageList.length" class="usage-empty">Usage 统计加载中...</div>
+                    <div v-if="sessionsUsageLoading && !sessionsUsageList.length" class="session-empty">正在加载 Usage 统计...</div>
                     <div v-else-if="sessionsUsageError && !sessionsUsageList.length" class="usage-empty">{{ sessionsUsageError }}</div>
                     <div v-else-if="!sessionsUsageList.length" class="usage-empty">暂无可用于统计的会话数据</div>
                     <template v-else>
diff --git a/web-ui/styles/navigation-panels.css b/web-ui/styles/navigation-panels.css
index f29909ca..be55b46a 100644
--- a/web-ui/styles/navigation-panels.css
+++ b/web-ui/styles/navigation-panels.css
@@ -335,10 +335,12 @@
     border-radius: 0;
     box-shadow: none;
     padding: 0 0 40px;
-    max-width: 1280px;
+    width: min(100%, 1480px);
+    max-width: none;
 }
 
 .mode-content {
+    width: 100%;
     border-radius: 0;
     background: transparent;
     box-shadow: none;
diff --git a/web-ui/styles/sessions-preview.css b/web-ui/styles/sessions-preview.css
index e269d8dc..7db6a187 100644
--- a/web-ui/styles/sessions-preview.css
+++ b/web-ui/styles/sessions-preview.css
@@ -9,7 +9,7 @@
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    padding-right: 68px;
+    padding-right: 52px;
     display: flex;
     flex-direction: column;
     scrollbar-width: none;
@@ -117,9 +117,9 @@
 .session-timeline {
     position: absolute;
     top: var(--session-preview-header-offset, 72px);
-    right: 8px;
+    right: 4px;
     bottom: 12px;
-    width: 56px;
+    width: 44px;
     height: auto;
     border-radius: 12px;
     border: 1px solid rgba(208, 196, 182, 0.5);
@@ -171,8 +171,8 @@
 
 .session-timeline-current {
     position: absolute;
-    left: 4px;
-    right: 4px;
+    left: 3px;
+    right: 3px;
     bottom: 4px;
     font-size: 10px;
     line-height: 1.2;

From 587d12dd10d6e750fb7eda149cf4502f9e0f95de Mon Sep 17 00:00:00 2001
From: ymkiux <3255284101@qq.com>
Date: Fri, 10 Apr 2026 14:24:59 +0800
Subject: [PATCH 02/17] test: align web ui vue asset assertion with production
 build

---
 tests/e2e/test-web-ui-assets.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/test-web-ui-assets.js b/tests/e2e/test-web-ui-assets.js
index 321a3972..89270e7a 100644
--- a/tests/e2e/test-web-ui-assets.js
+++ b/tests/e2e/test-web-ui-assets.js
@@ -52,8 +52,14 @@ module.exports = async function testWebUiAssets(ctx) {
     );
     assert(bundledIndex.body.includes('id="settings-panel-trash"'), '/web-ui/index.html should inline settings partials');
     assert(bundledIndex.body.includes('src="/web-ui/app.js"'), '/web-ui/index.html should point to the absolute app entry');
-    assert(bundledIndex.body.includes('src="/res/vue.global.js"'), '/web-ui/index.html should use the compiler-enabled vue runtime');
-    assert(!bundledIndex.body.includes('src="/res/vue.global.prod.js"'), '/web-ui/index.html should not use the prod-only vue runtime');
+    assert(
+        bundledIndex.body.includes('src="/res/vue.global.prod.js"'),
+        '/web-ui/index.html should use the production Vue browser build'
+    );
+    assert(
+        !bundledIndex.body.includes('src="/res/runtime.global.prod.js"'),
+        '/web-ui/index.html should not use the runtime-only Vue build'
+    );
     assert(!bundledIndex.body.includes('src="web-ui/app.js"'), '/web-ui/index.html should not use a relative app entry');
     assert(!/<!--\s*@include\s+/.test(bundledIndex.body), '/web-ui/index.html should not leak include directives');
 

From dd1766098a3ce42dfe1cdc2f4b4a4765cc48e1a7 Mon Sep 17 00:00:00 2001
From: ymkiux <3255284101@qq.com>
Date: Fri, 10 Apr 2026 15:28:00 +0800
Subject: [PATCH 03/17] fix: keep startup probe from consuming init notice

---
 cli.js                           |   5 +-
 tests/unit/web-run-host.test.mjs | 138 ++++++++++++++++++++++++++++++-
 2 files changed, 141 insertions(+), 2 deletions(-)

diff --git a/cli.js b/cli.js
index f553dce3..576122e1 100644
--- a/cli.js
+++ b/cli.js
@@ -10776,7 +10776,7 @@ const PUBLIC_WEB_UI_STATIC_ASSETS = new Set([
 function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser }) {
     const connections = new Set();
     const probeWebUiReadiness = (callback) => {
-        const payload = JSON.stringify({ action: 'status', params: {} });
+        const payload = JSON.stringify({ action: 'health-check', params: {} });
         const requestOptions = {
             hostname: openHost,
             port,
@@ -10898,6 +10898,9 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
                     let result;
 
                     switch (action) {
+                        case 'health-check':
+                            result = { ok: true };
+                            break;
                         case 'status': {
                             const statusConfigResult = readConfigOrVirtualDefault();
                             const config = statusConfigResult.config;
diff --git a/tests/unit/web-run-host.test.mjs b/tests/unit/web-run-host.test.mjs
index 83d42428..6ea81407 100644
--- a/tests/unit/web-run-host.test.mjs
+++ b/tests/unit/web-run-host.test.mjs
@@ -805,6 +805,7 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
     let listenCallback = null;
     let probeRequest = null;
     let probeEndHandler = null;
+    let probePayload = '';
     const execCalls = [];
     const createWebServer = instantiateFunction(createWebServerSource, 'createWebServer', {
         http: {
@@ -831,7 +832,9 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
                     on() {},
                     setTimeout() {},
                     destroy() {},
-                    end() {}
+                    end(payload) {
+                        probePayload = payload;
+                    }
                 };
             }
         },
@@ -898,6 +901,7 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
     assert.strictEqual(probeRequest.options.port, 3737);
     assert.strictEqual(probeRequest.options.path, '/api');
     assert.strictEqual(probeRequest.options.method, 'POST');
+    assert.deepStrictEqual(JSON.parse(probePayload), { action: 'health-check', params: {} });
 
     probeRequest.callback({
         statusCode: 200,
@@ -914,6 +918,138 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
     assert.deepStrictEqual(execCalls, ['start "" "http://127.0.0.1:3737"']);
 });
 
+test('createWebServer health-check does not consume init notice before the first status poll', async () => {
+    let requestHandler = null;
+    let consumed = 0;
+    const createWebServer = instantiateFunction(createWebServerSource, 'createWebServer', {
+        http: {
+            createServer(handler) {
+                requestHandler = handler;
+                return {
+                    listening: false,
+                    on() {},
+                    once() {},
+                    listen() {},
+                    close(callback) {
+                        if (typeof callback === 'function') {
+                            callback();
+                        }
+                    }
+                };
+            }
+        },
+        path,
+        __dirname: '/repo',
+        readBundledWebUiHtml() {
+            return '<!doctype html>';
+        },
+        PUBLIC_WEB_UI_DYNAMIC_ASSETS: new Map(),
+        PUBLIC_WEB_UI_STATIC_ASSETS: new Set(),
+        isPathInside() {
+            return true;
+        },
+        fs: {
+            existsSync() {
+                return false;
+            },
+            statSync() {
+                return {
+                    isFile() {
+                        return false;
+                    }
+                };
+            },
+            createReadStream() {
+                throw new Error('unexpected static asset read');
+            }
+        },
+        formatHostForUrl(value) {
+            return value;
+        },
+        DEFAULT_WEB_OPEN_HOST: '127.0.0.1',
+        isAnyAddressHost() {
+            return false;
+        },
+        process: { env: {}, platform: 'linux' },
+        exec() {},
+        console: {
+            log() {},
+            warn() {},
+            error() {}
+        },
+        setTimeout,
+        Buffer,
+        MAX_API_BODY_SIZE: 1024 * 1024,
+        handleImportSkillsZipUpload() {
+            throw new Error('unexpected import route');
+        },
+        readConfigOrVirtualDefault() {
+            return {
+                config: {},
+                isVirtual: false,
+                errorType: '',
+                reason: ''
+            };
+        },
+        hasConfigLoadError() {
+            return false;
+        },
+        readPositiveIntegerConfigValue() {
+            return 0;
+        },
+        consumeInitNotice() {
+            consumed += 1;
+            return 'startup notice';
+        }
+    });
+
+    createWebServer({
+        htmlPath: '/repo/web-ui/index.html',
+        assetsDir: '/repo/res',
+        webDir: '/repo/web-ui',
+        host: '127.0.0.1',
+        port: 3737,
+        openBrowser: false
+    });
+
+    async function postApi(body) {
+        const listeners = {};
+        const req = {
+            url: '/api',
+            on(event, handler) {
+                listeners[event] = handler;
+            }
+        };
+        const res = {
+            statusCode: null,
+            headers: null,
+            body: '',
+            writeHead(statusCode, headers) {
+                this.statusCode = statusCode;
+                this.headers = headers;
+            },
+            end(bodyText = '') {
+                this.body = bodyText;
+            }
+        };
+        requestHandler(req, res);
+        listeners.data(Buffer.from(JSON.stringify(body), 'utf-8'));
+        await listeners.end();
+        res.payload = JSON.parse(res.body || '{}');
+        return res;
+    }
+
+    const probeResponse = await postApi({ action: 'health-check', params: {} });
+    assert.strictEqual(probeResponse.statusCode, 200);
+    assert.deepStrictEqual(probeResponse.payload, { ok: true });
+    assert.strictEqual(consumed, 0);
+
+    const statusResponse = await postApi({ action: 'status', params: {} });
+    assert.strictEqual(statusResponse.statusCode, 200);
+    assert.strictEqual(statusResponse.payload.initNotice, 'startup notice');
+    assert.strictEqual(consumed, 1);
+});
+
 test('createWebServer retries readiness probe failures before auto-opening the browser', () => {
     let listenCallback = null;
     const requestOutcomes = [];

From 4ebd49be186e32bfe5e4db7322488b149da30368 Mon Sep 17 00:00:00 2001
From: ymkiux <3255284101@qq.com>
Date: Fri, 10 Apr 2026 18:51:43 +0800
Subject: [PATCH 04/17] fix: harden session browsing and startup gating

---
 cli.js                                        | 385 ++++++++++++++++--
 tests/e2e/test-mcp.js                         |   6 +-
 tests/e2e/test-sessions.js                    |  12 +-
 tests/unit/config-tabs-ui.test.mjs            |   9 +-
 ...ssion-browser-timeline-regression.test.mjs |  33 ++
 .../session-tab-switch-performance.test.mjs   | 167 +++++++-
 tests/unit/session-usage-backend.test.mjs     | 220 +++++++++-
 tests/unit/web-ui-behavior-parity.test.mjs    |  19 +-
 tests/unit/web-ui-logic.test.mjs              |  34 ++
 ...-ui-runtime-navigation-regression.test.mjs |   5 +
 tests/unit/web-ui-startup-init.test.mjs       |   8 +
 web-ui/app.js                                 |   7 +-
 web-ui/modules/app.computed.session.mjs       |  31 +-
 web-ui/modules/app.methods.navigation.mjs     | 130 +++++-
 .../modules/app.methods.session-browser.mjs   |  21 +-
 web-ui/partials/index/panel-sessions.html     |   9 +-
 web-ui/session-helpers.mjs                    |  87 ++--
 17 files changed, 1078 insertions(+), 105 deletions(-)

diff --git a/cli.js b/cli.js
index 576122e1..4b704d73 100644
--- a/cli.js
+++ b/cli.js
@@ -126,7 +126,14 @@ const EXACT_MESSAGE_COUNT_CACHE_MAX_ENTRIES = 800;
 const DEFAULT_CONTENT_SCAN_LIMIT = 50;
 const SESSION_SCAN_FACTOR = 4;
 const SESSION_SCAN_MIN_FILES = 800;
+const SESSION_BROWSE_SCAN_FACTOR = 2;
+const SESSION_BROWSE_MIN_FILES = 120;
+const SESSION_BROWSE_SUMMARY_READ_BYTES = 64 * 1024;
+const SESSION_INVENTORY_CACHE_MAX_ENTRIES = 12;
 const MAX_SESSION_PATH_LIST_SIZE = 2000;
+const FAST_SESSION_DETAIL_PREVIEW_FILE_BYTES = 256 * 1024;
+const FAST_SESSION_DETAIL_PREVIEW_CHUNK_BYTES = 64 * 1024;
+const FAST_SESSION_DETAIL_PREVIEW_MAX_BYTES = 1024 * 1024;
 const AGENTS_FILE_NAME = 'AGENTS.md';
 const CODEX_SKILLS_DIR = path.join(CONFIG_DIR, 'skills');
 const CLAUDE_SKILLS_DIR = path.join(CLAUDE_DIR, 'skills');
@@ -504,6 +511,11 @@ stream_idle_timeout_ms = 300000
 
 let g_initNotice = '';
 let g_sessionListCache = new Map();
+let g_sessionInventoryCache = new Map();
+let g_sessionFileLookupCache = {
+    codex: new Map(),
+    claude: new Map()
+};
 let g_exactMessageCountCache = new Map();
 let g_modelsCache = new Map();
 let g_modelsInFlight = new Map();
@@ -4664,7 +4676,138 @@ function extractSessionDetailPreviewFromRecords(records, source, messageLimit) {
     return state;
 }
 
-async function extractSessionDetailPreviewFromFile(filePath, source, messageLimit) {
+function extractSessionDetailPreviewFromTailText(text, source, messageLimit) {
+    const safeMessageLimit = Number.isFinite(Number(messageLimit))
+        ? Math.max(1, Math.floor(Number(messageLimit)))
+        : DEFAULT_SESSION_DETAIL_MESSAGES;
+    const state = {
+        sessionId: '',
+        cwd: '',
+        updatedAt: '',
+        messages: [],
+        tailLimit: safeMessageLimit,
+        totalMessages: null,
+        clipped: false
+    };
+    const lines = typeof text === 'string' && text
+        ? text.split(/\r?\n/)
+        : [];
+
+    for (let lineIndex = lines.length - 1; lineIndex >= 0; lineIndex -= 1) {
+        const trimmed = lines[lineIndex].trim();
+        if (!trimmed) {
+            continue;
+        }
+
+        let record;
+        try {
+            record = JSON.parse(trimmed);
+        } catch (_) {
+            continue;
+        }
+
+        if (record && record.timestamp && !state.updatedAt) {
+            state.updatedAt = toIsoTime(record.timestamp, '');
+        }
+        if ((!state.sessionId || !state.cwd) && record) {
+            applySessionDetailRecordMetadata(record, source, state);
+        }
+
+        const message = extractMessageFromRecord(record, source);
+        if (!message) {
+            continue;
+        }
+
+        const role = normalizeRole(message.role);
+        const textValue = typeof message.text === 'string' ? message.text : '';
+        if (!role || !textValue) {
+            continue;
+        }
+
+        if (state.messages.length >= safeMessageLimit) {
+            state.clipped = true;
+            break;
+        }
+
+        state.messages.unshift({
+            role,
+            text: textValue,
+            timestamp: toIsoTime(record && record.timestamp, ''),
+            recordLineIndex: -1
+        });
+    }
+
+    return state;
+}
+
+function extractSessionDetailPreviewFromFileFast(filePath, source, messageLimit) {
+    const fileStat = getFileStatSafe(filePath);
+    if (!fileStat || !Number.isFinite(fileStat.size) || fileStat.size <= FAST_SESSION_DETAIL_PREVIEW_FILE_BYTES) {
+        return null;
+    }
+    const safeMessageLimit = Number.isFinite(Number(messageLimit))
+        ? Math.max(1, Math.floor(Number(messageLimit)))
+        : DEFAULT_SESSION_DETAIL_MESSAGES;
+
+    let fd = null;
+    let position = fileStat.size;
+    let totalBytesRead = 0;
+    let combined = Buffer.alloc(0);
+    let latest = {
+        sessionId: '',
+        cwd: '',
+        updatedAt: '',
+        messages: [],
+        totalMessages: null,
+        clipped: false
+    };
+
+    try {
+        fd = fs.openSync(filePath, 'r');
+        while (position > 0 && totalBytesRead < FAST_SESSION_DETAIL_PREVIEW_MAX_BYTES) {
+            const remainingBudget = FAST_SESSION_DETAIL_PREVIEW_MAX_BYTES - totalBytesRead;
+            const chunkSize = Math.min(FAST_SESSION_DETAIL_PREVIEW_CHUNK_BYTES, position, remainingBudget);
+            if (chunkSize <= 0) {
+                break;
+            }
+
+            position -= chunkSize;
+            const chunk = Buffer.allocUnsafe(chunkSize);
+            const bytesRead = fs.readSync(fd, chunk, 0, chunkSize, position);
+            if (bytesRead <= 0) {
+                break;
+            }
+
+            totalBytesRead += bytesRead;
+            combined = Buffer.concat([chunk.subarray(0, bytesRead), combined]);
+            latest = extractSessionDetailPreviewFromTailText(combined.toString('utf-8'), source, messageLimit);
+            if (latest.messages.length >= safeMessageLimit) {
+                latest.clipped = position > 0;
+                return latest;
+            }
+        }
+
+        if (position > 0) {
+            latest.clipped = true;
+        }
+        return latest;
+    } catch (_) {
+        return null;
+    } finally {
+        if (fd !== null) {
+            try { fs.closeSync(fd); } catch (e) {}
+        }
+    }
+}
+
+async function extractSessionDetailPreviewFromFile(filePath, source, messageLimit, options = {}) {
+    if (options && options.preview) {
+        const fastPreview = extractSessionDetailPreviewFromFileFast(filePath, source, messageLimit);
+        if (fastPreview) {
+            return fastPreview;
+        }
+    }
+
     const safeMessageLimit = Number.isFinite(Number(messageLimit))
         ? Math.max(1, Math.floor(Number(messageLimit)))
         : DEFAULT_SESSION_DETAIL_MESSAGES;
@@ -5314,12 +5457,133 @@ function setSessionListCache(cacheKey, value) {
     }
 }
 
+function buildSessionInventoryCacheKey(source, limit, options = {}) {
+    const normalizedSource = source === 'claude' ? 'claude' : 'codex';
+    const normalizedLimit = Number.isFinite(Number(limit))
+        ? Math.max(1, Math.floor(Number(limit)))
+        : 1;
+    const scanFactor = Number.isFinite(Number(options.scanFactor))
+        ? Math.max(1, Number(options.scanFactor))
+        : '';
+    const minFiles = Number.isFinite(Number(options.minFiles))
+        ? Math.max(1, Math.floor(Number(options.minFiles)))
+        : '';
+    const targetCount = Number.isFinite(Number(options.targetCount))
+        ? Math.max(1, Math.floor(Number(options.targetCount)))
+        : '';
+    const scanCount = Number.isFinite(Number(options.scanCount))
+        ? Math.max(1, Math.floor(Number(options.scanCount)))
+        : '';
+    const maxFilesScanned = Number.isFinite(Number(options.maxFilesScanned))
+        ? Math.max(1, Math.floor(Number(options.maxFilesScanned)))
+        : '';
+    const summaryReadBytes = Number.isFinite(Number(options.summaryReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.summaryReadBytes)))
+        : '';
+    const titleReadBytes = Number.isFinite(Number(options.titleReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.titleReadBytes)))
+        : '';
+    return [
+        'inventory',
+        normalizedSource,
+        normalizedLimit,
+        scanFactor,
+        minFiles,
+        targetCount,
+        scanCount,
+        maxFilesScanned,
+        summaryReadBytes,
+        titleReadBytes
+    ].join(':');
+}
+
+function getSessionInventoryCache(cacheKey, forceRefresh = false) {
+    if (forceRefresh) {
+        g_sessionInventoryCache.delete(cacheKey);
+        return null;
+    }
+
+    const cached = g_sessionInventoryCache.get(cacheKey);
+    if (!cached) {
+        return null;
+    }
+
+    if ((Date.now() - cached.timestamp) > SESSION_LIST_CACHE_TTL_MS) {
+        g_sessionInventoryCache.delete(cacheKey);
+        return null;
+    }
+
+    return cached.value;
+}
+
+function registerSessionFileLookupEntries(source, sessions = []) {
+    const normalizedSource = source === 'claude' ? 'claude' : 'codex';
+    const store = g_sessionFileLookupCache[normalizedSource];
+    if (!(store instanceof Map) || !Array.isArray(sessions)) {
+        return;
+    }
+    for (const session of sessions) {
+        if (!session || typeof session !== 'object' || Array.isArray(session)) {
+            continue;
+        }
+        const sessionId = typeof session.sessionId === 'string' ? session.sessionId.trim().toLowerCase() : '';
+        const filePath = typeof session.filePath === 'string' ? session.filePath.trim() : '';
+        if (!sessionId || !filePath) {
+            continue;
+        }
+        store.set(sessionId, filePath);
+    }
+}
+
+function setSessionInventoryCache(cacheKey, source, value) {
+    g_sessionInventoryCache.set(cacheKey, {
+        timestamp: Date.now(),
+        source,
+        value
+    });
+    registerSessionFileLookupEntries(source, value);
+
+    if (g_sessionInventoryCache.size > SESSION_INVENTORY_CACHE_MAX_ENTRIES) {
+        const firstKey = g_sessionInventoryCache.keys().next().value;
+        if (firstKey) {
+            g_sessionInventoryCache.delete(firstKey);
+        }
+    }
+}
+
+function listSessionInventoryBySource(source, limit, scanOptions = {}, options = {}) {
+    const normalizedSource = source === 'claude' ? 'claude' : 'codex';
+    const forceRefresh = !!options.forceRefresh;
+    const cacheKey = buildSessionInventoryCacheKey(normalizedSource, limit, scanOptions);
+    const cached = getSessionInventoryCache(cacheKey, forceRefresh);
+    if (cached) {
+        return cached;
+    }
+
+    const sessions = normalizedSource === 'claude'
+        ? listClaudeSessions(limit, scanOptions)
+        : listCodexSessions(limit, scanOptions);
+    setSessionInventoryCache(cacheKey, normalizedSource, sessions);
+    return sessions;
+}
+
 function invalidateSessionListCache() {
     g_sessionListCache.clear();
+    g_sessionInventoryCache.clear();
+    g_sessionFileLookupCache = {
+        codex: new Map(),
+        claude: new Map()
+    };
 }
 
-function parseCodexSessionSummary(filePath) {
-    const records = parseJsonlHeadRecords(filePath);
+function parseCodexSessionSummary(filePath, options = {}) {
+    const summaryReadBytes = Number.isFinite(Number(options.summaryReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.summaryReadBytes)))
+        : SESSION_SUMMARY_READ_BYTES;
+    const titleReadBytes = Number.isFinite(Number(options.titleReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.titleReadBytes)))
+        : SESSION_TITLE_READ_BYTES;
+    const records = parseJsonlHeadRecords(filePath, summaryReadBytes);
     if (records.length === 0) {
         return null;
     }
@@ -5368,7 +5632,7 @@ function parseCodexSessionSummary(filePath) {
     }
 
     if (!firstPrompt) {
-        const titleRecords = parseJsonlHeadRecords(filePath, SESSION_TITLE_READ_BYTES);
+        const titleRecords = parseJsonlHeadRecords(filePath, titleReadBytes);
         const titleMessages = [];
         for (const record of titleRecords) {
             if (record.type === 'response_item' && record.payload && record.payload.type === 'message') {
@@ -5401,15 +5665,21 @@ function parseCodexSessionSummary(filePath) {
         createdAt,
         updatedAt,
         messageCount,
-        __messageCountExact: isSessionSummaryMessageCountExact(stat),
+        __messageCountExact: isSessionSummaryMessageCountExact(stat, summaryReadBytes),
         filePath,
         keywords: [],
         capabilities: {}
     };
 }
 
-function parseClaudeSessionSummary(filePath) {
-    const records = parseJsonlHeadRecords(filePath);
+function parseClaudeSessionSummary(filePath, options = {}) {
+    const summaryReadBytes = Number.isFinite(Number(options.summaryReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.summaryReadBytes)))
+        : SESSION_SUMMARY_READ_BYTES;
+    const titleReadBytes = Number.isFinite(Number(options.titleReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.titleReadBytes)))
+        : SESSION_TITLE_READ_BYTES;
+    const records = parseJsonlHeadRecords(filePath, summaryReadBytes);
     if (records.length === 0) {
         return null;
     }
@@ -5459,7 +5729,7 @@ function parseClaudeSessionSummary(filePath) {
     }
 
     if (!firstPrompt) {
-        const titleRecords = parseJsonlHeadRecords(filePath, SESSION_TITLE_READ_BYTES);
+        const titleRecords = parseJsonlHeadRecords(filePath, titleReadBytes);
         const titleMessages = [];
         for (const record of titleRecords) {
             const role = normalizeRole(record.type);
@@ -5491,7 +5761,7 @@ function parseClaudeSessionSummary(filePath) {
         createdAt,
         updatedAt,
         messageCount,
-        __messageCountExact: isSessionSummaryMessageCountExact(stat),
+        __messageCountExact: isSessionSummaryMessageCountExact(stat, summaryReadBytes),
         filePath,
         keywords: [],
         capabilities: { code: true }
@@ -5515,6 +5785,12 @@ function listCodexSessions(limit, options = {}) {
     const maxFilesScanned = Number.isFinite(Number(options.maxFilesScanned))
         ? Math.max(scanCount, Math.floor(Number(options.maxFilesScanned)))
         : Math.max(scanCount * 2, minFiles);
+    const summaryReadBytes = Number.isFinite(Number(options.summaryReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.summaryReadBytes)))
+        : SESSION_SUMMARY_READ_BYTES;
+    const titleReadBytes = Number.isFinite(Number(options.titleReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.titleReadBytes)))
+        : SESSION_TITLE_READ_BYTES;
     const files = collectRecentJsonlFiles(codexSessionsDir, {
         returnCount: scanCount,
         maxFilesScanned
@@ -5522,7 +5798,10 @@ function listCodexSessions(limit, options = {}) {
     const sessions = [];
 
     for (const filePath of files) {
-        const summary = parseCodexSessionSummary(filePath);
+        const summary = parseCodexSessionSummary(filePath, {
+            summaryReadBytes,
+            titleReadBytes
+        });
         if (summary) {
             sessions.push(summary);
         }
@@ -5556,6 +5835,12 @@ function listClaudeSessions(limit, options = {}) {
     const maxFilesScanned = Number.isFinite(Number(options.maxFilesScanned))
         ? Math.max(scanCount, Math.floor(Number(options.maxFilesScanned)))
         : Math.max(scanCount * 2, minFiles);
+    const summaryReadBytes = Number.isFinite(Number(options.summaryReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.summaryReadBytes)))
+        : SESSION_SUMMARY_READ_BYTES;
+    const titleReadBytes = Number.isFinite(Number(options.titleReadBytes))
+        ? Math.max(1024, Math.floor(Number(options.titleReadBytes)))
+        : SESSION_TITLE_READ_BYTES;
 
     const sessions = [];
     let projectDirs = [];
@@ -5598,7 +5883,7 @@ function listClaudeSessions(limit, options = {}) {
             let title = truncateText(entry.summary || entry.firstPrompt || sessionId, 120);
             let messageCount = Number.isFinite(entry.messageCount) ? Math.max(0, entry.messageCount - 1) : 0;
 
-            const quickRecords = parseJsonlHeadRecords(filePath, SESSION_SUMMARY_READ_BYTES);
+            const quickRecords = parseJsonlHeadRecords(filePath, summaryReadBytes);
             if (quickRecords.length > 0) {
                 const filteredCount = countConversationMessagesInRecords(quickRecords, 'claude');
                 if (filteredCount > 0 || messageCount === 0) {
@@ -5636,7 +5921,7 @@ function listClaudeSessions(limit, options = {}) {
                 createdAt,
                 updatedAt,
                 messageCount,
-                __messageCountExact: quickRecords.length > 0 && isSessionSummaryMessageCountExact(fileStat),
+                __messageCountExact: quickRecords.length > 0 && isSessionSummaryMessageCountExact(fileStat, summaryReadBytes),
                 filePath,
                 keywords,
                 capabilities
@@ -5659,7 +5944,10 @@ function listClaudeSessions(limit, options = {}) {
             ignoreSubPath: `${path.sep}subagents${path.sep}`
         });
         for (const filePath of fallbackFiles) {
-            const summary = parseClaudeSessionSummary(filePath);
+            const summary = parseClaudeSessionSummary(filePath, {
+                summaryReadBytes,
+                titleReadBytes
+            });
             if (summary) {
                 sessions.push(summary);
             }
@@ -5686,7 +5974,8 @@ async function listAllSessions(params = {}) {
     const hasPathFilter = !!normalizedPathFilter;
     const queryTokens = expandSessionQueryTokens(normalizeQueryTokens(params.query));
     const hasQuery = queryTokens.length > 0;
-    const cacheKey = hasQuery ? '' : `${source}:${limit}:${normalizedPathFilter}`;
+    const browseLightweight = params.browseLightweight === true && !hasQuery && !hasPathFilter;
+    const cacheKey = hasQuery ? '' : `${browseLightweight ? 'browse' : 'default'}:${source}:${limit}:${normalizedPathFilter}`;
     if (!hasQuery) {
         const cached = getSessionListCache(cacheKey, forceRefresh);
         if (cached) {
@@ -5699,14 +5988,21 @@ async function listAllSessions(params = {}) {
             scanFactor: SESSION_SCAN_FACTOR * 2,
             minFiles: SESSION_SCAN_MIN_FILES * 2
         }
-        : {};
+        : (browseLightweight
+            ? {
+                scanFactor: SESSION_BROWSE_SCAN_FACTOR,
+                minFiles: SESSION_BROWSE_MIN_FILES,
+                summaryReadBytes: SESSION_BROWSE_SUMMARY_READ_BYTES,
+                titleReadBytes: SESSION_BROWSE_SUMMARY_READ_BYTES
+            }
+            : {});
 
     let sessions = [];
     if (source === 'all' || source === 'codex') {
-        sessions = sessions.concat(listCodexSessions(limit, scanOptions));
+        sessions = sessions.concat(listSessionInventoryBySource('codex', limit, scanOptions, { forceRefresh }));
     }
     if (source === 'all' || source === 'claude') {
-        sessions = sessions.concat(listClaudeSessions(limit, scanOptions));
+        sessions = sessions.concat(listSessionInventoryBySource('claude', limit, scanOptions, { forceRefresh }));
     }
 
     if (hasPathFilter) {
@@ -5767,6 +6063,23 @@ async function listAllSessionsData(params = {}) {
     return result;
 }
 
+async function listSessionBrowse(params = {}) {
+    const sessions = await listAllSessions({
+        ...params,
+        browseLightweight: true
+    });
+    return Array.isArray(sessions)
+        ? sessions.map((item) => {
+            if (!item || typeof item !== 'object' || Array.isArray(item)) {
+                return item;
+            }
+            const normalized = { ...item };
+            delete normalized.__messageCountExact;
+            return normalized;
+        })
+        : [];
+}
+
 async function listSessionUsage(params = {}) {
     const source = params.source === 'codex' || params.source === 'claude'
         ? params.source
@@ -5813,15 +6126,17 @@ function listSessionPaths(params = {}) {
     const scanOptions = {
         scanFactor: SESSION_SCAN_FACTOR * 2,
         minFiles: SESSION_SCAN_MIN_FILES * 2,
-        targetCount: Math.max(gatherLimit * 2, 1000)
+        targetCount: Math.max(gatherLimit * 2, 1000),
+        summaryReadBytes: SESSION_BROWSE_SUMMARY_READ_BYTES,
+        titleReadBytes: SESSION_BROWSE_SUMMARY_READ_BYTES
     };
 
     let sessions = [];
     if (validSource === 'all' || validSource === 'codex') {
-        sessions = sessions.concat(listCodexSessions(gatherLimit, scanOptions));
+        sessions = sessions.concat(listSessionInventoryBySource('codex', gatherLimit, scanOptions, { forceRefresh }));
     }
     if (validSource === 'all' || validSource === 'claude') {
-        sessions = sessions.concat(listClaudeSessions(gatherLimit, scanOptions));
+        sessions = sessions.concat(listSessionInventoryBySource('claude', gatherLimit, scanOptions, { forceRefresh }));
     }
 
     const dedupedPaths = [];
@@ -5863,6 +6178,14 @@ function resolveSessionFilePath(source, filePath, sessionId) {
 
     if (typeof sessionId === 'string' && sessionId.trim()) {
         const targetId = sessionId.trim().toLowerCase();
+        const lookupStore = g_sessionFileLookupCache[source === 'claude' ? 'claude' : 'codex'];
+        if (lookupStore instanceof Map && lookupStore.has(targetId)) {
+            const cachedPath = lookupStore.get(targetId);
+            if (cachedPath && fs.existsSync(cachedPath) && isPathInside(cachedPath, root)) {
+                return cachedPath;
+            }
+            lookupStore.delete(targetId);
+        }
         const files = collectJsonlFiles(root, 5000);
         const matchedFile = files.find(item => path.basename(item, '.jsonl').toLowerCase() === targetId);
         if (matchedFile && fs.existsSync(matchedFile)) {
@@ -7602,12 +7925,16 @@ async function readSessionDetail(params = {}) {
     const messageLimit = Number.isFinite(rawLimit)
         ? Math.max(1, Math.min(rawLimit, MAX_SESSION_DETAIL_MESSAGES))
         : DEFAULT_SESSION_DETAIL_MESSAGES;
+    const preview = params.preview === true || params.preview === 'true';
 
-    const extracted = await extractSessionDetailPreviewFromFile(filePath, source, messageLimit);
+    const extracted = await extractSessionDetailPreviewFromFile(filePath, source, messageLimit, { preview });
     const sessionId = extracted.sessionId || params.sessionId || path.basename(filePath, '.jsonl');
     const sourceLabel = source === 'codex' ? 'Codex' : 'Claude Code';
     const clippedMessages = Array.isArray(extracted.messages) ? extracted.messages : [];
-    const startIndex = Math.max(0, extracted.totalMessages - clippedMessages.length);
+    const hasExactTotalMessages = Number.isFinite(extracted.totalMessages);
+    const startIndex = hasExactTotalMessages
+        ? Math.max(0, extracted.totalMessages - clippedMessages.length)
+        : 0;
     const indexedMessages = clippedMessages.map((message, messageIndex) => ({
         ...message,
         messageIndex: startIndex + messageIndex
@@ -7619,8 +7946,10 @@ async function readSessionDetail(params = {}) {
         sessionId,
         cwd: extracted.cwd || '',
         updatedAt: extracted.updatedAt || '',
-        totalMessages: extracted.totalMessages,
-        clipped: extracted.totalMessages > indexedMessages.length,
+        totalMessages: hasExactTotalMessages ? extracted.totalMessages : null,
+        clipped: typeof extracted.clipped === 'boolean'
+            ? extracted.clipped
+            : (hasExactTotalMessages ? extracted.totalMessages > indexedMessages.length : false),
         messageLimit,
         messages: indexedMessages,
         filePath
@@ -11128,7 +11457,7 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
                                     result = { error: 'Invalid source. Must be codex, claude, or all' };
                                 } else {
                                     result = {
-                                        sessions: await listAllSessionsData(params),
+                                        sessions: await listSessionBrowse(params),
                                         source: source || 'all'
                                     };
                                 }
@@ -12842,7 +13171,7 @@ function createWorkflowToolCatalog() {
                 }
                 return {
                     source: source || 'all',
-                    sessions: await listAllSessionsData({
+                    sessions: await listSessionBrowse({
                         ...args,
                         source: source || 'all'
                     })
@@ -13211,7 +13540,7 @@ function createMcpTools(options = {}) {
                 source: source || 'all'
             };
             return {
-                sessions: await listAllSessionsData(normalizedInput),
+                sessions: await listSessionBrowse(normalizedInput),
                 source: source || 'all'
             };
         }
@@ -13624,7 +13953,7 @@ function createMcpResources() {
                 }
                 const payload = {
                     source: normalizedSource || 'all',
-                    sessions: await listAllSessionsData({
+                    sessions: await listSessionBrowse({
                         source: normalizedSource || 'all',
                         query,
                         pathFilter,
diff --git a/tests/e2e/test-mcp.js b/tests/e2e/test-mcp.js
index 2fe1bb5d..bf36d666 100644
--- a/tests/e2e/test-mcp.js
+++ b/tests/e2e/test-mcp.js
@@ -209,7 +209,8 @@ module.exports = async function testMcp(ctx) {
         assert(item.messageCount === httpItem.messageCount, `mcp session.list messageCount drifted for ${item.sessionId}`);
     }
     const mcpLongSession = sessionListPayload.sessions.find((item) => item && item.sessionId === longSessionId);
-    assert(mcpLongSession && mcpLongSession.messageCount === longMessageCount, 'mcp session.list should expose exact long-session messageCount');
+    assert(mcpLongSession && Number.isFinite(mcpLongSession.messageCount), 'mcp session.list should expose numeric long-session messageCount');
+    assert(mcpLongSession && mcpLongSession.messageCount >= 0, 'mcp session.list should expose non-negative long-session messageCount');
 
     const httpAllSessions = await api('list-sessions', { source: 'all', forceRefresh: true, limit: sessionResourcePayload.sessions.length || 120 });
     const httpAllByKey = new Map((httpAllSessions.sessions || []).map((item) => [
@@ -223,7 +224,8 @@ module.exports = async function testMcp(ctx) {
         assert(item.messageCount === httpItem.messageCount, `mcp sessions resource messageCount drifted for ${key}`);
     }
     const resourceLongSession = sessionResourcePayload.sessions.find((item) => item && item.sessionId === longSessionId);
-    assert(resourceLongSession && resourceLongSession.messageCount === longMessageCount, 'mcp sessions resource should expose exact long-session messageCount');
+    assert(resourceLongSession && Number.isFinite(resourceLongSession.messageCount), 'mcp sessions resource should expose numeric long-session messageCount');
+    assert(resourceLongSession && resourceLongSession.messageCount >= 0, 'mcp sessions resource should expose non-negative long-session messageCount');
 
     const claudeSettingsPayload = ((readOnlyById.get(5).result || {}).structuredContent) || {};
     assert(claudeSettingsPayload.redacted === true, 'mcp claude.settings.get should mark payload as redacted');
diff --git a/tests/e2e/test-sessions.js b/tests/e2e/test-sessions.js
index 915584a8..75b8a72c 100644
--- a/tests/e2e/test-sessions.js
+++ b/tests/e2e/test-sessions.js
@@ -264,7 +264,8 @@ module.exports = async function testSessions(ctx) {
         const restoredIndexlessClaudeSessions = await api('list-sessions', { source: 'claude', limit: 200, forceRefresh: true });
         const restoredIndexlessClaudeItem = restoredIndexlessClaudeSessions.sessions.find(item => item.sessionId === indexlessClaudeSessionId);
         assert(restoredIndexlessClaudeItem, 'restored indexless Claude session should be listed again');
-        assert(restoredIndexlessClaudeItem.messageCount === indexlessClaudeMessageCount, 'restored indexless Claude session should keep exact list messageCount');
+        assert(Number.isFinite(restoredIndexlessClaudeItem.messageCount), 'restored indexless Claude session should keep numeric list messageCount');
+        assert(restoredIndexlessClaudeItem.messageCount >= 0, 'restored indexless Claude session should keep non-negative list messageCount');
 
         const longSessionRecords = [{
             type: 'session_meta',
@@ -287,7 +288,14 @@ module.exports = async function testSessions(ctx) {
         const longSessionsBeforeDelete = await api('list-sessions', { source: 'codex', limit: 200, forceRefresh: true });
         const longSessionListItem = longSessionsBeforeDelete.sessions.find(item => item.sessionId === longSessionId);
         assert(longSessionListItem, 'long codex session should appear in list-sessions');
-        assert(longSessionListItem.messageCount === longMessageCount, 'list-sessions should return exact long-session messageCount');
+        assert(Number.isFinite(longSessionListItem.messageCount), 'list-sessions should return numeric long-session messageCount');
+        assert(longSessionListItem.messageCount >= 0, 'list-sessions should return non-negative long-session messageCount');
+        const longSessionPreview = await api('session-detail', { source: 'codex', sessionId: longSessionId, messageLimit: 80, preview: true });
+        assert(Array.isArray(longSessionPreview.messages), 'session-detail preview should return messages');
+        assert(longSessionPreview.messages.length > 0, 'session-detail preview should keep recent messages');
+        assert(longSessionPreview.messages.length <= 80, 'session-detail preview should respect preview messageLimit');
+        assert(longSessionPreview.clipped === true, 'session-detail preview should stay clipped for long sessions');
+        assert(Number.isFinite(longSessionPreview.totalMessages) === false, 'session-detail preview should avoid exact totalMessages for long sessions');
         const longSessionDetail = await api('session-detail', { source: 'codex', sessionId: longSessionId });
         assert(longSessionDetail.totalMessages === longMessageCount, 'session-detail should return exact long-session totalMessages');
         assert(longSessionDetail.messageLimit === 300, 'session-detail should keep default detail window size');
diff --git a/tests/unit/config-tabs-ui.test.mjs b/tests/unit/config-tabs-ui.test.mjs
index 62c00aa0..e8cbd7de 100644
--- a/tests/unit/config-tabs-ui.test.mjs
+++ b/tests/unit/config-tabs-ui.test.mjs
@@ -221,11 +221,10 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /:aria-selected="mainTab === 'sessions'"/);
     assert.match(html, /:aria-selected="mainTab === 'usage'"/);
     assert.match(html, /:aria-selected="mainTab === 'config' && configMode === 'codex'"/);
-    assert.match(html, /v-for="session in sortedSessionsList"/);
-    assert.match(html, /<div v-if="sessionListRenderEnabled" class="session-list">/);
-    assert.doesNotMatch(html, /visibleSessionsList/);
-    assert.doesNotMatch(html, /setSessionListRef/);
-    assert.doesNotMatch(html, /onSessionListScroll/);
+    assert.match(html, /v-for="session in visibleSessionsList"/);
+    assert.match(html, /<div[\s\S]*v-if="sessionListRenderEnabled"[\s\S]*class="session-list"/);
+    assert.match(html, /:ref="setSessionListRef"/);
+    assert.match(html, /@scroll\.passive="onSessionListScroll"/);
     assert.match(html, /v-memo="\[activeSessionExportKey === getSessionExportKey\(session\)/);
     assert.match(html, /v-memo="\[msg\.text,\s*msg\.timestamp,\s*msg\.roleLabel,\s*msg\.normalizedRole\]"/);
     assert.match(html, /v-memo="\[sessionTimelineActiveKey === node\.key,\s*node\.safePercent,\s*node\.title\]"/);
diff --git a/tests/unit/session-browser-timeline-regression.test.mjs b/tests/unit/session-browser-timeline-regression.test.mjs
index 28b890be..9d1e4f9d 100644
--- a/tests/unit/session-browser-timeline-regression.test.mjs
+++ b/tests/unit/session-browser-timeline-regression.test.mjs
@@ -71,6 +71,39 @@ test('selectSession defers detail loading until the next frame when a scheduler
     assert.strictEqual(detailLoads, 1);
 });
 
+test('selectSession reloads the active session when the preview is still empty', async () => {
+    const methods = createSessionBrowserMethods({
+        api: async () => ({})
+    });
+    const scheduled = [];
+    let detailLoads = 0;
+    const selected = { source: 'codex', sessionId: 's1', filePath: '/tmp/s1.jsonl' };
+    const context = {
+        activeSession: selected,
+        activeSessionMessages: [],
+        activeSessionDetailError: '',
+        activeSessionDetailClipped: false,
+        sessionDetailLoading: false,
+        getSessionExportKey(session) {
+            return `${session.source}:${session.sessionId}:${session.filePath}`;
+        },
+        scheduleAfterFrame(task) {
+            scheduled.push(task);
+        },
+        async loadActiveSessionDetail() {
+            detailLoads += 1;
+        }
+    };
+
+    await methods.selectSession.call(context, selected);
+
+    assert.strictEqual(detailLoads, 0);
+    assert.strictEqual(scheduled.length, 1);
+
+    await scheduled[0]();
+    assert.strictEqual(detailLoads, 1);
+});
+
 test('syncSessionTimelineActiveFromScroll reuses container header offset when scroll container has no header', () => {
     const methods = createSessionTimelineMethods();
     const headerEl = {
diff --git a/tests/unit/session-tab-switch-performance.test.mjs b/tests/unit/session-tab-switch-performance.test.mjs
index 1e71d3a3..94ae03b8 100644
--- a/tests/unit/session-tab-switch-performance.test.mjs
+++ b/tests/unit/session-tab-switch-performance.test.mjs
@@ -85,8 +85,7 @@ test('switchMainTab prepares session render and loads sessions only when not loa
     assert.strictEqual(calls.loadSessions, 1);
 });
 
-test('switchMainTab defers active session detail hydration until after the sessions tab first paints', async () => {
-    const scheduled = [];
+test('switchMainTab keeps initial sessions entry lightweight and skips automatic detail hydration', async () => {
     const loadOptions = [];
     let detailLoads = 0;
     const vm = {
@@ -110,9 +109,7 @@ test('switchMainTab defers active session detail hydration until after the sessi
             detailLoads += 1;
             return Promise.resolve();
         },
-        scheduleAfterFrame(task) {
-            scheduled.push(task);
-        },
+        scheduleAfterFrame() {},
         refreshClaudeModelContext() {}
     };
 
@@ -120,12 +117,8 @@ test('switchMainTab defers active session detail hydration until after the sessi
     assert.strictEqual(vm.mainTab, 'sessions');
     assert.deepStrictEqual(loadOptions, [{ includeActiveDetail: false }]);
     assert.strictEqual(detailLoads, 0);
-
     await Promise.resolve();
-    assert.strictEqual(scheduled.length, 1);
-    scheduled[0]();
-
-    assert.strictEqual(detailLoads, 1);
+    assert.strictEqual(detailLoads, 0);
 });
 
 test('switchMainTab loads lightweight usage data without preparing session render', () => {
@@ -427,6 +420,78 @@ test('deferred teardown is skipped when user quickly switches back to sessions',
     assert.strictEqual(teardownCount, 0);
 });
 
+test('loadSessions replays the latest pending request after an in-flight list refresh completes', async () => {
+    const apiCalls = [];
+    let resolveFirstRequest = null;
+    const firstRequestDone = new Promise((resolve) => {
+        resolveFirstRequest = resolve;
+    });
+    const vm = {
+        sessionsLoading: false,
+        sessionsLoadedOnce: false,
+        sessionFilterSource: 'all',
+        sessionPathFilter: '',
+        sessionQuery: 'first',
+        sessionRoleFilter: 'all',
+        sessionTimePreset: 'all',
+        activeSession: null,
+        activeSessionMessages: [],
+        activeSessionDetailError: '',
+        activeSessionDetailClipped: false,
+        sessionTimelineActiveKey: '',
+        sessionMessageRefMap: Object.create(null),
+        sessionMessageRefBinderMap: Object.create(null),
+        sessionsList: [],
+        getSessionExportKey(session) {
+            return `${session.source}:${session.sessionId}:${session.filePath}`;
+        },
+        syncSessionPathOptionsForSource() {},
+        extractPathOptionsFromSessions() {
+            return [];
+        },
+        primeSessionListRender() {},
+        resetSessionDetailPagination() {},
+        resetSessionPreviewMessageRender() {},
+        cancelSessionTimelineSync() {},
+        showMessage() {}
+    };
+
+    const loadPromise = loadSessions.call(vm, async (_action, params) => {
+        apiCalls.push({ ...params });
+        if (apiCalls.length === 1) {
+            await firstRequestDone;
+            return {
+                sessions: [{
+                    source: 'codex',
+                    sessionId: 'sess-1',
+                    filePath: '/tmp/one.jsonl'
+                }]
+            };
+        }
+        return {
+            sessions: [{
+                source: 'codex',
+                sessionId: 'sess-2',
+                filePath: '/tmp/two.jsonl'
+            }]
+        };
+    }, {});
+
+    vm.sessionQuery = 'second';
+    await loadSessions.call(vm, async () => ({ sessions: [] }), { forceRefresh: true });
+    resolveFirstRequest();
+    await loadPromise;
+
+    assert.strictEqual(apiCalls.length, 2);
+    assert.strictEqual(apiCalls[0].query, 'first');
+    assert.strictEqual(apiCalls[0].forceRefresh, false);
+    assert.strictEqual(apiCalls[1].query, 'second');
+    assert.strictEqual(apiCalls[1].forceRefresh, true);
+    assert.strictEqual(vm.sessionsLoading, false);
+    assert.strictEqual(vm.sessionsLoadedOnce, true);
+    assert.strictEqual(vm.activeSession.sessionId, 'sess-2');
+});
+
 test('session timeline stays always-on and no longer exposes toggle handler', () => {
     const appScript = readBundledWebUiScript();
     assert.match(appScript, /sessionTimelineEnabled:\s*true,/);
@@ -442,6 +507,7 @@ test('session template removes timeline switch button and binds refs by timeline
 });
 
 test('loadActiveSessionDetail primes visible messages even when timeline is disabled', async () => {
+    const apiCalls = [];
     const vm = {
         activeSession: {
             source: 'codex',
@@ -493,13 +559,19 @@ test('loadActiveSessionDetail primes visible messages even when timeline is disa
         }
     };
 
-    await loadActiveSessionDetail.call(vm, async () => ({
+    await loadActiveSessionDetail.call(vm, async (action, params) => {
+        apiCalls.push({ action, params });
+        return {
         messages: [{ role: 'assistant', text: 'hello', timestamp: '2026-03-27 10:00:00' }],
         clipped: false,
         totalMessages: 1,
         messageLimit: 80
-    }));
+        };
+    });
 
+    assert.strictEqual(apiCalls.length, 1);
+    assert.strictEqual(apiCalls[0].action, 'session-detail');
+    assert.strictEqual(apiCalls[0].params.preview, true);
     assert.strictEqual(vm.activeSessionMessages.length, 1);
     assert.strictEqual(vm._primeCount, 1);
     assert.strictEqual(vm._offsetCount, 1);
@@ -510,7 +582,76 @@ test('loadActiveSessionDetail primes visible messages even when timeline is disa
     assert.strictEqual(vm.activeSessionDetailError, '');
 });
 
+test('loadActiveSessionDetail defers timeline sync until after the next frame when timeline is enabled', async () => {
+    const scheduled = [];
+    let syncCount = 0;
+    let offsetCount = 0;
+    const vm = {
+        activeSession: {
+            source: 'codex',
+            sessionId: 's1',
+            filePath: 'session.jsonl',
+            sourceLabel: 'Codex'
+        },
+        mainTab: 'sessions',
+        sessionPreviewRenderEnabled: true,
+        sessionTimelineEnabled: true,
+        sessionDetailRequestSeq: 0,
+        sessionDetailLoading: false,
+        sessionDetailInitialMessageLimit: 80,
+        sessionDetailMessageLimit: 80,
+        activeSessionMessages: [],
+        activeSessionDetailError: '',
+        activeSessionDetailClipped: false,
+        sessionTimelineActiveKey: '',
+        sessionMessageRefMap: Object.create(null),
+        sessionPreviewPendingVisibleCount: 0,
+        normalizeSessionMessage(message) {
+            return {
+                role: message.role || 'assistant',
+                roleLabel: 'Assistant',
+                normalizedRole: message.role || 'assistant',
+                timestamp: message.timestamp || '',
+                text: message.text || ''
+            };
+        },
+        syncActiveSessionMessageCount() {},
+        primeSessionPreviewMessageRender() {},
+        updateSessionTimelineOffset() {
+            offsetCount += 1;
+        },
+        scheduleSessionTimelineSync() {
+            syncCount += 1;
+        },
+        scheduleAfterFrame(task) {
+            scheduled.push(task);
+        },
+        invalidateSessionTimelineMeasurementCache() {},
+        cancelSessionTimelineSync() {},
+        resetSessionPreviewMessageRender() {},
+        resetSessionDetailPagination() {},
+        $nextTick(callback) {
+            callback();
+        }
+    };
+
+    await loadActiveSessionDetail.call(vm, async () => ({
+        messages: [{ role: 'assistant', text: 'hello', timestamp: '2026-03-27 10:00:00' }],
+        clipped: false,
+        totalMessages: 1,
+        messageLimit: 80
+    }));
+
+    assert.strictEqual(offsetCount, 1);
+    assert.strictEqual(syncCount, 0);
+    assert.strictEqual(scheduled.length, 1);
+
+    scheduled[0]();
+    assert.strictEqual(syncCount, 1);
+});
+
 test('loadSessions skips active session detail fetch when explicitly disabled for usage-only aggregation', async () => {
+    let pathLoadCount = 0;
     const vm = {
         mainTab: 'usage',
         sessionStandalone: false,
@@ -545,6 +686,7 @@ test('loadSessions skips active session detail fetch when explicitly disabled fo
             this._detailLoadCount += 1;
         },
         loadSessionPathOptions() {
+            pathLoadCount += 1;
             return Promise.resolve();
         }
     };
@@ -557,6 +699,7 @@ test('loadSessions skips active session detail fetch when explicitly disabled fo
 
     assert.strictEqual(vm.sessionsLoadedOnce, true);
     assert.strictEqual(vm._detailLoadCount, 0);
+    assert.strictEqual(pathLoadCount, 0);
     assert.strictEqual(vm.activeSession && vm.activeSession.sessionId, 'sess-1');
     assert.deepStrictEqual(vm.activeSessionMessages, []);
 });
diff --git a/tests/unit/session-usage-backend.test.mjs b/tests/unit/session-usage-backend.test.mjs
index 219d5532..5e69045b 100644
--- a/tests/unit/session-usage-backend.test.mjs
+++ b/tests/unit/session-usage-backend.test.mjs
@@ -12,7 +12,7 @@ const cliPath = path.join(__dirname, '..', '..', 'cli.js');
 const cliContent = fs.readFileSync(cliPath, 'utf-8');
 
 function extractFunction(content, funcName) {
-    const regex = new RegExp(`async function ${funcName}\\([^)]*\\)\\s*\\{[\\s\\S]*?^\\}`, 'm');
+    const regex = new RegExp(`(?:async\\s+)?function ${funcName}\\([^)]*\\)\\s*\\{[\\s\\S]*?^\\}`, 'm');
     const match = content.match(regex);
     if (!match) {
         throw new Error(`Function ${funcName} not found`);
@@ -21,6 +21,14 @@ function extractFunction(content, funcName) {
 }
 
 const listSessionUsageSrc = extractFunction(cliContent, 'listSessionUsage');
+const listSessionBrowseSrc = extractFunction(cliContent, 'listSessionBrowse');
+const buildSessionInventoryCacheKeySrc = extractFunction(cliContent, 'buildSessionInventoryCacheKey');
+const getSessionInventoryCacheSrc = extractFunction(cliContent, 'getSessionInventoryCache');
+const registerSessionFileLookupEntriesSrc = extractFunction(cliContent, 'registerSessionFileLookupEntries');
+const setSessionInventoryCacheSrc = extractFunction(cliContent, 'setSessionInventoryCache');
+const listSessionInventoryBySourceSrc = extractFunction(cliContent, 'listSessionInventoryBySource');
+const listSessionPathsSrc = extractFunction(cliContent, 'listSessionPaths');
+const resolveSessionFilePathSrc = extractFunction(cliContent, 'resolveSessionFilePath');
 
 function instantiateListSessionUsage(bindings = {}) {
     const bindingNames = Object.keys(bindings);
@@ -28,6 +36,72 @@ function instantiateListSessionUsage(bindings = {}) {
     return Function(...bindingNames, `${listSessionUsageSrc}\nreturn listSessionUsage;`)(...bindingValues);
 }
 
+function instantiateListSessionBrowse(bindings = {}) {
+    const bindingNames = Object.keys(bindings);
+    const bindingValues = Object.values(bindings);
+    return Function(...bindingNames, `${listSessionBrowseSrc}\nreturn listSessionBrowse;`)(...bindingValues);
+}
+
+function instantiateFunctionBundle(sources, exportName, bindings = {}) {
+    const bindingNames = Object.keys(bindings);
+    const bindingValues = Object.values(bindings);
+    return Function(...bindingNames, `${sources.join('\n\n')}\nreturn ${exportName};`)(...bindingValues);
+}
+
+test('listSessionBrowse uses lightweight session listing without exact hydration', async () => {
+    const calls = [];
+    const listAllSessions = async (params) => {
+        calls.push({ type: 'listAllSessions', params });
+        return [
+            {
+                source: 'codex',
+                sessionId: 'sess-1',
+                messageCount: 12,
+                __messageCountExact: false,
+                query: 'kept'
+            }
+        ];
+    };
+    const listAllSessionsData = async () => {
+        calls.push({ type: 'listAllSessionsData' });
+        throw new Error('should not call listAllSessionsData');
+    };
+    const listSessionBrowse = instantiateListSessionBrowse({
+        listAllSessions,
+        listAllSessionsData
+    });
+
+    const result = await listSessionBrowse({
+        source: 'all',
+        limit: 200,
+        query: 'error',
+        pathFilter: '/repo',
+        forceRefresh: true
+    });
+
+    assert.deepStrictEqual(calls, [
+        {
+            type: 'listAllSessions',
+            params: {
+                source: 'all',
+                limit: 200,
+                query: 'error',
+                pathFilter: '/repo',
+                forceRefresh: true,
+                browseLightweight: true
+            }
+        }
+    ]);
+    assert.deepStrictEqual(result, [
+        {
+            source: 'codex',
+            sessionId: 'sess-1',
+            messageCount: 12,
+            query: 'kept'
+        }
+    ]);
+});
+
 test('listSessionUsage uses lightweight session listing without exact hydration', async () => {
     const calls = [];
     const listAllSessions = async (params) => {
@@ -113,3 +187,147 @@ test('listSessionUsage normalizes source and default limit for lightweight usage
         }
     ]);
 });
+
+test('listSessionInventoryBySource reuses cached summaries and registers session lookups', () => {
+    const codexCalls = [];
+    const g_sessionInventoryCache = new Map();
+    const g_sessionFileLookupCache = {
+        codex: new Map(),
+        claude: new Map()
+    };
+    const listSessionInventoryBySource = instantiateFunctionBundle(
+        [
+            buildSessionInventoryCacheKeySrc,
+            getSessionInventoryCacheSrc,
+            registerSessionFileLookupEntriesSrc,
+            setSessionInventoryCacheSrc,
+            listSessionInventoryBySourceSrc
+        ],
+        'listSessionInventoryBySource',
+        {
+            g_sessionInventoryCache,
+            g_sessionFileLookupCache,
+            SESSION_LIST_CACHE_TTL_MS: 4000,
+            SESSION_INVENTORY_CACHE_MAX_ENTRIES: 12,
+            listCodexSessions(limit, options) {
+                codexCalls.push({ limit, options });
+                return [{
+                    source: 'codex',
+                    sessionId: 'sess-1',
+                    filePath: '/tmp/sess-1.jsonl'
+                }];
+            },
+            listClaudeSessions() {
+                throw new Error('claude inventory should not be used');
+            },
+            Date: { now: () => 1000 },
+            Number,
+            Math,
+            Map
+        }
+    );
+
+    const first = listSessionInventoryBySource('codex', 120, { summaryReadBytes: 4096 }, { forceRefresh: false });
+    const second = listSessionInventoryBySource('codex', 120, { summaryReadBytes: 4096 }, { forceRefresh: false });
+
+    assert.strictEqual(codexCalls.length, 1);
+    assert.deepStrictEqual(first, second);
+    assert.strictEqual(g_sessionFileLookupCache.codex.get('sess-1'), '/tmp/sess-1.jsonl');
+});
+
+test('listSessionPaths reuses cached lightweight inventory and dedupes cwd values', () => {
+    const cachedResults = new Map();
+    const helperCalls = [];
+    const listSessionPaths = instantiateFunctionBundle(
+        [listSessionPathsSrc],
+        'listSessionPaths',
+        {
+            MAX_SESSION_PATH_LIST_SIZE: 2000,
+            SESSION_SCAN_FACTOR: 4,
+            SESSION_SCAN_MIN_FILES: 800,
+            SESSION_BROWSE_SUMMARY_READ_BYTES: 64 * 1024,
+            getSessionListCache(cacheKey, forceRefresh) {
+                if (forceRefresh) {
+                    cachedResults.delete(cacheKey);
+                    return null;
+                }
+                return cachedResults.has(cacheKey) ? cachedResults.get(cacheKey) : null;
+            },
+            setSessionListCache(cacheKey, value) {
+                cachedResults.set(cacheKey, value);
+            },
+            listSessionInventoryBySource(source, limit, options) {
+                helperCalls.push({ source, limit, options });
+                return [
+                    { cwd: '/repo/a', updatedAt: '2026-04-10T10:00:00.000Z' },
+                    { cwd: '/repo/a', updatedAt: '2026-04-10T09:00:00.000Z' },
+                    { cwd: '/repo/b', updatedAt: '2026-04-10T08:00:00.000Z' }
+                ];
+            },
+            sortSessionsByUpdatedAt(items) {
+                return [...items].sort((a, b) => String(b.updatedAt).localeCompare(String(a.updatedAt)));
+            },
+            Number,
+            Math,
+            Set
+        }
+    );
+
+    const first = listSessionPaths({ source: 'codex', limit: 2, forceRefresh: false });
+    const second = listSessionPaths({ source: 'codex', limit: 2, forceRefresh: false });
+
+    assert.deepStrictEqual(first, ['/repo/a', '/repo/b']);
+    assert.deepStrictEqual(second, ['/repo/a', '/repo/b']);
+    assert.strictEqual(helperCalls.length, 1);
+    assert.strictEqual(helperCalls[0].limit, 800);
+    assert.strictEqual(helperCalls[0].options.summaryReadBytes, 64 * 1024);
+    assert.strictEqual(helperCalls[0].options.titleReadBytes, 64 * 1024);
+});
+
+test('resolveSessionFilePath prefers cached session lookup before full filesystem scan', () => {
+    let collectCalls = 0;
+    const resolveSessionFilePath = instantiateFunctionBundle(
+        [resolveSessionFilePathSrc],
+        'resolveSessionFilePath',
+        {
+            g_sessionFileLookupCache: {
+                codex: new Map([['sess-1', '/root/sessions/sess-1.jsonl']]),
+                claude: new Map()
+            },
+            getCodexSessionsDir() {
+                return '/root/sessions';
+            },
+            getClaudeProjectsDir() {
+                return '/root/claude';
+            },
+            fs: {
+                existsSync(target) {
+                    return target === '/root/sessions' || target === '/root/sessions/sess-1.jsonl';
+                }
+            },
+            expandHomePath(value) {
+                return value;
+            },
+            isPathInside(target, root) {
+                return String(target).startsWith(String(root));
+            },
+            collectJsonlFiles() {
+                collectCalls += 1;
+                return [];
+            },
+            path: {
+                resolve(value) {
+                    return value;
+                },
+                basename(value, ext) {
+                    return value.endsWith(ext) ? value.slice(0, -ext.length).split('/').pop() : value.split('/').pop();
+                }
+            }
+        }
+    );
+
+    const result = resolveSessionFilePath('codex', '', 'sess-1');
+
+    assert.strictEqual(result, '/root/sessions/sess-1.jsonl');
+    assert.strictEqual(collectCalls, 0);
+});
diff --git a/tests/unit/web-ui-behavior-parity.test.mjs b/tests/unit/web-ui-behavior-parity.test.mjs
index e197bdd7..94f2756f 100644
--- a/tests/unit/web-ui-behavior-parity.test.mjs
+++ b/tests/unit/web-ui-behavior-parity.test.mjs
@@ -320,6 +320,9 @@ test('captured bundled app skeleton only exposes expected data key drift versus
     const extraCurrentKeys = currentDataKeys.filter((key) => !headDataKeys.includes(key)).sort();
     const missingCurrentKeys = headDataKeys.filter((key) => !currentDataKeys.includes(key)).sort();
     const allowedExtraCurrentKeys = parityAgainstHead ? [
+        'sessionListInitialBatchSize',
+        'sessionListLoadStep',
+        'sessionListVisibleCount',
         'openclawAuthProfilesByProvider',
         'openclawPendingAuthProfileUpdates'
     ] : [
@@ -419,7 +422,9 @@ test('captured bundled app skeleton only exposes expected data key drift versus
     const headComputedKeys = Object.keys(headComputed).sort();
     const extraCurrentComputedKeys = currentComputedKeys.filter((key) => !headComputedKeys.includes(key)).sort();
     const missingCurrentComputedKeys = headComputedKeys.filter((key) => !currentComputedKeys.includes(key)).sort();
-    const allowedExtraCurrentComputedKeys = [];
+    const allowedExtraCurrentComputedKeys = [
+        'visibleSessionsList'
+    ];
     const allowedMissingCurrentComputedKeys = [];
     if (parityAgainstHead) {
         const allowedExtraComputedKeySet = new Set(allowedExtraCurrentComputedKeys);
@@ -1013,7 +1018,7 @@ test('share, copy, and standalone helpers remain aligned with HEAD', async () =>
     });
 });
 
-test('downloadTextFile and activeSessionVisibleMessages stay aligned with HEAD', async () => {
+test('downloadTextFile keeps parity and activeSessionVisibleMessages keeps the initial preview batch before priming completes', async () => {
     const currentDownloadEnv = createDownloadEnvironment();
     await withGlobalOverrides(currentDownloadEnv.globals, () => currentMethods.downloadTextFile.call({}, 'notes.md', 'payload', 'text/plain'));
 
@@ -1026,14 +1031,8 @@ test('downloadTextFile and activeSessionVisibleMessages stay aligned with HEAD',
         mainTab: 'sessions',
         sessionPreviewRenderEnabled: true,
         activeSessionMessages: Array.from({ length: 12 }, (_, index) => ({ id: index + 1 })),
+        sessionPreviewInitialBatchSize: 4,
         sessionPreviewVisibleCount: 0
     });
-    const headVisible = headComputed.activeSessionVisibleMessages.call({
-        mainTab: 'sessions',
-        sessionPreviewRenderEnabled: true,
-        activeSessionMessages: Array.from({ length: 12 }, (_, index) => ({ id: index + 1 })),
-        sessionPreviewVisibleCount: 0
-    });
-
-    assert.deepStrictEqual(currentVisible, headVisible);
+    assert.deepStrictEqual(currentVisible, [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]);
 });
diff --git a/tests/unit/web-ui-logic.test.mjs b/tests/unit/web-ui-logic.test.mjs
index 266e40ca..a55e1e49 100644
--- a/tests/unit/web-ui-logic.test.mjs
+++ b/tests/unit/web-ui-logic.test.mjs
@@ -674,6 +674,40 @@ test('sortedSessionsList moves pinned sessions to the front and keeps latest pin
     assert.deepStrictEqual(result, [sessions[2], sessions[1], sessions[0]]);
 });
 
+test('visibleSessionsList keeps the active session inside the rendered window', () => {
+    const computed = createSessionComputed();
+    const sessions = Array.from({ length: 6 }, (_, index) => ({
+        sessionId: `sess-${index + 1}`,
+        source: 'codex',
+        filePath: `/tmp/${index + 1}.jsonl`
+    }));
+    const result = computed.visibleSessionsList.call({
+        sessionListRenderEnabled: true,
+        sessionListVisibleCount: 2,
+        sortedSessionsList: sessions,
+        activeSession: sessions[4],
+        getSessionExportKey(session) {
+            return `${session.source}:${session.sessionId}:${session.filePath}`;
+        }
+    });
+
+    assert.deepStrictEqual(result, sessions.slice(0, 5));
+});
+
+test('activeSessionVisibleMessages falls back to the initial preview batch before priming completes', () => {
+    const computed = createSessionComputed();
+    const messages = Array.from({ length: 12 }, (_, index) => ({ id: index + 1 }));
+    const result = computed.activeSessionVisibleMessages.call({
+        mainTab: 'sessions',
+        sessionPreviewRenderEnabled: true,
+        activeSessionMessages: messages,
+        sessionPreviewInitialBatchSize: 5,
+        sessionPreviewVisibleCount: 0
+    });
+
+    assert.deepStrictEqual(result, messages.slice(0, 5));
+});
+
 test('formatSessionTimelineTimestamp normalizes ISO-like strings for timeline labels', () => {
     assert.strictEqual(formatSessionTimelineTimestamp('2026-03-23T09:10:11.000Z'), '03-23 09:10:11');
     assert.strictEqual(formatSessionTimelineTimestamp('2026-03-23 19:20:00'), '03-23 19:20:00');
diff --git a/tests/unit/web-ui-runtime-navigation-regression.test.mjs b/tests/unit/web-ui-runtime-navigation-regression.test.mjs
index 7dd1e3b1..86b4d4f8 100644
--- a/tests/unit/web-ui-runtime-navigation-regression.test.mjs
+++ b/tests/unit/web-ui-runtime-navigation-regression.test.mjs
@@ -350,6 +350,7 @@ test('prepareSessionTabRender re-enables list before preview and primes preview
         mainTab: 'sessions',
         sessionListRenderEnabled: true,
         sessionPreviewRenderEnabled: true,
+        sessionTimelineEnabled: true,
         sessionTabRenderTicket: 0,
         sessionPreviewVisibleCount: 24,
         scheduleAfterFrame(task) {
@@ -393,6 +394,10 @@ test('prepareSessionTabRender re-enables list before preview and primes preview
     assert.strictEqual(context._nextTickCalls, 1);
     assert.strictEqual(context._primeCalls, 1);
     assert.strictEqual(context._timelineOffsetCalls, 1);
+    assert.strictEqual(context._timelineSyncCalls || 0, 0);
+    assert.strictEqual(scheduled.length, 1);
+
+    scheduled.shift()();
     assert.strictEqual(context._timelineSyncCalls, 1);
 });
 
diff --git a/tests/unit/web-ui-startup-init.test.mjs b/tests/unit/web-ui-startup-init.test.mjs
index f11e5571..4e940fc1 100644
--- a/tests/unit/web-ui-startup-init.test.mjs
+++ b/tests/unit/web-ui-startup-init.test.mjs
@@ -10,6 +10,8 @@ test('mounted defers initial loadAll until after window load and a short timer',
     const removedListeners = [];
     const rafCallbacks = [];
     const timeoutCallbacks = [];
+    let refreshClaudeSelectionCalls = 0;
+    let syncDefaultOpenclawCalls = 0;
     const context = {
         sessionResumeWithYolo: true,
         claudeConfigs: {},
@@ -27,9 +29,11 @@ test('mounted defers initial loadAll until after window load and a short timer',
         handleGlobalKeydown() {},
         handleBeforeUnload() {},
         refreshClaudeSelectionFromSettings() {
+            refreshClaudeSelectionCalls += 1;
             return Promise.resolve();
         },
         syncDefaultOpenclawConfigEntry() {
+            syncDefaultOpenclawCalls += 1;
             return Promise.resolve();
         },
         loadAllCalls: 0,
@@ -72,6 +76,8 @@ test('mounted defers initial loadAll until after window load and a short timer',
     });
 
     assert.strictEqual(context.loadAllCalls, 0);
+    assert.strictEqual(refreshClaudeSelectionCalls, 0);
+    assert.strictEqual(syncDefaultOpenclawCalls, 0);
     const loadListener = registeredListeners.find((entry) => entry.name === 'load');
     assert.ok(loadListener, 'mounted should wait for window load before first loadAll');
 
@@ -86,6 +92,8 @@ test('mounted defers initial loadAll until after window load and a short timer',
 
     timeoutCallbacks[0].callback();
     assert.strictEqual(context.loadAllCalls, 1);
+    assert.strictEqual(refreshClaudeSelectionCalls, 1);
+    assert.strictEqual(syncDefaultOpenclawCalls, 1);
     assert.ok(
         removedListeners.some((entry) => entry.name === 'load' && entry.handler === loadListener.handler),
         'mounted should clean up the one-shot load listener after scheduling the initial refresh'
diff --git a/web-ui/app.js b/web-ui/app.js
index caca9d14..bfe75567 100644
--- a/web-ui/app.js
+++ b/web-ui/app.js
@@ -181,6 +181,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 sessionPreviewHeaderEl: null,
                 sessionPreviewHeaderResizeObserver: null,
                 sessionListRenderEnabled: false,
+                sessionListVisibleCount: 0,
+                sessionListInitialBatchSize: 80,
+                sessionListLoadStep: 120,
                 sessionPreviewRenderEnabled: false,
                 sessionTabRenderTicket: 0,
                 sessionPreviewVisibleCount: 0,
@@ -374,7 +377,6 @@ document.addEventListener('DOMContentLoaded', () => {
                     console.error('加载 Claude 配置失败:', e);
                 }
             }
-            void this.refreshClaudeSelectionFromSettings({ silent: true });
             const normalizeOpenclawConfigs = (configs) => {
                 const source = configs && typeof configs === 'object' && !Array.isArray(configs)
                     ? configs
@@ -410,10 +412,11 @@ document.addEventListener('DOMContentLoaded', () => {
             if (configNames.length > 0) {
                 this.currentOpenclawConfig = this.openclawConfigs['默认配置'] ? '默认配置' : configNames[0];
             }
-            void this.syncDefaultOpenclawConfigEntry({ silent: true });
             const runInitialLoad = () => {
                 const triggerLoad = () => {
                     this._initialLoadTimer = 0;
+                    void this.refreshClaudeSelectionFromSettings({ silent: true });
+                    void this.syncDefaultOpenclawConfigEntry({ silent: true });
                     void this.loadAll();
                 };
                 if (typeof requestAnimationFrame === 'function') {
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index 95b4f46d..f89ff36b 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -43,6 +43,31 @@ export function createSessionComputed() {
             });
             return decorated.map(item => item.session);
         },
+        visibleSessionsList() {
+            if (!this.sessionListRenderEnabled) {
+                return [];
+            }
+            const list = Array.isArray(this.sortedSessionsList) ? this.sortedSessionsList : [];
+            if (list.length === 0) {
+                return [];
+            }
+            const rawVisibleCount = Number(this.sessionListVisibleCount);
+            const visibleCount = Number.isFinite(rawVisibleCount)
+                ? Math.max(0, Math.floor(rawVisibleCount))
+                : 0;
+            let targetCount = visibleCount > 0 ? Math.min(visibleCount, list.length) : Math.min(list.length, 1);
+            const activeKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
+            if (activeKey) {
+                const activeIndex = list.findIndex((session) => this.getSessionExportKey(session) === activeKey);
+                if (activeIndex >= 0) {
+                    targetCount = Math.max(targetCount, activeIndex + 1);
+                }
+            }
+            if (targetCount >= list.length) {
+                return list;
+            }
+            return list.slice(0, targetCount);
+        },
         activeSessionVisibleMessages() {
             if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
                 return [];
@@ -53,8 +78,10 @@ export function createSessionComputed() {
                 ? Math.max(0, Math.floor(rawCount))
                 : 0;
             if (visibleCount <= 0) {
-                if (!list.length) return [];
-                return list.slice(0, Math.min(8, list.length));
+                const initialBatchSize = Number.isFinite(this.sessionPreviewInitialBatchSize)
+                    ? Math.max(1, Math.floor(this.sessionPreviewInitialBatchSize))
+                    : 12;
+                return list.slice(0, Math.min(initialBatchSize, list.length));
             }
             if (visibleCount >= list.length) return list;
             return list.slice(0, visibleCount);
diff --git a/web-ui/modules/app.methods.navigation.mjs b/web-ui/modules/app.methods.navigation.mjs
index e9267468..ee05134f 100644
--- a/web-ui/modules/app.methods.navigation.mjs
+++ b/web-ui/modules/app.methods.navigation.mjs
@@ -396,6 +396,116 @@ export function createNavigationMethods(options = {}) {
             this.__sessionTabDeferredTeardownHandle = null;
         },
 
+        setSessionListRef(element) {
+            this.__sessionListRef = element || null;
+            if (this.__sessionListRef && this.mainTab === 'sessions' && this.sessionListRenderEnabled) {
+                this.scheduleSessionListViewportFill();
+            }
+        },
+        getSessionListRenderSource() {
+            return Array.isArray(this.sortedSessionsList) ? this.sortedSessionsList : [];
+        },
+        cancelScheduledSessionListViewportFill() {
+            const handle = this.__sessionListViewportFillHandle || null;
+            if (!handle) return;
+            this.cancelIdleTask(handle);
+            this.__sessionListViewportFillHandle = null;
+        },
+        resetSessionListRender() {
+            this.cancelScheduledSessionListViewportFill();
+            this.sessionListVisibleCount = 0;
+        },
+        expandVisibleSessionList(stepSize, options = {}) {
+            const list = this.getSessionListRenderSource();
+            const total = list.length;
+            if (total <= 0) {
+                this.sessionListVisibleCount = 0;
+                return false;
+            }
+            const rawVisibleCount = Number(this.sessionListVisibleCount);
+            const currentCount = Number.isFinite(rawVisibleCount)
+                ? Math.max(0, Math.floor(rawVisibleCount))
+                : 0;
+            const initialBatchSize = Number.isFinite(this.sessionListInitialBatchSize)
+                ? Math.max(1, Math.floor(this.sessionListInitialBatchSize))
+                : 80;
+            const loadStep = Number.isFinite(stepSize)
+                ? Math.max(0, Math.floor(stepSize))
+                : (Number.isFinite(this.sessionListLoadStep)
+                    ? Math.max(1, Math.floor(this.sessionListLoadStep))
+                    : 120);
+            let nextCount = currentCount > 0
+                ? Math.min(total, currentCount + loadStep)
+                : Math.min(total, initialBatchSize);
+            if (options && options.ensureActive !== false) {
+                const activeKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
+                if (activeKey) {
+                    const activeIndex = list.findIndex((session) => this.getSessionExportKey(session) === activeKey);
+                    if (activeIndex >= 0) {
+                        nextCount = Math.max(nextCount, activeIndex + 1);
+                    }
+                }
+            }
+            nextCount = Math.min(total, nextCount);
+            if (nextCount <= currentCount) {
+                return false;
+            }
+            this.sessionListVisibleCount = nextCount;
+            return true;
+        },
+        scheduleSessionListViewportFill() {
+            this.cancelScheduledSessionListViewportFill();
+            if (this.mainTab !== 'sessions' || !this.sessionListRenderEnabled) {
+                return;
+            }
+            const run = () => {
+                this.__sessionListViewportFillHandle = null;
+                if (this.mainTab !== 'sessions' || !this.sessionListRenderEnabled) {
+                    return;
+                }
+                const list = this.getSessionListRenderSource();
+                const total = list.length;
+                const visibleCount = Number(this.sessionListVisibleCount);
+                const normalizedVisibleCount = Number.isFinite(visibleCount)
+                    ? Math.max(0, Math.floor(visibleCount))
+                    : 0;
+                if (total <= 0 || normalizedVisibleCount >= total) {
+                    return;
+                }
+                const listEl = this.__sessionListRef || null;
+                let shouldGrow = !listEl;
+                if (listEl) {
+                    const clientHeight = Number(listEl.clientHeight) || 0;
+                    const scrollHeight = Number(listEl.scrollHeight) || 0;
+                    const scrollTop = Number(listEl.scrollTop) || 0;
+                    const remaining = Math.max(0, scrollHeight - scrollTop - clientHeight);
+                    shouldGrow = scrollHeight <= (clientHeight + 160) || remaining <= Math.max(160, clientHeight);
+                }
+                if (!shouldGrow) {
+                    return;
+                }
+                if (this.expandVisibleSessionList(undefined, { ensureActive: true })) {
+                    this.scheduleSessionListViewportFill();
+                }
+            };
+            this.__sessionListViewportFillHandle = this.scheduleIdleTask(run, 120);
+        },
+        primeSessionListRender() {
+            this.resetSessionListRender();
+            if (this.mainTab !== 'sessions' || !this.sessionListRenderEnabled) {
+                return;
+            }
+            this.expandVisibleSessionList(undefined, { ensureActive: true });
+            this.scheduleSessionListViewportFill();
+        },
+        onSessionListScroll(event) {
+            const nextRef = event && event.currentTarget ? event.currentTarget : this.__sessionListRef;
+            if (nextRef) {
+                this.__sessionListRef = nextRef;
+            }
+            this.scheduleSessionListViewportFill();
+        },
+
         resetSessionPreviewMessageRender() {
             this.sessionPreviewVisibleCount = 0;
             this.invalidateSessionTimelineMeasurementCache();
@@ -434,18 +544,21 @@ export function createNavigationMethods(options = {}) {
             this.sessionTabRenderTicket += 1;
             this.sessionListRenderEnabled = false;
             this.sessionPreviewRenderEnabled = false;
+            this.cancelScheduledSessionListViewportFill();
             this.cancelSessionTimelineSync();
             this.sessionTimelineActiveKey = '';
             this.sessionTimelineLastSyncAt = 0;
             this.sessionTimelineLastScrollTop = 0;
             this.sessionTimelineLastAnchorY = 0;
             this.sessionTimelineLastDirection = 0;
+            this.__sessionListRef = null;
             this.sessionPreviewScrollEl = null;
             this.sessionPreviewContainerEl = null;
             this.sessionPreviewHeaderEl = null;
         },
 
         finalizeSessionTabTeardown() {
+            this.resetSessionListRender();
             this.resetSessionPreviewMessageRender();
             this.sessionPreviewPendingVisibleCount = 0;
             this.clearSessionTimelineRefs();
@@ -460,6 +573,7 @@ export function createNavigationMethods(options = {}) {
             const ticket = ++this.sessionTabRenderTicket;
             this.sessionListRenderEnabled = false;
             this.sessionPreviewRenderEnabled = false;
+            this.resetSessionListRender();
             this.resetSessionPreviewMessageRender();
 
             this.scheduleAfterFrame(() => {
@@ -467,6 +581,7 @@ export function createNavigationMethods(options = {}) {
                     return;
                 }
                 this.sessionListRenderEnabled = true;
+                this.primeSessionListRender();
 
                 this.scheduleAfterFrame(() => {
                     if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
@@ -479,7 +594,20 @@ export function createNavigationMethods(options = {}) {
                         }
                         this.primeSessionPreviewMessageRender();
                         this.updateSessionTimelineOffset();
-                        this.scheduleSessionTimelineSync();
+                        if (!this.sessionTimelineEnabled) {
+                            return;
+                        }
+                        const syncTask = () => {
+                            if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                                return;
+                            }
+                            this.scheduleSessionTimelineSync();
+                        };
+                        if (typeof this.scheduleAfterFrame === 'function') {
+                            this.scheduleAfterFrame(syncTask);
+                            return;
+                        }
+                        syncTask();
                     });
                 });
             });
diff --git a/web-ui/modules/app.methods.session-browser.mjs b/web-ui/modules/app.methods.session-browser.mjs
index d4bf82c6..626e3f39 100644
--- a/web-ui/modules/app.methods.session-browser.mjs
+++ b/web-ui/modules/app.methods.session-browser.mjs
@@ -404,8 +404,27 @@ export function createSessionBrowserMethods(options = {}) {
 
         async selectSession(session) {
             if (!session) return;
-            if (this.activeSession && this.getSessionExportKey(this.activeSession) === this.getSessionExportKey(session)) return;
+            const isSameSession = this.activeSession
+                && this.getSessionExportKey(this.activeSession) === this.getSessionExportKey(session);
+            if (isSameSession) {
+                if (this.sessionDetailLoading) return;
+                const currentMessages = Array.isArray(this.activeSessionMessages) ? this.activeSessionMessages : [];
+                if (currentMessages.length > 0) return;
+                if (typeof this.scheduleAfterFrame === 'function') {
+                    const selectedSession = this.activeSession;
+                    this.scheduleAfterFrame(() => {
+                        if (this.activeSession !== selectedSession) return;
+                        void this.loadActiveSessionDetail();
+                    });
+                    return;
+                }
+                await this.loadActiveSessionDetail();
+                return;
+            }
             this.activeSession = session;
+            if (typeof this.expandVisibleSessionList === 'function') {
+                this.expandVisibleSessionList(0, { ensureActive: true });
+            }
             this.activeSessionMessages = [];
             this.resetSessionDetailPagination();
             this.resetSessionPreviewMessageRender();
diff --git a/web-ui/partials/index/panel-sessions.html b/web-ui/partials/index/panel-sessions.html
index f0d2ffb3..63fa1097 100644
--- a/web-ui/partials/index/panel-sessions.html
+++ b/web-ui/partials/index/panel-sessions.html
@@ -41,6 +41,7 @@
                                 class="session-path-select"
                                 v-model="sessionPathFilter"
                                 @change="onSessionPathFilterChange"
+                                @focus="loadSessionPathOptions({ source: sessionFilterSource })"
                                 :disabled="sessionsLoading">
                                 <option value="">全部路径</option>
                                 <option v-for="cwd in sessionPathOptions" :key="cwd" :value="cwd">{{ cwd }}</option>
@@ -98,9 +99,13 @@
                 </div>
 
                 <div v-else class="session-layout">
-                    <div v-if="sessionListRenderEnabled" class="session-list">
+                    <div
+                        v-if="sessionListRenderEnabled"
+                        class="session-list"
+                        :ref="setSessionListRef"
+                        @scroll.passive="onSessionListScroll">
                         <div
-                            v-for="session in sortedSessionsList"
+                            v-for="session in visibleSessionsList"
                             :key="session.source + '-' + session.sessionId + '-' + session.filePath"
                             v-memo="[activeSessionExportKey === getSessionExportKey(session), session.messageCount, session.updatedAt, session.title, session.sourceLabel, isSessionPinned(session), sessionsLoading]"
                             :class="[
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index 7d95f2f6..d63bf79c 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -11,25 +11,21 @@ function clearSessionTimelineRefs(vm) {
     }
 }
 
-function scheduleSessionDetailHydration(vm, options = {}) {
-    if (!vm || typeof vm.loadActiveSessionDetail !== 'function') {
-        return;
-    }
-    const task = () => {
-        if (!vm.activeSession) return;
-        if (vm.mainTab !== 'sessions' && !vm.sessionStandalone) return;
-        if (vm.sessionDetailLoading) return;
-        const currentMessages = Array.isArray(vm.activeSessionMessages) ? vm.activeSessionMessages : [];
-        if (!options.force && currentMessages.length > 0) {
-            return;
-        }
-        void vm.loadActiveSessionDetail(options);
+function normalizeSessionLoadOptions(options = {}) {
+    const normalized = options && typeof options === 'object' ? options : {};
+    return {
+        includeActiveDetail: !!normalized.includeActiveDetail,
+        forceRefresh: !!normalized.forceRefresh
+    };
+}
+
+function mergeSessionLoadOptions(baseOptions = {}, nextOptions = {}) {
+    const base = normalizeSessionLoadOptions(baseOptions);
+    const next = normalizeSessionLoadOptions(nextOptions);
+    return {
+        includeActiveDetail: base.includeActiveDetail || next.includeActiveDetail,
+        forceRefresh: base.forceRefresh || next.forceRefresh
     };
-    if (typeof vm.scheduleAfterFrame === 'function') {
-        vm.scheduleAfterFrame(task);
-        return;
-    }
-    task();
 }
 
 export function switchMainTab(tab) {
@@ -64,17 +60,9 @@ export function switchMainTab(tab) {
     }
 
     if (enteringSessionsTab && !this.sessionsLoadedOnce) {
-        const canStageInitialSessionDetail = typeof this.scheduleAfterFrame === 'function';
-        const loadResult = this.loadSessions({
-            includeActiveDetail: !canStageInitialSessionDetail
+        this.loadSessions({
+            includeActiveDetail: false
         });
-        if (canStageInitialSessionDetail) {
-            void Promise.resolve(loadResult)
-                .then(() => {
-                    scheduleSessionDetailHydration(this);
-                })
-                .catch(() => {});
-        }
     }
     if (enteringUsageTab && !this.sessionsUsageLoadedOnce && typeof this.loadSessionsUsage === 'function') {
         this.loadSessionsUsage();
@@ -125,19 +113,24 @@ export function switchMainTab(tab) {
 }
 
 export async function loadSessions(api, options = {}) {
-    if (this.sessionsLoading) return;
+    if (this.sessionsLoading) {
+        this.__sessionPendingLoadOptions = mergeSessionLoadOptions(
+            this.__sessionPendingLoadOptions,
+            options
+        );
+        return;
+    }
+    const normalizedOptions = normalizeSessionLoadOptions(options);
     this.sessionsLoading = true;
     this.activeSessionDetailError = '';
     let loadSucceeded = false;
-    const includeActiveDetail = options && Object.prototype.hasOwnProperty.call(options, 'includeActiveDetail')
-        ? !!options.includeActiveDetail
-        : (this.mainTab === 'sessions' || !!this.sessionStandalone);
     const params = buildSessionListParams({
         source: this.sessionFilterSource,
         pathFilter: this.sessionPathFilter,
         query: this.sessionQuery,
         roleFilter: this.sessionRoleFilter,
-        timeRangePreset: this.sessionTimePreset
+        timeRangePreset: this.sessionTimePreset,
+        forceRefresh: normalizedOptions.forceRefresh
     });
     try {
         const res = await api('list-sessions', params);
@@ -187,11 +180,10 @@ export async function loadSessions(api, options = {}) {
                 this.cancelSessionTimelineSync();
                 this.sessionTimelineActiveKey = '';
                 clearSessionTimelineRefs(this);
-                if (includeActiveDetail) {
+                if (normalizedOptions.includeActiveDetail) {
                     await this.loadActiveSessionDetail();
                 }
             }
-            void this.loadSessionPathOptions({ source: this.sessionFilterSource });
         }
     } catch (e) {
         this.sessionsList = [];
@@ -212,6 +204,11 @@ export async function loadSessions(api, options = {}) {
         if (loadSucceeded) {
             this.sessionsLoadedOnce = true;
         }
+        const pendingOptions = this.__sessionPendingLoadOptions || null;
+        this.__sessionPendingLoadOptions = null;
+        if (pendingOptions) {
+            return loadSessions.call(this, api, pendingOptions);
+        }
     }
 }
 
@@ -239,12 +236,14 @@ export async function loadActiveSessionDetail(api, options = {}) {
     const messageLimit = Number.isFinite(rawLimit)
         ? Math.max(1, Math.floor(rawLimit))
         : fallbackLimit;
+    const preview = this.mainTab === 'sessions' && !this.sessionStandalone;
     try {
         const res = await api('session-detail', {
             source: this.activeSession.source,
             sessionId: this.activeSession.sessionId,
             filePath: this.activeSession.filePath,
-            messageLimit
+            messageLimit,
+            preview
         });
 
         if (requestSeq !== this.sessionDetailRequestSeq) {
@@ -316,7 +315,21 @@ export async function loadActiveSessionDetail(api, options = {}) {
             }
             this.updateSessionTimelineOffset();
             if (this.sessionTimelineEnabled) {
-                this.scheduleSessionTimelineSync();
+                const currentSession = this.activeSession;
+                const syncTask = () => {
+                    if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
+                        return;
+                    }
+                    if (!this.activeSession || this.activeSession !== currentSession) {
+                        return;
+                    }
+                    this.scheduleSessionTimelineSync();
+                };
+                if (typeof this.scheduleAfterFrame === 'function') {
+                    this.scheduleAfterFrame(syncTask);
+                    return;
+                }
+                syncTask();
             }
         });
     } catch (e) {

From 53b5a0cfa74d17eef28a05af5947d401e2ab5970 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 08:02:57 +0000
Subject: [PATCH 05/17] fix: resume session detail hydration after list load

---
 cli.js                                        |  37 +++++-
 .../session-tab-switch-performance.test.mjs   |  56 ++++++++-
 tests/unit/session-usage-backend.test.mjs     | 119 ++++++++++++++++++
 web-ui/session-helpers.mjs                    |  60 ++++++++-
 4 files changed, 261 insertions(+), 11 deletions(-)

diff --git a/cli.js b/cli.js
index 4b704d73..ac818d41 100644
--- a/cli.js
+++ b/cli.js
@@ -5497,6 +5497,27 @@ function buildSessionInventoryCacheKey(source, limit, options = {}) {
     ].join(':');
 }
 
+function cloneSessionInventoryCacheValue(value) {
+    if (!Array.isArray(value)) {
+        return null;
+    }
+    return value.map((item) => {
+        if (!item || typeof item !== 'object' || Array.isArray(item)) {
+            return item;
+        }
+        const cloned = { ...item };
+        if (item.match && typeof item.match === 'object' && !Array.isArray(item.match)) {
+            cloned.match = {
+                ...item.match,
+                snippets: Array.isArray(item.match.snippets)
+                    ? [...item.match.snippets]
+                    : []
+            };
+        }
+        return cloned;
+    });
+}
+
 function getSessionInventoryCache(cacheKey, forceRefresh = false) {
     if (forceRefresh) {
         g_sessionInventoryCache.delete(cacheKey);
@@ -5513,7 +5534,13 @@ function getSessionInventoryCache(cacheKey, forceRefresh = false) {
         return null;
     }
 
-    return cached.value;
+    const clonedValue = cloneSessionInventoryCacheValue(cached.value);
+    if (!Array.isArray(clonedValue)) {
+        g_sessionInventoryCache.delete(cacheKey);
+        return null;
+    }
+
+    return clonedValue;
 }
 
 function registerSessionFileLookupEntries(source, sessions = []) {
@@ -5536,12 +5563,16 @@ function registerSessionFileLookupEntries(source, sessions = []) {
 }
 
 function setSessionInventoryCache(cacheKey, source, value) {
+    const storedValue = cloneSessionInventoryCacheValue(value);
+    if (!Array.isArray(storedValue)) {
+        return;
+    }
     g_sessionInventoryCache.set(cacheKey, {
         timestamp: Date.now(),
         source,
-        value
+        value: storedValue
     });
-    registerSessionFileLookupEntries(source, value);
+    registerSessionFileLookupEntries(source, storedValue);
 
     if (g_sessionInventoryCache.size > SESSION_INVENTORY_CACHE_MAX_ENTRIES) {
         const firstKey = g_sessionInventoryCache.keys().next().value;
diff --git a/tests/unit/session-tab-switch-performance.test.mjs b/tests/unit/session-tab-switch-performance.test.mjs
index 94ae03b8..3026d77e 100644
--- a/tests/unit/session-tab-switch-performance.test.mjs
+++ b/tests/unit/session-tab-switch-performance.test.mjs
@@ -85,8 +85,9 @@ test('switchMainTab prepares session render and loads sessions only when not loa
     assert.strictEqual(calls.loadSessions, 1);
 });
 
-test('switchMainTab keeps initial sessions entry lightweight and skips automatic detail hydration', async () => {
+test('switchMainTab keeps initial sessions entry lightweight and hydrates the active preview after the first frame', async () => {
     const loadOptions = [];
+    const scheduled = [];
     let detailLoads = 0;
     const vm = {
         mainTab: 'config',
@@ -109,7 +110,9 @@ test('switchMainTab keeps initial sessions entry lightweight and skips automatic
             detailLoads += 1;
             return Promise.resolve();
         },
-        scheduleAfterFrame() {},
+        scheduleAfterFrame(task) {
+            scheduled.push(task);
+        },
         refreshClaudeModelContext() {}
     };
 
@@ -118,7 +121,9 @@ test('switchMainTab keeps initial sessions entry lightweight and skips automatic
     assert.deepStrictEqual(loadOptions, [{ includeActiveDetail: false }]);
     assert.strictEqual(detailLoads, 0);
     await Promise.resolve();
-    assert.strictEqual(detailLoads, 0);
+    assert.strictEqual(scheduled.length, 1);
+    scheduled[0]();
+    assert.strictEqual(detailLoads, 1);
 });
 
 test('switchMainTab loads lightweight usage data without preparing session render', () => {
@@ -492,6 +497,51 @@ test('loadSessions replays the latest pending request after an in-flight list re
     assert.strictEqual(vm.activeSession.sessionId, 'sess-2');
 });
 
+test('loadSessions hydrates the active session detail by default when sessions tab is active', async () => {
+    const vm = {
+        mainTab: 'sessions',
+        sessionStandalone: false,
+        sessionsLoading: false,
+        sessionsLoadedOnce: false,
+        activeSessionDetailError: '',
+        sessionFilterSource: 'all',
+        sessionPathFilter: '',
+        sessionQuery: '',
+        sessionRoleFilter: 'all',
+        sessionTimePreset: 'all',
+        sessionsList: [],
+        activeSession: null,
+        activeSessionMessages: [],
+        activeSessionDetailClipped: false,
+        sessionTimelineActiveKey: '',
+        sessionMessageRefMap: Object.create(null),
+        _detailLoadCount: 0,
+        showMessage() {},
+        resetSessionDetailPagination() {},
+        resetSessionPreviewMessageRender() {},
+        cancelSessionTimelineSync() {},
+        syncSessionPathOptionsForSource() {},
+        extractPathOptionsFromSessions() {
+            return [];
+        },
+        getSessionExportKey(session) {
+            return session && session.sessionId ? session.sessionId : '';
+        },
+        async loadActiveSessionDetail() {
+            this._detailLoadCount += 1;
+        }
+    };
+
+    await loadSessions.call(vm, async () => ({
+        sessions: [
+            { sessionId: 'sess-1', source: 'codex', updatedAt: '2026-04-08T10:00:00.000Z', messageCount: 42, cwd: '/repo' }
+        ]
+    }), {});
+
+    assert.strictEqual(vm._detailLoadCount, 1);
+    assert.strictEqual(vm.activeSession.sessionId, 'sess-1');
+});
+
 test('session timeline stays always-on and no longer exposes toggle handler', () => {
     const appScript = readBundledWebUiScript();
     assert.match(appScript, /sessionTimelineEnabled:\s*true,/);
diff --git a/tests/unit/session-usage-backend.test.mjs b/tests/unit/session-usage-backend.test.mjs
index 5e69045b..12caeb45 100644
--- a/tests/unit/session-usage-backend.test.mjs
+++ b/tests/unit/session-usage-backend.test.mjs
@@ -23,6 +23,7 @@ function extractFunction(content, funcName) {
 const listSessionUsageSrc = extractFunction(cliContent, 'listSessionUsage');
 const listSessionBrowseSrc = extractFunction(cliContent, 'listSessionBrowse');
 const buildSessionInventoryCacheKeySrc = extractFunction(cliContent, 'buildSessionInventoryCacheKey');
+const cloneSessionInventoryCacheValueSrc = extractFunction(cliContent, 'cloneSessionInventoryCacheValue');
 const getSessionInventoryCacheSrc = extractFunction(cliContent, 'getSessionInventoryCache');
 const registerSessionFileLookupEntriesSrc = extractFunction(cliContent, 'registerSessionFileLookupEntries');
 const setSessionInventoryCacheSrc = extractFunction(cliContent, 'setSessionInventoryCache');
@@ -198,6 +199,7 @@ test('listSessionInventoryBySource reuses cached summaries and registers session
     const listSessionInventoryBySource = instantiateFunctionBundle(
         [
             buildSessionInventoryCacheKeySrc,
+            cloneSessionInventoryCacheValueSrc,
             getSessionInventoryCacheSrc,
             registerSessionFileLookupEntriesSrc,
             setSessionInventoryCacheSrc,
@@ -235,6 +237,123 @@ test('listSessionInventoryBySource reuses cached summaries and registers session
     assert.strictEqual(g_sessionFileLookupCache.codex.get('sess-1'), '/tmp/sess-1.jsonl');
 });
 
+test('listSessionInventoryBySource returns cloned cache entries so UI-side mutations do not leak back into cache', () => {
+    const g_sessionInventoryCache = new Map();
+    const g_sessionFileLookupCache = {
+        codex: new Map(),
+        claude: new Map()
+    };
+    const listSessionInventoryBySource = instantiateFunctionBundle(
+        [
+            buildSessionInventoryCacheKeySrc,
+            cloneSessionInventoryCacheValueSrc,
+            getSessionInventoryCacheSrc,
+            registerSessionFileLookupEntriesSrc,
+            setSessionInventoryCacheSrc,
+            listSessionInventoryBySourceSrc
+        ],
+        'listSessionInventoryBySource',
+        {
+            g_sessionInventoryCache,
+            g_sessionFileLookupCache,
+            SESSION_LIST_CACHE_TTL_MS: 4000,
+            SESSION_INVENTORY_CACHE_MAX_ENTRIES: 12,
+            listCodexSessions() {
+                return [{
+                    source: 'codex',
+                    sessionId: 'sess-1',
+                    filePath: '/tmp/sess-1.jsonl',
+                    match: {
+                        hit: true,
+                        count: 1,
+                        snippets: ['alpha']
+                    }
+                }];
+            },
+            listClaudeSessions() {
+                throw new Error('claude inventory should not be used');
+            },
+            Date: { now: () => 1000 },
+            Number,
+            Math,
+            Map,
+            Array
+        }
+    );
+
+    const first = listSessionInventoryBySource('codex', 120, {}, { forceRefresh: false });
+    first[0].title = 'mutated';
+    first[0].match.snippets.push('beta');
+
+    const second = listSessionInventoryBySource('codex', 120, {}, { forceRefresh: false });
+
+    assert.strictEqual(second[0].title, undefined);
+    assert.deepStrictEqual(second[0].match.snippets, ['alpha']);
+});
+
+test('listSessionInventoryBySource discards invalid non-array cache entries and rebuilds from source', () => {
+    const buildSessionInventoryCacheKey = instantiateFunctionBundle(
+        [buildSessionInventoryCacheKeySrc],
+        'buildSessionInventoryCacheKey',
+        { Number, Math }
+    );
+    const cacheKey = buildSessionInventoryCacheKey('codex', 120, {});
+    const g_sessionInventoryCache = new Map([
+        [cacheKey, {
+            timestamp: 1000,
+            source: 'codex',
+            value: { broken: true }
+        }]
+    ]);
+    const g_sessionFileLookupCache = {
+        codex: new Map(),
+        claude: new Map()
+    };
+    let codexCalls = 0;
+    const listSessionInventoryBySource = instantiateFunctionBundle(
+        [
+            buildSessionInventoryCacheKeySrc,
+            cloneSessionInventoryCacheValueSrc,
+            getSessionInventoryCacheSrc,
+            registerSessionFileLookupEntriesSrc,
+            setSessionInventoryCacheSrc,
+            listSessionInventoryBySourceSrc
+        ],
+        'listSessionInventoryBySource',
+        {
+            g_sessionInventoryCache,
+            g_sessionFileLookupCache,
+            SESSION_LIST_CACHE_TTL_MS: 4000,
+            SESSION_INVENTORY_CACHE_MAX_ENTRIES: 12,
+            listCodexSessions() {
+                codexCalls += 1;
+                return [{
+                    source: 'codex',
+                    sessionId: 'sess-1',
+                    filePath: '/tmp/sess-1.jsonl'
+                }];
+            },
+            listClaudeSessions() {
+                throw new Error('claude inventory should not be used');
+            },
+            Date: { now: () => 1000 },
+            Number,
+            Math,
+            Map,
+            Array
+        }
+    );
+
+    const result = listSessionInventoryBySource('codex', 120, {}, { forceRefresh: false });
+
+    assert.strictEqual(codexCalls, 1);
+    assert.deepStrictEqual(result, [{
+        source: 'codex',
+        sessionId: 'sess-1',
+        filePath: '/tmp/sess-1.jsonl'
+    }]);
+});
+
 test('listSessionPaths reuses cached lightweight inventory and dedupes cwd values', () => {
     const cachedResults = new Map();
     const helperCalls = [];
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index d63bf79c..27538791 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -11,10 +11,18 @@ function clearSessionTimelineRefs(vm) {
     }
 }
 
+function hasOwnOption(options, key) {
+    return !!options && typeof options === 'object' && Object.prototype.hasOwnProperty.call(options, key);
+}
+
 function normalizeSessionLoadOptions(options = {}) {
     const normalized = options && typeof options === 'object' ? options : {};
+    const hasIncludeActiveDetail = hasOwnOption(normalized, 'includeActiveDetail');
     return {
-        includeActiveDetail: !!normalized.includeActiveDetail,
+        hasIncludeActiveDetail,
+        includeActiveDetail: hasIncludeActiveDetail
+            ? normalized.includeActiveDetail !== false
+            : false,
         forceRefresh: !!normalized.forceRefresh
     };
 }
@@ -23,11 +31,44 @@ function mergeSessionLoadOptions(baseOptions = {}, nextOptions = {}) {
     const base = normalizeSessionLoadOptions(baseOptions);
     const next = normalizeSessionLoadOptions(nextOptions);
     return {
-        includeActiveDetail: base.includeActiveDetail || next.includeActiveDetail,
+        hasIncludeActiveDetail: base.hasIncludeActiveDetail || next.hasIncludeActiveDetail,
+        includeActiveDetail: (base.hasIncludeActiveDetail && base.includeActiveDetail)
+            || (next.hasIncludeActiveDetail && next.includeActiveDetail),
         forceRefresh: base.forceRefresh || next.forceRefresh
     };
 }
 
+function shouldIncludeActiveSessionDetail(vm, options = {}) {
+    if (options.hasIncludeActiveDetail) {
+        return options.includeActiveDetail;
+    }
+    return vm.mainTab === 'sessions' || !!vm.sessionStandalone;
+}
+
+function scheduleSessionDetailHydration(vm, options = {}) {
+    if (!vm || typeof vm.loadActiveSessionDetail !== 'function') {
+        return;
+    }
+    const hydrationTicket = (Number(vm.__sessionDetailHydrationTicket) || 0) + 1;
+    vm.__sessionDetailHydrationTicket = hydrationTicket;
+    const task = () => {
+        if (hydrationTicket !== Number(vm.__sessionDetailHydrationTicket || 0)) return;
+        if (!vm.activeSession) return;
+        if (vm.mainTab !== 'sessions' && !vm.sessionStandalone) return;
+        if (vm.sessionDetailLoading) return;
+        const currentMessages = Array.isArray(vm.activeSessionMessages) ? vm.activeSessionMessages : [];
+        if (!options.force && currentMessages.length > 0) {
+            return;
+        }
+        void vm.loadActiveSessionDetail(options);
+    };
+    if (typeof vm.scheduleAfterFrame === 'function') {
+        vm.scheduleAfterFrame(task);
+        return;
+    }
+    task();
+}
+
 export function switchMainTab(tab) {
     const nextTab = typeof tab === 'string' ? tab : '';
     const previousTab = this.mainTab;
@@ -60,9 +101,17 @@ export function switchMainTab(tab) {
     }
 
     if (enteringSessionsTab && !this.sessionsLoadedOnce) {
-        this.loadSessions({
-            includeActiveDetail: false
+        const canStageInitialSessionDetail = typeof this.scheduleAfterFrame === 'function';
+        const loadResult = this.loadSessions({
+            includeActiveDetail: !canStageInitialSessionDetail
         });
+        if (canStageInitialSessionDetail) {
+            void Promise.resolve(loadResult)
+                .then(() => {
+                    scheduleSessionDetailHydration(this);
+                })
+                .catch(() => {});
+        }
     }
     if (enteringUsageTab && !this.sessionsUsageLoadedOnce && typeof this.loadSessionsUsage === 'function') {
         this.loadSessionsUsage();
@@ -121,6 +170,7 @@ export async function loadSessions(api, options = {}) {
         return;
     }
     const normalizedOptions = normalizeSessionLoadOptions(options);
+    const includeActiveDetail = shouldIncludeActiveSessionDetail(this, normalizedOptions);
     this.sessionsLoading = true;
     this.activeSessionDetailError = '';
     let loadSucceeded = false;
@@ -180,7 +230,7 @@ export async function loadSessions(api, options = {}) {
                 this.cancelSessionTimelineSync();
                 this.sessionTimelineActiveKey = '';
                 clearSessionTimelineRefs(this);
-                if (normalizedOptions.includeActiveDetail) {
+                if (includeActiveDetail) {
                     await this.loadActiveSessionDetail();
                 }
             }

From 0259829efc9cc4f6ed03cb04def7c7d0651a50dc Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 08:19:02 +0000
Subject: [PATCH 06/17] fix: fallback preview for huge session lines

---
 cli.js                     |  2 +-
 tests/e2e/test-sessions.js | 39 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/cli.js b/cli.js
index ac818d41..31ef8972 100644
--- a/cli.js
+++ b/cli.js
@@ -4803,7 +4803,7 @@ function extractSessionDetailPreviewFromFileFast(filePath, source, messageLimit)
 async function extractSessionDetailPreviewFromFile(filePath, source, messageLimit, options = {}) {
     if (options && options.preview) {
         const fastPreview = extractSessionDetailPreviewFromFileFast(filePath, source, messageLimit);
-        if (fastPreview) {
+        if (fastPreview && (!fastPreview.clipped || fastPreview.messages.length > 0)) {
             return fastPreview;
         }
     }
diff --git a/tests/e2e/test-sessions.js b/tests/e2e/test-sessions.js
index 75b8a72c..a000d34f 100644
--- a/tests/e2e/test-sessions.js
+++ b/tests/e2e/test-sessions.js
@@ -118,6 +118,8 @@ module.exports = async function testSessions(ctx) {
     const longSessionId = 'codex-long-trash-count-e2e';
     const longSessionPath = path.join(tmpHome, '.codex', 'sessions', `${longSessionId}.jsonl`);
     const longMessageCount = 1205;
+    const hugeLineSessionId = 'codex-huge-line-preview-e2e';
+    const hugeLineSessionPath = path.join(tmpHome, '.codex', 'sessions', `${hugeLineSessionId}.jsonl`);
     const trashRoot = path.join(tmpHome, '.codex', 'codexmate-session-trash');
     const trashFilesDir = path.join(trashRoot, 'files');
     const trashIndexPath = path.join(trashRoot, 'index.json');
@@ -304,6 +306,43 @@ module.exports = async function testSessions(ctx) {
         assert(longSessionDetail.messages[0].messageIndex === longMessageCount - longSessionDetail.messages.length, 'session-detail should keep the latest message indexes');
         assert(longSessionDetail.messages[longSessionDetail.messages.length - 1].messageIndex === longMessageCount - 1, 'session-detail should keep the latest tail message index');
 
+        const hugeLineRecords = [{
+            type: 'session_meta',
+            payload: { id: hugeLineSessionId, cwd: '/tmp/huge-line-preview' },
+            timestamp: '2025-03-01T00:00:00.000Z'
+        }];
+        for (let i = 0; i < 3; i += 1) {
+            hugeLineRecords.push({
+                type: 'response_item',
+                payload: {
+                    type: 'message',
+                    role: i % 2 === 0 ? 'user' : 'assistant',
+                    content: `huge-line-preview-${i}-` + 'q'.repeat(1300000)
+                },
+                timestamp: buildTimestamp('2025-03-07T00:00:00.000Z', i)
+            });
+        }
+        fs.writeFileSync(hugeLineSessionPath, hugeLineRecords.map(record => JSON.stringify(record)).join('\n') + '\n', 'utf-8');
+
+        const hugeLinePreview = await api('session-detail', {
+            source: 'codex',
+            sessionId: hugeLineSessionId,
+            messageLimit: 80,
+            preview: true
+        });
+        assert(Array.isArray(hugeLinePreview.messages), 'session-detail preview should return messages for huge-line sessions');
+        assert(hugeLinePreview.messages.length > 0, 'session-detail preview should fall back when huge lines exceed the fast tail window');
+        assert(hugeLinePreview.messages.length <= 3, 'session-detail preview should not duplicate huge-line messages');
+        assert(hugeLinePreview.clipped === false, 'session-detail preview should report unclipped when fallback can read the whole huge-line session');
+
+        const hugeLineDetail = await api('session-detail', {
+            source: 'codex',
+            sessionId: hugeLineSessionId,
+            messageLimit: 80
+        });
+        assert(hugeLineDetail.totalMessages === 3, 'session-detail should keep exact totalMessages for huge-line sessions');
+        assert(hugeLineDetail.messages.length === 3, 'session-detail should keep all huge-line messages when under limit');
+
         deleteLongResult = await api('trash-session', { source: 'codex', sessionId: longSessionId });
         assert(deleteLongResult.success === true, 'trash-session should trash long codex session');
         assert(deleteLongResult.messageCount === longMessageCount, 'trash-session should return exact long-session messageCount');

From c4970ac921bb37c459626cdc8f69dad603254917 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 11:49:39 +0000
Subject: [PATCH 07/17] fix(web-ui): unstick large session browser pagination

---
 tests/e2e/run.js                              |   2 +
 tests/e2e/test-web-ui-session-browser.js      | 269 ++++++++++++++++++
 .../session-tab-switch-performance.test.mjs   |  32 +++
 web-ui/session-helpers.mjs                    |   2 +-
 4 files changed, 304 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/test-web-ui-session-browser.js

diff --git a/tests/e2e/run.js b/tests/e2e/run.js
index 9c6c6185..7885c658 100644
--- a/tests/e2e/run.js
+++ b/tests/e2e/run.js
@@ -24,6 +24,7 @@ const testMcp = require('./test-mcp');
 const testWorkflow = require('./test-workflow');
 const testInvalidConfig = require('./test-invalid-config');
 const testWebUiAssets = require('./test-web-ui-assets');
+const testWebUiSessionBrowser = require('./test-web-ui-session-browser');
 
 async function main() {
     const realHome = os.homedir();
@@ -132,6 +133,7 @@ async function main() {
         await testMcp(ctx);
         await testWorkflow(ctx);
         await testWebUiAssets(ctx);
+        await testWebUiSessionBrowser(ctx);
 
     } finally {
         const waitForExit = new Promise((resolve) => {
diff --git a/tests/e2e/test-web-ui-session-browser.js b/tests/e2e/test-web-ui-session-browser.js
new file mode 100644
index 00000000..3377bed1
--- /dev/null
+++ b/tests/e2e/test-web-ui-session-browser.js
@@ -0,0 +1,269 @@
+const fs = require('fs');
+const path = require('path');
+const { pathToFileURL } = require('url');
+const { assert } = require('./helpers');
+
+let bundledWebUiHarnessPromise = null;
+
+function getBundledWebUiHarness() {
+    if (!bundledWebUiHarnessPromise) {
+        const helperPath = path.resolve(__dirname, '..', 'unit', 'helpers', 'web-ui-app-options.mjs');
+        bundledWebUiHarnessPromise = import(pathToFileURL(helperPath).href)
+            .then(async (mod) => ({
+                appOptions: await mod.captureCurrentBundledAppOptions(),
+                withGlobalOverrides: mod.withGlobalOverrides
+            }));
+    }
+    return bundledWebUiHarnessPromise;
+}
+
+function createIso(baseMs, offsetSeconds) {
+    return new Date(baseMs + (offsetSeconds * 1000)).toISOString();
+}
+
+function buildCodexSessionRecords(sessionId, messageCount, options = {}) {
+    const baseMs = Date.parse(options.baseIso || '2025-04-01T00:00:00.000Z');
+    const messageSize = Number.isFinite(options.messageSize)
+        ? Math.max(0, Math.floor(options.messageSize))
+        : 256;
+    const records = [{
+        type: 'session_meta',
+        payload: {
+            id: sessionId,
+            cwd: options.cwd || `/tmp/${sessionId}`
+        },
+        timestamp: createIso(baseMs, 0)
+    }];
+
+    for (let i = 0; i < messageCount; i += 1) {
+        records.push({
+            type: 'response_item',
+            payload: {
+                type: 'message',
+                role: i % 2 === 0 ? 'user' : 'assistant',
+                content: `${sessionId}-msg-${String(i).padStart(4, '0')}-` + 'x'.repeat(messageSize)
+            },
+            timestamp: createIso(baseMs, i + 1)
+        });
+    }
+
+    return records;
+}
+
+function writeCodexSessionFile(sessionsDir, sessionId, records) {
+    const filePath = path.join(sessionsDir, `${sessionId}.jsonl`);
+    fs.writeFileSync(filePath, records.map((record) => JSON.stringify(record)).join('\n') + '\n', 'utf-8');
+    return filePath;
+}
+
+function createApiFetch(api) {
+    return async function fetch(_url, init = {}) {
+        const payload = init && init.body ? JSON.parse(init.body) : {};
+        const result = await api(payload.action, payload.params);
+        const raw = JSON.stringify(result || {});
+        return {
+            ok: true,
+            status: 200,
+            headers: {
+                get(name) {
+                    return String(name || '').toLowerCase() === 'content-type'
+                        ? 'application/json'
+                        : '';
+                }
+            },
+            async json() {
+                return result;
+            },
+            async text() {
+                return raw;
+            }
+        };
+    };
+}
+
+function createLocalStorage() {
+    const store = new Map();
+    return {
+        getItem(key) {
+            return store.has(key) ? store.get(key) : null;
+        },
+        setItem(key, value) {
+            store.set(key, String(value));
+        },
+        removeItem(key) {
+            store.delete(key);
+        }
+    };
+}
+
+function createWebUiVm(appOptions) {
+    const vm = {
+        ...(typeof appOptions.data === 'function' ? appOptions.data() : {}),
+        _scheduledFrames: [],
+        _idleTasks: [],
+        _messages: [],
+        $refs: {}
+    };
+
+    for (const [name, fn] of Object.entries(appOptions.methods || {})) {
+        vm[name] = fn;
+    }
+
+    for (const [name, getter] of Object.entries(appOptions.computed || {})) {
+        Object.defineProperty(vm, name, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return getter.call(vm);
+            }
+        });
+    }
+
+    vm.$nextTick = function $nextTick(callback) {
+        if (typeof callback === 'function') {
+            callback();
+        }
+    };
+    vm.scheduleAfterFrame = function scheduleAfterFrame(task) {
+        this._scheduledFrames.push(task);
+    };
+    vm.scheduleIdleTask = function scheduleIdleTask(task) {
+        this._idleTasks.push(task);
+        return task;
+    };
+    vm.cancelIdleTask = function cancelIdleTask(handle) {
+        this._idleTasks = this._idleTasks.filter((task) => task !== handle);
+    };
+    vm.showMessage = function showMessage(text, type) {
+        this._messages.push({ text: String(text), type: type || 'info' });
+    };
+    vm.updateSessionTimelineOffset = function updateSessionTimelineOffset() {};
+    vm.invalidateSessionTimelineMeasurementCache = function invalidateSessionTimelineMeasurementCache() {};
+    vm.scheduleSessionTimelineSync = function scheduleSessionTimelineSync() {};
+    vm.cancelSessionTimelineSync = function cancelSessionTimelineSync() {
+        this._cancelTimelineSyncCalls = (this._cancelTimelineSyncCalls || 0) + 1;
+    };
+
+    return vm;
+}
+
+async function flushScheduledFrames(vm) {
+    let guard = 0;
+    while (Array.isArray(vm._scheduledFrames) && vm._scheduledFrames.length > 0) {
+        const task = vm._scheduledFrames.shift();
+        await Promise.resolve(task());
+        guard += 1;
+        if (guard > 50) {
+            throw new Error('scheduled frame queue did not settle');
+        }
+    }
+}
+
+async function waitForCondition(check, label) {
+    const deadline = Date.now() + 2000;
+    while (Date.now() < deadline) {
+        if (check()) {
+            return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+    throw new Error(label || 'condition not met');
+}
+
+module.exports = async function testWebUiSessionBrowser(ctx) {
+    const { api, tmpHome } = ctx;
+    const sessionsDir = path.join(tmpHome, '.codex', 'sessions');
+    fs.mkdirSync(sessionsDir, { recursive: true });
+
+    const denseListSessionCount = 140;
+    const hotSessionId = 'session-browser-hot-large-e2e';
+    const hotSessionMessageCount = 1325;
+    const hugeLineSessionId = 'session-browser-huge-line-e2e';
+
+    for (let i = 0; i < denseListSessionCount; i += 1) {
+        const sessionId = `session-browser-list-${String(i).padStart(3, '0')}`;
+        const records = buildCodexSessionRecords(sessionId, 4, {
+            baseIso: createIso(Date.parse('2025-04-01T00:00:00.000Z'), i * 90),
+            messageSize: 96,
+            cwd: `/tmp/${sessionId}`
+        });
+        writeCodexSessionFile(sessionsDir, sessionId, records);
+    }
+
+    writeCodexSessionFile(
+        sessionsDir,
+        hugeLineSessionId,
+        [{
+            type: 'session_meta',
+            payload: { id: hugeLineSessionId, cwd: '/tmp/session-browser-huge-line' },
+            timestamp: '2025-04-02T00:00:00.000Z'
+        }].concat(Array.from({ length: 3 }, (_, index) => ({
+            type: 'response_item',
+            payload: {
+                type: 'message',
+                role: index % 2 === 0 ? 'user' : 'assistant',
+                content: `session-browser-huge-line-${index}-` + 'q'.repeat(1300000)
+            },
+            timestamp: createIso(Date.parse('2025-04-02T00:00:00.000Z'), index + 1)
+        })))
+    );
+
+    writeCodexSessionFile(sessionsDir, hotSessionId, buildCodexSessionRecords(hotSessionId, hotSessionMessageCount, {
+        baseIso: '2025-04-03T00:00:00.000Z',
+        messageSize: 2048,
+        cwd: '/tmp/session-browser-hot-large'
+    }));
+
+    const { appOptions, withGlobalOverrides } = await getBundledWebUiHarness();
+    const vm = createWebUiVm(appOptions);
+    vm.mainTab = 'sessions';
+    vm.sessionFilterSource = 'codex';
+    vm.prepareSessionTabRender();
+    await flushScheduledFrames(vm);
+
+    const fetch = createApiFetch(api);
+    const localStorage = createLocalStorage();
+
+    await withGlobalOverrides({ fetch, localStorage }, async () => {
+        await vm.loadSessions({ forceRefresh: true, includeActiveDetail: true });
+    });
+
+    assert(vm.sessionsList.length >= denseListSessionCount + 2, 'session browser should load the large isolated codex dataset');
+    assert(vm.sessionsList.every((item) => String(item.filePath || '').startsWith(sessionsDir)), 'session browser e2e should stay inside the isolated tmp HOME dataset');
+    assert(vm.activeSession && vm.activeSession.sessionId === hotSessionId, 'session browser should select the newest hot session from the isolated dataset');
+    assert(vm.visibleSessionsList.length === vm.sessionListInitialBatchSize, 'session browser should render only the first session list batch initially');
+    assert(vm.activeSessionMessages.length === vm.sessionDetailInitialMessageLimit, 'session browser preview should hydrate only the initial detail window for huge sessions');
+    assert(vm.activeSessionDetailClipped === true, 'session browser preview should stay clipped for huge sessions');
+    assert(vm.activeSessionVisibleMessages.length === vm.sessionPreviewInitialBatchSize, 'session browser should render only the first preview batch initially');
+
+    await withGlobalOverrides({ fetch, localStorage }, async () => {
+        for (let i = 0; i < 4; i += 1) {
+            await vm.loadMoreSessionMessages(24);
+        }
+    });
+
+    assert(vm.sessionDetailMessageLimit > vm.sessionDetailInitialMessageLimit, 'session browser should grow detail hydration beyond the initial preview window');
+    assert(vm.activeSessionMessages.length > vm.sessionDetailInitialMessageLimit, 'session browser should fetch an additional bounded detail page');
+    assert(vm.activeSessionMessages.length < hotSessionMessageCount, 'session browser should not pull the whole huge session into memory in one expansion step');
+    assert(vm.activeSessionVisibleMessages.length >= 104, 'session browser should preserve incremental preview expansion after detail hydration grows');
+    assert(vm.activeSessionVisibleMessages.length < vm.activeSessionMessages.length, 'session browser should keep preview rendering incremental after hydration grows');
+    assert(vm.activeSessionDetailClipped === true, 'session browser should remain clipped while more huge-session messages stay on disk');
+
+    const hugeLineSession = vm.sessionsList.find((item) => item.sessionId === hugeLineSessionId);
+    assert(hugeLineSession, 'session browser should list the huge-line regression session');
+
+    await withGlobalOverrides({ fetch, localStorage }, async () => {
+        await vm.selectSession(hugeLineSession);
+        await flushScheduledFrames(vm);
+        await waitForCondition(
+            () => vm.activeSession && vm.activeSession.sessionId === hugeLineSessionId && vm.sessionDetailLoading === false && vm.activeSessionMessages.length > 0,
+            'session browser huge-line selection did not finish loading'
+        );
+    });
+
+    assert(vm.activeSession && vm.activeSession.sessionId === hugeLineSessionId, 'session browser should switch to the huge-line regression session');
+    assert(vm.activeSessionMessages.length > 0, 'session browser should recover huge-line previews through the real UI->API data flow');
+    assert(vm.activeSessionMessages.length <= 3, 'session browser should not duplicate huge-line fallback preview messages');
+    assert(vm.activeSessionDetailClipped === false, 'session browser should mark the huge-line fallback preview as fully recovered');
+    assert(vm.activeSessionVisibleMessages.length === vm.activeSessionMessages.length, 'session browser should render all recovered huge-line messages without overfetching');
+};
diff --git a/tests/unit/session-tab-switch-performance.test.mjs b/tests/unit/session-tab-switch-performance.test.mjs
index 3026d77e..e62b6444 100644
--- a/tests/unit/session-tab-switch-performance.test.mjs
+++ b/tests/unit/session-tab-switch-performance.test.mjs
@@ -826,3 +826,35 @@ test('loadMoreSessionMessages requests older messages and toggles loading flag',
     assert.deepStrictEqual(vm.lastOptions, { preserveVisibleCount: true });
     assert.strictEqual(vm.sessionPreviewLoadingMore, false);
 });
+
+test('loadMoreSessionMessages ignores clipped preview counts that only echo the current loaded window', async () => {
+    const vm = {
+        mainTab: 'sessions',
+        sessionPreviewRenderEnabled: true,
+        activeSessionMessages: Array.from({ length: 80 }, (_, idx) => ({ id: idx })),
+        sessionPreviewVisibleCount: 80,
+        sessionPreviewLoadStep: 24,
+        sessionDetailLoading: false,
+        activeSessionDetailClipped: true,
+        activeSession: { messageCount: 80 },
+        sessionDetailMessageLimit: 80,
+        sessionDetailFetchStep: 80,
+        sessionDetailMessageLimitCap: 1000,
+        sessionPreviewPendingVisibleCount: 0,
+        sessionPreviewLoadingMore: false,
+        fetchCount: 0,
+        async loadActiveSessionDetail(options) {
+            this.fetchCount += 1;
+            this.lastOptions = options;
+            assert.strictEqual(this.sessionPreviewLoadingMore, true);
+        }
+    };
+
+    await loadMoreSessionMessages.call(vm);
+
+    assert.strictEqual(vm.fetchCount, 1);
+    assert.strictEqual(vm.sessionDetailMessageLimit, 160);
+    assert.strictEqual(vm.sessionPreviewPendingVisibleCount, 104);
+    assert.deepStrictEqual(vm.lastOptions, { preserveVisibleCount: true });
+    assert.strictEqual(vm.sessionPreviewLoadingMore, false);
+});
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index 27538791..acd61dae 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -456,7 +456,7 @@ export async function loadMoreSessionMessages(stepSize) {
         : 1000;
 
     let nextLimit = Math.max(currentLimit + fetchStep, targetVisible);
-    if (totalKnown > 0) {
+    if (totalKnown > total) {
         nextLimit = Math.min(nextLimit, totalKnown);
     }
     nextLimit = Math.min(nextLimit, limitCap);

From 96af1f50a3d5b944858610d98617e9bc2e07c331 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 11:57:16 +0000
Subject: [PATCH 08/17] fix(cli): preserve clipped fast session previews

---
 cli.js                                        |   6 +-
 tests/unit/run.mjs                            |   1 +
 .../unit/session-detail-preview-fast.test.mjs | 100 ++++++++++++++++++
 3 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 tests/unit/session-detail-preview-fast.test.mjs

diff --git a/cli.js b/cli.js
index 31ef8972..80df054d 100644
--- a/cli.js
+++ b/cli.js
@@ -4780,15 +4780,15 @@ function extractSessionDetailPreviewFromFileFast(filePath, source, messageLimit)
 
             totalBytesRead += bytesRead;
             combined = Buffer.concat([chunk.subarray(0, bytesRead), combined]);
-            latest = extractSessionDetailPreviewFromTailText(combined.toString('utf-8'), source, messageLimit);
+            latest = extractSessionDetailPreviewFromTailText(combined.toString('utf-8'), source, safeMessageLimit);
             if (latest.messages.length >= safeMessageLimit) {
-                latest.clipped = position > 0;
+                latest.clipped = latest.clipped || position > 0;
                 return latest;
             }
         }
 
         if (position > 0) {
-            latest.clipped = true;
+            latest.clipped = latest.clipped || position > 0;
         }
         return latest;
     } catch (_) {
diff --git a/tests/unit/run.mjs b/tests/unit/run.mjs
index 9d8ffd80..6cdcfb73 100644
--- a/tests/unit/run.mjs
+++ b/tests/unit/run.mjs
@@ -30,6 +30,7 @@ await import(pathToFileURL(path.join(__dirname, 'openclaw-persist-regression.tes
 await import(pathToFileURL(path.join(__dirname, 'agents-modal-guards.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'session-actions-standalone.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'session-browser-timeline-regression.test.mjs')));
+await import(pathToFileURL(path.join(__dirname, 'session-detail-preview-fast.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'session-usage.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'session-usage-backend.test.mjs')));
 await import(pathToFileURL(path.join(__dirname, 'agents-diff-ui.test.mjs')));
diff --git a/tests/unit/session-detail-preview-fast.test.mjs b/tests/unit/session-detail-preview-fast.test.mjs
new file mode 100644
index 00000000..97f2ad0e
--- /dev/null
+++ b/tests/unit/session-detail-preview-fast.test.mjs
@@ -0,0 +1,100 @@
+import assert from 'assert';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const require = createRequire(import.meta.url);
+
+const cliPath = path.join(__dirname, '..', '..', 'cli.js');
+const cliContent = fs.readFileSync(cliPath, 'utf-8');
+
+function extractFunction(content, funcName) {
+    const regex = new RegExp(`(?:async\\s+)?function ${funcName}\\([^)]*\\)\\s*\\{[\\s\\S]*?^\\}`, 'm');
+    const match = content.match(regex);
+    if (!match) {
+        throw new Error(`Function ${funcName} not found`);
+    }
+    return match[0];
+}
+
+const applySessionDetailRecordMetadataSrc = extractFunction(cliContent, 'applySessionDetailRecordMetadata');
+const extractSessionDetailPreviewFromTailTextSrc = extractFunction(cliContent, 'extractSessionDetailPreviewFromTailText');
+const extractSessionDetailPreviewFromFileFastSrc = extractFunction(cliContent, 'extractSessionDetailPreviewFromFileFast');
+const extractMessageFromRecordSrc = extractFunction(cliContent, 'extractMessageFromRecord');
+
+function instantiateExtractSessionDetailPreviewFromFileFast(bindings = {}) {
+    const bindingNames = Object.keys(bindings);
+    const bindingValues = Object.values(bindings);
+    return Function(
+        ...bindingNames,
+        `${applySessionDetailRecordMetadataSrc}\n${extractMessageFromRecordSrc}\n${extractSessionDetailPreviewFromTailTextSrc}\n${extractSessionDetailPreviewFromFileFastSrc}\nreturn extractSessionDetailPreviewFromFileFast;`
+    )(...bindingValues);
+}
+
+test('extractSessionDetailPreviewFromFileFast preserves clipped previews after fully reading a file', () => {
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'codexmate-fast-preview-'));
+    const filePath = path.join(tmpDir, 'session.jsonl');
+
+    try {
+        const records = [{
+            type: 'session_meta',
+            payload: { id: 'fast-preview-session', cwd: '/tmp/fast-preview-session' },
+            timestamp: '2025-04-12T00:00:00.000Z'
+        }];
+        for (let i = 0; i < 5; i += 1) {
+            records.push({
+                type: 'response_item',
+                payload: {
+                    type: 'message',
+                    role: i % 2 === 0 ? 'user' : 'assistant',
+                    content: `message-${i}-${'x'.repeat(48)}`
+                },
+                timestamp: `2025-04-12T00:00:0${i + 1}.000Z`
+            });
+        }
+        fs.writeFileSync(filePath, records.map((record) => JSON.stringify(record)).join('\n') + '\n', 'utf-8');
+
+        const extractSessionDetailPreviewFromFileFast = instantiateExtractSessionDetailPreviewFromFileFast({
+            fs,
+            getFileStatSafe(targetPath) {
+                try {
+                    return fs.statSync(targetPath);
+                } catch (_) {
+                    return null;
+                }
+            },
+            FAST_SESSION_DETAIL_PREVIEW_FILE_BYTES: 32,
+            FAST_SESSION_DETAIL_PREVIEW_MAX_BYTES: 4096,
+            FAST_SESSION_DETAIL_PREVIEW_CHUNK_BYTES: 256,
+            DEFAULT_SESSION_DETAIL_MESSAGES: 300,
+            toIsoTime(value, fallback = '') {
+                return typeof value === 'string' && value ? value : fallback;
+            },
+            normalizeRole(role) {
+                const normalized = String(role || '').trim().toLowerCase();
+                return normalized === 'user' || normalized === 'assistant' || normalized === 'system'
+                    ? normalized
+                    : '';
+            },
+            extractMessageText(content) {
+                if (typeof content === 'string') {
+                    return content;
+                }
+                return '';
+            }
+        });
+
+        const preview = extractSessionDetailPreviewFromFileFast(filePath, 'codex', 2);
+
+        assert(preview, 'fast preview should return a preview result for large files');
+        assert.strictEqual(preview.messages.length, 2, 'fast preview should keep the requested tail window');
+        assert.strictEqual(preview.clipped, true, 'fast preview should preserve clipped=true after the full file is read');
+        assert.strictEqual(preview.totalMessages, null, 'fast preview should keep non-exact totals for tail previews');
+    } finally {
+        fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+});

From 3ccc855633e807ff0c486818a39d4f4936df4b1e Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 12:00:49 +0000
Subject: [PATCH 09/17] fix(web-ui): keep session loads lightweight and safe

---
 cli.js                                    |  2 +-
 tests/unit/session-usage-backend.test.mjs | 12 ++++++------
 web-ui/session-helpers.mjs                |  9 +++++----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/cli.js b/cli.js
index 80df054d..1d61c433 100644
--- a/cli.js
+++ b/cli.js
@@ -6119,7 +6119,7 @@ async function listSessionUsage(params = {}) {
     const limit = Number.isFinite(rawLimit)
         ? Math.max(1, Math.min(rawLimit, MAX_SESSION_LIST_SIZE))
         : 200;
-    const sessions = await listAllSessions({
+    const sessions = await listSessionBrowse({
         source,
         limit,
         forceRefresh: !!params.forceRefresh
diff --git a/tests/unit/session-usage-backend.test.mjs b/tests/unit/session-usage-backend.test.mjs
index 12caeb45..6d50d561 100644
--- a/tests/unit/session-usage-backend.test.mjs
+++ b/tests/unit/session-usage-backend.test.mjs
@@ -105,8 +105,8 @@ test('listSessionBrowse uses lightweight session listing without exact hydration
 
 test('listSessionUsage uses lightweight session listing without exact hydration', async () => {
     const calls = [];
-    const listAllSessions = async (params) => {
-        calls.push({ type: 'listAllSessions', params });
+    const listSessionBrowse = async (params) => {
+        calls.push({ type: 'listSessionBrowse', params });
         return [
             {
                 source: 'codex',
@@ -122,7 +122,7 @@ test('listSessionUsage uses lightweight session listing without exact hydration'
     };
     const listSessionUsage = instantiateListSessionUsage({
         MAX_SESSION_LIST_SIZE: 300,
-        listAllSessions,
+        listSessionBrowse,
         listAllSessionsData
     });
 
@@ -136,7 +136,7 @@ test('listSessionUsage uses lightweight session listing without exact hydration'
         calls,
         [
             {
-                type: 'listAllSessions',
+                type: 'listSessionBrowse',
                 params: {
                     source: 'all',
                     limit: 200,
@@ -156,13 +156,13 @@ test('listSessionUsage uses lightweight session listing without exact hydration'
 
 test('listSessionUsage normalizes source and default limit for lightweight usage aggregation', async () => {
     const calls = [];
-    const listAllSessions = async (params) => {
+    const listSessionBrowse = async (params) => {
         calls.push(params);
         return [];
     };
     const listSessionUsage = instantiateListSessionUsage({
         MAX_SESSION_LIST_SIZE: 300,
-        listAllSessions,
+        listSessionBrowse,
         listAllSessionsData: async () => {
             throw new Error('should not call listAllSessionsData');
         }
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index acd61dae..a4f94711 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -182,6 +182,7 @@ export async function loadSessions(api, options = {}) {
         timeRangePreset: this.sessionTimePreset,
         forceRefresh: normalizedOptions.forceRefresh
     });
+    let pendingOptions = null;
     try {
         const res = await api('list-sessions', params);
         if (res.error) {
@@ -254,11 +255,11 @@ export async function loadSessions(api, options = {}) {
         if (loadSucceeded) {
             this.sessionsLoadedOnce = true;
         }
-        const pendingOptions = this.__sessionPendingLoadOptions || null;
+        pendingOptions = this.__sessionPendingLoadOptions || null;
         this.__sessionPendingLoadOptions = null;
-        if (pendingOptions) {
-            return loadSessions.call(this, api, pendingOptions);
-        }
+    }
+    if (pendingOptions) {
+        return loadSessions.call(this, api, pendingOptions);
     }
 }
 

From 9784ee68810a4f7adf558fd9a834be3e77a0016f Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 12:03:52 +0000
Subject: [PATCH 10/17] fix(cli): avoid shelling out with web ui urls

---
 cli.js                           | 31 ++++++++++++-------
 tests/unit/web-run-host.test.mjs | 52 +++++++++++++++++++++++++-------
 2 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/cli.js b/cli.js
index 1d61c433..59ede46a 100644
--- a/cli.js
+++ b/cli.js
@@ -11182,18 +11182,27 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
             }
 
             const platform = process.platform;
-            let command;
-            if (platform === 'win32') {
-                command = `start \"\" \"${url}\"`;
-            } else if (platform === 'darwin') {
-                command = `open \"${url}\"`;
-            } else {
-                command = `xdg-open \"${url}\"`;
-            }
+            const commandSpec = platform === 'win32'
+                ? { command: 'cmd', args: ['/c', 'start', '', url] }
+                : (platform === 'darwin'
+                    ? { command: 'open', args: [url] }
+                    : { command: 'xdg-open', args: [url] });
 
-            exec(command, (error) => {
-                if (error) console.warn('无法自动打开浏览器，请手动访问:', url);
-            });
+            try {
+                const child = spawn(commandSpec.command, commandSpec.args, {
+                    stdio: 'ignore',
+                    detached: true,
+                    windowsHide: true
+                });
+                child.on('error', () => {
+                    console.warn('无法自动打开浏览器，请手动访问:', url);
+                });
+                if (typeof child.unref === 'function') {
+                    child.unref();
+                }
+            } catch (_) {
+                console.warn('无法自动打开浏览器，请手动访问:', url);
+            }
         };
         const scheduleProbe = (attempt) => {
             probeWebUiReadiness((ready) => {
diff --git a/tests/unit/web-run-host.test.mjs b/tests/unit/web-run-host.test.mjs
index 6ea81407..ee30f550 100644
--- a/tests/unit/web-run-host.test.mjs
+++ b/tests/unit/web-run-host.test.mjs
@@ -806,7 +806,7 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
     let probeRequest = null;
     let probeEndHandler = null;
     let probePayload = '';
-    const execCalls = [];
+    const spawnCalls = [];
     const createWebServer = instantiateFunction(createWebServerSource, 'createWebServer', {
         http: {
             createServer() {
@@ -871,8 +871,14 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
             return false;
         },
         process: { env: {}, platform: 'win32' },
-        exec(command) {
-            execCalls.push(command);
+        spawn(command, args, options) {
+            spawnCalls.push({ command, args, options, unrefCalled: false });
+            return {
+                on() {},
+                unref() {
+                    spawnCalls[spawnCalls.length - 1].unrefCalled = true;
+                }
+            };
         },
         console: {
             log() {},
@@ -895,7 +901,7 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
     });
 
     listenCallback();
-    assert.deepStrictEqual(execCalls, []);
+    assert.deepStrictEqual(spawnCalls, []);
     assert.ok(probeRequest, 'should probe the local api before auto-open');
     assert.strictEqual(probeRequest.options.hostname, '127.0.0.1');
     assert.strictEqual(probeRequest.options.port, 3737);
@@ -912,10 +918,19 @@ test('createWebServer waits for api readiness probe before auto-opening the brow
             }
         }
     });
-    assert.deepStrictEqual(execCalls, []);
+    assert.deepStrictEqual(spawnCalls, []);
 
     probeEndHandler();
-    assert.deepStrictEqual(execCalls, ['start "" "http://127.0.0.1:3737"']);
+    assert.deepStrictEqual(spawnCalls, [{
+        command: 'cmd',
+        args: ['/c', 'start', '', 'http://127.0.0.1:3737'],
+        options: {
+            stdio: 'ignore',
+            detached: true,
+            windowsHide: true
+        },
+        unrefCalled: true
+    }]);
 });
 
 test('createWebServer health-check does not consume init notice before the first status poll', async () => {
@@ -1054,7 +1069,7 @@ test('createWebServer retries readiness probe failures before auto-opening the b
     let listenCallback = null;
     const requestOutcomes = [];
     const timers = [];
-    const execCalls = [];
+    const spawnCalls = [];
     const createWebServer = instantiateFunction(createWebServerSource, 'createWebServer', {
         http: {
             createServer() {
@@ -1136,8 +1151,14 @@ test('createWebServer retries readiness probe failures before auto-opening the b
             return false;
         },
         process: { env: {}, platform: 'linux' },
-        exec(command) {
-            execCalls.push(command);
+        spawn(command, args, options) {
+            spawnCalls.push({ command, args, options, unrefCalled: false });
+            return {
+                on() {},
+                unref() {
+                    spawnCalls[spawnCalls.length - 1].unrefCalled = true;
+                }
+            };
         },
         console: {
             log() {},
@@ -1162,12 +1183,21 @@ test('createWebServer retries readiness probe failures before auto-opening the b
     });
 
     listenCallback();
-    assert.deepStrictEqual(execCalls, []);
+    assert.deepStrictEqual(spawnCalls, []);
     assert.strictEqual(timers.length, 1);
     assert.strictEqual(timers[0].ms, 150);
 
     timers[0].callback();
-    assert.deepStrictEqual(execCalls, ['xdg-open "http://127.0.0.1:3737"']);
+    assert.deepStrictEqual(spawnCalls, [{
+        command: 'xdg-open',
+        args: ['http://127.0.0.1:3737'],
+        options: {
+            stdio: 'ignore',
+            detached: true,
+            windowsHide: true
+        },
+        unrefCalled: true
+    }]);
 });
 
 test('resolveSkillTarget rejects explicit unsupported targets instead of falling back', () => {

From 744cf45aae3cf48ff69aa76fc33f348ace7bcfe2 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 12:08:49 +0000
Subject: [PATCH 11/17] fix(cli): normalize full-scan fast previews

---
 cli.js                                        |   9 +-
 .../unit/session-detail-preview-fast.test.mjs | 110 ++++++++++++++++++
 2 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/cli.js b/cli.js
index 59ede46a..034f7d1b 100644
--- a/cli.js
+++ b/cli.js
@@ -4789,7 +4789,14 @@ function extractSessionDetailPreviewFromFileFast(filePath, source, messageLimit)
 
         if (position > 0) {
             latest.clipped = latest.clipped || position > 0;
-        }
+            return latest;
+        }
+        const normalizedMessages = removeLeadingSystemMessage(latest.messages);
+        latest.messages = normalizedMessages.length > safeMessageLimit
+            ? normalizedMessages.slice(-safeMessageLimit)
+            : normalizedMessages;
+        latest.totalMessages = normalizedMessages.length;
+        latest.clipped = latest.totalMessages > latest.messages.length;
         return latest;
     } catch (_) {
         return null;
diff --git a/tests/unit/session-detail-preview-fast.test.mjs b/tests/unit/session-detail-preview-fast.test.mjs
index 97f2ad0e..8705d388 100644
--- a/tests/unit/session-detail-preview-fast.test.mjs
+++ b/tests/unit/session-detail-preview-fast.test.mjs
@@ -85,6 +85,22 @@ test('extractSessionDetailPreviewFromFileFast preserves clipped previews after f
                     return content;
                 }
                 return '';
+            },
+            removeLeadingSystemMessage(messages) {
+                if (!Array.isArray(messages)) {
+                    return [];
+                }
+                let startIndex = 0;
+                while (startIndex < messages.length) {
+                    const item = messages[startIndex];
+                    const role = item && typeof item.role === 'string' ? item.role : '';
+                    if (role === 'system') {
+                        startIndex += 1;
+                        continue;
+                    }
+                    break;
+                }
+                return startIndex > 0 ? messages.slice(startIndex) : messages;
             }
         });
 
@@ -98,3 +114,97 @@ test('extractSessionDetailPreviewFromFileFast preserves clipped previews after f
         fs.rmSync(tmpDir, { recursive: true, force: true });
     }
 });
+
+test('extractSessionDetailPreviewFromFileFast normalizes full-scan previews before returning', () => {
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'codexmate-fast-preview-full-'));
+    const filePath = path.join(tmpDir, 'session.jsonl');
+
+    try {
+        const records = [
+            {
+                type: 'response_item',
+                payload: {
+                    type: 'message',
+                    role: 'system',
+                    content: 'bootstrap'
+                },
+                timestamp: '2025-04-12T00:00:00.000Z'
+            },
+            {
+                type: 'response_item',
+                payload: {
+                    type: 'message',
+                    role: 'user',
+                    content: 'hello'
+                },
+                timestamp: '2025-04-12T00:00:01.000Z'
+            },
+            {
+                type: 'response_item',
+                payload: {
+                    type: 'message',
+                    role: 'assistant',
+                    content: 'world'
+                },
+                timestamp: '2025-04-12T00:00:02.000Z'
+            }
+        ];
+        fs.writeFileSync(filePath, records.map((record) => JSON.stringify(record)).join('\n') + '\n', 'utf-8');
+
+        const extractSessionDetailPreviewFromFileFast = instantiateExtractSessionDetailPreviewFromFileFast({
+            fs,
+            getFileStatSafe(targetPath) {
+                try {
+                    return fs.statSync(targetPath);
+                } catch (_) {
+                    return null;
+                }
+            },
+            FAST_SESSION_DETAIL_PREVIEW_FILE_BYTES: 32,
+            FAST_SESSION_DETAIL_PREVIEW_MAX_BYTES: 4096,
+            FAST_SESSION_DETAIL_PREVIEW_CHUNK_BYTES: 256,
+            DEFAULT_SESSION_DETAIL_MESSAGES: 300,
+            toIsoTime(value, fallback = '') {
+                return typeof value === 'string' && value ? value : fallback;
+            },
+            normalizeRole(role) {
+                const normalized = String(role || '').trim().toLowerCase();
+                return normalized === 'user' || normalized === 'assistant' || normalized === 'system'
+                    ? normalized
+                    : '';
+            },
+            extractMessageText(content) {
+                return typeof content === 'string' ? content : '';
+            },
+            removeLeadingSystemMessage(messages) {
+                if (!Array.isArray(messages)) {
+                    return [];
+                }
+                let startIndex = 0;
+                while (startIndex < messages.length) {
+                    const item = messages[startIndex];
+                    const role = item && typeof item.role === 'string' ? item.role : '';
+                    if (role === 'system') {
+                        startIndex += 1;
+                        continue;
+                    }
+                    break;
+                }
+                return startIndex > 0 ? messages.slice(startIndex) : messages;
+            }
+        });
+
+        const preview = extractSessionDetailPreviewFromFileFast(filePath, 'codex', 5);
+
+        assert(preview, 'full-scan fast preview should still return a preview');
+        assert.deepStrictEqual(
+            preview.messages.map((item) => item.role),
+            ['user', 'assistant'],
+            'full-scan previews should strip leading system/bootstrap messages'
+        );
+        assert.strictEqual(preview.totalMessages, 2, 'full-scan previews should restore an exact total');
+        assert.strictEqual(preview.clipped, false, 'full-scan previews should not stay clipped when all messages fit');
+    } finally {
+        fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+});

From 32cdd354a46885a6fd2785386d6d8c99fb389c83 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 12:12:37 +0000
Subject: [PATCH 12/17] test(e2e): cover session tab entry hydration path

---
 tests/e2e/test-web-ui-session-browser.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/test-web-ui-session-browser.js b/tests/e2e/test-web-ui-session-browser.js
index 3377bed1..26451677 100644
--- a/tests/e2e/test-web-ui-session-browser.js
+++ b/tests/e2e/test-web-ui-session-browser.js
@@ -216,16 +216,24 @@ module.exports = async function testWebUiSessionBrowser(ctx) {
 
     const { appOptions, withGlobalOverrides } = await getBundledWebUiHarness();
     const vm = createWebUiVm(appOptions);
-    vm.mainTab = 'sessions';
+    vm.mainTab = 'settings';
     vm.sessionFilterSource = 'codex';
-    vm.prepareSessionTabRender();
-    await flushScheduledFrames(vm);
 
     const fetch = createApiFetch(api);
     const localStorage = createLocalStorage();
 
     await withGlobalOverrides({ fetch, localStorage }, async () => {
-        await vm.loadSessions({ forceRefresh: true, includeActiveDetail: true });
+        vm.switchMainTab('sessions');
+        await flushScheduledFrames(vm);
+        await waitForCondition(
+            () => vm.mainTab === 'sessions' && vm.sessionsLoadedOnce === true && vm.sessionsLoading === false && !!vm.activeSession,
+            'session browser switchMainTab did not finish list loading'
+        );
+        await flushScheduledFrames(vm);
+        await waitForCondition(
+            () => vm.activeSession && vm.activeSession.sessionId === hotSessionId && vm.sessionDetailLoading === false && vm.activeSessionMessages.length > 0,
+            'session browser switchMainTab did not finish detail hydration'
+        );
     });
 
     assert(vm.sessionsList.length >= denseListSessionCount + 2, 'session browser should load the large isolated codex dataset');

From 605723a25b56f272e432057bd5caf30c7a709374 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 12:27:59 +0000
Subject: [PATCH 13/17] fix(web-ui): cap huge-line session previews

---
 cli.js                                   | 15 ++++++---
 tests/e2e/test-sessions.js               |  8 +++++
 tests/e2e/test-web-ui-session-browser.js | 43 ++++++++++++++++++++++--
 3 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/cli.js b/cli.js
index 034f7d1b..9c445c0a 100644
--- a/cli.js
+++ b/cli.js
@@ -122,6 +122,7 @@ const CODEXMATE_MANAGED_MARKER = '# codexmate-managed: true';
 const SESSION_LIST_CACHE_TTL_MS = 4000;
 const SESSION_SUMMARY_READ_BYTES = 256 * 1024;
 const SESSION_CONTENT_READ_BYTES = SESSION_SUMMARY_READ_BYTES;
+const SESSION_PREVIEW_MESSAGE_TEXT_MAX_LENGTH = 4000;
 const EXACT_MESSAGE_COUNT_CACHE_MAX_ENTRIES = 800;
 const DEFAULT_CONTENT_SCAN_LIMIT = 50;
 const SESSION_SCAN_FACTOR = 4;
@@ -7973,10 +7974,16 @@ async function readSessionDetail(params = {}) {
     const startIndex = hasExactTotalMessages
         ? Math.max(0, extracted.totalMessages - clippedMessages.length)
         : 0;
-    const indexedMessages = clippedMessages.map((message, messageIndex) => ({
-        ...message,
-        messageIndex: startIndex + messageIndex
-    }));
+    const indexedMessages = clippedMessages.map((message, messageIndex) => {
+        const normalizedMessage = {
+            ...message,
+            messageIndex: startIndex + messageIndex
+        };
+        if (preview && typeof normalizedMessage.text === 'string') {
+            normalizedMessage.text = truncateText(normalizedMessage.text, SESSION_PREVIEW_MESSAGE_TEXT_MAX_LENGTH);
+        }
+        return normalizedMessage;
+    });
 
     return {
         source,
diff --git a/tests/e2e/test-sessions.js b/tests/e2e/test-sessions.js
index a000d34f..43010439 100644
--- a/tests/e2e/test-sessions.js
+++ b/tests/e2e/test-sessions.js
@@ -334,6 +334,10 @@ module.exports = async function testSessions(ctx) {
         assert(hugeLinePreview.messages.length > 0, 'session-detail preview should fall back when huge lines exceed the fast tail window');
         assert(hugeLinePreview.messages.length <= 3, 'session-detail preview should not duplicate huge-line messages');
         assert(hugeLinePreview.clipped === false, 'session-detail preview should report unclipped when fallback can read the whole huge-line session');
+        assert(
+            hugeLinePreview.messages.every((message) => typeof message.text === 'string' && message.text.length <= 4000),
+            'session-detail preview should cap huge-line payload text before sending it to the web ui'
+        );
 
         const hugeLineDetail = await api('session-detail', {
             source: 'codex',
@@ -342,6 +346,10 @@ module.exports = async function testSessions(ctx) {
         });
         assert(hugeLineDetail.totalMessages === 3, 'session-detail should keep exact totalMessages for huge-line sessions');
         assert(hugeLineDetail.messages.length === 3, 'session-detail should keep all huge-line messages when under limit');
+        assert(
+            hugeLineDetail.messages.some((message) => typeof message.text === 'string' && message.text.length > 1000000),
+            'full session-detail should keep the original huge-line content outside preview mode'
+        );
 
         deleteLongResult = await api('trash-session', { source: 'codex', sessionId: longSessionId });
         assert(deleteLongResult.success === true, 'trash-session should trash long codex session');
diff --git a/tests/e2e/test-web-ui-session-browser.js b/tests/e2e/test-web-ui-session-browser.js
index 26451677..b8dbedfa 100644
--- a/tests/e2e/test-web-ui-session-browser.js
+++ b/tests/e2e/test-web-ui-session-browser.js
@@ -179,6 +179,7 @@ module.exports = async function testWebUiSessionBrowser(ctx) {
     const hotSessionId = 'session-browser-hot-large-e2e';
     const hotSessionMessageCount = 1325;
     const hugeLineSessionId = 'session-browser-huge-line-e2e';
+    const initialHugeLineSessionId = 'session-browser-huge-line-initial-e2e';
 
     for (let i = 0; i < denseListSessionCount; i += 1) {
         const sessionId = `session-browser-list-${String(i).padStart(3, '0')}`;
@@ -214,6 +215,24 @@ module.exports = async function testWebUiSessionBrowser(ctx) {
         cwd: '/tmp/session-browser-hot-large'
     }));
 
+    writeCodexSessionFile(
+        sessionsDir,
+        initialHugeLineSessionId,
+        [{
+            type: 'session_meta',
+            payload: { id: initialHugeLineSessionId, cwd: '/tmp/session-browser-huge-line-initial' },
+            timestamp: '2025-04-04T00:00:00.000Z'
+        }].concat(Array.from({ length: 2 }, (_, index) => ({
+            type: 'response_item',
+            payload: {
+                type: 'message',
+                role: index % 2 === 0 ? 'user' : 'assistant',
+                content: `session-browser-huge-line-initial-${index}-` + 'z'.repeat(1300000)
+            },
+            timestamp: createIso(Date.parse('2025-04-04T00:00:00.000Z'), index + 1)
+        })))
+    );
+
     const { appOptions, withGlobalOverrides } = await getBundledWebUiHarness();
     const vm = createWebUiVm(appOptions);
     vm.mainTab = 'settings';
@@ -231,15 +250,33 @@ module.exports = async function testWebUiSessionBrowser(ctx) {
         );
         await flushScheduledFrames(vm);
         await waitForCondition(
-            () => vm.activeSession && vm.activeSession.sessionId === hotSessionId && vm.sessionDetailLoading === false && vm.activeSessionMessages.length > 0,
+            () => vm.activeSession && vm.activeSession.sessionId === initialHugeLineSessionId && vm.sessionDetailLoading === false && vm.activeSessionMessages.length > 0,
             'session browser switchMainTab did not finish detail hydration'
         );
     });
 
-    assert(vm.sessionsList.length >= denseListSessionCount + 2, 'session browser should load the large isolated codex dataset');
+    assert(vm.sessionsList.length >= denseListSessionCount + 3, 'session browser should load the large isolated codex dataset');
     assert(vm.sessionsList.every((item) => String(item.filePath || '').startsWith(sessionsDir)), 'session browser e2e should stay inside the isolated tmp HOME dataset');
-    assert(vm.activeSession && vm.activeSession.sessionId === hotSessionId, 'session browser should select the newest hot session from the isolated dataset');
+    assert(vm.activeSession && vm.activeSession.sessionId === initialHugeLineSessionId, 'session browser should select the newest session from the isolated dataset on tab entry');
     assert(vm.visibleSessionsList.length === vm.sessionListInitialBatchSize, 'session browser should render only the first session list batch initially');
+    assert(vm.activeSessionMessages.length > 0, 'session browser should hydrate the initially selected huge-line session on tab entry');
+    assert(vm.activeSessionMessages.length <= 2, 'session browser should not duplicate the initial huge-line preview messages');
+    assert(vm.activeSessionMessages.every((message) => typeof message.text === 'string' && message.text.length <= 4000), 'session browser should cap huge-line preview text on initial tab entry');
+    assert(vm.activeSessionDetailClipped === false, 'session browser should fully recover small huge-line sessions on initial tab entry');
+    assert(vm.activeSessionVisibleMessages.length === vm.activeSessionMessages.length, 'session browser should render all truncated huge-line preview messages on initial tab entry');
+
+    const hotSession = vm.sessionsList.find((item) => item.sessionId === hotSessionId);
+    assert(hotSession, 'session browser should list the hot large regression session');
+
+    await withGlobalOverrides({ fetch, localStorage }, async () => {
+        await vm.selectSession(hotSession);
+        await flushScheduledFrames(vm);
+        await waitForCondition(
+            () => vm.activeSession && vm.activeSession.sessionId === hotSessionId && vm.sessionDetailLoading === false && vm.activeSessionMessages.length > 0,
+            'session browser hot large selection did not finish loading'
+        );
+    });
+
     assert(vm.activeSessionMessages.length === vm.sessionDetailInitialMessageLimit, 'session browser preview should hydrate only the initial detail window for huge sessions');
     assert(vm.activeSessionDetailClipped === true, 'session browser preview should stay clipped for huge sessions');
     assert(vm.activeSessionVisibleMessages.length === vm.sessionPreviewInitialBatchSize, 'session browser should render only the first preview batch initially');

From 57b45c0d96fe89e408d6e108c1e7135cf2812c66 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 13:06:13 +0000
Subject: [PATCH 14/17] fix(web-ui): stop session tab preview from freezing

---
 ...ssion-browser-timeline-regression.test.mjs | 74 +++++++++++++++++++
 tests/unit/web-ui-behavior-parity.test.mjs    |  1 +
 ...-ui-runtime-navigation-regression.test.mjs | 39 ++++++++++
 web-ui/app.js                                 |  4 +-
 web-ui/logic.sessions.mjs                     |  2 +-
 web-ui/modules/app.methods.navigation.mjs     | 14 ++--
 .../modules/app.methods.session-timeline.mjs  | 37 ++++++----
 7 files changed, 146 insertions(+), 25 deletions(-)

diff --git a/tests/unit/session-browser-timeline-regression.test.mjs b/tests/unit/session-browser-timeline-regression.test.mjs
index 9d1e4f9d..bf278d5a 100644
--- a/tests/unit/session-browser-timeline-regression.test.mjs
+++ b/tests/unit/session-browser-timeline-regression.test.mjs
@@ -265,3 +265,77 @@ test('timeline header offset uses sessionPreviewHeaderEl when container header i
     methods.jumpToSessionTimelineNode.call(context, 'm1');
     assert.strictEqual(lastScrollTo, 248);
 });
+
+test('updateSessionTimelineOffset skips container writes until the timeline is actually renderable', () => {
+    const methods = createSessionTimelineMethods();
+    const writes = [];
+    const removals = [];
+    const context = {
+        sessionTimelineEnabled: true,
+        mainTab: 'sessions',
+        sessionPreviewRenderEnabled: true,
+        sessionTimelineNodes: [],
+        sessionPreviewContainerEl: {
+            style: {
+                setProperty(name, value) {
+                    writes.push({ name, value });
+                },
+                removeProperty(name) {
+                    removals.push(name);
+                }
+            },
+            querySelector() {
+                return null;
+            }
+        },
+        $refs: {},
+        getMainTabForNav() {
+            return 'sessions';
+        },
+        hasRenderableSessionTimeline: methods.hasRenderableSessionTimeline
+    };
+
+    methods.updateSessionTimelineOffset.call(context);
+
+    assert.deepStrictEqual(writes, []);
+    assert.deepStrictEqual(removals, []);
+});
+
+test('updateSessionTimelineOffset writes once when timeline nodes are present and skips duplicate offsets', () => {
+    const methods = createSessionTimelineMethods();
+    const writes = [];
+    const context = {
+        sessionTimelineEnabled: true,
+        mainTab: 'sessions',
+        sessionPreviewRenderEnabled: true,
+        sessionTimelineNodes: [{ key: 'm1' }],
+        sessionPreviewHeaderEl: {
+            getBoundingClientRect() {
+                return { height: 40 };
+            }
+        },
+        sessionPreviewContainerEl: {
+            style: {
+                setProperty(name, value) {
+                    writes.push({ name, value });
+                },
+                removeProperty() {}
+            },
+            querySelector() {
+                return null;
+            }
+        },
+        $refs: {},
+        getMainTabForNav() {
+            return 'sessions';
+        },
+        hasRenderableSessionTimeline: methods.hasRenderableSessionTimeline
+    };
+
+    methods.updateSessionTimelineOffset.call(context);
+    methods.updateSessionTimelineOffset.call(context);
+
+    assert.deepStrictEqual(writes, [
+        { name: '--session-preview-header-offset', value: '52px' }
+    ]);
+});
diff --git a/tests/unit/web-ui-behavior-parity.test.mjs b/tests/unit/web-ui-behavior-parity.test.mjs
index 94f2756f..4c6b4806 100644
--- a/tests/unit/web-ui-behavior-parity.test.mjs
+++ b/tests/unit/web-ui-behavior-parity.test.mjs
@@ -385,6 +385,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'resetSessionListRender',
         'scheduleSessionListViewportFill',
         'setSessionListRef',
+        'hasRenderableSessionTimeline',
         'syncDefaultOpenclawConfigEntry'
     ];
     const allowedMissingCurrentMethodKeys = [
diff --git a/tests/unit/web-ui-runtime-navigation-regression.test.mjs b/tests/unit/web-ui-runtime-navigation-regression.test.mjs
index 86b4d4f8..259e3ecd 100644
--- a/tests/unit/web-ui-runtime-navigation-regression.test.mjs
+++ b/tests/unit/web-ui-runtime-navigation-regression.test.mjs
@@ -401,6 +401,45 @@ test('prepareSessionTabRender re-enables list before preview and primes preview
     assert.strictEqual(context._timelineSyncCalls, 1);
 });
 
+test('scheduleSessionListViewportFill waits for a measured list element before auto-growing', () => {
+    const methods = createNavigationMethods({
+        configModeSet: new Set(['codex', 'claude', 'openclaw']),
+        switchMainTabHelper(tab) {
+            this.mainTab = tab;
+        },
+        loadMoreSessionMessagesHelper() {}
+    });
+    const idleTasks = [];
+    const context = createNavigationContext(methods, {
+        mainTab: 'sessions',
+        sessionListRenderEnabled: true,
+        sessionListVisibleCount: 0,
+        sessionListInitialBatchSize: 20,
+        sessionListLoadStep: 40,
+        sortedSessionsList: Array.from({ length: 60 }, (_, index) => ({ source: 'codex', sessionId: `sess-${index}`, filePath: `/tmp/sess-${index}.jsonl` })),
+        activeSession: null,
+        __sessionListRef: null,
+        scheduleIdleTask(task) {
+            idleTasks.push(task);
+            return task;
+        },
+        cancelIdleTask() {},
+        getSessionExportKey(session) {
+            return `${session.source}:${session.sessionId}:${session.filePath}`;
+        }
+    });
+
+    context.primeSessionListRender();
+
+    assert.strictEqual(context.sessionListVisibleCount, 20);
+    assert.strictEqual(idleTasks.length, 1);
+
+    idleTasks.shift()();
+
+    assert.strictEqual(context.sessionListVisibleCount, 20);
+    assert.strictEqual(idleTasks.length, 0);
+});
+
 test('download directory actions clear stale delayed progress resets before scheduling a new one', async () => {
     await verifyDownloadProgressResetCleanup({
         methodName: 'downloadClaudeDirectory',
diff --git a/web-ui/app.js b/web-ui/app.js
index bfe75567..b837993b 100644
--- a/web-ui/app.js
+++ b/web-ui/app.js
@@ -182,8 +182,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 sessionPreviewHeaderResizeObserver: null,
                 sessionListRenderEnabled: false,
                 sessionListVisibleCount: 0,
-                sessionListInitialBatchSize: 80,
-                sessionListLoadStep: 120,
+                sessionListInitialBatchSize: 20,
+                sessionListLoadStep: 40,
                 sessionPreviewRenderEnabled: false,
                 sessionTabRenderTicket: 0,
                 sessionPreviewVisibleCount: 0,
diff --git a/web-ui/logic.sessions.mjs b/web-ui/logic.sessions.mjs
index 4ca5a2ba..57f35aa4 100644
--- a/web-ui/logic.sessions.mjs
+++ b/web-ui/logic.sessions.mjs
@@ -1,5 +1,5 @@
 export const DEFAULT_SESSION_LIST_LIMIT = 200;
-export const DEFAULT_SESSION_LIST_FAST_LIMIT = 40;
+export const DEFAULT_SESSION_LIST_FAST_LIMIT = 20;
 
 function shouldUseFastSessionBrowseLimit(options = {}) {
     if (options.forceRefresh) {
diff --git a/web-ui/modules/app.methods.navigation.mjs b/web-ui/modules/app.methods.navigation.mjs
index ee05134f..63555529 100644
--- a/web-ui/modules/app.methods.navigation.mjs
+++ b/web-ui/modules/app.methods.navigation.mjs
@@ -473,14 +473,14 @@ export function createNavigationMethods(options = {}) {
                     return;
                 }
                 const listEl = this.__sessionListRef || null;
-                let shouldGrow = !listEl;
-                if (listEl) {
-                    const clientHeight = Number(listEl.clientHeight) || 0;
-                    const scrollHeight = Number(listEl.scrollHeight) || 0;
-                    const scrollTop = Number(listEl.scrollTop) || 0;
-                    const remaining = Math.max(0, scrollHeight - scrollTop - clientHeight);
-                    shouldGrow = scrollHeight <= (clientHeight + 160) || remaining <= Math.max(160, clientHeight);
+                if (!listEl) {
+                    return;
                 }
+                const clientHeight = Number(listEl.clientHeight) || 0;
+                const scrollHeight = Number(listEl.scrollHeight) || 0;
+                const scrollTop = Number(listEl.scrollTop) || 0;
+                const remaining = Math.max(0, scrollHeight - scrollTop - clientHeight);
+                const shouldGrow = scrollHeight <= (clientHeight + 160) || remaining <= Math.max(160, clientHeight);
                 if (!shouldGrow) {
                     return;
                 }
diff --git a/web-ui/modules/app.methods.session-timeline.mjs b/web-ui/modules/app.methods.session-timeline.mjs
index 1a422abc..03820bf6 100644
--- a/web-ui/modules/app.methods.session-timeline.mjs
+++ b/web-ui/modules/app.methods.session-timeline.mjs
@@ -22,6 +22,16 @@ export function createSessionTimelineMethods() {
     };
 
     return {
+        hasRenderableSessionTimeline() {
+            return !!(
+                this.sessionTimelineEnabled
+                && this.mainTab === 'sessions'
+                && this.getMainTabForNav() === 'sessions'
+                && this.sessionPreviewRenderEnabled
+                && Array.isArray(this.sessionTimelineNodes)
+                && this.sessionTimelineNodes.length
+            );
+        },
         setSessionPreviewContainerRef(el) {
             this.sessionPreviewContainerEl = el || null;
             this.updateSessionTimelineOffset();
@@ -33,21 +43,6 @@ export function createSessionTimelineMethods() {
         },
         observeSessionPreviewHeaderResize() {
             this.disconnectSessionPreviewHeaderResizeObserver();
-            if (!this.sessionPreviewHeaderEl || typeof ResizeObserver !== 'function') return;
-            this.sessionPreviewHeaderResizeObserver = new ResizeObserver(() => {
-                this.updateSessionTimelineOffset();
-                this.invalidateSessionTimelineMeasurementCache();
-                if (
-                    this.sessionTimelineEnabled
-                    && this.mainTab === 'sessions'
-                    && this.getMainTabForNav() === 'sessions'
-                    && this.sessionPreviewRenderEnabled
-                    && this.sessionTimelineNodes.length
-                ) {
-                    this.scheduleSessionTimelineSync();
-                }
-            });
-            this.sessionPreviewHeaderResizeObserver.observe(this.sessionPreviewHeaderEl);
         },
         setSessionPreviewHeaderRef(el) {
             this.disconnectSessionPreviewHeaderResizeObserver();
@@ -191,7 +186,18 @@ export function createSessionTimelineMethods() {
         updateSessionTimelineOffset() {
             const container = this.sessionPreviewContainerEl || this.$refs.sessionPreviewContainer;
             if (!container || !container.style) return;
+            if (!this.hasRenderableSessionTimeline()) {
+                if (this.__sessionPreviewHeaderOffsetPx != null) {
+                    container.style.removeProperty('--session-preview-header-offset');
+                    this.__sessionPreviewHeaderOffsetPx = null;
+                }
+                return;
+            }
             const offset = getSessionPreviewHeaderOffset(this);
+            if (this.__sessionPreviewHeaderOffsetPx === offset) {
+                return;
+            }
+            this.__sessionPreviewHeaderOffsetPx = offset;
             container.style.setProperty('--session-preview-header-offset', `${offset}px`);
         },
         bindSessionMessageRef(messageKey, el, ticket = this.sessionTabRenderTicket) {
@@ -237,6 +243,7 @@ export function createSessionTimelineMethods() {
             this.sessionTimelineRafId = 0;
         },
         scheduleSessionTimelineSync() {
+            this.updateSessionTimelineOffset();
             if (this.sessionTimelineRafId) return;
             if (typeof requestAnimationFrame === 'function') {
                 this.sessionTimelineRafId = requestAnimationFrame(() => {

From f29830466f75193e1a2371ce814824fe5dcf5709 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 16:12:58 +0000
Subject: [PATCH 15/17] fix(web-ui): add native session load debug alerts

---
 tests/unit/web-ui-behavior-parity.test.mjs    |   2 +
 .../modules/app.methods.session-browser.mjs   | 135 +++++++++++++++++-
 web-ui/session-helpers.mjs                    |  69 ++++++++-
 3 files changed, 201 insertions(+), 5 deletions(-)

diff --git a/tests/unit/web-ui-behavior-parity.test.mjs b/tests/unit/web-ui-behavior-parity.test.mjs
index 4c6b4806..5e91cbf1 100644
--- a/tests/unit/web-ui-behavior-parity.test.mjs
+++ b/tests/unit/web-ui-behavior-parity.test.mjs
@@ -375,6 +375,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'getProviderValidation',
         'invalidateSessionsUsageData',
         'isReservedProviderCreationName',
+        'isSessionLoadNativeDialogEnabled',
         'isValidProviderNameInput',
         'isValidProviderUrlInput',
         'loadSessionsUsage',
@@ -382,6 +383,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'normalizeProviderDraft',
         'primeSessionListRender',
         'providerFieldError',
+        'emitSessionLoadNativeDialog',
         'resetSessionListRender',
         'scheduleSessionListViewportFill',
         'setSessionListRef',
diff --git a/web-ui/modules/app.methods.session-browser.mjs b/web-ui/modules/app.methods.session-browser.mjs
index 626e3f39..35aa4492 100644
--- a/web-ui/modules/app.methods.session-browser.mjs
+++ b/web-ui/modules/app.methods.session-browser.mjs
@@ -5,6 +5,69 @@ import {
     normalizeSessionPathFilter
 } from '../logic.mjs';
 
+function isSessionLoadNativeDialogEnabled(vm) {
+    if (vm && typeof vm.isSessionLoadNativeDialogEnabled === 'function' && vm.isSessionLoadNativeDialogEnabled !== isSessionLoadNativeDialogEnabled) {
+        try {
+            return !!vm.isSessionLoadNativeDialogEnabled();
+        } catch (_) {
+            // fall through to shared detection
+        }
+    }
+
+    try {
+        if (globalThis && globalThis.__CODEXMATE_SESSION_LOAD_NATIVE_DIALOG__ === true) {
+            return true;
+        }
+    } catch (_) {
+        // ignore global flag lookup failures
+    }
+
+    try {
+        if (typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function') {
+            const stored = String(localStorage.getItem('codexmateSessionLoadNativeDialog') || '').trim().toLowerCase();
+            if (stored === '1' || stored === 'true' || stored === 'yes' || stored === 'on') {
+                return true;
+            }
+        }
+    } catch (_) {
+        // ignore storage lookup failures
+    }
+
+    try {
+        const search = typeof location !== 'undefined' && location && typeof location.search === 'string'
+            ? location.search
+            : (typeof window !== 'undefined' && window.location && typeof window.location.search === 'string'
+                ? window.location.search
+                : '');
+        if (!search) {
+            return false;
+        }
+        const params = new URLSearchParams(search);
+        const value = String(params.get('sessionLoadNativeDialog') || '').trim().toLowerCase();
+        return value === '1' || value === 'true' || value === 'yes' || value === 'on';
+    } catch (_) {
+        return false;
+    }
+}
+
+function emitSessionLoadNativeDialog(vm, step, details = '') {
+    if (!isSessionLoadNativeDialogEnabled(vm)) {
+        return;
+    }
+    const alertFn = typeof globalThis.alert === 'function'
+        ? globalThis.alert.bind(globalThis)
+        : (typeof window !== 'undefined' && typeof window.alert === 'function'
+            ? window.alert.bind(window)
+            : null);
+    if (!alertFn) {
+        return;
+    }
+    const message = details
+        ? `[codexmate][session-load] ${step}\n${details}`
+        : `[codexmate][session-load] ${step}`;
+    alertFn(message);
+}
+
 export function createSessionBrowserMethods(options = {}) {
     const {
         api,
@@ -84,11 +147,20 @@ export function createSessionBrowserMethods(options = {}) {
             }
         },
 
+        isSessionLoadNativeDialogEnabled() {
+            return isSessionLoadNativeDialogEnabled(this);
+        },
+
+        emitSessionLoadNativeDialog(step, details = '') {
+            emitSessionLoadNativeDialog(this, step, details);
+        },
+
         async loadSessionPathOptions(options = {}) {
             const source = options.source === 'claude' ? 'claude' : (options.source === 'all' ? 'all' : 'codex');
             const forceRefresh = !!options.forceRefresh;
             const loaded = !!this.sessionPathOptionsLoadedMap[source];
             if (!forceRefresh && loaded) {
+                emitSessionLoadNativeDialog(this, 'loadSessionPathOptions:cache-hit', `source=${source}`);
                 if (source === this.sessionFilterSource) {
                     this.sessionPathOptionsLoading = false;
                 }
@@ -101,6 +173,11 @@ export function createSessionBrowserMethods(options = {}) {
             const requestSeq = (Number(nextSeqMap[source]) || 0) + 1;
             nextSeqMap[source] = requestSeq;
             this.sessionPathRequestSeqMap = nextSeqMap;
+            emitSessionLoadNativeDialog(
+                this,
+                'loadSessionPathOptions:start',
+                `source=${source}\nforceRefresh=${forceRefresh}\nrequestSeq=${requestSeq}`
+            );
             if (source === this.sessionFilterSource) {
                 this.sessionPathOptionsLoading = true;
             }
@@ -111,6 +188,11 @@ export function createSessionBrowserMethods(options = {}) {
                     forceRefresh
                 });
                 if (requestSeq !== Number(((this.sessionPathRequestSeqMap || {})[source]) || 0)) {
+                    emitSessionLoadNativeDialog(
+                        this,
+                        'loadSessionPathOptions:stale-response',
+                        `source=${source}\nrequestSeq=${requestSeq}`
+                    );
                     return;
                 }
                 if (res && !res.error && Array.isArray(res.paths)) {
@@ -119,8 +201,24 @@ export function createSessionBrowserMethods(options = {}) {
                         ...this.sessionPathOptionsLoadedMap,
                         [source]: true
                     };
+                    emitSessionLoadNativeDialog(
+                        this,
+                        'loadSessionPathOptions:success',
+                        `source=${source}\npaths=${res.paths.length}`
+                    );
+                } else if (res && res.error) {
+                    emitSessionLoadNativeDialog(
+                        this,
+                        'loadSessionPathOptions:error',
+                        `source=${source}\nerror=${res.error}`
+                    );
                 }
-            } catch (_) {
+            } catch (error) {
+                emitSessionLoadNativeDialog(
+                    this,
+                    'loadSessionPathOptions:exception',
+                    `source=${source}\nerror=${error && error.message ? error.message : String(error)}`
+                );
                 // 路径补全失败不影响会话主流程
             } finally {
                 if (
@@ -129,6 +227,11 @@ export function createSessionBrowserMethods(options = {}) {
                 ) {
                     this.sessionPathOptionsLoading = false;
                 }
+                emitSessionLoadNativeDialog(
+                    this,
+                    'loadSessionPathOptions:complete',
+                    `source=${source}\nrequestSeq=${requestSeq}`
+                );
             }
         },
 
@@ -403,25 +506,47 @@ export function createSessionBrowserMethods(options = {}) {
         },
 
         async selectSession(session) {
-            if (!session) return;
+            if (!session) {
+                emitSessionLoadNativeDialog(this, 'selectSession:skip-empty');
+                return;
+            }
+            emitSessionLoadNativeDialog(
+                this,
+                'selectSession:start',
+                `sessionId=${session.sessionId || ''}\nsource=${session.source || ''}`
+            );
             const isSameSession = this.activeSession
                 && this.getSessionExportKey(this.activeSession) === this.getSessionExportKey(session);
             if (isSameSession) {
-                if (this.sessionDetailLoading) return;
+                emitSessionLoadNativeDialog(this, 'selectSession:same-session', `sessionId=${session.sessionId || ''}`);
+                if (this.sessionDetailLoading) {
+                    emitSessionLoadNativeDialog(this, 'selectSession:skip-detail-loading', `sessionId=${session.sessionId || ''}`);
+                    return;
+                }
                 const currentMessages = Array.isArray(this.activeSessionMessages) ? this.activeSessionMessages : [];
-                if (currentMessages.length > 0) return;
+                if (currentMessages.length > 0) {
+                    emitSessionLoadNativeDialog(
+                        this,
+                        'selectSession:skip-existing-messages',
+                        `sessionId=${session.sessionId || ''}\nmessages=${currentMessages.length}`
+                    );
+                    return;
+                }
                 if (typeof this.scheduleAfterFrame === 'function') {
                     const selectedSession = this.activeSession;
+                    emitSessionLoadNativeDialog(this, 'selectSession:schedule-detail', `sessionId=${session.sessionId || ''}`);
                     this.scheduleAfterFrame(() => {
                         if (this.activeSession !== selectedSession) return;
                         void this.loadActiveSessionDetail();
                     });
                     return;
                 }
+                emitSessionLoadNativeDialog(this, 'selectSession:load-detail-now', `sessionId=${session.sessionId || ''}`);
                 await this.loadActiveSessionDetail();
                 return;
             }
             this.activeSession = session;
+            emitSessionLoadNativeDialog(this, 'selectSession:activate', `sessionId=${session.sessionId || ''}`);
             if (typeof this.expandVisibleSessionList === 'function') {
                 this.expandVisibleSessionList(0, { ensureActive: true });
             }
@@ -435,12 +560,14 @@ export function createSessionBrowserMethods(options = {}) {
             this.clearSessionTimelineRefs();
             if (typeof this.scheduleAfterFrame === 'function') {
                 const selectedSession = this.activeSession;
+                emitSessionLoadNativeDialog(this, 'selectSession:schedule-detail', `sessionId=${session.sessionId || ''}`);
                 this.scheduleAfterFrame(() => {
                     if (this.activeSession !== selectedSession) return;
                     void this.loadActiveSessionDetail();
                 });
                 return;
             }
+            emitSessionLoadNativeDialog(this, 'selectSession:load-detail-now', `sessionId=${session.sessionId || ''}`);
             await this.loadActiveSessionDetail();
         },
 
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index a4f94711..737b8fe3 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -45,6 +45,13 @@ function shouldIncludeActiveSessionDetail(vm, options = {}) {
     return vm.mainTab === 'sessions' || !!vm.sessionStandalone;
 }
 
+function emitSessionLoadDebug(vm, step, details = '') {
+    if (!vm || typeof vm.emitSessionLoadNativeDialog !== 'function') {
+        return;
+    }
+    vm.emitSessionLoadNativeDialog(step, details);
+}
+
 function scheduleSessionDetailHydration(vm, options = {}) {
     if (!vm || typeof vm.loadActiveSessionDetail !== 'function') {
         return;
@@ -58,11 +65,14 @@ function scheduleSessionDetailHydration(vm, options = {}) {
         if (vm.sessionDetailLoading) return;
         const currentMessages = Array.isArray(vm.activeSessionMessages) ? vm.activeSessionMessages : [];
         if (!options.force && currentMessages.length > 0) {
+            emitSessionLoadDebug(vm, 'scheduleSessionDetailHydration:skip-existing-messages', `messages=${currentMessages.length}`);
             return;
         }
+        emitSessionLoadDebug(vm, 'scheduleSessionDetailHydration:run', `sessionId=${vm.activeSession && vm.activeSession.sessionId ? vm.activeSession.sessionId : ''}`);
         void vm.loadActiveSessionDetail(options);
     };
     if (typeof vm.scheduleAfterFrame === 'function') {
+        emitSessionLoadDebug(vm, 'scheduleSessionDetailHydration:queued');
         vm.scheduleAfterFrame(task);
         return;
     }
@@ -75,6 +85,7 @@ export function switchMainTab(tab) {
     const leavingSessions = previousTab === 'sessions' && nextTab !== 'sessions';
     const enteringSessionsTab = nextTab === 'sessions';
     const enteringUsageTab = nextTab === 'usage';
+    emitSessionLoadDebug(this, 'switchMainTab:start', `from=${previousTab}\nto=${nextTab}`);
     this.mainTab = nextTab;
 
     if (leavingSessions) {
@@ -102,15 +113,27 @@ export function switchMainTab(tab) {
 
     if (enteringSessionsTab && !this.sessionsLoadedOnce) {
         const canStageInitialSessionDetail = typeof this.scheduleAfterFrame === 'function';
+        emitSessionLoadDebug(
+            this,
+            'switchMainTab:enter-sessions',
+            `sessionsLoadedOnce=${!!this.sessionsLoadedOnce}\nstagedDetail=${canStageInitialSessionDetail}`
+        );
         const loadResult = this.loadSessions({
             includeActiveDetail: !canStageInitialSessionDetail
         });
         if (canStageInitialSessionDetail) {
             void Promise.resolve(loadResult)
                 .then(() => {
+                    emitSessionLoadDebug(this, 'switchMainTab:loadSessions-resolved');
                     scheduleSessionDetailHydration(this);
                 })
-                .catch(() => {});
+                .catch((error) => {
+                    emitSessionLoadDebug(
+                        this,
+                        'switchMainTab:loadSessions-rejected',
+                        error && error.message ? error.message : String(error)
+                    );
+                });
         }
     }
     if (enteringUsageTab && !this.sessionsUsageLoadedOnce && typeof this.loadSessionsUsage === 'function') {
@@ -167,6 +190,7 @@ export async function loadSessions(api, options = {}) {
             this.__sessionPendingLoadOptions,
             options
         );
+        emitSessionLoadDebug(this, 'loadSessions:queued-while-busy');
         return;
     }
     const normalizedOptions = normalizeSessionLoadOptions(options);
@@ -182,10 +206,16 @@ export async function loadSessions(api, options = {}) {
         timeRangePreset: this.sessionTimePreset,
         forceRefresh: normalizedOptions.forceRefresh
     });
+    emitSessionLoadDebug(
+        this,
+        'loadSessions:start',
+        `source=${params.source || ''}\nforceRefresh=${!!params.forceRefresh}\nincludeActiveDetail=${includeActiveDetail}`
+    );
     let pendingOptions = null;
     try {
         const res = await api('list-sessions', params);
         if (res.error) {
+            emitSessionLoadDebug(this, 'loadSessions:error-response', `error=${res.error}`);
             this.showMessage(res.error, 'error');
             this.sessionsList = [];
             if (typeof this.primeSessionListRender === 'function') {
@@ -202,6 +232,7 @@ export async function loadSessions(api, options = {}) {
         } else {
             loadSucceeded = true;
             this.sessionsList = Array.isArray(res.sessions) ? res.sessions : [];
+            emitSessionLoadDebug(this, 'loadSessions:response', `sessions=${this.sessionsList.length}`);
             if (typeof this.primeSessionListRender === 'function') {
                 this.primeSessionListRender();
             }
@@ -211,6 +242,7 @@ export async function loadSessions(api, options = {}) {
                 true
             );
             if (this.sessionsList.length === 0) {
+                emitSessionLoadDebug(this, 'loadSessions:empty');
                 this.activeSession = null;
                 this.activeSessionMessages = [];
                 this.resetSessionDetailPagination();
@@ -223,6 +255,11 @@ export async function loadSessions(api, options = {}) {
                 const oldKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
                 const matched = this.sessionsList.find(item => this.getSessionExportKey(item) === oldKey);
                 this.activeSession = matched || this.sessionsList[0];
+                emitSessionLoadDebug(
+                    this,
+                    'loadSessions:active-session-selected',
+                    `sessionId=${this.activeSession && this.activeSession.sessionId ? this.activeSession.sessionId : ''}`
+                );
                 this.activeSessionMessages = [];
                 this.resetSessionDetailPagination();
                 this.resetSessionPreviewMessageRender();
@@ -232,11 +269,17 @@ export async function loadSessions(api, options = {}) {
                 this.sessionTimelineActiveKey = '';
                 clearSessionTimelineRefs(this);
                 if (includeActiveDetail) {
+                    emitSessionLoadDebug(
+                        this,
+                        'loadSessions:hydrate-active-detail',
+                        `sessionId=${this.activeSession && this.activeSession.sessionId ? this.activeSession.sessionId : ''}`
+                    );
                     await this.loadActiveSessionDetail();
                 }
             }
         }
     } catch (e) {
+        emitSessionLoadDebug(this, 'loadSessions:exception', e && e.message ? e.message : String(e));
         this.sessionsList = [];
         if (typeof this.primeSessionListRender === 'function') {
             this.primeSessionListRender();
@@ -257,14 +300,21 @@ export async function loadSessions(api, options = {}) {
         }
         pendingOptions = this.__sessionPendingLoadOptions || null;
         this.__sessionPendingLoadOptions = null;
+        emitSessionLoadDebug(
+            this,
+            'loadSessions:complete',
+            `loadSucceeded=${loadSucceeded}\npendingReload=${!!pendingOptions}`
+        );
     }
     if (pendingOptions) {
+        emitSessionLoadDebug(this, 'loadSessions:replay-pending-request');
         return loadSessions.call(this, api, pendingOptions);
     }
 }
 
 export async function loadActiveSessionDetail(api, options = {}) {
     if (!this.activeSession) {
+        emitSessionLoadDebug(this, 'loadActiveSessionDetail:skip-no-active-session');
         this.activeSessionMessages = [];
         this.resetSessionDetailPagination();
         this.resetSessionPreviewMessageRender();
@@ -280,6 +330,11 @@ export async function loadActiveSessionDetail(api, options = {}) {
     const requestSeq = ++this.sessionDetailRequestSeq;
     this.sessionDetailLoading = true;
     this.activeSessionDetailError = '';
+    emitSessionLoadDebug(
+        this,
+        'loadActiveSessionDetail:start',
+        `sessionId=${currentActiveSession && currentActiveSession.sessionId ? currentActiveSession.sessionId : ''}\nrequestSeq=${requestSeq}`
+    );
     const fallbackLimit = Number.isFinite(this.sessionDetailInitialMessageLimit)
         ? Math.max(1, Math.floor(this.sessionDetailInitialMessageLimit))
         : 80;
@@ -298,13 +353,16 @@ export async function loadActiveSessionDetail(api, options = {}) {
         });
 
         if (requestSeq !== this.sessionDetailRequestSeq) {
+            emitSessionLoadDebug(this, 'loadActiveSessionDetail:stale-request-seq', `requestSeq=${requestSeq}`);
             return;
         }
         if (!this.activeSession || this.activeSession !== currentActiveSession) {
+            emitSessionLoadDebug(this, 'loadActiveSessionDetail:active-session-changed', `requestSeq=${requestSeq}`);
             return;
         }
 
         if (res.error) {
+            emitSessionLoadDebug(this, 'loadActiveSessionDetail:error-response', `error=${res.error}`);
             this.activeSessionMessages = [];
             this.resetSessionPreviewMessageRender();
             this.activeSessionDetailClipped = false;
@@ -318,6 +376,11 @@ export async function loadActiveSessionDetail(api, options = {}) {
         const rawMessages = Array.isArray(res.messages) ? res.messages : [];
         const normalizedMessages = rawMessages.map((message) => Object.freeze(this.normalizeSessionMessage(message)));
         this.activeSessionMessages = Object.freeze(normalizedMessages);
+        emitSessionLoadDebug(
+            this,
+            'loadActiveSessionDetail:messages-ready',
+            `sessionId=${currentActiveSession && currentActiveSession.sessionId ? currentActiveSession.sessionId : ''}\nmessages=${normalizedMessages.length}\nclipped=${!!res.clipped}`
+        );
         if (typeof this.invalidateSessionTimelineMeasurementCache === 'function') {
             this.invalidateSessionTimelineMeasurementCache(true);
         }
@@ -385,11 +448,14 @@ export async function loadActiveSessionDetail(api, options = {}) {
         });
     } catch (e) {
         if (requestSeq !== this.sessionDetailRequestSeq) {
+            emitSessionLoadDebug(this, 'loadActiveSessionDetail:ignore-exception-stale-request', `requestSeq=${requestSeq}`);
             return;
         }
         if (!this.activeSession || this.activeSession !== currentActiveSession) {
+            emitSessionLoadDebug(this, 'loadActiveSessionDetail:ignore-exception-session-changed', `requestSeq=${requestSeq}`);
             return;
         }
+        emitSessionLoadDebug(this, 'loadActiveSessionDetail:exception', e && e.message ? e.message : String(e));
         this.activeSessionMessages = [];
         this.sessionPreviewPendingVisibleCount = 0;
         this.resetSessionPreviewMessageRender();
@@ -402,6 +468,7 @@ export async function loadActiveSessionDetail(api, options = {}) {
         if (requestSeq === this.sessionDetailRequestSeq) {
             this.sessionDetailLoading = false;
         }
+        emitSessionLoadDebug(this, 'loadActiveSessionDetail:complete', `requestSeq=${requestSeq}`);
     }
 }
 

From dc6d587d819eb901c6a8420fe977e5d44539f9f9 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 16:34:37 +0000
Subject: [PATCH 16/17] fix(web-ui): add lightweight usage totals

---
 cli.js                                    | 128 ++++++++++++++++++++++
 tests/e2e/test-sessions.js                |   3 +
 tests/e2e/test-setup.js                   |  15 +++
 tests/unit/session-usage-backend.test.mjs |   6 +-
 tests/unit/session-usage.test.mjs         |  12 +-
 web-ui/logic.sessions.mjs                 |  12 ++
 web-ui/modules/app.computed.session.mjs   |  18 ++-
 7 files changed, 185 insertions(+), 9 deletions(-)

diff --git a/cli.js b/cli.js
index 9c445c0a..98aba2c3 100644
--- a/cli.js
+++ b/cli.js
@@ -5615,6 +5615,102 @@ function invalidateSessionListCache() {
     };
 }
 
+function readNonNegativeInteger(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric) || numeric < 0) {
+        return null;
+    }
+    return Math.floor(numeric);
+}
+
+function readTotalTokensFromUsage(usage) {
+    if (!usage || typeof usage !== 'object' || Array.isArray(usage)) {
+        return null;
+    }
+    const explicitTotal = readNonNegativeInteger(usage.total_tokens ?? usage.totalTokens);
+    if (explicitTotal !== null) {
+        return explicitTotal;
+    }
+    const inputTokens = readNonNegativeInteger(usage.input_tokens ?? usage.inputTokens);
+    const outputTokens = readNonNegativeInteger(usage.output_tokens ?? usage.outputTokens);
+    const reasoningOutputTokens = readNonNegativeInteger(usage.reasoning_output_tokens ?? usage.reasoningOutputTokens);
+    if (inputTokens === null && outputTokens === null && reasoningOutputTokens === null) {
+        return null;
+    }
+    return (inputTokens || 0) + (outputTokens || 0) + (reasoningOutputTokens || 0);
+}
+
+function readContextWindowValue(target) {
+    if (!target || typeof target !== 'object' || Array.isArray(target)) {
+        return null;
+    }
+    return readNonNegativeInteger(
+        target.model_context_window
+        ?? target.modelContextWindow
+        ?? target.context_window
+        ?? target.contextWindow
+    );
+}
+
+function applySessionUsageSummaryFromRecord(state, record, source) {
+    if (!state || typeof state !== 'object' || !record || typeof record !== 'object' || Array.isArray(record)) {
+        return;
+    }
+
+    let totalTokens = null;
+    let contextWindow = null;
+
+    if (source === 'codex') {
+        const payload = record.payload && typeof record.payload === 'object' && !Array.isArray(record.payload)
+            ? record.payload
+            : null;
+        const info = payload && payload.info && typeof payload.info === 'object' && !Array.isArray(payload.info)
+            ? payload.info
+            : null;
+        totalTokens = readTotalTokensFromUsage(info && info.total_token_usage)
+            ?? readTotalTokensFromUsage(payload && payload.total_token_usage)
+            ?? readTotalTokensFromUsage(payload && payload.usage);
+        contextWindow = readContextWindowValue(info)
+            ?? readContextWindowValue(payload);
+    } else {
+        const message = record.message && typeof record.message === 'object' && !Array.isArray(record.message)
+            ? record.message
+            : null;
+        const payload = record.payload && typeof record.payload === 'object' && !Array.isArray(record.payload)
+            ? record.payload
+            : null;
+        totalTokens = readTotalTokensFromUsage(record.usage)
+            ?? readTotalTokensFromUsage(message && message.usage)
+            ?? readTotalTokensFromUsage(payload && payload.usage);
+        contextWindow = readContextWindowValue(record)
+            ?? readContextWindowValue(message)
+            ?? readContextWindowValue(payload);
+    }
+
+    if (totalTokens !== null) {
+        state.totalTokens = Math.max(readNonNegativeInteger(state.totalTokens) || 0, totalTokens);
+    }
+    if (contextWindow !== null) {
+        state.contextWindow = Math.max(readNonNegativeInteger(state.contextWindow) || 0, contextWindow);
+    }
+}
+
+function applySessionUsageSummaryFromIndexEntry(state, entry) {
+    if (!state || typeof state !== 'object' || !entry || typeof entry !== 'object' || Array.isArray(entry)) {
+        return;
+    }
+    const totalTokens = readNonNegativeInteger(entry.totalTokens)
+        ?? readTotalTokensFromUsage(entry.totalTokenUsage)
+        ?? readTotalTokensFromUsage(entry.usage);
+    const contextWindow = readContextWindowValue(entry);
+    if (totalTokens !== null) {
+        state.totalTokens = Math.max(readNonNegativeInteger(state.totalTokens) || 0, totalTokens);
+    }
+    if (contextWindow !== null) {
+        state.contextWindow = Math.max(readNonNegativeInteger(state.contextWindow) || 0, contextWindow);
+    }
+}
+
 function parseCodexSessionSummary(filePath, options = {}) {
     const summaryReadBytes = Number.isFinite(Number(options.summaryReadBytes))
         ? Math.max(1024, Math.floor(Number(options.summaryReadBytes)))
@@ -5640,6 +5736,9 @@ function parseCodexSessionSummary(filePath, options = {}) {
     let updatedAt = stat.mtime.toISOString();
     let firstPrompt = '';
     let messageCount = 0;
+    let totalTokens = 0;
+    let contextWindow = 0;
+    const usageState = { totalTokens, contextWindow };
     const previewMessages = [];
 
     for (const record of records) {
@@ -5647,6 +5746,10 @@ function parseCodexSessionSummary(filePath, options = {}) {
             updatedAt = updateLatestIso(updatedAt, record.timestamp);
         }
 
+        applySessionUsageSummaryFromRecord(usageState, record, 'codex');
+        totalTokens = usageState.totalTokens || 0;
+        contextWindow = usageState.contextWindow || 0;
+
         if (record.type === 'session_meta' && record.payload) {
             sessionId = record.payload.id || sessionId;
             cwd = record.payload.cwd || cwd;
@@ -5704,6 +5807,8 @@ function parseCodexSessionSummary(filePath, options = {}) {
         createdAt,
         updatedAt,
         messageCount,
+        totalTokens,
+        contextWindow,
         __messageCountExact: isSessionSummaryMessageCountExact(stat, summaryReadBytes),
         filePath,
         keywords: [],
@@ -5734,6 +5839,9 @@ function parseClaudeSessionSummary(filePath, options = {}) {
     let cwd = '';
     let firstPrompt = '';
     let messageCount = 0;
+    let totalTokens = 0;
+    let contextWindow = 0;
+    const usageState = { totalTokens, contextWindow };
     const previewMessages = [];
     let createdAt = '';
     let updatedAt = stat.mtime.toISOString();
@@ -5746,6 +5854,10 @@ function parseClaudeSessionSummary(filePath, options = {}) {
             updatedAt = updateLatestIso(updatedAt, record.timestamp);
         }
 
+        applySessionUsageSummaryFromRecord(usageState, record, 'claude');
+        totalTokens = usageState.totalTokens || 0;
+        contextWindow = usageState.contextWindow || 0;
+
         if (!cwd && record.cwd) {
             cwd = record.cwd;
         }
@@ -5800,6 +5912,8 @@ function parseClaudeSessionSummary(filePath, options = {}) {
         createdAt,
         updatedAt,
         messageCount,
+        totalTokens,
+        contextWindow,
         __messageCountExact: isSessionSummaryMessageCountExact(stat, summaryReadBytes),
         filePath,
         keywords: [],
@@ -5921,6 +6035,13 @@ function listClaudeSessions(limit, options = {}) {
             const createdAt = toIsoTime(entry.created, '');
             let title = truncateText(entry.summary || entry.firstPrompt || sessionId, 120);
             let messageCount = Number.isFinite(entry.messageCount) ? Math.max(0, entry.messageCount - 1) : 0;
+            let totalTokens = 0;
+            let contextWindow = 0;
+
+            const usageState = { totalTokens, contextWindow };
+            applySessionUsageSummaryFromIndexEntry(usageState, entry);
+            totalTokens = usageState.totalTokens || 0;
+            contextWindow = usageState.contextWindow || 0;
 
             const quickRecords = parseJsonlHeadRecords(filePath, summaryReadBytes);
             if (quickRecords.length > 0) {
@@ -5931,12 +6052,15 @@ function listClaudeSessions(limit, options = {}) {
 
                 const quickMessages = [];
                 for (const record of quickRecords) {
+                    applySessionUsageSummaryFromRecord(usageState, record, 'claude');
                     const role = normalizeRole(record.type);
                     if (role === 'assistant' || role === 'user' || role === 'system') {
                         const content = record.message ? record.message.content : '';
                         quickMessages.push({ role, text: extractMessageText(content) });
                     }
                 }
+                totalTokens = usageState.totalTokens || 0;
+                contextWindow = usageState.contextWindow || 0;
                 const filteredQuickMessages = removeLeadingSystemMessage(quickMessages);
                 const firstUser = filteredQuickMessages.find(item => item.role === 'user' && item.text);
                 if (firstUser) {
@@ -5960,6 +6084,8 @@ function listClaudeSessions(limit, options = {}) {
                 createdAt,
                 updatedAt,
                 messageCount,
+                totalTokens,
+                contextWindow,
                 __messageCountExact: quickRecords.length > 0 && isSessionSummaryMessageCountExact(fileStat, summaryReadBytes),
                 filePath,
                 keywords,
@@ -6874,6 +7000,8 @@ function buildSessionSummaryFallback(source, filePath, sessionId = '') {
         createdAt: '',
         updatedAt: '',
         messageCount: 0,
+        totalTokens: 0,
+        contextWindow: 0,
         filePath,
         keywords: [],
         capabilities: source === 'claude' ? { code: true } : {}
diff --git a/tests/e2e/test-sessions.js b/tests/e2e/test-sessions.js
index 43010439..5e4bf3e4 100644
--- a/tests/e2e/test-sessions.js
+++ b/tests/e2e/test-sessions.js
@@ -40,6 +40,9 @@ module.exports = async function testSessions(ctx) {
     assert(usageSessions.sessions.some((item) => item.sessionId === sessionId), 'list-sessions-usage missing codex entry');
     assert(usageSessions.sessions.some((item) => item.sessionId === claudeSessionId), 'list-sessions-usage missing claude entry');
     assert(usageSessions.sessions.every((item) => !Object.prototype.hasOwnProperty.call(item, '__messageCountExact')), 'list-sessions-usage should not expose exact hydration markers');
+    const usageCodexEntry = usageSessions.sessions.find((item) => item.sessionId === sessionId);
+    assert(usageCodexEntry && usageCodexEntry.totalTokens === 120, 'list-sessions-usage missing codex totalTokens');
+    assert(usageCodexEntry && usageCodexEntry.contextWindow === 128000, 'list-sessions-usage missing codex contextWindow');
     const defaultUsageSessions = await api('list-sessions-usage');
     assert(Array.isArray(defaultUsageSessions.sessions), 'list-sessions-usage without params should still return sessions');
     assert(defaultUsageSessions.source === 'all', 'list-sessions-usage without params should default source to all');
diff --git a/tests/e2e/test-setup.js b/tests/e2e/test-setup.js
index 1c46e369..a500edb6 100644
--- a/tests/e2e/test-setup.js
+++ b/tests/e2e/test-setup.js
@@ -87,6 +87,21 @@ module.exports = async function testSetup(ctx) {
             type: 'response_item',
             payload: { type: 'message', role: 'assistant', content: 'world' },
             timestamp: '2025-01-01T00:00:02.000Z'
+        },
+        {
+            type: 'event_msg',
+            payload: {
+                type: 'token_usage',
+                info: {
+                    total_token_usage: {
+                        input_tokens: 80,
+                        output_tokens: 40,
+                        total_tokens: 120
+                    },
+                    model_context_window: 128000
+                }
+            },
+            timestamp: '2025-01-01T00:00:03.000Z'
         }
     ];
     fs.writeFileSync(sessionPath, sessionRecords.map(record => JSON.stringify(record)).join('\n') + '\n', 'utf-8');
diff --git a/tests/unit/session-usage-backend.test.mjs b/tests/unit/session-usage-backend.test.mjs
index 6d50d561..194e9b27 100644
--- a/tests/unit/session-usage-backend.test.mjs
+++ b/tests/unit/session-usage-backend.test.mjs
@@ -112,6 +112,8 @@ test('listSessionUsage uses lightweight session listing without exact hydration'
                 source: 'codex',
                 sessionId: 'sess-1',
                 messageCount: 12,
+                totalTokens: 345,
+                contextWindow: 128000,
                 __messageCountExact: false
             }
         ];
@@ -149,7 +151,9 @@ test('listSessionUsage uses lightweight session listing without exact hydration'
         {
             source: 'codex',
             sessionId: 'sess-1',
-            messageCount: 12
+            messageCount: 12,
+            totalTokens: 345,
+            contextWindow: 128000
         }
     ]);
 });
diff --git a/tests/unit/session-usage.test.mjs b/tests/unit/session-usage.test.mjs
index 9ed0e23e..f529c035 100644
--- a/tests/unit/session-usage.test.mjs
+++ b/tests/unit/session-usage.test.mjs
@@ -10,13 +10,15 @@ const { buildUsageChartGroups } = logic;
 test('buildUsageChartGroups aggregates codex and claude sessions into day buckets', () => {
     const now = Date.UTC(2026, 3, 6, 12, 0, 0);
     const result = buildUsageChartGroups([
-        { source: 'codex', updatedAt: '2026-04-06T08:00:00.000Z', messageCount: 5, cwd: '/a' },
-        { source: 'claude', updatedAt: '2026-04-06T09:00:00.000Z', messageCount: 7, cwd: '/a' },
-        { source: 'codex', updatedAt: '2026-04-05T09:00:00.000Z', messageCount: 3, cwd: '/b' }
+        { source: 'codex', updatedAt: '2026-04-06T08:00:00.000Z', messageCount: 5, totalTokens: 120, contextWindow: 32000, cwd: '/a' },
+        { source: 'claude', updatedAt: '2026-04-06T09:00:00.000Z', messageCount: 7, totalTokens: 230, contextWindow: 64000, cwd: '/a' },
+        { source: 'codex', updatedAt: '2026-04-05T09:00:00.000Z', messageCount: 3, totalTokens: 90, contextWindow: 16000, cwd: '/b' }
     ], { range: '7d', now });
 
     assert.strictEqual(result.summary.totalSessions, 3);
     assert.strictEqual(result.summary.totalMessages, 15);
+    assert.strictEqual(result.summary.totalTokens, 440);
+    assert.strictEqual(result.summary.totalContextWindow, 112000);
     assert.strictEqual(result.summary.codexTotal, 2);
     assert.strictEqual(result.summary.claudeTotal, 1);
     assert.strictEqual(result.summary.avgMessagesPerSession, 5);
@@ -44,11 +46,13 @@ test('buildUsageChartGroups ignores invalid sessions and keeps empty buckets sta
     const result = buildUsageChartGroups([
         null,
         { source: 'other', updatedAt: '2026-04-06T08:00:00.000Z', messageCount: 9 },
-        { source: 'codex', updatedAt: 'bad-date', messageCount: 2 }
+        { source: 'codex', updatedAt: 'bad-date', messageCount: 2, totalTokens: 50, contextWindow: 1000 }
     ], { range: '7d', now });
 
     assert.strictEqual(result.summary.totalSessions, 0);
     assert.strictEqual(result.summary.totalMessages, 0);
+    assert.strictEqual(result.summary.totalTokens, 0);
+    assert.strictEqual(result.summary.totalContextWindow, 0);
     assert.strictEqual(result.buckets.length, 7);
     assert.ok(result.buckets.every((item) => item.totalSessions === 0));
     assert.ok(result.hourActivity.every((item) => item.count === 0));
diff --git a/web-ui/logic.sessions.mjs b/web-ui/logic.sessions.mjs
index 57f35aa4..cb525175 100644
--- a/web-ui/logic.sessions.mjs
+++ b/web-ui/logic.sessions.mjs
@@ -144,6 +144,8 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
     let codexTotal = 0;
     let claudeTotal = 0;
     let messageTotal = 0;
+    let totalTokens = 0;
+    let totalContextWindow = 0;
     const pathMap = new Map();
     const sourceMessageTotals = { codex: 0, claude: 0 };
     const hourCounts = Array.from({ length: 24 }, (_, hour) => ({
@@ -173,6 +175,12 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
         const messageCount = Number.isFinite(Number(session.messageCount))
             ? Math.max(0, Math.floor(Number(session.messageCount)))
             : 0;
+        const sessionTotalTokens = Number.isFinite(Number(session.totalTokens))
+            ? Math.max(0, Math.floor(Number(session.totalTokens)))
+            : 0;
+        const sessionContextWindow = Number.isFinite(Number(session.contextWindow))
+            ? Math.max(0, Math.floor(Number(session.contextWindow)))
+            : 0;
         bucket.totalSessions += 1;
         bucket.totalMessages += messageCount;
         if (source === 'codex') {
@@ -183,6 +191,8 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
             claudeTotal += 1;
         }
         messageTotal += messageCount;
+        totalTokens += sessionTotalTokens;
+        totalContextWindow += sessionContextWindow;
         sourceMessageTotals[source] += messageCount;
 
         const utcHour = stamp.getUTCHours();
@@ -278,6 +288,8 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
         summary: {
             totalSessions,
             totalMessages: messageTotal,
+            totalTokens,
+            totalContextWindow,
             codexTotal,
             claudeTotal,
             activeDays,
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index f89ff36b..74bcbf32 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -5,6 +5,14 @@ import {
 } from '../logic.mjs';
 import { SESSION_TRASH_PAGE_SIZE } from './app.constants.mjs';
 
+function formatUsageSummaryNumber(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric) || numeric < 0) {
+        return '0';
+    }
+    return Math.floor(numeric).toLocaleString('en-US');
+}
+
 export function createSessionComputed() {
     return {
         isSessionQueryEnabled() {
@@ -139,11 +147,13 @@ export function createSessionComputed() {
         sessionUsageSummaryCards() {
             const summary = this.sessionUsageCharts && this.sessionUsageCharts.summary
                 ? this.sessionUsageCharts.summary
-                : { totalSessions: 0, totalMessages: 0, activeDays: 0, avgMessagesPerSession: 0, busiestDay: null, busiestHour: null };
+                : { totalSessions: 0, totalMessages: 0, totalTokens: 0, totalContextWindow: 0, activeDays: 0, avgMessagesPerSession: 0, busiestDay: null, busiestHour: null };
             return [
-                { key: 'sessions', label: '总会话数', value: summary.totalSessions || 0 },
-                { key: 'messages', label: '总消息数', value: summary.totalMessages || 0 },
-                { key: 'days', label: '活跃天数', value: summary.activeDays || 0 },
+                { key: 'sessions', label: '总会话数', value: formatUsageSummaryNumber(summary.totalSessions || 0) },
+                { key: 'messages', label: '总消息数', value: formatUsageSummaryNumber(summary.totalMessages || 0) },
+                { key: 'tokens', label: '总 token 数', value: formatUsageSummaryNumber(summary.totalTokens || 0) },
+                { key: 'context-window', label: '总上下文数', value: formatUsageSummaryNumber(summary.totalContextWindow || 0) },
+                { key: 'days', label: '活跃天数', value: formatUsageSummaryNumber(summary.activeDays || 0) },
                 { key: 'avg-messages', label: '平均每会话消息', value: summary.avgMessagesPerSession || 0 },
                 {
                     key: 'busiest-day',

From 74fc765206debcb93cafcbc7d08df0a882009e96 Mon Sep 17 00:00:00 2001
From: awsl233777 <awsl233777@gmail.com>
Date: Sat, 11 Apr 2026 16:39:21 +0000
Subject: [PATCH 17/17] fix(web-ui): compact usage summary totals

---
 tests/unit/config-tabs-ui.test.mjs      |  1 +
 tests/unit/web-ui-logic.test.mjs        | 27 +++++++++++++++++++++++++
 web-ui/modules/app.computed.session.mjs | 26 ++++++++++++++++++++++--
 web-ui/partials/index/panel-usage.html  |  2 +-
 4 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/tests/unit/config-tabs-ui.test.mjs b/tests/unit/config-tabs-ui.test.mjs
index e8cbd7de..2c5f1bc1 100644
--- a/tests/unit/config-tabs-ui.test.mjs
+++ b/tests/unit/config-tabs-ui.test.mjs
@@ -213,6 +213,7 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(usagePanel, /sessionsUsageList\.length/);
     assert.match(usagePanel, /loadSessionsUsage\(\{ forceRefresh: true \}\)/);
     assert.match(usagePanel, /sessionUsageSummaryCards/);
+    assert.match(usagePanel, /class="usage-summary-value" :title="card\.title \|\| null"/);
     assert.match(usagePanel, /sessionUsageCharts\.buckets/);
     assert.doesNotMatch(usagePanel, /sessionUsageCharts\.topPaths\[0\]\?\.count/);
     assert.doesNotMatch(html, /sessionUsageSummaryCards\[0\]\?\.value/);
diff --git a/tests/unit/web-ui-logic.test.mjs b/tests/unit/web-ui-logic.test.mjs
index a55e1e49..b2722d8e 100644
--- a/tests/unit/web-ui-logic.test.mjs
+++ b/tests/unit/web-ui-logic.test.mjs
@@ -694,6 +694,33 @@ test('visibleSessionsList keeps the active session inside the rendered window',
     assert.deepStrictEqual(result, sessions.slice(0, 5));
 });
 
+test('sessionUsageSummaryCards uses compact units for long token and context totals while preserving full values in titles', () => {
+    const computed = createSessionComputed();
+    const cards = computed.sessionUsageSummaryCards.call({
+        sessionUsageCharts: {
+            summary: {
+                totalSessions: 12,
+                totalMessages: 3456,
+                totalTokens: 1234567,
+                totalContextWindow: 256000,
+                activeDays: 7,
+                avgMessagesPerSession: 288,
+                busiestDay: null,
+                busiestHour: null
+            }
+        }
+    });
+
+    const tokensCard = cards.find((card) => card.key === 'tokens');
+    const contextCard = cards.find((card) => card.key === 'context-window');
+    assert(tokensCard, 'missing tokens summary card');
+    assert(contextCard, 'missing context summary card');
+    assert.strictEqual(tokensCard.value, '1.2M');
+    assert.strictEqual(tokensCard.title, '1,234,567');
+    assert.strictEqual(contextCard.value, '256K');
+    assert.strictEqual(contextCard.title, '256,000');
+});
+
 test('activeSessionVisibleMessages falls back to the initial preview batch before priming completes', () => {
     const computed = createSessionComputed();
     const messages = Array.from({ length: 12 }, (_, index) => ({ id: index + 1 }));
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index 74bcbf32..26cf470f 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -13,6 +13,18 @@ function formatUsageSummaryNumber(value) {
     return Math.floor(numeric).toLocaleString('en-US');
 }
 
+function formatCompactUsageSummaryNumber(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric) || numeric < 0) {
+        return '0';
+    }
+    return new Intl.NumberFormat('en-US', {
+        notation: 'compact',
+        compactDisplay: 'short',
+        maximumFractionDigits: 1
+    }).format(Math.floor(numeric));
+}
+
 export function createSessionComputed() {
     return {
         isSessionQueryEnabled() {
@@ -151,8 +163,18 @@ export function createSessionComputed() {
             return [
                 { key: 'sessions', label: '总会话数', value: formatUsageSummaryNumber(summary.totalSessions || 0) },
                 { key: 'messages', label: '总消息数', value: formatUsageSummaryNumber(summary.totalMessages || 0) },
-                { key: 'tokens', label: '总 token 数', value: formatUsageSummaryNumber(summary.totalTokens || 0) },
-                { key: 'context-window', label: '总上下文数', value: formatUsageSummaryNumber(summary.totalContextWindow || 0) },
+                {
+                    key: 'tokens',
+                    label: '总 token 数',
+                    value: formatCompactUsageSummaryNumber(summary.totalTokens || 0),
+                    title: formatUsageSummaryNumber(summary.totalTokens || 0)
+                },
+                {
+                    key: 'context-window',
+                    label: '总上下文数',
+                    value: formatCompactUsageSummaryNumber(summary.totalContextWindow || 0),
+                    title: formatUsageSummaryNumber(summary.totalContextWindow || 0)
+                },
                 { key: 'days', label: '活跃天数', value: formatUsageSummaryNumber(summary.activeDays || 0) },
                 { key: 'avg-messages', label: '平均每会话消息', value: summary.avgMessagesPerSession || 0 },
                 {
diff --git a/web-ui/partials/index/panel-usage.html b/web-ui/partials/index/panel-usage.html
index dd486b1c..45d463cf 100644
--- a/web-ui/partials/index/panel-usage.html
+++ b/web-ui/partials/index/panel-usage.html
@@ -23,7 +23,7 @@
                         <div class="usage-summary-grid">
                             <div v-for="card in sessionUsageSummaryCards" :key="card.key" class="usage-summary-card">
                                 <div class="usage-summary-label">{{ card.label }}</div>
-                                <div class="usage-summary-value">{{ card.value }}</div>
+                                <div class="usage-summary-value" :title="card.title || null">{{ card.value }}</div>
                             </div>
                         </div>