dsh-plugin-litellm-bridge 2.0.5 → 2.0.7

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

@@ -484,7 +484,11 @@ window.__ModuleLoader__.load({
           (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 ? '✓' : '✗'),
+            // 【血案 2】这里原来是 { style: s?.ok ? S.ok : S.err } —— 三元的结果
+            // 依然是**颜色字符串**，style 收到字符串就抛 React #62。
+            // 上一轮我只修了上面的 test.ok 分支，漏了这个三元形态，
+            // 所以「点测试连通性」依旧白屏。必须包成 { color: ... }。
+            h('span', { style: { color: 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' } },
@@ -592,8 +596,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) => {
@@ -746,7 +758,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）'
@@ -1271,12 +1286,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.5",
+  "version": "2.0.7",
   "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",