dsh-plugin 1.0.0 → 1.1.1

package/src/client/components/HubUpdateModal.tsx

@@ -0,0 +1,84 @@
+/**
+ * Hub 版本信息 / 自我更新说明弹窗：
+ *  - 有更新（hasUpdate=true）：标题「有新版本」，展示新版本号、发布时间与 Worker 下发的
+ *    Markdown 变更记录（renderMarkdown 渲染，双语言按界面语言取 {zh,en} 对象），
+ *    按钮「稍后再说 / 直接更新」，确认后进入安装弹窗执行覆盖重装。
+ *  - 无更新（hasUpdate=false）：标题「当前版本」，展示当前版本信息与更新记录，已是最新。
+ * 点击头部版本号（或「可更新」徽标）打开 —— 无论有无更新都能看到更新内容。
+ */
+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'
+
+export function HubUpdateModal({ info, lang, t, hasUpdate, onProceed, onClose }: {
+  info: HubUpdateInfo
+  lang: LocaleId
+  t: Translate
+  /** 是否有可用更新：有则显示「直接更新」，无则显示「已是最新」 */
+  hasUpdate: boolean
+  /** 点「直接更新」：关闭本弹窗，进入安装弹窗的更新流程 */
+  onProceed: () => void
+  onClose: () => void
+}) {
+  // 变更记录：字符串直接使用；{zh,en} 对象按界面语言取，缺哪种补哪种，全缺则不出记录区
+  const notesRaw = typeof info.notes === 'string'
+    ? info.notes
+    : info.notes && typeof info.notes === 'object'
+      ? lang === 'en'
+        ? (info.notes.en ?? info.notes.zh ?? '')
+        : (info.notes.zh ?? info.notes.en ?? '')
+      : ''
+  const notesHtml = notesRaw.trim() ? renderMarkdown(notesRaw) : null
+  // 发布时间：ISO 字符串转本地可读格式；非法值静默隐藏
+  let published: string | null = null
+  if (info.publishedAt) {
+    const d = new Date(info.publishedAt)
+    if (!Number.isNaN(d.getTime())) {
+      published = d.toLocaleString(lang === 'en' ? 'en-US' : 'zh-CN')
+    }
+  }
+
+  return h('div', {
+    className: styles.overlay,
+    onClick: (e: MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose()
+    },
+  },
+    h('div', { className: `${styles.modal} ${styles.hubUpdateModal}`, role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: styles.modalHead },
+        h('div', { className: styles.modalTitle }, t(hasUpdate ? 'hubUpdateTitle' : 'hubCurrentTitle')),
+        h('button', {
+          className: styles.modalClose,
+          'aria-label': t('confirmCancel'),
+          onClick: () => onClose(),
+        }, h(CloseIcon)),
+      ),
+      h('div', { className: styles.modalDesc },
+        t(hasUpdate ? 'hubUpdateDesc' : 'hubCurrentDesc', { version: info.version })),
+      h('div', { className: styles.hubUpdateMeta },
+        h('span', { className: styles.hubUpdateMetaItem }, `${t('version')} ${info.version}`),
+        published
+          ? h('span', { className: styles.hubUpdateMetaItem }, `${t('hubUpdatePublished')} ${published}`)
+          : null,
+      ),
+      notesHtml
+        ? h('div', {
+          className: styles.hubUpdateNotes,
+          dangerouslySetInnerHTML: { __html: notesHtml },
+        })
+        : null,
+      h('div', { className: styles.modalActions },
+        hasUpdate
+          ? [
+            h('button', { className: styles.restartLater, onClick: onClose }, t('hubUpdateLater')),
+            h('button', { className: styles.modalInstall, onClick: onProceed }, t('updateNow')),
+          ]
+          : h('button', { className: styles.modalInstall, onClick: onClose }, t('hubUpToDate')),
+      ),
+    ),
+  )
+}

package/src/client/components/NotificationsModal.tsx

@@ -19,12 +19,11 @@ import type { PendingRestart, QueueTask } from '../hooks/useTaskQueue.ts'
 import { pluginIssueUrl, pluginSiteUrl } from '../lib/catalog.ts'
 import { CloseIcon } from './icons.tsx'
 
-/** 记录时间紧凑展示：今年内 MM-DD HH:mm，跨年补年份前缀。 */
+/** 记录时间完整展示：YYYY-MM-DD HH:mm:ss（每条通知都带精确到秒的时间戳）。 */
 function fmtTime(at: number): string {
   const d = new Date(at)
   const pad = (n: number) => String(n).padStart(2, '0')
-  const mmdd = `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
-  return d.getFullYear() === new Date().getFullYear() ? mmdd : `${d.getFullYear()}-${mmdd}`
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
 }
 
 /** 圆形状态徽标内的白色图形：成功为对勾、失败为叉。 */
@@ -52,7 +51,7 @@ function BadgeGlyph({ ok }: { ok: boolean }) {
     }))
 }
 
-export function NotificationsModal({ records, tasks, pendingRestarts, t, env, onClose, onCopy, onClear, cancelTask, restarting, onRestart }: {
+export function NotificationsModal({ records, tasks, pendingRestarts, t, env, onClose, onCopy, onClear, onRemove, cancelTask, restarting, onRestart }: {
   records: NotificationRecord[]
   /** 进行中的安装/卸载任务（实时进度，与队列弹窗同一数据源） */
   tasks: QueueTask[]
@@ -63,6 +62,8 @@ export function NotificationsModal({ records, tasks, pendingRestarts, t, env, on
   onClose: () => void
   onCopy: (text: string) => void
   onClear: () => void
+  /** 删除单条通知记录 */
+  onRemove: (id: number) => void
   cancelTask: (id: number) => void
   restarting: boolean
   onRestart: () => void
@@ -155,65 +156,90 @@ export function NotificationsModal({ records, tasks, pendingRestarts, t, env, on
           ? h('div', { className: styles.failEmpty }, t('notificationsEmpty'))
           : h('div', { className: styles.noticeList },
             records.map((r) => {
-              return h('div', { key: r.id, className: styles.noticeRow },
-              h('div', {
-                className: r.ok ? styles.noticeBadgeOk : styles.noticeBadgeFail,
-              }, h(BadgeGlyph, { ok: r.ok })),
-              h('div', { className: styles.noticeMain },
-                h('div', { className: styles.noticeHead },
-                  h('span', {
-                    className: r.ok ? styles.noticeTextOk : styles.noticeTextFail,
-                  }, r.ok
-                    ? (r.kind === 'install' ? t('installDone') : t('uninstallDone'))
-                    : (r.kind === 'install' ? t('errorTitleInstall') : t('errorTitleUninstall'))),
-                  r.repo
-                    ? h('a', {
-                      className: styles.failRepo,
-                      // 跳转到官网详情页（含插件收录信息），不在通知弹窗直接跳 GitHub
-                      href: pluginSiteUrl(r.repo),
+              return h('div', {
+                key: r.id,
+                className: r.ok ? `${styles.noticeRow} ${styles.noticeRowOk}` : styles.noticeRow,
+              },
+              h('div', { className: styles.noticeRowMain },
+                h('div', {
+                  className: r.ok ? styles.noticeBadgeOk : styles.noticeBadgeFail,
+                }, h(BadgeGlyph, { ok: r.ok })),
+                h('div', { className: styles.noticeMain },
+                  h('div', { className: styles.noticeHead },
+                    h('span', {
+                      className: r.ok ? styles.noticeTextOk : styles.noticeTextFail,
+                    }, r.ok
+                      ? (r.kind === 'install' ? t('installDone') : t('uninstallDone'))
+                      : (r.kind === 'install' ? t('errorTitleInstall') : t('errorTitleUninstall'))),
+                    r.repo
+                      ? h('a', {
+                        className: styles.failRepo,
+                        // 跳转到官网详情页（含插件收录信息），不在通知弹窗直接跳 GitHub
+                        href: pluginSiteUrl(r.repo),
+                        target: '_blank',
+                        rel: 'noopener noreferrer',
+                        title: r.repo,
+                      }, r.repo)
+                      : null,
+                    !r.ok && h('button', {
+                      className: styles.failCopy,
+                      onClick: () => onCopy(r.message),
+                    }, t('failCopy')),
+                    // 成功通知：时间戳并入本行右侧，与图标/文字垂直居中 ——
+                    // 不再单独占底部一行，卡片只有一行内容，图标文字整体居中不顶头
+                    r.ok
+                      ? h('span', {
+                        className: styles.noticeTime,
+                        title: new Date(r.at).toLocaleString(),
+                      }, fmtTime(r.at))
+                      : null,
+                    // 每条通知右侧的删除按钮：单独移除这一条
+                    h('button', {
+                      className: styles.noticeRemove,
+                      'aria-label': t('removeNotification'),
+                      title: t('removeNotification'),
+                      onClick: (e: MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onRemove(r.id) },
+                    }, h(CloseIcon)),
+                  ),
+                  // 每条失败记录是一个独立卡片：头部（状态/仓库/时间/复制完整日志）→ 修复或提 Issue 动作。
+                  // 卡片不展示错误日志预览，完整日志靠「复制完整日志」按钮带走，避免每条卡片被日志撑高
+                  !r.ok && (() => {
+                    const kind = classifyFailure(r.message)
+                    if (kind === 'pluginPrepare' || kind === 'pnpmIgnoredBuild') {
+                      // [packaging]（预检/装后校验拦截：git 分发缺产物）与
+                      // prepare 构建脚本实际执行失败 / 原生依赖构建被 pnpm 拦截：都是插件打包分发问题 —— 先说明原因，按钮在下方提交
+                      return h('div', null, [
+                        h('div', { className: styles.failPrepareHint }, kind === 'pnpmIgnoredBuild'
+                          ? t('failIgnoredBuild')
+                          : /\[packaging\]/i.test(r.message) ? t('failPackagingHint') : t('failPrepareHint')),
+                        r.repo ? h('a', {
+                          className: styles.failBigIssue,
+                          href: pluginIssueUrl(r.repo, r.message, env, r.command, r.attempts),
+                          target: '_blank',
+                          rel: 'noopener noreferrer',
+                          title: t('failIssueHint'),
+                        }, t('failIssueBig')) : null,
+                      ])
+                    }
+                    return r.repo ? h('a', {
+                      className: styles.failBigIssue,
+                      href: pluginIssueUrl(r.repo, r.message, env, r.command, r.attempts),
                       target: '_blank',
                       rel: 'noopener noreferrer',
-                      title: r.repo,
-                    }, r.repo)
-                    : null,
+                      title: t('failIssueHint'),
+                    }, t('failIssueBig')) : null
+                  })(),
+                ),
+              ),
+              // 失败通知：时间戳保留独立底部行（右下角）；成功通知已并入头部行右侧
+              !r.ok
+                ? h('div', { className: styles.noticeFoot },
                   h('span', {
-                    className: styles.failTime,
+                    className: styles.noticeTime,
                     title: new Date(r.at).toLocaleString(),
                   }, fmtTime(r.at)),
-                  !r.ok && h('button', {
-                    className: styles.failCopy,
-                    onClick: () => onCopy(r.message),
-                  }, t('failCopy')),
-                ),
-                // 每条失败记录是一个独立卡片：头部（状态/仓库/时间/复制完整日志）→ 修复或提 Issue 动作。
-                // 卡片不展示错误日志预览，完整日志靠「复制完整日志」按钮带走，避免每条卡片被日志撑高
-                !r.ok && (() => {
-                  const kind = classifyFailure(r.message)
-                  if (kind === 'pluginPrepare' || kind === 'pnpmIgnoredBuild') {
-                    // [packaging]（预检/装后校验拦截：git 分发缺产物，不支持官方默认安装方式）与
-                    // prepare 构建脚本实际执行失败 / 原生依赖构建被 pnpm 拦截：都是插件打包分发问题 —— 先说明原因，按钮在下方提交
-                    return h('div', null, [
-                      h('div', { className: styles.failPrepareHint }, kind === 'pnpmIgnoredBuild'
-                        ? t('failIgnoredBuild')
-                        : /\[packaging\]/i.test(r.message) ? t('failPackagingHint') : t('failPrepareHint')),
-                      r.repo ? h('a', {
-                        className: styles.failBigIssue,
-                        href: pluginIssueUrl(r.repo, r.message, env),
-                        target: '_blank',
-                        rel: 'noopener noreferrer',
-                        title: t('failIssueHint'),
-                      }, t('failIssueBig')) : null,
-                    ])
-                  }
-                  return r.repo ? h('a', {
-                    className: styles.failBigIssue,
-                    href: pluginIssueUrl(r.repo, r.message, env),
-                    target: '_blank',
-                    rel: 'noopener noreferrer',
-                    title: t('failIssueHint'),
-                  }, t('failIssueBig')) : null
-                })(),
-              ),
+                )
+                : null,
             )
             }),
           ),

package/src/client/components/PluginCard.tsx

@@ -84,6 +84,9 @@ export function PluginCard({ plugin: p, copied, installedName, installedVersion,
                 disabled: true,
                 title: t('installed'),
               }, t('installed')))
+            // 未安装：按钮恒为「安装」，点击先弹信任确认；AI 识别为「可能需要命令行辅助」
+            // 的插件（webInstallable=false）不拦截，允许尝试一键安装，弹窗内会给出提示与
+            // 复制命令通道，安装失败时引导去 dsh 终端手动执行
             : h('button', {
               className: isCopied ? styles.installBtnCopied : styles.installBtn,
               // 文字恒定避免按钮宽度变化导致卡片跳动；点击先弹信任确认，

package/src/client/components/PluginHubSection.tsx

@@ -8,13 +8,15 @@ import { createElement as h, useEffect, useState } from 'react'
 import styles from '../styles/Header.module.css'
 import { en, zh } from '../locales.ts'
 import type { EnvInfo, HubPlugin, LocaleId, SectionProps, ToastState } from '../types.ts'
-import { langPathOf } from '../lib/catalog.ts'
+import { langPathOf, installCommandOf, HUB_REPO, PLUGIN_VERSION } from '../lib/catalog.ts'
 import { getEnv } from '../lib/env.ts'
 import { useCatalog } from '../hooks/useCatalog.ts'
 import { useTaskQueue } from '../hooks/useTaskQueue.ts'
 import { ErrorModal, InstallModal, UninstallModal, Toast } from './modals.tsx'
+import { AboutModal } from './AboutModal.tsx'
+import { HubUpdateModal } from './HubUpdateModal.tsx'
 import { NotificationsModal } from './NotificationsModal.tsx'
-import { addFailure, addSuccess, clearNotifications, loadNotifications } from '../lib/failures.ts'
+import { addFailure, addSuccess, clearNotifications, loadNotifications, removeNotification } from '../lib/failures.ts'
 import type { NotificationRecord } from '../lib/failures.ts'
 import { CatalogHeader } from './CatalogHeader.tsx'
 import { CategoryTabs } from './CategoryTabs.tsx'
@@ -48,15 +50,23 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
   const [confirmPlugin, setConfirmPlugin] = useState<HubPlugin | null>(null)
   /** 弹窗动作是否为「更新」：已安装插件点「更新」→ 走同一条 add 命令原位覆盖重装，文案区分安装/更新 */
   const [confirmIsUpdate, setConfirmIsUpdate] = useState(false)
+  /** Hub 自我更新说明弹窗：点「可更新」徽标先展示版本 + Markdown 变更记录，确认后再进安装弹窗 */
+  const [showHubUpdate, setShowHubUpdate] = useState(false)
+  /** 「关注我们」弹窗：GitHub 图标后按钮点击打开，展示平台介绍 + 用户反馈群二维码（Worker /about 推送） */
+  const [showAbout, setShowAbout] = useState(false)
   /** 卸载确认弹窗：记录待卸载的插件 */
   const [uninstallPlugin, setUninstallPlugin] = useState<HubPlugin | null>(null)
   /** 安装/卸载完成后的结果视图：停留弹窗内，点「完成」关闭 */
   const [installDone, setInstallDone] = useState(false)
   const [uninstallDone, setUninstallDone] = useState(false)
+  /** 结果视图是否给「立即重启」：服务端任务终态带出（卸载时 loader 已即时移除 → false 只给「完成」；
+   *  true 时通知中心待重启条目同步常驻，直到用户点「立即重启」真正重启后才消失） */
+  const [installNeedsRestart, setInstallNeedsRestart] = useState(true)
+  const [uninstallNeedsRestart, setUninstallNeedsRestart] = useState(true)
   /** 结果视图「立即重启」：请求宿主重启后进入等待，服务回来后整页刷新 */
   const [restarting, setRestarting] = useState(false)
-  /** 操作失败完整信息 + 所属插件仓库 + 失败类型（决定弹窗标题「安装失败/卸载失败」） */
-  const [errorMsg, setErrorMsg] = useState<{ message: string; repo: string | null; kind: 'install' | 'uninstall' } | null>(null)
+  /** 操作失败完整信息 + 所属插件仓库 + 失败类型（决定弹窗标题「安装失败/卸载失败」）+ 实际执行的安装命令 + 尝试过的安装方式（issue 预填用） */
+  const [errorMsg, setErrorMsg] = useState<{ message: string; repo: string | null; kind: 'install' | 'uninstall'; command?: string; attempts?: string[] } | null>(null)
   /** 安装/卸载任务通知记录：localStorage 持久化，成败即落盘，即使错过弹窗也能回来查看 */
   const [notifications, setNotifications] = useState<NotificationRecord[]>(() => loadNotifications())
   const [showNotifications, setShowNotifications] = useState(false)
@@ -71,21 +81,23 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
   const queue = useTaskQueue({
     t,
     refreshInstalled: catalog.refreshInstalled,
-    onInstallDone: (viaModal, repo) => {
+    onInstallDone: (viaModal, repo, needsRestart) => {
+      setInstallNeedsRestart(needsRestart)
       if (viaModal) setInstallDone(true)
       else setToast({ id: Date.now(), kind: 'done' })
       // 安装成功也写入通知记录：通知中心里成功与失败都能看到
       setNotifications(addSuccess({ kind: 'install', repo: repo ?? '' }))
     },
-    onUninstallDone: (viaModal, repo) => {
+    onUninstallDone: (viaModal, repo, needsRestart) => {
+      setUninstallNeedsRestart(needsRestart)
       if (viaModal) setUninstallDone(true)
       else setToast({ id: Date.now(), kind: 'removed' })
       setNotifications(addSuccess({ kind: 'uninstall', repo: repo ?? '' }))
     },
-    onError: (message, repo, kind) => {
-      setErrorMsg({ message, repo, kind })
+    onError: (message, repo, kind, command, attempts) => {
+      setErrorMsg({ message, repo, kind, command, attempts })
       // 失败自动写入通知记录：任务在后台结束时没人盯着也能留痕
-      setNotifications(addFailure({ kind, repo: repo ?? '', message }))
+      setNotifications(addFailure({ kind, repo: repo ?? '', message, command, attempts }))
     },
     installPlugin: confirmPlugin,
     uninstallPlugin,
@@ -97,20 +109,22 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
     },
   })
 
-  // 信任/卸载/通知记录弹窗打开时按 Esc 关闭；任务进入后台队列后可随时关闭（任务继续）
+  // 信任/卸载/更新说明/通知记录弹窗打开时按 Esc 关闭；任务进入后台队列后可随时关闭（任务继续）
   useEffect(() => {
-    if (!confirmPlugin && !uninstallPlugin && !showNotifications) return
+    if (!confirmPlugin && !uninstallPlugin && !showNotifications && !showHubUpdate && !showAbout) return
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         setConfirmPlugin(null)
         setUninstallPlugin(null)
         setUninstallDone(false)
+        setShowHubUpdate(false)
+        setShowAbout(false)
         setShowNotifications(false)
       }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [confirmPlugin, uninstallPlugin, showNotifications])
+  }, [confirmPlugin, uninstallPlugin, showNotifications, showHubUpdate, showAbout])
 
   // Toast 统一自动消失
   useEffect(() => {
@@ -144,10 +158,10 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
     }
   }
 
-  /** 弹窗动作一：复制安装命令到剪贴板，引导去终端粘贴执行。 */
+  /** 弹窗动作一：复制安装命令到剪贴板，引导去终端粘贴执行（npm 通道显示包名命令）。 */
   const copyCommand = async (p: HubPlugin) => {
     const repo = p.source?.repo ?? ''
-    const ok = await doCopy(`dsh plugin add github:${repo}`)
+    const ok = await doCopy(installCommandOf(p))
     if (ok) {
       setCopied(repo)
       setToast({ id: Date.now(), kind: 'copied' })
@@ -204,6 +218,10 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
 
   const count = catalog.visible.length
 
+  // Hub 自身条目（目录数据里的 dshplugin/dsh-plugin-hub）：头部「可更新」徽标的更新目标。
+  // 目录可能尚未加载（此时 hubEntry 为 null，徽标不渲染，加载完成后自然出现）。
+  const hubEntry = catalog.plugins?.find((p) => p.source?.repo === HUB_REPO) ?? null
+
   return h('div', { className: styles.root },
     h(CatalogHeader, {
       t,
@@ -211,6 +229,12 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
       statsTotal,
       statsVerified,
       onToggleLang: () => setManualLang(lang === 'en' ? 'zh' : 'en'),
+      // Hub 自身版本信息入口：版本号常驻可点（无更新也看得到当前版本更新内容），
+      // 有可用更新时版本号后紧跟红色「可更新」徽标（同一入口），点击都打开同一个更新说明弹窗。
+      // 有更新弹窗显示新版本 + Markdown 变更记录，点「直接更新」进安装弹窗覆盖重装。
+      hubUpdate: catalog.hubHasUpdate,
+      onVersionClick: () => setShowHubUpdate(true),
+      onAboutClick: () => setShowAbout(true),
     }),
     h(CategoryTabs, {
       category: catalog.category,
@@ -270,6 +294,34 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
         setUninstallPlugin(p)
       },
     }),
+    // Hub 版本信息弹窗：版本号/徽标点击打开 —— 有更新显示新版本 + 变更记录 + 「直接更新」，
+    // 无更新显示当前版本 + 记录 + 「已是最新」。Worker 拉取失败时兜底展示当前版本号。
+    showHubUpdate && h(HubUpdateModal, {
+      info: catalog.hubUpdateInfo ?? { version: PLUGIN_VERSION },
+      lang,
+      t,
+      hasUpdate: catalog.hubHasUpdate,
+      onClose: () => setShowHubUpdate(false),
+      onProceed: () => {
+        setShowHubUpdate(false)
+        // 与列表内更新同一流程：覆盖重装 dsh-plugin + 结果视图「立即重启」
+        if (hubEntry) {
+          setInstallDone(false)
+          setConfirmIsUpdate(true)
+          queue.clearModalTask()
+          setConfirmPlugin(hubEntry)
+        }
+      },
+    }),
+    // 「关注我们」弹窗：GitHub 图标后按钮点击打开 —— 平台介绍 + 用户反馈群二维码，
+    // 内容由 dsh-update Worker 的 /about 接口以 Markdown 形式推送，作者随时可改，非写死。
+    // Worker 未推送（info 为 null）时弹窗仍能打开并展示兜底文案，不影响其他功能。
+    showAbout && h(AboutModal, {
+      info: catalog.hubAboutInfo ?? null,
+      lang,
+      t,
+      onClose: () => setShowAbout(false),
+    }),
     // 安装确认弹窗：锁定/进度/结果视图逻辑收敛在 modals.tsx；更新与安装同入口，仅标记 update
     confirmPlugin && h(InstallModal, {
       plugin: confirmPlugin,
@@ -279,7 +331,10 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
       langPath,
       restarting,
       update: confirmIsUpdate,
+      // 仅命令行插件（webInstallable=false）：弹窗只展示命令供复制，不提供一键安装
+      cliOnly: confirmPlugin.install?.webInstallable === false,
       submitting: queue.submitting,
+      needsRestart: installNeedsRestart,
       onClose: () => setConfirmPlugin(null),
       onCopy: () => copyCommand(confirmPlugin),
       onInstall: () => queue.installNow(confirmPlugin, confirmIsUpdate ? { update: true } : undefined),
@@ -294,6 +349,7 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
       langPath,
       restarting,
       submitting: queue.submitting,
+      needsRestart: uninstallNeedsRestart,
       onClose: () => {
         setUninstallDone(false)
         setUninstallPlugin(null)
@@ -309,6 +365,8 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
       message: errorMsg.message,
       repo: errorMsg.repo,
       kind: errorMsg.kind,
+      command: errorMsg.command,
+      attempts: errorMsg.attempts,
       t,
       env,
       onCopy: (text: string) => {
@@ -331,6 +389,7 @@ export function PluginHubSection({ t: _hostT, locale }: SectionProps) {
         setToast({ id: Date.now(), kind: 'errCopied' })
       },
       onClear: () => setNotifications(clearNotifications()),
+      onRemove: (id: number) => setNotifications(removeNotification(id)),
       cancelTask: queue.cancelTask,
       restarting,
       onRestart: () => { void requestRestart() },

package/src/client/components/modals.tsx

@@ -10,17 +10,21 @@ 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 { ProgressView } from './ProgressView.tsx'
-import { pluginDetailUrl, pluginIssueUrl, pluginSiteUrl } from '../lib/catalog.ts'
+import { installCommandOf, pluginDetailUrl, pluginIssueUrl, pluginSiteUrl } from '../lib/catalog.ts'
 import { classifyFailure } from '../lib/failures.ts'
 
-/** 完成结果视图：绿色对勾 + 标题/描述 + 「稍后重启 / 立即重启」按钮对（部分插件需重启后才会挂载） */
+/** 完成结果视图：绿色对勾 + 标题/描述；
+ *  needsRestart=true（插件需重启才生效）→ 「稍后重启 / 立即重启」按钮对，点稍后重启后
+ *  通知中心待重启条目常驻（服务端登记，内存态），直到用户点「立即重启」真正重启后才消失；
+ *  needsRestart=false（卸载已即时生效）→ 仅「完成」关闭。 */
 function ResultView({
-  title, desc, t, restarting, onRestart, onClose,
+  title, desc, t, restarting, needsRestart, onRestart, onClose,
 }: {
   title: string
   desc: string
   t: Translate
   restarting: boolean
+  needsRestart: boolean
   onRestart: () => void
   onClose: () => void
 }) {
@@ -42,13 +46,18 @@ function ResultView({
       })),
     ),
     h('div', { className: styles.resultTitle }, title),
-    h('div', { className: styles.resultDesc }, desc),
-    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 },
-        restarting ? t('restarting') : t('restartNow')),
-    ),
+    desc ? h('div', { className: styles.resultDesc }, desc) : null,
+    needsRestart
+      ? h('div', null, [
+        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 },
+            restarting ? t('restarting') : t('restartNow')),
+        ),
+      ])
+      : h('div', { className: styles.modalActions },
+        h('button', { className: styles.restartNow, onClick: onClose }, t('done'))),
   )
 }
 
@@ -61,8 +70,12 @@ export interface InstallModalProps {
   restarting: boolean
   /** 已安装插件的覆盖更新（走同一条 add 命令原位重装，文案区分安装/更新） */
   update: boolean
+  /** 仅命令行插件（webInstallable=false）：不提供一键安装，只展示命令供复制到 dsh 终端 */
+  cliOnly: boolean
   /** 安装请求在途（fetch 等待响应）：此时任务尚未入队，需禁用确认按钮防止二次点击 */
   submitting: boolean
+  /** 完成结果是否需重启才生效：true → 「稍后重启 / 立即重启」；false → 仅「完成」 */
+  needsRestart: boolean
   onClose: () => void
   onCopy: () => void
   onInstall: () => void
@@ -74,7 +87,7 @@ export interface InstallModalProps {
  * 只在本任务执行中展示实时进度；完成后切换为结果视图，与卸载一致。
  */
 export function InstallModal(props: InstallModalProps) {
-  const { plugin, done, task, t, langPath, restarting, submitting, update, onClose, onCopy, onInstall, onRestart } = props
+  const { plugin, 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
@@ -112,6 +125,7 @@ export function InstallModal(props: InstallModalProps) {
           desc: update ? t('updateResultDesc') : t('installResultDesc'),
           t,
           restarting,
+          needsRestart,
           onRestart,
           onClose,
         })
@@ -142,11 +156,15 @@ export function InstallModal(props: InstallModalProps) {
             role: 'button',
             tabIndex: 0,
           },
-            h('span', { className: styles.modalCmdText }, `dsh plugin add github:${plugin.source?.repo ?? ''}`),
+            h('span', { className: styles.modalCmdText }, installCommandOf(plugin)),
             h('span', { className: styles.modalCmdCopy }, h(CopyIcon), t('copyCmdLabel')),
           ),
+          // AI 识别可能需要命令行辅助的插件（webInstallable=false）：提示但不拦截，仍允许尝试一键安装
+          cliOnly ? h('div', { className: styles.cliOnlyHint }, t('cliOnlyHint')) : null,
           task && task.status === 'pending' ? h('div', { className: styles.queuedHint }, t('queuedHint')) : null,
           task ? h(ProgressView, { task }) : null,
+          // 安装失败：引导用户复制上方命令到 dsh 终端手动安装（如 node-pty 等原生依赖构建脚本需人工放行）
+          task && task.status === 'failed' ? h('div', { className: styles.failedCopyHint }, t('failedCopyHint')) : null,
           h('div', { className: styles.modalActions },
             h('button', {
               className: styles.modalCopy,
@@ -177,6 +195,8 @@ export interface UninstallModalProps {
   restarting: boolean
   /** 卸载请求在途（fetch 等待响应）：此时任务尚未入队，需禁用确认按钮防止二次点击 */
   submitting: boolean
+  /** 完成结果是否需重启才生效：true → 「稍后重启 / 立即重启」；false（loader 已即时移除）→ 仅「完成」 */
+  needsRestart: boolean
   onClose: () => void
   onCancel: () => void
   onCopyCommand: () => void
@@ -186,7 +206,7 @@ export interface UninstallModalProps {
 
 /** 卸载确认弹窗：确认/进行中（后台队列，可关闭）；完成后切换为结果视图（成功即生效，仅「完成」关闭）。 */
 export function UninstallModal(props: UninstallModalProps) {
-  const { plugin, done, task, t, langPath, restarting, submitting, onClose, onCancel, onCopyCommand, onConfirm, onRestart } = props
+  const { plugin, done, task, t, langPath, restarting, submitting, needsRestart, onClose, onCancel, onCopyCommand, onConfirm, onRestart } = props
   const busy = submitting || (task !== null && (task.status === 'pending' || task.status === 'running'))
   // 进行中标题带上插件名，与安装弹窗一致，并用状态色区分
   const name = plugin.displayName ?? plugin.slug
@@ -221,6 +241,7 @@ export function UninstallModal(props: UninstallModalProps) {
           desc: t('uninstallResultDesc'),
           t,
           restarting,
+          needsRestart,
           onRestart,
           onClose,
         })
@@ -270,16 +291,19 @@ export function UninstallModal(props: UninstallModalProps) {
 
 /** 预填插件仓库的 GitHub Issue 链接：标题带插件名，正文附完整错误信息，方便用户一键反馈。 */
 /** 安装/卸载失败弹窗：布局与失败记录一致（类型徽标 + 仓库超链接 + 隐蔽复制按钮），报错完整展示，底部一键提交 Issue。 */
-export function ErrorModal({ message, repo, kind, t, env, onCopy, onClose }: {
+export function ErrorModal({ message, repo, kind, command, attempts, t, env, onCopy, onClose }: {
   message: string
   repo: string | null
   kind: 'install' | 'uninstall'
+  command?: string
+  /** 尝试过的安装方式（npm 反查 + 实际执行命令）：issue 预填一并贴给作者，便于反推正确的 npm 包名 */
+  attempts?: string[]
   t: Translate
   env: EnvInfo | null
   onCopy: (text: string) => void
   onClose: () => void
 }) {
-  // 失败归类：用官方默认安装方式装不上 = 插件仓库的问题，一律引导提 Issue
+  // 失败归类：当前安装通道（npm/git）装不上 = 插件分发/依赖的问题，一律引导提 Issue
   const failureKind = classifyFailure(message)
   return h('div', {
     className: styles.overlay,
@@ -320,14 +344,14 @@ export function ErrorModal({ message, repo, kind, t, env, onCopy, onClose }: {
           // 插件问题（prepare 构建失败 / 原生依赖构建被拦截 / git 分发缺产物）：都是插件打包分发问题 —— 先说明原因，按钮在下方引导提 Issue
           failureKind === 'pluginPrepare' || failureKind === 'pnpmIgnoredBuild'
             ? h('div', null, [
-              // [packaging]（预检/装后校验拦截：git 分发缺产物，不支持官方默认安装方式）与
+              // [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),
+                href: pluginIssueUrl(repo, message, env, command, attempts),
                 target: '_blank',
                 rel: 'noopener noreferrer',
                 title: t('failIssueHint'),
@@ -335,7 +359,7 @@ export function ErrorModal({ message, repo, kind, t, env, onCopy, onClose }: {
             ])
             : repo ? h('a', {
               className: styles.failBigIssue,
-              href: pluginIssueUrl(repo, message, env),
+              href: pluginIssueUrl(repo, message, env, command, attempts),
               target: '_blank',
               rel: 'noopener noreferrer',
               title: t('failIssueHint'),