dsh-plugin 1.1.1 → 1.2.0

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

@@ -0,0 +1,172 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * System diagnostics list: one row per connectivity channel (npm registry /
+ * GitHub API / catalog site), each with a live status badge — 200 OK in
+ * green, Unreachable in red, Checking… while probing. The list runs
+ * automatically when the page opens; every row is a button that re-probes
+ * just that channel, so a click always yields visible feedback
+ * (row pulses → badge flips → latency refreshes).
+ */
+import { createElement as h, useCallback, useEffect, useRef, useState } from 'react'
+import styles from '../../styles/DiagnosticsView.module.css'
+import type { EnvInfo, Translate } from '../../types.ts'
+import { PLUGIN_VERSION } from '../../logic/constants.ts'
+
+type ProbeKey = 'npm' | 'github' | 'catalog'
+
+/** 系统版本文本：提交 Issue 时粘贴到正文，方便作者复现。 */
+function formatEnv(env: EnvInfo): string {
+  return [
+    `DSH-Plugin Hub ${PLUGIN_VERSION}`,
+    `DSH ${env.dshVersion ?? 'unknown'}`,
+    `Node ${env.nodeVersion}`,
+    `${env.platform} ${env.arch} (${env.release})`,
+    `Profile ${env.profile}`,
+    env.dshHome ? `Home ${env.dshHome}` : '',
+  ].filter(Boolean).join('\n')
+}
+
+interface RowState {
+  key: ProbeKey
+  /** 目标地址展示（registry 地址 / github.com / dsh-plugin.org） */
+  display: string
+  nameKey: string
+  status: 'idle' | 'running' | 'ok' | 'fail'
+  ms: number | null
+  statusCode: number | null
+}
+
+const INITIAL_ROWS: RowState[] = [
+  { key: 'npm', display: 'registry.npmjs.org', nameKey: 'diagNpm', status: 'idle', ms: null, statusCode: null },
+  { key: 'github', display: 'github.com', nameKey: 'diagGithub', status: 'idle', ms: null, statusCode: null },
+  { key: 'catalog', display: 'api.dsh-plugin.org', nameKey: 'diagCatalog', status: 'idle', ms: null, statusCode: null },
+]
+
+export function DiagnosticsView({ t, env, onCopy }: {
+  t: Translate
+  env: EnvInfo | null
+  onCopy: (text: string) => void
+}) {
+  const [rows, setRows] = useState<RowState[]>(INITIAL_ROWS)
+  /** 当前探测请求：重测/卸载时 abort 旧请求，避免乱序结果覆盖 */
+  const runningRef = useRef<AbortController | null>(null)
+
+  const patchRows = (key: ProbeKey | undefined, patch: Partial<RowState>) => {
+    setRows((prev) => prev.map((r) => (key === undefined || r.key === key ? { ...r, ...patch } : r)))
+  }
+
+  /** 探测：key 缺省 = 全量串行；传 key = 只重测该通道 */
+  const run = useCallback((key?: ProbeKey) => {
+    runningRef.current?.abort()
+    const controller = new AbortController()
+    runningRef.current = controller
+    patchRows(key, { status: 'running', ms: null, statusCode: null })
+
+    void (async () => {
+      try {
+        const res = await fetch('/dsh-plugin-hub/diagnostics', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: key === undefined ? '{}' : JSON.stringify({ key }),
+          cache: 'no-store',
+          signal: controller.signal,
+        })
+        if (!res.ok || res.body === null) throw new Error(`http ${res.status}`)
+        const reader = res.body.getReader()
+        const decoder = new TextDecoder()
+        let buf = ''
+        for (;;) {
+          const { done, value } = await reader.read()
+          if (done) break
+          buf += decoder.decode(value, { stream: true })
+          let nl = buf.indexOf('\n')
+          while (nl !== -1) {
+            const raw = buf.slice(0, nl).trim()
+            buf = buf.slice(nl + 1)
+            if (raw !== '') {
+              const ev = JSON.parse(raw) as { type?: string; key?: string; ms?: number | null; status?: number | null }
+              if (ev.type === 'ok' || ev.type === 'fail') {
+                patchRows(ev.key as ProbeKey, {
+                  status: ev.type === 'ok' ? 'ok' : 'fail',
+                  ms: typeof ev.ms === 'number' ? ev.ms : null,
+                  statusCode: typeof ev.status === 'number' ? ev.status : null,
+                })
+              }
+            }
+            nl = buf.indexOf('\n')
+          }
+        }
+      } catch {
+        // 连接本地服务失败：该项标记失败（被新请求 abort 的旧请求直接忽略）
+        if (controller.signal.aborted) return
+        patchRows(key, { status: 'fail', ms: null, statusCode: null })
+      }
+    })()
+  }, [])
+
+  // 进入页面自动全量探测一轮；卸载时中断
+  useEffect(() => {
+    run()
+    return () => runningRef.current?.abort()
+  }, [run])
+
+  const anyRunning = rows.some((r) => r.status === 'running')
+  const allOk = !anyRunning && rows.every((r) => r.status === 'ok')
+  const anyFail = !anyRunning && rows.some((r) => r.status === 'fail')
+
+  return h('div', { className: styles.panel },
+    // 最顶部：系统版本 —— 复制当前宿主版本与系统信息，提 Issue 时粘贴到正文便于复现
+    h('div', { className: styles.envRow },
+      h('div', { className: styles.envLabel },
+        h('div', { className: styles.envTitle }, t('settingsEnvSnapshot')),
+        h('div', { className: styles.envDesc }, t('settingsEnvSnapshotDesc')),
+      ),
+      h('button', {
+        type: 'button',
+        className: styles.envCopyBtn,
+        disabled: env === null,
+        onClick: () => { if (env) onCopy(formatEnv(env)) },
+      }, t('settingsEnvCopy')),
+    ),
+    // 头部：右侧「立即诊断」按钮，点击全量重测所有通道
+    h('div', { className: styles.head },
+      h('span', { className: styles.headHint }, t('diagHeadHint', { n: rows.length })),
+      h('button', {
+        type: 'button',
+        className: styles.runBtn,
+        disabled: anyRunning,
+        onClick: () => run(),
+      }, t('diagRunAll')),
+    ),
+    rows.map((r) => {
+      const badge = r.status === 'running'
+        ? h('span', { className: `${styles.badge} ${styles.badgeRunning}` }, t('diagChecking'))
+        : r.status === 'ok'
+          ? h('span', { className: `${styles.badge} ${styles.badgeOk}` },
+            r.statusCode !== null ? `HTTP ${r.statusCode} ${t('diagOk')}` : t('diagOk'))
+          : r.status === 'fail'
+            ? h('span', { className: `${styles.badge} ${styles.badgeFail}` }, t('settingsDiagFail'))
+            : h('span', { className: `${styles.badge} ${styles.badgeIdle}` }, t('diagIdle'))
+      return h('button', {
+        key: r.key,
+        type: 'button',
+        className: styles.row,
+        disabled: r.status === 'running',
+        onClick: () => run(r.key),
+        title: t('diagRecheck'),
+      },
+        h('span', { className: styles.name }, t(r.nameKey)),
+        h('span', { className: styles.display }, r.display),
+        h('span', { className: styles.meta }, r.status === 'ok' && r.ms !== null ? `${r.ms} ms` : ''),
+        badge,
+      )
+    }),
+    // 底部总览：全部通过 / 存在异常 / 检测中，汇总整体状态
+    h('div', {
+      className: `${styles.summary} ${anyRunning ? styles.summaryRunning : allOk ? styles.summaryOk : styles.summaryFail}`,
+    }, anyRunning ? t('diagSummaryRunning') : allOk ? t('diagSummaryOk') : t('diagSummaryFail')),
+  )
+}

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

@@ -0,0 +1,328 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Installed view: manages the plugins installed into the current profile.
+ * Follows the mainstream extension-manager pattern (VSCode Installed tab) —
+ * a searchable, sortable list of installed entries that mixes catalog
+ * plugins (full metadata) and custom command installs (outside the catalog,
+ * only runtime info, tagged with a custom badge). The toolbar carries a
+ * search box plus two segmented radio-button groups: source filter
+ * (all / catalog / custom) and sort (name / recently installed / stars / forks).
+ * Each row carries restart (when pending), update and uninstall actions
+ * and opens a detail modal with the full install metadata.
+ *
+ * Pure presentational: owns only local search/sort state; the InstalledItem
+ * model arrives from the catalog hook and actions bubble up via callbacks.
+ */
+import { createElement as h, useMemo, useState } from 'react'
+import type { FormEvent, MouseEvent, ReactNode } from 'react'
+import styles from '../../styles/InstalledView.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 { SortArrowIcon } from '../ui/icons.tsx'
+
+const INSTALLED_SORTS = ['sortName', 'sortInstalledAt', 'sortStars', 'sortForks'] as const
+type InstalledSortKey = (typeof INSTALLED_SORTS)[number]
+
+/** 各排序的默认方向：名称按字母正序，最近安装 / Star / Fork 按数值倒序 */
+const SORT_DEFAULT_DIR: Record<InstalledSortKey, 'asc' | 'desc'> = {
+  sortName: 'asc', sortInstalledAt: 'desc', sortStars: 'desc', sortForks: 'desc',
+}
+
+/** 已安装列表的来源筛选：全部 / 目录收录 / 自定义安装 */
+type SourceFilter = 'all' | 'catalog' | 'custom'
+
+/** 单选按钮组中的一个按钮（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)
+}
+
+function InstalledRow({ item, t, langKey, canReveal, revealLabel, onOpenDetail, onReveal, onUpdate, onUninstall, onRestart }: {
+  item: InstalledItem
+  t: Translate
+  langKey: LocaleId
+  /** 系统文件管理器可定位安装目录的平台（macOS / Linux）：行内显示打开目录按钮 */
+  canReveal: boolean
+  /** 打开目录按钮文案（macOS = 在 Finder 中显示，Linux = 在文件夹中显示） */
+  revealLabel: string
+  onOpenDetail: (item: InstalledItem) => void
+  /** 在系统文件管理器里定位安装目录（macOS Finder / Linux 文件管理器） */
+  onReveal: (item: InstalledItem) => void
+  onUpdate: (item: InstalledItem) => void
+  onUninstall: (item: InstalledItem) => void
+  /** 重启宿主：仅待重启（装完未挂载）条目展示，重启后该插件才生效 */
+  onRestart: () => void
+}) {
+  const name = item.plugin?.displayName ?? item.name
+  const repo = item.repo
+  const category = item.plugin?.category
+  const desc = item.plugin?.description
+  // 命令行安装进来的插件没有目录元数据（plugin === null）：列表里打「自定义安装」标签区分
+  const isCustom = item.plugin === null
+  return h('li', {
+    className: styles.row,
+    onClick: () => onOpenDetail(item),
+    role: 'button',
+    tabIndex: 0,
+    title: t('detail'),
+    onKeyDown: (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onOpenDetail(item)
+      }
+    },
+  },
+    // 第一行：状态点 + 名称/版本/更新徽标 + 行尾来源标签列 + 右侧固定操作按钮组
+    h('div', { className: styles.rowTitleLine },
+      // 运行状态点：绿 = 已加载进 loader；橙 = 待重启（装完未挂载的 dsh 插件）；
+      // 灰 = 非 dsh 插件（如官方示例项目，宿主不加载，无需重启）
+      h('span', {
+        className: item.loaded ? styles.statusDot
+          : item.dshCapable ? `${styles.statusDot} ${styles.statusPending}`
+            : `${styles.statusDot} ${styles.statusInactive}`,
+        title: item.loaded ? t('statusRunning')
+          : item.dshCapable ? t('statusPending')
+            : t('exampleHint'),
+        'aria-label': item.loaded ? t('statusRunning')
+          : item.dshCapable ? t('statusPending')
+            : t('exampleHint'),
+      }),
+      // 主信息：名称 + 已装版本 + 有更新徽标（flex 撑满，超长省略）
+      h('div', { className: styles.rowMain },
+        h('span', { className: styles.rowTitle }, name),
+        item.installedVersion
+          ? h('span', { className: styles.versionBadge, title: t('installedVersionLabel') }, item.installedVersion)
+          : null,
+        item.hasUpdate
+          ? h('span', { className: styles.updateBadge, title: t('updateAvailableHint') }, t('updateAvailable'))
+          : null,
+      ),
+      // 来源标签列（行尾、操作按钮前，右对齐固定）：目录插件 →「插件中心」（品牌色），
+      // 命令行安装 →「手动安装」（琥珀色）；两词 4 字等宽，所有条目标签同列对齐
+      h('span', {
+        className: isCustom
+          ? `${styles.rowSourceTag} ${styles.rowSourceTagManual}`
+          : `${styles.rowSourceTag} ${styles.rowSourceTagHub}`,
+        title: isCustom ? t('manualInstallHint') : t('hubInstallHint'),
+      }, isCustom ? t('manualInstall') : t('hubInstall')),
+      // 行操作：重启（dsh 插件待重启时）/ 详情 / 更新（有更新时）/ 卸载 —— 按钮点击不触发行打开详情
+      h('div', { className: styles.rowActions },
+        // 装完未挂载的 dsh 插件：给「重启」入口，点了宿主重启后插件即生效；非 dsh 插件不提示（重启无用）
+        !item.loaded && item.dshCapable
+          ? h('button', {
+            className: styles.rowRestart,
+            type: 'button',
+            title: t('restartPendingHint'),
+            onClick: (e: MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onRestart() },
+          }, t('restart'))
+          : null,
+        // 支持文件管理器定位的平台（macOS / Linux）：行内该位改为打开安装目录按钮；
+        // 行点击本身即打开详情弹窗，故不支持的平台（如 Windows）不显示此按钮
+        canReveal
+          ? h('button', {
+            className: styles.rowDetail,
+            type: 'button',
+            onClick: (e: MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onReveal(item) },
+          }, revealLabel)
+          : null,
+        item.hasUpdate && item.plugin
+          ? h('button', {
+            className: styles.rowUpdate,
+            type: 'button',
+            title: t('updateAvailableHint'),
+            onClick: (e: MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onUpdate(item) },
+          }, t('update'))
+          : null,
+        h('button', {
+          className: styles.rowUninstall,
+          type: 'button',
+          onClick: (e: MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); onUninstall(item) },
+        }, t('uninstall')),
+      ),
+    ),
+    // 示例项目徽标单独一行（非 dsh 插件）：标签较长也能完整显示，不挤压名称行
+    !item.dshCapable
+      ? h('div', { className: styles.exampleRow },
+        h('span', { className: styles.exampleBadge, title: t('exampleHint') }, t('exampleLabel')),
+      )
+      : null,
+    // 第二行：仓库 · 分类（与名称左对齐缩进，独立成行不再挤压名称）
+    repo || category
+      ? h('div', { className: styles.rowMeta },
+        item.repo ? h('span', { className: styles.rowRepo }, item.repo) : null,
+        category ? h('span', { className: styles.rowCategory },
+          categoryLabel(CATEGORY_LABELS, category, langKey)) : null,
+      )
+      : null,
+    // 第三行（仅目录插件）：简介单独一行展示，超长以省略号收尾
+    desc ? h('div', { className: styles.rowDesc, title: desc }, desc) : null,
+  )
+}
+
+/** 行列表：单个已安装列表（自定义安装与目录插件混排，靠徽标区分）。 */
+function RowList({ items, t, langKey, canReveal, revealLabel, onOpenDetail, onReveal, onUpdate, onUninstall, onRestart }: {
+  items: InstalledItem[]
+  t: Translate
+  langKey: LocaleId
+  canReveal: boolean
+  revealLabel: string
+  onOpenDetail: (item: InstalledItem) => void
+  onReveal: (item: InstalledItem) => void
+  onUpdate: (item: InstalledItem) => void
+  onUninstall: (item: InstalledItem) => void
+  onRestart: () => void
+}) {
+  return h('ul', { className: styles.list },
+    items.map((item) => h(InstalledRow, {
+      key: item.name,
+      item,
+      t,
+      langKey,
+      canReveal,
+      revealLabel,
+      onOpenDetail,
+      onReveal,
+      onUpdate,
+      onUninstall,
+      onRestart,
+    })),
+  )
+}
+
+export function InstalledView({ items, t, langKey, platform, onOpenDetail, onReveal, onUpdate, onUninstall, onRestart }: {
+  items: InstalledItem[]
+  t: Translate
+  langKey: LocaleId
+  /** 宿主系统平台（node process.platform）：支持文件管理器定位（macOS / Linux）时行内显示打开目录按钮 */
+  platform: string
+  onOpenDetail: (item: InstalledItem) => void
+  onReveal: (item: InstalledItem) => void
+  /** 更新：仅目录插件且有更新时触发（自定义安装无目录信号可比） */
+  onUpdate: (item: InstalledItem) => void
+  onUninstall: (item: InstalledItem) => void
+  /** 重启宿主：待重启条目行内按钮触发（装完未挂载的插件重启后生效） */
+  onRestart: () => void
+}) {
+  const [query, setQuery] = useState('')
+  /** 默认按「最近安装」排序（最新在前）；点其他排序按钮用该排序的默认方向（Star/Fork 最多在前、名称正序） */
+  const [sort, setSort] = useState<InstalledSortKey>('sortInstalledAt')
+  /** 当前排序方向：点同一个排序按钮切换 正/倒序；点新排序用该排序的默认方向 */
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
+  /** 已安装列表的来源筛选：全部 / 目录收录 / 自定义安装（单选按钮组） */
+  const [sourceFilter, setSourceFilter] = useState<SourceFilter>('all')
+
+  /** 点击排序按钮：同一按钮切换正/倒序，新按钮用默认方向 */
+  function pickSort(key: InstalledSortKey) {
+    if (key === sort) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
+    else { setSort(key); setSortDir(SORT_DEFAULT_DIR[key]) }
+  }
+
+  // 搜索 + 排序后的展示列表：搜索命中名称/包名/仓库/描述；排序支持名称/最近安装/Star/Fork
+  const list = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    const filtered = items.filter((item) => {
+      if (!q) return true
+      return (item.plugin?.displayName ?? item.name).toLowerCase().includes(q)
+        || item.name.toLowerCase().includes(q)
+        || (item.repo ?? '').toLowerCase().includes(q)
+        || (item.plugin?.description ?? '').toLowerCase().includes(q)
+    })
+    const dir = sortDir === 'asc' ? 1 : -1
+    return [...filtered].sort((a, b) => {
+      if (sort === 'sortName') return (a.plugin?.displayName ?? a.name).localeCompare(b.plugin?.displayName ?? b.name) * dir
+      // Star / Fork：目录插件按数量比较（正/倒序随 dir）；自定义安装（无目录数据，stats 缺失）永远排最后
+      if (sort === 'sortStars' || sort === 'sortForks') {
+        const metric = sort === 'sortStars' ? 'stargazers_count' : 'forks_count'
+        const sa = a.plugin?.stats?.[metric]
+        const sb = b.plugin?.stats?.[metric]
+        if (sa == null && sb == null) return 0
+        if (sa == null) return 1
+        if (sb == null) return -1
+        return (sa - sb) * dir
+      }
+      // 最近安装：按安装时间比较；无安装时间记录的永远排最后
+      const av = a.installedAt ?? ''
+      const bv = b.installedAt ?? ''
+      if (av === bv) return 0
+      if (av === '') return 1
+      if (bv === '') return -1
+      return av.localeCompare(bv) * dir
+    })
+  }, [items, query, sort, sortDir])
+
+  const catalogItems = list.filter((item) => item.plugin !== null)
+  const customItems = list.filter((item) => item.plugin === null)
+  // 已安装列表：搜索 + 排序后，再按来源筛选（全部 / 目录收录 / 自定义安装）
+  const filtered = sourceFilter === 'all' ? list
+    : sourceFilter === 'catalog' ? catalogItems : customItems
+
+  // 行列表公共参数：macOS 文案特指 Finder，Windows / Linux 用通用「在文件夹中显示」
+  const rowListProps = {
+    t, langKey,
+    canReveal: platform === 'darwin' || platform === 'win32' || platform === 'linux',
+    revealLabel: platform === 'darwin' ? t('revealFolder') : t('openFolder'),
+    onOpenDetail, onReveal, onUpdate, onUninstall, onRestart,
+  }
+
+  // 工具栏：第一行搜索框撑满，第二行来源筛选按钮组 + 排序按钮组（单选按钮组形态）
+  const listToolbar = h('div', { className: styles.toolbar },
+    h('div', { className: styles.searchWrap },
+      h('input', {
+        className: styles.searchInput,
+        type: 'search',
+        placeholder: t('installedSearch'),
+        value: query,
+        spellCheck: false,
+        onInput: (e: FormEvent<HTMLInputElement>) =>
+          setQuery((e.target as HTMLInputElement).value),
+      }),
+    ),
+    h('div', { className: styles.segRow },
+      h('span', { className: styles.segLabel }, t('filterByLabel')),
+      h('div', { className: styles.segGroup, role: 'radiogroup', 'aria-label': t('filterByLabel') },
+        SegBtn({ active: sourceFilter === 'all', onClick: () => setSourceFilter('all'), label: t('all') }),
+        SegBtn({ active: sourceFilter === 'catalog', onClick: () => setSourceFilter('catalog'), label: t('installedFilterCatalog') }),
+        SegBtn({ active: sourceFilter === 'custom', onClick: () => setSourceFilter('custom'), label: t('customLabel') }),
+      ),
+      h('span', { className: styles.segLabel }, t('sortByLabel')),
+      h('div', { className: styles.segGroup, role: 'radiogroup', 'aria-label': t('sortAria') },
+        INSTALLED_SORTS.map((key) => SegBtn({
+          active: sort === key,
+          onClick: () => pickSort(key),
+          label: t(key),
+          icon: sort === key ? h(SortArrowIcon, { up: sortDir === 'asc' }) : null,
+        })),
+      ),
+    ),
+  )
+
+  return h('div', { className: styles.root },
+    listToolbar,
+    // 筛选后的列表；一个都没装 → 引导空态，搜索/筛选无结果 → 无结果空态
+    filtered.length === 0
+      ? items.length === 0
+        ? h('div', { className: styles.empty },
+          h('div', { className: styles.emptyTitle }, t('installedEmpty')),
+          h('div', { className: styles.emptyDesc }, t('installedEmptyDesc')),
+        )
+        : h('div', { className: styles.empty },
+          h('div', { className: styles.emptyTitle }, t('noResult')),
+          h('div', { className: styles.emptyDesc }, t('noResultDesc')),
+        )
+      : h(RowList, { items: filtered, ...rowListProps }),
+  )
+}

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

@@ -0,0 +1,150 @@
+/**
+ * DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * 系统日志入口视图：不在这里堆全文，而是给出「打开日志查看器」窗口入口 +
+ * 日志文件真实路径（可一键在系统文件管理器中定位）+ 最近若干条预览。
+ * 完整阅读/筛选/分页在 LogsModal 内置查看器弹窗里完成 —— 无需借助任何
+ * 外部软件，点击即弹出自己的窗口加载本地 JSONL 日志。
+ */
+import { createElement as h, useCallback, useEffect, useRef, useState } from 'react'
+import styles from '../../styles/LogsView.module.css'
+import type { Translate } from '../../types.ts'
+import { openLogFile } from '../../data/host.ts'
+import { LogsModal, LogEntryRow, fmtLogTime, type LogEntryView } from '../modals/LogsModal.tsx'
+import { LogsPathModal } from '../modals/LogsPathModal.tsx'
+
+/** 设置页预览条数：只放最近一小段，给用户快速感观，完整内容进查看器。 */
+const PREVIEW = 12
+
+export function LogsView({ t, logPath, onLogPathSaved }: {
+  t: Translate
+  /** 设置里已保存的日志位置覆盖（空串 = 默认位置） */
+  logPath: string
+  /** 保存自定义日志位置（写入设置，服务端同时预建目录验证可写） */
+  onLogPathSaved: (value: string) => void
+}) {
+  const [entries, setEntries] = useState<LogEntryView[]>([])
+  const [path, setPath] = useState('')
+  // 真正默认位置（~/.dsh/profiles/<profile>/hub.log，跨机器/平台动态）：弹窗「恢复默认」用
+  const [defaultPath, setDefaultPath] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [opening, setOpening] = useState(false)
+  const [openFailed, setOpenFailed] = useState(false)
+  // 日志存放位置弹窗：点「修改」打开，手输或选目录
+  const [showPathModal, setShowPathModal] = useState(false)
+  const mountedRef = useRef(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/dsh-plugin-hub/logs', { cache: 'no-store' })
+      if (!res.ok) throw new Error(`http ${res.status}`)
+      const data = await res.json() as { entries: LogEntryView[]; path: string; defaultPath?: string }
+      if (mountedRef.current) {
+        setEntries(data.entries)
+        if (data.path !== '') setPath(data.path)
+        if (data.defaultPath !== undefined) setDefaultPath(data.defaultPath)
+        setError(false)
+      }
+    } catch {
+      if (mountedRef.current) setError(true)
+    } finally {
+      if (mountedRef.current) setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+    void load()
+    return () => { mountedRef.current = false }
+  }, [load])
+
+  /** 导出：拼纯文本 → Blob → 触发浏览器下载 .log 文件 */
+  const exportFile = () => {
+    const text = entries.map((e) => `[${fmtLogTime(e.at)}] [${e.level}] [${e.category}] [${e.event}] ${e.message}`).join('\n')
+    if (text === '') return
+    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'dsh-plugin-hub-log.log'
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  /** 在系统文件管理器中定位日志文件。 */
+  const openFile = async () => {
+    if (opening) return
+    setOpening(true)
+    setOpenFailed(false)
+    const ok = await openLogFile()
+    setOpening(false)
+    if (!ok) setOpenFailed(true)
+  }
+
+  const preview = entries.slice(0, PREVIEW)
+  return h('div', { className: styles.panel },
+    h('div', { className: styles.head },
+      h('span', { className: styles.headHint }, t('logsHeadHint')),
+      h('div', { className: styles.actions },
+        h('button', {
+          type: 'button',
+          className: `${styles.btn} ${styles.btnPrimary}`,
+          onClick: () => setOpen(true),
+        }, t('logViewerOpen')),
+        h('button', { type: 'button', className: styles.btn, disabled: entries.length === 0, onClick: exportFile }, t('logsExport')),
+        h('button', { type: 'button', className: styles.btn, disabled: loading, onClick: () => void load() }, t('logsRefresh')),
+      ),
+    ),
+    // 日志存放位置：一行展示真实路径 + 「修改」弹窗编辑（手输 / 选目录）+ 一键定位文件
+    h('div', { className: styles.pathRow },
+      h('span', { className: styles.pathLabel }, t('logPathSettingTitle')),
+      h('span', { className: styles.pathText, title: path }, path === '' ? '…' : path),
+      openFailed && h('span', { className: styles.footFail }, t('logOpenFileFail')),
+      h('button', {
+        type: 'button',
+        className: styles.btn,
+        onClick: () => setShowPathModal(true),
+      }, t('logPathChange')),
+      h('button', {
+        type: 'button',
+        className: styles.btn,
+        disabled: opening || path === '',
+        title: t('logOpenFileTip'),
+        onClick: () => void openFile(),
+      }, t('logOpenFile')),
+    ),
+    error
+      ? h('div', { className: styles.empty }, t('logsLoadFail'))
+      : loading && entries.length === 0
+        ? h('div', { className: styles.empty }, t('logsLoading'))
+        : entries.length === 0
+          ? h('div', { className: styles.empty }, t('logsEmpty'))
+          : h('div', { className: styles.list },
+            preview.map((e, i) => h('button', {
+              key: `${e.at}-${i}`,
+              type: 'button',
+              className: styles.previewRow,
+              onClick: () => setOpen(true),
+              title: t('logViewerOpen'),
+            }, h(LogEntryRow, { e, t }))),
+          ),
+    open && h(LogsModal, { t, onClose: () => setOpen(false) }),
+    showPathModal && h(LogsPathModal, {
+      t,
+      defaultPath,
+      currentPath: path,
+      onSaved: (v: string) => {
+        onLogPathSaved(v)
+        void load() // 刷新生效路径与最近日志（新位置若已写入则立即可见）
+      },
+      onClose: () => setShowPathModal(false),
+    }),
+  )
+}