dsh-plugin 1.1.1 → 1.2.0

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

@@ -0,0 +1,343 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Inline SVG icons used across the client. Icons inherit currentColor so
+ * they adapt to themes and disabled states automatically.
+ */
+import { createElement as h } from 'react'
+import headerStyles from '../../styles/Header.module.css'
+import modalStyles from '../../styles/Modal.module.css'
+
+/** 弹窗右上角关闭按钮图标：内联 SVG 十字（stroke 继承 currentColor），随按钮禁用态一起变淡。 */
+export function CloseIcon() {
+  return h('svg', {
+    className: modalStyles.modalCloseIcon,
+    viewBox: '0 0 16 16',
+    width: 14,
+    height: 14,
+    fill: 'none',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M3 3l10 10M13 3L3 13',
+    stroke: 'currentColor',
+    strokeWidth: 1.6,
+    strokeLinecap: 'round',
+  }))
+}
+
+/** 来源链接图标：链节（stroke 继承 currentColor），弹窗里官网收录地址旁提示「可点击跳转」。 */
+export function LinkIcon() {
+  return h('svg', {
+    className: modalStyles.linkIcon,
+    viewBox: '0 0 24 24',
+    width: 13,
+    height: 13,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('path', {
+      d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+      stroke: 'currentColor',
+      strokeWidth: 1.8,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+      stroke: 'currentColor',
+      strokeWidth: 1.8,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+    }))
+}
+
+/** 品牌 logo 图标：蓝紫渐变圆角方块 + 白色拼图块（2x2 错落），标题左侧的品牌标识。 */
+export function LogoIcon() {
+  return h('svg', {
+    className: headerStyles.logoIcon,
+    viewBox: '0 0 24 24',
+    width: 20,
+    height: 20,
+    'aria-hidden': 'true',
+  },
+    h('defs', null,
+      h('linearGradient', { id: 'dshLogoGrad', x1: '0', y1: '0', x2: '1', y2: '1' },
+        h('stop', { offset: '0%', stopColor: '#4f46e5' }),
+        h('stop', { offset: '100%', stopColor: '#7c3aed' }),
+      ),
+    ),
+    h('rect', { x: 1, y: 1, width: 22, height: 22, rx: 6, fill: 'url(#dshLogoGrad)' }),
+    h('rect', { x: 5.5, y: 5.5, width: 5.5, height: 5.5, rx: 1.5, fill: '#ffffff' }),
+    h('rect', { x: 13, y: 5.5, width: 5.5, height: 5.5, rx: 1.5, fill: '#ffffff', opacity: 0.55 }),
+    h('rect', { x: 5.5, y: 13, width: 5.5, height: 5.5, rx: 1.5, fill: '#ffffff', opacity: 0.55 }),
+    h('rect', { x: 13, y: 13, width: 5.5, height: 5.5, rx: 1.5, fill: '#ffffff' }),
+  )
+}
+
+/** GitHub 图标：官方 GitHub Mark（octocat），fill 继承 currentColor，头部右上角源码链接用。 */
+export function GitHubIcon() {
+  return h('svg', {
+    className: headerStyles.githubIcon,
+    viewBox: '0 0 24 24',
+    width: 18,
+    height: 18,
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
+  }))
+}
+
+/** 复制图标：双层矩形（stroke 继承 currentColor），手动命令旁的复制按钮用。 */
+export function CopyIcon() {
+  return h('svg', {
+    className: headerStyles.copyIcon,
+    viewBox: '0 0 16 16',
+    width: 12,
+    height: 12,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('rect', {
+      x: 5.5, y: 5.5, width: 7, height: 7, rx: 1.5,
+      stroke: 'currentColor', strokeWidth: 1.4,
+    }),
+    h('path', {
+      d: 'M10.5 5.5v-2a1.5 1.5 0 0 0-1.5-1.5H4.5A1.5 1.5 0 0 0 3 3.5v4A1.5 1.5 0 0 0 4.5 9h1',
+      stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round',
+    }),
+  )
+}
+
+/** 文件夹图标（Material folder）：「在文件夹中显示」按钮用，fill 继承 currentColor。 */
+export function FolderIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 13,
+    height: 13,
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z',
+  }))
+}
+
+/** 下拉箭头图标：向下 V 形（stroke 继承 currentColor），下拉按钮触发器右侧提示可展开。 */
+export function ChevronDownIcon() {
+  return h('svg', {
+    viewBox: '0 0 16 16',
+    width: 12,
+    height: 12,
+    fill: 'none',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M3.5 5.5L8 10l4.5-4.5',
+    stroke: 'currentColor',
+    strokeWidth: 1.6,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+  }))
+}
+
+/** 排序方向小箭头：正序(up) 朝上 / 倒序(down) 朝下，随 currentColor 着色，仅当前排序按钮显示 */
+export function SortArrowIcon({ up }: { up: boolean }) {
+  return h('svg', {
+    viewBox: '0 0 16 16',
+    width: 10,
+    height: 10,
+    fill: 'none',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: up ? 'M4 9.5L8 5.5l4 4' : 'M4 6.5L8 10.5l4-4',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+  }))
+}
+
+/** 插件中心图标：店面货架（stroke 继承 currentColor），一级导航「插件中心」tab 用。 */
+export function MarketIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 16,
+    height: 16,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('path', {
+      d: 'M4 10L5.6 4.5h12.8L20 10',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M4 10a2.2 2.2 0 0 0 4.4 0 2.2 2.2 0 0 0 4.4 0 2.2 2.2 0 0 0 4.4 0',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M5 13v6.5A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V13',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }))
+}
+
+/** 自定义安装图标：终端窗口 + 提示符（stroke 继承 currentColor），一级导航「自定义安装」tab 用。 */
+export function TerminalIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 16,
+    height: 16,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('rect', {
+      x: 3, y: 4.5, width: 18, height: 15, rx: 2.5,
+      stroke: 'currentColor', strokeWidth: 1.8,
+    }),
+    h('path', {
+      d: 'M6.8 9.2l3.4 2.8-3.4 2.8',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M12.5 14.8h4.5',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round',
+    }),
+  )
+}
+
+/** 已安装图标：插件包（圆角方盒 + 盒盖线）+ 对勾（stroke 继承 currentColor），一级导航「已安装」tab 用。 */
+export function InstalledIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 16,
+    height: 16,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('rect', {
+      x: 4.5, y: 6.5, width: 15, height: 13, rx: 2.5,
+      stroke: 'currentColor', strokeWidth: 1.8,
+    }),
+    h('path', {
+      d: 'M4.5 11h15',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round',
+    }),
+    h('path', {
+      d: 'M9.2 15.2l2.1 2.1 3.6-4',
+      stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }))
+}
+
+/** 通知铃铛图标：实心铃铛（fill 继承 currentColor），采用 Material 官方 notifications 路径，一级导航通知中心入口用。 */
+export function BellIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 15,
+    height: 15,
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z',
+  }))
+}
+
+/** 设置图标：实心齿轮（fill 继承 currentColor），采用 Material 官方 settings 路径，齿形清晰、辨识度高。 */
+export function SettingsIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 16,
+    height: 16,
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41L9.25 5.35C8.66 5.59 8.12 5.92 7.63 6.29L5.24 5.33c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.22-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61L19.14 12.94zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z',
+  }))
+}
+
+/** 更新与通道图标：循环同步箭头（fill 继承 currentColor），采用 Material 官方 sync 路径，设置左侧导航「更新与通道」用。 */
+export function UpdatesIcon() {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    width: 15,
+    height: 15,
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z',
+  }))
+}
+
+/** 安全与信任图标：盾牌 + 对勾（stroke 继承 currentColor），设置左侧导航「安全与信任」用。 */
+export function SecurityIcon() {
+  return h('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('path', {
+      d: 'M8 1.8L13.8 3.8v4.3c0 3.5-2.2 6.3-5.8 7.6-3.6-1.3-5.8-4.1-5.8-7.6V3.8L8 1.8z',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M5.6 8.1l1.7 1.7 3.2-3.4',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }))
+}
+
+/** 诊断图标：心跳脉冲线（stroke 继承 currentColor），设置左侧导航「诊断」用。 */
+export function DiagnosticsIcon() {
+  return h('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    'aria-hidden': 'true',
+  }, h('path', {
+    d: 'M1.6 8h3l1.9-4.2 2.9 8.4 1.9-4.2h3.1',
+    stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
+  }))
+}
+
+/** 恢复默认图标：逆时针还原箭头（stroke 继承 currentColor），设置左侧导航「恢复默认」用。 */
+export function ResetIcon() {
+  return h('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('path', {
+      d: 'M3 5.2A5.6 5.6 0 1 1 2.4 9.6',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M2.6 2.6v2.6h2.6',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }))
+}
+
+/** 系统日志图标：文档纸 + 三行文字（stroke 继承 currentColor），设置左侧导航「系统日志」用。 */
+export function LogsIcon() {
+  return h('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    'aria-hidden': 'true',
+  },
+    h('path', {
+      d: 'M4.2 1.8h4.8l2.8 2.8v9.6H4.2z',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M9 1.8v2.8h2.8',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M5.6 9.2h4.8M5.6 11.2h4.8',
+      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round',
+    }))
+}

package/src/client/components/views/CustomInstallView.tsx

@@ -0,0 +1,250 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Custom install view: a standalone top-level section for manually
+ * installing npm packages or GitHub sources outside the catalog. Three
+ * installer cards, one per channel — npm package, GitHub source and a raw
+ * install command (a `dsh plugin ... add <target>` or the official global
+ * `npm install -g <pkgs>`) — each with a placeholder example above the
+ * input and its own format check. The cards stay separate so a user never
+ * has to guess which format goes where. Finished installs surface in the
+ * Installed view, marked as custom.
+ *
+ * Pure presentational: owns only the three local input/error states; the
+ * actual install (custom source, gated by the security toggles) bubbles up
+ * via onInstallCustom.
+ */
+import { createElement as h, useState } from 'react'
+import type { FormEvent } from 'react'
+import styles from '../../styles/CustomInstallView.module.css'
+import type { Translate } from '../../types.ts'
+
+/* —— 自定义安装输入预检 ——
+ * 提交前校验「输入是否符合该通道格式」，识别不了的输入不发请求，就地提示推荐格式。
+ * 三个通道严格分开：npm 框只认包名，git 框只认 GitHub 地址，命令框认两种完整命令
+ * （`dsh plugin [--profile|-p <p>] add <target>` 与官方全局安装 `npm install -g <pkgs>`）。
+ * 这里只做格式校验，真正归一化/安装由服务端完成。 */
+
+/** GitHub 地址（带前缀形态）：github:、https://github.com/、git+https://github.com/、git@github.com: */
+const GITHUB_URL_RE = /^(?:github:|https?:\/\/github\.com\/|git\+https?:\/\/github\.com\/|git@github\.com:)([A-Za-z0-9._-]+)\/([A-Za-z0-9._-]+?)(?:\.git)?$/
+/** 裸 owner/repo（npm 包名只有 @scope/pkg 才带斜杠，无 @ 前缀的 a/b 一定是 GitHub 仓库） */
+const GITHUB_BARE_RE = /^[A-Za-z0-9._-]+\/[A-Za-z0-9._-]+$/
+/** npm 包名（含 @scope/pkg） */
+const NPM_PACKAGE_RE = /^(?:@[a-z0-9._-]+\/)?[a-z0-9._-]+$/
+
+/** DSH 命令行前缀（`dsh plugin [--profile|-p <p>] add <target>`）—— 提取其中的安装目标；
+ * 命令大小写不敏感，支持 `-p` 简写与 `--profile=web` 等号形式，与 server 端 installTargetOf 口径一致。 */
+const DSH_PLUGIN_CMD_RE = /^dsh\s+plugin\s+(?:(?:--profile|-p)(?:=|\s+)\S+\s*)?add\s+(.+)$/i
+
+/** npm 全局安装命令（官方 README 格式，如 `npm install -g @deepseek-ai/dsh @deepseek-harness-tui/dsh-tui`）——
+ * 提取 -g 之后的包列表；任一包名非法返回 null（交给格式错误提示）。与 server 端 globalNpmPackagesOf 口径一致。 */
+const NPM_GLOBAL_CMD_RE = /^npm\s+(?:install|i)\s+(?:-g|--global)\s+(.+)$/i
+
+function installTargetOf(raw: string): string {
+  const input = raw.trim()
+  const match = DSH_PLUGIN_CMD_RE.exec(input)
+  return match !== null ? match[1].trim() : input
+}
+
+function parseNpmGlobalPackages(raw: string): string[] | null {
+  const input = raw.trim()
+  const match = NPM_GLOBAL_CMD_RE.exec(input)
+  if (match === null) return null
+  const packages = match[1].trim().split(/\s+/).filter((p) => p !== '')
+  // 包名逐个校验 + 拒绝以 - 开头的 token（npm 会把 --xxx 当参数而非包名），与 server 端同口径
+  if (packages.length === 0 || packages.some((p) => !NPM_PACKAGE_RE.test(p) || p.startsWith('-'))) return null
+  return packages
+}
+
+function isGitHubInput(raw: string): boolean {
+  const input = raw.trim()
+  return GITHUB_URL_RE.test(input) || GITHUB_BARE_RE.test(input)
+}
+
+function isNpmInput(raw: string): boolean {
+  return NPM_PACKAGE_RE.test(raw.trim())
+}
+
+function isDshCommand(raw: string): boolean {
+  return DSH_PLUGIN_CMD_RE.test(raw.trim())
+}
+
+export function CustomInstallView({ t, onInstallCustom, enableNpm, enableGit, enableDsh, onOpenSettings }: {
+  t: Translate
+  /** 命令行安装：输入 npm 包名 / GitHub 地址 / 安装命令（dsh plugin add 或 npm install -g）即装
+   *  （custom 源，受安全设置开关控制）；opts.globalNpm 表示官方 npm 全局安装命令，附带解析出的包列表 */
+  onInstallCustom: (raw: string, opts?: { globalNpm?: string[] }) => void
+  /** 安全信任三通道开关：关掉后对应输入卡片禁用（不提交），并引导去设置打开 */
+  enableNpm: boolean
+  enableGit: boolean
+  enableDsh: boolean
+  /** 引导去「设置 → 安全信任」打开被关闭的通道开关 */
+  onOpenSettings: () => void
+}) {
+  /** 自定义安装：NPM 包输入与格式错误（'' = 无错误） */
+  const [npmQuery, setNpmQuery] = useState('')
+  const [npmError, setNpmError] = useState('')
+  /** 自定义安装：GitHub 源码输入与格式错误（'' = 无错误） */
+  const [gitQuery, setGitQuery] = useState('')
+  const [gitError, setGitError] = useState('')
+  /** 自定义安装：DSH 命令输入与格式错误（'' = 无错误） */
+  const [cmdQuery, setCmdQuery] = useState('')
+  const [cmdError, setCmdError] = useState('')
+
+  /** 通道关闭提示行：开关关掉后替代示例与输入行，引导去设置打开 */
+  const channelOffRow = h('div', { className: styles.channelOff },
+    h('span', { className: styles.channelOffText }, t('channelDisabledHint')),
+    h('button', {
+      type: 'button',
+      className: styles.channelOffBtn,
+      onClick: onOpenSettings,
+    }, t('goToSettings')),
+  )
+
+  // 三个通道分开校验 —— 识别不了的输入不发请求，就地提示推荐写法。
+  // NPM / GitHub 框只认各自裸目标；命令框认两种完整命令（dsh plugin add / npm install -g），
+  // 提交时 dsh 命令剥成裸目标发给服务端，npm install -g 解析成包列表走全局安装通道。
+  const submitNpm = () => {
+    const target = npmQuery.trim()
+    if (!target) return
+    if (!isNpmInput(target)) { setNpmError(t('npmInstallInvalid')); return }
+    onInstallCustom(target)
+    setNpmQuery('')
+    setNpmError('')
+  }
+  const submitGit = () => {
+    const target = gitQuery.trim()
+    if (!target) return
+    if (!isGitHubInput(target)) { setGitError(t('gitInstallInvalid')); return }
+    onInstallCustom(target)
+    setGitQuery('')
+    setGitError('')
+  }
+  const submitCmd = () => {
+    const raw = cmdQuery.trim()
+    if (!raw) return
+    // 官方 npm 全局安装命令（npm install -g <pkgs>）优先识别：解析出包列表走全局安装通道
+    const globalPkgs = parseNpmGlobalPackages(raw)
+    if (globalPkgs !== null) {
+      onInstallCustom(raw, { globalNpm: globalPkgs })
+      setCmdQuery('')
+      setCmdError('')
+      return
+    }
+    if (!isDshCommand(raw)) { setCmdError(t('dshCmdInvalid')); return }
+    onInstallCustom(installTargetOf(raw))
+    setCmdQuery('')
+    setCmdError('')
+  }
+
+  return h('div', { className: styles.root },
+    // 页面说明：独立一级导航，交代「装完去哪看」
+    h('p', { className: styles.desc }, t('customViewDesc')),
+    // 三块卡片（一行一个）：label + 文本框上方示例 + 输入行 + 错误区；
+    // 安全信任开关关掉对应通道时，卡片禁用并显示「前往设置」提示行
+    h('div', { className: styles.installCards },
+      // NPM 包：输入包名即装
+      h('div', { className: enableNpm ? styles.installCard : `${styles.installCard} ${styles.installCardDisabled}` },
+        h('div', { className: styles.installCardHead },
+          h('span', { className: styles.installLabel }, t('npmInstallLabel')),
+        ),
+        !enableNpm
+          ? channelOffRow
+          : [
+            // 文本框上方的示例：告诉用户怎么写
+            h('div', { className: styles.installExample }, t('npmInstallExample')),
+            h('div', { className: styles.installRow },
+              h('input', {
+                className: npmError ? `${styles.installInput} ${styles.installInputError}` : styles.installInput,
+                type: 'text',
+                placeholder: t('npmInstallPlaceholder'),
+                value: npmQuery,
+                spellCheck: false,
+                onInput: (e: FormEvent<HTMLInputElement>) => {
+                  setNpmQuery((e.target as HTMLInputElement).value)
+                  // 重新输入即清掉格式错误提示
+                  setNpmError('')
+                },
+                onKeyDown: (e: KeyboardEvent) => { if (e.key === 'Enter') submitNpm() },
+              }),
+              h('button', {
+                className: styles.installBtn,
+                type: 'button',
+                disabled: npmQuery.trim() === '',
+                onClick: submitNpm,
+              }, t('installCliBtn')),
+            ),
+            // 格式错误：识别不了的包名就地说明，并给出推荐写法
+            npmError ? h('div', { className: styles.installError }, npmError) : null,
+          ],
+      ),
+      // GitHub 源码：输入仓库地址即装
+      h('div', { className: enableGit ? styles.installCard : `${styles.installCard} ${styles.installCardDisabled}` },
+        h('div', { className: styles.installCardHead },
+          h('span', { className: styles.installLabel }, t('gitInstallLabel')),
+        ),
+        !enableGit
+          ? channelOffRow
+          : [
+            h('div', { className: styles.installExample }, t('gitInstallExample')),
+            h('div', { className: styles.installRow },
+              h('input', {
+                className: gitError ? `${styles.installInput} ${styles.installInputError}` : styles.installInput,
+                type: 'text',
+                placeholder: t('gitInstallPlaceholder'),
+                value: gitQuery,
+                spellCheck: false,
+                onInput: (e: FormEvent<HTMLInputElement>) => {
+                  setGitQuery((e.target as HTMLInputElement).value)
+                  setGitError('')
+                },
+                onKeyDown: (e: KeyboardEvent) => { if (e.key === 'Enter') submitGit() },
+              }),
+              h('button', {
+                className: styles.installBtn,
+                type: 'button',
+                disabled: gitQuery.trim() === '',
+                onClick: submitGit,
+              }, t('installCliBtn')),
+            ),
+            gitError ? h('div', { className: styles.installError }, gitError) : null,
+          ],
+      ),
+      // 命令卡片：粘贴完整安装命令即装 —— 官方全局安装 `npm install -g <pkgs>`（装系统级 CLI 工具）
+      // 或完整 dsh plugin 命令（可含 --profile 段，剥成裸目标安装）
+      h('div', { className: enableDsh ? styles.installCard : `${styles.installCard} ${styles.installCardDisabled}` },
+        h('div', { className: styles.installCardHead },
+          h('span', { className: styles.installLabel }, t('dshCmdLabel')),
+        ),
+        !enableDsh
+          ? channelOffRow
+          : [
+            h('div', { className: styles.installExample }, t('dshCmdExample')),
+            h('div', { className: styles.installRow },
+              h('input', {
+                className: cmdError ? `${styles.installInput} ${styles.installInputError}` : styles.installInput,
+                type: 'text',
+                placeholder: t('dshCmdPlaceholder'),
+                value: cmdQuery,
+                spellCheck: false,
+                onInput: (e: FormEvent<HTMLInputElement>) => {
+                  setCmdQuery((e.target as HTMLInputElement).value)
+                  setCmdError('')
+                },
+                onKeyDown: (e: KeyboardEvent) => { if (e.key === 'Enter') submitCmd() },
+              }),
+              h('button', {
+                className: styles.installBtn,
+                type: 'button',
+                disabled: cmdQuery.trim() === '',
+                onClick: submitCmd,
+              }, t('installCliBtn')),
+            ),
+            cmdError ? h('div', { className: styles.installError }, cmdError) : null,
+          ],
+      ),
+    ),
+  )
+}