dsh-plugin 1.1.2 → 1.2.0

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

@@ -10,12 +10,13 @@
  */
 import { createElement as h } from 'react'
 import type { MouseEvent } from 'react'
-import styles from '../styles/Modal.module.css'
-import type { EnvInfo, HubPlugin, TaskState, ToastState, Translate } from '../types.ts'
-import { CloseIcon, CopyIcon, LinkIcon } from './icons.tsx'
+import styles from '../../styles/Modal.module.css'
+import type { EnvInfo, HubPlugin, TaskState, ToastState, Translate } from '../../types.ts'
+import { CloseIcon, CopyIcon, LinkIcon } from '../ui/icons.tsx'
 import { ProgressView } from './ProgressView.tsx'
-import { installCommandOf, pluginDetailUrl, pluginIssueUrl, pluginSiteUrl } from '../lib/catalog.ts'
-import { classifyFailure } from '../lib/failures.ts'
+import { installCommandOf } from '../../logic/install-command.ts'
+import { pluginDetailUrl, pluginIssueUrl, pluginSiteUrl } from '../../logic/urls.ts'
+import { classifyFailure, npmTooLowVersion } from '../../logic/failures.ts'
 
 /** 完成结果视图：绿色对勾 + 标题/描述；
  *  needsRestart=true（插件需重启才生效）→ 「稍后重启 / 立即重启」按钮对，点稍后重启后
@@ -56,7 +57,7 @@ function ResultView({
         h('div', { className: styles.resultRestarting }, restarting ? t('restarting') : t('restartHint')),
         h('div', { className: styles.modalActions },
           h('button', { className: styles.restartLater, onClick: onClose, disabled: restarting }, t('restartLater')),
-          h('button', { className: styles.restartNow, onClick: onRestart, disabled: restarting },
+          h('button', { className: styles.restartNowWarning, onClick: onRestart, disabled: restarting },
             restarting ? t('restarting') : t('restartNow')),
         ),
       ])
@@ -66,7 +67,13 @@ function ResultView({
 }
 
 export interface InstallModalProps {
-  plugin: HubPlugin
+  /** 目录插件（有完整元数据）；命令行安装（custom）传 null 走 customTarget 模式 */
+  plugin: HubPlugin | null
+  /** 命令行安装目标（无目录元数据）：提供时按裸目标展示确认/进度/结果，命令条显示 pnpm add <target> */
+  customTarget?: string
+  /** 全局 npm 安装（官方 README 的 `npm install -g <pkgs>`）：提供时按包列表展示确认/进度/结果，
+   *  命令条显示 npm install -g <pkgs> —— 装的是系统级 CLI 工具，不进插件列表、无需重启 */
+  globalNpm?: string[]
   done: boolean
   task: TaskState | null
   t: Translate
@@ -89,12 +96,14 @@ export interface InstallModalProps {
 /**
  * 信任确认弹窗：安装进入后台队列后弹窗仍可关闭（任务继续），
  * 只在本任务执行中展示实时进度；完成后切换为结果视图，与卸载一致。
+ * 目录插件与命令行安装（customTarget 模式）共用同一套确认/进度/结果流程。
  */
 export function InstallModal(props: InstallModalProps) {
-  const { plugin, done, task, t, langPath, restarting, submitting, update, cliOnly, needsRestart, onClose, onCopy, onInstall, onRestart } = props
+  const { plugin, customTarget, globalNpm, done, task, t, langPath, restarting, submitting, update, cliOnly, needsRestart, onClose, onCopy, onInstall, onRestart } = props
   const busy = submitting || (task !== null && (task.status === 'pending' || task.status === 'running'))
-  // 进行中标题带上插件名（中文「XX 插件安装中」；英文状态词在前更自然），并用状态色区分
-  const name = plugin.displayName ?? plugin.slug
+  // 进行中标题带上插件名（中文「XX 插件安装中」；英文状态词在前更自然），并用状态色区分；
+  // 命令行安装无插件元数据 → 直接用输入的目标展示；全局 npm 安装 → 包列表空格拼接
+  const name = customTarget ?? (globalNpm !== undefined && globalNpm.length > 0 ? globalNpm.join(' ') : undefined) ?? plugin?.displayName ?? plugin?.slug ?? ''
   const busyTitle = (label: string) => langPath === 'zh/' ? `${name} 插件${label}` : `${label} ${name}`
   const title = busy
     ? task && task.status === 'pending'
@@ -138,10 +147,9 @@ export function InstallModal(props: InstallModalProps) {
           h('div', { className: styles.trustHint }, t('confirmDesc')),
           h('div', { className: styles.modalRow },
             h('span', { className: styles.modalLabel }, t('confirmPlugin')),
-            h('span', { className: styles.modalValue, title: plugin.displayName ?? plugin.slug },
-              plugin.displayName ?? plugin.slug),
+            h('span', { className: styles.modalValue, title: name }, name),
           ),
-          plugin.source?.repo ? h('div', { className: styles.modalRow },
+          plugin?.source?.repo ? h('div', { className: styles.modalRow },
             h('span', { className: styles.modalLabel }, t('confirmSource')),
             // 来源仓库：可点击跳转官网收录详情页（新窗口打开）
             h('a', {
@@ -152,7 +160,8 @@ export function InstallModal(props: InstallModalProps) {
               title: plugin.source.repo,
             }, h(LinkIcon), plugin.source.repo),
           ) : null,
-          // 手动命令条：整条点击即复制，右侧再放一个显式复制按钮
+          // 手动命令条：整条点击即复制，右侧再放一个显式复制按钮；
+          // 命令行安装（无目录数据）直接展示 pnpm add <target>；全局 npm 安装展示 npm install -g <pkgs>
           h('div', {
             className: styles.modalCmd,
             onClick: onCopy,
@@ -160,9 +169,16 @@ export function InstallModal(props: InstallModalProps) {
             role: 'button',
             tabIndex: 0,
           },
-            h('span', { className: styles.modalCmdText }, installCommandOf(plugin)),
+            h('span', { className: styles.modalCmdText },
+              globalNpm !== undefined && globalNpm.length > 0
+                ? `npm install -g ${globalNpm.join(' ')}`
+                : customTarget ? `pnpm add ${customTarget}` : installCommandOf(plugin!)),
             h('span', { className: styles.modalCmdCopy }, h(CopyIcon), t('copyCmdLabel')),
           ),
+          // 全局 npm 安装说明：装的是系统级 CLI 工具，不进插件列表、无需重启宿主
+          globalNpm !== undefined && globalNpm.length > 0
+            ? h('div', { className: styles.cliOnlyHint }, t('globalNpmHint'))
+            : null,
           // AI 识别可能需要命令行辅助的插件（webInstallable=false）：提示但不拦截，仍允许尝试一键安装
           cliOnly ? h('div', { className: styles.cliOnlyHint }, t('cliOnlyHint')) : null,
           task && task.status === 'pending' ? h('div', { className: styles.queuedHint }, t('queuedHint')) : null,
@@ -272,21 +288,22 @@ export function UninstallModal(props: UninstallModalProps) {
           task && task.status === 'pending' ? h('div', { className: styles.queuedHint }, t('queuedHint')) : null,
           task ? h(ProgressView, { task }) : null,
           h('div', { className: styles.modalActions },
-            h('button', {
-              className: styles.modalCancel,
-              onClick: onCancel,
-            }, t('confirmCancel')),
             // 复制卸载命令：万一直接卸载失败，可去终端手动执行
             h('button', {
               className: styles.modalCopy,
               disabled: busy,
               onClick: onCopyCommand,
             }, t('copyUninstallCommand')),
+            // 确认框语义：取消动作需明确指向「卸载」，避免歧义
+            h('button', {
+              className: styles.modalCancel,
+              onClick: onCancel,
+            }, t('cancelUninstall')),
             h('button', {
               className: styles.uninstallConfirm,
               disabled: busy,
               onClick: onConfirm,
-            }, busy ? (task && task.status === 'pending' ? t('queuedUninstallTitle') : t('uninstalling')) : t('uninstall')),
+            }, busy ? (task && task.status === 'pending' ? t('queuedUninstallTitle') : t('uninstalling')) : t('uninstallConfirm')),
           ),
         ),
     ),
@@ -309,6 +326,16 @@ export function ErrorModal({ message, repo, kind, command, attempts, t, env, onC
 }) {
   // 失败归类：当前安装通道（npm/git）装不上 = 插件分发/依赖的问题，一律引导提 Issue
   const failureKind = classifyFailure(message)
+  // 服务端 [npm-too-low] 标记里带的本机 npm 版本（无标记为 null，提示文案降级为「怀疑」）
+  const npmVersion = npmTooLowVersion(message)
+  // 复制完整错误：实际执行/尝试过的安装命令（如有）+ 完整错误正文。
+  // 只复制 message 会丢上下文 —— 命令行安装输入的目标、执行过的命令都在 command/attempts 里，
+  // 光拷一句「unsupported install target」出去没人看得懂
+  const copyText = [
+    ...(command ? [command] : []),
+    ...(attempts ?? []),
+    message,
+  ].join('\n')
   return h('div', {
     className: styles.overlay,
     onClick: (e: MouseEvent<HTMLDivElement>) => {
@@ -341,33 +368,37 @@ export function ErrorModal({ message, repo, kind, command, attempts, t, env, onC
               title: repo,
             }, repo) : null,
             // 复制按钮放最上面、浅灰隐蔽；报错正文不允许鼠标选择复制，只能点这里
-            h('button', { className: styles.errorCopySoft, onClick: () => onCopy(message) }, t('errorCopy')),
+            h('button', { className: styles.errorCopySoft, onClick: () => onCopy(copyText) }, t('errorCopy')),
           ),
           // 报错信息完整展示（可滚动），比失败记录的预览看得更多
           h('pre', { className: styles.errorBox }, message),
-          // 插件问题（prepare 构建失败 / 原生依赖构建被拦截 / git 分发缺产物）：都是插件打包分发问题 —— 先说明原因，按钮在下方引导提 Issue
-          failureKind === 'pluginPrepare' || failureKind === 'pnpmIgnoredBuild'
-            ? h('div', null, [
-              // [packaging]（预检/装后校验拦截：git 分发缺产物）与
-              // prepare 构建脚本实际执行失败 / 原生依赖构建被 pnpm 拦截：都是插件打包分发问题 —— 先说明原因，按钮在下方提交
-              h('div', { className: styles.failPrepareHint }, failureKind === 'pnpmIgnoredBuild'
-                ? t('failIgnoredBuild')
-                : /\[packaging\]/i.test(message) ? t('failPackagingHint') : t('failPrepareHint')),
-              repo ? h('a', {
+          // npm 内部崩溃（edgesOut）＋ 本机 npm 版本过低：npm 自身已知缺陷，不是插件问题 ——
+          // 直接给升级指引，不引导提 Issue（提了也是 npm 的问题，插件作者无法修复）
+          failureKind === 'npmTooOld'
+            ? h('div', { className: styles.failPrepareHint },
+              t(npmVersion ? 'failNpmTooLowV' : 'failNpmTooLow', npmVersion ? { v: npmVersion } : undefined))
+            : failureKind === 'pluginPrepare' || failureKind === 'pnpmIgnoredBuild'
+              ? h('div', null, [
+                // [packaging]（预检/装后校验拦截：git 分发缺产物）与
+                // prepare 构建脚本实际执行失败 / 原生依赖构建被 pnpm 拦截：都是插件打包分发问题 —— 先说明原因，按钮在下方提交
+                h('div', { className: styles.failPrepareHint }, failureKind === 'pnpmIgnoredBuild'
+                  ? t('failIgnoredBuild')
+                  : /\[packaging\]/i.test(message) ? t('failPackagingHint') : t('failPrepareHint')),
+                repo ? h('a', {
+                  className: styles.failBigIssue,
+                  href: pluginIssueUrl(repo, message, env, command, attempts),
+                  target: '_blank',
+                  rel: 'noopener noreferrer',
+                  title: t('failIssueHint'),
+                }, t('failIssueBig')) : null,
+              ])
+              : repo ? h('a', {
                 className: styles.failBigIssue,
                 href: pluginIssueUrl(repo, message, env, command, attempts),
                 target: '_blank',
                 rel: 'noopener noreferrer',
                 title: t('failIssueHint'),
               }, t('failIssueBig')) : null,
-            ])
-            : repo ? h('a', {
-              className: styles.failBigIssue,
-              href: pluginIssueUrl(repo, message, env, command, attempts),
-              target: '_blank',
-              rel: 'noopener noreferrer',
-              title: t('failIssueHint'),
-            }, t('failIssueBig')) : null,
         ),
         h('div', { className: styles.modalActions },
           h('button', { className: styles.restartLater, onClick: onClose }, t('errorClose')),
@@ -384,10 +415,56 @@ export function Toast({ toast, t }: { toast: ToastState; t: Translate }) {
       : toast.kind === 'done' ? t('installDone')
         : toast.kind === 'fail' ? t('installFail')
           : toast.kind === 'removed' ? t('uninstallDone')
-            : t('uninstallFail')
-  const fail = toast.kind === 'fail' || toast.kind === 'removeFail'
+            : toast.kind === 'revealFail' ? t('openFolderFail')
+              : toast.kind === 'updates' ? t('updatesFound', { n: toast.n ?? 0 })
+                  : t('uninstallFail')
+  const fail = toast.kind === 'fail' || toast.kind === 'removeFail' || toast.kind === 'revealFail'
   return h('div', {
     key: toast.id,
     className: fail ? `${styles.toast} ${styles.toastFail}` : styles.toast,
   }, text)
 }
+
+/** 待重启确认弹窗：已安装列表行内「重启」按钮点击后弹出，
+ *  与通知中心待重启条目同一交互（说明 + 稍后重启 / 立即重启），
+ *  避免行内按钮误触直接触发宿主重启。 */
+export function RestartConfirmModal({ t, restarting, onClose, onRestartNow }: {
+  t: Translate
+  restarting: boolean
+  onClose: () => void
+  onRestartNow: () => void
+}) {
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => { if (e.target === e.currentTarget) onClose() },
+  },
+    h('div', { className: styles.modal, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        h('div', { className: styles.modalTitle }, t('sectionPendingRestart')),
+        h('button', {
+          className: styles.modalClose,
+          type: 'button',
+          'aria-label': t('errorClose'),
+          onClick: onClose,
+        }, h(CloseIcon)),
+      ),
+      h('div', { className: styles.modalBody },
+        h('div', { className: styles.failPrepareHint }, t('restartHint')),
+        h('div', { className: styles.modalActions },
+          h('button', {
+            className: styles.restartLater,
+            type: 'button',
+            disabled: restarting,
+            onClick: onClose,
+          }, t('restartLater')),
+          h('button', {
+            className: styles.restartNowWarning,
+            type: 'button',
+            disabled: restarting,
+            onClick: onRestartNow,
+          }, restarting ? t('restarting') : t('restartNow')),
+        ),
+      ),
+    ),
+  )
+}

package/src/client/components/{Dropdown.tsx → ui/Dropdown.tsx}

@@ -3,14 +3,17 @@
  * Website: https://dsh-plugin.org
  * GitHub: https://github.com/dshplugin/dsh-plugin-hub
  *
- * Custom dropdown (native <select> replacement).
+ * Button-style dropdown (native <select> replacement).
  *
- * macOS/浏览器原生下拉无法跟随宿主主题，这里自绘：触发器按钮 + 绝对定位面板，
- * 点外部/Esc 关闭；选项 hover 加重底色、激活项深色实心高亮，全部走 --dsw-alias-* 主题变量。
+ * The trigger is a compact toolbar button — hairline border + subtle grey
+ * fill + current value + chevron — so it sits naturally next to the other
+ * toolbar buttons and takes a single slot of horizontal space. Clicking
+ * outside or pressing Esc closes the panel; options get a hover fill and
+ * the active one a brand highlight, all driven by the --hub-* tokens.
  */
 import { createElement as h, useEffect, useRef, useState } from 'react'
 import type { JSX } from 'react'
-import styles from '../styles/Dropdown.module.css'
+import styles from '../../styles/Dropdown.module.css'
 import { ChevronDownIcon } from './icons.tsx'
 
 export interface DropdownOption<T extends string> {
@@ -25,9 +28,11 @@ interface DropdownProps<T extends string> {
   options: DropdownOption<T>[]
   onChange: (value: T) => void
   title?: string
+  /** 额外挂到根节点上的类名（如 margin 微调） */
+  className?: string
 }
 
-export function Dropdown<T extends string>({ value, options, onChange, title }: DropdownProps<T>): JSX.Element {
+export function Dropdown<T extends string>({ value, options, onChange, title, className }: DropdownProps<T>): JSX.Element {
   const [open, setOpen] = useState(false)
   const rootRef = useRef<HTMLDivElement | null>(null)
 
@@ -50,7 +55,10 @@ export function Dropdown<T extends string>({ value, options, onChange, title }:
 
   const current = options.find((o) => o.value === value)
 
-  return h('div', { className: styles.dropdown, ref: rootRef },
+  return h('div', {
+    className: className ? `${styles.dropdown} ${className}` : styles.dropdown,
+    ref: rootRef,
+  },
     h('button', {
       className: styles.dropdownBtn,
       type: 'button',

package/src/client/components/ui/Toggle.tsx

@@ -0,0 +1,28 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Compact switch used by the settings rows. Native-button based so it is
+ * keyboard focusable and announces state via aria-checked; styling driven
+ * by the --hub-* tokens (on = brand fill, off = neutral track).
+ */
+import { createElement as h } from 'react'
+import styles from '../../styles/Toggle.module.css'
+
+export function Toggle({ checked, onChange, title, disabled }: {
+  checked: boolean
+  onChange: (next: boolean) => void
+  title?: string
+  disabled?: boolean
+}) {
+  return h('button', {
+    type: 'button',
+    role: 'switch',
+    'aria-checked': checked,
+    disabled,
+    title,
+    className: checked ? styles.toggleOn : styles.toggle,
+    onClick: () => onChange(!checked),
+  }, h('span', { className: styles.knob }))
+}