codexmate 0.0.12 → 0.0.14

package/web-ui/app.js

@@ -7,7 +7,12 @@
     formatLatency,
     buildSpeedTestIssue,
     isSessionQueryEnabled,
-    buildSessionListParams
+    buildSessionListParams,
+    normalizeSessionSource,
+    normalizeSessionPathFilter,
+    buildSessionFilterCacheState,
+    buildSessionTimelineNodes,
+    normalizeSessionMessageRole
 } from './logic.mjs';
 
         document.addEventListener('DOMContentLoaded', () => {
@@ -81,6 +86,7 @@
                     showOpenclawConfigModal: false,
                     showConfigTemplateModal: false,
                     showAgentsModal: false,
+                    showSkillsModal: false,
                     showInstallModal: false,
                     configTemplateContent: '',
                     configTemplateApplying: false,
@@ -94,6 +100,17 @@
                     agentsContext: 'codex',
                     agentsModalTitle: 'AGENTS.md 编辑器',
                     agentsModalHint: '保存后会写入目标 AGENTS.md（与 config.toml 同级）。',
+                    skillsRootPath: '',
+                    skillsList: [],
+                    skillsSelectedNames: [],
+                    skillsLoading: false,
+                    skillsDeleting: false,
+                    skillsKeyword: '',
+                    skillsStatusFilter: 'all',
+                    skillsImportList: [],
+                    skillsImportSelectedKeys: [],
+                    skillsScanningImports: false,
+                    skillsImporting: false,
                     sessionsList: [],
                     sessionsLoading: false,
                     sessionFilterSource: 'all',
@@ -124,6 +141,13 @@
                     activeSessionDetailClipped: false,
                     sessionDetailLoading: false,
                     sessionDetailRequestSeq: 0,
+                    sessionTimelineActiveKey: '',
+                    sessionTimelineRafId: 0,
+                    sessionMessageRefMap: Object.create(null),
+                    sessionPreviewScrollEl: null,
+                    sessionPreviewContainerEl: null,
+                    sessionPreviewHeaderEl: null,
+                    sessionPreviewHeaderResizeObserver: null,
                     sessionStandalone: false,
                     sessionStandaloneError: '',
                     sessionStandaloneText: '',
@@ -137,13 +161,35 @@
                     claudeSpeedLoading: {},
                     claudeShareLoading: {},
                     providerShareLoading: {},
-                    installCommands: [
-                        'npm install -g @anthropic-ai/claude-code',
-                        'npm i -g @openai/codex'
+                    installPackageManager: 'npm',
+                    installCommandAction: 'install',
+                    installRegistryPreset: 'default',
+                    installRegistryCustom: '',
+                    installStatusTargets: [
+                        {
+                            id: 'claude',
+                            name: 'Claude Code CLI',
+                            packageName: '@anthropic-ai/claude-code',
+                            installed: false,
+                            bin: 'claude',
+                            version: '',
+                            commandPath: '',
+                            error: ''
+                        },
+                        {
+                            id: 'codex',
+                            name: 'Codex CLI',
+                            packageName: '@openai/codex',
+                            installed: false,
+                            bin: 'codex',
+                            version: '',
+                            commandPath: '',
+                            error: ''
+                        }
                     ],
                     newProvider: { name: '', url: '', key: '' },
                     resetConfigLoading: false,
-                    editingProvider: { name: '', url: '', key: '' },
+                    editingProvider: { name: '', url: '', key: '', readOnly: false, nonEditable: false },
                     newModelName: '',
                     currentClaudeConfig: '',
                     currentClaudeModel: '',
@@ -209,7 +255,34 @@
                     openclawMissingProviders: [],
                     healthCheckLoading: false,
                     healthCheckResult: null,
-                    healthCheckRemote: false
+                    healthCheckRemote: false,
+                    claudeDownloadLoading: false,
+                    claudeDownloadProgress: 0,
+                    claudeDownloadTimer: null,
+                    codexDownloadLoading: false,
+                    codexDownloadProgress: 0,
+                    codexDownloadTimer: null,
+                    claudeImportLoading: false,
+                    codexImportLoading: false,
+                    codexAuthProfiles: [],
+                    codexAuthImportLoading: false,
+                    codexAuthSwitching: {},
+                    codexAuthDeleting: {},
+                    proxySettings: {
+                        enabled: false,
+                        host: '127.0.0.1',
+                        port: 8318,
+                        provider: '',
+                        authSource: 'provider',
+                        timeoutMs: 30000
+                    },
+                    proxyRuntime: null,
+                    proxyLoading: false,
+                    proxySaving: false,
+                    proxyStarting: false,
+                    proxyStopping: false,
+                    proxyApplying: false,
+                    showProxyAdvanced: false
                 }
             },
             mounted() {
@@ -220,6 +293,8 @@
                 } else if (savedSessionYolo === '1' || savedSessionYolo === 'true') {
                     this.sessionResumeWithYolo = true;
                 }
+                this.restoreSessionFilterCache();
+                window.addEventListener('resize', this.onWindowResize);
                 const savedConfigs = localStorage.getItem('claudeConfigs');
                 if (savedConfigs) {
                     try {
@@ -255,11 +330,31 @@
                 }
                 this.loadAll();
             },
+            beforeUnmount() {
+                this.cancelSessionTimelineSync();
+                this.disconnectSessionPreviewHeaderResizeObserver();
+                window.removeEventListener('resize', this.onWindowResize);
+                this.sessionPreviewScrollEl = null;
+                this.sessionPreviewContainerEl = null;
+                this.sessionPreviewHeaderEl = null;
+                this.sessionMessageRefMap = Object.create(null);
+            },
 
             computed: {
                 isSessionQueryEnabled() {
                     return isSessionQueryEnabled(this.sessionFilterSource);
                 },
+                sessionTimelineNodes() {
+                    return buildSessionTimelineNodes(this.activeSessionMessages, {
+                        getKey: (message, index) => this.getRecordRenderKey(message, index)
+                    });
+                },
+                sessionTimelineActiveTitle() {
+                    if (!this.sessionTimelineActiveKey) return '';
+                    const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
+                    const matched = nodes.find(node => node.key === this.sessionTimelineActiveKey);
+                    return matched ? matched.title : '';
+                },
                 sessionQueryPlaceholder() {
                     if (this.isSessionQueryEnabled) {
                         return '关键词检索（支持 Codex/Claude，例：claude code）';
@@ -276,6 +371,241 @@
                         list.unshift(current);
                     }
                     return list;
+                },
+                proxyProviderOptions() {
+                    const source = Array.isArray(this.providersList) ? this.providersList : [];
+                    const list = source
+                        .map((item) => (item && typeof item.name === 'string' ? item.name.trim() : ''))
+                        .filter((name) => name && name !== 'codexmate-proxy');
+                    return Array.from(new Set(list));
+                },
+                proxyRuntimeDisplayProvider() {
+                    if (!this.proxyRuntime) return '';
+                    const value = typeof this.proxyRuntime.provider === 'string'
+                        ? this.proxyRuntime.provider.trim()
+                        : '';
+                    return value || 'local';
+                },
+                installTargetCards() {
+                    const targets = Array.isArray(this.installStatusTargets) ? this.installStatusTargets : [];
+                    const action = this.normalizeInstallAction(this.installCommandAction);
+                    return targets.map((target) => {
+                        const id = target && typeof target.id === 'string' ? target.id : '';
+                        return {
+                            ...target,
+                            command: this.getInstallCommand(id, action)
+                        };
+                    });
+                },
+                installRegistryPreview() {
+                    return this.resolveInstallRegistryUrl(this.installRegistryPreset, this.installRegistryCustom);
+                },
+                filteredSkillsList() {
+                    const list = Array.isArray(this.skillsList) ? this.skillsList : [];
+                    const keyword = typeof this.skillsKeyword === 'string' ? this.skillsKeyword.trim().toLowerCase() : '';
+                    const status = typeof this.skillsStatusFilter === 'string' ? this.skillsStatusFilter : 'all';
+                    return list.filter((item) => {
+                        const safe = item && typeof item === 'object' ? item : {};
+                        const hasSkillFile = !!safe.hasSkillFile;
+                        if (status === 'with-skill-file' && !hasSkillFile) return false;
+                        if (status === 'missing-skill-file' && hasSkillFile) return false;
+                        if (!keyword) return true;
+                        const fields = [
+                            safe.name,
+                            safe.displayName,
+                            safe.description,
+                            safe.path
+                        ];
+                        return fields.some((value) => typeof value === 'string' && value.toLowerCase().includes(keyword));
+                    });
+                },
+                skillsSelectableNames() {
+                    const list = Array.isArray(this.filteredSkillsList) ? this.filteredSkillsList : [];
+                    return list
+                        .map((item) => (item && typeof item.name === 'string' ? item.name.trim() : ''))
+                        .filter(Boolean);
+                },
+                skillsConfiguredCount() {
+                    const list = Array.isArray(this.skillsList) ? this.skillsList : [];
+                    return list.filter((item) => !!(item && item.hasSkillFile)).length;
+                },
+                skillsMissingSkillFileCount() {
+                    const list = Array.isArray(this.skillsList) ? this.skillsList : [];
+                    return list.filter((item) => !(item && item.hasSkillFile)).length;
+                },
+                skillsFilterDirty() {
+                    const keyword = typeof this.skillsKeyword === 'string' ? this.skillsKeyword.trim() : '';
+                    const status = typeof this.skillsStatusFilter === 'string' ? this.skillsStatusFilter : 'all';
+                    return keyword.length > 0 || status !== 'all';
+                },
+                skillsSelectedCount() {
+                    const selected = Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : [];
+                    return Array.from(new Set(selected.map((item) => String(item || '').trim()).filter(Boolean))).length;
+                },
+                skillsVisibleSelectedCount() {
+                    const selectable = this.skillsSelectableNames;
+                    const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
+                    return selectable.filter((name) => selectedSet.has(name)).length;
+                },
+                skillsAllSelected() {
+                    const selectable = this.skillsSelectableNames;
+                    if (!selectable.length) return false;
+                    const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
+                    return selectable.every((name) => selectedSet.has(name));
+                },
+                skillsImportSelectableKeys() {
+                    const list = Array.isArray(this.skillsImportList) ? this.skillsImportList : [];
+                    return list
+                        .map((item) => this.buildSkillImportKey(item))
+                        .filter(Boolean);
+                },
+                skillsImportSelectedCount() {
+                    const selectable = this.skillsImportSelectableKeys;
+                    const selectedSet = new Set(Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : []);
+                    return selectable.filter((key) => selectedSet.has(key)).length;
+                },
+                skillsImportAllSelected() {
+                    const selectable = this.skillsImportSelectableKeys;
+                    if (!selectable.length) return false;
+                    const selectedSet = new Set(Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : []);
+                    return selectable.every((key) => selectedSet.has(key));
+                },
+                skillsImportConfiguredCount() {
+                    const list = Array.isArray(this.skillsImportList) ? this.skillsImportList : [];
+                    return list.filter((item) => !!(item && item.hasSkillFile)).length;
+                },
+                skillsImportMissingSkillFileCount() {
+                    const list = Array.isArray(this.skillsImportList) ? this.skillsImportList : [];
+                    return list.filter((item) => !(item && item.hasSkillFile)).length;
+                },
+                inspectorMainTabLabel() {
+                    if (this.mainTab === 'config') return '配置中心';
+                    if (this.mainTab === 'sessions') return '会话浏览';
+                    if (this.mainTab === 'settings') return '设置';
+                    return '未知';
+                },
+                inspectorConfigModeLabel() {
+                    if (this.mainTab !== 'config') return '--';
+                    if (this.configMode === 'codex') return 'Codex';
+                    if (this.configMode === 'claude') return 'Claude Code';
+                    if (this.configMode === 'openclaw') return 'OpenClaw';
+                    return '未选择';
+                },
+                inspectorCurrentConfigLabel() {
+                    if (this.mainTab !== 'config') return '--';
+                    if (this.configMode === 'codex') {
+                        const provider = typeof this.currentProvider === 'string' ? this.currentProvider.trim() : '';
+                        return provider || '未选择';
+                    }
+                    if (this.configMode === 'claude') {
+                        const config = typeof this.currentClaudeConfig === 'string' ? this.currentClaudeConfig.trim() : '';
+                        return config || '未选择';
+                    }
+                    const openclaw = typeof this.currentOpenclawConfig === 'string' ? this.currentOpenclawConfig.trim() : '';
+                    return openclaw || '未选择';
+                },
+                inspectorCurrentModelLabel() {
+                    if (this.mainTab !== 'config') return '--';
+                    if (this.configMode === 'codex') {
+                        const model = typeof this.currentModel === 'string' ? this.currentModel.trim() : '';
+                        return model || '未选择';
+                    }
+                    if (this.configMode === 'claude') {
+                        const model = typeof this.currentClaudeModel === 'string' ? this.currentClaudeModel.trim() : '';
+                        return model || '未选择';
+                    }
+                    const model = this.openclawStructured && typeof this.openclawStructured.agentPrimary === 'string'
+                        ? this.openclawStructured.agentPrimary.trim()
+                        : '';
+                    return model || '按配置文件';
+                },
+                inspectorTemplateStatus() {
+                    if (this.mainTab !== 'config') return '--';
+                    if (this.configMode === 'codex') {
+                        if (this.configTemplateApplying || this.codexApplying) {
+                            return '模板应用中';
+                        }
+                        return '模板可编辑（手动确认应用）';
+                    }
+                    if (this.configMode === 'claude') {
+                        return '即时写入 Claude settings';
+                    }
+                    if (this.openclawApplying || this.openclawSaving) {
+                        return 'OpenClaw 保存/应用中';
+                    }
+                    return 'JSON5 可保存并应用';
+                },
+                inspectorBusyStatus() {
+                    const tasks = [];
+                    if (this.loading) tasks.push('初始化');
+                    if (this.sessionsLoading) tasks.push('会话加载');
+                    if (this.codexModelsLoading || this.claudeModelsLoading) tasks.push('模型加载');
+                    if (this.codexApplying || this.configTemplateApplying || this.openclawApplying) tasks.push('配置应用');
+                    if (this.agentsSaving) tasks.push('AGENTS 保存');
+                    if (this.skillsLoading || this.skillsDeleting || this.skillsScanningImports || this.skillsImporting) tasks.push('Skills 管理');
+                    if (this.proxySaving || this.proxyApplying || this.proxyStarting || this.proxyStopping) tasks.push('代理更新');
+                    return tasks.length ? tasks.join(' / ') : '空闲';
+                },
+                inspectorMessageSummary() {
+                    const value = typeof this.message === 'string' ? this.message.trim() : '';
+                    return value || '暂无提示';
+                },
+                inspectorSessionSourceLabel() {
+                    if (this.sessionFilterSource === 'codex') return 'Codex';
+                    if (this.sessionFilterSource === 'claude') return 'Claude Code';
+                    return '全部';
+                },
+                inspectorSessionPathLabel() {
+                    const value = typeof this.sessionPathFilter === 'string' ? this.sessionPathFilter.trim() : '';
+                    return value || '全部路径';
+                },
+                inspectorSessionQueryLabel() {
+                    if (!this.isSessionQueryEnabled) return '当前来源不支持';
+                    const value = typeof this.sessionQuery === 'string' ? this.sessionQuery.trim() : '';
+                    return value || '未设置';
+                },
+                inspectorHealthStatus() {
+                    if (this.initError) return '读取失败';
+                    if (this.loading) return '初始化中';
+                    return '正常';
+                },
+                inspectorHealthTone() {
+                    if (this.initError) return 'error';
+                    if (this.loading) return 'warn';
+                    return 'ok';
+                },
+                inspectorModelLoadStatus() {
+                    if (this.codexModelsLoading || this.claudeModelsLoading) {
+                        return '加载中';
+                    }
+                    if (this.modelsSource === 'error' || this.claudeModelsSource === 'error') {
+                        return '加载异常';
+                    }
+                    return '正常';
+                },
+                inspectorProxyStatus() {
+                    if (this.proxySaving || this.proxyApplying || this.proxyStarting || this.proxyStopping) {
+                        return '状态更新中';
+                    }
+                    if (this.proxyRuntime && this.proxyRuntime.running === true) {
+                        return `运行中（${this.proxyRuntimeDisplayProvider}）`;
+                    }
+                    return '未运行';
+                },
+                installTroubleshootingTips() {
+                    const platform = this.resolveInstallPlatform();
+                    if (platform === 'win32') {
+                        return [
+                            'PowerShell 报权限不足（EACCES/EPERM）时，请以管理员身份执行安装命令。',
+                            '安装后若仍提示找不到命令，重开终端并执行：where codex / where claude。',
+                            '公司网络受限时，可先切换镜像源快捷项（npmmirror / 腾讯云 / 自定义）。'
+                        ];
+                    }
+                    return [
+                        '出现 EACCES 权限错误时，优先修复 Node 全局目录权限，不建议直接 sudo npm。',
+                        '安装后若命令未生效，重开终端并执行：which codex / which claude。',
+                        '公司网络受限时，可先切换镜像源快捷项（npmmirror / 腾讯云 / 自定义）。'
+                    ];
                 }
             },
             methods: {
@@ -323,6 +653,15 @@
                     } catch (e) {
                         // loadModelsForProvider 内部已有 toast，这里吞掉防止抛出
                     }
+
+                    try {
+                        await Promise.all([
+                            this.loadCodexAuthProfiles(),
+                            this.loadProxyStatus()
+                        ]);
+                    } catch (e) {
+                        // 认证/代理状态加载失败不阻塞主界面
+                    }
                 },
 
                 async loadModelsForProvider(providerName) {
@@ -585,6 +924,9 @@
                     this.activeSessionMessages = [];
                     this.activeSessionDetailError = '';
                     this.activeSessionDetailClipped = false;
+                    this.cancelSessionTimelineSync();
+                    this.sessionTimelineActiveKey = '';
+                    this.sessionMessageRefMap = Object.create(null);
                     this.sessionStandaloneError = '';
                     this.sessionStandaloneText = '';
                     this.sessionStandaloneTitle = this.activeSession.title || '会话';
@@ -704,12 +1046,39 @@
                     this.showMessage('复制失败', 'error');
                 },
 
-                copyInstallCommand(cmd) {
+                exportAgentsContent() {
+                    const text = typeof this.agentsContent === 'string' ? this.agentsContent : '';
+                    if (!text) {
+                        this.showMessage('没有可导出内容', 'info');
+                        return;
+                    }
+                    const now = new Date();
+                    const year = String(now.getFullYear());
+                    const month = String(now.getMonth() + 1).padStart(2, '0');
+                    const day = String(now.getDate()).padStart(2, '0');
+                    const hour = String(now.getHours()).padStart(2, '0');
+                    const minute = String(now.getMinutes()).padStart(2, '0');
+                    const second = String(now.getSeconds()).padStart(2, '0');
+                    const fileName = `agent-${year}${month}${day}-${hour}${minute}${second}.txt`;
+                    this.downloadTextFile(fileName, text, 'text/plain;charset=utf-8');
+                    this.showMessage(`已导出 ${fileName}`, 'success');
+                },
+
+                async copyInstallCommand(cmd) {
                     const text = typeof cmd === 'string' ? cmd.trim() : '';
                     if (!text) {
                         this.showMessage('没有可复制内容', 'info');
                         return;
                     }
+                    try {
+                        if (navigator.clipboard && window.isSecureContext) {
+                            await navigator.clipboard.writeText(text);
+                            this.showMessage('已复制命令', 'success');
+                            return;
+                        }
+                    } catch (e) {
+                        // fallback to legacy copy path
+                    }
                     const ok = this.fallbackCopyText(text);
                     if (ok) {
                         this.showMessage('已复制命令', 'success');
@@ -778,6 +1147,10 @@
                         this.showMessage('参数无效', 'error');
                         return;
                     }
+                    if (!this.shouldAllowProviderShare(provider)) {
+                        this.showMessage('本地入口不可分享', 'info');
+                        return;
+                    }
                     if (this.providerShareLoading[name]) {
                         return;
                     }
@@ -922,8 +1295,7 @@
                 },
 
                 normalizeSessionPathValue(value) {
-                    if (typeof value !== 'string') return '';
-                    return value.trim();
+                    return normalizeSessionPathFilter(value);
                 },
 
                 mergeSessionPathOptions(baseList = [], incomingList = []) {
@@ -1032,13 +1404,32 @@
                     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);
+                },
+                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');
+                    }
+                },
 
                 async onSessionSourceChange() {
                     this.refreshSessionPathOptions(this.sessionFilterSource);
+                    this.persistSessionFilterCache();
                     await this.loadSessions();
                 },
 
                 async onSessionPathFilterChange() {
+                    this.persistSessionFilterCache();
                     await this.loadSessions();
                 },
 
@@ -1052,8 +1443,156 @@
                     this.sessionQuery = '';
                     this.sessionRoleFilter = 'all';
                     this.sessionTimePreset = 'all';
+                    this.persistSessionFilterCache();
                     await this.onSessionSourceChange();
                 },
+                setSessionPreviewContainerRef(el) {
+                    this.sessionPreviewContainerEl = el || null;
+                    this.updateSessionTimelineOffset();
+                },
+                disconnectSessionPreviewHeaderResizeObserver() {
+                    if (!this.sessionPreviewHeaderResizeObserver) return;
+                    this.sessionPreviewHeaderResizeObserver.disconnect();
+                    this.sessionPreviewHeaderResizeObserver = null;
+                },
+                observeSessionPreviewHeaderResize() {
+                    this.disconnectSessionPreviewHeaderResizeObserver();
+                    if (!this.sessionPreviewHeaderEl || typeof ResizeObserver !== 'function') return;
+                    this.sessionPreviewHeaderResizeObserver = new ResizeObserver(() => {
+                        this.updateSessionTimelineOffset();
+                    });
+                    this.sessionPreviewHeaderResizeObserver.observe(this.sessionPreviewHeaderEl);
+                },
+                setSessionPreviewHeaderRef(el) {
+                    this.disconnectSessionPreviewHeaderResizeObserver();
+                    this.sessionPreviewHeaderEl = el || null;
+                    this.observeSessionPreviewHeaderResize();
+                    this.updateSessionTimelineOffset();
+                },
+                setSessionPreviewScrollRef(el) {
+                    this.sessionPreviewScrollEl = el || null;
+                    if (this.sessionPreviewScrollEl) {
+                        this.scheduleSessionTimelineSync();
+                    } else {
+                        this.cancelSessionTimelineSync();
+                    }
+                    this.updateSessionTimelineOffset();
+                },
+                updateSessionTimelineOffset() {
+                    const container = this.sessionPreviewContainerEl || this.$refs.sessionPreviewContainer;
+                    if (!container || !container.style) return;
+                    const header = this.sessionPreviewHeaderEl
+                        || (this.sessionPreviewScrollEl ? this.sessionPreviewScrollEl.querySelector('.session-preview-header') : null)
+                        || container.querySelector('.session-preview-header');
+                    const headerHeight = header ? Math.ceil(header.getBoundingClientRect().height) : 0;
+                    const offset = headerHeight > 0 ? (headerHeight + 12) : 72;
+                    container.style.setProperty('--session-preview-header-offset', `${offset}px`);
+                },
+                bindSessionMessageRef(messageKey, el) {
+                    if (!messageKey) return;
+                    if (el) {
+                        this.sessionMessageRefMap[messageKey] = el;
+                    } else {
+                        delete this.sessionMessageRefMap[messageKey];
+                    }
+                },
+                cancelSessionTimelineSync() {
+                    if (!this.sessionTimelineRafId) return;
+                    if (typeof cancelAnimationFrame === 'function') {
+                        cancelAnimationFrame(this.sessionTimelineRafId);
+                    }
+                    this.sessionTimelineRafId = 0;
+                },
+                scheduleSessionTimelineSync() {
+                    if (this.sessionTimelineRafId) return;
+                    if (typeof requestAnimationFrame === 'function') {
+                        this.sessionTimelineRafId = requestAnimationFrame(() => {
+                            this.sessionTimelineRafId = 0;
+                            this.syncSessionTimelineActiveFromScroll();
+                        });
+                        return;
+                    }
+                    this.syncSessionTimelineActiveFromScroll();
+                },
+                onSessionPreviewScroll() {
+                    this.scheduleSessionTimelineSync();
+                },
+                onWindowResize() {
+                    this.updateSessionTimelineOffset();
+                    this.scheduleSessionTimelineSync();
+                },
+                syncSessionTimelineActiveFromScroll() {
+                    const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
+                    if (!nodes.length) {
+                        this.sessionTimelineActiveKey = '';
+                        return;
+                    }
+                    const scrollEl = this.sessionPreviewScrollEl || this.$refs.sessionPreviewScroll;
+                    if (!scrollEl) {
+                        this.sessionTimelineActiveKey = nodes[0].key;
+                        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;
+                        }
+                        break;
+                    }
+                    this.sessionTimelineActiveKey = activeKey;
+                },
+                jumpToSessionTimelineNode(messageKey) {
+                    if (!messageKey) return;
+                    const scrollEl = this.sessionPreviewScrollEl || this.$refs.sessionPreviewScroll;
+                    if (!scrollEl) return;
+                    const messageEl = this.sessionMessageRefMap[messageKey];
+                    if (!messageEl) return;
+                    const headerEl = scrollEl.querySelector('.session-preview-header');
+                    const stickyOffset = headerEl ? (headerEl.offsetHeight + 8) : 8;
+                    const scrollRect = scrollEl.getBoundingClientRect();
+                    const messageRect = messageEl.getBoundingClientRect();
+                    const targetScrollTop = scrollEl.scrollTop + (messageRect.top - scrollRect.top) - stickyOffset;
+                    this.sessionTimelineActiveKey = messageKey;
+                    if (typeof scrollEl.scrollTo === 'function') {
+                        scrollEl.scrollTo({
+                            top: Math.max(0, targetScrollTop),
+                            behavior: 'smooth'
+                        });
+                    } else {
+                        messageEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }
+                },
+
+                normalizeSessionMessage(message) {
+                    const fallback = {
+                        role: 'assistant',
+                        normalizedRole: 'assistant',
+                        roleLabel: 'Assistant',
+                        text: typeof message === 'string' ? message : '',
+                        timestamp: ''
+                    };
+                    const safeMessage = message && typeof message === 'object' ? message : fallback;
+                    const normalizedRole = normalizeSessionMessageRole(
+                        safeMessage.normalizedRole || safeMessage.role
+                    );
+                    const roleLabel = normalizedRole === 'user'
+                        ? 'User'
+                        : (normalizedRole === 'system' ? 'System' : 'Assistant');
+                    return {
+                        ...safeMessage,
+                        role: normalizedRole,
+                        normalizedRole,
+                        roleLabel
+                    };
+                },
 
                 getRecordKey(message) {
                     if (!message || !Number.isInteger(message.recordLineIndex) || message.recordLineIndex < 0) {
@@ -1102,6 +1641,9 @@
                             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(
@@ -1113,10 +1655,19 @@
                                 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 });
@@ -1126,6 +1677,9 @@
                         this.activeSession = null;
                         this.activeSessionMessages = [];
                         this.activeSessionDetailClipped = false;
+                        this.cancelSessionTimelineSync();
+                        this.sessionTimelineActiveKey = '';
+                        this.sessionMessageRefMap = Object.create(null);
                         this.showMessage('加载会话失败', 'error');
                     } finally {
                         this.sessionsLoading = false;
@@ -1139,6 +1693,9 @@
                     this.activeSessionMessages = [];
                     this.activeSessionDetailError = '';
                     this.activeSessionDetailClipped = false;
+                    this.cancelSessionTimelineSync();
+                    this.sessionTimelineActiveKey = '';
+                    this.sessionMessageRefMap = Object.create(null);
                     await this.loadActiveSessionDetail();
                 },
 
@@ -1192,6 +1749,9 @@
                         this.activeSessionMessages = [];
                         this.activeSessionDetailError = '';
                         this.activeSessionDetailClipped = false;
+                        this.cancelSessionTimelineSync();
+                        this.sessionTimelineActiveKey = '';
+                        this.sessionMessageRefMap = Object.create(null);
                         return;
                     }
 
@@ -1214,10 +1774,14 @@
                             this.activeSessionMessages = [];
                             this.activeSessionDetailClipped = false;
                             this.activeSessionDetailError = res.error;
+                            this.cancelSessionTimelineSync();
+                            this.sessionTimelineActiveKey = '';
+                            this.sessionMessageRefMap = Object.create(null);
                             return;
                         }
 
-                        this.activeSessionMessages = Array.isArray(res.messages) ? res.messages : [];
+                        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) {
@@ -1242,6 +1806,10 @@
                         if (Number.isFinite(res.totalMessages)) {
                             this.syncActiveSessionMessageCount(res.totalMessages);
                         }
+                        this.$nextTick(() => {
+                            this.updateSessionTimelineOffset();
+                            this.scheduleSessionTimelineSync();
+                        });
                     } catch (e) {
                         if (requestSeq !== this.sessionDetailRequestSeq) {
                             return;
@@ -1249,6 +1817,9 @@
                         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;
@@ -1256,10 +1827,10 @@
                     }
                 },
 
-                downloadTextFile(fileName, content) {
+                downloadTextFile(fileName, content, mimeType = 'text/markdown;charset=utf-8') {
                     // 使用 UTF-8 BOM 确保文本编辑器正确识别编码
                     const BOM = '\uFEFF';
-                    const blob = new Blob([BOM + content], { type: 'text/markdown;charset=utf-8' });
+                    const blob = new Blob([BOM + content], { type: mimeType });
                     const url = URL.createObjectURL(blob);
                     const link = document.createElement('a');
                     link.href = url;
@@ -1509,6 +2080,191 @@
                     }
                 },
 
+                async openSkillsManager() {
+                    this.skillsSelectedNames = [];
+                    this.skillsKeyword = '';
+                    this.skillsStatusFilter = 'all';
+                    this.skillsImportList = [];
+                    this.skillsImportSelectedKeys = [];
+                    this.showSkillsModal = true;
+                    await this.refreshSkillsList({ silent: false });
+                },
+
+                closeSkillsModal() {
+                    this.showSkillsModal = false;
+                    this.skillsSelectedNames = [];
+                    this.skillsImportSelectedKeys = [];
+                },
+
+                async refreshSkillsList(options = {}) {
+                    this.skillsLoading = true;
+                    try {
+                        const res = await api('list-codex-skills');
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.skillsRootPath = res.root || '';
+                        this.skillsList = Array.isArray(res.items) ? res.items : [];
+                        const currentNames = new Set((Array.isArray(this.skillsList) ? this.skillsList : [])
+                            .map((item) => (item && typeof item.name === 'string' ? item.name.trim() : ''))
+                            .filter(Boolean));
+                        this.skillsSelectedNames = (Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : [])
+                            .filter((name) => currentNames.has(name));
+                        if (!options.silent) {
+                            const exists = res.exists !== false;
+                            if (!exists) {
+                                this.showMessage('skills 目录不存在，已按空列表显示', 'info');
+                            }
+                        }
+                    } catch (e) {
+                        this.showMessage('加载 skills 失败', 'error');
+                    } finally {
+                        this.skillsLoading = false;
+                    }
+                },
+
+                resetSkillsFilters() {
+                    this.skillsKeyword = '';
+                    this.skillsStatusFilter = 'all';
+                },
+
+                toggleAllSkillsSelection() {
+                    const selectable = this.skillsSelectableNames;
+                    if (this.skillsAllSelected) {
+                        const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
+                        selectable.forEach((name) => selectedSet.delete(name));
+                        this.skillsSelectedNames = Array.from(selectedSet);
+                        return;
+                    }
+                    const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
+                    selectable.forEach((name) => selectedSet.add(name));
+                    this.skillsSelectedNames = Array.from(selectedSet);
+                },
+
+                buildSkillImportKey(item) {
+                    const safe = item && typeof item === 'object' ? item : {};
+                    const sourceApp = typeof safe.sourceApp === 'string' ? safe.sourceApp.trim().toLowerCase() : '';
+                    const name = typeof safe.name === 'string' ? safe.name.trim() : '';
+                    if (!sourceApp || !name) return '';
+                    return `${sourceApp}:${name}`;
+                },
+
+                toggleAllSkillsImportSelection() {
+                    const selectable = this.skillsImportSelectableKeys;
+                    if (this.skillsImportAllSelected) {
+                        this.skillsImportSelectedKeys = [];
+                        return;
+                    }
+                    this.skillsImportSelectedKeys = [...selectable];
+                },
+
+                async scanImportableSkills() {
+                    if (this.skillsScanningImports || this.skillsImporting) return;
+                    this.skillsScanningImports = true;
+                    try {
+                        const res = await api('scan-unmanaged-codex-skills');
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.skillsImportList = Array.isArray(res.items) ? res.items : [];
+                        const availableKeys = new Set(this.skillsImportSelectableKeys);
+                        this.skillsImportSelectedKeys = (Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : [])
+                            .filter((key) => availableKeys.has(key));
+                        if (this.skillsImportList.length === 0) {
+                            this.showMessage('未扫描到可导入 skill', 'info');
+                        } else {
+                            this.showMessage(`扫描到 ${this.skillsImportList.length} 个可导入 skill`, 'success');
+                        }
+                    } catch (e) {
+                        this.showMessage('扫描可导入 skill 失败', 'error');
+                    } finally {
+                        this.skillsScanningImports = false;
+                    }
+                },
+
+                async importSelectedSkills() {
+                    if (this.skillsImporting) return;
+                    const selectedSet = new Set(Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : []);
+                    const selectedItems = (Array.isArray(this.skillsImportList) ? this.skillsImportList : [])
+                        .filter((item) => selectedSet.has(this.buildSkillImportKey(item)))
+                        .map((item) => ({
+                            name: item.name,
+                            sourceApp: item.sourceApp
+                        }));
+                    if (!selectedItems.length) {
+                        this.showMessage('请先选择要导入的 skill', 'error');
+                        return;
+                    }
+
+                    this.skillsImporting = true;
+                    try {
+                        const res = await api('import-codex-skills', { items: selectedItems });
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        const importedCount = Array.isArray(res.imported) ? res.imported.length : 0;
+                        const failedCount = Array.isArray(res.failed) ? res.failed.length : 0;
+                        if (failedCount > 0 && importedCount > 0) {
+                            this.showMessage(`已导入 ${importedCount} 个，失败 ${failedCount} 个`, 'error');
+                        } else if (failedCount > 0) {
+                            const first = res.failed[0] && res.failed[0].error ? res.failed[0].error : '导入失败';
+                            this.showMessage(first, 'error');
+                        } else {
+                            this.showMessage(`已导入 ${importedCount} 个 skill`, 'success');
+                        }
+                        await this.refreshSkillsList({ silent: true });
+                    } catch (e) {
+                        this.showMessage('导入 skill 失败', 'error');
+                    } finally {
+                        this.skillsImporting = false;
+                        await this.scanImportableSkills();
+                    }
+                },
+
+                async deleteSelectedSkills() {
+                    if (this.skillsDeleting) return;
+                    const selected = Array.isArray(this.skillsSelectedNames)
+                        ? Array.from(new Set(this.skillsSelectedNames.map((item) => String(item || '').trim()).filter(Boolean)))
+                        : [];
+                    if (!selected.length) {
+                        this.showMessage('请先选择要删除的 skill', 'error');
+                        return;
+                    }
+                    const confirmed = window.confirm(`确认删除 ${selected.length} 个 skill 吗？此操作不可撤销。`);
+                    if (!confirmed) {
+                        return;
+                    }
+
+                    this.skillsDeleting = true;
+                    try {
+                        const res = await api('delete-codex-skills', { names: selected });
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+
+                        const deletedCount = Array.isArray(res.deleted) ? res.deleted.length : 0;
+                        const failedList = Array.isArray(res.failed) ? res.failed : [];
+                        const failedCount = failedList.length;
+                        if (failedCount > 0 && deletedCount > 0) {
+                            this.showMessage(`已删除 ${deletedCount} 个，失败 ${failedCount} 个`, 'error');
+                        } else if (failedCount > 0) {
+                            const first = failedList[0] && failedList[0].error ? failedList[0].error : '删除失败';
+                            this.showMessage(first, 'error');
+                        } else {
+                            this.showMessage(`已删除 ${deletedCount} 个 skill`, 'success');
+                        }
+                        await this.refreshSkillsList({ silent: true });
+                    } catch (e) {
+                        this.showMessage('删除 skill 失败', 'error');
+                    } finally {
+                        this.skillsDeleting = false;
+                    }
+                },
+
                 async openOpenclawAgentsEditor() {
                     this.setAgentsModalContext('openclaw');
                     this.agentsLoading = true;
@@ -1632,6 +2388,9 @@
                     if (!name) {
                         return this.showMessage('名称不能为空', 'error');
                     }
+                    if (name.toLowerCase() === 'local') {
+                        return this.showMessage('local provider 为系统保留名称，不可新增', 'error');
+                    }
                     if (this.providersList.some(item => item.name === name)) {
                         return this.showMessage('名称已存在', 'error');
                     }
@@ -1655,7 +2414,89 @@
                     }
                 },
 
+                getCurrentCodexAuthProfile() {
+                    const list = Array.isArray(this.codexAuthProfiles) ? this.codexAuthProfiles : [];
+                    return list.find((item) => !!(item && item.current)) || null;
+                },
+
+                isLocalLikeProvider(providerOrName) {
+                    if (!providerOrName) return false;
+                    const rawName = typeof providerOrName === 'object'
+                        ? String(providerOrName.name || '')
+                        : String(providerOrName);
+                    const normalized = rawName.trim().toLowerCase();
+                    return normalized === 'local' || normalized === 'codexmate-proxy';
+                },
+
+                providerPillState(provider) {
+                    if (this.isLocalLikeProvider(provider)) {
+                        const currentProfile = this.getCurrentCodexAuthProfile();
+                        return currentProfile
+                            ? { configured: true, text: '已登录' }
+                            : { configured: false, text: '未登录' };
+                    }
+                    const configured = !!(provider && provider.hasKey);
+                    return {
+                        configured,
+                        text: configured ? '已配置' : '未配置'
+                    };
+                },
+
+                providerPillConfigured(provider) {
+                    return this.providerPillState(provider).configured;
+                },
+
+                providerPillText(provider) {
+                    return this.providerPillState(provider).text;
+                },
+
+                isReadOnlyProvider(providerOrName) {
+                    if (!providerOrName) return false;
+                    if (typeof providerOrName === 'object') {
+                        return !!providerOrName.readOnly;
+                    }
+                    const name = String(providerOrName).trim();
+                    if (!name) return false;
+                    const target = (this.providersList || []).find((item) => item && item.name === name);
+                    return !!(target && target.readOnly);
+                },
+
+                isNonDeletableProvider(providerOrName) {
+                    if (!providerOrName) return false;
+                    if (typeof providerOrName === 'object') {
+                        const directName = String(providerOrName.name || '').trim().toLowerCase();
+                        if (directName === 'local' || directName === 'codexmate-proxy') {
+                            return true;
+                        }
+                        return !!providerOrName.nonDeletable;
+                    }
+                    const name = String(providerOrName).trim();
+                    if (!name) return false;
+                    const normalized = name.toLowerCase();
+                    if (normalized === 'local' || normalized === 'codexmate-proxy') {
+                        return true;
+                    }
+                    const target = (this.providersList || []).find((item) => item && item.name === name);
+                    return !!(target && target.nonDeletable);
+                },
+
+                shouldShowProviderDelete(provider) {
+                    return !this.isReadOnlyProvider(provider) && !this.isNonDeletableProvider(provider);
+                },
+
+                shouldShowProviderEdit(provider) {
+                    return !this.isReadOnlyProvider(provider) && !this.isNonDeletableProvider(provider);
+                },
+
+                shouldAllowProviderShare(provider) {
+                    return !this.isReadOnlyProvider(provider) && !this.isLocalLikeProvider(provider);
+                },
+
                 async deleteProvider(name) {
+                    if (this.isNonDeletableProvider(name)) {
+                        this.showMessage('该 provider 为保留项，不可删除', 'info');
+                        return;
+                    }
                     const res = await api('delete-provider', { name });
                     if (res.error) {
                         this.showMessage(res.error, 'error');
@@ -1670,15 +2511,26 @@
                 },
 
                 openEditModal(provider) {
+                    if (!this.shouldShowProviderEdit(provider)) {
+                        this.showMessage('该 provider 为保留项，不可编辑', 'info');
+                        return;
+                    }
                     this.editingProvider = {
                         name: provider.name,
                         url: provider.url || '',
-                        key: ''
+                        key: '',
+                        readOnly: !!provider.readOnly,
+                        nonEditable: this.isNonDeletableProvider(provider)
                     };
                     this.showEditModal = true;
                 },
 
                 async updateProvider() {
+                    if (this.editingProvider.readOnly || this.editingProvider.nonEditable) {
+                        this.showMessage('该 provider 为保留项，不可编辑', 'error');
+                        this.closeEditModal();
+                        return;
+                    }
                     if (!this.editingProvider.url) {
                         return this.showMessage('URL 必填', 'error');
                     }
@@ -1702,7 +2554,7 @@
 
                 closeEditModal() {
                     this.showEditModal = false;
-                    this.editingProvider = { name: '', url: '', key: '' };
+                    this.editingProvider = { name: '', url: '', key: '', readOnly: false, nonEditable: false };
                 },
 
                 async resetConfig() {
@@ -2751,6 +3603,136 @@
                     this.resetOpenclawQuick();
                 },
 
+                normalizeInstallPackageManager(value) {
+                    const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
+                    if (normalized === 'pnpm' || normalized === 'bun' || normalized === 'npm') {
+                        return normalized;
+                    }
+                    return 'npm';
+                },
+
+                normalizeInstallAction(value) {
+                    const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
+                    if (normalized === 'update' || normalized === 'uninstall' || normalized === 'install') {
+                        return normalized;
+                    }
+                    return 'install';
+                },
+
+                normalizeInstallRegistryPreset(value) {
+                    const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
+                    if (normalized === 'default' || normalized === 'npmmirror' || normalized === 'tencent' || normalized === 'custom') {
+                        return normalized;
+                    }
+                    return 'default';
+                },
+
+                normalizeInstallRegistryUrl(value) {
+                    const normalized = typeof value === 'string' ? value.trim() : '';
+                    if (!normalized) return '';
+                    if (!/^https?:\/\//i.test(normalized)) {
+                        return '';
+                    }
+                    return normalized.replace(/\/+$/, '');
+                },
+
+                resolveInstallRegistryUrl(presetValue, customValue) {
+                    const preset = this.normalizeInstallRegistryPreset(presetValue);
+                    if (preset === 'npmmirror') {
+                        return 'https://registry.npmmirror.com';
+                    }
+                    if (preset === 'tencent') {
+                        return 'https://mirrors.cloud.tencent.com/npm';
+                    }
+                    if (preset === 'custom') {
+                        return this.normalizeInstallRegistryUrl(customValue);
+                    }
+                    return '';
+                },
+
+                appendInstallRegistryOption(command, actionName) {
+                    const base = typeof command === 'string' ? command.trim() : '';
+                    if (!base) return '';
+                    const action = this.normalizeInstallAction(actionName);
+                    if (action === 'uninstall') {
+                        return base;
+                    }
+                    const registry = this.resolveInstallRegistryUrl(this.installRegistryPreset, this.installRegistryCustom);
+                    if (!registry) {
+                        return base;
+                    }
+                    return `${base} --registry=${registry}`;
+                },
+
+                resolveInstallPlatform() {
+                    const navPlatform = typeof navigator !== 'undefined' && typeof navigator.platform === 'string'
+                        ? navigator.platform.trim().toLowerCase()
+                        : '';
+                    if (navPlatform.includes('win')) return 'win32';
+                    if (navPlatform.includes('mac')) return 'darwin';
+                    return 'linux';
+                },
+
+                buildInstallCommandMatrix(packageManager) {
+                    const manager = this.normalizeInstallPackageManager(packageManager);
+                    const matrix = {
+                        claude: {
+                            install: '',
+                            update: '',
+                            uninstall: ''
+                        },
+                        codex: {
+                            install: '',
+                            update: '',
+                            uninstall: ''
+                        }
+                    };
+                    if (manager === 'pnpm') {
+                        matrix.claude.install = 'pnpm add -g @anthropic-ai/claude-code';
+                        matrix.claude.update = 'pnpm up -g @anthropic-ai/claude-code';
+                        matrix.claude.uninstall = 'pnpm remove -g @anthropic-ai/claude-code';
+                        matrix.codex.install = 'pnpm add -g @openai/codex';
+                        matrix.codex.update = 'pnpm up -g @openai/codex';
+                        matrix.codex.uninstall = 'pnpm remove -g @openai/codex';
+                        return matrix;
+                    }
+                    if (manager === 'bun') {
+                        matrix.claude.install = 'bun add -g @anthropic-ai/claude-code';
+                        matrix.claude.update = 'bun update -g @anthropic-ai/claude-code';
+                        matrix.claude.uninstall = 'bun remove -g @anthropic-ai/claude-code';
+                        matrix.codex.install = 'bun add -g @openai/codex';
+                        matrix.codex.update = 'bun update -g @openai/codex';
+                        matrix.codex.uninstall = 'bun remove -g @openai/codex';
+                        return matrix;
+                    }
+                    matrix.claude.install = 'npm install -g @anthropic-ai/claude-code';
+                    matrix.claude.update = 'npm update -g @anthropic-ai/claude-code';
+                    matrix.claude.uninstall = 'npm uninstall -g @anthropic-ai/claude-code';
+                    matrix.codex.install = 'npm install -g @openai/codex';
+                    matrix.codex.update = 'npm update -g @openai/codex';
+                    matrix.codex.uninstall = 'npm uninstall -g @openai/codex';
+                    return matrix;
+                },
+
+                getInstallCommand(targetId, actionName) {
+                    const targetKey = typeof targetId === 'string' ? targetId.trim() : '';
+                    if (!targetKey) return '';
+                    const action = this.normalizeInstallAction(actionName);
+                    const currentMap = this.buildInstallCommandMatrix(this.installPackageManager);
+                    const current = currentMap[targetKey] && typeof currentMap[targetKey][action] === 'string'
+                        ? currentMap[targetKey][action]
+                        : '';
+                    return this.appendInstallRegistryOption(current, action);
+                },
+
+                setInstallCommandAction(actionName) {
+                    this.installCommandAction = this.normalizeInstallAction(actionName);
+                },
+
+                setInstallRegistryPreset(presetName) {
+                    this.installRegistryPreset = this.normalizeInstallRegistryPreset(presetName);
+                },
+
                 openInstallModal() {
                     this.showInstallModal = true;
                 },
@@ -2955,6 +3937,427 @@
                     }
                 },
 
+                async downloadClaudeDirectory() {
+                    if (this.claudeDownloadLoading) return;
+                    this.claudeDownloadLoading = true;
+                    this.claudeDownloadProgress = 5;
+                    this.claudeDownloadTimer = setInterval(() => {
+                        if (this.claudeDownloadProgress < 90) {
+                            this.claudeDownloadProgress += 5;
+                        }
+                    }, 400);
+                    try {
+                        const res = await api('download-claude-dir');
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        if (!res || res.success !== true || !res.fileName) {
+                            this.showMessage('备份失败', 'error');
+                            return;
+                        }
+                        this.claudeDownloadProgress = 100;
+                        const downloadUrl = `/download/${encodeURIComponent(res.fileName)}`;
+                        const link = document.createElement('a');
+                        link.href = downloadUrl;
+                        link.download = res.fileName;
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        this.showMessage('备份成功，开始下载', 'success');
+                    } catch (e) {
+                        this.showMessage('备份失败：' + (e && e.message ? e.message : '未知错误'), 'error');
+                    } finally {
+                        if (this.claudeDownloadTimer) {
+                            clearInterval(this.claudeDownloadTimer);
+                            this.claudeDownloadTimer = null;
+                        }
+                        this.claudeDownloadLoading = false;
+                        setTimeout(() => {
+                            this.claudeDownloadProgress = 0;
+                        }, 800);
+                    }
+                },
+
+                async downloadCodexDirectory() {
+                    if (this.codexDownloadLoading) return;
+                    this.codexDownloadLoading = true;
+                    this.codexDownloadProgress = 5;
+                    this.codexDownloadTimer = setInterval(() => {
+                        if (this.codexDownloadProgress < 90) {
+                            this.codexDownloadProgress += 5;
+                        }
+                    }, 400);
+                    try {
+                        const res = await api('download-codex-dir');
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        if (!res || res.success !== true || !res.fileName) {
+                            this.showMessage('备份失败', 'error');
+                            return;
+                        }
+                        this.codexDownloadProgress = 100;
+                        const downloadUrl = `/download/${encodeURIComponent(res.fileName)}`;
+                        const link = document.createElement('a');
+                        link.href = downloadUrl;
+                        link.download = res.fileName;
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        this.showMessage('备份成功，开始下载', 'success');
+                    } catch (e) {
+                        this.showMessage('备份失败：' + (e && e.message ? e.message : '未知错误'), 'error');
+                    } finally {
+                        if (this.codexDownloadTimer) {
+                            clearInterval(this.codexDownloadTimer);
+                            this.codexDownloadTimer = null;
+                        }
+                        this.codexDownloadLoading = false;
+                        setTimeout(() => {
+                            this.codexDownloadProgress = 0;
+                        }, 800);
+                    }
+                },
+
+                triggerClaudeImport() {
+                    const input = this.$refs.claudeImportInput;
+                    if (input) {
+                        input.value = '';
+                        input.click();
+                    }
+                },
+
+                triggerCodexImport() {
+                    const input = this.$refs.codexImportInput;
+                    if (input) {
+                        input.value = '';
+                        input.click();
+                    }
+                },
+
+                handleClaudeImportChange(event) {
+                    const file = event && event.target && event.target.files ? event.target.files[0] : null;
+                    if (file) {
+                        void this.importBackupFile('claude', file);
+                    }
+                },
+
+                handleCodexImportChange(event) {
+                    const file = event && event.target && event.target.files ? event.target.files[0] : null;
+                    if (file) {
+                        void this.importBackupFile('codex', file);
+                    }
+                },
+
+                async importBackupFile(type, file) {
+                    const maxSize = 200 * 1024 * 1024;
+                    const loadingKey = type === 'claude' ? 'claudeImportLoading' : 'codexImportLoading';
+                    if (file.size > maxSize) {
+                        this.showMessage('备份文件过大，限制 200MB', 'error');
+                        this.resetImportInput(type);
+                        return;
+                    }
+                    this[loadingKey] = true;
+                    try {
+                        const base64 = await this.readFileAsBase64(file);
+                        const action = type === 'claude' ? 'restore-claude-dir' : 'restore-codex-dir';
+                        const res = await api(action, {
+                            fileName: file.name || `${type}-backup.zip`,
+                            fileBase64: base64
+                        });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        const backupTip = res && res.backupPath ? `，原配置已备份到临时文件：${res.backupPath}` : '';
+                        this.showMessage(`导入成功${backupTip}`, 'success');
+                        if (type === 'claude') {
+                            await this.refreshClaudeSelectionFromSettings({ silent: true });
+                        } else {
+                            await this.loadAll();
+                        }
+                    } catch (e) {
+                        this.showMessage('导入失败：' + (e && e.message ? e.message : '未知错误'), 'error');
+                    } finally {
+                        this[loadingKey] = false;
+                        this.resetImportInput(type);
+                    }
+                },
+
+                readFileAsBase64(file) {
+                    return new Promise((resolve, reject) => {
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            const result = reader.result;
+                            if (result instanceof ArrayBuffer) {
+                                resolve(this.arrayBufferToBase64(result));
+                                return;
+                            }
+                            if (typeof result === 'string') {
+                                const idx = result.indexOf('base64,');
+                                resolve(idx >= 0 ? result.slice(idx + 7) : result);
+                                return;
+                            }
+                            reject(new Error('不支持的文件读取结果'));
+                        };
+                        reader.onerror = () => reject(new Error('读取文件失败'));
+                        reader.readAsArrayBuffer(file);
+                    });
+                },
+
+                arrayBufferToBase64(buffer) {
+                    const bytes = new Uint8Array(buffer);
+                    const chunkSize = 0x8000;
+                    let binary = '';
+                    for (let i = 0; i < bytes.byteLength; i += chunkSize) {
+                        binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+                    }
+                    return btoa(binary);
+                },
+
+                resetImportInput(type) {
+                    const refName = type === 'claude' ? 'claudeImportInput' : 'codexImportInput';
+                    const el = this.$refs[refName];
+                    if (el) {
+                        el.value = '';
+                    }
+                },
+
+                async loadCodexAuthProfiles(options = {}) {
+                    const silent = !!options.silent;
+                    try {
+                        const res = await api('list-auth-profiles');
+                        if (res && res.error) {
+                            if (!silent) {
+                                this.showMessage(res.error, 'error');
+                            }
+                            return;
+                        }
+                        const list = Array.isArray(res && res.profiles) ? res.profiles : [];
+                        this.codexAuthProfiles = list.sort((a, b) => {
+                            if (!!a.current !== !!b.current) {
+                                return a.current ? -1 : 1;
+                            }
+                            return String(a.name || '').localeCompare(String(b.name || ''));
+                        });
+                    } catch (e) {
+                        if (!silent) {
+                            this.showMessage('读取认证列表失败', 'error');
+                        }
+                    }
+                },
+
+                triggerCodexAuthUpload() {
+                    const input = this.$refs.codexAuthImportInput;
+                    if (input) {
+                        input.value = '';
+                        input.click();
+                    }
+                },
+
+                handleCodexAuthImportChange(event) {
+                    const file = event && event.target && event.target.files ? event.target.files[0] : null;
+                    if (file) {
+                        void this.importCodexAuthFile(file);
+                    }
+                },
+
+                resetCodexAuthImportInput() {
+                    const el = this.$refs.codexAuthImportInput;
+                    if (el) {
+                        el.value = '';
+                    }
+                },
+
+                async importCodexAuthFile(file) {
+                    this.codexAuthImportLoading = true;
+                    try {
+                        const base64 = await this.readFileAsBase64(file);
+                        const res = await api('import-auth-profile', {
+                            fileName: file.name || 'codex-auth.json',
+                            fileBase64: base64,
+                            activate: true
+                        });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        await this.loadCodexAuthProfiles({ silent: true });
+                        this.showMessage('认证文件已导入并切换', 'success');
+                    } catch (e) {
+                        this.showMessage('导入认证文件失败', 'error');
+                    } finally {
+                        this.codexAuthImportLoading = false;
+                        this.resetCodexAuthImportInput();
+                    }
+                },
+
+                async switchCodexAuthProfile(name) {
+                    const key = String(name || '').trim();
+                    if (!key || this.codexAuthSwitching[key]) return;
+                    this.codexAuthSwitching[key] = true;
+                    try {
+                        const res = await api('switch-auth-profile', { name: key });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        await this.loadCodexAuthProfiles({ silent: true });
+                        this.showMessage(`已切换认证: ${key}`, 'success');
+                    } catch (e) {
+                        this.showMessage('切换认证失败', 'error');
+                    } finally {
+                        this.codexAuthSwitching[key] = false;
+                    }
+                },
+
+                async deleteCodexAuthProfile(name) {
+                    const key = String(name || '').trim();
+                    if (!key || this.codexAuthDeleting[key]) return;
+                    this.codexAuthDeleting[key] = true;
+                    try {
+                        const res = await api('delete-auth-profile', { name: key });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        await this.loadCodexAuthProfiles({ silent: true });
+                        const switchedTip = res && res.switchedTo ? `，已切换到 ${res.switchedTo}` : '';
+                        this.showMessage(`已删除认证${switchedTip}`, 'success');
+                    } catch (e) {
+                        this.showMessage('删除认证失败', 'error');
+                    } finally {
+                        this.codexAuthDeleting[key] = false;
+                    }
+                },
+
+                mergeProxySettings(nextSettings) {
+                    const safe = nextSettings && typeof nextSettings === 'object' ? nextSettings : {};
+                    const port = parseInt(String(safe.port), 10);
+                    const timeoutMs = parseInt(String(safe.timeoutMs), 10);
+                    this.proxySettings = {
+                        enabled: safe.enabled !== false,
+                        host: typeof safe.host === 'string' && safe.host.trim() ? safe.host.trim() : '127.0.0.1',
+                        port: Number.isFinite(port) ? port : 8318,
+                        provider: typeof safe.provider === 'string' ? safe.provider.trim() : '',
+                        authSource: safe.authSource === 'profile' || safe.authSource === 'none' ? safe.authSource : 'provider',
+                        timeoutMs: Number.isFinite(timeoutMs) ? timeoutMs : 30000
+                    };
+                },
+
+                async loadProxyStatus(options = {}) {
+                    const silent = !!options.silent;
+                    this.proxyLoading = true;
+                    try {
+                        const res = await api('proxy-status');
+                        if (res && res.error) {
+                            if (!silent) {
+                                this.showMessage(res.error, 'error');
+                            }
+                            return;
+                        }
+                        this.mergeProxySettings(res && res.settings ? res.settings : {});
+                        this.proxyRuntime = res && res.runtime ? { running: true, ...res.runtime } : null;
+                    } catch (e) {
+                        if (!silent) {
+                            this.showMessage('读取代理状态失败', 'error');
+                        }
+                    } finally {
+                        this.proxyLoading = false;
+                    }
+                },
+
+                async saveProxySettings(options = {}) {
+                    const silent = !!options.silent;
+                    this.proxySaving = true;
+                    try {
+                        const res = await api('proxy-save-config', this.proxySettings);
+                        if (res && res.error) {
+                            if (!silent) {
+                                this.showMessage(res.error, 'error');
+                            }
+                            return;
+                        }
+                        if (res && res.settings) {
+                            this.mergeProxySettings(res.settings);
+                        }
+                        if (!silent) {
+                            this.showMessage('代理配置已保存', 'success');
+                        }
+                    } catch (e) {
+                        if (!silent) {
+                            this.showMessage('保存代理配置失败', 'error');
+                        }
+                    } finally {
+                        this.proxySaving = false;
+                    }
+                },
+
+                async startBuiltinProxy() {
+                    this.proxyStarting = true;
+                    try {
+                        const res = await api('proxy-start', {
+                            ...this.proxySettings,
+                            enabled: true
+                        });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        if (res && res.settings) {
+                            this.mergeProxySettings(res.settings);
+                        }
+                        await this.loadProxyStatus({ silent: true });
+                        const listenTip = res && res.listenUrl ? `：${res.listenUrl}` : '';
+                        this.showMessage(`代理已启动${listenTip}`, 'success');
+                    } catch (e) {
+                        this.showMessage('启动代理失败', 'error');
+                    } finally {
+                        this.proxyStarting = false;
+                    }
+                },
+
+                async stopBuiltinProxy() {
+                    this.proxyStopping = true;
+                    try {
+                        const res = await api('proxy-stop');
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        await this.loadProxyStatus({ silent: true });
+                        this.showMessage('代理已停止', 'success');
+                    } catch (e) {
+                        this.showMessage('停止代理失败', 'error');
+                    } finally {
+                        this.proxyStopping = false;
+                    }
+                },
+
+                async applyBuiltinProxyProvider() {
+                    this.proxyApplying = true;
+                    try {
+                        const saveRes = await api('proxy-save-config', this.proxySettings);
+                        if (saveRes && saveRes.error) {
+                            this.showMessage(saveRes.error, 'error');
+                            return;
+                        }
+                        const res = await api('proxy-apply-provider', { switchToProxy: true });
+                        if (res && res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        await this.loadAll();
+                        this.showMessage('本地代理 provider 已写入并切换', 'success');
+                    } catch (e) {
+                        this.showMessage('应用代理 provider 失败', 'error');
+                    } finally {
+                        this.proxyApplying = false;
+                    }
+                },
+
                 showMessage(text, type) {
                     this.message = text;
                     this.messageType = type || 'info';