codexmate 0.0.14 → 0.0.16

package/web-ui/modules/config-mode.computed.mjs

@@ -0,0 +1,123 @@
+export const PROVIDER_CONFIG_MODE_META = Object.freeze({
+    codex: Object.freeze({
+        label: 'Codex',
+        modelPlaceholder: '例如: gpt-5.3-codex',
+        statusConfigLabel: 'Codex 提供商',
+        statusModelLabel: 'Codex 模型'
+    })
+});
+
+export const CONFIG_MODE_SET = new Set([
+    ...Object.keys(PROVIDER_CONFIG_MODE_META),
+    'claude',
+    'openclaw'
+]);
+
+export function getProviderConfigModeMeta(mode) {
+    return PROVIDER_CONFIG_MODE_META[mode] || null;
+}
+
+export function createConfigModeComputed() {
+    return {
+        isProviderConfigMode() {
+            return !!getProviderConfigModeMeta(this.configMode);
+        },
+        isCodexConfigMode() {
+            return this.configMode === 'codex';
+        },
+        activeProviderModeMeta() {
+            return getProviderConfigModeMeta(this.configMode) || PROVIDER_CONFIG_MODE_META.codex;
+        },
+        activeProviderModeLabel() {
+            return this.activeProviderModeMeta.label;
+        },
+        activeProviderModelPlaceholder() {
+            return this.activeProviderModeMeta.modelPlaceholder;
+        },
+        activeProviderConfigChipLabel() {
+            return this.activeProviderModeMeta.statusConfigLabel;
+        },
+        activeProviderModelChipLabel() {
+            return this.activeProviderModeMeta.statusModelLabel;
+        },
+        activeProviderBridgeHint() {
+            if (!this.isProviderConfigMode || this.isCodexConfigMode) {
+                return '';
+            }
+            return `${this.activeProviderModeLabel} 当前复用 Codex Provider / Model 管理链路。`;
+        },
+        inspectorMainTabLabel() {
+            if (this.mainTab === 'config') return '配置中心';
+            if (this.mainTab === 'sessions') return '会话浏览';
+            if (this.mainTab === 'settings') return '设置';
+            return '未知';
+        },
+        inspectorConfigModeLabel() {
+            if (this.mainTab !== 'config') return '--';
+            const providerMeta = getProviderConfigModeMeta(this.configMode);
+            if (providerMeta) return providerMeta.label;
+            if (this.configMode === 'claude') return 'Claude Code';
+            if (this.configMode === 'openclaw') return 'OpenClaw';
+            return '未选择';
+        },
+        inspectorCurrentConfigLabel() {
+            if (this.mainTab !== 'config') return '--';
+            if (getProviderConfigModeMeta(this.configMode)) {
+                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 || '未选择';
+            }
+            if (this.configMode === 'openclaw') {
+                const openclaw = typeof this.currentOpenclawConfig === 'string' ? this.currentOpenclawConfig.trim() : '';
+                return openclaw || '未选择';
+            }
+            return '未选择';
+        },
+        inspectorCurrentModelLabel() {
+            if (this.mainTab !== 'config') return '--';
+            if (getProviderConfigModeMeta(this.configMode)) {
+                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 || '未选择';
+            }
+            if (this.configMode === 'openclaw') {
+                const model = this.openclawStructured && typeof this.openclawStructured.agentPrimary === 'string'
+                    ? this.openclawStructured.agentPrimary.trim()
+                    : '';
+                return model || '按配置文件';
+            }
+            return '未选择';
+        },
+        inspectorTemplateStatus() {
+            if (this.mainTab !== 'config') return '--';
+            if (this.configMode === 'codex') {
+                if (this.configTemplateApplying || this.codexApplying) {
+                    return '模板应用中';
+                }
+                return '模板可编辑（手动确认应用）';
+            }
+            if (getProviderConfigModeMeta(this.configMode)) {
+                if (this.codexApplying) {
+                    return 'Provider / Model 应用中';
+                }
+                return '复用 Codex Provider / Model';
+            }
+            if (this.configMode === 'claude') {
+                return '即时写入 Claude settings';
+            }
+            if (this.configMode === 'openclaw') {
+                if (this.openclawApplying || this.openclawSaving) {
+                    return 'OpenClaw 保存/应用中';
+                }
+                return 'JSON5 可保存并应用';
+            }
+            return '未选择';
+        }
+    };
+}

package/web-ui/modules/skills.computed.mjs

@@ -0,0 +1,82 @@
+export function createSkillsComputed() {
+    return {
+        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;
+        }
+    };
+}

package/web-ui/modules/skills.methods.mjs

@@ -0,0 +1,344 @@
+export function createSkillsMethods({ api }) {
+    return {
+        async openSkillsManager() {
+            this.skillsSelectedNames = [];
+            this.skillsKeyword = '';
+            this.skillsStatusFilter = 'all';
+            this.skillsImportList = [];
+            this.skillsImportSelectedKeys = [];
+            this.showSkillsModal = true;
+            await this.refreshSkillsList({ silent: false });
+        },
+
+        closeSkillsModal() {
+            const busy = !!(
+                this.skillsLoading
+                || this.skillsDeleting
+                || this.skillsScanningImports
+                || this.skillsImporting
+                || this.skillsZipImporting
+                || this.skillsExporting
+            );
+            if (busy) return;
+            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.skillsRootPath = '';
+                    this.skillsList = [];
+                    this.skillsSelectedNames = [];
+                    this.showMessage(res.error, 'error');
+                    return;
+                }
+                const exists = res.exists !== false;
+                if (!exists) {
+                    this.skillsRootPath = '';
+                    this.skillsList = [];
+                    this.skillsSelectedNames = [];
+                    if (!options.silent) {
+                        this.showMessage('skills 目录不存在，已按空列表显示', 'info');
+                    }
+                    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));
+            } catch (e) {
+                this.skillsRootPath = '';
+                this.skillsList = [];
+                this.skillsSelectedNames = [];
+                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(options = {}) {
+            if (this.skillsScanningImports || this.skillsImporting || this.skillsZipImporting || this.skillsExporting) return;
+            const silent = !!(options && options.silent);
+            this.skillsScanningImports = true;
+            try {
+                const res = await api('scan-unmanaged-codex-skills');
+                if (res.error) {
+                    this.skillsImportList = [];
+                    this.skillsImportSelectedKeys = [];
+                    if (!silent) {
+                        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 (!silent && this.skillsImportList.length === 0) {
+                    this.showMessage('未扫描到可导入 skill', 'info');
+                } else if (!silent) {
+                    this.showMessage(`扫描到 ${this.skillsImportList.length} 个可导入 skill`, 'success');
+                }
+            } catch (e) {
+                this.skillsImportList = [];
+                this.skillsImportSelectedKeys = [];
+                if (!silent) {
+                    this.showMessage('扫描可导入 skill 失败', 'error');
+                }
+            } finally {
+                this.skillsScanningImports = false;
+            }
+        },
+
+        async importSelectedSkills() {
+            if (this.skillsImporting || this.skillsZipImporting || this.skillsExporting) 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({ silent: true });
+            }
+        },
+
+        triggerSkillsZipImport() {
+            const input = this.$refs.skillsZipImportInput;
+            if (input) {
+                input.value = '';
+                input.click();
+            }
+        },
+
+        handleSkillsZipImportChange(event) {
+            const file = event && event.target && event.target.files ? event.target.files[0] : null;
+            if (file) {
+                void this.importSkillsFromZipFile(file);
+            }
+        },
+
+        resetSkillsZipImportInput() {
+            const el = this.$refs.skillsZipImportInput;
+            if (el) {
+                el.value = '';
+            }
+        },
+
+        async uploadSkillsZipStream(file) {
+            const fileName = (file && typeof file.name === 'string' && file.name.trim())
+                ? file.name.trim()
+                : 'codex-skills.zip';
+            const response = await fetch('/api/import-codex-skills-zip', {
+                method: 'POST',
+                headers: {
+                    'x-codexmate-file-name': encodeURIComponent(fileName)
+                },
+                body: file
+            });
+            let payload = {};
+            try {
+                payload = await response.json();
+            } catch (_) {
+                payload = {
+                    error: response.ok
+                        ? 'ZIP 导入响应无效'
+                        : `上传失败（HTTP ${response.status}）`
+                };
+            }
+            if (!response.ok && !payload.error) {
+                payload.error = `上传失败（HTTP ${response.status}）`;
+            }
+            return payload;
+        },
+
+        async importSkillsFromZipFile(file) {
+            if (this.skillsZipImporting || this.skillsImporting || this.skillsExporting) return;
+            const maxSize = 20 * 1024 * 1024;
+            if (file.size > maxSize) {
+                this.showMessage('ZIP 文件过大，限制 20MB', 'error');
+                this.resetSkillsZipImportInput();
+                return;
+            }
+            this.skillsZipImporting = true;
+            try {
+                const res = await this.uploadSkillsZipStream(file);
+                if (res && res.error) {
+                    this.showMessage(res.error, 'error');
+                    return;
+                }
+                const importedCount = Array.isArray(res && res.imported) ? res.imported.length : 0;
+                const failedCount = Array.isArray(res && 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('ZIP 导入失败', 'error');
+            } finally {
+                this.skillsZipImporting = false;
+                this.resetSkillsZipImportInput();
+                await this.scanImportableSkills({ silent: true });
+            }
+        },
+
+        async exportSelectedSkills() {
+            if (this.skillsExporting || this.skillsZipImporting || this.skillsImporting) 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;
+            }
+            this.skillsExporting = true;
+            try {
+                const res = await api('export-codex-skills', { names: selected });
+                if (res && res.error) {
+                    this.showMessage(res.error, 'error');
+                    return;
+                }
+                if (!res || !res.fileName) {
+                    this.showMessage('导出失败：未生成压缩包', 'error');
+                    return;
+                }
+                const exportedCount = Array.isArray(res.exported) ? res.exported.length : 0;
+                const failedCount = Array.isArray(res.failed) ? res.failed.length : 0;
+                const downloadUrl = typeof res.downloadPath === 'string' && res.downloadPath.trim()
+                    ? res.downloadPath.trim()
+                    : `/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);
+                if (failedCount > 0) {
+                    this.showMessage(`已导出 ${exportedCount} 个，失败 ${failedCount} 个`, 'error');
+                } else {
+                    this.showMessage(`已导出 ${exportedCount} 个 skill`, 'success');
+                }
+            } catch (e) {
+                this.showMessage('导出 skill 失败', 'error');
+            } finally {
+                this.skillsExporting = false;
+            }
+        },
+
+        async deleteSelectedSkills() {
+            if (this.skillsDeleting || this.skillsZipImporting || this.skillsExporting || this.skillsImporting) 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;
+                await this.scanImportableSkills({ silent: true });
+            }
+        }
+    };
+}

package/web-ui/styles.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Source+Sans+3:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=JetBrains+Mono:wght@400;500&family=Source+Sans+3:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 
 /* ============================================
    设计系统 - Design Tokens
@@ -32,9 +32,9 @@
         linear-gradient(135deg, #F8F2EA 0%, #F1E4D8 44%, #F8F2EA 100%);
 
     /* 字体系统 */
-    --font-family-body: 'Source Sans 3', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-    --font-family-display: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-    --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+    --font-family-body: 'JetBrainsMono Nerd Font Mono', 'OPPO Sans 4.0', 'Fira Mono', 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', monospace;
+    --font-family-display: 'JetBrainsMono Nerd Font Mono', 'OPPO Sans 4.0', 'Fira Mono', 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', monospace;
+    --font-family-mono: 'JetBrainsMono Nerd Font Mono', 'OPPO Sans 4.0', 'Fira Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
     --font-family: var(--font-family-body);
 
     --font-size-display: 52px;