codexmate 0.0.16 → 0.0.18

package/web-ui/app.js

@@ -4,16 +4,27 @@
     normalizeClaudeSettingsEnv,
     matchClaudeConfigFromSettings,
     findDuplicateClaudeConfigName,
+    buildAgentsDiffPreview,
+    buildAgentsDiffPreviewRequest,
+    isAgentsDiffPreviewPayloadTooLarge,
+    shouldApplyAgentsDiffPreviewResponse,
     formatLatency,
     buildSpeedTestIssue,
     isSessionQueryEnabled,
-    buildSessionListParams,
     normalizeSessionSource,
     normalizeSessionPathFilter,
     buildSessionFilterCacheState,
     buildSessionTimelineNodes,
-    normalizeSessionMessageRole
+    normalizeSessionMessageRole,
+    runLatestOnlyQueue,
+    shouldForceCompactLayoutMode
 } from './logic.mjs';
+import {
+    switchMainTab as switchMainTabHelper,
+    loadSessions as loadSessionsHelper,
+    loadActiveSessionDetail as loadActiveSessionDetailHelper,
+    loadMoreSessionMessages as loadMoreSessionMessagesHelper
+} from './session-helpers.mjs';
 import {
     CONFIG_MODE_SET,
     getProviderConfigModeMeta,
@@ -41,6 +52,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
             const API_BASE = (location && location.origin && location.origin !== 'null')
                 ? location.origin
                 : 'http://localhost:3737';
+            const SESSION_TRASH_LIST_LIMIT = 500;
+            const SESSION_TRASH_PAGE_SIZE = 200;
             const DEFAULT_OPENCLAW_TEMPLATE = `{
   // OpenClaw config (JSON5)
   agent: {
@@ -53,15 +66,45 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
   }
 }`;
 
-            async function api(action, params = {}) {
-                const res = await fetch(`${API_BASE}/api`, {
+            async function postApi(action, params = {}) {
+                return await fetch(`${API_BASE}/api`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ action, params })
                 });
+            }
+
+            async function api(action, params = {}) {
+                const res = await postApi(action, params);
                 return await res.json();
             }
 
+            async function apiWithMeta(action, params = {}) {
+                const res = await postApi(action, params);
+                const contentType = String(res.headers.get('content-type') || '').toLowerCase();
+                if (contentType.includes('application/json')) {
+                    try {
+                        const payload = await res.json();
+                        if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+                            return { ...payload, ok: res.ok, status: res.status };
+                        }
+                        return { ok: res.ok, status: res.status, data: payload };
+                    } catch (error) {
+                        if (res.status === 413) {
+                            return { ok: false, status: 413, errorCode: 'payload-too-large' };
+                        }
+                        throw error;
+                    }
+                }
+                const error = await res.text();
+                return {
+                    ok: res.ok,
+                    status: res.status,
+                    error,
+                    errorCode: res.status === 413 ? 'payload-too-large' : ''
+                };
+            }
+
             const app = createApp({
             data() {
                 return {
@@ -95,6 +138,13 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     showAgentsModal: false,
                     showSkillsModal: false,
                     showInstallModal: false,
+                    showConfirmDialog: false,
+                    confirmDialogTitle: '',
+                    confirmDialogMessage: '',
+                    confirmDialogConfirmText: '确认',
+                    confirmDialogCancelText: '取消',
+                    confirmDialogDanger: false,
+                    confirmDialogResolver: null,
                     configTemplateContent: '',
                     configTemplateApplying: false,
                     codexApplying: false,
@@ -104,6 +154,19 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     agentsLineEnding: '\n',
                     agentsLoading: false,
                     agentsSaving: false,
+                    agentsOriginalContent: '',
+                    agentsDiffVisible: false,
+                    agentsDiffLoading: false,
+                    agentsDiffError: '',
+                    agentsDiffLines: [],
+                    agentsDiffStats: {
+                        added: 0,
+                        removed: 0,
+                        unchanged: 0
+                    },
+                    agentsDiffTruncated: false,
+                    agentsDiffHasChangesValue: false,
+                    agentsDiffFingerprint: '',
                     agentsContext: 'codex',
                     agentsModalTitle: 'AGENTS.md 编辑器',
                     agentsModalHint: '保存后会写入目标 AGENTS.md（与 config.toml 同级）。',
@@ -120,7 +183,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     skillsImporting: false,
                     skillsZipImporting: false,
                     skillsExporting: false,
+                    sessionPinnedMap: {},
                     sessionsList: [],
+                    sessionsLoadedOnce: false,
                     sessionsLoading: false,
                     sessionFilterSource: 'all',
                     sessionPathFilter: '',
@@ -150,13 +215,31 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     activeSessionDetailClipped: false,
                     sessionDetailLoading: false,
                     sessionDetailRequestSeq: 0,
+                    sessionDetailInitialMessageLimit: 80,
+                    sessionDetailFetchStep: 80,
+                    sessionDetailMessageLimit: 80,
+                    sessionDetailMessageLimitCap: 1000,
                     sessionTimelineActiveKey: '',
                     sessionTimelineRafId: 0,
+                    sessionTimelineLastSyncAt: 0,
+                    sessionTimelineLastScrollTop: 0,
+                    sessionTimelineLastAnchorY: 0,
+                    sessionTimelineLastDirection: 0,
+                    sessionTimelineEnabled: true,
                     sessionMessageRefMap: Object.create(null),
+                    sessionMessageRefBinderMap: Object.create(null),
                     sessionPreviewScrollEl: null,
                     sessionPreviewContainerEl: null,
                     sessionPreviewHeaderEl: null,
                     sessionPreviewHeaderResizeObserver: null,
+                    sessionListRenderEnabled: false,
+                    sessionPreviewRenderEnabled: false,
+                    sessionTabRenderTicket: 0,
+                    sessionPreviewVisibleCount: 0,
+                    sessionPreviewInitialBatchSize: 12,
+                    sessionPreviewLoadStep: 24,
+                    sessionPreviewPendingVisibleCount: 0,
+                    sessionPreviewLoadingMore: false,
                     sessionStandalone: false,
                     sessionStandaloneError: '',
                     sessionStandaloneText: '',
@@ -170,6 +253,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     claudeSpeedLoading: {},
                     claudeShareLoading: {},
                     providerShareLoading: {},
+                    providerSwitchInProgress: false,
+                    pendingProviderSwitch: '',
                     installPackageManager: 'npm',
                     installCommandAction: 'install',
                     installRegistryPreset: 'default',
@@ -271,6 +356,22 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     codexDownloadLoading: false,
                     codexDownloadProgress: 0,
                     codexDownloadTimer: null,
+                    settingsTab: 'backup',
+                    sessionTrashItems: [],
+                    sessionTrashVisibleCount: SESSION_TRASH_PAGE_SIZE,
+                    sessionTrashTotalCount: 0,
+                    sessionTrashCountLoadedOnce: false,
+                    sessionTrashLoadedOnce: false,
+                    sessionTrashLastLoadFailed: false,
+                    sessionTrashCountRequestToken: 0,
+                    sessionTrashListRequestToken: 0,
+                    sessionTrashCountPendingOptions: null,
+                    sessionTrashPendingOptions: null,
+                    sessionTrashCountLoading: false,
+                    sessionTrashLoading: false,
+                    sessionTrashRestoring: {},
+                    sessionTrashPurging: {},
+                    sessionTrashClearing: false,
                     claudeImportLoading: false,
                     codexImportLoading: false,
                     codexAuthProfiles: [],
@@ -291,11 +392,13 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     proxyStarting: false,
                     proxyStopping: false,
                     proxyApplying: false,
-                    showProxyAdvanced: false
+                    showProxyAdvanced: false,
+                    forceCompactLayout: false
                 }
             },
             mounted() {
                 this.initSessionStandalone();
+                this.updateCompactLayoutMode();
                 const savedSessionYolo = localStorage.getItem('codexmateSessionResumeYolo');
                 if (savedSessionYolo === '0' || savedSessionYolo === 'false') {
                     this.sessionResumeWithYolo = false;
@@ -303,7 +406,10 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.sessionResumeWithYolo = true;
                 }
                 this.restoreSessionFilterCache();
+                this.restoreSessionPinnedMap();
                 window.addEventListener('resize', this.onWindowResize);
+                window.addEventListener('keydown', this.handleGlobalKeydown);
+                window.addEventListener('beforeunload', this.handleBeforeUnload);
                 const savedConfigs = localStorage.getItem('claudeConfigs');
                 if (savedConfigs) {
                     try {
@@ -340,24 +446,104 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                 this.loadAll();
             },
             beforeUnmount() {
-                this.cancelSessionTimelineSync();
+                this.teardownSessionTabRender();
+                this.cancelScheduledSessionTabDeferredTeardown();
                 this.disconnectSessionPreviewHeaderResizeObserver();
                 window.removeEventListener('resize', this.onWindowResize);
+                window.removeEventListener('keydown', this.handleGlobalKeydown);
+                window.removeEventListener('beforeunload', this.handleBeforeUnload);
+                this.applyCompactLayoutClass(false);
                 this.sessionPreviewScrollEl = null;
                 this.sessionPreviewContainerEl = null;
                 this.sessionPreviewHeaderEl = null;
-                this.sessionMessageRefMap = Object.create(null);
+                this.clearSessionTimelineRefs();
             },
 
             computed: {
                 isSessionQueryEnabled() {
                     return isSessionQueryEnabled(this.sessionFilterSource);
                 },
+                activeSessionExportKey() {
+                    return this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
+                },
+                sortedSessionsList() {
+                    const list = Array.isArray(this.sessionsList) ? this.sessionsList : [];
+                    if (list.length === 0) return [];
+                    const pinnedMap = (this.sessionPinnedMap && typeof this.sessionPinnedMap === 'object')
+                        ? this.sessionPinnedMap
+                        : {};
+                    let hasPinned = false;
+                    const decorated = list.map((session, index) => {
+                        const key = session ? this.getSessionExportKey(session) : '';
+                        const rawPinnedAt = key ? pinnedMap[key] : 0;
+                        const pinnedAt = Number.isFinite(Number(rawPinnedAt))
+                            ? Math.floor(Number(rawPinnedAt))
+                            : 0;
+                        const isPinned = pinnedAt > 0;
+                        if (isPinned) {
+                            hasPinned = true;
+                        }
+                        return { session, index, pinnedAt, isPinned };
+                    });
+                    if (!hasPinned) return list;
+                    decorated.sort((a, b) => {
+                        if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
+                        if (a.isPinned && a.pinnedAt !== b.pinnedAt) return b.pinnedAt - a.pinnedAt;
+                        return a.index - b.index;
+                    });
+                    return decorated.map(item => item.session);
+                },
+                activeSessionVisibleMessages() {
+                    if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
+                        return [];
+                    }
+                    const list = Array.isArray(this.activeSessionMessages) ? this.activeSessionMessages : [];
+                    const rawCount = Number(this.sessionPreviewVisibleCount);
+                    const visibleCount = Number.isFinite(rawCount)
+                        ? Math.max(0, Math.floor(rawCount))
+                        : 0;
+                    if (visibleCount <= 0) {
+                        if (!list.length) return [];
+                        // Defensive fallback: avoid getting stuck in "正在渲染会话内容..."
+                        // when visible count has not been primed yet.
+                        return list.slice(0, Math.min(8, list.length));
+                    }
+                    if (visibleCount >= list.length) return list;
+                    return list.slice(0, visibleCount);
+                },
+                canLoadMoreSessionMessages() {
+                    if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
+                        return false;
+                    }
+                    const total = Array.isArray(this.activeSessionMessages) ? this.activeSessionMessages.length : 0;
+                    const visible = Array.isArray(this.activeSessionVisibleMessages) ? this.activeSessionVisibleMessages.length : 0;
+                    return total > visible;
+                },
+                sessionPreviewRemainingCount() {
+                    const total = Array.isArray(this.activeSessionMessages) ? this.activeSessionMessages.length : 0;
+                    const visible = Array.isArray(this.activeSessionVisibleMessages) ? this.activeSessionVisibleMessages.length : 0;
+                    return Math.max(0, total - visible);
+                },
                 sessionTimelineNodes() {
-                    return buildSessionTimelineNodes(this.activeSessionMessages, {
+                    if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
+                        return [];
+                    }
+                    return buildSessionTimelineNodes(this.activeSessionVisibleMessages, {
                         getKey: (message, index) => this.getRecordRenderKey(message, index)
                     });
                 },
+                sessionTimelineNodeKeyMap() {
+                    const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
+                    if (!nodes.length) {
+                        return Object.create(null);
+                    }
+                    const map = Object.create(null);
+                    for (const node of nodes) {
+                        if (!node || !node.key) continue;
+                        map[node.key] = true;
+                    }
+                    return map;
+                },
                 sessionTimelineActiveTitle() {
                     if (!this.sessionTimelineActiveKey) return '';
                     const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
@@ -370,6 +556,15 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                     return '当前来源暂不支持关键词检索';
                 },
+                agentsDiffHasChanges() {
+                    if (this.agentsDiffTruncated) {
+                        return !!this.agentsDiffHasChangesValue;
+                    }
+                    const stats = this.agentsDiffStats || {};
+                    const added = Number(stats.added || 0);
+                    const removed = Number(stats.removed || 0);
+                    return added > 0 || removed > 0;
+                },
                 claudeModelHasList() {
                     return Array.isArray(this.claudeModels) && this.claudeModels.length > 0;
                 },
@@ -409,6 +604,29 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                 installRegistryPreview() {
                     return this.resolveInstallRegistryUrl(this.installRegistryPreset, this.installRegistryCustom);
                 },
+                visibleSessionTrashItems() {
+                    const items = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems : [];
+                    const visibleCount = Number(this.sessionTrashVisibleCount);
+                    const safeVisibleCount = Number.isFinite(visibleCount) && visibleCount > 0
+                        ? Math.floor(visibleCount)
+                        : SESSION_TRASH_PAGE_SIZE;
+                    return items.slice(0, safeVisibleCount);
+                },
+                sessionTrashHasMoreItems() {
+                    const totalItems = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems.length : 0;
+                    return this.visibleSessionTrashItems.length < totalItems;
+                },
+                sessionTrashHiddenCount() {
+                    const totalItems = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems.length : 0;
+                    return Math.max(0, totalItems - this.visibleSessionTrashItems.length);
+                },
+                sessionTrashCount() {
+                    const totalCount = Number(this.sessionTrashTotalCount);
+                    if (Number.isFinite(totalCount) && totalCount >= 0) {
+                        return Math.max(0, Math.floor(totalCount));
+                    }
+                    return Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems.length : 0;
+                },
                 ...createSkillsComputed(),
 
                 ...createConfigModeComputed(),
@@ -542,7 +760,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                 },
 
-                async loadModelsForProvider(providerName) {
+                async loadModelsForProvider(providerName, options = {}) {
+                    const silentError = !!options.silentError;
                     this.codexModelsLoading = true;
                     if (!providerName) {
                         this.models = [];
@@ -560,7 +779,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             return;
                         }
                         if (res.error) {
-                            this.showMessage('获取模型列表失败', 'error');
+                            if (!silentError) {
+                                this.showMessage('获取模型列表失败', 'error');
+                            }
                             this.models = [];
                             this.modelsSource = 'error';
                             this.modelsHasCurrent = true;
@@ -571,7 +792,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                         this.modelsSource = res.source || 'remote';
                         this.modelsHasCurrent = !!this.currentModel && list.includes(this.currentModel);
                     } catch (e) {
-                        this.showMessage('获取模型列表失败', 'error');
+                        if (!silentError) {
+                            this.showMessage('获取模型列表失败', 'error');
+                        }
                         this.models = [];
                         this.modelsSource = 'error';
                         this.modelsHasCurrent = true;
@@ -603,15 +826,58 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     return findDuplicateClaudeConfigName(this.claudeConfigs, config);
                 },
 
-                async refreshClaudeSelectionFromSettings(options = {}) {
-                    const configNames = Object.keys(this.claudeConfigs || {});
-                    if (configNames.length === 0) {
-                        this.currentClaudeConfig = '';
-                        this.currentClaudeModel = '';
-                        this.resetClaudeModelsState();
-                        return;
+                mergeClaudeConfig(existing = {}, updates = {}) {
+                    const previous = this.normalizeClaudeConfig(existing);
+                    const next = this.normalizeClaudeConfig({ ...existing, ...updates });
+                    const externalCredentialType = next.apiKey
+                        ? ''
+                        : (next.externalCredentialType || previous.externalCredentialType || '');
+                    return {
+                        apiKey: next.apiKey,
+                        baseUrl: next.baseUrl,
+                        model: next.model || previous.model || 'glm-4.7',
+                        hasKey: !!(next.apiKey || externalCredentialType),
+                        externalCredentialType
+                    };
+                },
+
+                buildClaudeImportedConfigName(baseUrl) {
+                    const normalizedUrl = typeof baseUrl === 'string' ? baseUrl.trim() : '';
+                    if (!normalizedUrl) return '导入配置';
+                    try {
+                        const parsed = new URL(normalizedUrl);
+                        const host = typeof parsed.host === 'string' ? parsed.host.trim() : '';
+                        if (host) return `导入-${host}`;
+                    } catch (_) {
+                        // keep generic fallback name
                     }
+                    return '导入配置';
+                },
+
+                ensureClaudeConfigFromSettings(env = {}) {
+                    const normalized = this.normalizeClaudeSettingsEnv(env);
+                    const hasCredential = !!(normalized.apiKey || normalized.authToken || normalized.useKey);
+                    if (!normalized.baseUrl || !hasCredential) return '';
+
+                    const duplicateName = this.findDuplicateClaudeConfigName(normalized);
+                    if (duplicateName) return duplicateName;
+
+                    const preferredName = this.buildClaudeImportedConfigName(normalized.baseUrl);
+                    let candidateName = preferredName;
+                    let suffix = 2;
+                    while (this.claudeConfigs[candidateName]) {
+                        candidateName = `${preferredName}-${suffix}`;
+                        suffix += 1;
+                    }
+
+                    this.claudeConfigs[candidateName] = this.mergeClaudeConfig({}, normalized);
+                    this.saveClaudeConfigs();
+                    return candidateName;
+                },
+
+                async refreshClaudeSelectionFromSettings(options = {}) {
                     const silent = !!options.silent;
+                    const silentModelError = !!options.silentModelError || silent;
                     try {
                         const res = await api('get-claude-settings');
                         if (res && res.error) {
@@ -625,7 +891,18 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             if (this.currentClaudeConfig !== matchName) {
                                 this.currentClaudeConfig = matchName;
                             }
-                            this.refreshClaudeModelContext();
+                            this.refreshClaudeModelContext({ silentError: silentModelError });
+                            return;
+                        }
+                        const importedName = this.ensureClaudeConfigFromSettings((res && res.env) || {});
+                        if (importedName) {
+                            if (this.currentClaudeConfig !== importedName) {
+                                this.currentClaudeConfig = importedName;
+                            }
+                            this.refreshClaudeModelContext({ silentError: silentModelError });
+                            if (!silent) {
+                                this.showMessage(`检测到外部 Claude 配置，已自动导入：${importedName}`, 'success');
+                            }
                             return;
                         }
                         this.currentClaudeConfig = '';
@@ -649,9 +926,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.currentClaudeModel = config && config.model ? config.model : '';
                 },
 
-                refreshClaudeModelContext() {
+                refreshClaudeModelContext(options = {}) {
                     this.syncClaudeModelFromConfig();
-                    this.loadClaudeModels();
+                    return this.loadClaudeModels(options);
                 },
 
                 resetClaudeModelsState() {
@@ -666,7 +943,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.claudeModelsHasCurrent = !!currentModel && this.claudeModels.includes(currentModel);
                 },
 
-                async loadClaudeModels() {
+                async loadClaudeModels(options = {}) {
+                    const silentError = !!options.silentError;
                     const config = this.getCurrentClaudeConfig();
                     if (!config) {
                         this.resetClaudeModelsState();
@@ -674,11 +952,20 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                     const baseUrl = (config.baseUrl || '').trim();
                     const apiKey = (config.apiKey || '').trim();
+                    const externalCredentialType = typeof config.externalCredentialType === 'string'
+                        ? config.externalCredentialType.trim()
+                        : '';
 
                     if (!baseUrl) {
                         this.resetClaudeModelsState();
                         return;
                     }
+                    if (!apiKey && externalCredentialType) {
+                        this.claudeModels = [];
+                        this.claudeModelsSource = 'unlimited';
+                        this.claudeModelsHasCurrent = true;
+                        return;
+                    }
 
                     this.claudeModelsLoading = true;
                     try {
@@ -690,7 +977,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             return;
                         }
                         if (res.error) {
-                            this.showMessage('获取模型列表失败', 'error');
+                            if (!silentError) {
+                                this.showMessage('获取模型列表失败', 'error');
+                            }
                             this.claudeModels = [];
                             this.claudeModelsSource = 'error';
                             this.claudeModelsHasCurrent = true;
@@ -701,7 +990,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                         this.claudeModelsSource = res.source || 'remote';
                         this.updateClaudeModelsCurrent();
                     } catch (e) {
-                        this.showMessage('获取模型列表失败', 'error');
+                        if (!silentError) {
+                            this.showMessage('获取模型列表失败', 'error');
+                        }
                         this.claudeModels = [];
                         this.claudeModelsSource = 'error';
                         this.claudeModelsHasCurrent = true;
@@ -727,21 +1018,413 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     const normalizedMode = typeof mode === 'string'
                         ? mode.trim().toLowerCase()
                         : '';
-                    this.mainTab = 'config';
                     this.configMode = CONFIG_MODE_SET.has(normalizedMode) ? normalizedMode : 'codex';
-                    if (this.configMode === 'claude') {
-                        this.refreshClaudeModelContext();
+                    if (this.mainTab === 'config') {
+                        if (this.configMode === 'claude') {
+                            const expectedMainTab = 'config';
+                            const expectedConfigMode = 'claude';
+                            const refresh = () => {
+                                if (this.mainTab !== expectedMainTab || this.configMode !== expectedConfigMode) {
+                                    return;
+                                }
+                                this.refreshClaudeModelContext();
+                            };
+                            if (typeof this.scheduleAfterFrame === 'function') {
+                                this.scheduleAfterFrame(refresh);
+                            } else {
+                                refresh();
+                            }
+                        }
+                        this.scheduleAfterFrame(() => {
+                            this.clearMainTabSwitchIntent('config');
+                        });
+                        return;
                     }
+                    this.switchMainTab('config');
                 },
 
+                ensureMainTabSwitchState() {
+                    if (this.__mainTabSwitchState) {
+                        return this.__mainTabSwitchState;
+                    }
+                    this.__mainTabSwitchState = {
+                        intent: '',
+                        pendingTarget: '',
+                        ticket: 0
+                    };
+                    return this.__mainTabSwitchState;
+                },
+                ensureImmediateNavDomState() {
+                    if (typeof document === 'undefined') {
+                        return {
+                            navNodes: [],
+                            sessionPanelEl: null
+                        };
+                    }
+                    if (!this.__immediateNavDomState) {
+                        this.__immediateNavDomState = {
+                            navNodes: [],
+                            sessionPanelEl: null
+                        };
+                    }
+                    const state = this.__immediateNavDomState;
+                    const needsNavRefresh = !Array.isArray(state.navNodes)
+                        || !state.navNodes.length
+                        || state.navNodes.some((node) => !node || !node.isConnected);
+                    if (needsNavRefresh) {
+                        state.navNodes = Array.from(document.querySelectorAll('[data-main-tab]'));
+                    }
+                    if (!state.sessionPanelEl || !state.sessionPanelEl.isConnected) {
+                        state.sessionPanelEl = document.getElementById('panel-sessions');
+                    }
+                    return state;
+                },
+                setMainTabSwitchIntent(tab) {
+                    const normalizedTab = typeof tab === 'string'
+                        ? tab.trim().toLowerCase()
+                        : '';
+                    if (!normalizedTab) return;
+                    const state = this.ensureMainTabSwitchState();
+                    state.intent = normalizedTab;
+                },
+                applyImmediateNavIntent(tab, configMode = '') {
+                    if (typeof document === 'undefined') return;
+                    const normalizedTab = typeof tab === 'string' ? tab.trim().toLowerCase() : '';
+                    if (!normalizedTab) return;
+                    const normalizedMode = typeof configMode === 'string' ? configMode.trim().toLowerCase() : '';
+                    const domState = this.ensureImmediateNavDomState();
+                    const nodes = Array.isArray(domState.navNodes) ? domState.navNodes : [];
+                    for (const node of nodes) {
+                        if (!node || !node.classList) continue;
+                        const nodeTab = String(node.getAttribute('data-main-tab') || '').trim().toLowerCase();
+                        const nodeMode = String(node.getAttribute('data-config-mode') || '').trim().toLowerCase();
+                        let shouldActivate = nodeTab === normalizedTab;
+                        if (shouldActivate && normalizedTab === 'config') {
+                            shouldActivate = nodeMode ? nodeMode === normalizedMode : false;
+                        }
+                        node.classList.toggle('nav-intent-active', !!shouldActivate);
+                        node.classList.toggle('nav-intent-inactive', !shouldActivate);
+                    }
+                },
+                clearImmediateNavIntent() {
+                    if (typeof document === 'undefined') return;
+                    const domState = this.ensureImmediateNavDomState();
+                    const nodes = Array.isArray(domState.navNodes) ? domState.navNodes : [];
+                    for (const node of nodes) {
+                        if (!node || !node.classList) continue;
+                        node.classList.remove('nav-intent-active');
+                        node.classList.remove('nav-intent-inactive');
+                    }
+                },
+                setSessionPanelFastHidden(hidden) {
+                    if (typeof document === 'undefined') return;
+                    const domState = this.ensureImmediateNavDomState();
+                    const panel = domState.sessionPanelEl;
+                    if (!panel || !panel.classList) return;
+                    panel.classList.toggle('session-panel-fast-hidden', !!hidden);
+                },
+                isSessionPanelFastHidden() {
+                    if (typeof document === 'undefined') return false;
+                    const domState = this.ensureImmediateNavDomState();
+                    const panel = domState.sessionPanelEl;
+                    return !!(panel && panel.classList && panel.classList.contains('session-panel-fast-hidden'));
+                },
+                recordPointerNavCommit(kind, value) {
+                    const normalizedKind = typeof kind === 'string' ? kind.trim().toLowerCase() : '';
+                    const normalizedValue = typeof value === 'string' ? value.trim().toLowerCase() : '';
+                    if (!normalizedKind || !normalizedValue) {
+                        this.__pointerNavCommitState = null;
+                        return;
+                    }
+                    this.__pointerNavCommitState = {
+                        kind: normalizedKind,
+                        value: normalizedValue,
+                        at: Date.now()
+                    };
+                },
+                consumePointerNavCommit(kind, value) {
+                    const normalizedKind = typeof kind === 'string' ? kind.trim().toLowerCase() : '';
+                    const normalizedValue = typeof value === 'string' ? value.trim().toLowerCase() : '';
+                    const state = this.__pointerNavCommitState;
+                    this.__pointerNavCommitState = null;
+                    if (!state || !normalizedKind || !normalizedValue) {
+                        return false;
+                    }
+                    if (state.kind !== normalizedKind || state.value !== normalizedValue) {
+                        return false;
+                    }
+                    return (Date.now() - Number(state.at || 0)) <= 1000;
+                },
+                onMainTabPointerDown(tab) {
+                    const event = arguments.length > 1 ? arguments[1] : null;
+                    if (event && typeof event.button === 'number' && event.button !== 0) {
+                        return;
+                    }
+                    const normalizedTab = typeof tab === 'string' ? tab.trim().toLowerCase() : '';
+                    if (!normalizedTab) return;
+                    this.setMainTabSwitchIntent(normalizedTab);
+                    this.applyImmediateNavIntent(normalizedTab);
+                    const shouldHideSessionPanel = this.mainTab === 'sessions' && normalizedTab !== 'sessions';
+                    this.setSessionPanelFastHidden(shouldHideSessionPanel);
+                    const pointerType = event && typeof event.pointerType === 'string'
+                        ? event.pointerType.trim().toLowerCase()
+                        : '';
+                    if (pointerType === 'touch') {
+                        return;
+                    }
+                    this.recordPointerNavCommit('main', normalizedTab);
+                    this.switchMainTab(normalizedTab);
+                },
+                onConfigTabPointerDown(mode) {
+                    const event = arguments.length > 1 ? arguments[1] : null;
+                    if (event && typeof event.button === 'number' && event.button !== 0) {
+                        return;
+                    }
+                    const normalizedMode = typeof mode === 'string' ? mode.trim().toLowerCase() : '';
+                    if (!normalizedMode) return;
+                    this.setMainTabSwitchIntent('config');
+                    this.applyImmediateNavIntent('config', normalizedMode);
+                    const shouldHideSessionPanel = this.mainTab === 'sessions';
+                    this.setSessionPanelFastHidden(shouldHideSessionPanel);
+                    const pointerType = event && typeof event.pointerType === 'string'
+                        ? event.pointerType.trim().toLowerCase()
+                        : '';
+                    if (pointerType === 'touch') {
+                        return;
+                    }
+                    this.recordPointerNavCommit('config', normalizedMode);
+                    this.switchConfigMode(normalizedMode);
+                },
+                onMainTabClick(tab) {
+                    const normalizedTab = typeof tab === 'string' ? tab.trim().toLowerCase() : '';
+                    if (!normalizedTab) return;
+                    if (this.consumePointerNavCommit('main', normalizedTab)) return;
+                    this.switchMainTab(normalizedTab);
+                },
+                onConfigTabClick(mode) {
+                    const normalizedMode = typeof mode === 'string' ? mode.trim().toLowerCase() : '';
+                    if (!normalizedMode) return;
+                    if (this.consumePointerNavCommit('config', normalizedMode)) return;
+                    this.switchConfigMode(normalizedMode);
+                },
+                clearMainTabSwitchIntent(expectedTab = '') {
+                    const state = this.ensureMainTabSwitchState();
+                    if (expectedTab && state.intent && state.intent !== expectedTab) {
+                        return;
+                    }
+                    state.intent = '';
+                    state.pendingTarget = '';
+                    this.clearImmediateNavIntent();
+                    this.setSessionPanelFastHidden(false);
+                },
+                getMainTabForNav() {
+                    const state = this.ensureMainTabSwitchState();
+                    return state.intent || this.mainTab;
+                },
+                isMainTabNavActive(tab) {
+                    return this.getMainTabForNav() === tab;
+                },
+                isConfigModeNavActive(mode) {
+                    return this.isMainTabNavActive('config') && this.configMode === mode;
+                },
                 switchMainTab(tab) {
-                    this.mainTab = tab;
-                    if (tab === 'sessions' && this.sessionsList.length === 0) {
-                        this.loadSessions();
+                    const normalizedTab = typeof tab === 'string'
+                        ? tab.trim().toLowerCase()
+                        : '';
+                    const targetTab = normalizedTab || tab;
+                    if (!targetTab) return;
+                    if (targetTab === 'sessions') {
+                        this.cancelScheduledSessionTabDeferredTeardown();
                     }
-                    if (tab === 'config' && this.configMode === 'claude') {
-                        this.refreshClaudeModelContext();
+
+                    this.setMainTabSwitchIntent(targetTab);
+                    if (targetTab === 'config') {
+                        this.applyImmediateNavIntent('config', this.configMode);
+                    } else {
+                        this.applyImmediateNavIntent(targetTab);
+                    }
+
+                    const previousTab = this.mainTab;
+                    const switchState = this.ensureMainTabSwitchState();
+                    if (targetTab === previousTab) {
+                        switchState.ticket += 1;
+                        switchState.pendingTarget = '';
+                        this.scheduleAfterFrame(() => {
+                            this.clearMainTabSwitchIntent(normalizedTab);
+                        });
+                        return;
+                    }
+                    const isLeavingSessions = previousTab === 'sessions' && targetTab !== 'sessions';
+                    const shouldDeferApply = isLeavingSessions;
+                    if (isLeavingSessions && !this.isSessionPanelFastHidden()) {
+                        this.setSessionPanelFastHidden(true);
+                    }
+                    if (!shouldDeferApply) {
+                        switchState.ticket += 1;
+                        switchState.pendingTarget = '';
+                        const result = switchMainTabHelper.call(this, targetTab);
+                        this.scheduleAfterFrame(() => {
+                            this.clearMainTabSwitchIntent(normalizedTab);
+                        });
+                        return result;
+                    }
+
+                    const ticket = ++switchState.ticket;
+                    switchState.pendingTarget = targetTab;
+                    this.scheduleAfterFrame(() => {
+                        const liveState = this.ensureMainTabSwitchState();
+                        if (ticket !== liveState.ticket) return;
+                        const pendingTarget = liveState.pendingTarget || targetTab;
+                        liveState.pendingTarget = '';
+                        switchMainTabHelper.call(this, pendingTarget);
+                        this.clearMainTabSwitchIntent(normalizedTab);
+                    });
+                },
+
+                scheduleAfterFrame(task) {
+                    const callback = typeof task === 'function' ? task : () => {};
+                    if (typeof requestAnimationFrame === 'function') {
+                        requestAnimationFrame(callback);
+                        return;
+                    }
+                    setTimeout(callback, 16);
+                },
+                scheduleIdleTask(task, timeoutMs = 160) {
+                    const callback = typeof task === 'function' ? task : () => {};
+                    const timeout = Number.isFinite(timeoutMs)
+                        ? Math.max(16, Math.floor(timeoutMs))
+                        : 160;
+                    if (typeof requestIdleCallback === 'function') {
+                        const id = requestIdleCallback(callback, { timeout });
+                        return {
+                            type: 'idle',
+                            id
+                        };
                     }
+                    const id = setTimeout(callback, timeout);
+                    return {
+                        type: 'timeout',
+                        id
+                    };
+                },
+                cancelIdleTask(handle) {
+                    if (!handle || typeof handle !== 'object') return;
+                    const type = handle.type;
+                    const id = handle.id;
+                    if (type === 'idle') {
+                        if (typeof cancelIdleCallback === 'function') {
+                            cancelIdleCallback(id);
+                        } else {
+                            clearTimeout(id);
+                        }
+                        return;
+                    }
+                    if (type === 'timeout') {
+                        clearTimeout(id);
+                    }
+                },
+                scheduleSessionTabDeferredTeardown(task) {
+                    const callback = typeof task === 'function' ? task : () => {};
+                    this.cancelScheduledSessionTabDeferredTeardown();
+                    this.__sessionTabDeferredTeardownHandle = this.scheduleIdleTask(() => {
+                        this.__sessionTabDeferredTeardownHandle = null;
+                        callback();
+                    }, 180);
+                },
+                cancelScheduledSessionTabDeferredTeardown() {
+                    const handle = this.__sessionTabDeferredTeardownHandle || null;
+                    if (!handle) return;
+                    this.cancelIdleTask(handle);
+                    this.__sessionTabDeferredTeardownHandle = null;
+                },
+
+                resetSessionPreviewMessageRender() {
+                    this.sessionPreviewVisibleCount = 0;
+                    this.invalidateSessionTimelineMeasurementCache();
+                },
+
+                resetSessionDetailPagination() {
+                    const initialLimit = Number.isFinite(this.sessionDetailInitialMessageLimit)
+                        ? Math.max(1, Math.floor(this.sessionDetailInitialMessageLimit))
+                        : 80;
+                    this.sessionDetailMessageLimit = initialLimit;
+                    this.sessionPreviewPendingVisibleCount = 0;
+                },
+
+                primeSessionPreviewMessageRender() {
+                    this.sessionPreviewVisibleCount = 0;
+                    this.invalidateSessionTimelineMeasurementCache();
+                    if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
+                        return;
+                    }
+                    const total = Array.isArray(this.activeSessionMessages)
+                        ? this.activeSessionMessages.length
+                        : 0;
+                    if (total <= 0) return;
+                    const baseSize = Number.isFinite(this.sessionPreviewInitialBatchSize)
+                        ? Math.max(1, Math.floor(this.sessionPreviewInitialBatchSize))
+                        : 40;
+                    this.sessionPreviewVisibleCount = Math.min(baseSize, total);
+                    this.invalidateSessionTimelineMeasurementCache();
+                },
+
+                async loadMoreSessionMessages(stepSize) {
+                    return loadMoreSessionMessagesHelper.call(this, stepSize);
+                },
+
+                suspendSessionTabRender() {
+                    this.sessionTabRenderTicket += 1;
+                    this.sessionListRenderEnabled = false;
+                    this.sessionPreviewRenderEnabled = false;
+                    this.cancelSessionTimelineSync();
+                    this.sessionTimelineActiveKey = '';
+                    this.sessionTimelineLastSyncAt = 0;
+                    this.sessionTimelineLastScrollTop = 0;
+                    this.sessionTimelineLastAnchorY = 0;
+                    this.sessionTimelineLastDirection = 0;
+                    this.sessionPreviewScrollEl = null;
+                    this.sessionPreviewContainerEl = null;
+                    this.sessionPreviewHeaderEl = null;
+                },
+
+                finalizeSessionTabTeardown() {
+                    this.resetSessionPreviewMessageRender();
+                    this.sessionPreviewPendingVisibleCount = 0;
+                    this.clearSessionTimelineRefs();
+                },
+
+                teardownSessionTabRender() {
+                    this.suspendSessionTabRender();
+                    this.finalizeSessionTabTeardown();
+                },
+
+                prepareSessionTabRender() {
+                    const ticket = ++this.sessionTabRenderTicket;
+                    this.sessionListRenderEnabled = false;
+                    this.sessionPreviewRenderEnabled = false;
+                    this.resetSessionPreviewMessageRender();
+
+                    this.scheduleAfterFrame(() => {
+                        if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                            return;
+                        }
+                        this.sessionListRenderEnabled = true;
+
+                        this.scheduleAfterFrame(() => {
+                            if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                                return;
+                            }
+                            this.sessionPreviewRenderEnabled = true;
+                            this.$nextTick(() => {
+                                if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                                    return;
+                                }
+                                this.primeSessionPreviewMessageRender();
+                                this.updateSessionTimelineOffset();
+                                this.scheduleSessionTimelineSync();
+                            });
+                        });
+                    });
                 },
 
                 getSessionStandaloneContext() {
@@ -788,6 +1471,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
 
                     this.sessionStandalone = true;
                     this.mainTab = 'sessions';
+                    this.prepareSessionTabRender();
 
                     if (context.error || !context.params) {
                         this.sessionStandaloneError = `会话链接参数不完整：${context.error || '参数解析失败'}`;
@@ -807,7 +1491,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.activeSessionDetailClipped = false;
                     this.cancelSessionTimelineSync();
                     this.sessionTimelineActiveKey = '';
-                    this.sessionMessageRefMap = Object.create(null);
+                    this.clearSessionTimelineRefs();
                     this.sessionStandaloneError = '';
                     this.sessionStandaloneText = '';
                     this.sessionStandaloneTitle = this.activeSession.title || '会话';
@@ -996,6 +1680,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     const name = typeof payload.name === 'string' ? payload.name.trim() : '';
                     const baseUrl = typeof payload.baseUrl === 'string' ? payload.baseUrl.trim() : '';
                     const apiKey = typeof payload.apiKey === 'string' ? payload.apiKey : '';
+                    const model = typeof payload.model === 'string' ? payload.model.trim() : '';
                     if (!name || !baseUrl) return '';
 
                     const nameArg = this.quoteShellArg(name);
@@ -1005,7 +1690,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     const addCmd = apiKey
                         ? `codexmate add ${nameArg} ${urlArg} ${keyArg}`
                         : `codexmate add ${nameArg} ${urlArg}`;
-                    return `${addCmd} && ${switchCmd}`;
+                    const modelCmd = model ? ` && codexmate use ${this.quoteShellArg(model)}` : '';
+                    return `${addCmd} && ${switchCmd}${modelCmd}`;
                 },
 
                 buildClaudeShareCommand(payload) {
@@ -1157,7 +1843,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                     this.sessionDeleting[key] = true;
                     try {
-                        const res = await api('delete-session', {
+                        const res = await api('trash-session', {
                             source: session.source,
                             sessionId: session.sessionId,
                             filePath: session.filePath
@@ -1166,8 +1852,29 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             this.showMessage(res.error, 'error');
                             return;
                         }
-                        this.showMessage('操作成功', 'success');
-                        await this.loadSessions();
+                        this.removeSessionPin(session);
+                        this.invalidateSessionTrashRequests();
+                        this.showMessage('已移入回收站', 'success');
+                        if (this.sessionTrashLoadedOnce) {
+                            this.prependSessionTrashItem(this.buildSessionTrashItemFromSession(session, res), {
+                                totalCount: res && res.totalCount !== undefined ? res.totalCount : undefined
+                            });
+                        } else if (this.sessionTrashCountLoadedOnce) {
+                            this.sessionTrashTotalCount = this.normalizeSessionTrashTotalCount(
+                                res && res.totalCount !== undefined
+                                    ? res.totalCount
+                                    : (this.normalizeSessionTrashTotalCount(this.sessionTrashTotalCount, this.sessionTrashItems) + 1),
+                                this.sessionTrashItems
+                            );
+                        } else {
+                            this.sessionTrashTotalCount = this.normalizeSessionTrashTotalCount(
+                                res && res.totalCount !== undefined
+                                    ? res.totalCount
+                                    : (this.normalizeSessionTrashTotalCount(this.sessionTrashTotalCount, this.sessionTrashItems) + 1),
+                                this.sessionTrashItems
+                            );
+                        }
+                        await this.removeSessionFromCurrentList(session);
                     } catch (e) {
                         this.showMessage('删除失败', 'error');
                     } finally {
@@ -1175,6 +1882,413 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                 },
 
+                buildSessionTrashItemFromSession(session, result = {}) {
+                    const deletedAt = typeof result.deletedAt === 'string' && result.deletedAt
+                        ? result.deletedAt
+                        : new Date().toISOString();
+                    const source = session && session.source === 'claude' ? 'claude' : 'codex';
+                    return {
+                        trashId: typeof result.trashId === 'string' ? result.trashId : '',
+                        source,
+                        sourceLabel: session && typeof session.sourceLabel === 'string' && session.sourceLabel
+                            ? session.sourceLabel
+                            : (source === 'claude' ? 'Claude Code' : 'Codex'),
+                        sessionId: session && typeof session.sessionId === 'string' ? session.sessionId : '',
+                        title: session && typeof session.title === 'string' && session.title
+                            ? session.title
+                            : (session && typeof session.sessionId === 'string' ? session.sessionId : ''),
+                        cwd: session && typeof session.cwd === 'string' ? session.cwd : '',
+                        createdAt: session && typeof session.createdAt === 'string' ? session.createdAt : '',
+                        updatedAt: session && typeof session.updatedAt === 'string' ? session.updatedAt : '',
+                        deletedAt,
+                        messageCount: Number.isFinite(Number(result && result.messageCount))
+                            ? Math.max(0, Math.floor(Number(result.messageCount)))
+                            : (Number.isFinite(Number(session && session.messageCount))
+                                ? Math.max(0, Math.floor(Number(session.messageCount)))
+                                : 0),
+                        originalFilePath: session && typeof session.filePath === 'string' ? session.filePath : '',
+                        provider: session && typeof session.provider === 'string' ? session.provider : source,
+                        keywords: Array.isArray(session && session.keywords) ? session.keywords : [],
+                        capabilities: session && typeof session.capabilities === 'object' && session.capabilities
+                            ? session.capabilities
+                            : {},
+                        claudeIndexPath: '',
+                        claudeIndexEntry: null,
+                        trashFilePath: ''
+                    };
+                },
+
+                prependSessionTrashItem(item, options = {}) {
+                    if (!item || !item.trashId) {
+                        return;
+                    }
+                    const existing = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems : [];
+                    const filtered = existing.filter((entry) => this.getSessionTrashActionKey(entry) !== item.trashId);
+                    const nextItems = [item, ...filtered].slice(0, SESSION_TRASH_LIST_LIMIT);
+                    const previousTotalCount = Number(this.sessionTrashTotalCount);
+                    const normalizedPreviousTotal = Number.isFinite(previousTotalCount) && previousTotalCount >= 0
+                        ? Math.max(existing.length, Math.floor(previousTotalCount))
+                        : existing.length;
+                    this.sessionTrashItems = nextItems;
+                    const previousVisibleCount = Number(this.sessionTrashVisibleCount);
+                    const normalizedPreviousVisibleCount = Number.isFinite(previousVisibleCount) && previousVisibleCount > 0
+                        ? Math.floor(previousVisibleCount)
+                        : SESSION_TRASH_PAGE_SIZE;
+                    const wasFullyExpanded = normalizedPreviousVisibleCount >= existing.length
+                        || normalizedPreviousVisibleCount >= normalizedPreviousTotal;
+                    if (wasFullyExpanded) {
+                        this.sessionTrashVisibleCount = Math.min(
+                            normalizedPreviousVisibleCount + 1,
+                            nextItems.length || (normalizedPreviousVisibleCount + 1)
+                        );
+                    }
+                    const fallbackTotalCount = filtered.length === existing.length
+                        ? normalizedPreviousTotal + 1
+                        : normalizedPreviousTotal;
+                    this.sessionTrashTotalCount = this.normalizeSessionTrashTotalCount(
+                        options && options.totalCount !== undefined
+                            ? options.totalCount
+                            : fallbackTotalCount,
+                        nextItems
+                    );
+                },
+
+                normalizeSessionTrashTotalCount(totalCount, fallbackItems = this.sessionTrashItems) {
+                    const fallbackCount = Array.isArray(fallbackItems) ? fallbackItems.length : 0;
+                    const numericTotal = Number(totalCount);
+                    if (!Number.isFinite(numericTotal) || numericTotal < 0) {
+                        return fallbackCount;
+                    }
+                    return Math.floor(numericTotal);
+                },
+
+                getSessionTrashViewState() {
+                    if (this.sessionTrashLoading && !this.sessionTrashLoadedOnce) {
+                        return 'loading';
+                    }
+                    const totalCount = Number(this.sessionTrashCount);
+                    const normalizedTotalCount = Number.isFinite(totalCount) && totalCount >= 0
+                        ? Math.floor(totalCount)
+                        : 0;
+                    const hasVisibleItems = Array.isArray(this.sessionTrashItems) && this.sessionTrashItems.length > 0;
+                    if (this.sessionTrashLastLoadFailed && (!this.sessionTrashLoadedOnce || !hasVisibleItems)) {
+                        return 'retry';
+                    }
+                    if (!this.sessionTrashLoadedOnce) {
+                        return normalizedTotalCount > 0 ? 'retry' : 'empty';
+                    }
+                    if (normalizedTotalCount === 0) {
+                        return 'empty';
+                    }
+                    return hasVisibleItems ? 'list' : 'retry';
+                },
+
+                issueSessionTrashCountRequestToken() {
+                    const currentToken = Number(this.sessionTrashCountRequestToken);
+                    const nextToken = Number.isFinite(currentToken) && currentToken >= 0
+                        ? Math.floor(currentToken) + 1
+                        : 1;
+                    this.sessionTrashCountRequestToken = nextToken;
+                    return nextToken;
+                },
+
+                issueSessionTrashListRequestToken() {
+                    const currentToken = Number(this.sessionTrashListRequestToken);
+                    const nextToken = Number.isFinite(currentToken) && currentToken >= 0
+                        ? Math.floor(currentToken) + 1
+                        : 1;
+                    this.sessionTrashListRequestToken = nextToken;
+                    return nextToken;
+                },
+
+                invalidateSessionTrashRequests() {
+                    this.issueSessionTrashCountRequestToken();
+                    return this.issueSessionTrashListRequestToken();
+                },
+
+                isLatestSessionTrashCountRequestToken(token) {
+                    return Number(token) === Number(this.sessionTrashCountRequestToken);
+                },
+
+                isLatestSessionTrashListRequestToken(token) {
+                    return Number(token) === Number(this.sessionTrashListRequestToken);
+                },
+
+                resetSessionTrashVisibleCount() {
+                    const totalItems = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems.length : 0;
+                    this.sessionTrashVisibleCount = Math.min(totalItems, SESSION_TRASH_PAGE_SIZE) || SESSION_TRASH_PAGE_SIZE;
+                },
+
+                loadMoreSessionTrashItems() {
+                    const totalItems = Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems.length : 0;
+                    const visibleCount = Number(this.sessionTrashVisibleCount);
+                    const safeVisibleCount = Number.isFinite(visibleCount) && visibleCount > 0
+                        ? Math.floor(visibleCount)
+                        : SESSION_TRASH_PAGE_SIZE;
+                    this.sessionTrashVisibleCount = Math.min(totalItems, safeVisibleCount + SESSION_TRASH_PAGE_SIZE);
+                },
+
+                clearActiveSessionState() {
+                    this.activeSession = null;
+                    this.activeSessionMessages = [];
+                    this.resetSessionDetailPagination();
+                    this.resetSessionPreviewMessageRender();
+                    this.activeSessionDetailError = '';
+                    this.activeSessionDetailClipped = false;
+                    this.cancelSessionTimelineSync();
+                    this.sessionTimelineActiveKey = '';
+                    this.clearSessionTimelineRefs();
+                },
+
+                async removeSessionFromCurrentList(session) {
+                    const sessionKey = this.getSessionExportKey(session);
+                    if (!sessionKey) {
+                        return;
+                    }
+                    const currentList = Array.isArray(this.sessionsList) ? [...this.sessionsList] : [];
+                    const removedIndex = currentList.findIndex((item) => this.getSessionExportKey(item) === sessionKey);
+                    if (removedIndex < 0) {
+                        return;
+                    }
+                    const activeKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
+                    const renderedList = Array.isArray(this.sortedSessionsList) ? this.sortedSessionsList : [];
+                    const renderedIndex = renderedList.findIndex((item) => this.getSessionExportKey(item) === sessionKey);
+                    let nextActiveKey = '';
+                    if (activeKey === sessionKey && renderedIndex >= 0) {
+                        const fallbackSession = renderedList[renderedIndex - 1] || renderedList[renderedIndex + 1] || null;
+                        nextActiveKey = fallbackSession ? this.getSessionExportKey(fallbackSession) : '';
+                    }
+                    currentList.splice(removedIndex, 1);
+                    this.sessionsList = currentList;
+                    this.syncSessionPathOptionsForSource(
+                        this.sessionFilterSource,
+                        this.extractPathOptionsFromSessions(currentList),
+                        false
+                    );
+                    if (activeKey !== sessionKey) {
+                        return;
+                    }
+                    if (currentList.length === 0) {
+                        this.clearActiveSessionState();
+                        return;
+                    }
+                    const nextSession = currentList.find((item) => this.getSessionExportKey(item) === nextActiveKey)
+                        || currentList[Math.min(removedIndex, currentList.length - 1)];
+                    if (!nextSession) {
+                        this.clearActiveSessionState();
+                        return;
+                    }
+                    await this.selectSession(nextSession);
+                },
+
+                normalizeSettingsTab(tab) {
+                    return tab === 'trash' ? 'trash' : 'backup';
+                },
+
+                async onSettingsTabClick(tab) {
+                    await this.switchSettingsTab(tab);
+                },
+
+                async switchSettingsTab(tab, options = {}) {
+                    const nextTab = this.normalizeSettingsTab(tab);
+                    this.settingsTab = nextTab;
+                    if (nextTab !== 'trash') {
+                        return;
+                    }
+                    const forceRefresh = options.forceRefresh === true;
+                    if (forceRefresh || !this.sessionTrashLoadedOnce) {
+                        await this.loadSessionTrash({ forceRefresh });
+                    }
+                },
+
+                async loadSessionTrashCount(options = {}) {
+                    if (this.sessionTrashCountLoading) {
+                        this.sessionTrashCountPendingOptions = {
+                            ...(this.sessionTrashCountPendingOptions || {}),
+                            ...(options || {})
+                        };
+                        return;
+                    }
+                    const requestToken = this.issueSessionTrashCountRequestToken();
+                    this.sessionTrashCountLoading = true;
+                    try {
+                        const res = await api('list-session-trash', { countOnly: true });
+                        if (!this.isLatestSessionTrashCountRequestToken(requestToken)) {
+                            return;
+                        }
+                        if (res.error) {
+                            if (options.silent !== true) {
+                                this.showMessage(res.error, 'error');
+                            }
+                            return;
+                        }
+                        this.sessionTrashTotalCount = this.normalizeSessionTrashTotalCount(
+                            res.totalCount,
+                            this.sessionTrashItems
+                        );
+                        this.sessionTrashCountLoadedOnce = true;
+                    } catch (e) {
+                        if (this.isLatestSessionTrashCountRequestToken(requestToken) && options.silent !== true) {
+                            this.showMessage('加载回收站数量失败', 'error');
+                        }
+                    } finally {
+                        this.sessionTrashCountLoading = false;
+                        const pendingOptions = this.sessionTrashCountPendingOptions;
+                        this.sessionTrashCountPendingOptions = null;
+                        if (pendingOptions) {
+                            await this.loadSessionTrashCount(pendingOptions);
+                        }
+                    }
+                },
+
+                getSessionTrashActionKey(item) {
+                    return item && typeof item.trashId === 'string' ? item.trashId : '';
+                },
+
+                isSessionTrashActionBusy(item) {
+                    const key = typeof item === 'string' ? item : this.getSessionTrashActionKey(item);
+                    return !!(key && (this.sessionTrashRestoring[key] || this.sessionTrashPurging[key]));
+                },
+
+                async loadSessionTrash(options = {}) {
+                    if (this.sessionTrashLoading) {
+                        this.sessionTrashPendingOptions = {
+                            ...(this.sessionTrashPendingOptions || {}),
+                            ...(options || {})
+                        };
+                        return;
+                    }
+                    const requestToken = this.issueSessionTrashListRequestToken();
+                    this.sessionTrashLoading = true;
+                    this.sessionTrashLastLoadFailed = false;
+                    let loadSucceeded = false;
+                    try {
+                        const res = await api('list-session-trash', {
+                            limit: SESSION_TRASH_LIST_LIMIT,
+                            forceRefresh: !!options.forceRefresh
+                        });
+                        if (!this.isLatestSessionTrashListRequestToken(requestToken)) {
+                            return;
+                        }
+                        if (res.error) {
+                            this.sessionTrashLastLoadFailed = true;
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        const nextItems = Array.isArray(res.items) ? res.items : [];
+                        this.sessionTrashItems = nextItems;
+                        this.resetSessionTrashVisibleCount();
+                        this.sessionTrashTotalCount = this.normalizeSessionTrashTotalCount(res.totalCount, nextItems);
+                        this.sessionTrashCountLoadedOnce = true;
+                        this.sessionTrashLastLoadFailed = false;
+                        loadSucceeded = true;
+                    } catch (e) {
+                        if (this.isLatestSessionTrashListRequestToken(requestToken)) {
+                            this.sessionTrashLastLoadFailed = true;
+                            this.showMessage('加载回收站失败', 'error');
+                        }
+                    } finally {
+                        this.sessionTrashLoading = false;
+                        if (loadSucceeded) {
+                            this.sessionTrashLoadedOnce = true;
+                        }
+                        const pendingOptions = this.sessionTrashPendingOptions;
+                        this.sessionTrashPendingOptions = null;
+                        if (pendingOptions) {
+                            await this.loadSessionTrash(pendingOptions);
+                        }
+                    }
+                },
+
+                async restoreSessionTrash(item) {
+                    const key = this.getSessionTrashActionKey(item);
+                    if (!key || this.isSessionTrashActionBusy(key) || this.sessionTrashClearing) {
+                        return;
+                    }
+                    this.sessionTrashRestoring[key] = true;
+                    try {
+                        const res = await api('restore-session-trash', { trashId: key });
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.showMessage('会话已恢复', 'success');
+                        this.invalidateSessionTrashRequests();
+                        await this.loadSessionTrash({ forceRefresh: true });
+                        if (this.sessionsLoadedOnce) {
+                            await this.loadSessions();
+                        }
+                    } catch (e) {
+                        this.showMessage('恢复失败', 'error');
+                    } finally {
+                        this.sessionTrashRestoring[key] = false;
+                    }
+                },
+
+                async purgeSessionTrash(item) {
+                    const key = this.getSessionTrashActionKey(item);
+                    if (!key || this.isSessionTrashActionBusy(key) || this.sessionTrashClearing) {
+                        return;
+                    }
+                    const confirmed = await this.requestConfirmDialog({
+                        title: '彻底删除回收站记录',
+                        message: '该会话将从回收站永久删除，且无法恢复。',
+                        confirmText: '彻底删除',
+                        cancelText: '取消',
+                        danger: true
+                    });
+                    if (!confirmed) {
+                        return;
+                    }
+                    this.sessionTrashPurging[key] = true;
+                    try {
+                        const res = await api('purge-session-trash', { trashId: key });
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.showMessage('已彻底删除', 'success');
+                        this.invalidateSessionTrashRequests();
+                        await this.loadSessionTrash({ forceRefresh: true });
+                    } catch (e) {
+                        this.showMessage('彻底删除失败', 'error');
+                    } finally {
+                        this.sessionTrashPurging[key] = false;
+                    }
+                },
+
+                async clearSessionTrash() {
+                    const normalizedCount = Number(this.sessionTrashCount);
+                    if (this.sessionTrashClearing || !Number.isFinite(normalizedCount) || normalizedCount <= 0) {
+                        return;
+                    }
+                    const confirmed = await this.requestConfirmDialog({
+                        title: '清空回收站',
+                        message: '该操作会永久删除回收站中的全部会话，且无法恢复。',
+                        confirmText: '全部清空',
+                        cancelText: '取消',
+                        danger: true
+                    });
+                    if (!confirmed) {
+                        return;
+                    }
+                    this.sessionTrashClearing = true;
+                    try {
+                        const res = await api('purge-session-trash', { all: true });
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.showMessage('回收站已清空', 'success');
+                        this.invalidateSessionTrashRequests();
+                        await this.loadSessionTrash({ forceRefresh: true });
+                    } catch (e) {
+                        this.showMessage('清空回收站失败', 'error');
+                    } finally {
+                        this.sessionTrashClearing = false;
+                    }
+                },
+
                 normalizeSessionPathValue(value) {
                     return normalizeSessionPathFilter(value);
                 },
@@ -1285,22 +2399,140 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     const value = this.sessionResumeWithYolo ? '1' : '0';
                     localStorage.setItem('codexmateSessionResumeYolo', value);
                 },
-                restoreSessionFilterCache() {
-                    const sourceCache = localStorage.getItem('codexmateSessionFilterSource');
-                    const pathCache = localStorage.getItem('codexmateSessionPathFilter');
-                    const cached = buildSessionFilterCacheState(sourceCache, pathCache);
-                    this.sessionFilterSource = cached.source;
-                    this.sessionPathFilter = cached.pathFilter;
-                    this.refreshSessionPathOptions(this.sessionFilterSource);
+                restoreSessionFilterCache() {
+                    const sourceCache = localStorage.getItem('codexmateSessionFilterSource');
+                    const pathCache = localStorage.getItem('codexmateSessionPathFilter');
+                    const cached = buildSessionFilterCacheState(sourceCache, pathCache);
+                    this.sessionFilterSource = cached.source;
+                    this.sessionPathFilter = cached.pathFilter;
+                    this.refreshSessionPathOptions(this.sessionFilterSource);
+                },
+                persistSessionFilterCache() {
+                    const cached = buildSessionFilterCacheState(this.sessionFilterSource, this.sessionPathFilter);
+                    localStorage.setItem('codexmateSessionFilterSource', cached.source);
+                    if (cached.pathFilter) {
+                        localStorage.setItem('codexmateSessionPathFilter', cached.pathFilter);
+                    } else {
+                        localStorage.removeItem('codexmateSessionPathFilter');
+                    }
+                },
+                normalizeSessionPinnedMap(raw) {
+                    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+                        return {};
+                    }
+                    const next = {};
+                    for (const [key, value] of Object.entries(raw)) {
+                        if (!key) continue;
+                        const numeric = Number(value);
+                        if (!Number.isFinite(numeric) || numeric <= 0) continue;
+                        next[key] = Math.floor(numeric);
+                    }
+                    return next;
+                },
+                restoreSessionPinnedMap() {
+                    const cached = localStorage.getItem('codexmateSessionPinnedMap');
+                    if (!cached) {
+                        this.sessionPinnedMap = {};
+                        return;
+                    }
+                    try {
+                        const parsed = JSON.parse(cached);
+                        this.sessionPinnedMap = this.normalizeSessionPinnedMap(parsed);
+                    } catch (_) {
+                        this.sessionPinnedMap = {};
+                        localStorage.removeItem('codexmateSessionPinnedMap');
+                    }
+                },
+                persistSessionPinnedMap() {
+                    const payload = (this.sessionPinnedMap && typeof this.sessionPinnedMap === 'object')
+                        ? this.sessionPinnedMap
+                        : {};
+                    localStorage.setItem('codexmateSessionPinnedMap', JSON.stringify(payload));
+                },
+                shouldPruneSessionPinnedMap(sessions = this.sessionsList) {
+                    if (!Array.isArray(sessions) || sessions.length === 0) {
+                        return false;
+                    }
+                    if (this.sessionFilterSource !== 'all') {
+                        return false;
+                    }
+                    if (this.sessionPathFilter) {
+                        return false;
+                    }
+                    if (this.sessionQuery && isSessionQueryEnabled(this.sessionFilterSource)) {
+                        return false;
+                    }
+                    if (this.sessionRoleFilter && this.sessionRoleFilter !== 'all') {
+                        return false;
+                    }
+                    if (this.sessionTimePreset && this.sessionTimePreset !== 'all') {
+                        return false;
+                    }
+                    return true;
+                },
+                pruneSessionPinnedMap(sessions = this.sessionsList) {
+                    const current = (this.sessionPinnedMap && typeof this.sessionPinnedMap === 'object')
+                        ? this.sessionPinnedMap
+                        : {};
+                    const list = Array.isArray(sessions) ? sessions : [];
+                    if (Object.keys(current).length === 0 || !this.shouldPruneSessionPinnedMap(list)) {
+                        return;
+                    }
+                    const validKeys = new Set(list.map((session) => this.getSessionExportKey(session)).filter(Boolean));
+                    const next = {};
+                    let changed = false;
+                    for (const [key, value] of Object.entries(current)) {
+                        if (!validKeys.has(key)) {
+                            changed = true;
+                            continue;
+                        }
+                        next[key] = value;
+                    }
+                    if (!changed) {
+                        return;
+                    }
+                    this.sessionPinnedMap = next;
+                    this.persistSessionPinnedMap();
+                },
+                getSessionPinTimestamp(session) {
+                    if (!session) return 0;
+                    const key = this.getSessionExportKey(session);
+                    if (!key) return 0;
+                    const raw = this.sessionPinnedMap && this.sessionPinnedMap[key];
+                    const numeric = Number(raw);
+                    return Number.isFinite(numeric) && numeric > 0 ? Math.floor(numeric) : 0;
                 },
-                persistSessionFilterCache() {
-                    const cached = buildSessionFilterCacheState(this.sessionFilterSource, this.sessionPathFilter);
-                    localStorage.setItem('codexmateSessionFilterSource', cached.source);
-                    if (cached.pathFilter) {
-                        localStorage.setItem('codexmateSessionPathFilter', cached.pathFilter);
+                isSessionPinned(session) {
+                    return this.getSessionPinTimestamp(session) > 0;
+                },
+                toggleSessionPin(session) {
+                    if (!session) return;
+                    const key = this.getSessionExportKey(session);
+                    if (!key) return;
+                    const current = (this.sessionPinnedMap && typeof this.sessionPinnedMap === 'object')
+                        ? this.sessionPinnedMap
+                        : {};
+                    const next = { ...current };
+                    if (next[key]) {
+                        delete next[key];
                     } else {
-                        localStorage.removeItem('codexmateSessionPathFilter');
+                        next[key] = Date.now();
                     }
+                    this.sessionPinnedMap = next;
+                    this.persistSessionPinnedMap();
+                },
+                removeSessionPin(session) {
+                    if (!session) return;
+                    const key = this.getSessionExportKey(session);
+                    if (!key) return;
+                    const current = (this.sessionPinnedMap && typeof this.sessionPinnedMap === 'object')
+                        ? this.sessionPinnedMap
+                        : {};
+                    if (!current[key]) return;
+                    const next = { ...current };
+                    delete next[key];
+                    this.sessionPinnedMap = next;
+                    this.persistSessionPinnedMap();
                 },
 
                 async onSessionSourceChange() {
@@ -1352,13 +2584,137 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                 },
                 setSessionPreviewScrollRef(el) {
                     this.sessionPreviewScrollEl = el || null;
-                    if (this.sessionPreviewScrollEl) {
-                        this.scheduleSessionTimelineSync();
-                    } else {
+                    this.invalidateSessionTimelineMeasurementCache();
+                    const shouldSync = !!(
+                        this.sessionPreviewScrollEl
+                        && this.mainTab === 'sessions'
+                        && this.getMainTabForNav() === 'sessions'
+                        && this.sessionPreviewRenderEnabled
+                        && this.sessionTimelineNodes.length
+                    );
+                    if (!shouldSync) {
                         this.cancelSessionTimelineSync();
+                        this.updateSessionTimelineOffset();
+                        return;
                     }
+                    const boundScrollEl = this.sessionPreviewScrollEl;
+                    this.$nextTick(() => {
+                        if (this.sessionPreviewScrollEl !== boundScrollEl) return;
+                        if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) return;
+                        if (!this.sessionTimelineNodes.length) return;
+                        this.scheduleSessionTimelineSync();
+                    });
                     this.updateSessionTimelineOffset();
                 },
+                clearSessionTimelineRefs() {
+                    this.sessionMessageRefMap = Object.create(null);
+                    this.sessionMessageRefBinderMap = Object.create(null);
+                    this.sessionTimelineLastAnchorY = 0;
+                    this.sessionTimelineLastDirection = 0;
+                    this.invalidateSessionTimelineMeasurementCache(true);
+                },
+                ensureSessionTimelineMeasurementCache() {
+                    if (this.__sessionTimelineMeasurementCache) {
+                        return this.__sessionTimelineMeasurementCache;
+                    }
+                    this.__sessionTimelineMeasurementCache = {
+                        offsetByKey: Object.create(null),
+                        dirty: true
+                    };
+                    return this.__sessionTimelineMeasurementCache;
+                },
+                invalidateSessionTimelineMeasurementCache(resetOffset = false) {
+                    const cache = this.ensureSessionTimelineMeasurementCache();
+                    if (resetOffset) {
+                        cache.offsetByKey = Object.create(null);
+                    }
+                    cache.dirty = true;
+                },
+                refreshSessionTimelineMeasurementCache(nodes = null) {
+                    const cache = this.ensureSessionTimelineMeasurementCache();
+                    const nodeList = Array.isArray(nodes) ? nodes : (Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : []);
+                    if (!nodeList.length) {
+                        cache.offsetByKey = Object.create(null);
+                        cache.dirty = false;
+                        return cache.offsetByKey;
+                    }
+                    const scrollEl = this.sessionPreviewScrollEl || this.$refs.sessionPreviewScroll;
+                    const scrollRect = scrollEl && typeof scrollEl.getBoundingClientRect === 'function'
+                        ? scrollEl.getBoundingClientRect()
+                        : null;
+                    const scrollTop = scrollEl ? Number(scrollEl.scrollTop || 0) : 0;
+                    const nextOffsetByKey = Object.create(null);
+                    for (const node of nodeList) {
+                        if (!node || !node.key) continue;
+                        const messageEl = this.sessionMessageRefMap[node.key];
+                        if (!messageEl) continue;
+                        let top = Number.NaN;
+                        if (
+                            scrollRect
+                            && typeof messageEl.getBoundingClientRect === 'function'
+                        ) {
+                            const messageRect = messageEl.getBoundingClientRect();
+                            top = scrollTop + (messageRect.top - scrollRect.top);
+                        } else {
+                            top = Number(messageEl.offsetTop || 0);
+                        }
+                        if (!Number.isFinite(top)) continue;
+                        nextOffsetByKey[node.key] = top;
+                    }
+                    cache.offsetByKey = nextOffsetByKey;
+                    cache.dirty = false;
+                    return cache.offsetByKey;
+                },
+                getCachedSessionTimelineMeasuredNodes(nodes) {
+                    const nodeList = Array.isArray(nodes) ? nodes : [];
+                    if (!nodeList.length) {
+                        return [];
+                    }
+                    const cache = this.ensureSessionTimelineMeasurementCache();
+                    if (cache.dirty) {
+                        this.refreshSessionTimelineMeasurementCache(nodeList);
+                    }
+                    const offsetByKey = cache.offsetByKey || Object.create(null);
+                    const measuredNodes = [];
+                    for (const node of nodeList) {
+                        if (!node || !node.key) continue;
+                        const top = Number(offsetByKey[node.key]);
+                        if (!Number.isFinite(top)) continue;
+                        measuredNodes.push({
+                            key: node.key,
+                            top
+                        });
+                    }
+                    if (measuredNodes.length >= nodeList.length) {
+                        return measuredNodes;
+                    }
+                    const refreshedOffsetByKey = this.refreshSessionTimelineMeasurementCache(nodeList);
+                    const refreshedNodes = [];
+                    for (const node of nodeList) {
+                        if (!node || !node.key) continue;
+                        const top = Number(refreshedOffsetByKey[node.key]);
+                        if (!Number.isFinite(top)) continue;
+                        refreshedNodes.push({
+                            key: node.key,
+                            top
+                        });
+                    }
+                    return refreshedNodes;
+                },
+                getSessionMessageRefBinder(messageKey) {
+                    if (!this.isSessionTimelineNodeKey(messageKey)) return null;
+                    const current = this.sessionMessageRefBinderMap[messageKey];
+                    if (!current || current.ticket !== this.sessionTabRenderTicket) {
+                        const ticket = this.sessionTabRenderTicket;
+                        this.sessionMessageRefBinderMap[messageKey] = {
+                            ticket,
+                            bind: (el) => {
+                                this.bindSessionMessageRef(messageKey, el, ticket);
+                            }
+                        };
+                    }
+                    return this.sessionMessageRefBinderMap[messageKey].bind;
+                },
                 updateSessionTimelineOffset() {
                     const container = this.sessionPreviewContainerEl || this.$refs.sessionPreviewContainer;
                     if (!container || !container.style) return;
@@ -1369,12 +2725,39 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     const offset = headerHeight > 0 ? (headerHeight + 12) : 72;
                     container.style.setProperty('--session-preview-header-offset', `${offset}px`);
                 },
-                bindSessionMessageRef(messageKey, el) {
+                bindSessionMessageRef(messageKey, el, ticket = this.sessionTabRenderTicket) {
+                    if (!this.sessionTimelineEnabled) return;
                     if (!messageKey) return;
+                    if (ticket !== this.sessionTabRenderTicket) return;
                     if (el) {
+                        if (!this.isSessionTimelineNodeKey(messageKey)) return;
+                        if (this.sessionMessageRefMap[messageKey] === el) return;
                         this.sessionMessageRefMap[messageKey] = el;
+                        this.invalidateSessionTimelineMeasurementCache();
                     } else {
+                        if (!this.sessionMessageRefMap[messageKey]) return;
                         delete this.sessionMessageRefMap[messageKey];
+                        this.invalidateSessionTimelineMeasurementCache();
+                    }
+                },
+                isSessionTimelineNodeKey(messageKey) {
+                    if (!messageKey) return false;
+                    return !!(this.sessionTimelineNodeKeyMap && this.sessionTimelineNodeKeyMap[messageKey]);
+                },
+                pruneSessionMessageRefs() {
+                    const nodeKeyMap = this.sessionTimelineNodeKeyMap || Object.create(null);
+                    let removed = false;
+                    for (const key of Object.keys(this.sessionMessageRefMap)) {
+                        if (nodeKeyMap[key]) continue;
+                        delete this.sessionMessageRefMap[key];
+                        removed = true;
+                    }
+                    for (const key of Object.keys(this.sessionMessageRefBinderMap)) {
+                        if (nodeKeyMap[key]) continue;
+                        delete this.sessionMessageRefBinderMap[key];
+                    }
+                    if (removed) {
+                        this.invalidateSessionTimelineMeasurementCache();
                     }
                 },
                 cancelSessionTimelineSync() {
@@ -1396,42 +2779,178 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.syncSessionTimelineActiveFromScroll();
                 },
                 onSessionPreviewScroll() {
+                    if (
+                        !this.sessionTimelineEnabled
+                        || this.mainTab !== 'sessions'
+                        || this.getMainTabForNav() !== 'sessions'
+                        || !this.sessionPreviewRenderEnabled
+                    ) return;
+                    if (!this.sessionTimelineNodes.length) return;
+                    const scrollEl = this.sessionPreviewScrollEl || this.$refs.sessionPreviewScroll;
+                    if (!scrollEl) return;
+                    const now = Date.now();
+                    const currentTop = Number(scrollEl.scrollTop || 0);
+                    const delta = Math.abs(currentTop - Number(this.sessionTimelineLastScrollTop || 0));
+                    const elapsed = now - Number(this.sessionTimelineLastSyncAt || 0);
+                    if (delta < 48 && elapsed < 120) {
+                        return;
+                    }
+                    this.sessionTimelineLastScrollTop = currentTop;
+                    this.sessionTimelineLastSyncAt = now;
                     this.scheduleSessionTimelineSync();
                 },
                 onWindowResize() {
+                    this.updateCompactLayoutMode();
+                    if (
+                        !this.sessionTimelineEnabled
+                        || this.mainTab !== 'sessions'
+                        || this.getMainTabForNav() !== 'sessions'
+                        || !this.sessionPreviewRenderEnabled
+                    ) {
+                        return;
+                    }
+                    if (!this.sessionTimelineNodes.length) return;
                     this.updateSessionTimelineOffset();
+                    this.invalidateSessionTimelineMeasurementCache();
                     this.scheduleSessionTimelineSync();
                 },
+                shouldForceCompactLayout() {
+                    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+                        return false;
+                    }
+                    const doc = typeof document !== 'undefined' ? document : null;
+                    const viewportWidth = Math.max(
+                        0,
+                        Number(window.innerWidth || 0),
+                        Number(doc && doc.documentElement ? doc.documentElement.clientWidth : 0)
+                    );
+                    const screenWidth = Number(window.screen && window.screen.width ? window.screen.width : 0);
+                    const screenHeight = Number(window.screen && window.screen.height ? window.screen.height : 0);
+                    const shortEdge = screenWidth > 0 && screenHeight > 0
+                        ? Math.min(screenWidth, screenHeight)
+                        : 0;
+                    const touchPoints = Number(navigator.maxTouchPoints || 0);
+                    const userAgent = String(navigator.userAgent || '');
+                    const isMobileUa = /(Android|iPhone|iPad|iPod|Mobile)/i.test(userAgent);
+                    let coarsePointer = false;
+                    let noHover = false;
+                    try {
+                        coarsePointer = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
+                    } catch (_) {}
+                    try {
+                        noHover = !!(window.matchMedia && window.matchMedia('(hover: none)').matches);
+                    } catch (_) {}
+                    return shouldForceCompactLayoutMode({
+                        viewportWidth,
+                        screenWidth,
+                        screenHeight,
+                        shortEdge,
+                        maxTouchPoints: touchPoints,
+                        userAgent,
+                        isMobileUa,
+                        coarsePointer,
+                        noHover
+                    });
+                },
+                applyCompactLayoutClass(enabled) {
+                    if (typeof document === 'undefined' || !document.body) {
+                        return;
+                    }
+                    document.body.classList.toggle('force-compact', !!enabled);
+                },
+                updateCompactLayoutMode() {
+                    const enabled = this.shouldForceCompactLayout();
+                    this.forceCompactLayout = enabled;
+                    this.applyCompactLayoutClass(enabled);
+                },
                 syncSessionTimelineActiveFromScroll() {
+                    if (
+                        !this.sessionTimelineEnabled
+                        || this.mainTab !== 'sessions'
+                        || this.getMainTabForNav() !== 'sessions'
+                        || !this.sessionPreviewRenderEnabled
+                    ) {
+                        if (this.sessionTimelineActiveKey) {
+                            this.sessionTimelineActiveKey = '';
+                        }
+                        return;
+                    }
                     const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
                     if (!nodes.length) {
-                        this.sessionTimelineActiveKey = '';
+                        if (this.sessionTimelineActiveKey) {
+                            this.sessionTimelineActiveKey = '';
+                        }
                         return;
                     }
+                    this.pruneSessionMessageRefs();
                     const scrollEl = this.sessionPreviewScrollEl || this.$refs.sessionPreviewScroll;
                     if (!scrollEl) {
-                        this.sessionTimelineActiveKey = nodes[0].key;
+                        if (!this.isSessionTimelineNodeKey(this.sessionTimelineActiveKey)) {
+                            const fallbackKey = nodes[0].key;
+                            if (this.sessionTimelineActiveKey !== fallbackKey) {
+                                this.sessionTimelineActiveKey = fallbackKey;
+                            }
+                        }
                         return;
                     }
-                    const scrollRect = scrollEl.getBoundingClientRect();
                     const headerEl = scrollEl.querySelector('.session-preview-header');
-                    const headerHeight = headerEl ? headerEl.getBoundingClientRect().height : 0;
-                    const anchorLine = scrollRect.top + headerHeight + 8;
-                    let activeKey = nodes[0].key;
-                    for (const node of nodes) {
-                        const messageEl = this.sessionMessageRefMap[node.key];
-                        if (!messageEl) continue;
-                        const messageRect = messageEl.getBoundingClientRect();
-                        if (messageRect.top <= anchorLine) {
-                            activeKey = node.key;
-                            continue;
+                    const stickyOffset = headerEl ? (headerEl.offsetHeight + 8) : 8;
+                    const rawAnchorY = Number(scrollEl.scrollTop || 0) + stickyOffset;
+                    const previousAnchorY = Number(this.sessionTimelineLastAnchorY || 0);
+                    let direction = rawAnchorY - previousAnchorY;
+                    if (Math.abs(direction) < 1) {
+                        direction = Number(this.sessionTimelineLastDirection || 0);
+                    } else {
+                        this.sessionTimelineLastDirection = direction > 0 ? 1 : -1;
+                    }
+                    this.sessionTimelineLastAnchorY = rawAnchorY;
+                    const hysteresisPx = 18;
+                    const hysteresis = direction > 0 ? -hysteresisPx : (direction < 0 ? hysteresisPx : 0);
+                    const anchorY = rawAnchorY + hysteresis;
+                    const measuredNodes = this.getCachedSessionTimelineMeasuredNodes(nodes);
+                    if (!measuredNodes.length) {
+                        if (!this.isSessionTimelineNodeKey(this.sessionTimelineActiveKey)) {
+                            this.sessionTimelineActiveKey = nodes[0].key;
+                        }
+                        return;
+                    }
+                    let low = 0;
+                    let high = measuredNodes.length - 1;
+                    let candidateIndex = 0;
+                    while (low <= high) {
+                        const mid = Math.floor((low + high) / 2);
+                        if (measuredNodes[mid].top <= anchorY) {
+                            candidateIndex = mid;
+                            low = mid + 1;
+                        } else {
+                            high = mid - 1;
+                        }
+                    }
+                    let currentIndex = -1;
+                    if (this.sessionTimelineActiveKey) {
+                        for (let i = 0; i < measuredNodes.length; i += 1) {
+                            if (measuredNodes[i].key === this.sessionTimelineActiveKey) {
+                                currentIndex = i;
+                                break;
+                            }
+                        }
+                    }
+                    if (currentIndex >= 0) {
+                        if (direction > 0 && candidateIndex < currentIndex) {
+                            candidateIndex = currentIndex;
+                        } else if (direction < 0 && candidateIndex > currentIndex) {
+                            candidateIndex = currentIndex;
                         }
-                        break;
                     }
-                    this.sessionTimelineActiveKey = activeKey;
+                    const activeKey = measuredNodes[candidateIndex].key;
+                    if (this.sessionTimelineActiveKey !== activeKey) {
+                        this.sessionTimelineActiveKey = activeKey;
+                    }
                 },
                 jumpToSessionTimelineNode(messageKey) {
+                    if (!this.sessionTimelineEnabled || this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) return;
                     if (!messageKey) return;
+                    if (!this.isSessionTimelineNodeKey(messageKey)) return;
                     const scrollEl = this.sessionPreviewScrollEl || this.$refs.sessionPreviewScroll;
                     if (!scrollEl) return;
                     const messageEl = this.sessionMessageRefMap[messageKey];
@@ -1504,67 +3023,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                 },
 
                 async loadSessions() {
-                    if (this.sessionsLoading) return;
-                    this.sessionsLoading = true;
-                    this.activeSessionDetailError = '';
-                    const params = buildSessionListParams({
-                        source: this.sessionFilterSource,
-                        pathFilter: this.sessionPathFilter,
-                        query: this.sessionQuery,
-                        roleFilter: this.sessionRoleFilter,
-                        timeRangePreset: this.sessionTimePreset
-                    });
-                    try {
-                        const res = await api('list-sessions', params);
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            this.sessionsList = [];
-                            this.activeSession = null;
-                            this.activeSessionMessages = [];
-                            this.activeSessionDetailClipped = false;
-                            this.cancelSessionTimelineSync();
-                            this.sessionTimelineActiveKey = '';
-                            this.sessionMessageRefMap = Object.create(null);
-                        } else {
-                            this.sessionsList = Array.isArray(res.sessions) ? res.sessions : [];
-                            this.syncSessionPathOptionsForSource(
-                                this.sessionFilterSource,
-                                this.extractPathOptionsFromSessions(this.sessionsList),
-                                true
-                            );
-                            if (this.sessionsList.length === 0) {
-                                this.activeSession = null;
-                                this.activeSessionMessages = [];
-                                this.activeSessionDetailClipped = false;
-                                this.cancelSessionTimelineSync();
-                                this.sessionTimelineActiveKey = '';
-                                this.sessionMessageRefMap = Object.create(null);
-                            } else {
-                                const oldKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
-                                const matched = this.sessionsList.find(item => this.getSessionExportKey(item) === oldKey);
-                                this.activeSession = matched || this.sessionsList[0];
-                                this.activeSessionMessages = [];
-                                this.activeSessionDetailError = '';
-                                this.activeSessionDetailClipped = false;
-                                this.cancelSessionTimelineSync();
-                                this.sessionTimelineActiveKey = '';
-                                this.sessionMessageRefMap = Object.create(null);
-                                await this.loadActiveSessionDetail();
-                            }
-                            void this.loadSessionPathOptions({ source: this.sessionFilterSource });
-                        }
-                    } catch (e) {
-                        this.sessionsList = [];
-                        this.activeSession = null;
-                        this.activeSessionMessages = [];
-                        this.activeSessionDetailClipped = false;
-                        this.cancelSessionTimelineSync();
-                        this.sessionTimelineActiveKey = '';
-                        this.sessionMessageRefMap = Object.create(null);
-                        this.showMessage('加载会话失败', 'error');
-                    } finally {
-                        this.sessionsLoading = false;
-                    }
+                    const result = await loadSessionsHelper.call(this, api);
+                    this.pruneSessionPinnedMap(this.sessionsList);
+                    return result;
                 },
 
                 async selectSession(session) {
@@ -1572,11 +3033,13 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     if (this.activeSession && this.getSessionExportKey(this.activeSession) === this.getSessionExportKey(session)) return;
                     this.activeSession = session;
                     this.activeSessionMessages = [];
+                    this.resetSessionDetailPagination();
+                    this.resetSessionPreviewMessageRender();
                     this.activeSessionDetailError = '';
                     this.activeSessionDetailClipped = false;
                     this.cancelSessionTimelineSync();
                     this.sessionTimelineActiveKey = '';
-                    this.sessionMessageRefMap = Object.create(null);
+                    this.clearSessionTimelineRefs();
                     await this.loadActiveSessionDetail();
                 },
 
@@ -1625,87 +3088,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                 },
 
-                async loadActiveSessionDetail() {
-                    if (!this.activeSession) {
-                        this.activeSessionMessages = [];
-                        this.activeSessionDetailError = '';
-                        this.activeSessionDetailClipped = false;
-                        this.cancelSessionTimelineSync();
-                        this.sessionTimelineActiveKey = '';
-                        this.sessionMessageRefMap = Object.create(null);
-                        return;
-                    }
-
-                    const requestSeq = ++this.sessionDetailRequestSeq;
-                    this.sessionDetailLoading = true;
-                    this.activeSessionDetailError = '';
-                    try {
-                        const res = await api('session-detail', {
-                            source: this.activeSession.source,
-                            sessionId: this.activeSession.sessionId,
-                            filePath: this.activeSession.filePath,
-                            messageLimit: 300
-                        });
-
-                        if (requestSeq !== this.sessionDetailRequestSeq) {
-                            return;
-                        }
-
-                        if (res.error) {
-                            this.activeSessionMessages = [];
-                            this.activeSessionDetailClipped = false;
-                            this.activeSessionDetailError = res.error;
-                            this.cancelSessionTimelineSync();
-                            this.sessionTimelineActiveKey = '';
-                            this.sessionMessageRefMap = Object.create(null);
-                            return;
-                        }
-
-                        const rawMessages = Array.isArray(res.messages) ? res.messages : [];
-                        this.activeSessionMessages = rawMessages.map((message) => this.normalizeSessionMessage(message));
-                        this.activeSessionDetailClipped = !!res.clipped;
-                        if (this.activeSession) {
-                            if (res.sourceLabel) {
-                                this.activeSession.sourceLabel = res.sourceLabel;
-                            }
-                            if (res.sessionId) {
-                                this.activeSession.sessionId = res.sessionId;
-                                if (!this.activeSession.title) {
-                                    this.activeSession.title = res.sessionId;
-                                }
-                            }
-                            if (res.filePath) {
-                                this.activeSession.filePath = res.filePath;
-                            }
-                        }
-                        if (res.updatedAt) {
-                            this.activeSession.updatedAt = res.updatedAt;
-                        }
-                        if (res.cwd) {
-                            this.activeSession.cwd = res.cwd;
-                        }
-                        if (Number.isFinite(res.totalMessages)) {
-                            this.syncActiveSessionMessageCount(res.totalMessages);
-                        }
-                        this.$nextTick(() => {
-                            this.updateSessionTimelineOffset();
-                            this.scheduleSessionTimelineSync();
-                        });
-                    } catch (e) {
-                        if (requestSeq !== this.sessionDetailRequestSeq) {
-                            return;
-                        }
-                        this.activeSessionMessages = [];
-                        this.activeSessionDetailClipped = false;
-                        this.activeSessionDetailError = '加载会话内容失败: ' + e.message;
-                        this.cancelSessionTimelineSync();
-                        this.sessionTimelineActiveKey = '';
-                        this.sessionMessageRefMap = Object.create(null);
-                    } finally {
-                        if (requestSeq === this.sessionDetailRequestSeq) {
-                            this.sessionDetailLoading = false;
-                        }
-                    }
+                async loadActiveSessionDetail(options = {}) {
+                    return loadActiveSessionDetailHelper.call(this, api, options);
                 },
 
                 downloadTextFile(fileName, content, mimeType = 'text/markdown;charset=utf-8') {
@@ -1751,17 +3135,75 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                 },
 
-                async switchProvider(name) {
+                async quickSwitchProvider(name) {
+                    const target = String(name || '').trim();
+                    if (!target || target === this.pendingProviderSwitch) {
+                        return;
+                    }
+                    if (!this.providerSwitchInProgress && target === this.currentProvider) {
+                        return;
+                    }
+                    await this.switchProvider(target);
+                },
+
+                async waitForCodexApplyIdle(maxWaitMs = 20000) {
+                    const startedAt = Date.now();
+                    while (this.codexApplying) {
+                        if ((Date.now() - startedAt) > maxWaitMs) {
+                            throw new Error('等待配置应用完成超时');
+                        }
+                        await new Promise((resolve) => setTimeout(resolve, 50));
+                    }
+                },
+
+                async performProviderSwitch(name) {
+                    await this.waitForCodexApplyIdle();
                     this.currentProvider = name;
                     await this.loadModelsForProvider(name);
                     if (this.modelsSource === 'remote' && this.models.length > 0 && !this.models.includes(this.currentModel)) {
                         this.currentModel = this.models[0];
                     }
                     if (getProviderConfigModeMeta(this.configMode)) {
+                        await this.waitForCodexApplyIdle();
                         await this.applyCodexConfigDirect({ silent: true });
                     }
                 },
 
+                async switchProvider(name) {
+                    const target = String(name || '').trim();
+                    if (!target) {
+                        return;
+                    }
+                    if (this.providerSwitchInProgress) {
+                        this.pendingProviderSwitch = target;
+                        return;
+                    }
+                    this.providerSwitchInProgress = true;
+                    let lastError = '';
+                    try {
+                        this.pendingProviderSwitch = '';
+                        const result = await runLatestOnlyQueue(target, {
+                            perform: async (queuedTarget) => {
+                                await this.performProviderSwitch(queuedTarget);
+                            },
+                            consumePending: () => {
+                                const queued = this.pendingProviderSwitch;
+                                this.pendingProviderSwitch = '';
+                                return queued;
+                            }
+                        });
+                        if (result && typeof result.lastError === 'string') {
+                            lastError = result.lastError;
+                        }
+                    } finally {
+                        this.providerSwitchInProgress = false;
+                        this.pendingProviderSwitch = '';
+                    }
+                    if (lastError) {
+                        this.showMessage(lastError, 'error');
+                    }
+                },
+
                 async onModelChange() {
                     await this.applyCodexConfigDirect();
                 },
@@ -1952,9 +3394,11 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             return;
                         }
                         this.agentsContent = res.content || '';
+                        this.agentsOriginalContent = this.agentsContent;
                         this.agentsPath = res.path || '';
                         this.agentsExists = !!res.exists;
                         this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
+                        this.resetAgentsDiffState();
                         this.showAgentsModal = true;
                     } catch (e) {
                         this.showMessage('加载文件失败', 'error');
@@ -1963,8 +3407,8 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                 },
 
-                ...createSkillsMethods({ api }),
-
+                ...createSkillsMethods({ api }),
+
                 async openOpenclawAgentsEditor() {
                     this.setAgentsModalContext('openclaw');
                     this.agentsLoading = true;
@@ -1978,9 +3422,11 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             this.showMessage(`OpenClaw 配置解析失败，已使用默认 Workspace：${res.configError}`, 'error');
                         }
                         this.agentsContent = res.content || '';
+                        this.agentsOriginalContent = this.agentsContent;
                         this.agentsPath = res.path || '';
                         this.agentsExists = !!res.exists;
                         this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
+                        this.resetAgentsDiffState();
                         this.showAgentsModal = true;
                     } catch (e) {
                         this.showMessage('加载文件失败', 'error');
@@ -2007,9 +3453,11 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             this.showMessage(`OpenClaw 配置解析失败，已使用默认 Workspace：${res.configError}`, 'error');
                         }
                         this.agentsContent = res.content || '';
+                        this.agentsOriginalContent = this.agentsContent;
                         this.agentsPath = res.path || '';
                         this.agentsExists = !!res.exists;
                         this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
+                        this.resetAgentsDiffState();
                         this.showAgentsModal = true;
                     } catch (e) {
                         this.showMessage('加载文件失败', 'error');
@@ -2038,18 +3486,272 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.agentsWorkspaceFileName = '';
                 },
 
-                closeAgentsModal() {
+                resetAgentsDiffState() {
+                    this.agentsDiffVisible = false;
+                    this.agentsDiffLoading = false;
+                    this.agentsDiffError = '';
+                    this.agentsDiffLines = [];
+                    this.agentsDiffStats = {
+                        added: 0,
+                        removed: 0,
+                        unchanged: 0
+                    };
+                    this.agentsDiffTruncated = false;
+                    this.agentsDiffHasChangesValue = false;
+                    this.agentsDiffFingerprint = '';
+                    this._agentsDiffPreviewRequestToken = null;
+                },
+                handleGlobalKeydown(event) {
+                    if (!event || event.key !== 'Escape') {
+                        return;
+                    }
+                    if (this.showConfirmDialog) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.resolveConfirmDialog(false);
+                        return;
+                    }
+                    if (!this.showAgentsModal) {
+                        return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (this.agentsSaving || this.agentsDiffLoading) {
+                        return;
+                    }
+                    if (this.agentsDiffVisible) {
+                        this.resetAgentsDiffState();
+                        return;
+                    }
+                    this.closeAgentsModal();
+                },
+                hasPendingAgentsDraft() {
+                    if (!this.showAgentsModal || this.agentsLoading || this.agentsSaving) {
+                        return false;
+                    }
+                    return this.hasAgentsContentChanged() || this.agentsDiffVisible;
+                },
+                handleBeforeUnload(event) {
+                    if (!this.hasPendingAgentsDraft()) {
+                        return;
+                    }
+                    if (event && typeof event.preventDefault === 'function') {
+                        event.preventDefault();
+                        event.returnValue = '';
+                    }
+                    return '';
+                },
+                hasAgentsContentChanged() {
+                    const original = typeof this.agentsOriginalContent === 'string' ? this.agentsOriginalContent : '';
+                    const current = typeof this.agentsContent === 'string' ? this.agentsContent : '';
+                    return original !== current;
+                },
+                requestConfirmDialog(options = {}) {
+                    if (typeof this.confirmDialogResolver === 'function') {
+                        this.confirmDialogResolver(false);
+                    }
+                    this.confirmDialogTitle = typeof options.title === 'string' && options.title.trim()
+                        ? options.title.trim()
+                        : '请确认操作';
+                    this.confirmDialogMessage = typeof options.message === 'string' ? options.message : '';
+                    this.confirmDialogConfirmText = typeof options.confirmText === 'string' && options.confirmText.trim()
+                        ? options.confirmText.trim()
+                        : '确认';
+                    this.confirmDialogCancelText = typeof options.cancelText === 'string' && options.cancelText.trim()
+                        ? options.cancelText.trim()
+                        : '取消';
+                    this.confirmDialogDanger = !!options.danger;
+                    this.showConfirmDialog = true;
+                    return new Promise((resolve) => {
+                        this.confirmDialogResolver = resolve;
+                    });
+                },
+                resolveConfirmDialog(confirmed) {
+                    const resolver = typeof this.confirmDialogResolver === 'function'
+                        ? this.confirmDialogResolver
+                        : null;
+                    this.showConfirmDialog = false;
+                    this.confirmDialogTitle = '';
+                    this.confirmDialogMessage = '';
+                    this.confirmDialogConfirmText = '确认';
+                    this.confirmDialogCancelText = '取消';
+                    this.confirmDialogDanger = false;
+                    this.confirmDialogResolver = null;
+                    if (resolver) {
+                        resolver(!!confirmed);
+                    }
+                },
+                closeConfirmDialog() {
+                    this.resolveConfirmDialog(false);
+                },
+                onAgentsContentInput() {
+                    if (this.agentsDiffVisible || this.agentsDiffLines.length) {
+                        this.resetAgentsDiffState();
+                    }
+                },
+                buildAgentsDiffFingerprint() {
+                    const context = this.agentsContext || 'codex';
+                    const fileName = context === 'openclaw-workspace'
+                        ? (this.agentsWorkspaceFileName || '')
+                        : '';
+                    const lineEnding = this.agentsLineEnding || '\n';
+                    const content = typeof this.agentsContent === 'string' ? this.agentsContent : '';
+                    const original = typeof this.agentsOriginalContent === 'string' ? this.agentsOriginalContent : '';
+                    return `${context}::${fileName}::${lineEnding}::${content.length}::${content}::${original.length}::${original}`;
+                },
+                async prepareAgentsDiff() {
+                    const requestFingerprint = this.buildAgentsDiffFingerprint();
+                    const requestToken = Symbol('agents-diff-preview');
+                    this._agentsDiffPreviewRequestToken = requestToken;
+                    this.agentsDiffVisible = true;
+                    this.agentsDiffLoading = true;
+                    this.agentsDiffError = '';
+                    this.agentsDiffLines = [];
+                    this.agentsDiffStats = {
+                        added: 0,
+                        removed: 0,
+                        unchanged: 0
+                    };
+                    this.agentsDiffTruncated = false;
+                    this.agentsDiffHasChangesValue = false;
+                    try {
+                        const shouldApplyPreviewState = () => shouldApplyAgentsDiffPreviewResponse({
+                            isVisible: this.agentsDiffVisible,
+                            requestToken,
+                            activeRequestToken: this._agentsDiffPreviewRequestToken,
+                            requestFingerprint,
+                            currentFingerprint: this.buildAgentsDiffFingerprint()
+                        });
+                        const applyPreviewState = (diff) => {
+                            if (!shouldApplyPreviewState()) {
+                                return false;
+                            }
+                            const normalizedDiff = diff && typeof diff === 'object' ? diff : {};
+                            const rawLines = Array.isArray(normalizedDiff.lines) ? normalizedDiff.lines : [];
+                            this.agentsDiffLines = rawLines.filter(line => line && line.type);
+                            this.agentsDiffTruncated = !!normalizedDiff.truncated;
+                            this.agentsDiffHasChangesValue = !!normalizedDiff.hasChanges;
+                            if (normalizedDiff.stats && typeof normalizedDiff.stats === 'object') {
+                                this.agentsDiffStats = {
+                                    added: Number(normalizedDiff.stats.added || 0),
+                                    removed: Number(normalizedDiff.stats.removed || 0),
+                                    unchanged: Number(normalizedDiff.stats.unchanged || 0)
+                                };
+                            } else {
+                                const stats = { added: 0, removed: 0, unchanged: 0 };
+                                for (const line of this.agentsDiffLines) {
+                                    if (line && line.type === 'add') stats.added += 1;
+                                    else if (line && line.type === 'del') stats.removed += 1;
+                                    else stats.unchanged += 1;
+                                }
+                                this.agentsDiffStats = stats;
+                            }
+                            this.agentsDiffFingerprint = requestFingerprint;
+                            return true;
+                        };
+                        const previewRequest = buildAgentsDiffPreviewRequest({
+                            baseContent: this.agentsOriginalContent,
+                            content: this.agentsContent,
+                            lineEnding: this.agentsLineEnding,
+                            context: this.agentsContext,
+                            fileName: this.agentsWorkspaceFileName
+                        });
+                        if (previewRequest.exceedsBodyLimit) {
+                            applyPreviewState(buildAgentsDiffPreview({
+                                baseContent: this.agentsOriginalContent,
+                                content: this.agentsContent
+                            }));
+                            return;
+                        }
+                        const res = await apiWithMeta('preview-agents-diff', previewRequest.params);
+                        if (!shouldApplyPreviewState()) {
+                            return;
+                        }
+                        if (res.error) {
+                            if (isAgentsDiffPreviewPayloadTooLarge(res)) {
+                                applyPreviewState(buildAgentsDiffPreview({
+                                    baseContent: this.agentsOriginalContent,
+                                    content: this.agentsContent
+                                }));
+                                return;
+                            }
+                            this.agentsDiffError = res.error;
+                            return;
+                        }
+                        applyPreviewState(res.diff);
+                    } catch (e) {
+                        if (shouldApplyAgentsDiffPreviewResponse({
+                            isVisible: this.agentsDiffVisible,
+                            requestToken,
+                            activeRequestToken: this._agentsDiffPreviewRequestToken,
+                            requestFingerprint,
+                            currentFingerprint: this.buildAgentsDiffFingerprint()
+                        })) {
+                            this.agentsDiffError = '生成差异失败';
+                        }
+                    } finally {
+                        if (this._agentsDiffPreviewRequestToken === requestToken) {
+                            this.agentsDiffLoading = false;
+                        }
+                    }
+                },
+
+                async closeAgentsModal(options = {}) {
+                    const force = !!(options && options.force);
+                    const shouldConfirmClose = !force
+                        && this.hasPendingAgentsDraft();
+                    if (shouldConfirmClose) {
+                        const message = this.agentsDiffVisible
+                            ? '当前处于差异预览模式，改动尚未保存。确认放弃改动并关闭吗？'
+                            : '存在未保存改动，确认放弃改动并关闭吗？（关闭页面或应用也会丢失改动）';
+                        const confirmed = await this.requestConfirmDialog({
+                            title: '放弃未保存改动',
+                            message,
+                            confirmText: '放弃并关闭',
+                            cancelText: '继续编辑',
+                            danger: true
+                        });
+                        if (!confirmed) {
+                            return;
+                        }
+                    }
                     this.showAgentsModal = false;
                     this.agentsContent = '';
+                    this.agentsOriginalContent = '';
                     this.agentsPath = '';
                     this.agentsExists = false;
                     this.agentsLineEnding = '\n';
                     this.agentsSaving = false;
                     this.agentsWorkspaceFileName = '';
+                    this.resetAgentsDiffState();
                     this.setAgentsModalContext('codex');
                 },
 
                 async applyAgentsContent() {
+                    if (!this.agentsDiffVisible) {
+                        if (!this.hasAgentsContentChanged()) {
+                            this.showMessage('未检测到改动', 'info');
+                            return;
+                        }
+                        await this.prepareAgentsDiff();
+                        return;
+                    }
+                    if (this.agentsDiffLoading) {
+                        return;
+                    }
+                    if (this.agentsDiffError) {
+                        this.showMessage(this.agentsDiffError, 'error');
+                        return;
+                    }
+                    const fingerprint = this.buildAgentsDiffFingerprint();
+                    if (this.agentsDiffFingerprint !== fingerprint) {
+                        await this.prepareAgentsDiff();
+                        return;
+                    }
+                    if (!this.agentsDiffHasChanges) {
+                        this.showMessage('未检测到改动', 'info');
+                        return;
+                    }
                     this.agentsSaving = true;
                     try {
                         let action = 'apply-agents-file';
@@ -2072,7 +3774,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                             ? `工作区文件已保存${this.agentsWorkspaceFileName ? `: ${this.agentsWorkspaceFileName}` : ''}`
                             : (this.agentsContext === 'openclaw' ? 'OpenClaw AGENTS.md 已保存' : 'AGENTS.md 已保存');
                         this.showMessage(successLabel, 'success');
-                        this.closeAgentsModal();
+                        this.closeAgentsModal({ force: true });
                     } catch (e) {
                         this.showMessage('保存失败', 'error');
                     } finally {
@@ -2341,12 +4043,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                     const existing = this.claudeConfigs[name] || {};
                     this.currentClaudeModel = model;
-                    this.claudeConfigs[name] = {
-                        apiKey: existing.apiKey || '',
-                        baseUrl: existing.baseUrl || '',
-                        model: model,
-                        hasKey: !!existing.apiKey
-                    };
+                    this.claudeConfigs[name] = this.mergeClaudeConfig(existing, { model });
                     this.saveClaudeConfigs();
                     this.updateClaudeModelsCurrent();
                     if (!this.claudeConfigs[name].apiKey) {
@@ -2373,12 +4070,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
 
                 updateConfig() {
                     const name = this.editingConfig.name;
-                    this.claudeConfigs[name] = {
-                        apiKey: this.editingConfig.apiKey,
-                        baseUrl: this.editingConfig.baseUrl,
-                        model: this.editingConfig.model,
-                        hasKey: !!this.editingConfig.apiKey
-                    };
+                    this.claudeConfigs[name] = this.mergeClaudeConfig(this.claudeConfigs[name], this.editingConfig);
                     this.saveClaudeConfigs();
                     this.showMessage('操作成功', 'success');
                     this.closeEditConfigModal();
@@ -2394,12 +4086,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
 
                 async saveAndApplyConfig() {
                     const name = this.editingConfig.name;
-                    this.claudeConfigs[name] = {
-                        apiKey: this.editingConfig.apiKey,
-                        baseUrl: this.editingConfig.baseUrl,
-                        model: this.editingConfig.model,
-                        hasKey: !!this.editingConfig.apiKey
-                    };
+                    this.claudeConfigs[name] = this.mergeClaudeConfig(this.claudeConfigs[name], this.editingConfig);
                     this.saveClaudeConfigs();
 
                     const config = this.claudeConfigs[name];
@@ -2438,12 +4125,7 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                         return this.showMessage('配置已存在', 'info');
                     }
 
-                    this.claudeConfigs[name] = {
-                        apiKey: this.newClaudeConfig.apiKey,
-                        baseUrl: this.newClaudeConfig.baseUrl,
-                        model: this.newClaudeConfig.model,
-                        hasKey: !!this.newClaudeConfig.apiKey
-                    };
+                    this.claudeConfigs[name] = this.mergeClaudeConfig({}, this.newClaudeConfig);
 
                     this.currentClaudeConfig = name;
                     this.saveClaudeConfigs();
@@ -2452,12 +4134,18 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     this.refreshClaudeModelContext();
                 },
 
-                deleteClaudeConfig(name) {
+                async deleteClaudeConfig(name) {
                     if (Object.keys(this.claudeConfigs).length <= 1) {
                         return this.showMessage('至少保留一项', 'error');
                     }
-
-                    if (!confirm(`确定删除配置 "${name}"?`)) return;
+                    const confirmed = await this.requestConfirmDialog({
+                        title: '删除 Claude 配置',
+                        message: `确定删除配置 "${name}"?`,
+                        confirmText: '删除',
+                        cancelText: '取消',
+                        danger: true
+                    });
+                    if (!confirmed) return;
 
                     delete this.claudeConfigs[name];
                     if (this.currentClaudeConfig === name) {
@@ -2474,6 +4162,9 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     const config = this.claudeConfigs[name];
 
                     if (!config.apiKey) {
+                        if (config.externalCredentialType) {
+                            return this.showMessage('检测到外部 Claude 认证状态；当前仅支持展示，若需由 codexmate 接管请补充 API Key', 'info');
+                        }
                         return this.showMessage('请先配置 API Key', 'error');
                     }
 
@@ -3540,11 +5231,18 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
                     }
                 },
 
-                deleteOpenclawConfig(name) {
+                async deleteOpenclawConfig(name) {
                     if (Object.keys(this.openclawConfigs).length <= 1) {
                         return this.showMessage('至少保留一项', 'error');
                     }
-                    if (!confirm(`确定删除配置 "${name}"?`)) return;
+                    const confirmed = await this.requestConfirmDialog({
+                        title: '删除 OpenClaw 配置',
+                        message: `确定删除配置 "${name}"?`,
+                        confirmText: '删除',
+                        cancelText: '取消',
+                        danger: true
+                    });
+                    if (!confirmed) return;
                     delete this.openclawConfigs[name];
                     if (this.currentOpenclawConfig === name) {
                         this.currentOpenclawConfig = Object.keys(this.openclawConfigs)[0];
@@ -4070,4 +5768,5 @@ import { createSkillsMethods } from './modules/skills.methods.mjs';
 
         app.mount('#app');
     });
-    
+
+