dsh-skill-hub 0.2.6 → 0.3.1

package/src/client/panel/SkillHubPanel.tsx

@@ -24,7 +24,6 @@ import { TagEditorView } from './TagEditorView.tsx'
 import { SourcesView } from './SourcesView.tsx'
 import { ScenesView } from './ScenesView.tsx'
 import { MarketView } from './MarketView.tsx'
-import { DisabledRow } from './DisabledRow.tsx'
 import { BranchChoiceDialog, ConfirmDialog, ConflictDialog, MarketSyncDialog } from './dialogs.tsx'
 import { useSkillHub } from './useSkillHub.ts'
 import css from './panel.module.css'
@@ -42,14 +41,14 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
     formRoot, formBusy, formMessage, hubConfig, tab, skillView, sourceFilter, sortKey, search,
     workspace, setWorkspace,
     sourcesState, tagBusy, busyNames, normalized, origins, sourceOptions, filtered,
-    conflictDialog, confirmDialog, deleteSkillDialog, confirmClearTrash, branchChoice, branchBusy, marketSyncDialog,
+    conflictDialog, confirmDialog, deleteSkillDialog, deleteGroupDialog, confirmClearTrash, branchChoice, branchBusy, marketSyncDialog,
     syncBusy, editingTag, editName, membersDraft, editSearch, uses, groupsState, sourceCheck, checkingSource, syncingSource,
-    showLegend,
+    showLegend, editMode,
     setLoadError, setSuccessBanner, setDetail, setShowForm, setFormName, setFormDesc, setFormRoot, setFormMessage, setTab,
-    setSkillView, setSourceFilter, setSortKey, setSearch, setConflictDialog, setConfirmDialog, setDeleteSkillDialog,
+    setSkillView, setSourceFilter, setSortKey, setSearch, setConflictDialog, setConfirmDialog, setDeleteSkillDialog, setDeleteGroupDialog,
     setConfirmClearTrash, setBranchChoice, setMarketSyncDialog, setEditingTag, setEditName, setMembersDraft, setEditSearch,
-    setShowLegend,
-    checkUpdate, loadMarket, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, runDeleteSkill,
+    setShowLegend, setEditMode,
+    checkUpdate, loadMarket, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, runDeleteSkill, runDeleteGroup,
     runConfirmed, resolveConflict, confirmBranchChoice, confirmMarketSync, create, saveTag, deleteTag, enableDisabled,
   } = hub
 
@@ -236,6 +235,7 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
               <option value='uses'>{tt('sort.uses')}</option>
             </select>
             <input className={css.search} value={search} onChange={(event) => { setSearch(event.target.value) }} placeholder={tt('panel.search')} />
+            <button type='button' className={css.button + (editMode ? ' ' + css.primary : '')} style={{ marginLeft:'auto' }} onClick={() => setEditMode((v) => !v)}>{editMode ? '完成' : '编辑'}</button>
           </div>
 
           {filtered.length === 0 && search.trim() !== '' ? <div className={css.empty}>{tt('panel.empty')}</div> : null}
@@ -263,19 +263,6 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
             </section>
           ) : null}
 
-          {catalog.disabled.length > 0 ? (
-            <section className={css.section}>
-              <div className={css.sectionTitle}>{tt('panel.disabled')}</div>
-              {catalog.disabled
-                .filter((record) =>
-                  (normalized.length === 0 || record.name.toLocaleLowerCase().includes(normalized) || record.description.toLocaleLowerCase().includes(normalized))
-                  && (sourceFilter === 'all' || (origins[record.name] ?? PRIVATE_SOURCE) === sourceFilter))
-                .map((record) => (
-                  <DisabledRow key={record.name} record={record} busy={busyNames.has(record.name)} onEnable={() => { void enableDisabled(record) }} />
-                ))}
-            </section>
-          ) : null}
-
           {catalog.diagnostics.length > 0 ? (
             <section className={css.section}>
               <div className={css.sectionTitle}>{tt('panel.diagnostics')}</div>
@@ -349,6 +336,18 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
         />
       ) : null}
 
+      {deleteGroupDialog !== null ? (
+        <ConfirmDialog
+          title={tt('source.deleteGroupTitle')}
+          text={tt('source.deleteGroupText', { name: deleteGroupDialog.name, count: deleteGroupDialog.skillNames.length })}
+          items={deleteGroupDialog.skillNames}
+          confirmLabel={tt('source.deleteGroup')}
+          danger
+          onCancel={() => { setDeleteGroupDialog(null) }}
+          onConfirm={() => { void runDeleteGroup() }}
+        />
+      ) : null}
+
       {confirmClearTrash ? (
         <ConfirmDialog
           title={tt('source.clearTrashConfirmTitle')}

package/src/client/panel/SkillRow.tsx

@@ -50,14 +50,6 @@ export function SkillRow(props: { skill: CatalogSkill; hub: SkillHubState }): JS
       </div>
       {skill.writable
         ? <>
-            <button
-              type='button'
-              className={css.opBtn + ' ' + css.opDanger + ' ' + css.iconBtn}
-              disabled={hub.busyNames.has(skill.name) || hub.tagBusy}
-              title={tt('row.delete')}
-              aria-label={tt('row.delete')}
-              onClick={(event) => { event.stopPropagation(); hub.requestDeleteSkill(skill.name) }}
-            ><IconTrashOutline16 size={14} /></button>
             <button
               type='button'
               role='switch'
@@ -67,6 +59,14 @@ export function SkillRow(props: { skill: CatalogSkill; hub: SkillHubState }): JS
               disabled={hub.busyNames.has(skill.name)}
               onClick={(event) => { event.stopPropagation(); void hub.toggle(skill, false) }}
             ><span className={css.switchThumb} /></button>
+            {hub.editMode ? <button
+              type='button'
+              className={css.opBtn + ' ' + css.opDanger + ' ' + css.iconBtn}
+              disabled={hub.busyNames.has(skill.name) || hub.tagBusy}
+              title={tt('row.delete')}
+              aria-label={tt('row.delete')}
+              onClick={(event) => { event.stopPropagation(); hub.requestDeleteSkill(skill.name) }}
+            ><IconTrashOutline16 size={14} /></button> : null}
           </>
         : <span className={css.badge + ' ' + css.badgeReadonly}>{tt('row.readonly')}</span>}
     </div>

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; }