dsh-skill-hub 0.2.6 → 0.3.1

package/src/client/api.ts

@@ -5,10 +5,15 @@
 import {
   SKILL_HUB_API,
   type CatalogResponse,
+  type CollectionGroup,
   type ConfigRequest,
   type ConfigResponse,
   type CreateRequest,
   type CreateResponse,
+  type CollectionReorderRequest,
+  type CollectionReorderResponse,
+  type SourceGroupReorderRequest,
+  type SourceGroupReorderResponse,
   type MarketCheckResponse,
   type MarketSourceRefRequest,
   type MarketSourceRequest,
@@ -16,12 +21,15 @@ import {
   type MarketSourcesResponse,
   type MarketSyncResponse,
   type RepoDiscoverResponse,
+  type RepoImportCancelResponse,
+  type RepoImportProgressResponse,
   type RepoImportRequest,
   type RepoImportResponse,
   type SkillDetail,
   type SkillDetailResponse,
   type SkillDeleteRequest,
   type SkillDeleteResponse,
+  type SkillTag,
   type SourceCheckRequest,
   type SourceCheckResponse,
   type SourceDeleteRequest,
@@ -33,6 +41,8 @@ import {
   type SourceSyncRequest,
   type SourceSyncResponse,
   type StatsResponse,
+  type TagReorderRequest,
+  type TagReorderResponse,
   type ToggleBatchRequest,
   type ToggleBatchResponse,
   type UpdateCheckResponse,
@@ -206,7 +216,7 @@ export class SkillHubApi {
     return readJson<RepoDiscoverResponse>(response)
   }
 
-  /** Install selected repo skills into the user-dsh root (records the source). */
+  /** Install selected repo skills into the user-dsh root (records the source). Returns jobId for polling. */
   async repoImport(repo: string, paths: string[], ref?: string): Promise<RepoImportResponse> {
     const payload: RepoImportRequest = { repo, paths, ...(ref !== undefined && ref !== '' ? { ref } : {}) }
     const response = await fetchWithTimeout(SKILL_HUB_API.repoImport, {
@@ -217,6 +227,23 @@ export class SkillHubApi {
     return readJson<RepoImportResponse>(response)
   }
 
+  /** Poll import job progress (B方案轮询) */
+  async repoImportProgress(jobId: string): Promise<RepoImportProgressResponse> {
+    const url = SKILL_HUB_API.repoImportProgress + '?jobId=' + encodeURIComponent(jobId)
+    const response = await fetchWithTimeout(url)
+    return readJson<RepoImportProgressResponse>(response)
+  }
+
+  /** Cancel a running import job (选项2：唯有取消才停) */
+  async repoImportCancel(jobId: string): Promise<RepoImportCancelResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.repoImportCancel, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ jobId }),
+    })
+    return readJson<RepoImportCancelResponse>(response)
+  }
+
   /** Read the hub's runtime config (effective values + saved overrides). */
   async config(): Promise<ConfigResponse> {
     const response = await fetchWithTimeout(SKILL_HUB_API.config)
@@ -272,6 +299,39 @@ export class SkillHubApi {
     return body.tags
   }
 
+  /** 拖拽重排场景分组 */
+  async reorderTags(orderedIds: string[]): Promise<SkillTag[]> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.tagReorder, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ orderedIds } satisfies TagReorderRequest),
+    })
+    const body = await readJson<TagReorderResponse>(response)
+    return body.tags
+  }
+
+  /** 拖拽重排来源集合 */
+  async reorderCollections(orderedNames: string[]): Promise<CollectionGroup[]> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.collectionReorder, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ orderedNames } satisfies CollectionReorderRequest),
+    })
+    const body = await readJson<CollectionReorderResponse>(response)
+    return body.collections
+  }
+
+  /** 拖拽重排来源顶层分组（project / collections / personal） */
+  async reorderSourceGroups(orderedKeys: string[]): Promise<string[]> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.sourceGroupReorder, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ orderedKeys } satisfies SourceGroupReorderRequest),
+    })
+    const body = await readJson<SourceGroupReorderResponse>(response)
+    return body.order
+  }
+
   /** 来源列表 + 派生 origin 映射 + 集合组 + 回收站。 */
   async sources(): Promise<SourcesResponse> {
     const response = await fetchWithTimeout(SKILL_HUB_API.sources)

package/src/client/index.tsx

@@ -22,7 +22,7 @@
  * internal.
  */
 
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 // Type-only: pulls the settings-scope service merge and the settings.section slot.
@@ -33,6 +33,15 @@ import type {} from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
 // Type-only: pulls the Context merge for ctx.inputTriggers (slash-dots wiring).
 import type {} from '@deepseek-ai/dsh-client-ui-input-trigger/client'
+// Type-only: pulls the connection/reset event.
+import type {} from '@deepseek-ai/dsh-client-connection/client'
+
+// 0.1.2-alpha.2: slots service moved to ui-renderer; provide local augmentation for build.
+declare module '@deepseek-ai/cordis' {
+  interface Context {
+    slots: any
+  }
+}
 import type { HubSettingsValue } from '../protocol.ts'
 import { SkillHubApi } from './api.ts'
 import { en, zh, type HubKey } from './locales.ts'

package/src/client/locales.ts

@@ -53,6 +53,11 @@ export const zh = {
   'market.scan': '扫描',
   'market.scanning': '扫描中…',
   'market.check': '检查',
+  'market.checkUpdate': '检查更新',
+  'market.checking': '检查中…',
+  'market.upToDate': '已是最新',
+  'market.update': '更新',
+  'market.updateCount': '更新 {count} 个',
   'market.sync': '同步',
   'market.syncing': '同步中…',
   'market.updated': '有更新',
@@ -76,8 +81,12 @@ export const zh = {
   'repo.imported': '导入成功 {count} 个',
   'repo.skippedExisting': '跳过已存在 {count} 个',
   'repo.failed': '失败 {count} 个',
+  'repo.cancel': '取消',
+  'repo.cancelled': '已取消 · 已导入 {imported}/{total} 已保留，临时文件已清理',
+  'repo.importingCurrent': '正在导入: {name} ({done}/{total})',
   'repo.root.skills': '技能 skills',
   'repo.root.designTemplates': '模板 design-templates',
+  'repo.root.generic': '{root}',
   'update.check': '检查更新',
   'update.checking': '检查中…',
   'update.upToDate': '已是最新版本 v{version}',
@@ -164,6 +173,10 @@ export const zh = {
   'source.followDelete': '跟进删除',
   'source.deleteConfirmTitle': '跟进上游删除？',
   'source.deleteConfirmText': '以下技能已从上游仓库移除，本地目录将移入回收站（可恢复）：',
+  'source.deleteGroup': '删除整组',
+  'source.deleteGroupHint': '删除该分组下的全部 {count} 个技能',
+  'source.deleteGroupTitle': '删除整组？',
+  'source.deleteGroupText': '将把分组“{name}”下的全部 {count} 个技能移入回收站（可恢复），只读技能会跳过：',
   'source.trash': '回收站',
   'source.restore': '恢复',
   'source.clearTrash': '清空回收站',
@@ -266,6 +279,11 @@ export const en: Record<HubKey, string> = {
   'market.scan': 'Scan',
   'market.scanning': 'Scanning…',
   'market.check': 'Check',
+  'market.checkUpdate': 'Check for updates',
+  'market.checking': 'Checking…',
+  'market.upToDate': 'Up to date',
+  'market.update': 'Update',
+  'market.updateCount': 'Update {count}',
   'market.sync': 'Sync',
   'market.syncing': 'Syncing…',
   'market.updated': 'Updates available',
@@ -289,8 +307,12 @@ export const en: Record<HubKey, string> = {
   'repo.imported': 'Imported {count}',
   'repo.skippedExisting': 'Skipped existing {count}',
   'repo.failed': 'Failed {count}',
+  'repo.cancel': 'Cancel',
+  'repo.cancelled': 'Cancelled · {imported}/{total} kept, temp files cleaned',
+  'repo.importingCurrent': 'Importing: {name} ({done}/{total})',
   'repo.root.skills': 'Skills',
   'repo.root.designTemplates': 'Templates design-templates',
+  'repo.root.generic': '{root}',
   'update.check': 'Check for updates',
   'update.checking': 'Checking…',
   'update.upToDate': 'Up to date: v{version}',
@@ -377,6 +399,10 @@ export const en: Record<HubKey, string> = {
   'source.followDelete': 'Follow deletion',
   'source.deleteConfirmTitle': 'Follow upstream deletion?',
   'source.deleteConfirmText': 'These skills were removed upstream; their local directories move to trash (restorable):',
+  'source.deleteGroup': 'Delete group',
+  'source.deleteGroupHint': 'Delete all {count} skills in this group',
+  'source.deleteGroupTitle': 'Delete group?',
+  'source.deleteGroupText': 'All {count} skills in group "{name}" will be moved to trash (restorable); read-only skills will be skipped:',
   'source.trash': 'Trash',
   'source.restore': 'Restore',
   'source.clearTrash': 'Empty trash',

package/src/client/panel/MarketView.tsx

@@ -5,10 +5,10 @@
  * update-all actions and the repo scan result with the importable checklist.
  */
 
-import { Fragment, type JSX } from 'react'
+import { Fragment, useEffect, useMemo, useState, type JSX } from 'react'
 import { tt } from '../helpers.ts'
 import { MARKET_CATALOG } from '../market-catalog.ts'
-import type { MarketSourceRecord } from '../../protocol.ts'
+import type { MarketSourceRecord, RepoSkillEntry } from '../../protocol.ts'
 import { ConfirmDialog } from './dialogs.tsx'
 import type { SkillHubState } from './useSkillHub.ts'
 import css from './panel.module.css'
@@ -19,19 +19,60 @@ function formatBytes(bytes: number): string {
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
   return (bytes / 1024 / 1024).toFixed(1) + ' MB'
 }
+function formatSpeed(bps?: number): string {
+  if (bps === undefined || bps <= 0) return ''
+  if (bps < 1024) return bps + ' B/s'
+  if (bps < 1024 * 1024) return (bps / 1024).toFixed(1) + ' KB/s'
+  return (bps / 1024 / 1024).toFixed(1) + ' MB/s'
+}
 
 export function MarketView(props: { hub: SkillHubState }): JSX.Element {
   const { hub } = props
-  const { marketState, marketCheck, sourceCheck, sourcesState, repoDiscoverState, scanningRepo, repoSelected, setRepoSelected, repoImporting, repoResult, newSourceName, setNewSourceName, syncingMarket, tagBusy, addSource, addMarketSource, removeMarketSource, scanRepo, checkMarket, checkSources, syncMarketSource, toggleRepoSelected, importRepo, updateAllDialog, setUpdateAllDialog, updateAll } = hub
+  const { marketState, marketCheck, sourceCheck, sourcesState, repoDiscoverState, scanningRepo, repoSelected, setRepoSelected, repoImporting, repoResult, newSourceName, setNewSourceName, syncingMarket, tagBusy, checkingSource, addSource, addMarketSource, removeMarketSource, scanRepo, checkMarket, checkSources, syncMarketSource, toggleRepoSelected, importRepo, cancelImport, updateAllDialog, setUpdateAllDialog, updateAll } = hub
   /** 有可更新技能的来源（全部更新按钮与确认列表共用）。 */
   const updatableRepos = Object.entries(sourceCheck).filter(([, check]) => check.changed && check.updated.length > 0)
 
-  /** 一个已添加来源的完整行：状态徽章 + 操作按钮。 */
+  // 276 列表本地状态：搜索 / 过滤 / 分页（精简：扁平列表，无 A-Z 分组）
+  const [repoSearch, setRepoSearch] = useState('')
+  const [repoFilter, setRepoFilter] = useState<string>('all')
+  const [visibleCount, setVisibleCount] = useState(50)
+  useEffect(() => { setVisibleCount(50) }, [repoDiscoverState, repoSearch, repoFilter])
+
+  /** 一个已添加来源的完整行：状态徽章 + 操作按钮。B 方案：扫描主按钮 + 智能更新按钮（检查/更新二合一）+ 溢出移除 */
   const sourceRow = (record: MarketSourceRecord): JSX.Element => {
     const releaseCheck = marketCheck[record.repo]
     const skillCheck = sourceCheck[record.repo]
     const installedCount = sourcesState?.sources.find((source) => source.repo === record.repo)?.skills.length ?? 0
     const scanning = scanningRepo === record.repo
+    const syncing = syncingMarket === record.repo
+    const checking = checkingSource === record.repo
+    const hasSkillUpdate = skillCheck?.changed === true && skillCheck.updated.length > 0
+    const hasReleaseUpdate = releaseCheck?.updateAvailable === true
+    const hasUpdate = hasSkillUpdate || hasReleaseUpdate
+    const isChecked = releaseCheck !== undefined || skillCheck !== undefined
+    // 智能按钮三态：未检查→检查更新，未检查完/有更新→更新 N 个，已检查无更新→已是最新
+    let updateLabel: string
+    let updateDisabled = false
+    let updateDanger = false
+    let updateAction: () => void = () => {}
+    if (syncing) {
+      updateLabel = tt('market.syncing')
+      updateDisabled = true
+    } else if (checking) {
+      updateLabel = tt('market.checking')
+      updateDisabled = true
+    } else if (!isChecked) {
+      updateLabel = tt('market.checkUpdate')
+      updateAction = () => { void checkSources(record.repo); void checkMarket() }
+    } else if (hasUpdate) {
+      const count = hasSkillUpdate ? skillCheck!.updated.length : 1
+      updateLabel = count > 1 || hasSkillUpdate ? tt('market.updateCount', { count }) : tt('market.update')
+      updateDanger = true
+      updateAction = () => { void syncMarketSource(record.repo) }
+    } else {
+      updateLabel = tt('market.upToDate')
+      updateDisabled = true
+    }
     return (
       <div className={css.row + ' ' + css.rowStatic}>
         <div className={css.rowMain}>
@@ -39,25 +80,38 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
             <a className={css.sourceLink} href={'https://github.com/' + record.repo} target='_blank' rel='noreferrer'>{record.repo}</a>
             {record.ref !== undefined ? <span className={css.badge + ' ' + css.badgeSource}>{record.ref}</span> : null}
             {installedCount > 0 ? <span className={css.badge + ' ' + css.badgeCount}>{tt('market.installed', { count: installedCount })}</span> : null}
-            {skillCheck?.changed === true && skillCheck.updated.length > 0
-              ? <span className={css.badge + ' ' + css.statusUpdated}>{tt('market.updatable', { count: skillCheck.updated.length })}</span>
+            {hasSkillUpdate
+              ? <span className={css.badge + ' ' + css.statusUpdated}>{tt('market.updatable', { count: skillCheck!.updated.length })}</span>
               : null}
             {skillCheck !== undefined && skillCheck.deleted.length > 0
               ? <span className={css.badge + ' ' + css.statusError}>{tt('market.deletedUpstream', { count: skillCheck.deleted.length })}</span>
               : null}
-            {releaseCheck?.updateAvailable === true
-              ? <span className={css.badge + ' ' + css.statusUpdated}>{releaseCheck.latestTag !== undefined ? tt('market.newRelease', { version: releaseCheck.latestTag }) : tt('market.updated')}</span>
+            {hasReleaseUpdate
+              ? <span className={css.badge + ' ' + css.statusUpdated}>{releaseCheck!.latestTag !== undefined ? tt('market.newRelease', { version: releaseCheck!.latestTag }) : tt('market.updated')}</span>
               : null}
           </div>
         </div>
-        <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void checkMarket() }}>{tt('market.check')}</button>
-        <button type='button' className={css.opBtn + (releaseCheck?.updateAvailable === true ? ' ' + css.opDanger : '')} disabled={syncingMarket === record.repo} onClick={() => { void syncMarketSource(record.repo) }}>
-          {syncingMarket === record.repo ? tt('market.syncing') : tt('market.sync')}
-        </button>
-        <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void scanRepo(record.repo) }}>
+        <button type='button' className={css.button + ' ' + css.primary} style={{ padding:'4px 10px', fontSize:12 }} disabled={scanning} onClick={() => { void scanRepo(record.repo) }}>
           {scanning ? tt('market.scanning') : tt('market.scan')}
         </button>
-        <button type='button' className={css.opBtn} disabled={tagBusy} title={tt('market.removeHint')} onClick={() => { void removeMarketSource(record.repo) }}>{tt('market.deleteSource')}</button>
+        <button
+          type='button'
+          className={css.opBtn + (updateDanger ? ' ' + css.opDanger : '')}
+          disabled={updateDisabled}
+          title={hasUpdate ? '将同步到上游最新版并提示可更新的本地技能' : undefined}
+          onClick={updateAction}
+        >
+          {updateLabel}
+        </button>
+        <button
+          type='button'
+          className={css.opBtn}
+          disabled={tagBusy}
+          title={tt('market.removeHint')}
+          aria-label={tt('market.deleteSource')}
+          onClick={() => { void removeMarketSource(record.repo) }}
+          style={{ padding:'4px 8px', minWidth:28 }}
+        >×</button>
       </div>
     )
   }
@@ -122,53 +176,153 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
         {marketState.status !== 'loading' && rows.length === 0 ? <div className={css.empty}>{tt('market.noSources')}</div> : null}
         {marketState.status !== 'loading' ? rows.map((row) => <Fragment key={row.key}>{row.element}</Fragment>) : null}
       </section>
-      {repoDiscoverState.status === 'scanning' ? <div className={css.empty}>{tt('market.scanning')}</div> : null}
-      {repoDiscoverState.status === 'error' ? <div className={css.errorBanner}>{repoDiscoverState.message}</div> : null}
-      {repoDiscoverState.status === 'ready' ? (() => {
+      {/* 扫描结果归属卡片：用同一 section 卡片包裹扫描中/错误/就绪，标题直接点明所属仓库，消除割裂感 */}
+      {(repoDiscoverState.status !== 'idle' || repoResult !== null) ? (
+        <section className={css.section} style={{ borderLeft: '3px solid var(--hub-model, #2f81f7)', background: 'rgba(47,129,247,0.04)' }}>
+          <div className={css.sectionTitle + ' ' + css.sectionHeadRow} style={{ margin: '10px 14px 6px' }}>
+            <span className={css.sectionTitleFill} style={{ display:'flex', alignItems:'center', gap:6 }}>
+              <span style={{ width:7, height:7, borderRadius:'50%', background:'var(--hub-model, #2f81f7)', display:'inline-block' }} />
+              扫描结果
+              <span style={{ fontWeight:400, opacity:.75 }}>
+                — {repoDiscoverState.status === 'ready' ? repoDiscoverState.data.repo : repoDiscoverState.status === 'error' ? (scanningRepo ?? '') : (scanningRepo ?? '')}
+                {repoDiscoverState.status === 'ready' && repoDiscoverState.data.ref !== null ? <span style={{ opacity:.5, marginLeft:6 }}>ref {repoDiscoverState.data.ref}</span> : null}
+              </span>
+            </span>
+            <button type='button' className={css.opBtn} onClick={() => { hub.clearScan() }}>关闭</button>
+          </div>
+          <div style={{ padding:'0 12px 12px' }}>
+            {repoDiscoverState.status === 'scanning' ? <div className={css.empty} style={{ padding:'12px 0' }}>{tt('market.scanning')}</div> : null}
+            {repoDiscoverState.status === 'error' ? <div className={css.errorBanner}>{repoDiscoverState.message}</div> : null}
+            {repoDiscoverState.status === 'ready' ? (() => {
         const entries = repoDiscoverState.data.entries
-        const selected = entries.filter((entry) => repoSelected.has(entry.path) && !entry.existing)
+        // 导入后 catalog 已包含新技能，但 scan 快照的 existing 仍为 false，需用实时 catalog + 本次导入结果兜底，避免已导入仍可选
+        const installedNames = new Set<string>([
+          ...((hub.catalog?.skills ?? []).map((s) => s.name)),
+          ...((hub.catalog?.disabled ?? []).map((d) => d.name)),
+          ...((repoResult?.imported ?? []).map((r) => r.name)),
+          ...((repoResult?.skipped ?? []).map((r) => r.name)),
+        ])
+        const isExisting = (entry: RepoSkillEntry): boolean => entry.existing || installedNames.has(entry.name)
+        const selected = entries.filter((entry) => repoSelected.has(entry.path) && !isExisting(entry))
+        const selectedBytes = selected.reduce((s, e) => s + e.totalBytes, 0)
+        // 过滤 + 搜索（276 场景核心）
+        const filtered = entries.filter((entry) => {
+          if (repoFilter !== 'all' && entry.root !== repoFilter) return false
+          if (repoSearch.trim() !== '' && !entry.name.toLowerCase().includes(repoSearch.trim().toLowerCase())) return false
+          return true
+        }).sort((a, b) => a.name.localeCompare(b.name))
+        const paged = filtered.slice(0, visibleCount)
         return (
           <>
-            <p className={css.hintLine + ' ' + css.hintInline}>{tt('repo.ready', { count: entries.length })}</p>
+            <p className={css.hintLine + ' ' + css.hintInline}>{tt('repo.ready', { count: entries.length })} · {repoDiscoverState.data.ref !== null ? `ref ${repoDiscoverState.data.ref}` : ''}</p>
             {entries.length === 0 ? <div className={css.empty}>{tt('repo.empty')}</div> : (
               <>
-                <div className={css.buttons + ' ' + css.actionsBottom}>
-                  <button type='button' className={css.button} onClick={() => { setRepoSelected(new Set(entries.filter((entry) => !entry.existing).map((entry) => entry.path))) }}>{tt('repo.selectAll')}</button>
-                  <button type='button' className={css.button} onClick={() => { setRepoSelected(new Set()) }}>{tt('repo.clearAll')}</button>
-                </div>
-                {(['skills', 'design-templates'] as const).map((root) => {
-                  const rootEntries = entries.filter((entry) => entry.root === root)
-                  if (rootEntries.length === 0) return null
+                {/* 搜索 + 过滤 + 统计 — 精简 */}
+                {(() => {
+                  // 动态根：按已知顺序 skills/design-templates 优先，其余按字母序
+                  const order = new Map<string, number>([['skills', 0], ['design-templates', 1]])
+                  const roots = [...new Set(entries.map((e) => e.root))].sort((a, b) => {
+                    const ao = order.get(a) ?? 99
+                    const bo = order.get(b) ?? 99
+                    return ao !== bo ? ao - bo : a.localeCompare(b)
+                  })
+                  const counts = new Map<string, number>()
+                  for (const e of entries) counts.set(e.root, (counts.get(e.root) ?? 0) + 1)
                   return (
-                    <div key={root} className={css.section}>
-                      <div className={css.sectionTitle}>{root === 'skills' ? tt('repo.root.skills') : tt('repo.root.designTemplates')}</div>
-                      {rootEntries.map((entry) => (
-                        <label key={entry.path} className={css.row + (entry.existing ? ' ' + css.rowMuted : '')}>
-                          <input
-                            type='checkbox'
-                            checked={repoSelected.has(entry.path)}
-                            disabled={entry.existing}
-                            onChange={(event) => { toggleRepoSelected(entry.path, event.target.checked) }}
-                          />
-                          <div className={css.rowMain}>
-                            <div className={css.rowName}>{entry.name}</div>
-                            <div className={css.rowDesc}>{entry.dir} · {tt('repo.files', { count: entry.fileCount, size: formatBytes(entry.totalBytes) })}</div>
-                          </div>
-                          {entry.existing
-                            ? <span className={css.badge + ' ' + css.badgeReadonly}>{tt('repo.existing')}</span>
-                            : <span className={css.badge + ' ' + css.badgeSource}>{entry.origin}</span>}
-                        </label>
+                    <div style={{ display:'flex', gap:8, marginBottom:8, flexWrap:'wrap' }}>
+                      <input
+                        className={css.input}
+                        style={{ flex:1, minWidth:140 }}
+                        value={repoSearch}
+                        onChange={(e) => setRepoSearch(e.target.value)}
+                        placeholder="搜索技能名…"
+                      />
+                      <button type='button' className={css.button + (repoFilter === 'all' ? ' ' + css.primary : '')} style={{ padding:'6px 10px', fontSize:12 }} onClick={() => setRepoFilter('all')}>全部 {entries.length}</button>
+                      {roots.map((root) => (
+                        <button key={root} type='button' className={css.button + (repoFilter === root ? ' ' + css.primary : '')} style={{ padding:'6px 10px', fontSize:12 }} onClick={() => setRepoFilter(root)}>{root} {counts.get(root) ?? 0}</button>
                       ))}
                     </div>
                   )
-                })}
-                <button type='button' className={css.button + ' ' + css.primary} disabled={selected.length === 0 || repoImporting} onClick={() => { void importRepo() }}>{repoImporting ? tt('repo.importing') : tt('repo.import', { count: selected.length })}</button>
+                })()}
+                <div className={css.hintLine} style={{ display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:8 }}>
+                  <span>已选 {selected.length}/{entries.length} · {formatBytes(selectedBytes)} · 显示 {paged.length}/{filtered.length}（过滤后）</span>
+                  <span style={{ display:'flex', gap:6 }}>
+                    <button type='button' className={css.button} style={{ padding:'4px 8px', fontSize:11 }} onClick={() => { setRepoSelected(new Set(filtered.filter((e)=>!isExisting(e)).slice(0, visibleCount).map((e)=>e.path))) }}>全选当前显示</button>
+                    <button type='button' className={css.button} style={{ padding:'4px 8px', fontSize:11 }} onClick={() => { setRepoSelected(new Set(entries.filter((e)=>!isExisting(e)).map((e)=>e.path))) }}>全选全部 {entries.filter(e=>!isExisting(e)).length}</button>
+                    <button type='button' className={css.button} style={{ padding:'4px 8px', fontSize:11 }} onClick={() => { setRepoSelected(new Set()) }}>{tt('repo.clearAll')}</button>
+                  </span>
+                </div>
+
+                {/* 扁平虚拟滚动容器 — 主题自适应，CSS Modules */}
+                <div className={css.scanList}>
+                  {paged.length === 0 ? <div className={css.empty} style={{ padding:20 }}>无匹配技能</div> : paged.map((entry) => {
+                    const existing = isExisting(entry)
+                    return (
+                    <label key={entry.path} className={css.row + (existing ? ' ' + css.rowMuted : '')}>
+                      <input
+                        type='checkbox'
+                        checked={repoSelected.has(entry.path)}
+                        disabled={existing}
+                        onChange={(event) => { toggleRepoSelected(entry.path, event.target.checked) }}
+                      />
+                      <div className={css.rowMain}>
+                        <div className={css.rowName}>{entry.name}</div>
+                        <div className={css.rowDesc}>{entry.dir} · {tt('repo.files', { count: entry.fileCount, size: formatBytes(entry.totalBytes) })}</div>
+                      </div>
+                      {existing
+                        ? <span className={css.badge + ' ' + css.badgeReadonly}>{tt('repo.existing')}</span>
+                        : <span className={css.badge + ' ' + css.badgeSource}>{entry.origin}</span>}
+                    </label>
+                  )})}
+                </div>
+                {visibleCount < filtered.length ? (
+                  <div style={{ textAlign:'center', marginTop:8 }}>
+                    <button type='button' className={css.button} onClick={() => setVisibleCount((n) => n + 50)}>加载更多 50 (剩余 {filtered.length - visibleCount})</button>
+                  </div>
+                ) : null}
+
+                <div className={css.buttons + ' ' + css.actionsTop}>
+                  <button type='button' className={css.button + ' ' + css.primary} disabled={selected.length === 0 || repoImporting} onClick={() => { void importRepo() }}>{repoImporting ? tt('repo.importing') : `${tt('repo.import', { count: selected.length })} · ${formatBytes(selectedBytes)}`}</button>
+                  {repoImporting ? <button type='button' className={css.button} onClick={() => { void cancelImport() }}>{tt('repo.cancel')}</button> : null}
+                </div>
+                {repoResult !== null && repoResult.status === 'running' ? (() => {
+                  const pct = repoResult.totalBytes > 0 ? Math.min(100, Math.round(repoResult.downloadedBytes / repoResult.totalBytes * 100)) : (repoResult.total > 0 ? Math.round(repoResult.done / repoResult.total * 100) : 0)
+                  const speed = formatSpeed(repoResult.bytesPerSecond)
+                  return (
+                    <div className={css.formSuccess + ' ' + css.actionsTop}>
+                      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
+                        <div className={css.scanProgressTrack}>
+                          <div className={css.scanProgressFill} style={{ width: `${pct}%` }} />
+                        </div>
+                        <span style={{ fontSize:11, opacity:.75, minWidth:32, textAlign:'right' }}>{pct}%</span>
+                      </div>
+                      <div className={css.hintLine}>
+                        {formatBytes(repoResult.downloadedBytes)} / {formatBytes(repoResult.totalBytes)}
+                        {speed !== '' ? ` · ${speed}` : ''} · {repoResult.done}/{repoResult.total} 个技能
+                      </div>
+                      <div className={css.hintLine} style={{marginTop:4}}>
+                        {repoResult.current !== undefined ? tt('repo.importingCurrent', { name: repoResult.current, done: repoResult.done + 1, total: repoResult.total }) : tt('repo.importing')}
+                        {repoResult.currentFile !== undefined ? ` · ${repoResult.currentFile}` : ''}
+                      </div>
+                      {repoResult.failed.length > 0 ? <div className={css.errorBanner} style={{marginTop:6}}>{repoResult.failed.map(f => `${f.name}: ${f.error}`).join('; ')}</div> : null}
+                    </div>
+                  )
+                })() : null}
               </>
             )}
           </>
         )
       })() : null}
-      {repoResult !== null ? <div className={css.formSuccess + ' ' + css.actionsTop}>{tt('repo.imported', { count: repoResult.imported.length })} · {tt('repo.skippedExisting', { count: repoResult.skipped.length })} · {tt('repo.failed', { count: repoResult.failed.length })}</div> : null}
+      {repoResult !== null && repoResult.status !== 'running' ? (
+        <div className={repoResult.status === 'cancelled' ? css.errorBanner + ' ' + css.actionsTop : css.formSuccess + ' ' + css.actionsTop}>
+          {repoResult.status === 'cancelled' ? tt('repo.cancelled', { imported: repoResult.imported.length, total: repoResult.total }) : `${tt('repo.imported', { count: repoResult.imported.length })} · ${tt('repo.skippedExisting', { count: repoResult.skipped.length })} · ${tt('repo.failed', { count: repoResult.failed.length })}`}
+          {repoResult.failed.length > 0 ? <div style={{marginTop:6}}>{repoResult.failed.map(f => `${f.name}: ${f.error}`).join('; ')}</div> : null}
+          {repoResult.status === 'error' && repoResult.error ? <div style={{marginTop:6}}>{repoResult.error}</div> : null}
+        </div>
+      ) : null}
+          </div>
+        </section>
+      ) : null}
 
       {updateAllDialog ? (
         <ConfirmDialog

package/src/client/panel/ScenesView.tsx

@@ -5,7 +5,7 @@
  * are managed in the sources tab.
  */
 
-import type { JSX } from 'react'
+import { useState, type JSX } from 'react'
 import { tt } from '../helpers.ts'
 import { groupSwitchView } from '../grouping.ts'
 import { SkillRow } from './SkillRow.tsx'
@@ -17,6 +17,19 @@ import css from './panel.module.css'
 export function ScenesView(props: { hub: SkillHubState }): JSX.Element {
   const { hub } = props
   const { catalog, groupsState, sorted, normalized, collapsedGroups, viewNames, actionNames, batchBusy, busyNames, newTagName, setNewTagName, tagBusy, createTag, toggleGroupCollapse, toggleGroup, setEditingTag, setEditName, setMembersDraft, setEditSearch, enableDisabled } = hub
+  const [dragId, setDragId] = useState<string | null>(null)
+  const [overId, setOverId] = useState<string | null>(null)
+  const handleDrop = (targetId: string): void => {
+    if (dragId === null || dragId === targetId || groupsState === null) return
+    const ids = groupsState.tags.map((t) => t.id)
+    const from = ids.indexOf(dragId)
+    const to = ids.indexOf(targetId)
+    if (from === -1 || to === -1) return
+    const next = [...ids]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    void hub.reorderTags(next)
+  }
   return (
     <>
       <form className={css.form} onSubmit={(event) => { void createTag(event) }}>
@@ -38,9 +51,21 @@ export function ScenesView(props: { hub: SkillHubState }): JSX.Element {
         const collapsed = collapsedGroups.has('tag:' + tag.id)
         const view = groupSwitchView(tag.skillNames, viewNames)
         const hasWritable = tag.skillNames.some((name) => actionNames.has(name))
+        const isDragging = dragId === tag.id
+        const isOver = overId === tag.id && dragId !== tag.id
         return (
-          <section key={'tag:' + tag.id} className={css.section}>
+          <section
+            key={'tag:' + tag.id}
+            className={css.section + (isDragging ? ' ' + css.dragging : '') + (isOver ? ' ' + css.dragOver : '')}
+            draggable
+            onDragStart={(e) => { setDragId(tag.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', tag.id) }}
+            onDragOver={(e) => { e.preventDefault(); if (overId !== tag.id) setOverId(tag.id) }}
+            onDragLeave={() => { if (overId === tag.id) setOverId(null) }}
+            onDrop={(e) => { e.preventDefault(); handleDrop(tag.id); setOverId(null) }}
+            onDragEnd={() => { setDragId(null); setOverId(null) }}
+          >
             <div className={css.groupHead}>
+              <span className={css.dragHandle} aria-hidden title="拖拽调整顺序">⋮⋮</span>
               <button type='button' className={css.disclosure} aria-expanded={!collapsed} onClick={() => { toggleGroupCollapse('tag:' + tag.id) }}>
                 <span className={css.chevron + (collapsed ? ' ' + css.chevronCollapsed : '')} />
                 <span className={css.groupTitle}>