codexmate 0.0.18 → 0.0.19

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

@@ -1,11 +1,98 @@
-export function createSkillsMethods({ api }) {
+function createUnsupportedSkillsTargetAppError(app) {
+    return new Error(`Unsupported skills target app: ${String(app)}`);
+}
+
+function showUnsupportedSkillsTargetMessage(vm, app) {
+    vm.showMessage(`不支持的 Skills 安装目标：${String(app)}`, 'error');
+}
+
+export function createSkillsMethods({ api }) {
     return {
-        async openSkillsManager() {
+        normalizeSkillsTargetApp(app) {
+            if (app == null) {
+                return 'codex';
+            }
+            if (app === 'codex' || app === 'claude') {
+                return app;
+            }
+            throw createUnsupportedSkillsTargetAppError(app);
+        },
+
+        resetSkillsTargetState() {
             this.skillsSelectedNames = [];
             this.skillsKeyword = '';
             this.skillsStatusFilter = 'all';
+            this.skillsRootPath = '';
+            this.skillsList = [];
             this.skillsImportList = [];
             this.skillsImportSelectedKeys = [];
+            this.skillsMarketLocalLoadedOnce = false;
+            this.skillsMarketImportLoadedOnce = false;
+        },
+
+        async setSkillsTargetApp(app, options = {}) {
+            if (
+                this.skillsLoading
+                || this.skillsDeleting
+                || this.skillsScanningImports
+                || this.skillsImporting
+                || this.skillsZipImporting
+                || this.skillsExporting
+                || this.skillsMarketLoading
+            ) {
+                return false;
+            }
+            let nextTarget;
+            try {
+                nextTarget = this.normalizeSkillsTargetApp(app);
+            } catch (error) {
+                showUnsupportedSkillsTargetMessage(this, app);
+                return false;
+            }
+            const refresh = !(options && options.refresh === false);
+            const silent = !!(options && options.silent);
+            if (nextTarget !== this.skillsTargetApp) {
+                this.skillsTargetApp = nextTarget;
+                this.resetSkillsTargetState();
+            }
+            if (!refresh) {
+                return true;
+            }
+            return await this.loadSkillsMarketOverview({
+                forceRefresh: true,
+                silent
+            });
+        },
+
+        async openSkillsManager(options = {}) {
+            if (
+                this.skillsLoading
+                || this.skillsDeleting
+                || this.skillsScanningImports
+                || this.skillsImporting
+                || this.skillsZipImporting
+                || this.skillsExporting
+                || this.skillsMarketLoading
+            ) {
+                return false;
+            }
+            let targetApp;
+            try {
+                targetApp = this.normalizeSkillsTargetApp(options && options.targetApp ? options.targetApp : this.skillsTargetApp);
+            } catch (error) {
+                showUnsupportedSkillsTargetMessage(this, options && options.targetApp);
+                return false;
+            }
+            const targetChanged = targetApp !== this.skillsTargetApp;
+            if (targetChanged) {
+                this.skillsTargetApp = targetApp;
+                this.resetSkillsTargetState();
+            } else {
+                this.skillsSelectedNames = [];
+                this.skillsKeyword = '';
+                this.skillsStatusFilter = 'all';
+                this.skillsImportSelectedKeys = [];
+            }
             this.showSkillsModal = true;
             await this.refreshSkillsList({ silent: false });
         },
@@ -28,23 +115,25 @@
         async refreshSkillsList(options = {}) {
             this.skillsLoading = true;
             try {
-                const res = await api('list-codex-skills');
+                const res = await api('list-skills', {
+                    targetApp: this.skillsTargetApp
+                });
                 if (res.error) {
                     this.skillsRootPath = '';
                     this.skillsList = [];
                     this.skillsSelectedNames = [];
                     this.showMessage(res.error, 'error');
-                    return;
+                    return false;
                 }
                 const exists = res.exists !== false;
                 if (!exists) {
-                    this.skillsRootPath = '';
+                    this.skillsRootPath = res.root || '';
                     this.skillsList = [];
                     this.skillsSelectedNames = [];
                     if (!options.silent) {
-                        this.showMessage('skills 目录不存在，已按空列表显示', 'info');
+                        this.showMessage(`${this.skillsTargetLabel} skills 目录不存在，已按空列表显示`, 'info');
                     }
-                    return;
+                    return true;
                 }
                 this.skillsRootPath = res.root || '';
                 this.skillsList = Array.isArray(res.items) ? res.items : [];
@@ -53,16 +142,40 @@
                     .filter(Boolean));
                 this.skillsSelectedNames = (Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : [])
                     .filter((name) => currentNames.has(name));
+                return true;
             } catch (e) {
                 this.skillsRootPath = '';
                 this.skillsList = [];
                 this.skillsSelectedNames = [];
                 this.showMessage('加载 skills 失败', 'error');
+                return false;
             } finally {
                 this.skillsLoading = false;
             }
         },
 
+        async loadSkillsMarketOverview(options = {}) {
+            if (this.skillsMarketLoading) return false;
+            const silent = !!(options && options.silent);
+            const forceRefresh = !!(options && options.forceRefresh);
+            this.skillsMarketLoading = true;
+            let localLoaded = this.skillsMarketLocalLoadedOnce === true;
+            let importLoaded = this.skillsMarketImportLoadedOnce === true;
+            try {
+                if (forceRefresh || !localLoaded) {
+                    localLoaded = await this.refreshSkillsList({ silent });
+                    this.skillsMarketLocalLoadedOnce = localLoaded;
+                }
+                if (forceRefresh || !importLoaded) {
+                    importLoaded = await this.scanImportableSkills({ silent });
+                    this.skillsMarketImportLoadedOnce = importLoaded;
+                }
+                return !!(localLoaded && importLoaded);
+            } finally {
+                this.skillsMarketLoading = false;
+            }
+        },
+
         resetSkillsFilters() {
             this.skillsKeyword = '';
             this.skillsStatusFilter = 'all';
@@ -99,18 +212,20 @@
         },
 
         async scanImportableSkills(options = {}) {
-            if (this.skillsScanningImports || this.skillsImporting || this.skillsZipImporting || this.skillsExporting) return;
+            if (this.skillsDeleting || this.skillsScanningImports || this.skillsImporting || this.skillsZipImporting || this.skillsExporting) return false;
             const silent = !!(options && options.silent);
             this.skillsScanningImports = true;
             try {
-                const res = await api('scan-unmanaged-codex-skills');
+                const res = await api('scan-unmanaged-skills', {
+                    targetApp: this.skillsTargetApp
+                });
                 if (res.error) {
                     this.skillsImportList = [];
                     this.skillsImportSelectedKeys = [];
                     if (!silent) {
                         this.showMessage(res.error, 'error');
                     }
-                    return;
+                    return false;
                 }
                 this.skillsImportList = Array.isArray(res.items) ? res.items : [];
                 const availableKeys = new Set(this.skillsImportSelectableKeys);
@@ -121,19 +236,21 @@
                 } else if (!silent) {
                     this.showMessage(`扫描到 ${this.skillsImportList.length} 个可导入 skill`, 'success');
                 }
+                return true;
             } catch (e) {
                 this.skillsImportList = [];
                 this.skillsImportSelectedKeys = [];
                 if (!silent) {
                     this.showMessage('扫描可导入 skill 失败', 'error');
                 }
+                return false;
             } finally {
                 this.skillsScanningImports = false;
             }
         },
 
         async importSelectedSkills() {
-            if (this.skillsImporting || this.skillsZipImporting || this.skillsExporting) return;
+            if (this.skillsDeleting || this.skillsScanningImports || 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)))
@@ -148,7 +265,10 @@
 
             this.skillsImporting = true;
             try {
-                const res = await api('import-codex-skills', { items: selectedItems });
+                const res = await api('import-skills', {
+                    targetApp: this.skillsTargetApp,
+                    items: selectedItems
+                });
                 if (res.error) {
                     this.showMessage(res.error, 'error');
                     return;
@@ -161,7 +281,7 @@
                     const first = res.failed[0] && res.failed[0].error ? res.failed[0].error : '导入失败';
                     this.showMessage(first, 'error');
                 } else {
-                    this.showMessage(`已导入 ${importedCount} 个 skill`, 'success');
+                    this.showMessage(`已导入 ${importedCount} 个 skill 到 ${this.skillsTargetLabel}`, 'success');
                 }
                 await this.refreshSkillsList({ silent: true });
             } catch (e) {
@@ -197,8 +317,8 @@
         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', {
+                : `${this.skillsTargetApp}-skills.zip`;
+            const response = await fetch(`/api/import-skills-zip?targetApp=${encodeURIComponent(this.skillsTargetApp)}`, {
                 method: 'POST',
                 headers: {
                     'x-codexmate-file-name': encodeURIComponent(fileName)
@@ -222,7 +342,7 @@
         },
 
         async importSkillsFromZipFile(file) {
-            if (this.skillsZipImporting || this.skillsImporting || this.skillsExporting) return;
+            if (this.skillsDeleting || this.skillsScanningImports || this.skillsZipImporting || this.skillsImporting || this.skillsExporting) return;
             const maxSize = 20 * 1024 * 1024;
             if (file.size > maxSize) {
                 this.showMessage('ZIP 文件过大，限制 20MB', 'error');
@@ -244,7 +364,7 @@
                     const first = res.failed[0] && res.failed[0].error ? res.failed[0].error : '导入失败';
                     this.showMessage(first, 'error');
                 } else {
-                    this.showMessage(`已导入 ${importedCount} 个 skill`, 'success');
+                    this.showMessage(`已导入 ${importedCount} 个 skill 到 ${this.skillsTargetLabel}`, 'success');
                 }
                 await this.refreshSkillsList({ silent: true });
             } catch (e) {
@@ -257,7 +377,7 @@
         },
 
         async exportSelectedSkills() {
-            if (this.skillsExporting || this.skillsZipImporting || this.skillsImporting) return;
+            if (this.skillsDeleting || 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)))
                 : [];
@@ -267,7 +387,10 @@
             }
             this.skillsExporting = true;
             try {
-                const res = await api('export-codex-skills', { names: selected });
+                const res = await api('export-skills', {
+                    targetApp: this.skillsTargetApp,
+                    names: selected
+                });
                 if (res && res.error) {
                     this.showMessage(res.error, 'error');
                     return;
@@ -290,7 +413,7 @@
                 if (failedCount > 0) {
                     this.showMessage(`已导出 ${exportedCount} 个，失败 ${failedCount} 个`, 'error');
                 } else {
-                    this.showMessage(`已导出 ${exportedCount} 个 skill`, 'success');
+                    this.showMessage(`已从 ${this.skillsTargetLabel} 导出 ${exportedCount} 个 skill`, 'success');
                 }
             } catch (e) {
                 this.showMessage('导出 skill 失败', 'error');
@@ -301,6 +424,10 @@
 
         async deleteSelectedSkills() {
             if (this.skillsDeleting || this.skillsZipImporting || this.skillsExporting || this.skillsImporting) return;
+            if (this.skillsScanningImports) {
+                this.showMessage('正在扫描导入源，请稍后再试', 'error');
+                return;
+            }
             const selected = Array.isArray(this.skillsSelectedNames)
                 ? Array.from(new Set(this.skillsSelectedNames.map((item) => String(item || '').trim()).filter(Boolean)))
                 : [];
@@ -310,9 +437,10 @@
             }
             const confirmed = await this.requestConfirmDialog({
                 title: '删除 Skills',
-                message: `确认删除 ${selected.length} 个 skill 吗？此操作不可撤销。`,
+                message: `确认从 ${this.skillsTargetLabel} 删除 ${selected.length} 个 skill 吗？此操作不可撤销。`,
                 confirmText: '删除',
                 cancelText: '取消',
+                confirmDisabled: () => this.skillsDeleting || this.skillsScanningImports,
                 danger: true
             });
             if (!confirmed) {
@@ -321,7 +449,10 @@
 
             this.skillsDeleting = true;
             try {
-                const res = await api('delete-codex-skills', { names: selected });
+                const res = await api('delete-skills', {
+                    targetApp: this.skillsTargetApp,
+                    names: selected
+                });
                 if (res.error) {
                     this.showMessage(res.error, 'error');
                     return;
@@ -336,7 +467,7 @@
                     const first = failedList[0] && failedList[0].error ? failedList[0].error : '删除失败';
                     this.showMessage(first, 'error');
                 } else {
-                    this.showMessage(`已删除 ${deletedCount} 个 skill`, 'success');
+                    this.showMessage(`已从 ${this.skillsTargetLabel} 删除 ${deletedCount} 个 skill`, 'success');
                 }
                 await this.refreshSkillsList({ silent: true });
             } catch (e) {

package/web-ui/session-helpers.mjs

@@ -61,6 +61,18 @@ export function switchMainTab(tab) {
         this.sessionTrashLoadedOnce = false;
         this.loadSessionTrashCount({ silent: true });
     }
+    const shouldLoadSkillsMarketOnEnter = nextTab === 'market'
+        && previousTab !== 'market'
+        && typeof this.loadSkillsMarketOverview === 'function';
+    if (shouldLoadSkillsMarketOnEnter) {
+        let marketOverviewLoad = null;
+        try {
+            marketOverviewLoad = this.loadSkillsMarketOverview({ silent: true });
+        } catch (_) {
+            marketOverviewLoad = null;
+        }
+        void Promise.resolve(marketOverviewLoad).catch(() => {});
+    }
     if (nextTab === 'config' && this.configMode === 'claude') {
         const expectedTab = nextTab;
         const expectedConfigMode = this.configMode;

package/web-ui/styles.css

@@ -37,11 +37,13 @@
 
     --font-size-display: 52px;
     --font-size-title: 18px;
+    --font-size-large: 20px;
     --font-size-body: 15px;
     --font-size-secondary: 13px;
     --font-size-caption: 11px;
 
     --font-weight-display: 600;
+    --font-weight-primary: 600;
     --font-weight-title: 600;
     --font-weight-body: 400;
     --font-weight-secondary: 500;
@@ -59,6 +61,7 @@
 
     /* 圆角系统 */
     --radius-sm: 8px;
+    --radius-md: 10px;
     --radius-lg: 12px;
     --radius-xl: 18px;
     --radius-full: 50px;
@@ -1326,9 +1329,9 @@ body::after {
     grid-auto-columns: max-content;
     column-gap: var(--spacing-xs);
     row-gap: 6px;
-    align-items: start;
+    align-items: center;
     justify-content: end;
-    align-self: flex-start;
+    align-self: center;
 }
 
 .card-trailing .card-actions {
@@ -3668,6 +3671,160 @@ body::after {
     line-height: 1.45;
 }
 
+.market-overview-section {
+    margin-bottom: var(--spacing-sm);
+}
+
+.market-overview-header {
+    gap: var(--spacing-sm);
+    align-items: flex-start;
+}
+
+.market-header-actions {
+    flex-wrap: wrap;
+}
+
+.market-target-switch {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: var(--spacing-sm);
+}
+
+.market-target-switch-compact {
+    justify-content: flex-end;
+    margin-bottom: 0;
+}
+
+.market-target-chip {
+    border: 1px solid rgba(160, 145, 130, 0.28);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.92);
+    color: var(--color-text-secondary);
+    padding: 8px 14px;
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-secondary);
+    cursor: pointer;
+    transition: border-color var(--transition-fast) var(--ease-smooth), background var(--transition-fast) var(--ease-smooth), color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth);
+}
+
+.market-target-chip:disabled,
+.market-target-chip[disabled] {
+    cursor: not-allowed;
+    opacity: 0.64;
+    pointer-events: none;
+    box-shadow: none;
+}
+
+.market-target-chip.active {
+    border-color: rgba(208, 88, 58, 0.4);
+    background: linear-gradient(to bottom, rgba(255, 243, 236, 0.98) 0%, rgba(255, 232, 220, 0.86) 100%);
+    color: #8c3a1f;
+    box-shadow: var(--shadow-subtle);
+}
+
+.market-root-box {
+    margin-bottom: var(--spacing-sm);
+}
+
+.market-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-sm);
+}
+
+.market-panel {
+    margin-bottom: 0;
+    min-width: 0;
+}
+
+.market-actions-panel {
+    grid-column: 1 / -1;
+}
+
+.market-panel-wide {
+    grid-column: 1 / -1;
+}
+
+.market-preview-list {
+    display: grid;
+    gap: 10px;
+}
+
+.market-preview-item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-xs);
+    padding: 10px 12px;
+    border: 1px solid rgba(160, 145, 130, 0.18);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.64);
+}
+
+.market-preview-main {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.market-preview-title {
+    font-size: var(--font-size-body);
+    font-weight: var(--font-weight-secondary);
+    color: var(--color-text-secondary);
+    overflow-wrap: anywhere;
+}
+
+.market-preview-meta {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+}
+
+.market-action-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--spacing-xs);
+}
+
+.market-action-card {
+    border: 1px solid rgba(160, 145, 130, 0.24);
+    border-radius: var(--radius-sm);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 242, 0.84) 100%);
+    color: var(--color-text-secondary);
+    text-align: left;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    cursor: pointer;
+    transition: transform var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth);
+}
+
+.market-action-card:hover:not(:disabled) {
+    transform: translateY(-1px);
+    border-color: rgba(208, 88, 58, 0.34);
+    box-shadow: var(--shadow-subtle);
+}
+
+.market-action-card:disabled {
+    cursor: not-allowed;
+    opacity: 0.64;
+}
+
+.market-action-title {
+    font-size: var(--font-size-body);
+    font-weight: var(--font-weight-secondary);
+}
+
+.market-action-copy {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    line-height: 1.45;
+}
+
 .skills-filter-row {
     display: flex;
     gap: var(--spacing-xs);
@@ -4176,6 +4333,10 @@ textarea:focus-visible {
     .skills-modal-actions {
         align-items: flex-start;
     }
+
+    .market-target-switch-compact {
+        justify-content: flex-start;
+    }
 }
 
 @media (max-width: 720px) {
@@ -4202,6 +4363,14 @@ textarea:focus-visible {
         flex-wrap: wrap;
     }
 
+    .market-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .market-action-grid {
+        grid-template-columns: 1fr;
+    }
+
     .status-chip {
         flex: 1 1 100%;
     }

package/doc/CHANGELOG.md

@@ -1,32 +0,0 @@
-# Changelog
-
-## 0.0.15
-
-- Release: bump package version to 0.0.15
-- Docs: sync README / README.en with current release marker
-
-## 0.0.14
-
-- Skills Manager: polish modal layout with overview counters and clearer section structure
-- Skills Manager: unify status select style and refine list scrollbar density
-- Docs: sync README / README.en release notes for 0.0.14
-
-## 0.0.13
-
-- Web UI: switch to IDE-style three-column layout with a fixed status inspector panel
-- AGENTS editor: add "Export" action to download current content as `agent-<timestamp>.txt`
-- Release: bump package version to 0.0.13 and sync release docs/examples
-
-## 0.0.5
-
-- Sessions: enable keyword search for Codex-only view
-- Sessions: increase keyword scan limit to reduce misses
-- Utilities: add JS fallback for zip/unzip when 7-Zip is missing
-- UI: shorten base_url/key/model check hint
-
-## 0.0.4
-
-- Added OpenClaw config mode with JSON5 profiles and one-click apply
-- Added OpenClaw workspace AGENTS.md management
-- Added JSON5 parsing dependency
-

package/doc/CHANGELOG.zh-CN.md

@@ -1,34 +0,0 @@
-# 更新日志
-
-## 0.0.15
-
-- 发版：版本提升至 0.0.15
-- 文档：同步 README / README.en 当前版本标记
-
-
-
-## 0.0.14
-
-- Skills 管理：打磨弹窗信息层级，新增统计概览与分区结构
-- Skills 管理：统一状态下拉样式，并优化列表滚动条密度
-- 文档：同步 README / README.en 的 0.0.14 发版说明
-
-## 0.0.13
-
-- Web UI：调整为 IDE 风格三栏布局，并新增固定可见的状态检查器
-- AGENTS 编辑器：新增“导出”按钮，可下载当前内容为 `agent-<timestamp>.txt`
-- 发版：版本提升至 0.0.13，并同步 README 发版示例版本号
-
-## 0.0.5
-
-- 会话浏览：仅 Codex 支持关键词检索
-- 会话浏览：关键词扫描上限提升，降低漏检
-- 附属功能：7-Zip 缺失时回退内置 JS 压缩/解压
-- 文案：精简检测提示
-
-## 0.0.4
-
-- 新增 OpenClaw 配置模式（JSON5 多配置管理 + 一键应用）
-- 新增 OpenClaw Workspace 的 AGENTS.md 管理
-- 增加 JSON5 解析依赖
-