codexmate 0.0.13 → 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: '',
@@ -269,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 {
@@ -304,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）';
@@ -354,6 +400,84 @@
                 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 '会话浏览';
@@ -418,6 +542,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) tasks.push('Skills 管理');
                     if (this.proxySaving || this.proxyApplying || this.proxyStarting || this.proxyStopping) tasks.push('代理更新');
                     return tasks.length ? tasks.join(' / ') : '空闲';
                 },
@@ -799,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 || '会话';
@@ -1167,8 +1295,7 @@
                 },
 
                 normalizeSessionPathValue(value) {
-                    if (typeof value !== 'string') return '';
-                    return value.trim();
+                    return normalizeSessionPathFilter(value);
                 },
 
                 mergeSessionPathOptions(baseList = [], incomingList = []) {
@@ -1277,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();
                 },
 
@@ -1297,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) {
@@ -1347,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(
@@ -1358,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 });
@@ -1371,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;
@@ -1384,6 +1693,9 @@
                     this.activeSessionMessages = [];
                     this.activeSessionDetailError = '';
                     this.activeSessionDetailClipped = false;
+                    this.cancelSessionTimelineSync();
+                    this.sessionTimelineActiveKey = '';
+                    this.sessionMessageRefMap = Object.create(null);
                     await this.loadActiveSessionDetail();
                 },
 
@@ -1437,6 +1749,9 @@
                         this.activeSessionMessages = [];
                         this.activeSessionDetailError = '';
                         this.activeSessionDetailClipped = false;
+                        this.cancelSessionTimelineSync();
+                        this.sessionTimelineActiveKey = '';
+                        this.sessionMessageRefMap = Object.create(null);
                         return;
                     }
 
@@ -1459,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) {
@@ -1487,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;
@@ -1494,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;
@@ -1754,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;
@@ -3860,4 +4371,3 @@
         app.mount('#app');
     });
     
-