dsh-plugin-litellm-bridge 2.0.6 → 2.0.8

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

@@ -582,6 +582,29 @@ window.__ModuleLoader__.load({
         }
       }, [draft, pid]);
 
+      // 模型池按供应商分组，供下拉与"添加"列表使用
+      //
+      // 【React #310 血案】这个 useMemo 原来写在下面两个提前 return **之后**：
+      //     if (!draft) return ...;      ← 首次渲染 draft=null，从这里返回
+      //     if (!prof)  return ...;
+      //     const byProvider = useMemo(...)   ← 首次渲染根本执行不到
+      // 第二次渲染（routes/get 返回后 draft 有值）才执行到这一行，
+      // hooks 数量从 N 变成 N+1 → React 抛
+      //     "Rendered more hooks than during the previous render."（#310）
+      // 表现：点「路由配置」→ 整页空白。
+      //
+      // 规则：**所有 hooks 必须写在任何条件 return 之前**，保证每次渲染
+      // 执行完全一样多的 hooks。所以把它移到这里。
+      const byProvider = useMemo(() => {
+        const m = new Map();
+        for (const x of pool.models || []) {
+          const key = x.provider || '未知供应商';
+          if (!m.has(key)) m.set(key, []);
+          m.get(key).push(x);
+        }
+        return [...m.entries()];
+      }, [pool.models]);
+
       // 加载失败时给出可读原因 + 重试，而不是无限「加载中…」
       if (!draft) {
         return h('div', null,
@@ -596,8 +619,16 @@ window.__ModuleLoader__.load({
             : h('div', { style: { opacity: 0.6 } }, '加载中…'),
         );
       }
-      const prof = draft[pid];
-      if (!prof) return h('div', { style: { opacity: 0.6 } }, '没有可用的 profile');
+      // 【防御】prof 可能是空对象或残缺结构。
+      // 先判断存在性再往下渲染，否则后面读 prof.agents[at] 会抛 TypeError。
+      const prof = draft?.[pid];
+      if (!prof || typeof prof !== 'object') {
+        return h('div', { style: S.notice('warn') },
+          `profile「${pid}」的数据不完整（缺少 agents 配置）。`,
+          h('div', { style: { ...S.hint } },
+            '可能来自旧版本的状态文件。可以在上方点击「+ 新建」创建新 profile，' +
+            '或删除当前 profile 后重建。'));
+      }
 
       const setAgent = (at, patch) =>
         setDraft((d) => {
@@ -692,17 +723,6 @@ window.__ModuleLoader__.load({
         setBusy(false);
       };
 
-      // 模型池按供应商分组，供下拉与"添加"列表使用
-      const byProvider = useMemo(() => {
-        const m = new Map();
-        for (const x of pool.models || []) {
-          const key = x.provider || '未知供应商';
-          if (!m.has(key)) m.set(key, []);
-          m.get(key).push(x);
-        }
-        return [...m.entries()];
-      }, [pool.models]);
-
       const allIds = (pool.models || []).map((x) => x.id);
 
       return h('div', null,
@@ -750,7 +770,10 @@ window.__ModuleLoader__.load({
 
         // ---- 三条链：root / coder / research ----
         AGENT_TYPES.map((at) => {
-          const cfg = prof.agents[at];
+          // 【防御】cfg 可能缺失（旧版 state.json 结构不全 / 宿主返回残缺）。
+          // 直接读 cfg.primary 会抛 TypeError，进而让整页崩掉。
+          const cfg = prof?.agents?.[at]
+            || { label: at, primary: '', timeoutMs: 600000, fallbacks: [] };
           const isSub = at !== 'root';
           const groupLabel = at === 'root' ? 'root · 主代理降级链'
             : at === 'coder' ? 'coder · 子代理降级链（Coder）'
@@ -1275,12 +1298,47 @@ window.__ModuleLoader__.load({
       );
     }
 
-    /** 用 try/catch 包住子渲染，异常时就地降级为错误块。 */
-    function Guard({ title, children }) {
-      try {
-        return children();
-      } catch (err) {
-        return h(ErrorBox, { title, error: err });
+    /**
+     * 错误边界 —— 必须是**真正的 React class 错误边界**。
+     *
+     * 【为什么之前那版是无效的】
+     * 原来写的是：
+     *   function Guard({ title, children }) {
+     *     try { return children(); } catch (err) { ... }
+     *   }
+     * 用法：h(Guard, {}, () => h(RouteTab, {...}))
+     *
+     * 问题：children() 只是**创建元素**（h() 是纯函数，返回一个普通对象），
+     * 此时并不会渲染 RouteTab。真正的渲染发生在 Guard 返回之后、React 内部。
+     * 所以 RouteTab 抛的异常**根本不在这个 try 里**，catch 永远抓不到，
+     * React 直接向上冒泡 → 整个设置页空白（连错误框都没有）。
+     * 这正是「点路由配置后整页全空、什么都不显示」的原因。
+     *
+     * 正确做法：class 组件的 getDerivedStateFromError / componentDidCatch，
+     * 这是 React 唯一能捕获子组件渲染异常的机制。
+     */
+    class Guard extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { error: null };
+      }
+      static getDerivedStateFromError(error) {
+        return { error };
+      }
+      componentDidCatch(error, info) {
+        // 打到控制台便于排查（浏览器 F12）
+        try {
+          console.error('[litellm-bridge] 渲染异常:', error, info?.componentStack);
+        } catch { /* ignore */ }
+      }
+      render() {
+        if (this.state.error) {
+          return h(ErrorBox, { title: this.props.title, error: this.state.error });
+        }
+        // children 既可能是元素也可能是函数，两种都支持
+        return typeof this.props.children === 'function'
+          ? this.props.children()
+          : this.props.children;
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-litellm-bridge",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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",