dsh-plugin-litellm-bridge 2.0.1 → 2.0.3

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;
+    }
 
     // -----------------------------------------------------------------------
     // 样式（内联，避免依赖外部样式表）
@@ -432,19 +457,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 +517,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 +563,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');
 

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.1",
+  "version": "2.0.3",
   "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",