dsh-plugin 1.1.2 → 1.2.1

package/src/client/components/{CatalogList.tsx → catalog/CatalogList.tsx}

@@ -9,12 +9,13 @@
  * not mistaken for a no-op update.
  */
 import { createElement as h, useEffect, useRef } from 'react'
-import styles from '../styles/List.module.css'
-import type { HubPlugin, LocaleId, Translate } from '../types.ts'
-import { SITE_URL } from '../lib/catalog.ts'
+import styles from '../../styles/List.module.css'
+import type { HubPlugin, LocaleId, Translate } from '../../types.ts'
+import { SITE_URL } from '../../logic/constants.ts'
+import { useIncrementalList } from '../../hooks/useIncrementalList.ts'
 import { PluginCard } from './PluginCard.tsx'
 
-export function CatalogList({ plugins, failed, visible, total, t, langPath, reload, category, installedFilter, copied, installedName, installedVersion, hasUpdate, langKey, onInstall, onUninstall }: {
+export function CatalogList({ plugins, failed, visible, total, t, langPath, reload, category, copied, installedName, installedVersion, hasUpdate, langKey, onInstall, onUninstall }: {
   plugins: HubPlugin[] | null
   failed: boolean
   visible: HubPlugin[]
@@ -23,7 +24,6 @@ export function CatalogList({ plugins, failed, visible, total, t, langPath, relo
   langPath: string
   reload: () => void
   category: string
-  installedFilter: 'all' | 'installed' | 'notInstalled'
   copied: string | null
   installedName: (p: HubPlugin) => string | null
   installedVersion: (p: HubPlugin) => string | null
@@ -34,10 +34,12 @@ export function CatalogList({ plugins, failed, visible, total, t, langPath, relo
 }) {
   /** 列表滚动容器：分类/搜索切换后列表内容替换但 scrollTop 保留，会让用户误以为列表没更新，需重置回顶部 */
   const listRef = useRef<HTMLDivElement | null>(null)
+  /** 增量渲染：全量目录太大（4400+），只渲染首批，滚动接近底部时自动追加下一批 */
+  const { shown, hasMore, sentinelRef } = useIncrementalList(visible)
 
   useEffect(() => {
     listRef.current?.scrollTo({ top: 0 })
-  }, [category, installedFilter])
+  }, [category])
 
   return h('div', { className: styles.body },
     h('div', { ref: listRef, className: styles.list },
@@ -51,7 +53,7 @@ export function CatalogList({ plugins, failed, visible, total, t, langPath, relo
         h('div', { className: styles.stateTitle }, t('noResult')),
         h('div', { className: styles.stateDesc }, t('noResultDesc')),
       ),
-      plugins !== null && !failed && visible.map((p) => h(PluginCard, {
+      plugins !== null && !failed && shown.map((p) => h(PluginCard, {
         // 唯一 key：数据重构后同一 slug 可能对应多个作者仓库，仅用 slug 会撞 key，
         // 导致切换分类时 React 复用旧 DOM、列表不刷新。
         key: p.ownerSlug ? `${p.ownerSlug}/${p.slug}` : p.slug,
@@ -66,6 +68,8 @@ export function CatalogList({ plugins, failed, visible, total, t, langPath, relo
         onInstall,
         onUninstall,
       })),
+      // 滚动加载哨兵：透明 1px 元素，进入视口即触发下一批渲染（加载是纯追加，无需按钮）
+      hasMore && h('div', { ref: sentinelRef, className: styles.moreSentinel, 'aria-hidden': 'true' }),
     ),
     plugins !== null && !failed && h('div', { className: styles.footer },
       h('a', {

package/src/client/components/{PluginCard.tsx → catalog/PluginCard.tsx}

@@ -8,10 +8,11 @@
  * uninstall actions.
  */
 import { createElement as h } from 'react'
-import styles from '../styles/List.module.css'
-import type { HubPlugin, LocaleId, Translate } from '../types.ts'
-import { CATEGORY_LABELS, categoryLabel, pluginDetailUrl } from '../lib/catalog.ts'
-import { fmtStars, relTime } from '../lib/format.ts'
+import styles from '../../styles/List.module.css'
+import type { HubPlugin, LocaleId, Translate } from '../../types.ts'
+import { CATEGORY_LABELS, categoryLabel } from '../../logic/constants.ts'
+import { pluginDetailUrl } from '../../logic/urls.ts'
+import { fmtStars, relTime } from '../../logic/format.ts'
 
 export function PluginCard({ plugin: p, copied, installedName, installedVersion, hasUpdate, t, langKey, langPath, onInstall, onUninstall }: {
   plugin: HubPlugin

package/src/client/components/layout/CatalogControls.tsx

@@ -0,0 +1,80 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Toolbar above the market list:
+ * row 1 — full-width search input;
+ * row 2 — result count on the left, sort segmented control on the right
+ * (mirrors the Installed view: clicking the same sort toggles
+ * ascending/descending, a new sort uses its default order; the active
+ * button shows an up/down arrow for the current direction).
+ */
+import { createElement as h, Fragment } from 'react'
+import type { FormEvent, ReactNode } from 'react'
+import styles from '../../styles/Header.module.css'
+import type { Translate } from '../../types.ts'
+import { SORTS } from '../../logic/constants.ts'
+import type { SortKey } from '../../logic/constants.ts'
+import { SortArrowIcon } from '../ui/icons.tsx'
+
+/** 单选按钮组中的一个按钮（segmented control，与已安装视图排序按钮同款） */
+function SegBtn({ active, onClick, label, icon }: {
+  active: boolean
+  onClick: () => void
+  label: string
+  icon?: ReactNode
+}) {
+  return h('button', {
+    type: 'button',
+    className: active ? `${styles.segBtn} ${styles.segBtnActive}` : styles.segBtn,
+    'aria-pressed': active,
+    onClick,
+  }, label, icon)
+}
+
+export function CatalogControls({ query, setQuery, sort, sortDir, toggleSort, t, resultText }: {
+  query: string
+  setQuery: (value: string) => void
+  sort: SortKey
+  /** 当前排序方向：决定激活排序按钮上的箭头朝上(正序)/朝下(倒序) */
+  sortDir: 'asc' | 'desc'
+  toggleSort: (value: SortKey) => void
+  t: Translate
+  resultText: string | null
+}) {
+  return h(Fragment, null,
+    // 第一行：搜索框占满整行（搜插件名称、描述、标签）
+    h('div', { className: styles.searchRow },
+      h('input', {
+        className: styles.search,
+        type: 'search',
+        placeholder: t('search'),
+        value: query,
+        spellCheck: false,
+        onInput: (e: FormEvent<HTMLInputElement>) =>
+          setQuery((e.target as HTMLInputElement).value),
+      }),
+    ),
+    // 第二行：左侧筛选结果数「结果 N 条插件」（数字等宽预留 5 位不跳动），
+    // 右侧排序按钮组（与已安装视图同款 segmented control，激活按钮带正/倒序箭头）
+    h('div', { className: styles.controls },
+      resultText ? h('span', { className: styles.resultSeg },
+        ...resultText.split(/(\d+)/).map((part, i) =>
+          /^\d+$/.test(part)
+            ? h('span', { key: i, className: styles.resultCount }, part)
+            : part)) : null,
+      h('div', { className: styles.sortGroup },
+        h('span', { className: styles.segLabel }, t('sortByLabel')),
+        h('div', { className: styles.segGroup, role: 'radiogroup', 'aria-label': t('sortAria') },
+          SORTS.map((key) => SegBtn({
+            active: sort === key,
+            onClick: () => toggleSort(key),
+            label: t(key),
+            icon: sort === key ? h(SortArrowIcon, { up: sortDir === 'asc' }) : null,
+          })),
+        ),
+      ),
+    ),
+  )
+}

package/src/client/components/{CatalogHeader.tsx → layout/CatalogHeader.tsx}

@@ -7,10 +7,10 @@
  * by the purple ad banner that promotes the catalog stats.
  */
 import { createElement as h, Fragment } from 'react'
-import styles from '../styles/Header.module.css'
-import type { Translate } from '../types.ts'
-import { GITHUB_URL, PLUGIN_VERSION, SITE_URL } from '../lib/catalog.ts'
-import { GitHubIcon, LogoIcon } from './icons.tsx'
+import styles from '../../styles/Header.module.css'
+import type { Translate } from '../../types.ts'
+import { GITHUB_URL, PLUGIN_VERSION, SITE_URL } from '../../logic/constants.ts'
+import { GitHubIcon, LogoIcon } from '../ui/icons.tsx'
 
 export function CatalogHeader({ t, langPath, statsTotal, statsVerified, onToggleLang, hubUpdate, onVersionClick, onAboutClick }: {
   t: Translate

package/src/client/components/{CategoryTabs.tsx → layout/CategoryTabs.tsx}

@@ -8,9 +8,9 @@
  * carry no counts so their widths stay uniform.
  */
 import { createElement as h } from 'react'
-import styles from '../styles/Header.module.css'
-import type { LocaleId } from '../types.ts'
-import { CATEGORY_ORDER, CATEGORY_SHORT_LABELS, categoryLabel } from '../lib/catalog.ts'
+import styles from '../../styles/Header.module.css'
+import type { LocaleId } from '../../types.ts'
+import { CATEGORY_ORDER, CATEGORY_SHORT_LABELS, categoryLabel } from '../../logic/constants.ts'
 
 export function CategoryTabs({ category, setCategory, allLabel, totalCount, langKey }: {
   category: string

package/src/client/components/layout/SectionTabs.tsx

@@ -0,0 +1,60 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Primary navigation: a compact segmented control switching between the
+ * four top-level sections — Market (browse), Installed (manage), Custom
+ * (manual command installs) and Settings (network sources & preferences).
+ * Kept visually distinct from the category chips so the hierarchy reads:
+ * section → category → plugin.
+ */
+import { createElement as h } from 'react'
+import styles from '../../styles/SectionTabs.module.css'
+import { BellIcon, InstalledIcon, MarketIcon, SettingsIcon, TerminalIcon } from '../ui/icons.tsx'
+
+export type SectionView = 'market' | 'installed' | 'custom' | 'settings'
+
+const ORDER: Array<{ id: SectionView; labelKey: string; hintKey: string; Icon: () => ReturnType<typeof h> }> = [
+  { id: 'market', labelKey: 'viewMarket', hintKey: 'viewMarketHint', Icon: MarketIcon },
+  { id: 'installed', labelKey: 'viewInstalled', hintKey: 'viewInstalledHint', Icon: InstalledIcon },
+  { id: 'custom', labelKey: 'viewCustom', hintKey: 'viewCustomHint', Icon: TerminalIcon },
+  { id: 'settings', labelKey: 'viewSettings', hintKey: 'viewSettingsHint', Icon: SettingsIcon },
+]
+
+export function SectionTabs({ view, setView, installedCount, t, noticeCount, onOpenNotifications }: {
+  view: SectionView
+  setView: (value: SectionView) => void
+  installedCount: number
+  t: (key: string) => string
+  /** 通知中心红圈计数（记录 + 进行中任务 + 待重启）；0 时不显示徽标 */
+  noticeCount: number
+  /** 点击打开通知中心 */
+  onOpenNotifications: () => void
+}) {
+  return h('div', { className: styles.root, role: 'tablist' },
+    ORDER.map(({ id, labelKey, hintKey, Icon }) => h('button', {
+      key: id,
+      role: 'tab',
+      'aria-selected': view === id,
+      title: t(hintKey),
+      className: view === id ? styles.tabActive : styles.tab,
+      onClick: () => setView(id),
+    },
+      h('span', { className: styles.tabIcon }, h(Icon)),
+      t(labelKey),
+      id === 'installed' && installedCount > 0
+        ? h('span', { className: view === id ? styles.tabCountActive : styles.tabCount }, installedCount)
+        : null)),
+    // 通知入口：设置在最后一个 tab 后边，靠右对齐 —— 铃铛 + 红底白字计数（内联跟在铃铛后，不悬浮）
+    h('button', {
+      type: 'button',
+      className: styles.noticeBtn,
+      onClick: onOpenNotifications,
+      title: t('notificationsHint'),
+      'aria-label': t('notificationsHint'),
+    },
+      h('span', { className: styles.noticeIcon }, h(BellIcon)),
+      noticeCount > 0 ? h('span', { className: styles.noticeCount }, noticeCount > 99 ? '99+' : String(noticeCount)) : null),
+  )
+}

package/src/client/components/{AboutModal.tsx → modals/AboutModal.tsx}

@@ -3,18 +3,18 @@
  * Website: https://dsh-plugin.org
  * GitHub: https://github.com/dshplugin/dsh-plugin-hub
  *
- * 头部「关注我们」弹窗：介绍 DSH-Plugin Hub 是干什么的 + 用户反馈群二维码。
+ * 头部「关注我们」弹窗：介绍 DSH-Plugin Hub 的功能定位 + 用户反馈群二维码。
  * 内容以 Markdown 形式由 dsh-update Worker 的 /about 接口下发（key = hub:about），
- * 作者想怎么写就怎么写、随写随推，客户端只负责渲染 —— 非写死。
+ * 客户端按接口返回渲染，不内置固定文案。
  * 图片（反馈群二维码）经 renderMarkdown 的 ![](url) 语法嵌入，居中、最大高度受控。
  */
 import { createElement as h } from 'react'
 import type { MouseEvent } from 'react'
-import styles from '../styles/Modal.module.css'
-import type { HubAboutInfo } from '../lib/catalog.ts'
-import type { LocaleId, Translate } from '../types.ts'
-import { renderMarkdown } from '../lib/renderMarkdown.ts'
-import { CloseIcon } from './icons.tsx'
+import styles from '../../styles/Modal.module.css'
+import type { HubAboutInfo } from '../../types.ts'
+import type { LocaleId, Translate } from '../../types.ts'
+import { renderMarkdown } from '../../logic/renderMarkdown.ts'
+import { CloseIcon } from '../ui/icons.tsx'
 
 export function AboutModal({ info, lang, t, onClose }: {
   info: HubAboutInfo | null

package/src/client/components/{HubUpdateModal.tsx → modals/HubUpdateModal.tsx}

@@ -12,11 +12,11 @@
  */
 import { createElement as h } from 'react'
 import type { MouseEvent } from 'react'
-import styles from '../styles/Modal.module.css'
-import type { HubUpdateInfo } from '../lib/catalog.ts'
-import type { LocaleId, Translate } from '../types.ts'
-import { renderMarkdown } from '../lib/renderMarkdown.ts'
-import { CloseIcon } from './icons.tsx'
+import styles from '../../styles/Modal.module.css'
+import type { HubUpdateInfo } from '../../types.ts'
+import type { LocaleId, Translate } from '../../types.ts'
+import { renderMarkdown } from '../../logic/renderMarkdown.ts'
+import { CloseIcon } from '../ui/icons.tsx'
 
 export function HubUpdateModal({ info, lang, t, hasUpdate, onProceed, onClose }: {
   info: HubUpdateInfo

package/src/client/components/modals/InstalledDetailModal.tsx

@@ -0,0 +1,193 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Installed-plugin detail dialog: opens from the Installed view (row click
+ * or the detail button) and shows everything we know about an installed
+ * entry — the catalog metadata (category, catalog entry, stars/forks,
+ * latest version) merged with the host runtime facts (install path, installed
+ * version, install time, last update). Update / uninstall actions are
+ * offered from here too, mirroring the row actions.
+ */
+import { createElement as h } from 'react'
+import type { MouseEvent } from 'react'
+import styles from '../../styles/Modal.module.css'
+import type { LocaleId, Translate } from '../../types.ts'
+import type { InstalledItem } from '../../logic/installed.ts'
+import { CATEGORY_LABELS, categoryLabel } from '../../logic/constants.ts'
+import { pluginDetailUrl } from '../../logic/urls.ts'
+import { fmtStars } from '../../logic/format.ts'
+import { CloseIcon, CopyIcon, FolderIcon, LinkIcon } from '../ui/icons.tsx'
+
+/** ISO 安装时间 → 本地可读；非法值返回 null（行内不显示）。 */
+function fmtDate(iso: string | null, lang: LocaleId): string | null {
+  if (!iso) return null
+  const d = new Date(iso)
+  return Number.isNaN(d.getTime()) ? null : d.toLocaleString(lang === 'en' ? 'en-US' : 'zh-CN')
+}
+
+export function InstalledDetailModal({ item, t, lang, langPath, onClose, onUpdate, onUninstall, onCopyPath, onReveal }: {
+  item: InstalledItem
+  t: Translate
+  lang: LocaleId
+  langPath: string
+  onClose: () => void
+  /** 更新：仅目录插件且有更新时展示（点击后关闭详情、走安装确认弹窗的更新语义） */
+  onUpdate: (item: InstalledItem) => void
+  onUninstall: (item: InstalledItem) => void
+  /** 复制安装路径：成功提示由调用方 toast 反馈 */
+  onCopyPath: (path: string) => void
+  /** 在系统文件管理器里定位安装目录（服务端 spawn open）：失败提示由调用方 toast 反馈 */
+  onReveal: (item: InstalledItem) => void
+}) {
+  const p = item.plugin
+  const name = p?.displayName ?? item.name
+  const installedAt = fmtDate(item.installedAt, lang)
+  // 最后更新：目录插件取仓库最近提交时间（live 数据）；自定义安装无目录信号
+  const lastUpdated = fmtDate(p?.dates?.repoUpdatedAt ?? null, lang)
+  const hasUpdate = item.hasUpdate && item.plugin !== null
+
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose()
+    },
+  },
+    h('div', { className: `${styles.modal} ${styles.detailModal}`, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        h('div', { className: styles.modalTitle }, name),
+        h('button', {
+          className: styles.modalClose,
+          'aria-label': t('confirmCancel'),
+          onClick: onClose,
+        }, h(CloseIcon)),
+      ),
+      h('div', { className: styles.modalBody },
+        // 描述：目录收录的插件简介
+        p?.description ? h('div', { className: styles.modalDesc }, p.description) : null,
+        // 有可用更新：醒目提示条（版本号存在时给出升级路径）
+        hasUpdate
+          ? h('div', { className: styles.detailUpdateHint },
+            item.installedVersion && item.catalogVersion
+              ? t('versionUpHint', { from: item.installedVersion, to: item.catalogVersion })
+              : t('updateAvailableHint'))
+          : null,
+        // 详情信息网格：分类 / 状态 / 版本 / 收录入口 / 包名 / 统计 / 安装路径 / 安装时间 / 最后更新
+        h('div', { className: styles.detailGrid },
+          p?.category
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('detailCategory')),
+              h('span', { className: styles.detailValue },
+                categoryLabel(CATEGORY_LABELS, p.category, lang)))
+            : null,
+          h('div', { className: styles.detailRow },
+            h('span', { className: styles.detailLabel }, t('statusLabel')),
+            h('span', { className: styles.detailValue },
+              h('span', {
+                className: item.loaded ? styles.detailStatusRunning : styles.detailStatusPending,
+                'aria-hidden': 'true',
+              }),
+              h('span', { className: styles.detailStatusText },
+                item.loaded ? t('statusRunning') : t('statusPending')))),
+          item.installedVersion
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('installedVersionLabel')),
+              h('span', { className: styles.detailValue },
+                h('span', { className: styles.detailMono }, item.installedVersion),
+                // 目录有更新版本且与已装版本不同：给出「→ 目录最新」
+                item.catalogVersion && item.catalogVersion !== item.installedVersion
+                  ? h('span', { className: styles.detailArrow },
+                    '\u2192', h('span', { className: styles.detailMono }, item.catalogVersion),
+                    h('span', { className: styles.detailDim }, t('catalogLatest')))
+                  : null))
+            : null,
+          // 收录入口：仓库名 → 官网详情页（目录插件跳收录页；自定义安装回退到 GitHub 仓库）
+          item.repo
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('detailCatalog')),
+              h('a', {
+                className: styles.detailLink,
+                href: p ? pluginDetailUrl(p, langPath) : `https://github.com/${item.repo}`,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                title: item.repo,
+              }, h(LinkIcon), item.repo))
+            : null,
+          item.plugin?.source?.npmPackage
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('packageName')),
+              h('span', { className: styles.detailValue },
+                h('span', { className: styles.detailMono }, item.plugin.source.npmPackage)))
+            : null,
+          p?.stats && (p.stats.stargazers_count ?? 0) > 0
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('detailStats')),
+              h('span', { className: styles.detailValue },
+                h('span', { className: styles.detailStars }, '\u2605 ', fmtStars(p.stats.stargazers_count)),
+                h('span', { className: styles.detailDim }, t('fork'), ' ', fmtStars(p.stats.forks_count))))
+            : null,
+          item.installPath
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('installPath')),
+              h('div', { className: styles.detailPath },
+                // 整条点击复制路径（等宽文本省略号）
+                h('span', {
+                  className: styles.detailPathText,
+                  title: t('copyPath'),
+                  onClick: () => onCopyPath(item.installPath!),
+                }, item.installPath),
+                h('span', { className: styles.detailPathActions },
+                  h('button', {
+                    className: styles.detailPathBtn,
+                    type: 'button',
+                    title: t('copyPath'),
+                    onClick: (e: MouseEvent<HTMLButtonElement>) => {
+                      e.stopPropagation()
+                      onCopyPath(item.installPath!)
+                    },
+                  }, h(CopyIcon)),
+                  h('button', {
+                    className: styles.detailPathBtn,
+                    type: 'button',
+                    title: t('openFolder'),
+                    onClick: (e: MouseEvent<HTMLButtonElement>) => {
+                      e.stopPropagation()
+                      onReveal(item)
+                    },
+                  }, h(FolderIcon)),
+                )))
+            : null,
+          installedAt
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('installedAtLabel')),
+              h('span', { className: styles.detailValue }, installedAt))
+            : null,
+          // 最后更新时间：与安装时间成对展示（目录插件才有）
+          lastUpdated
+            ? h('div', { className: styles.detailRow },
+              h('span', { className: styles.detailLabel }, t('lastUpdatedLabel')),
+              h('span', { className: styles.detailValue }, lastUpdated))
+            : null,
+        ),
+      ),
+      // 底部操作：完成 / 更新 / 卸载（复制路径与打开文件夹已在路径行内）
+      h('div', { className: styles.modalActions },
+        h('button', {
+          className: styles.restartLater,
+          onClick: onClose,
+        }, t('done')),
+        hasUpdate
+          ? h('button', {
+            className: styles.modalInstall,
+            onClick: () => onUpdate(item),
+          }, t('update'))
+          : null,
+        h('button', {
+          className: styles.uninstallConfirm,
+          onClick: () => onUninstall(item),
+        }, t('uninstall')),
+      ),
+    ),
+  )
+}