dsh-skill-hub 0.2.6 → 0.3.0

package/src/client/panel/SourcesView.tsx

@@ -6,7 +6,7 @@
  * "personal" card (project skills never count as personal).
  */
 
-import type { JSX } from 'react'
+import { useState, type JSX } from 'react'
 import { tt } from '../helpers.ts'
 import { filterBySource, groupSwitchView, isProjectSource, PRIVATE_SOURCE } from '../grouping.ts'
 import { SourceStatusBadge } from './SourceStatusBadge.tsx'
@@ -101,17 +101,151 @@ function ProjectTree(props: { hub: SkillHubState }): JSX.Element | null {
 
 export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
   const { hub } = props
-  const { catalog, groupsState, skillView, sourceFilter, origins, sorted, normalized, collapsedGroups, viewNames, sourceCheck, actionNames, checkingSource, syncingSource, batchBusy, busyNames, toggleGroupCollapse, checkSources, requestSync, requestDelete, toggleGroup, enableDisabled } = hub
+  const { catalog, groupsState, skillView, sourceFilter, origins, sorted, normalized, collapsedGroups, viewNames, sourceCheck, actionNames, checkingSource, syncingSource, batchBusy, busyNames, toggleGroupCollapse, checkSources, requestSync, requestDelete, requestDeleteGroup, toggleGroup, enableDisabled } = hub
+  const [topDragKey, setTopDragKey] = useState<string | null>(null)
+  const [topOverKey, setTopOverKey] = useState<string | null>(null)
 
   if (skillView === 'flat') {
     return <>{filterBySource(sorted, sourceFilter, origins).map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />)}</>
   }
 
+  // ----- 顶层分组统一拖拽（project / col:xxx / personal 全部可拖） -----
+  const projectSkillsAll = filterBySource(sorted, sourceFilter, origins).filter((skill) => isProjectSource(skill.source))
+  const hasProject = projectSkillsAll.length > 0
+  const collections = groupsState?.collections ?? []
+  const uncategorized = filterBySource(sorted, sourceFilter, origins).filter((skill) => origins[skill.name] === undefined && !isProjectSource(skill.source))
+  const personalDisabledAll = (catalog?.disabled ?? []).filter((record) => origins[record.name] === undefined)
+    .filter((record) => normalized.length === 0 || record.name.toLocaleLowerCase().includes(normalized) || record.description.toLocaleLowerCase().includes(normalized))
+    .filter((record) => sourceFilter === 'all' || sourceFilter === PRIVATE_SOURCE)
+  const allPersonalNamesAll = [...uncategorized.map((s) => s.name), ...personalDisabledAll.map((r) => r.name)]
+  const hasPersonal = allPersonalNamesAll.length > 0
+  const defaultTopKeys: string[] = [
+    ...(hasProject ? ['project'] : []),
+    ...collections.map((c) => 'col:' + c.name),
+    ...(hasPersonal ? ['uncategorized-source'] : []),
+  ]
+  const storedTopOrder = groupsState?.sourceGroupOrder ?? []
+  const topOrderedKeys = (() => {
+    if (storedTopOrder.length === 0) return defaultTopKeys
+    const set = new Set(storedTopOrder)
+    const result = storedTopOrder.filter((k) => defaultTopKeys.includes(k))
+    for (const k of defaultTopKeys) if (!set.has(k)) result.push(k)
+    // 兼容旧 collectionOrder：若 storedTopOrder 为空但旧 order 有值，已在 defaultTopKeys 中体现 collection 顺序
+    if (result.length === 0) return defaultTopKeys
+    return result
+  })()
+  const handleTopDrop = (targetKey: string): void => {
+    if (topDragKey === null || topDragKey === targetKey) return
+    const from = topOrderedKeys.indexOf(topDragKey)
+    const to = topOrderedKeys.indexOf(targetKey)
+    if (from === -1 || to === -1) return
+    const next = [...topOrderedKeys]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    void hub.reorderSourceGroups(next)
+  }
+  // 兼容旧逻辑：若用户拖的是 collection 且未使用顶层排序，回退到 collectionReorder（保留旧数据兼容）
+  const handleCollectionDropLegacy = (targetName: string): void => {
+    // 仅当顶层排序未启用时（storedTopOrder 为空）才用旧接口
+    if ((groupsState?.sourceGroupOrder?.length ?? 0) > 0) { handleTopDrop('col:' + targetName); return }
+    const dragCol = topDragKey !== null && topDragKey.startsWith('col:') ? topDragKey.slice(4) : null
+    if (dragCol === null || dragCol === targetName || groupsState === null) return
+    const names = groupsState.collections.map((c) => c.name)
+    const from = names.indexOf(dragCol)
+    const to = names.indexOf(targetName)
+    if (from === -1 || to === -1) return
+    const next = [...names]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    void hub.reorderCollections(next)
+  }
+
+  // 空状态：没有任何分组时提示
+  const isEmptyTop = !hasProject && collections.length === 0 && !hasPersonal
   return (
     <>
-      <ProjectTree hub={hub} />
-      {groupsState !== null && groupsState.collections.length === 0 ? <div className={css.empty}>{tt('groups.noCollections')}</div> : null}
-      {groupsState?.collections.map((collection) => {
+      {isEmptyTop ? <div className={css.empty}>{tt('groups.noCollections')}</div> : null}
+      {topOrderedKeys.map((topKey) => {
+        // Project 顶层卡片（可拖）
+        if (topKey === 'project' && hasProject) {
+          const topCollapsed = collapsedGroups.has('project')
+          const isDragging = topDragKey === 'project'
+          const isOver = topOverKey === 'project' && topDragKey !== 'project'
+          // 按 workspace 聚合，与 ProjectTree 逻辑一致
+          const byProject = new Map<string, { title: string; skills: typeof projectSkillsAll }>()
+          for (const skill of projectSkillsAll) {
+            const key = skill.workspace ?? skill.source
+            const entry = byProject.get(key)
+            if (entry === undefined) byProject.set(key, { title: skill.workspaceTitle ?? skill.workspace ?? tt('groups.project'), skills: [skill] })
+            else entry.skills.push(skill)
+          }
+          return (
+            <section
+              key="project"
+              className={css.section + (isDragging ? ' ' + css.dragging : '') + (isOver ? ' ' + css.dragOver : '')}
+              draggable
+              onDragStart={(e) => { setTopDragKey('project'); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', 'project') }}
+              onDragOver={(e) => { e.preventDefault(); if (topOverKey !== 'project') setTopOverKey('project') }}
+              onDragLeave={() => { if (topOverKey === 'project') setTopOverKey(null) }}
+              onDrop={(e) => { e.preventDefault(); handleTopDrop('project'); setTopOverKey(null) }}
+              onDragEnd={() => { setTopDragKey(null); setTopOverKey(null) }}
+            >
+              <div className={css.groupHead}>
+                <span className={css.dragHandle} aria-hidden title="拖拽调整顺序">⋮⋮</span>
+                <button type='button' className={css.disclosure} aria-expanded={!topCollapsed} onClick={() => { toggleGroupCollapse('project') }}>
+                  <span className={css.chevron + (topCollapsed ? ' ' + css.chevronCollapsed : '')} />
+                  <span className={css.groupTitle}>{tt('groups.project')} · {byProject.size}</span>
+                </button>
+              </div>
+              {!topCollapsed ? [...byProject.entries()].map(([key, proj]) => {
+                const projKey = 'project:' + key
+                const projCollapsed = collapsedGroups.has(projKey)
+                const subdivided = hub.subdividedProjects.has(key)
+                return (
+                  <div key={projKey} className={css.projectNest}>
+                    <div className={css.groupHead}>
+                      <button type='button' className={css.disclosure} aria-expanded={!projCollapsed} onClick={() => { toggleGroupCollapse(projKey) }}>
+                        <span className={css.chevron + (projCollapsed ? ' ' + css.chevronCollapsed : '')} />
+                        <span className={css.groupTitle}>{proj.title} · {proj.skills.length}<GroupSummary members={proj.skills.map((s) => s.name)} hub={hub} /></span>
+                      </button>
+                      <span className={css.groupOps}>
+                        <button type='button' className={css.opBtn} onClick={(event) => { event.stopPropagation(); hub.toggleSubdivide(key) }}>{subdivided ? tt('groups.merge') : tt('groups.subdivide')}</button>
+                      </span>
+                    </div>
+                    {!projCollapsed ? (
+                      subdivided ? (
+                        <div className={css.projectNest}>
+                          {(['project-dsh', 'project-agents'] as const).map((source) => {
+                            const list = proj.skills.filter((skill) => skill.source === source)
+                            if (list.length === 0) return null
+                            const srcKey = projKey + ':' + source
+                            const srcCollapsed = collapsedGroups.has(srcKey)
+                            return (
+                              <div key={srcKey} className={css.projectNest}>
+                                <div className={css.groupHead}>
+                                  <button type='button' className={css.disclosure} aria-expanded={!srcCollapsed} onClick={() => { toggleGroupCollapse(srcKey) }}>
+                                    <span className={css.chevron + (srcCollapsed ? ' ' + css.chevronCollapsed : '')} />
+                                    <span className={css.groupTitle}>{tt(('badge.source.' + source) as 'badge.source.project-dsh' | 'badge.source.project-agents')} · {list.length}</span>
+                                  </button>
+                                </div>
+                                {!srcCollapsed ? list.map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />) : null}
+                              </div>
+                            )
+                          })}
+                        </div>
+                      ) : proj.skills.map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />)
+                    ) : null}
+                  </div>
+                )
+              }) : null}
+            </section>
+          )
+        }
+        // Collection 卡片（可拖，归属顶层排序）
+        if (topKey.startsWith('col:')) {
+          const colName = topKey.slice(4)
+          const collection = collections.find((c) => c.name === colName)
+          if (collection === undefined) return null
         const skills = filterBySource(sorted, sourceFilter, origins).filter((skill) => collection.skillNames.includes(skill.name))
         const disabledMembers = (catalog?.disabled ?? []).filter((record) =>
           collection.skillNames.includes(record.name)
@@ -121,9 +255,21 @@ export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
         const view = groupSwitchView(collection.skillNames, viewNames)
         const check = sourceCheck[collection.name]
         const hasWritable = collection.skillNames.some((name) => actionNames.has(name))
+        const isDragging = topDragKey === topKey
+        const isOver = topOverKey === topKey && topDragKey !== topKey
         return (
-          <section key={'col:' + collection.name} className={css.section}>
+          <section
+            key={'col:' + collection.name}
+            className={css.section + (isDragging ? ' ' + css.dragging : '') + (isOver ? ' ' + css.dragOver : '')}
+            draggable
+            onDragStart={(e) => { setTopDragKey(topKey); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', topKey) }}
+            onDragOver={(e) => { e.preventDefault(); if (topOverKey !== topKey) setTopOverKey(topKey) }}
+            onDragLeave={() => { if (topOverKey === topKey) setTopOverKey(null) }}
+            onDrop={(e) => { e.preventDefault(); handleTopDrop(topKey); setTopOverKey(null) }}
+            onDragEnd={() => { setTopDragKey(null); setTopOverKey(null) }}
+          >
             <div className={css.groupHead}>
+              <span className={css.dragHandle} aria-hidden title="拖拽调整顺序">⋮⋮</span>
               <button type='button' className={css.disclosure} aria-expanded={!collapsed} onClick={() => { toggleGroupCollapse('col:' + collection.name) }}>
                 <span className={css.chevron + (collapsed ? ' ' + css.chevronCollapsed : '')} />
                 <span className={css.groupTitle}>
@@ -153,6 +299,14 @@ export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
                   onClick={(event) => { event.stopPropagation(); toggleGroup('col:' + collection.name, collection.name, view.state) }}>
                   <span className={css.switchThumb} />
                 </button>
+                {hub.editMode ? <button
+                  type='button'
+                  className={css.opBtn + ' ' + css.opDanger}
+                  title={tt('source.deleteGroupHint', { count: collection.skillNames.length })}
+                  onClick={(event) => { event.stopPropagation(); requestDeleteGroup(collection.name, collection.skillNames) }}
+                >
+                  {tt('source.deleteGroup')}
+                </button> : null}
               </span>
             </div>
             {!collapsed ? (
@@ -165,27 +319,50 @@ export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
             ) : null}
           </section>
         )
-      })}
-      {(() => {
-        // 「个人」组：无来源记录 且 非项目技能（项目技能归项目树）。
-        const uncategorized = filterBySource(sorted, sourceFilter, origins).filter((skill) => origins[skill.name] === undefined && !isProjectSource(skill.source))
-        if (uncategorized.length === 0) return null
-        const collapsed = collapsedGroups.has('uncategorized-source')
-        return (
-          <section className={css.section}>
-            <div className={css.groupHead}>
-              <button type='button' className={css.disclosure} aria-expanded={!collapsed} onClick={() => { toggleGroupCollapse('uncategorized-source') }}>
-                <span className={css.chevron + (collapsed ? ' ' + css.chevronCollapsed : '')} />
-                <span className={css.groupTitle}>
-                  {tt('groups.personal')} · {uncategorized.length}
-                  <GroupSummary members={uncategorized.map((skill) => skill.name)} hub={hub} />
+        }
+        // Personal 顶层卡片（可拖）
+        if (topKey === 'uncategorized-source' && hasPersonal) {
+          const uncategorized = filterBySource(sorted, sourceFilter, origins).filter((skill) => origins[skill.name] === undefined && !isProjectSource(skill.source))
+          const personalDisabled = (catalog?.disabled ?? []).filter((record) => origins[record.name] === undefined)
+            .filter((record) => normalized.length === 0 || record.name.toLocaleLowerCase().includes(normalized) || record.description.toLocaleLowerCase().includes(normalized))
+            .filter((record) => sourceFilter === 'all' || sourceFilter === PRIVATE_SOURCE)
+          const allPersonalNames = [...uncategorized.map((s) => s.name), ...personalDisabled.map((r) => r.name)]
+          if (allPersonalNames.length === 0) return null
+          const collapsed = collapsedGroups.has('uncategorized-source')
+          const isDragging = topDragKey === 'uncategorized-source'
+          const isOver = topOverKey === 'uncategorized-source' && topDragKey !== 'uncategorized-source'
+          return (
+            <section
+              key="uncategorized-source"
+              className={css.section + (isDragging ? ' ' + css.dragging : '') + (isOver ? ' ' + css.dragOver : '')}
+              draggable
+              onDragStart={(e) => { setTopDragKey('uncategorized-source'); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', 'uncategorized-source') }}
+              onDragOver={(e) => { e.preventDefault(); if (topOverKey !== 'uncategorized-source') setTopOverKey('uncategorized-source') }}
+              onDragLeave={() => { if (topOverKey === 'uncategorized-source') setTopOverKey(null) }}
+              onDrop={(e) => { e.preventDefault(); handleTopDrop('uncategorized-source'); setTopOverKey(null) }}
+              onDragEnd={() => { setTopDragKey(null); setTopOverKey(null) }}
+            >
+              <div className={css.groupHead}>
+                <span className={css.dragHandle} aria-hidden title="拖拽调整顺序">⋮⋮</span>
+                <button type='button' className={css.disclosure} aria-expanded={!collapsed} onClick={() => { toggleGroupCollapse('uncategorized-source') }}>
+                  <span className={css.chevron + (collapsed ? ' ' + css.chevronCollapsed : '')} />
+                  <span className={css.groupTitle}>{tt('groups.personal')} · {allPersonalNames.length}<GroupSummary members={allPersonalNames} hub={hub} /></span>
+                </button>
+                <span className={css.groupOps}>
+                  {hub.editMode ? <button type='button' className={css.opBtn + ' ' + css.opDanger} title={tt('source.deleteGroupHint', { count: allPersonalNames.length })} onClick={(event) => { event.stopPropagation(); requestDeleteGroup(tt('groups.personal'), allPersonalNames) }}>{tt('source.deleteGroup')}</button> : null}
                 </span>
-              </button>
-            </div>
-            {!collapsed ? uncategorized.map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />) : null}
-          </section>
-        )
-      })()}
+              </div>
+              {!collapsed ? (
+                <>
+                  {uncategorized.map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />)}
+                  {personalDisabled.map((record) => (<DisabledRow key={record.name} record={record} busy={busyNames.has(record.name)} onEnable={() => { void enableDisabled(record) }} />))}
+                </>
+              ) : null}
+            </section>
+          )
+        }
+        return null
+      })}
     </>
   )
 }

package/src/client/panel/panel.module.css

@@ -22,9 +22,9 @@
 /* Inset grouped list: one rounded card per group. */
 .section { display: flex; flex-direction: column; background: rgba(128,128,128,.06); border-radius: 12px; overflow: hidden; margin-top: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04); }
 .sectionTitle { font-size: 13px; font-weight: 700; margin: 14px 16px 2px; }
-.groupHead { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
-.groupTitle { font-size: 13px; font-weight: 600; opacity: .92; flex: 1; min-width: 0; }
-.groupOps { flex: none; display: inline-flex; gap: 6px; }
+.groupHead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; }
+.groupTitle { font-size: 13px; font-weight: 600; opacity: .92; flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
+.groupOps { flex: none; display: inline-flex; gap: 6px; align-items: center; }
 
 /* Small neutral pill buttons (group-level actions). */
 .opBtn { font-size: 11px; padding: 3px 11px; border-radius: 999px; border: none; background: rgba(128,128,128,.13); color: inherit; cursor: pointer; transition: background .15s ease; }
@@ -113,10 +113,10 @@
 .badgeDisabled { background: rgba(128,128,128,.1); border: none; opacity: .58; }
 
 /* Collapsible drawer headers (groups view). */
-.disclosure { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 2px 0; border: none; background: none; color: inherit; cursor: pointer; text-align: left; }
+.disclosure { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 2px 0; border: none; background: none; color: inherit; cursor: pointer; text-align: left; min-height: 24px; }
 .disclosure:hover .groupTitle { opacity: 1; }
-.chevron { flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; opacity: .55; margin-right: 2px; }
-.chevronCollapsed { transform: rotate(-45deg); }
+.chevron { flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .15s ease; opacity: .55; margin-right: 2px; align-self: center; }
+.chevronCollapsed { transform: rotate(-45deg) translateY(-1px); }
 
 /* Reduced header: title + quiet count on one line, controls on the next. */
 .headerCount { font-size: 12px; opacity: .5; margin-left: 2px; white-space: nowrap; }
@@ -226,3 +226,14 @@
 /* Project-level three-tier tree: outer card (the .section), inner levels are
    flat — indent + a hairline guide only, no nested card surfaces. */
 .projectNest { display: flex; flex-direction: column; margin: 2px 0 0 14px; border-left: 1px solid rgba(128,128,128,.14); }
+
+/* Drag handle + reorder states */
+.dragHandle { cursor: grab; opacity: .32; font-size: 11px; letter-spacing: 1px; padding: 0 4px; user-select: none; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 20px; align-self: center; }
+.dragHandle:active { cursor: grabbing; }
+.dragging { opacity: .45; }
+.dragOver { outline: 2px dashed var(--hub-model, #2f81f7); outline-offset: -2px; background: rgba(47,129,247,.07); }
+
+/* Scan list for 276-skill import — theme-agnostic, replaces inline styles */
+.scanList { max-height: 360px; overflow: auto; border: 0.5px solid rgba(128,128,128,.13); border-radius: 12px; margin-top: 8px; background: rgba(128,128,128,.06); }
+.scanProgressTrack { flex: 1; height: 6px; background: rgba(128,128,128,.13); border-radius: 4px; overflow: hidden; }
+.scanProgressFill { height: 100%; background: var(--hub-model, #2f81f7); transition: width .2s; }

package/src/client/panel/useSkillHub.ts

@@ -6,7 +6,7 @@
  * and tag-editor views without violating the rules of hooks.
  */
 
-import { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from 'react'
 import type {
   CatalogResponse,
   CatalogSkill,
@@ -16,6 +16,7 @@ import type {
   MarketCheckResponse,
   MarketSourceRecord,
   RepoDiscoverResponse,
+  RepoImportProgressResponse,
   RepoImportResponse,
   SkillDetail,
   SkillTag,
@@ -96,7 +97,9 @@ export function useSkillHub(api: SkillHubApi) {
   const [scanningRepo, setScanningRepo] = useState<string | null>(null)
   const [repoSelected, setRepoSelected] = useState<ReadonlySet<string>>(new Set())
   const [repoImporting, setRepoImporting] = useState(false)
-  const [repoResult, setRepoResult] = useState<RepoImportResponse | null>(null)
+  const [repoResult, setRepoResult] = useState<RepoImportProgressResponse | null>(null)
+  const [importJobId, setImportJobId] = useState<string | null>(null)
+  const pollAbortRef = useRef<AbortController | null>(null)
   const [search, setSearch] = useState('')
   /** 工作区（项目）路径；空 = 只看用户级技能。 */
   const [workspace, setWorkspace] = useState('')
@@ -132,6 +135,7 @@ export function useSkillHub(api: SkillHubApi) {
   const [conflictDialog, setConflictDialog] = useState<ConflictDialogState | null>(null)
   const [confirmDialog, setConfirmDialog] = useState<ConfirmDialogState | null>(null)
   const [deleteSkillDialog, setDeleteSkillDialog] = useState<string | null>(null)
+  const [deleteGroupDialog, setDeleteGroupDialog] = useState<{ name: string; skillNames: string[] } | null>(null)
   const [confirmClearTrash, setConfirmClearTrash] = useState(false)
   /** 「全部更新」确认对话框（市场 tab）。 */
   const [updateAllDialog, setUpdateAllDialog] = useState(false)
@@ -146,6 +150,7 @@ export function useSkillHub(api: SkillHubApi) {
   /** 项目级三级树里已细分（按 .dsh/.agents）的项目键。 */
   const [subdividedProjects, setSubdividedProjects] = useState<ReadonlySet<string>>(new Set())
   const [showLegend, setShowLegend] = useState(false)
+  const [editMode, setEditMode] = useState(false)
 
   const toggleGroupCollapse = useCallback((key: string): void => {
     setCollapsedGroups((previous) => {
@@ -483,7 +488,37 @@ export function useSkillHub(api: SkillHubApi) {
     }
   }, [api, deleteSkillDialog, load, loadGroups, loadSources])
 
-  // ----------------------------------------------------------- tag editing
+  /** 打开整组删除确认（来源分组一键删除）。 */
+  const requestDeleteGroup = useCallback((name: string, skillNames: string[]): void => {
+    setDeleteGroupDialog({ name, skillNames })
+  }, [])
+
+  /** 执行整组删除（逐个移入回收站，跳过只读）。 */
+  const runDeleteGroup = useCallback(async (): Promise<void> => {
+    const dialog = deleteGroupDialog
+    if (dialog === null) return
+    setDeleteGroupDialog(null)
+    setTagBusy(true)
+    setLoadError(null)
+    const failures: string[] = []
+    let done = 0
+    for (const name of dialog.skillNames) {
+      try {
+        await api.deleteSkill(name)
+        done += 1
+      } catch (error) {
+        // 只读/不存在的跳过并记录
+        failures.push(name + ': ' + errorMessage(error))
+      }
+    }
+    await Promise.all([load(), loadGroups(), loadSources()])
+    setTagBusy(false)
+    if (failures.length > 0) {
+      setLoadError(`删除整组 "${dialog.name}"：成功 ${done} 个，失败 ${failures.length} 个：` + failures.join('; '))
+    } else if (done > 0) {
+      setSuccessBanner(`已删除整组 "${dialog.name}"：${done} 个技能已移入回收站`)
+    }
+  }, [api, deleteGroupDialog, load, loadGroups, loadSources])
 
   /** 新建一个空 tag 分组。 */
   const createTag = useCallback(async (event: FormEvent): Promise<void> => {
@@ -535,6 +570,91 @@ export function useSkillHub(api: SkillHubApi) {
     }
   }, [api, applyTags])
 
+  /** 拖拽重排场景分组 */
+  const reorderTags = useCallback(async (orderedIds: string[]): Promise<void> => {
+    setTagBusy(true)
+    setLoadError(null)
+    try {
+      const tags = await api.reorderTags(orderedIds)
+      applyTags(tags)
+    } catch (error) {
+      const msg = errorMessage(error)
+      if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
+        // 旧宿主无此路由：本地重排
+        const byId = new Map(groupsState?.tags.map((t) => [t.id, t] as const) ?? [])
+        const reordered = orderedIds.map((id) => byId.get(id)).filter((t): t is NonNullable<typeof t> => t !== undefined)
+        if (reordered.length === orderedIds.length) {
+          applyTags(reordered as typeof groupsState extends { tags: infer T } ? T : never)
+          setSuccessBanner('已临时调整顺序（本地生效，重启宿主后持久化）')
+        } else {
+          setLoadError(msg)
+        }
+      } else {
+        setLoadError(msg)
+      }
+    } finally {
+      setTagBusy(false)
+    }
+  }, [api, applyTags, groupsState])
+
+  /** 拖拽重排来源集合 */
+  const reorderCollections = useCallback(async (orderedNames: string[]): Promise<void> => {
+    setTagBusy(true)
+    setLoadError(null)
+    try {
+      const collections = await api.reorderCollections(orderedNames)
+      setGroupsState((prev) => prev === null ? prev : { ...prev, collections })
+      void loadGroups()
+    } catch (error) {
+      const msg = errorMessage(error)
+      // 404 说明宿主仍在跑旧版（需重启后才有新路由），降级为本地即时生效
+      if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
+        setGroupsState((prev) => {
+          if (prev === null) return prev
+          const map = new Map(prev.collections.map((c) => [c.name, c] as const))
+          const reordered = orderedNames.map((n) => map.get(n)).filter((c): c is NonNullable<typeof c> => c !== undefined)
+          // 补上未在 orderedNames 中的集合（新出现的）
+          for (const c of prev.collections) if (!reordered.some((r) => r.name === c.name)) reordered.push(c)
+          return { ...prev, collections: reordered }
+        })
+        setSuccessBanner('已临时调整顺序（本地生效，重启宿主后持久化）')
+      } else {
+        setLoadError(msg)
+      }
+    } finally {
+      setTagBusy(false)
+    }
+  }, [api, loadGroups])
+
+  /** 拖拽重排来源顶层分组（project / col:xxx / personal 全量可拖） */
+  const reorderSourceGroups = useCallback(async (orderedKeys: string[]): Promise<void> => {
+    setTagBusy(true)
+    setLoadError(null)
+    try {
+      await api.reorderSourceGroups(orderedKeys)
+      await loadGroups()
+    } catch (error) {
+      const msg = errorMessage(error)
+      if (msg.includes('404') || msg.toLowerCase().includes('not found')) {
+        // 旧宿主无此路由：本地重排顶层顺序，提示重启后持久化
+        setGroupsState((prev) => {
+          if (prev === null) return prev
+          // 本地重排 collections 以匹配 topOrderedKeys 中的 col:xxx 顺序
+          const colOrder = orderedKeys.filter((k) => k.startsWith('col:')).map((k) => k.slice(4))
+          const map = new Map(prev.collections.map((c) => [c.name, c] as const))
+          const reordered = colOrder.map((n) => map.get(n)).filter((c): c is NonNullable<typeof c> => c !== undefined)
+          for (const c of prev.collections) if (!reordered.some((r) => r.name === c.name)) reordered.push(c)
+          return { ...prev, collections: reordered, sourceGroupOrder: orderedKeys }
+        })
+        setSuccessBanner('已临时调整顺序（本地生效，重启宿主后持久化）')
+      } else {
+        setLoadError(msg)
+      }
+    } finally {
+      setTagBusy(false)
+    }
+  }, [api, loadGroups])
+
   // -------------------------------------------------------------- market
 
   /** 添加一个市场源（内置市场目录与手动输入共用），并立即扫描它。 */
@@ -635,23 +755,110 @@ export function useSkillHub(api: SkillHubApi) {
     })
   }, [])
 
-  /** Import every checked, non-existing repo skill, then refresh the hub. */
+  /** Import every checked, non-existing repo skill (B方案：job+轮询+进度). */
   const importRepo = useCallback(async (): Promise<void> => {
     if (repoDiscoverState.status !== 'ready') return
     setRepoImporting(true)
     setRepoResult(null)
+    setImportJobId(null)
     setLoadError(null)
+    let finalProgress: RepoImportProgressResponse | null = null
     try {
-      const result = await api.repoImport(repoDiscoverState.data.repo, [...repoSelected], repoDiscoverState.data.ref ?? undefined)
-      setRepoResult(result)
+      const created = await api.repoImport(repoDiscoverState.data.repo, [...repoSelected], repoDiscoverState.data.ref ?? undefined)
+      setImportJobId(created.jobId)
+      // 初始占位，让进度卡片立刻出现（带真实 totalBytes）
+      setRepoResult({ ok: true, jobId: created.jobId, status: 'running', total: created.total, done: 0, totalBytes: created.totalBytes, downloadedBytes: 0, imported: [], skipped: [], failed: [] })
+      // 轮询直到 done/cancelled/error（800ms 起步 + 退避，避免 276 技能 900 次请求）
+      pollAbortRef.current?.abort()
+      pollAbortRef.current = new AbortController()
+      const signal = pollAbortRef.current.signal
+      let attempt = 0
+      for (;;) {
+        if (signal.aborted) break
+        const delay = Math.min(2000, 800 + attempt * 200)
+        await new Promise((r) => setTimeout(r, delay))
+        if (signal.aborted) break
+        try {
+          const progress = await api.repoImportProgress(created.jobId)
+          setRepoResult(progress)
+          finalProgress = progress
+          if (progress.status !== 'running') {
+            break
+          }
+          attempt = 0
+        } catch (pollError) {
+          // 轮询失败退避重试
+          const msg = errorMessage(pollError)
+          if (msg.includes('not found')) break
+          attempt += 1
+          if (attempt > 8) break
+        }
+      }
       await Promise.all([load(), loadMarket(), loadGroups(), loadSources()])
     } catch (error) {
       setLoadError(errorMessage(error))
     } finally {
+      // 导入完成后把已导入/已跳过的项从勾选中移除，并把扫描快照里的 existing 置为 true，避免“仍可勾选已导入”的错觉
+      if (finalProgress !== null && (finalProgress.imported.length > 0 || finalProgress.skipped.length > 0)) {
+        const doneNames = new Set([...finalProgress.imported.map((r) => r.name), ...finalProgress.skipped.map((r) => r.name)])
+        const donePaths = new Set(
+          repoDiscoverState.data.entries.filter((e) => doneNames.has(e.name)).map((e) => e.path),
+        )
+        setRepoSelected((prev) => {
+          const next = new Set(prev)
+          for (const p of donePaths) next.delete(p)
+          return next
+        })
+        setRepoDiscoverState((prev) => {
+          if (prev.status !== 'ready') return prev
+          return {
+            ...prev,
+            data: {
+              ...prev.data,
+              entries: prev.data.entries.map((e) => doneNames.has(e.name) ? { ...e, existing: true } : e),
+            },
+          }
+        })
+      }
       setRepoImporting(false)
     }
   }, [api, repoDiscoverState, repoSelected, load, loadMarket, loadGroups, loadSources])
 
+  // 卸载时中断轮询，避免泄露
+  useEffect(() => {
+    return () => { pollAbortRef.current?.abort() }
+  }, [])
+
+  /** 取消正在进行的导入（选项2：唯有取消才停） */
+  const cancelImport = useCallback(async (): Promise<void> => {
+    if (importJobId === null) return
+    pollAbortRef.current?.abort()
+    try {
+      const res = await api.repoImportCancel(importJobId)
+      // 立刻刷新一次进度
+      try {
+        const progress = await api.repoImportProgress(importJobId)
+        setRepoResult(progress)
+      } catch {
+        setRepoResult((prev) => prev !== null ? { ...prev, status: res.status as 'cancelled' } : prev)
+      }
+    } catch (error) {
+      setLoadError(errorMessage(error))
+    } finally {
+      setRepoImporting(false)
+    }
+  }, [api, importJobId])
+
+  /** 清空扫描结果（关闭归属卡片） */
+  const clearScan = useCallback((): void => {
+    setRepoDiscoverState({ status: 'idle' })
+    setScanningRepo(null)
+    setRepoResult(null)
+    setRepoSelected(new Set())
+    setImportJobId(null)
+    pollAbortRef.current?.abort()
+  }, [])
+
   /** 检查所有市场源的上游更新（服务端节流）。 */
   const checkMarket = useCallback(async (): Promise<void> => {
     try {
@@ -790,22 +997,22 @@ export function useSkillHub(api: SkillHubApi) {
 
   return {
     // state
-    catalog, loading, loadError, successBanner, updateState, repoDiscoverState, scanningRepo, repoSelected, repoImporting, repoResult,
+    catalog, loading, loadError, successBanner, updateState, repoDiscoverState, scanningRepo, repoSelected, repoImporting, repoResult, importJobId,
     search, workspace, detail, detailLoading, busyNames, batchBusy, showForm, formName, formDesc, formRoot, formBusy, formMessage,
     uses, hubConfig, tab, skillView, sourceFilter, sortKey, marketState, marketCheck, branchChoice, branchBusy,
     marketSyncDialog, syncingMarket, syncBusy, newSourceName, groupsState, sourcesState, sourceCheck, checkingSource, syncingSource,
-    conflictDialog, confirmDialog, deleteSkillDialog, confirmClearTrash, updateAllDialog, editingTag, editName, membersDraft, newTagName, tagBusy,
-    editSearch, collapsedGroups, subdividedProjects, showLegend,
+    conflictDialog, confirmDialog, deleteSkillDialog, deleteGroupDialog, confirmClearTrash, updateAllDialog, editingTag, editName, membersDraft, newTagName, tagBusy,
+    editSearch, collapsedGroups, subdividedProjects, showLegend, editMode,
     // derived
     actionNames, viewNames, normalized, origins, sourceOptions, filtered, sorted,
     // actions + setters
     setLoadError, setSuccessBanner, setSearch, setWorkspace, setDetail, setShowForm, setFormName, setFormDesc, setFormRoot, setFormMessage,
     setRepoSelected, setTab, setSkillView,
     setSourceFilter, setSortKey, setBranchChoice, setMarketSyncDialog, setNewSourceName, setConflictDialog, setConfirmDialog,
-    setDeleteSkillDialog, setConfirmClearTrash, setUpdateAllDialog, setEditingTag, setEditName, setMembersDraft, setNewTagName, setEditSearch, setShowLegend,
+    setDeleteSkillDialog, setDeleteGroupDialog, setConfirmClearTrash, setUpdateAllDialog, setEditingTag, setEditName, setMembersDraft, setNewTagName, setEditSearch, setShowLegend, setEditMode,
     toggleGroupCollapse, toggleSubdivide, checkUpdate, loadMarket, openDetail, toggle, enableDisabled, batchToggleNames, toggleGroup, resolveConflict,
-    runConfirmed, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, requestDeleteSkill, runDeleteSkill, createTag,
-    deleteTag, saveTag, addSource, addMarketSource, removeMarketSource, scanRepo, confirmBranchChoice, toggleRepoSelected, importRepo,
+    runConfirmed, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, requestDeleteSkill, runDeleteSkill, requestDeleteGroup, runDeleteGroup, createTag,
+    deleteTag, saveTag, reorderTags, reorderCollections, reorderSourceGroups, addSource, addMarketSource, removeMarketSource, scanRepo, confirmBranchChoice, toggleRepoSelected, importRepo, cancelImport, clearScan,
     checkMarket, syncMarketSource, confirmMarketSync, updateAll, create,
   }
 }