codexmate 0.0.13 → 0.0.15

package/web-ui/app.js

@@ -7,8 +7,20 @@
     formatLatency,
     buildSpeedTestIssue,
     isSessionQueryEnabled,
-    buildSessionListParams
+    buildSessionListParams,
+    normalizeSessionSource,
+    normalizeSessionPathFilter,
+    buildSessionFilterCacheState,
+    buildSessionTimelineNodes,
+    normalizeSessionMessageRole
 } from './logic.mjs';
+import {
+    CONFIG_MODE_SET,
+    getProviderConfigModeMeta,
+    createConfigModeComputed
+} from './modules/config-mode.computed.mjs';
+import { createSkillsComputed } from './modules/skills.computed.mjs';
+import { createSkillsMethods } from './modules/skills.methods.mjs';
 
         document.addEventListener('DOMContentLoaded', () => {
             if (typeof Vue === 'undefined') {
@@ -81,6 +93,7 @@
                     showOpenclawConfigModal: false,
                     showConfigTemplateModal: false,
                     showAgentsModal: false,
+                    showSkillsModal: false,
                     showInstallModal: false,
                     configTemplateContent: '',
                     configTemplateApplying: false,
@@ -94,6 +107,19 @@
                     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,
+                    skillsZipImporting: false,
+                    skillsExporting: false,
                     sessionsList: [],
                     sessionsLoading: false,
                     sessionFilterSource: 'all',
@@ -124,6 +150,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: '',
@@ -269,6 +302,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 {
@@ -304,11 +339,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）';
@@ -354,63 +409,10 @@
                 installRegistryPreview() {
                     return this.resolveInstallRegistryUrl(this.installRegistryPreset, this.installRegistryCustom);
                 },
-                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 可保存并应用';
-                },
+                ...createSkillsComputed(),
+
+                ...createConfigModeComputed(),
+
                 inspectorBusyStatus() {
                     const tasks = [];
                     if (this.loading) tasks.push('初始化');
@@ -418,6 +420,7 @@
                     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 || this.skillsZipImporting || this.skillsExporting) tasks.push('Skills 管理');
                     if (this.proxySaving || this.proxyApplying || this.proxyStarting || this.proxyStopping) tasks.push('代理更新');
                     return tasks.length ? tasks.join(' / ') : '空闲';
                 },
@@ -721,9 +724,12 @@
                 },
 
                 switchConfigMode(mode) {
+                    const normalizedMode = typeof mode === 'string'
+                        ? mode.trim().toLowerCase()
+                        : '';
                     this.mainTab = 'config';
-                    this.configMode = mode;
-                    if (mode === 'claude') {
+                    this.configMode = CONFIG_MODE_SET.has(normalizedMode) ? normalizedMode : 'codex';
+                    if (this.configMode === 'claude') {
                         this.refreshClaudeModelContext();
                     }
                 },
@@ -799,6 +805,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 || '会话';
@@ -1167,8 +1176,7 @@
                 },
 
                 normalizeSessionPathValue(value) {
-                    if (typeof value !== 'string') return '';
-                    return value.trim();
+                    return normalizeSessionPathFilter(value);
                 },
 
                 mergeSessionPathOptions(baseList = [], incomingList = []) {
@@ -1277,13 +1285,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();
                 },
 
@@ -1297,8 +1324,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) {
@@ -1347,6 +1522,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(
@@ -1358,10 +1536,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 });
@@ -1371,6 +1558,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;
@@ -1384,6 +1574,9 @@
                     this.activeSessionMessages = [];
                     this.activeSessionDetailError = '';
                     this.activeSessionDetailClipped = false;
+                    this.cancelSessionTimelineSync();
+                    this.sessionTimelineActiveKey = '';
+                    this.sessionMessageRefMap = Object.create(null);
                     await this.loadActiveSessionDetail();
                 },
 
@@ -1437,6 +1630,9 @@
                         this.activeSessionMessages = [];
                         this.activeSessionDetailError = '';
                         this.activeSessionDetailClipped = false;
+                        this.cancelSessionTimelineSync();
+                        this.sessionTimelineActiveKey = '';
+                        this.sessionMessageRefMap = Object.create(null);
                         return;
                     }
 
@@ -1459,10 +1655,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) {
@@ -1487,6 +1687,10 @@
                         if (Number.isFinite(res.totalMessages)) {
                             this.syncActiveSessionMessageCount(res.totalMessages);
                         }
+                        this.$nextTick(() => {
+                            this.updateSessionTimelineOffset();
+                            this.scheduleSessionTimelineSync();
+                        });
                     } catch (e) {
                         if (requestSeq !== this.sessionDetailRequestSeq) {
                             return;
@@ -1494,6 +1698,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;
@@ -1550,7 +1757,9 @@
                     if (this.modelsSource === 'remote' && this.models.length > 0 && !this.models.includes(this.currentModel)) {
                         this.currentModel = this.models[0];
                     }
-                    await this.applyCodexConfigDirect({ silent: true });
+                    if (getProviderConfigModeMeta(this.configMode)) {
+                        await this.applyCodexConfigDirect({ silent: true });
+                    }
                 },
 
                 async onModelChange() {
@@ -1754,6 +1963,8 @@
                     }
                 },
 
+                ...createSkillsMethods({ api }),
+
                 async openOpenclawAgentsEditor() {
                     this.setAgentsModalContext('openclaw');
                     this.agentsLoading = true;
@@ -3860,4 +4071,3 @@
         app.mount('#app');
     });
     
-