dsh-plugin-litellm-bridge 2.0.3 → 2.0.5

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

@@ -279,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 } },
@@ -290,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, '?')}`),
         ),
       );
     }
@@ -338,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),
@@ -373,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', {
@@ -386,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 } },
@@ -457,10 +464,18 @@ window.__ModuleLoader__.load({
 
         test && h('div', { style: S.card },
           h('div', { style: { marginBottom: 8, fontWeight: 600 } },
+            // 【血案】这里原来写的是 { style: S.ok } / { style: S.err }。
+            // S.ok / S.err 是**颜色字符串**（'var(--dsw-alias-...)'），
+            // 是给 color: 用的，不是样式对象。
+            // React 对 style 收字符串直接抛 Minified React error #62：
+            //   "The style prop expects a mapping from style properties to
+            //    values, not a string."
+            // 表现：点「测试连通性」→ 整个设置页白屏。
+            // 正确写法是 { style: { color: S.ok } }。
             test.ok
-              ? h('span', { style: S.ok },
+              ? h('span', { style: { color: S.ok } },
                   `✓ 连通正常（${num(test.passed)}/${num(test.total)}）`)
-              : h('span', { style: S.err },
+              : h('span', { style: { color: S.err } },
                   `✗ 连通异常（${num(test.passed)}/${num(test.total)}）`),
           ),
           // 【防御】steps 里任何字段都可能是非字符串（对象/undefined/错误实例）。
@@ -740,7 +755,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}` : '未配置'),
@@ -931,11 +946,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} 条`),
@@ -964,9 +979,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)) }, '失败'),
@@ -1054,7 +1069,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/package.json

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