dsh-router-core 0.3.21 → 0.4.1

package/src/client/ExtDetail.tsx

@@ -1,20 +1,18 @@
 /**
  * 扩展详情页 —— 从设置 → 路由 → 扩展 的卡片点进来。
  *
- * 通用：返回键 + 扩展名/说明/就绪态。`watch` 扩展再渲染进程监控面板：
- * 实时采样「agent 启动的进程」，每行 PID / 命令 / CPU% / 内存%，**只读**——不提供
- * kill（杀进程是大事，交由用户在 CLI 自己操作）。面板提供「复制 PID」和
- * 「复制 kill 命令」两个剪贴板动作方便用户去终端处理。
- * 进程数据走后端 `/router/api/ext/:id/processes`；`ps` 瞬时失败时保留上一帧，别刷成
- * 整屏错误。
+ * **只读：开关不在这一层。** 启停的唯一入口是官方插件页（设置 → 插件 →
+ * dsh-router-core 详情页的「路由组件」一节），那里直接调核心的
+ * `PATCH /router/api/ext`，自检与持久化都由核心裁决。同一件事只留一个开关，
+ * 否则两处状态各说各话。
+ *
+ * 列表页只列**已启用**的扩展（关闭的连卡片都不出现），所以这里也不必再显示
+ * 「已启用/未启用」——那行字只能是常量。布局同供应商详情：返回链接 + 图标 +
+ * 名称/副行，下面跟扩展说明卡与未就绪横幅。有 `api()` 支持的自定义扩展可在未来
+ * 按需加独立面板，此处不内置任何具体扩展的专属视图。
  */
-import { useEffect, useRef, useState } from 'react'
-import {
-  ROUTER_API_BASE,
-  type RouterExtItem,
-  type RouterWatchProcess,
-  type RouterWatchResponse,
-} from '../shared.ts'
+import type { RouterExtItem } from '../shared.ts'
+import { extPanel } from './ext-panels.ts'
 
 function Icon({ d, size = 18 }: { d: string; size?: number }): JSX.Element {
   return (
@@ -26,42 +24,19 @@ function Icon({ d, size = 18 }: { d: string; size?: number }): JSX.Element {
 
 const I = {
   back: 'M19 12H5M12 19l-7-7 7-7',
-  refresh: 'M20.5 12a8.5 8.5 0 1 1-2.6-6.1M20.5 4v5h-5',
-  node: 'M8 5.5L12 3l4 2.5v5L12 13l-4-2.5v-5zM4 9v5l4 2.5M12 13v5l4-2.5M20 9v5l-4 2.5',
   bolt: 'M13 2L4 14h6l-1 8 9-12h-6z',
-  copy: 'M8 8h11v11H8zM5 14H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1',
-  check: 'M4 12.5l5 5L20 6.5',
-}
-
-/** 刷新按钮（带禁用中旋转）。 */
-function RefreshBtn({ onClick, busy }: { onClick: () => void; busy: boolean }): JSX.Element {
-  return (
-    <button
-      type="button"
-      className="dshr-iconButton"
-      onClick={onClick}
-      disabled={busy}
-      title="刷新进程"
-      aria-label="刷新进程"
-    >
-      <span className={busy ? 'dshr-spin' : undefined}><Icon d={I.refresh} size={16} /></span>
-    </button>
-  )
-}
-
-function fmtPct(v: number | undefined): string {
-  const n = v ?? 0
-  return `${n.toFixed(1)}%`
 }
 
 interface ExtDetailProps {
   item: RouterExtItem
   onBack: () => void
-  /** 开关切换（由列表页持有状态与 PATCH；这里只做触发）。 */
-  onToggle: (item: RouterExtItem, value: boolean) => void
 }
 
-export function ExtDetail({ item, onBack, onToggle }: ExtDetailProps): JSX.Element {
+export function ExtDetail({ item, onBack }: ExtDetailProps): JSX.Element {
+  // 扩展**自带**详情面板时用它（插件自检就是这么做的：选供应商/模型/连接 + 跑测试）。
+  // 没有就退回下面这张通用只读页 —— 保留返回链接与标题，导航形状与有没有自定义
+  // 面板无关，用户点进去的预期是稳定的。
+  const Custom = extPanel(item.id)
   return (
     <div className="dshr-tabBody">
       {/* Header（同供应商详情：返回链接 + 图标 + 名称/副行） */}
@@ -72,33 +47,31 @@ export function ExtDetail({ item, onBack, onToggle }: ExtDetailProps): JSX.Eleme
         </button>
         <div className="dshr-providerTitleRow">
           <div className="dshr-providerIcon" style={{ color: 'var(--rs-faint)', background: 'var(--rs-layer-2)' }}>
-            <Icon d={I.bolt} size={22} />
+            {item.icon !== undefined
+              ? (
+                <img
+                  className="dshr-providerImg"
+                  src={item.icon}
+                  alt=""
+                  // 同上：失败就藏，露出备用图标位置（不显示碎图）
+                  onError={(e) => { e.currentTarget.style.display = 'none' }}
+                />
+              )
+              : <Icon d={I.bolt} size={22} />}
           </div>
           <div className="dshr-providerMeta">
             <h1 className="dshr-providerName">{item.name}</h1>
             <p className="dshr-providerCount">
               <span className="dshr-mono">{item.id}</span>
-              {item.enabled ? ' · 已启用' : ' · 未启用'}
               {item.ready === false ? ' · 未就绪' : ''}
             </p>
           </div>
-          {/* 开关放在标题行右侧（同供应商详情的编辑按钮位） */}
-          <button
-            type="button"
-            className={`dshr-toggle dshr-extDetailToggle ${item.enabled ? 'dshr-toggle-on' : ''}`}
-            role="switch"
-            aria-checked={!!item.enabled}
-            disabled={item.ready === false && !item.enabled}
-            onClick={() => void onToggle(item, !item.enabled)}
-            title={item.ready === false && !item.enabled
-              ? '当前不可用,无法开启'
-              : item.enabled ? `关闭 ${item.name}` : `开启 ${item.name}`}
-          >
-            <span className="dshr-toggleKnob" />
-          </button>
         </div>
       </div>
 
+      {/* 扩展自带的面板（注册表里没有就落回下面这两块通用内容） */}
+      {Custom !== undefined ? <Custom /> : (
+        <>
       {/* 扩展说明 */}
       {item.description !== undefined && item.description !== '' && (
         <section className="dshr-card">
@@ -113,145 +86,8 @@ export function ExtDetail({ item, onBack, onToggle }: ExtDetailProps): JSX.Eleme
           <span>{item.detail !== undefined && item.detail !== '' ? item.detail : '当前不可用'}</span>
         </div>
       )}
-
-      {item.id === 'watch' ? <WatchPanel /> : null}
+        </>
+      )}
     </div>
   )
 }
-
-/** watch 的进程监控面板：轮询采样（只读）+ 复制 PID / 复制 kill 命令。 */
-function WatchPanel(): JSX.Element {
-  const [processes, setProcesses] = useState<RouterWatchProcess[]>([])
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(true)
-  // 刚复制成的那条（pid + 文本），显示「已复制」提示，1.2s 后清除。
-  const [copied, setCopied] = useState<{ pid: number; text: string } | null>(null)
-  const alive = useRef(true)
-  const now = useRef(Date.now())
-
-  useEffect(() => {
-    alive.current = true
-    return () => { alive.current = false }
-  }, [])
-
-  const load = async (): Promise<void> => {
-    try {
-      const res = await fetch(`${ROUTER_API_BASE}/ext/watch/processes`, { cache: 'no-store' })
-      if (!res.ok) {
-        // 尽量把后端的原因露出来（如「extension not found」/「extension api not found」），
-        // 别只剩 `HTTP 404`——它分不清是扩展没装、还是 api 没命中。
-        let reason = ''
-        try {
-          const err = await res.json() as { error?: string }
-          if (err.error) reason = ` — ${err.error}`
-        } catch { /* 非 JSON 响应体,忽略 */ }
-        if (alive.current) setError(`HTTP ${res.status}${reason}`)
-        return
-      }
-      // 响应体非 JSON(历史上 404 空 body 会在这里抛 Unexpected end of JSON input)。
-      // 分开 try,别把"非 JSON"混进网络错误的文案里。
-      let data: RouterWatchResponse
-      try {
-        data = await res.json() as RouterWatchResponse
-      } catch {
-        if (alive.current) setError('响应不是 JSON')
-        return
-      }
-      if (!alive.current) return
-      setError(data.ok ? '' : (data.error ?? '加载进程失败'))
-      if (data.ok && data.processes !== undefined) setProcesses(data.processes) // ?: 失败保留上一帧
-    } catch (err) {
-      if (alive.current) setError((err as Error).message) // 失败保留上一帧
-    } finally {
-      if (alive.current) setLoading(false)
-    }
-  }
-
-  // 进入面板后轮询采样（3s；离开卸载）。
-  useEffect(() => {
-    void load()
-    const timer = setInterval(() => { void load() }, 3000)
-    return () => clearInterval(timer)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const copy = (pid: number, text: string): void => {
-    const stamp = Date.now()
-    now.current = stamp
-    void navigator.clipboard.writeText(text)
-      .then(() => {
-        if (alive.current && now.current === stamp) {
-          setCopied({ pid, text })
-          setTimeout(() => { if (alive.current) setCopied((c) => c?.pid === pid ? null : c) }, 1200)
-        }
-      })
-      .catch(() => { if (alive.current) setError('复制失败') })
-  }
-
-  return (
-    <section className="dshr-card">
-      <div className="dshr-cardHead">
-        <span className="dshr-cardIcon"><Icon d={I.node} /></span>
-        <div className="dshr-cardTitle">运行进程</div>
-        <span className="dshr-cardMeta">agent 启动 · 只读 · 3s 采样</span>
-        <RefreshBtn onClick={() => void load()} busy={loading} />
-      </div>
-
-      {error !== '' && (
-        <div className="dshr-alert"><strong>采样失败</strong><span>{error}（保留上一帧）</span></div>
-      )}
-
-      {!loading && processes.length === 0 ? (
-        <div className="dshr-empty">
-          暂无会话中 agent 启动的进程。运行诸如 <code>node server.js</code> 的长驻命令后
-          会出现在这里。
-        </div>
-      ) : (
-        <div className="dshr-rankList">
-          <div className="dshr-rankRow dshr-rankHead">
-            <span className="dshr-rankName">PID / 命令</span>
-            <span className="dshr-rankNum">CPU</span>
-            <span className="dshr-rankNum">内存</span>
-            <span className="dshr-rankNum" />
-          </div>
-          {processes.map((p) => {
-            const done = copied?.pid === p.pid
-            return (
-              <div key={p.pid} className="dshr-rankRow">
-                <span className="dshr-rankName dshr-mono" title={p.command}>
-                  <span className="dshr-muted">{p.pid}</span>&ensp;{p.command}
-                </span>
-                <span className="dshr-rankNum">{fmtPct(p.cpu)}</span>
-                <span className="dshr-rankNum">{fmtPct(p.mem)}</span>
-                <span className="dshr-rankNum dshr-procOps">
-                  {done
-                    ? <span className="dshr-muted"><Icon d={I.check} size={13} /> 已复制</span>
-                    : (
-                      <>
-                        <button
-                          type="button"
-                          className="dshr-miniButton"
-                          onClick={() => copy(p.pid, String(p.pid))}
-                          title={`复制 PID ${p.pid}`}
-                        >
-                          <Icon d={I.copy} size={13} /> PID
-                        </button>
-                        <button
-                          type="button"
-                          className="dshr-miniButton"
-                          onClick={() => copy(p.pid, `kill -TERM ${p.pid}`)}
-                          title={`复制 kill -TERM ${p.pid}`}
-                        >
-                          <Icon d={I.copy} size={13} /> kill
-                        </button>
-                      </>
-                    )}
-                </span>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </section>
-  )
-}

package/src/client/ExtTab.tsx

@@ -1,12 +1,16 @@
 /**
- * 扩展 (Ext) 页 —— 列出所有注册进 `router.ext` 的扩展插件,每个一个开关。
+ * 扩展 (Ext) 页 —— 列出**已启用**的扩展插件，只读。
  *
- * 数据来自 `/router/api/ext`:核心把自己存的开关(`ext.json`)+ 扩展器报的
- * 运行时事实(`ready` / `detail`)合并后给面板。扩展器只实现具体能力(如 RTK),
- * 开关与渲染都在核心。
+ * 数据来自 `/router/api/ext`：核心把自己存的开关（`ext.json`）+ 扩展器报的
+ * 运行时事实（`ready` / `detail`）合并后给面板。扩展器只实现具体能力（如 RTK）。
  *
- * 布局贴近 EndpointTab 的「Require API key」开关行:每个扩展器一张卡片。
- * 未装任何扩展 → 空状态提示。
+ * 两个刻意的形状（与「开关在官方插件页」这一决定配套）：
+ *   1. **只列已启用的** —— 关闭的扩展连卡片都不出现。这里是「正在生效的东西」的
+ *      展台，不是配置页；要去改开关，去设置 → 插件 → dsh-router-core 详情页的
+ *      「路由组件」一节。
+ *   2. **本页不发 PATCH** —— 启停只有一个入口，避免两处状态各说各话。
+ *
+ * 未装任何扩展，或装了但都没启用 → 同一条空状态提示。
  */
 import { useEffect, useRef, useState } from 'react'
 import { ROUTER_API_BASE, type RouterExtItem, type RouterExtResponse } from '../shared.ts'
@@ -21,8 +25,8 @@ function Icon({ d, size = 18 }: { d: string; size?: number }): JSX.Element {
 }
 
 const I = {
-  bolt: 'M13 2L4 14h6l-1 8 9-12h-6l1-8z',
-  puzzle: 'M4 7h3a2 2 0 0 1 4 0h5a1 1 0 0 1 1 1v4a2 2 0 0 0 0 4v4H8v-3a2 2 0 0 1 0-4H4V7z',
+  bolt: 'M13 2L4 14h6l-1 8 9-12h-6z',
+  puzzle: 'M4 7h3a2 2 0 0 1 4 0h5a2 2 0 0 1 2 1v4a2 2 0 0 0 0 4v4H8v-3a2 2 0 0 1 0-4H4V7z',
 }
 
 export function ExtTab(): JSX.Element {
@@ -55,36 +59,13 @@ export function ExtTab(): JSX.Element {
     }
   }
 
-  const toggle = async (item: RouterExtItem, value: boolean): Promise<void> => {
-    // 乐观更新
-    setItems(prev => prev.map(i => i.id === item.id ? { ...i, enabled: value } : i))
-    setError('')
-    try {
-      const response = await fetch(`${ROUTER_API_BASE}/ext`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id: item.id, enabled: value }),
-        cache: 'no-store',
-      })
-      const data = await response.json() as RouterExtResponse
-      if (mounted.current && data.enhancers) {
-        setItems(data.enhancers)
-      } else if (mounted.current && !data.ok) {
-        setError(data.error ?? '切换失败')
-        setItems(prev => prev.map(i => i.id === item.id ? { ...i, enabled: !value } : i))
-      }
-    } catch (err) {
-      if (mounted.current) {
-        setError((err as Error).message)
-        setItems(prev => prev.map(i => i.id === item.id ? { ...i, enabled: !value } : i))
-      }
-    }
-  }
+  // 只展已启用的。`enabled` 缺失按未启用读（与插件页同一口径：没拿到的事实不当真）。
+  const shown = items.filter(item => item.enabled === true)
 
-  // 打开详情视图：用 live item（否则详情里的开关状态不会随列表更新）。
-  const selected = selectedId !== null ? items.find((i) => i.id === selectedId) ?? null : null
+  // 打开详情视图：用 live item（详情里显示的是加载那一刻的运行时事实）。
+  const selected = selectedId !== null ? shown.find((i) => i.id === selectedId) ?? null : null
   if (selected !== null) {
-    return <ExtDetail item={selected} onBack={() => setSelectedId(null)} onToggle={toggle} />
+    return <ExtDetail item={selected} onBack={() => setSelectedId(null)} />
   }
 
   return (
@@ -95,17 +76,18 @@ export function ExtTab(): JSX.Element {
 
       {!loaded ? (
         <div className="dshr-empty">加载中…</div>
-      ) : items.length === 0 ? (
+      ) : shown.length === 0 ? (
         <div className="dshr-keyEmpty">
           <span className="dshr-keyEmptyIcon"><Icon d={I.puzzle} size={30} /></span>
-          <p className="dshr-keyEmptyTitle">暂无扩展</p>
+          <p className="dshr-keyEmptyTitle">暂无启用的扩展</p>
           <p className="dshr-keyEmptyDesc">
-            安装扩展插件(如 <code>dsh-router-ext-watch</code>)后,这里会出现开关
+            开关在 <strong>设置 → 插件 → dsh-router-core</strong> 的「路由组件」一节；
+            启用后这里会列出它
           </p>
         </div>
       ) : (
         <div className="dshr-supplierGrid">
-          {items.map(item => {
+          {shown.map(item => {
             const notReady = item.ready === false
             return (
               <section key={item.id} className="dshr-supplierCard" onClick={() => setSelectedId(item.id)}>
@@ -130,7 +112,8 @@ export function ExtTab(): JSX.Element {
                 )}
 
                 <div className="dshr-supplierMeta">
-                  <span className="dshr-muted">{item.enabled ? '已启用' : '未启用'}</span>
+                  {/* 描述留在详情页（卡片放不下）；这一行放稳定的 id，够短不会撑破布局 */}
+                  <span className="dshr-mono dshr-muted">{item.id}</span>
                   <span className="dshr-chevron">›</span>
                 </div>
               </section>
@@ -140,4 +123,4 @@ export function ExtTab(): JSX.Element {
       )}
     </div>
   )
-}
+}