codexmate 0.0.40 → 0.0.41

package/web-ui/partials/index/panel-docs.html

@@ -1,115 +1,115 @@
-                <div
-                    v-show="mainTab === 'docs'"
-                    class="mode-content docs-mode-content"
-                    id="panel-docs"
-                    role="tabpanel"
-                    aria-labelledby="tab-docs">
-                    <div class="selector-section">
-                        <div class="selector-header">
-                            <span class="selector-title">{{ t('docs.title') }}</span>
-                            <div class="skills-panel-note docs-section-note">{{ t('docs.subtitle') }}</div>
-                        </div>
-
-                        <div class="docs-toolbar-grid">
-                            <div class="docs-toolbar-card">
-                                <label class="form-label" for="docs-install-package-manager">{{ t('common.packageManager') }}</label>
-                                <select id="docs-install-package-manager" class="form-input" v-model="installPackageManager">
-                                    <option value="npm">npm</option>
-                                    <option value="pnpm">pnpm</option>
-                                    <option value="bun">bun</option>
-                                </select>
-                            </div>
-                            <div class="docs-toolbar-card docs-toolbar-card-wide">
-                                <label class="form-label">{{ t('common.mirror') }}</label>
-                                <div class="install-action-tabs">
-                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'default' }" @click="setInstallRegistryPreset('default')">{{ t('common.official') }}</button>
-                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
-                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'tencent' }" @click="setInstallRegistryPreset('tencent')">{{ t('docs.registry.tencent') }}</button>
-                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'custom' }" @click="setInstallRegistryPreset('custom')">{{ t('common.custom') }}</button>
-                                </div>
-                                <input v-if="installRegistryPreset === 'custom'" v-model="installRegistryCustom" class="form-input install-registry-input" placeholder="https://registry.example.com">
-                                <div class="form-hint install-registry-hint" v-if="installRegistryPreview">{{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}</div>
-                                <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">{{ t('docs.registryHintCustom') }}</div>
-                            </div>
-                            <div class="docs-toolbar-card docs-toolbar-card-wide">
-                                <label class="form-label">{{ t('common.action') }}</label>
-                                <div class="install-action-tabs">
-                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
-                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'update' }" @click="setInstallCommandAction('update')">{{ t('common.update') }}</button>
-                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'uninstall' }" @click="setInstallCommandAction('uninstall')">{{ t('common.uninstall') }}</button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="docs-summary-strip">
-                            <div class="docs-summary-item">
-                                <span class="docs-summary-label">{{ t('common.targets') }}</span>
-                                <strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
-                            </div>
-                            <div class="docs-summary-item">
-                                <span class="docs-summary-label">{{ t('common.currentPm') }}</span>
-                                <strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
-                            </div>
-                            <div class="docs-summary-item docs-summary-item-wide">
-                                <span class="docs-summary-label">{{ t('common.registry') }}</span>
-                                <strong class="docs-summary-value">{{ installRegistryPreview || t('common.defaultOfficial') }}</strong>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="selector-section">
-                        <div class="selector-header">
-                            <span class="selector-title">{{ t('docs.section.commands') }}</span>
-                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.commandsNote') }}</div>
-                        </div>
-
-                        <div class="install-list docs-install-list">
-                            <div class="install-row docs-install-row" v-for="target in installTargetCards" :key="'docs-install-command-' + target.id + '-' + installCommandAction">
-                                <div class="install-row-main">
-                                    <div class="docs-command-head">
-                                        <div class="install-row-title">{{ target.name }}</div>
-                                        <div class="docs-command-meta">
-                                            <span class="docs-meta-pill">{{ target.packageName }}</span>
-                                            <span class="docs-meta-pill">bin: {{ target.bin }}</span>
-                                        </div>
-                                    </div>
-                                    <div class="docs-command-row">
-                                        <div class="docs-command-box" role="group" :aria-label="t('docs.command.aria', { name: target.name })">
-                                            <code class="install-command">{{ target.command }}</code>
-                                            <button type="button" class="btn-mini docs-copy-btn" :disabled="!target.command" @click="copyInstallCommand(target.command)">{{ t('common.copy') }}</button>
-                                        </div>
-                                    </div>
-                                    <div v-if="target.id === 'codex' && target.termuxCommand && target.termuxCommand !== target.command" class="docs-command-row docs-command-row-secondary">
-                                        <div class="docs-command-box" role="group" :aria-label="t('docs.termuxAria')">
-                                            <code class="install-command"><span class="docs-command-prefix">{{ t('docs.termuxLabel') }}</span>{{ target.termuxCommand }}</code>
-                                            <button type="button" class="btn-mini docs-copy-btn" @click="copyInstallCommand(target.termuxCommand)">{{ t('common.copy') }}</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="selector-section">
-                        <div class="selector-header">
-                            <span class="selector-title">{{ t('docs.section.faq') }}</span>
-                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.faqNote') }}</div>
-                        </div>
-
-                        <div class="docs-help-grid">
-                            <div class="docs-note-card">
-                                <div class="docs-note-title">{{ t('common.troubleshooting') }}</div>
-                                <ul class="install-help-list docs-help-list">
-                                    <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
-                                </ul>
-                            </div>
-                            <div class="docs-note-card">
-                                <div class="docs-note-title">{{ t('common.rules') }}</div>
-                                <ul class="docs-static-list">
-                                    <li>{{ t('docs.rule.1') }}</li>
-                                    <li>{{ t('docs.rule.2') }}</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
+                <div
+                    v-show="mainTab === 'docs'"
+                    class="mode-content docs-mode-content"
+                    id="panel-docs"
+                    role="tabpanel"
+                    aria-labelledby="tab-docs">
+                    <div class="selector-section">
+                        <div class="selector-header">
+                            <span class="selector-title">{{ t('docs.title') }}</span>
+                            <div class="skills-panel-note docs-section-note">{{ t('docs.subtitle') }}</div>
+                        </div>
+
+                        <div class="docs-toolbar-grid">
+                            <div class="docs-toolbar-card">
+                                <label class="form-label" for="docs-install-package-manager">{{ t('common.packageManager') }}</label>
+                                <select id="docs-install-package-manager" class="form-input" v-model="installPackageManager">
+                                    <option value="npm">npm</option>
+                                    <option value="pnpm">pnpm</option>
+                                    <option value="bun">bun</option>
+                                </select>
+                            </div>
+                            <div class="docs-toolbar-card docs-toolbar-card-wide">
+                                <label class="form-label">{{ t('common.mirror') }}</label>
+                                <div class="install-action-tabs">
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'default' }" @click="setInstallRegistryPreset('default')">{{ t('common.official') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'tencent' }" @click="setInstallRegistryPreset('tencent')">{{ t('docs.registry.tencent') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'custom' }" @click="setInstallRegistryPreset('custom')">{{ t('common.custom') }}</button>
+                                </div>
+                                <input v-if="installRegistryPreset === 'custom'" v-model="installRegistryCustom" class="form-input install-registry-input" placeholder="https://registry.example.com">
+                                <div class="form-hint install-registry-hint" v-if="installRegistryPreview">{{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}</div>
+                                <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">{{ t('docs.registryHintCustom') }}</div>
+                            </div>
+                            <div class="docs-toolbar-card docs-toolbar-card-wide">
+                                <label class="form-label">{{ t('common.action') }}</label>
+                                <div class="install-action-tabs">
+                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'update' }" @click="setInstallCommandAction('update')">{{ t('common.update') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'uninstall' }" @click="setInstallCommandAction('uninstall')">{{ t('common.uninstall') }}</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="docs-summary-strip">
+                            <div class="docs-summary-item">
+                                <span class="docs-summary-label">{{ t('common.targets') }}</span>
+                                <strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
+                            </div>
+                            <div class="docs-summary-item">
+                                <span class="docs-summary-label">{{ t('common.currentPm') }}</span>
+                                <strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
+                            </div>
+                            <div class="docs-summary-item docs-summary-item-wide">
+                                <span class="docs-summary-label">{{ t('common.registry') }}</span>
+                                <strong class="docs-summary-value">{{ installRegistryPreview || t('common.defaultOfficial') }}</strong>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="selector-section">
+                        <div class="selector-header">
+                            <span class="selector-title">{{ t('docs.section.commands') }}</span>
+                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.commandsNote') }}</div>
+                        </div>
+
+                        <div class="install-list docs-install-list">
+                            <div class="install-row docs-install-row" v-for="target in installTargetCards" :key="'docs-install-command-' + target.id + '-' + installCommandAction">
+                                <div class="install-row-main">
+                                    <div class="docs-command-head">
+                                        <div class="install-row-title">{{ target.name }}</div>
+                                        <div class="docs-command-meta">
+                                            <span class="docs-meta-pill">{{ target.packageName }}</span>
+                                            <span class="docs-meta-pill">bin: {{ target.bin }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="docs-command-row">
+                                        <div class="docs-command-box" role="group" :aria-label="t('docs.command.aria', { name: target.name })">
+                                            <code class="install-command">{{ target.command }}</code>
+                                            <button type="button" class="btn-mini docs-copy-btn" :disabled="!target.command" @click="copyInstallCommand(target.command)">{{ t('common.copy') }}</button>
+                                        </div>
+                                    </div>
+                                    <div v-if="target.id === 'codex' && target.termuxCommand && target.termuxCommand !== target.command" class="docs-command-row docs-command-row-secondary">
+                                        <div class="docs-command-box" role="group" :aria-label="t('docs.termuxAria')">
+                                            <code class="install-command"><span class="docs-command-prefix">{{ t('docs.termuxLabel') }}</span>{{ target.termuxCommand }}</code>
+                                            <button type="button" class="btn-mini docs-copy-btn" @click="copyInstallCommand(target.termuxCommand)">{{ t('common.copy') }}</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="selector-section">
+                        <div class="selector-header">
+                            <span class="selector-title">{{ t('docs.section.faq') }}</span>
+                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.faqNote') }}</div>
+                        </div>
+
+                        <div class="docs-help-grid">
+                            <div class="docs-note-card">
+                                <div class="docs-note-title">{{ t('common.troubleshooting') }}</div>
+                                <ul class="install-help-list docs-help-list">
+                                    <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
+                                </ul>
+                            </div>
+                            <div class="docs-note-card">
+                                <div class="docs-note-title">{{ t('common.rules') }}</div>
+                                <ul class="docs-static-list">
+                                    <li>{{ t('docs.rule.1') }}</li>
+                                    <li>{{ t('docs.rule.2') }}</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
                 </div>

package/web-ui/partials/index/panel-market.html

@@ -1,104 +1,104 @@
-                <div
-                    v-show="mainTab === 'market'"
-                    class="mode-content"
-                    id="panel-market"
-                    role="tabpanel"
-                    aria-labelledby="tab-market">
-                    <!-- Minimalist header with target switch -->
-                    <div class="skills-minimal-header">
-                        <div class="skills-header-left">
-                            <span class="skills-header-title">{{ t('market.title') }}</span>
-                            <div class="skills-target-switch" role="group" :aria-label="t('market.target.aria')">
-                                <button
-                                    type="button"
-                                    :class="['skills-target-chip', { active: skillsTargetApp === 'codex' }]"
-                                    :aria-pressed="skillsTargetApp === 'codex'"
-                                    :disabled="loading || !!initError || skillsMarketBusy"
-                                    @click="setSkillsTargetApp('codex', { silent: false })">
-                                    Codex
-                                </button>
-                                <button
-                                    type="button"
-                                    :class="['skills-target-chip', { active: skillsTargetApp === 'claude' }]"
-                                    :aria-pressed="skillsTargetApp === 'claude'"
-                                    :disabled="loading || !!initError || skillsMarketBusy"
-                                    @click="setSkillsTargetApp('claude', { silent: false })">
-                                    Claude Code
-                                </button>
-                            </div>
-                        </div>
-                        <div class="skills-header-actions">
-                            <button type="button" class="btn-icon" @click="openSkillsMenu" :aria-label="t('common.menu')" :title="t('common.menu')">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Installed skills panel -->
-                    <div class="skills-flow-panel">
-                        <div class="skills-flow-header">
-                            <div class="skills-flow-title-wrap">
-                                <span class="skills-flow-title">{{ t('market.installed.title') }}</span>
-                                <span class="skills-flow-count">{{ skillsList.length }}</span>
-                            </div>
-                            <button type="button" class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
-                                <svg v-if="!skillsLoading" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M3 19l-4-4 4-4"/><path d="M17 9v2a4 4 0 01-4 4H3"/></svg>
-                                <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14" class="spin"><path d="M10 2v4m0 8v4M2 10h4m8 0h4m-3.5-6.5l2.5 2.5M4 4l2.5 2.5M16 16l-2.5-2.5M4 16l2.5-2.5"/></svg>
-                            </button>
-                        </div>
-                        <div v-if="skillsLoading && !skillsMarketLocalLoadedOnce" class="skills-flow-loading">{{ t('market.local.loading') }}</div>
-                        <div v-else-if="skillsList.length === 0" class="skills-flow-empty">{{ t('market.local.empty') }}</div>
-                        <div v-else class="skills-flow-list">
-                            <div v-for="skill in skillsList" :key="'skill-' + skill.name" class="skills-flow-item" :class="{ 'has-issue': !skill.hasSkillFile }">
-                                <div class="skills-flow-main">
-                                    <span class="skills-flow-name">{{ skill.displayName || skill.name }}</span>
-                                    <span class="skills-flow-path">{{ skill.path }}</span>
-                                </div>
-                                <span :class="['skills-flow-status', skill.hasSkillFile ? 'success' : 'warning']">
-                                    {{ skill.hasSkillFile ? t('market.pill.verified') : t('market.pill.missingSkill') }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Importable skills panel -->
-                    <div class="skills-flow-panel">
-                        <div class="skills-flow-header">
-                            <div class="skills-flow-title-wrap">
-                                <span class="skills-flow-title">{{ t('market.import.title') }}</span>
-                                <span class="skills-flow-count">{{ skillsImportList.length }}</span>
-                            </div>
-                            <button type="button" class="btn-mini" @click="scanImportableSkills({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
-                                <svg v-if="!skillsScanningImports" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M3 19l-4-4 4-4"/><path d="M17 9v2a4 4 0 01-4 4H3"/></svg>
-                                <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14" class="spin"><path d="M10 2v4m0 8v4M2 10h4m8 0h4m-3.5-6.5l2.5 2.5M4 4l2.5 2.5M16 16l-2.5-2.5M4 16l2.5-2.5"/></svg>
-                            </button>
-                        </div>
-                        <div v-if="skillsScanningImports && !skillsMarketImportLoadedOnce" class="skills-flow-loading">{{ t('market.import.loading') }}</div>
-                        <div v-else-if="skillsImportList.length === 0" class="skills-flow-empty">{{ t('market.import.empty') }}</div>
-                        <div v-else>
-                            <!-- Quick actions -->
-                            <div class="skills-flow-actions">
-                                <button type="button" class="skills-action-btn" @click="openSkillsManager" :disabled="loading || !!initError || skillsMarketBusy">
-                                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><rect x="3" y="3" width="14" height="14" rx="3"/><path d="M7 7h6M7 10h4"/></svg>
-                                    {{ t('market.action.manage.title') }}
-                                </button>
-                                <button type="button" class="skills-action-btn" @click="triggerSkillsZipImport" :disabled="loading || !!initError || skillsMarketBusy">
-                                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M4 14l3-3 3 3"/><path d="M7 4v7"/><rect x="12" y="4" width="5" height="12" rx="1"/></svg>
-                                    {{ t('market.action.zipImport.title') }}
-                                </button>
-                            </div>
-                            <!-- Import list -->
-                            <div class="skills-flow-list">
-                                <div v-for="skill in skillsImportList" :key="'import-' + buildSkillImportKey(skill)" class="skills-flow-item">
-                                    <div class="skills-flow-main">
-                                        <span class="skills-flow-name">{{ skill.displayName || skill.name }}</span>
-                                        <span class="skills-flow-meta">{{ skill.sourceLabel }}</span>
-                                    </div>
-                                    <button type="button" class="skills-flow-add" @click="importSingleSkill(skill)" :disabled="loading || !!initError || skillsMarketBusy">
-                                        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M10 4v6m3-3l-3 3-3-3"/></svg>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <div
+                    v-show="mainTab === 'market'"
+                    class="mode-content"
+                    id="panel-market"
+                    role="tabpanel"
+                    aria-labelledby="tab-market">
+                    <!-- Minimalist header with target switch -->
+                    <div class="skills-minimal-header">
+                        <div class="skills-header-left">
+                            <span class="skills-header-title">{{ t('market.title') }}</span>
+                            <div class="skills-target-switch" role="group" :aria-label="t('market.target.aria')">
+                                <button
+                                    type="button"
+                                    :class="['skills-target-chip', { active: skillsTargetApp === 'codex' }]"
+                                    :aria-pressed="skillsTargetApp === 'codex'"
+                                    :disabled="loading || !!initError || skillsMarketBusy"
+                                    @click="setSkillsTargetApp('codex', { silent: false })">
+                                    Codex
+                                </button>
+                                <button
+                                    type="button"
+                                    :class="['skills-target-chip', { active: skillsTargetApp === 'claude' }]"
+                                    :aria-pressed="skillsTargetApp === 'claude'"
+                                    :disabled="loading || !!initError || skillsMarketBusy"
+                                    @click="setSkillsTargetApp('claude', { silent: false })">
+                                    Claude Code
+                                </button>
+                            </div>
+                        </div>
+                        <div class="skills-header-actions">
+                            <button type="button" class="btn-icon" @click="openSkillsMenu" :aria-label="t('common.menu')" :title="t('common.menu')">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Installed skills panel -->
+                    <div class="skills-flow-panel">
+                        <div class="skills-flow-header">
+                            <div class="skills-flow-title-wrap">
+                                <span class="skills-flow-title">{{ t('market.installed.title') }}</span>
+                                <span class="skills-flow-count">{{ skillsList.length }}</span>
+                            </div>
+                            <button type="button" class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
+                                <svg v-if="!skillsLoading" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M3 19l-4-4 4-4"/><path d="M17 9v2a4 4 0 01-4 4H3"/></svg>
+                                <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14" class="spin"><path d="M10 2v4m0 8v4M2 10h4m8 0h4m-3.5-6.5l2.5 2.5M4 4l2.5 2.5M16 16l-2.5-2.5M4 16l2.5-2.5"/></svg>
+                            </button>
+                        </div>
+                        <div v-if="skillsLoading && !skillsMarketLocalLoadedOnce" class="skills-flow-loading">{{ t('market.local.loading') }}</div>
+                        <div v-else-if="skillsList.length === 0" class="skills-flow-empty">{{ t('market.local.empty') }}</div>
+                        <div v-else class="skills-flow-list">
+                            <div v-for="skill in skillsList" :key="'skill-' + skill.name" class="skills-flow-item" :class="{ 'has-issue': !skill.hasSkillFile }">
+                                <div class="skills-flow-main">
+                                    <span class="skills-flow-name">{{ skill.displayName || skill.name }}</span>
+                                    <span class="skills-flow-path">{{ skill.path }}</span>
+                                </div>
+                                <span :class="['skills-flow-status', skill.hasSkillFile ? 'success' : 'warning']">
+                                    {{ skill.hasSkillFile ? t('market.pill.verified') : t('market.pill.missingSkill') }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Importable skills panel -->
+                    <div class="skills-flow-panel">
+                        <div class="skills-flow-header">
+                            <div class="skills-flow-title-wrap">
+                                <span class="skills-flow-title">{{ t('market.import.title') }}</span>
+                                <span class="skills-flow-count">{{ skillsImportList.length }}</span>
+                            </div>
+                            <button type="button" class="btn-mini" @click="scanImportableSkills({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
+                                <svg v-if="!skillsScanningImports" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M3 19l-4-4 4-4"/><path d="M17 9v2a4 4 0 01-4 4H3"/></svg>
+                                <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="14" height="14" class="spin"><path d="M10 2v4m0 8v4M2 10h4m8 0h4m-3.5-6.5l2.5 2.5M4 4l2.5 2.5M16 16l-2.5-2.5M4 16l2.5-2.5"/></svg>
+                            </button>
+                        </div>
+                        <div v-if="skillsScanningImports && !skillsMarketImportLoadedOnce" class="skills-flow-loading">{{ t('market.import.loading') }}</div>
+                        <div v-else-if="skillsImportList.length === 0" class="skills-flow-empty">{{ t('market.import.empty') }}</div>
+                        <div v-else>
+                            <!-- Quick actions -->
+                            <div class="skills-flow-actions">
+                                <button type="button" class="skills-action-btn" @click="openSkillsManager" :disabled="loading || !!initError || skillsMarketBusy">
+                                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><rect x="3" y="3" width="14" height="14" rx="3"/><path d="M7 7h6M7 10h4"/></svg>
+                                    {{ t('market.action.manage.title') }}
+                                </button>
+                                <button type="button" class="skills-action-btn" @click="triggerSkillsZipImport" :disabled="loading || !!initError || skillsMarketBusy">
+                                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M4 14l3-3 3 3"/><path d="M7 4v7"/><rect x="12" y="4" width="5" height="12" rx="1"/></svg>
+                                    {{ t('market.action.zipImport.title') }}
+                                </button>
+                            </div>
+                            <!-- Import list -->
+                            <div class="skills-flow-list">
+                                <div v-for="skill in skillsImportList" :key="'import-' + buildSkillImportKey(skill)" class="skills-flow-item">
+                                    <div class="skills-flow-main">
+                                        <span class="skills-flow-name">{{ skill.displayName || skill.name }}</span>
+                                        <span class="skills-flow-meta">{{ skill.sourceLabel }}</span>
+                                    </div>
+                                    <button type="button" class="skills-flow-add" @click="importSingleSkill(skill)" :disabled="loading || !!initError || skillsMarketBusy">
+                                        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M10 4v6m3-3l-3 3-3-3"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>