dsh-plugin-litellm-bridge 2.0.7 → 2.0.9

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,
@@ -614,24 +637,24 @@ window.__ModuleLoader__.load({
           return next;
         });
 
-      // ---- 拖拽排序：fallback 列表顺序即降级优先级 ----
+      // ---- 拖拽排序：整条链（首选 + 备选）的先后顺序即降级优先级 ----
       const onDragStart = (at, idx) => { dragRef.current = { at, idx }; };
-      const onDrop = (at, idx) => {
+      /**
+       * 拖拽落点：把 src 位置的模型插到 target 位置。
+       * 操作对象是**整条链**（primary 是第 0 位），
+       * 所以拖到第 1 位就等于「换首选」，不需要额外按钮。
+       */
+      const onDropChain = (at, idx) => {
         const src = dragRef.current;
+        dragRef.current = null;
         if (!src || src.at !== at || src.idx === idx) return;
-        const list = [...prof.agents[at].fallbacks];
+        const cfg = prof?.agents?.[at];
+        if (!cfg) return;
+        const list = [cfg.primary, ...(cfg.fallbacks || [])].filter(Boolean);
+        if (src.idx < 0 || src.idx >= list.length) return;
         const [moved] = list.splice(src.idx, 1);
         list.splice(idx, 0, moved);
-        setAgent(at, { fallbacks: list });
-        dragRef.current = null;
-      };
-
-      /** 把某个模型从「备选」提升为「首选」，原首选下沉为第一备选。 */
-      const promote = (at, idx) => {
-        const cfg = prof.agents[at];
-        const target = cfg.fallbacks[idx];
-        const rest = cfg.fallbacks.filter((_, i) => i !== idx);
-        setAgent(at, { primary: target, fallbacks: cfg.primary ? [cfg.primary, ...rest] : rest });
+        setAgent(at, { primary: list[0] || '', fallbacks: list.slice(1) });
       };
 
       const saveSection = async (at) => {
@@ -700,20 +723,27 @@ 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,
+        // ---- 使用引导：第一次进来的人 3 秒看懂这页在做什么 ----
+        h('div', {
+          style: {
+            padding: '10px 12px', marginBottom: 18, borderRadius: 6,
+            background: tint(T.brand, 6), border: `1px solid ${tint(T.brand, 25)}`,
+            fontSize: 12, lineHeight: 1.7, color: T.labelPrimary,
+          },
+        },
+          h('div', { style: { fontWeight: 600, marginBottom: 4 } }, '这页在做什么'),
+          h('div', null,
+            '给三类 Agent 各配一条「降级链」：先试第 1 个模型，失败就换第 2 个，再失败换第 3 个。',
+          ),
+          h('div', { style: { marginTop: 4 } },
+            '配好后点最下方「保存并下发到网关」，网关就会按这个顺序执行重试。'),
+          h('div', { style: { marginTop: 6, opacity: 0.75 } },
+            '提示：不用每条链都配。只配 root 也能用；coder / research 留空表示沿用 DSH 原来的行为。'),
+        ),
+
         // ---- Profile 分组：选择 / 新建 / 删除 ----
         h('div', { style: S.h2Row },
           h('h2', { style: S.h2 }, 'Profile 分组'),
@@ -735,6 +765,9 @@ window.__ModuleLoader__.load({
             }, '删除当前'),
           ),
         ),
+        h('div', { style: { ...S.hint, marginTop: -6, marginBottom: 14 } },
+          '一个 profile = 一套降级方案。可以配多套（例如「稳定优先」「省钱优先」），' +
+          '再到「当前会话」里选用哪一套。'),
 
         showNew && h('div', { style: { ...S.row, marginBottom: 14 } },
           h('input', {
@@ -762,18 +795,90 @@ window.__ModuleLoader__.load({
           // 直接读 cfg.primary 会抛 TypeError，进而让整页崩掉。
           const cfg = prof?.agents?.[at]
             || { label: at, primary: '', timeoutMs: 600000, fallbacks: [] };
+
+          const chain = [cfg.primary, ...(cfg.fallbacks || [])].filter(Boolean);
           const isSub = at !== 'root';
-          const groupLabel = at === 'root' ? 'root · 主代理降级链'
-            : at === 'coder' ? 'coder · 子代理降级链（Coder）'
-            : 'research · 子代理降级链（Research）';
-          const chainLen = [cfg.primary, ...(cfg.fallbacks || [])].filter(Boolean).length;
 
-          return h('div', { key: at },
+          // 每个角色的说明：用「人话」讲清楚它管什么
+          const meta = at === 'root'
+            ? {
+                title: 'root · 主代理',
+                desc: '你自己直接对话的那个 Agent。它出问题时按下面的顺序换模型重试。',
+                hint: '通常放最稳、上下文最大的模型。',
+              }
+            : at === 'coder'
+              ? {
+                  title: 'coder · 子代理（写代码）',
+                  desc: 'Agent 里 spawn 出来的「写代码」子任务用它，和 root 完全独立。',
+                  hint: '可放长输出、便宜的模型。',
+                }
+              : {
+                  title: 'research · 子代理（调研）',
+                  desc: 'Agent 里 spawn 出来的「调研/检索/分析」子任务用它。',
+                  hint: '可放推理强或便宜的模型。',
+                };
+
+          /** 修改整条链（统一入口，避免 primary/fallbacks 两个来源打架） */
+          const setChain = (nextList) => {
+            const list = nextList.filter(Boolean);
+            setAgent(at, { primary: list[0] || '', fallbacks: list.slice(1) });
+          };
+          const moveUp = (i) => {
+            if (i <= 0) return;
+            const l = [...chain];
+            [l[i - 1], l[i]] = [l[i], l[i - 1]];
+            setChain(l);
+          };
+          const removeAt = (i) => setChain(chain.filter((_, j) => j !== i));
+          const addModel = (id) => {
+            if (!id || chain.includes(id)) return;
+            setChain([...chain, id]);
+          };
+
+          /** 一个可拖拽的链节点 */
+          const row = (name, i) => h('div', {
+            key: `${at}-${name}-${i}`,
+            draggable: true,
+            onDragStart: () => onDragStart(at, i),
+            onDragOver: (e) => e.preventDefault(),
+            onDrop: () => onDropChain(at, i),
+            style: {
+              display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px',
+              marginBottom: 4, borderRadius: 6, cursor: 'grab',
+              background: i === 0 ? tint(T.success, 7) : T.bgLayer2,
+              border: `1px solid ${i === 0 ? tint(T.success, 30) : T.borderL1}`,
+            },
+          },
+            h('span', { style: { opacity: 0.4, ...S.mono } }, '⠿'),
+            h('span', {
+              style: {
+                ...S.mono, fontSize: 11, width: 20, textAlign: 'center',
+                flex: '0 0 20px', fontWeight: 600,
+                color: i === 0 ? T.success : T.labelSecondary,
+              },
+            }, String(i + 1)),
+            h('span', { style: { flex: '1 1 auto', ...S.mono, wordBreak: 'break-all' } }, safeText(name)),
+            i === 0
+              ? h('span', { style: S.badge(T.success, tint(T.success, 16)) }, '先用这个')
+              : h('span', { style: S.badge() }, i === 1 ? '失败后换它' : `${i + 1} 顺位`),
+            i > 0 && h('button', {
+              style: { ...S.btnSm, height: 22, fontSize: 11 },
+              onClick: () => moveUp(i),
+              title: '往前挪一位（往前 = 更优先）',
+            }, '↑'),
+            h('button', {
+              style: { ...S.btnSm, height: 22, fontSize: 11, color: T.error, borderColor: tint(T.error, 35) },
+              onClick: () => removeAt(i),
+            }, '删'),
+          );
+
+          return h('div', { key: at, style: { marginBottom: 22 } },
+            // 标题行
             h('div', { style: S.h2Row },
-              h('h2', { style: S.h2 }, safeText(groupLabel)),
+              h('h2', { style: S.h2 }, safeText(meta.title)),
               isSub && h('span', { style: S.badge() }, '仅子 Agent 使用'),
               h('span', { style: { ...S.mono, fontSize: 11, color: T.labelSecondary } },
-                chainLen ? `链长 ${chainLen}` : '未配置'),
+                chain.length ? `${chain.length} 个模型` : '还没配'),
               h('div', { style: S.sectionActions },
                 h('button', {
                   style: S.btnSm,
@@ -782,97 +887,84 @@ window.__ModuleLoader__.load({
                     next[pid].agents[at] = JSON.parse(JSON.stringify(state.routes[pid].agents[at]));
                     return next;
                   }),
-                }, 'Discard'),
+                }, '撤销修改'),
                 h('button', {
                   style: { ...S.btn('primary'), height: 26, padding: '0 10px', fontSize: 12 },
                   disabled: busy,
                   onClick: () => saveSection(at),
-                }, 'Save'),
+                }, '保存这条链'),
               ),
             ),
 
-            h('div', { style: S.fieldRow },
-              h('div', { style: { flex: '1 1 260px' } },
-                h('label', { style: S.label }, '首选模型（来自 DSH 模型池）'),
-                h('select', {
-                  style: S.input,
-                  value: cfg.primary || '',
-                  onChange: (e) => setAgent(at, { primary: e.target.value }),
-                },
-                  h('option', { value: '' }, '— 请选择 —'),
-                  byProvider.map(([prov, rows]) => h('optgroup', { key: prov, label: prov },
-                    rows.map((m) => h('option', { key: `${prov}:${m.id}`, value: m.id },
-                      m.name && m.name !== m.id ? `${m.id}  ·  ${m.name}` : m.id)),
-                  )),
+            // 说明（讲清楚这一链管什么）
+            h('div', { style: { ...S.hint, marginTop: -4, marginBottom: 10 } },
+              safeText(meta.desc),
+              h('span', { style: { opacity: 0.7 } }, ` 建议：${safeText(meta.hint)}`)),
+
+            // 完整降级序列（首选 + 备选合在一起看）
+            chain.length === 0
+              ? h('div', {
+                  style: {
+                    padding: '14px 12px', marginBottom: 8, borderRadius: 6,
+                    background: T.bgLayer1, border: `1px dashed ${T.borderL2}`,
+                    fontSize: 12, color: T.labelSecondary, textAlign: 'center',
+                  },
+                }, '还没有选模型。从下面的下拉框加第一个 —— 它就是这个链的首选。')
+              : h('div', { style: { marginBottom: 8 } },
+                  h('div', { style: { ...S.label } }, '降级顺序（从上到下 = 先试这个，不行再试下一个）'),
+                  chain.map((name, i) => row(name, i)),
                 ),
-              ),
-              h('div', { style: { flex: '0 0 150px' } },
-                h('label', { style: S.label }, '超时（毫秒）'),
-                h('input', {
-                  style: S.input, type: 'number', value: cfg.timeoutMs,
-                  onChange: (e) => setAgent(at, { timeoutMs: Number(e.target.value) }),
-                }),
+
+            // 追加模型
+            h('div', { style: { ...S.row, marginBottom: 10 } },
+              h('select', {
+                style: { ...S.inputAuto, flex: '1 1 300px' },
+                value: '',
+                onChange: (e) => { addModel(e.target.value); e.target.value = ''; },
+              },
+                h('option', { value: '' },
+                  chain.length ? '+ 再加一个备选模型' : '+ 选择这个链的第一个模型'),
+                byProvider.map(([prov, provRows]) => h('optgroup', { key: prov, label: prov },
+                  provRows.filter((m) => !chain.includes(m.id)).map((m) =>
+                    h('option', { key: `${prov}:${m.id}`, value: m.id }, m.id)),
+                )),
               ),
             ),
 
-            // ---- fallback 链：拖拽排序 ----
-            h('div', { style: S.field },
-              h('label', { style: S.label }, 'fallback 降级序列（拖拽排序，顺序即网关执行的降级优先级）'),
-              (cfg.fallbacks || []).length === 0
-                ? h('div', { style: { ...S.mono, fontSize: 11.5, color: T.labelSecondary, padding: '5px 0' } }, '（无备选）')
-                : cfg.fallbacks.map((f, i) => h('div', {
-                    key: `${f}-${i}`, draggable: true,
-                    onDragStart: () => onDragStart(at, i),
-                    onDragOver: (e) => e.preventDefault(),
-                    onDrop: () => onDrop(at, i),
-                    style: {
-                      display: 'flex', alignItems: 'center', gap: 8, padding: '5px 9px',
-                      marginBottom: 3, borderRadius: 5, cursor: 'grab',
-                      background: T.bgLayer2, border: `1px solid ${T.borderL1}`,
-                    },
-                  },
-                    h('span', { style: { opacity: 0.45, ...S.mono } }, '⠿'),
-                    h('span', { style: S.badge() }, `第 ${i + 2} 顺位`),
-                    h('span', { style: { flex: 1, ...S.mono, wordBreak: 'break-all' } }, f),
-                    h('button', { style: S.btnSm, onClick: () => promote(at, i), title: '提升为首选' }, '↑ 首选'),
-                    h('button', {
-                      style: S.btnSm,
-                      onClick: () => setAgent(at, { fallbacks: cfg.fallbacks.filter((_, j) => j !== i) }),
-                    }, '移除'),
-                  )),
-
-              // 追加备选：下拉选 DSH 模型池里的模型
-              h('div', { style: { ...S.row, marginTop: 7 } },
-                h('select', {
-                  style: { ...S.inputAuto, flex: '1 1 260px' },
-                  value: '',
-                  onChange: (e) => {
-                    const v = e.target.value;
-                    if (!v) return;
-                    const cur = cfg.fallbacks || [];
-                    if (v === cfg.primary || cur.includes(v)) return;
-                    setAgent(at, { fallbacks: [...cur, v] });
-                    e.target.value = '';
-                  },
-                },
-                  h('option', { value: '' }, '+ 添加备选模型（从 DSH 模型池选择）'),
-                  byProvider.map(([prov, rows]) => h('optgroup', { key: prov, label: prov },
-                    rows.filter((m) => m.id !== cfg.primary).map((m) =>
-                      h('option', { key: `${prov}:${m.id}`, value: m.id }, m.id)),
-                  )),
-                ),
-              ),
-              allIds.length === 0 && h('div', { style: { ...S.hint, color: T.warn } },
-                '模型池为空：请先到【设置 → 模型】里配置供应商，并用【获取可用模型】拉取模型目录。'),
+            // 超时（放在最后，因为它多数情况不用改）
+            h('div', { style: { ...S.row } },
+              h('span', { style: { ...S.label, marginBottom: 0 } }, '单次请求超时'),
+              h('input', {
+                style: { ...S.inputAuto, width: 120 },
+                type: 'number',
+                value: cfg.timeoutMs,
+                onChange: (e) => setAgent(at, { timeoutMs: Number(e.target.value) }),
+              }),
+              h('span', { style: { ...S.mono, fontSize: 11, color: T.labelSecondary } }, '毫秒'),
+              h('span', { style: { ...S.mono, fontSize: 11, color: T.labelSecondary } },
+                `（约 ${Math.round((cfg.timeoutMs || 0) / 60000)} 分钟）`),
             ),
+
+            allIds.length === 0 && h('div', { style: { ...S.hint, color: T.warn } },
+              '模型池为空：请先到【设置 → 模型】里配置供应商，并用【获取可用模型】拉取模型目录。'),
           );
         }),
 
         // ---- 下发区 ----
-        h('div', { style: { ...S.row, marginTop: 16 } },
-          h('button', { style: S.btn('primary'), onClick: applyChains, disabled: busy },
-            busy ? '处理中…' : '保存并下发到网关'),
-          h('button', { style: S.btn(), onClick: preview, disabled: busy }, '预览 YAML'),
+        h('div', {
+          style: {
+            marginTop: 22, paddingTop: 16, borderTop: `1px solid ${T.borderL1}`,
+          },
+        },
+          h('div', { style: { ...S.label } }, '最后一步'),
+          h('div', { style: { ...S.hint, marginBottom: 10 } },
+            '「保存并下发」会把上面三条链写成网关配置并重启网关，让它按这个顺序执行。' +
+            '只保存不下发的话，网关不会生效。'),
+          h('div', { style: { ...S.row } },
+            h('button', { style: S.btn('primary'), onClick: applyChains, disabled: busy },
+              busy ? '处理中…' : '保存并下发到网关'),
+            h('button', { style: S.btn(), onClick: preview, disabled: busy }, '先看看生成的配置'),
+          ),
         ),
 
         msg && h('div', {

package/dsh-plugin-litellm-bridge/lib/config-store.js

@@ -93,6 +93,34 @@ export function statePath() {
   return join(stateDir(), 'state.json');
 }
 
+/**
+ * 旧版遗留的「假模型名」。
+ *
+ * 插件 1.x 时代网关自己维护 model_list，写死过一批别名
+ * （root-primary / coder-fallback-1 之类）。架构修正后模型池改由
+ * DSH【设置-模型】提供，这些名字**在真实模型池里一个都不存在**。
+ *
+ * 用户机器上的 state.json 会带着它们，表现就是：
+ *   首选模型下拉显示「— 请选择 —」，但下面 fallback 里挂着一串
+ *   永远连不上的假名字 —— 这就是「看不懂怎么配」的直接来源。
+ *
+ * 这里做一个自动迁移：加载状态时把它们清掉，让界面回到干净骨架。
+ */
+const LEGACY_MODEL_RE = /^(root|coder|research)-(primary|fallback-\d+|profile-\w+)$/;
+
+function isLegacyModelName(name) {
+  return typeof name === 'string' && LEGACY_MODEL_RE.test(name.trim());
+}
+
+/** 清理一条链里所有旧版假模型名，返回清理后的链与是否发生变更。 */
+function stripLegacyModels(chain) {
+  const before = JSON.stringify(chain);
+  const primary = isLegacyModelName(chain.primary) ? '' : chain.primary;
+  const fallbacks = (chain.fallbacks || []).filter((f) => !isLegacyModelName(f));
+  const after = JSON.stringify({ ...chain, primary, fallbacks });
+  return { chain: { ...chain, primary, fallbacks }, changed: before !== after };
+}
+
 /** 归一化一条 agent 链（容忍旧版本 / 残缺字段）。 */
 function mergeAgentChain(src, base) {
   const out = { ...base };
@@ -128,6 +156,9 @@ function mergeState(base, loaded) {
       };
       for (const at of AGENT_TYPES) {
         out.agents[at] = mergeAgentChain(prof?.agents?.[at], skeleton.agents[at]);
+        // 自动清理旧版遗留的假模型名（root-primary 之类）
+        const { chain } = stripLegacyModels(out.agents[at]);
+        out.agents[at] = chain;
       }
       merged.routes[pid] = out;
     }

package/package.json

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