dsh-plugin-litellm-bridge 2.0.2 → 2.0.4

package/dsh-plugin-litellm-bridge/client/index.js

@@ -30,7 +30,32 @@ window.__ModuleLoader__.load({
 
     const NS = 'litellm-bridge';
     const AGENT_TYPES = ['root', 'coder', 'research'];
-    const PROFILE_IDS = ['profile-a', 'profile-b'];
+
+    // -----------------------------------------------------------------------
+    // 【渲染安全】把任意值转成可安全放进 React 子节点的字符串。
+    //
+    // 为什么必须有：React 直接渲染对象会抛
+    //   "Objects are not valid as a React child"
+    // 而我们的数据全部来自宿主 RPC —— 错误对象、undefined、嵌套结构都可能出现。
+    // 一次未捕获的渲染异常 = 整页空白（用户看到的就是这个）。
+    // -----------------------------------------------------------------------
+    function safeText(v, fallback = '') {
+      if (v === null || v === undefined) return fallback;
+      if (typeof v === 'string') return v;
+      if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+      if (v instanceof Error) return v.message || String(v);
+      try {
+        const s = JSON.stringify(v);
+        return typeof s === 'string' ? s : fallback;
+      } catch {
+        return String(v) || fallback;
+      }
+    }
+    /** 数字兜底：非有限数显示 0，避免 "undefined/undefined"。 */
+    function num(v) {
+      const n = Number(v);
+      return Number.isFinite(n) ? n : 0;
+    }
 
     // -----------------------------------------------------------------------
     // 样式（内联，避免依赖外部样式表）
@@ -254,7 +279,7 @@ window.__ModuleLoader__.load({
             },
           }),
           h('span', { style: { fontWeight: 600 } }, 'LiteLLM 网关'),
-          h('span', { style: S.badge(tone === 'ok' ? T.success : tone === 'error' ? T.error : T.warn) }, label),
+          h('span', { style: S.badge(tone === 'ok' ? T.success : tone === 'error' ? T.error : T.warn) }, safeText(label)),
           st?.owned && h('span', { style: S.badge(T.brand, tint(T.brand, 14)) }, '本插件托管'),
           !st?.owned && st?.alive && h('span', { style: S.badge() }, '外部运行 · 不接管'),
           h('span', { style: { marginLeft: 'auto', display: 'flex', gap: 6 } },
@@ -265,11 +290,18 @@ window.__ModuleLoader__.load({
           ),
         ),
         h('div', { style: { padding: '0 12px 10px', ...S.mono, fontSize: 11, color: T.labelSecondary, lineHeight: 1.7 } },
-          h('div', null, `地址：${st?.url || '—'}`),
-          h('div', null, `托管策略：${st?.ownership || '—'}${st?.autoStart === false ? '（autoStartGateway 已关闭）' : ''}`),
-          st?.lastError && h('div', { style: { color: T.error } }, `最近错误：${st.lastError}`),
+          // 【必须 safeText】这些值来自宿主 RPC，可能是对象 / undefined / Error。
+          // 直接插进子节点会触发 React #62（Objects are not valid as a React child），
+          // 整个设置页白屏 —— 实测「点测试连通性后白屏」就是这个原因之一。
+          h('div', null, `地址：${safeText(st?.url, '—')}`),
+          h('div', null,
+            `托管策略：${safeText(st?.ownership, '—')}` +
+            (st?.autoStart === false ? '（autoStartGateway 已关闭）' : '')),
+          st?.lastError && h('div', { style: { color: T.error } },
+            `最近错误：${safeText(st.lastError)}`),
           !st?.lastError && st?.lastExit?.abnormal &&
-            h('div', { style: { color: T.error } }, `异常退出记录：code=${st.lastExit.code}`),
+            h('div', { style: { color: T.error } },
+              `异常退出记录：code=${safeText(st.lastExit.code, '?')}`),
         ),
       );
     }
@@ -313,7 +345,7 @@ window.__ModuleLoader__.load({
             h('select', {
               style: { ...S.inputAuto, minWidth: 110 },
               value: pid, onChange: (e) => setPid(e.target.value),
-            }, ...(profileIds || []).map((p) => h('option', { key: p, value: p }, p))),
+            }, ...(profileIds || []).map((p) => h('option', { key: p, value: p }, safeText(p)))),
             h('select', {
               style: { ...S.inputAuto, minWidth: 110 },
               value: agentType, onChange: (e) => setAgentType(e.target.value),
@@ -348,7 +380,7 @@ window.__ModuleLoader__.load({
             },
               h('span', { style: S.badge() }, String(i + 1)),
               i === 0 && h('span', { style: S.badge(T.brand, tint(T.brand, 14)) }, '首选'),
-              h('span', { style: { ...S.mono, flex: 1, wordBreak: 'break-all' } }, m),
+              h('span', { style: { ...S.mono, flex: 1, wordBreak: 'break-all' } }, safeText(m)),
               row && h('span', { style: { ...S.mono, fontSize: 11, color: row.ok ? T.success : T.error } },
                 row.ok ? '✓' : '✗'),
               row && row.latencyMs != null && h('span', {
@@ -361,7 +393,7 @@ window.__ModuleLoader__.load({
           }),
         ),
 
-        err && h('div', { style: S.notice('error') }, err),
+        err && h('div', { style: S.notice('error') }, safeText(err)),
 
         result && h('div', null,
           h('div', { style: { ...S.row, marginBottom: 8 } },
@@ -432,19 +464,28 @@ window.__ModuleLoader__.load({
 
         test && h('div', { style: S.card },
           h('div', { style: { marginBottom: 8, fontWeight: 600 } },
-            test.ok ? h('span', { style: S.ok }, `✓ 连通正常（${test.passed}/${test.total}）`)
-              : h('span', { style: S.err }, `✗ 连通异常（${test.passed}/${test.total}）`),
+            test.ok
+              ? h('span', { style: S.ok },
+                  `✓ 连通正常（${num(test.passed)}/${num(test.total)}）`)
+              : h('span', { style: S.err },
+                  `✗ 连通异常（${num(test.passed)}/${num(test.total)}）`),
           ),
-          (test.steps || []).map((s, i) => h('div', {
-            key: i, style: { display: 'flex', gap: 8, padding: '4px 0', alignItems: 'baseline' },
+          // 【防御】steps 里任何字段都可能是非字符串（对象/undefined/错误实例）。
+          // 直接把对象塞进 React 子节点会抛 "Objects are not valid as a React child"，
+          // 整个页面变空白 —— 这正是「点测试连通性后白屏」的直接原因。
+          (Array.isArray(test.steps) ? test.steps : []).map((s, i) => h('div', {
+            key: i, style: { display: 'flex', gap: 8, padding: '4px 0', alignItems: 'baseline', flexWrap: 'wrap' },
           },
-            h('span', { style: s.ok ? S.ok : S.err }, s.ok ? '✓' : '✗'),
-            h('span', { style: { minWidth: 110 } }, s.name),
-            h('span', { style: { ...S.mono, opacity: 0.6 } }, s.path),
-            h('span', { style: { ...S.mono, opacity: 0.85, marginLeft: 'auto', textAlign: 'right' } }, s.detail),
+            h('span', { style: s?.ok ? S.ok : S.err }, s?.ok ? '✓' : '✗'),
+            h('span', { style: { minWidth: 110 } }, safeText(s?.name)),
+            h('span', { style: { ...S.mono, opacity: 0.6 } }, safeText(s?.path)),
+            h('span', { style: { ...S.mono, opacity: 0.85, marginLeft: 'auto', textAlign: 'right', wordBreak: 'break-all' } },
+              safeText(s?.detail)),
           )),
+          !Array.isArray(test.steps) && safeText(test.error) &&
+            h('div', { style: S.notice('error') }, safeText(test.error)),
           h('div', { style: { marginTop: 8, ...S.mono, opacity: 0.55 } },
-            `key 来源：${test.keySource || '—'}`),
+            `key 来源：${safeText(test.keySource, '—')}`),
         ),
 
         state?.statePath && h('div', { style: { ...S.mono, opacity: 0.45, marginTop: 4 } },
@@ -483,12 +524,33 @@ window.__ModuleLoader__.load({
       const [poolBusy, setPoolBusy] = useState(false);
       const [newId, setNewId] = useState('');
       const [showNew, setShowNew] = useState(false);
+      /** 【必须】加载失败要显示原因，否则永远停在「加载中…」 */
+      const [loadErr, setLoadErr] = useState(null);
       const dragRef = useRef(null);
 
       useEffect(() => {
         if (state?.routes) setDraft(JSON.parse(JSON.stringify(state.routes)));
       }, [state?.routes]);
 
+      // 【兜底加载】不依赖父组件的 state。
+      // 之前 draft 只由 state.routes 驱动：一旦 gateway/get 失败（例如路由没注册），
+      // state 永远是 null，这一页就永久停在「加载中…」——用户看到的正是这个。
+      // 现在自己拉一次 routes/get，成功就填 draft，失败就显示错误。
+      useEffect(() => {
+        let alive = true;
+        (async () => {
+          const r = await api('routes/get');
+          if (!alive) return;
+          if (r.ok && r.data) {
+            setDraft(JSON.parse(JSON.stringify(r.data)));
+            setLoadErr(null);
+          } else {
+            setLoadErr(r.error || '宿主没有返回 profile 配置');
+          }
+        })();
+        return () => { alive = false; };
+      }, [api]);
+
       // 【需求2】模型池来自 DSH 设置-模型
       const loadPool = useCallback(async () => {
         setPoolBusy(true);
@@ -508,7 +570,20 @@ window.__ModuleLoader__.load({
         }
       }, [draft, pid]);
 
-      if (!draft) return h('div', { style: { opacity: 0.6 } }, '加载中…');
+      // 加载失败时给出可读原因 + 重试，而不是无限「加载中…」
+      if (!draft) {
+        return h('div', null,
+          loadErr
+            ? h('div', { style: S.notice('error') },
+                h('div', { style: { fontWeight: 600, marginBottom: 4 } }, '读取路由配置失败'),
+                h('div', { style: { ...S.mono, fontSize: 11.5, wordBreak: 'break-all' } }, String(loadErr)),
+                h('div', { style: { ...S.hint, marginTop: 6 } },
+                  '这通常意味着插件宿主半没有响应该请求。请重启 DSH 后再试；' +
+                  '若持续出现，请把这条错误发给开发者。'),
+              )
+            : h('div', { style: { opacity: 0.6 } }, '加载中…'),
+        );
+      }
       const prof = draft[pid];
       if (!prof) return h('div', { style: { opacity: 0.6 } }, '没有可用的 profile');
 
@@ -672,7 +747,7 @@ window.__ModuleLoader__.load({
 
           return h('div', { key: at },
             h('div', { style: S.h2Row },
-              h('h2', { style: S.h2 }, groupLabel),
+              h('h2', { style: S.h2 }, safeText(groupLabel)),
               isSub && h('span', { style: S.badge() }, '仅子 Agent 使用'),
               h('span', { style: { ...S.mono, fontSize: 11, color: T.labelSecondary } },
                 chainLen ? `链长 ${chainLen}` : '未配置'),
@@ -863,11 +938,11 @@ window.__ModuleLoader__.load({
         h('div', { style: { ...S.row, marginBottom: 10 } },
           h('select', { style: { ...S.input, width: 'auto' }, value: fAgent, onChange: (e) => setFAgent(e.target.value) },
             h('option', { value: '' }, '全部 agent-type'),
-            agents.map((a) => h('option', { key: a, value: a }, a)),
+            agents.map((a) => h('option', { key: a, value: a }, safeText(a))),
           ),
           h('select', { style: { ...S.input, width: 'auto' }, value: fProfile, onChange: (e) => setFProfile(e.target.value) },
             h('option', { value: '' }, '全部 profile'),
-            profiles.map((p) => h('option', { key: p, value: p }, p)),
+            profiles.map((p) => h('option', { key: p, value: p }, safeText(p))),
           ),
           h('span', { style: { marginLeft: 'auto', ...S.mono, fontSize: 11, color: T.labelSecondary } },
             `显示 ${shown.length} / 最多 ${limit} 条`),
@@ -896,9 +971,9 @@ window.__ModuleLoader__.load({
                 l.time ? String(l.time).replace('T', ' ').slice(0, 19) : '—'),
               isGwEvent
                 ? h('span', { style: S.badge(T.brand, tint(T.brand, 14)) }, 'gateway')
-                : h('span', { style: S.badge() }, l.agentType),
-              !isGwEvent && h('span', { style: S.badge() }, l.profile),
-              h('span', { style: { ...S.mono, fontWeight: 600 } }, l.model),
+                : h('span', { style: S.badge() }, safeText(l.agentType, '-')),
+              !isGwEvent && h('span', { style: S.badge() }, safeText(l.profile, '-')),
+              h('span', { style: { ...S.mono, fontWeight: 600 } }, safeText(l.model)),
               l.source === 'local' && !isGwEvent && h('span', { style: S.badge(T.brand, tint(T.brand, 14)) }, 'local'),
               k === 'fallback' && h('span', { style: S.badge(T.warn, tint(T.warn, 14)) }, 'FALLBACK'),
               k === 'failed' && h('span', { style: S.badge(T.error, tint(T.error, 14)) }, '失败'),
@@ -986,7 +1061,7 @@ window.__ModuleLoader__.load({
               style: S.input, value: profile, onChange: (e) => setProfile(e.target.value),
             },
               h('option', { value: '' }, '（不绑定）'),
-              profileIds.map((p) => h('option', { key: p, value: p }, p)),
+              profileIds.map((p) => h('option', { key: p, value: p }, safeText(p))),
             ),
             h('div', { style: S.hint },
               '绑定后：本会话的 root 请求按该 profile 的 root 链走；spawn 的子 Agent 按同 profile 的 coder/research 链走。'),

package/dsh-plugin-litellm-bridge/lib/index.js

@@ -626,73 +626,112 @@ export function apply(ctx, config = {}) {
   // HTTP 路由（客户端 RPC 入口）
   //
   // 前缀刻意不是 /api（那是 dsh-api-gateway 的领地，实测 404）。
+  //
+  // 【致命坑 · 必须用 ctx.inject 延迟注册】
+  //   之前写成：
+  //     const webServer = ctx.get('webServer');   // 一次性同步取值
+  //     if (webServer) webServer.register({...})
+  //   因为 inject 已清空（避免 pending/failed），apply 可能在 webServer
+  //   就绪**之前**就跑完 —— 此时 ctx.get 返回 undefined，
+  //   整个 if 被跳过，路由**静默**没有注册。
+  //   现象：UI 全部能渲染（client 半独立生效），但每一次 RPC 都失败：
+  //     · 网关状态卡的地址/托管策略显示 "—"
+  //     · 一键探针的 profile 下拉为空
+  //     · 路由配置卡在"加载中…"
+  //   实测指纹：GET /plugins/dsh-plugin-litellm-bridge → 404，
+  //             POST → 405（DSH 对未知路径 POST 的默认应答）
+  //   对照能正常工作的 dsh-connect-trae：
+  //     ctx.inject(["webServer"], (webCtx) => registerRoute(webCtx, ...))
+  //   —— 它把注册**推迟到 webServer 就绪时**执行，这是正确写法。
   // -------------------------------------------------------------------------
-  const webServer = (() => {
-    try {
-      return typeof ctx.get === 'function' ? ctx.get('webServer') : ctx.webServer;
-    } catch {
-      return undefined;
-    }
-  })();
-
-  if (webServer && typeof webServer.register === 'function') {
-    ctx.effect?.(() =>
-      webServer.register({
-        kind: 'prefix',
-        path: ROUTE_BASE,
-        handler: async (req, res) => {
-          const send = (status, payload) => {
-            try {
-              const body = JSON.stringify(payload);
-              res.writeHead(status, {
-                'Content-Type': 'application/json; charset=utf-8',
-                'Cache-Control': 'no-store',
-              });
-              res.end(body);
-            } catch (err) {
-              try { res.destroy?.(err); } catch { /* ignore */ }
-            }
-          };
-
+  const registerRoute = (webCtx) => {
+    const dispose = webCtx.webServer.register({
+      kind: 'prefix',
+      path: ROUTE_BASE,
+      handler: async (req, res) => {
+        const send = (status, payload) => {
           try {
-            if (req.method !== 'POST') {
-              res.writeHead(405, { Allow: 'POST', 'Content-Type': 'application/json' });
-              res.end(JSON.stringify({ ok: false, error: '只接受 POST' }));
-              return;
-            }
+            const body = JSON.stringify(payload);
+            res.writeHead(status, {
+              'Content-Type': 'application/json; charset=utf-8',
+              'Cache-Control': 'no-store',
+            });
+            res.end(body);
+          } catch (err) {
+            try { res.destroy?.(err); } catch { /* ignore */ }
+          }
+        };
+
+        try {
+          if (req.method !== 'POST') {
+            res.writeHead(405, { Allow: 'POST', 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ ok: false, error: '只接受 POST' }));
+            return;
+          }
 
-            const urlPath = String(req.url || '').split('?')[0];
-            const tail = urlPath.startsWith(ROUTE_BASE)
-              ? urlPath.slice(ROUTE_BASE.length).replace(/^\/+/, '')
-              : '';
-
-            const chunks = [];
-            let size = 0;
-            for await (const chunk of req) {
-              size += chunk.length;
-              if (size > 1024 * 1024) {
-                send(413, { ok: false, error: '请求体过大' });
-                return;
-              }
-              chunks.push(chunk);
+          const urlPath = String(req.url || '').split('?')[0];
+          const tail = urlPath.startsWith(ROUTE_BASE)
+            ? urlPath.slice(ROUTE_BASE.length).replace(/^\/+/, '')
+            : '';
+
+          const chunks = [];
+          let size = 0;
+          for await (const chunk of req) {
+            size += chunk.length;
+            if (size > 1024 * 1024) {
+              send(413, { ok: false, error: '请求体过大' });
+              return;
             }
-            const raw = Buffer.concat(chunks).toString('utf8');
-            let payload = {};
-            try { payload = raw ? JSON.parse(raw) : {}; } catch { payload = {}; }
-
-            let action = tail;
-            if (!action && payload?.action) action = String(payload.action);
-            const args = payload?.args ?? payload ?? {};
-            send(200, await handle(action, args));
-          } catch (err) {
-            send(200, { ok: false, error: String(err?.message || err) });
+            chunks.push(chunk);
           }
-        },
-      }),
-    );
+          const raw = Buffer.concat(chunks).toString('utf8');
+          let payload = {};
+          try { payload = raw ? JSON.parse(raw) : {}; } catch { payload = {}; }
+
+          let action = tail;
+          if (!action && payload?.action) action = String(payload.action);
+          const args = payload?.args ?? payload ?? {};
+          send(200, await handle(action, args));
+        } catch (err) {
+          send(200, { ok: false, error: String(err?.message || err) });
+        }
+      },
+    });
     ctx.logger?.info?.(`[litellm-bridge] 已注册 RPC 路由 ${ROUTE_BASE}`);
-  } else {
-    ctx.logger?.warn?.('[litellm-bridge] webServer 不可用，UI 将无法访问宿主能力');
+    return dispose;
+  };
+
+  // 首选：等服务就绪后注册（正确语义）
+  let routeRegistered = false;
+  if (typeof ctx.inject === 'function') {
+    try {
+      ctx.inject(['webServer'], (webCtx) => {
+        if (routeRegistered) return () => {};
+        routeRegistered = true;
+        const dispose = registerRoute(webCtx);
+        return () => { try { dispose?.(); } catch { /* ignore */ } };
+      });
+    } catch (err) {
+      ctx.logger?.warn?.(`[litellm-bridge] ctx.inject 注册失败: ${err?.message || err}`);
+    }
+  }
+
+  // 兜底：个别宿主版本里 inject 回调不会触发（或 webServer 早已就绪），
+  // 那就同步注册一次。routeRegistered 保证只有一条路径生效。
+  if (!routeRegistered) {
+    let ws;
+    try {
+      ws = typeof ctx.get === 'function' ? ctx.get('webServer') : ctx.webServer;
+    } catch { ws = undefined; }
+    if (ws && typeof ws.register === 'function') {
+      routeRegistered = true;
+      ctx.effect?.(() => registerRoute({ webServer: ws }));
+    }
+  }
+  if (!routeRegistered) {
+    ctx.logger?.warn?.(
+      '[litellm-bridge] webServer 尚未就绪，已通过 ctx.inject 等待其回调；届时会自动注册路由',
+    );
   }
 
   // -------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-litellm-bridge",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "LiteLLM gateway bridge for DSH: assemble root / coder / research fallback chains from the DSH model pool and hand the order to a LiteLLM gateway that executes retries and fallbacks. The plugin performs no routing itself.",
   "keywords": [
     "dsh",