dsh-plugin-litellm-bridge 0.0.0-stage → 2.0.2

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

@@ -0,0 +1,1336 @@
+/**
+ * dsh-plugin-litellm-bridge —— 客户端半（Web UI）
+ * ============================================================================
+ *
+ * 【必须使用 __ModuleLoader__ 格式】
+ *   DSH 的客户端半不是普通 ESM 模块，必须包在
+ *   `window.__ModuleLoader__.load({ id, factory })` 里，且 id 必须等于包名。
+ *   React 由 factory 的 require('react') 提供。
+ *
+ * 【4 个 Tab】
+ *   1. 网关设置      填地址、测试连通性；master key 只显示「来自 .env 环境变量」
+ *   2. 路由配置      profile-a / profile-b × root/coder/research，
+ *                    首选模型 + 超时 + 可拖拽排序的 fallback 列表；
+ *                    保存 → 组装 yaml → 调网关热重载
+ *   3. 日志面板      拉网关调用日志，按 agent-type / profile 筛选；
+ *                    橙色高亮触发 fallback，红色标记全链路失败；默认留最近 50 条
+ *   4. 当前会话      会话绑定 profile 下拉（持久化到会话变量）；
+ *                    本会话最近降级记录；一键探针测试
+ */
+
+window.__ModuleLoader__.load({
+  id: 'dsh-plugin-litellm-bridge',
+  factory: (require) => {
+    const React = require('react');
+    const module = { exports: {} };
+    const exports = module.exports;
+
+    const h = React.createElement;
+    const { useState, useEffect, useCallback, useMemo, useRef } = React;
+
+    const NS = 'litellm-bridge';
+    const AGENT_TYPES = ['root', 'coder', 'research'];
+    const PROFILE_IDS = ['profile-a', 'profile-b'];
+
+    // -----------------------------------------------------------------------
+    // 样式（内联，避免依赖外部样式表）
+    // -----------------------------------------------------------------------
+    // -----------------------------------------------------------------------
+    // 设计系统 —— 使用 DSH 官方主题 token（--dsw-alias-*）
+    //
+    // 【上一版的错】硬编码 rgba(128,128,128,.28) / #ddd 这类颜色，在浅色主题下
+    // 边框几乎不可见、文字对比度不足，整页看起来"塌了"。
+    // 正确做法：全部走 cordis_inspect Theme.listTokens 给出的 token，
+    // 它们由主题引擎同时提供 light/dark 两套值。
+    // -----------------------------------------------------------------------
+    const T = {
+      bgBase: 'var(--dsw-alias-bg-base)',
+      bgLayer1: 'var(--dsw-alias-bg-layer-1)',
+      bgLayer2: 'var(--dsw-alias-bg-layer-2)',
+      bgOverlay: 'var(--dsw-alias-bg-overlay)',
+      borderL1: 'var(--dsw-alias-border-l1)',
+      borderL2: 'var(--dsw-alias-border-l2)',
+      brand: 'var(--dsw-alias-brand-primary)',
+      labelPrimary: 'var(--dsw-alias-label-primary)',
+      labelSecondary: 'var(--dsw-alias-label-secondary)',
+      error: 'var(--dsw-alias-state-error-primary)',
+      success: 'var(--dsw-alias-state-success-primary)',
+      warn: 'var(--dsw-alias-state-warn-primary)',
+      idle: 'var(--dsw-alias-state-idle-primary)',
+    };
+    // 半透明底色用 color-mix 从 token 派生，保证明暗主题都合适
+    const tint = (token, pct) => `color-mix(in srgb, ${token} ${pct}%, transparent)`;
+
+    const HAIRLINE = `1px solid ${T.borderL1}`;
+    const INPUT_H = 32;
+
+    const S = {
+      page: {
+        padding: '0', fontFamily: 'inherit', fontSize: 13,
+        color: T.labelPrimary, background: T.bgBase, lineHeight: 1.55,
+      },
+
+      // ---- 顶部标签栏 ----
+      tabs: {
+        display: 'flex', gap: 2, borderBottom: `1px solid ${T.borderL1}`,
+        marginBottom: 0, padding: '0 4px',
+      },
+      tab: (active) => ({
+        padding: '9px 14px', cursor: 'pointer', border: 'none', background: 'transparent',
+        color: active ? T.labelPrimary : T.labelSecondary,
+        borderBottom: active ? `2px solid ${T.brand}` : '2px solid transparent',
+        fontSize: 13, fontWeight: active ? 600 : 400, fontFamily: 'inherit',
+      }),
+
+      // ---- 分区（标题 + 内容缩进）----
+      section: { padding: '16px 4px 0' },
+      h2Row: {
+        display: 'flex', alignItems: 'center', gap: 10,
+        marginBottom: 12, paddingBottom: 8, borderBottom: HAIRLINE,
+      },
+      h2: { margin: 0, fontSize: 13, fontWeight: 600, color: T.labelPrimary },
+      sectionActions: { marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' },
+
+      // ---- 字段 ----
+      field: { marginBottom: 14 },
+      fieldRow: { display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 14, flexWrap: 'wrap' },
+      label: {
+        display: 'block', marginBottom: 6, fontSize: 12,
+        fontWeight: 500, color: T.labelSecondary,
+      },
+      hint: { fontSize: 11.5, color: T.labelSecondary, marginTop: 5, lineHeight: 1.5 },
+
+      input: {
+        width: '100%', boxSizing: 'border-box', height: INPUT_H, padding: '0 10px',
+        fontSize: 13, fontFamily: 'inherit', color: T.labelPrimary,
+        background: T.bgLayer1, border: `1px solid ${T.borderL2}`,
+        borderRadius: 6, outline: 'none',
+      },
+      inputAuto: {
+        height: INPUT_H, padding: '0 10px', fontSize: 13, fontFamily: 'inherit',
+        color: T.labelPrimary, background: T.bgLayer1,
+        border: `1px solid ${T.borderL2}`, borderRadius: 6, boxSizing: 'border-box',
+      },
+
+      // ---- 按钮 ----
+      btn: (kind) => ({
+        height: 30, padding: '0 14px', fontSize: 12.5, fontFamily: 'inherit',
+        cursor: 'pointer', borderRadius: 6, whiteSpace: 'nowrap',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        border: kind === 'primary' ? '1px solid transparent' : `1px solid ${T.borderL2}`,
+        background: kind === 'primary' ? T.brand : T.bgLayer1,
+        color: kind === 'primary' ? '#fff' : T.labelPrimary,
+        fontWeight: kind === 'primary' ? 600 : 400,
+      }),
+      btnSm: {
+        height: 26, padding: '0 10px', fontSize: 12, fontFamily: 'inherit', cursor: 'pointer',
+        borderRadius: 6, border: `1px solid ${T.borderL2}`,
+        background: T.bgLayer1, color: T.labelSecondary,
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      },
+
+      // ---- 通知 ----
+      notice: (tone) => {
+        const color = tone === 'error' ? T.error : tone === 'warn' ? T.warn : tone === 'ok' ? T.success : T.labelSecondary;
+        return {
+          padding: '9px 12px', borderRadius: 6, fontSize: 12.5, marginBottom: 12,
+          lineHeight: 1.55, color,
+          background: tint(color === T.labelSecondary ? T.borderL1 : color, 10),
+          border: `1px solid ${tint(color === T.labelSecondary ? T.borderL2 : color, 35)}`,
+        };
+      },
+
+      // ---- 面板（用于列表容器）----
+      panel: {
+        border: `1px solid ${T.borderL1}`, borderRadius: 8,
+        background: T.bgLayer1, overflow: 'hidden',
+      },
+
+      // ---- 徽章 ----
+      badge: (color, bg) => ({
+        display: 'inline-flex', alignItems: 'center', padding: '1px 7px',
+        borderRadius: 10, fontSize: 11, lineHeight: '18px', whiteSpace: 'nowrap',
+        color: color || T.labelSecondary,
+        background: bg || tint(T.borderL2, 22),
+      }),
+      mono: { fontFamily: 'ui-monospace, Consolas, monospace', fontSize: 11.5 },
+
+      // 状态色（字符串，供 style.color 直接用）
+      ok: T.success,
+      err: T.error,
+      warn: T.warn,
+
+      // ---- 日志/结果行 ----
+      logRow: (kind) => ({
+        borderLeft: `3px solid ${kind === 'fallback' ? T.warn : kind === 'failed' ? T.error : T.borderL1}`,
+        background: kind === 'fallback' ? tint(T.warn, 8)
+          : kind === 'failed' ? tint(T.error, 8) : 'transparent',
+        padding: '7px 10px', marginBottom: 4, borderRadius: 4, fontSize: 12,
+      }),
+
+      // 兼容旧引用
+      wrap: { fontFamily: 'inherit', fontSize: 13, color: T.labelPrimary, background: T.bgBase },
+      card: { marginBottom: 14 },
+      row: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' },
+    };
+
+
+    // -----------------------------------------------------------------------
+    // Host RPC 通道
+    //
+    // 【实测踩到的坑】最初写 connection.rpc.call('/api', 'litellm-bridge/<action>')，
+    // 前端会拼成 /api/litellm-bridge/<action>，实测报
+    //   `transport for /api/litellm-bridge/models/sync HTTP 404`
+    // 根因不是路由写错，而是 **/api/** 是 dsh-api-gateway 的 RPC 分发领地**，
+    // 插件注册在它下面的路由永远匹配不到。
+    // 对照能正常工作的真实插件：
+    //   dsh-connect-trae → /plugins/dsh-connect-trae/usage
+    //   dsh-qq-plugin    → /.dsh-qq-plugin
+    // 它们都刻意避开 /api。所以这里改成插件命名空间 + 直接 fetch
+    // （同源请求会自动带浏览器会话 cookie，正是 dsh-connect-trae 的做法）。
+    // -----------------------------------------------------------------------
+    const ROUTE_BASE = '/plugins/dsh-plugin-litellm-bridge';
+
+    function createApi(_ctx) {
+      return async function call(action, args = {}) {
+        try {
+          const res = await fetch(`${ROUTE_BASE}/${action}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify({ action, args }),
+          });
+          if (!res.ok) {
+            // 401/404 这类要如实说明，不能伪装成业务错误
+            return { ok: false, error: `HTTP ${res.status} ${res.statusText || ''}`.trim() };
+          }
+          const json = await res.json();
+          return json && typeof json === 'object' ? json : { ok: false, error: '响应不是 JSON 对象' };
+        } catch (err) {
+          return { ok: false, error: String(err?.message || err) };
+        }
+      };
+    }
+
+    // -----------------------------------------------------------------------
+    // 【需求7】网关状态卡：运行中 / 已停止 / 异常
+    //
+    // 为什么要有：网关是插件托管的后台子进程，用户看不见。它悄悄挂掉时，
+    // 表现只是「降级不生效」，极难归因。所以状态必须显式展示。
+    // -----------------------------------------------------------------------
+    function GatewayStatusCard({ api }) {
+      const [st, setSt] = useState(null);
+      const [busy, setBusy] = useState(false);
+
+      const load = useCallback(async () => {
+        const r = await api('gateway/lifecycle');
+        if (r.ok) setSt(r.data);
+      }, [api]);
+
+      useEffect(() => { load(); }, [load]);
+      // 每 8 秒轻量轮询，避免用户以为「卡住了」
+      useEffect(() => {
+        const t = setInterval(() => { void load(); }, 8000);
+        return () => clearInterval(t);
+      }, [load]);
+
+      const act = async (a) => {
+        setBusy(true);
+        await api(a);
+        await load();
+        setBusy(false);
+      };
+
+      const state = st?.state || 'stopped';
+      const tone = state === 'running' ? 'ok' : state === 'error' ? 'error' : 'warn';
+      const label = st?.stateLabel || (state === 'running' ? '运行中' : state === 'error' ? '异常' : '已停止');
+
+      return h('div', { style: S.panel },
+        h('div', { style: { padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+          h('span', {
+            style: {
+              width: 8, height: 8, borderRadius: '50%', display: 'inline-block',
+              background: tone === 'ok' ? T.success : tone === 'error' ? T.error : T.idle,
+            },
+          }),
+          h('span', { style: { fontWeight: 600 } }, 'LiteLLM 网关'),
+          h('span', { style: S.badge(tone === 'ok' ? T.success : tone === 'error' ? T.error : T.warn) }, 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 } },
+            h('button', { style: S.btnSm, disabled: busy, onClick: () => act('gateway/start') },
+              busy ? '…' : '启动'),
+            h('button', { style: S.btnSm, disabled: busy, onClick: () => act('gateway/stop') }, '停止'),
+            h('button', { style: S.btnSm, disabled: busy, onClick: 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}`),
+          !st?.lastError && st?.lastExit?.abnormal &&
+            h('div', { style: { color: T.error } }, `异常退出记录：code=${st.lastExit.code}`),
+        ),
+      );
+    }
+
+    // -----------------------------------------------------------------------
+    // 【需求4】一键探针：测的是「当前 profile 里从 DSH 选中的这组模型」
+    //
+    // 与旧版的差别：旧版从网关同步模型清单再全量遍历；现在只测用户实际
+    // 配进降级链的那几个模型 —— 这才能回答「我这套降级方案现在通不通」。
+    // -----------------------------------------------------------------------
+    function ProfileProbePanel({ api, routes, profileIds }) {
+      const [pid, setPid] = useState(profileIds?.[0] || 'profile-a');
+      const [agentType, setAgentType] = useState('root');
+      const [busy, setBusy] = useState(false);
+      const [result, setResult] = useState(null);
+      const [err, setErr] = useState(null);
+
+      const chainFor = useCallback((p, at) => {
+        const cfg = routes?.[p]?.agents?.[at];
+        if (!cfg) return [];
+        return [cfg.primary, ...(cfg.fallbacks || [])].filter(Boolean);
+      }, [routes]);
+
+      const chain = chainFor(pid, agentType);
+
+      const run = async () => {
+        setBusy(true); setResult(null); setErr(null);
+        const r = await api('probe/profile', { profileId: pid, agentType, timeoutMs: 60000 });
+        if (r.ok) setResult(r.data);
+        else setErr(r.error || '探针失败');
+        setBusy(false);
+      };
+
+      const latencyColor = (ms) =>
+        ms == null ? T.labelSecondary : ms < 5000 ? T.success : ms < 20000 ? T.warn : T.error;
+
+      return h('div', { style: S.card },
+        h('div', { style: S.h2Row },
+          h('h2', { style: S.h2 }, '一键探针'),
+          h('div', { style: S.sectionActions },
+            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))),
+            h('select', {
+              style: { ...S.inputAuto, minWidth: 110 },
+              value: agentType, onChange: (e) => setAgentType(e.target.value),
+            },
+              h('option', { value: 'root' }, 'root（主代理）'),
+              h('option', { value: 'coder' }, 'coder（子代理）'),
+              h('option', { value: 'research' }, 'research（子代理）'),
+            ),
+            h('button', {
+              style: { ...S.btn('primary'), height: 26, padding: '0 10px', fontSize: 12 },
+              disabled: busy || chain.length === 0,
+              onClick: run,
+            }, busy ? '测试中…' : '开始测试'),
+          ),
+        ),
+
+        h('div', { style: { ...S.hint, marginBottom: 10 } },
+          chain.length
+            ? `将按顺序测试 ${chain.length} 个模型（链路顺序即降级优先级）`
+            : '该链还没有选模型 —— 请先在上方「路由配置」里从 DSH 模型池选好模型'),
+
+        chain.length > 0 && h('div', { style: { marginBottom: 10 } },
+          chain.map((m, i) => {
+            const row = result?.ordered?.find((x) => x.model === m);
+            return h('div', {
+              key: `${m}-${i}`,
+              style: {
+                display: 'flex', alignItems: 'center', gap: 8, padding: '5px 9px',
+                marginBottom: 3, borderRadius: 5, fontSize: 12,
+                background: T.bgLayer1, border: `1px solid ${T.borderL1}`,
+              },
+            },
+              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),
+              row && h('span', { style: { ...S.mono, fontSize: 11, color: row.ok ? T.success : T.error } },
+                row.ok ? '✓' : '✗'),
+              row && row.latencyMs != null && h('span', {
+                style: { ...S.mono, fontSize: 11, color: latencyColor(row.latencyMs), minWidth: 58, textAlign: 'right' },
+              }, `${Math.round(row.latencyMs)}ms`),
+              row && !row.ok && h('span', {
+                style: { ...S.mono, fontSize: 10.5, color: T.error, flex: '1 1 100%', marginTop: 2, wordBreak: 'break-all' },
+              }, String(row.error || '').slice(0, 160)),
+            );
+          }),
+        ),
+
+        err && h('div', { style: S.notice('error') }, err),
+
+        result && h('div', null,
+          h('div', { style: { ...S.row, marginBottom: 8 } },
+            h('span', { style: S.badge(T.success, tint(T.success, 14)) }, `通过 ${result.passed}`),
+            h('span', { style: S.badge(T.error, tint(T.error, 14)) }, `失败 ${result.failed}`),
+            h('span', { style: S.badge() }, `共 ${result.total}`),
+            h('span', { style: { ...S.mono, fontSize: 11, opacity: 0.5, marginLeft: 'auto' } },
+              `${result.profile} · ${result.agentType}`),
+          ),
+          h('div', { style: { ...S.hint } }, '失败项已写入「日志面板」。'),
+        ),
+      );
+    }
+
+    // -----------------------------------------------------------------------
+    // Tab 1：网关设置
+    // -----------------------------------------------------------------------
+    function GatewayTab({ api, state, setState }) {
+      const [url, setUrl] = useState(state?.gateway?.url || 'http://127.0.0.1:4000');
+      const [busy, setBusy] = useState(false);
+      const [test, setTest] = useState(null);
+      const [keyStatus, setKeyStatus] = useState(null);
+
+      useEffect(() => {
+        api('gateway/keyStatus').then((r) => { if (r.ok) setKeyStatus(r.data); });
+      }, [api]);
+
+      const save = async () => {
+        setBusy(true);
+        const r = await api('gateway/save', { url, timeoutMs: state?.gateway?.timeoutMs || 30000 });
+        if (r.ok) setState(r.data);
+        setBusy(false);
+      };
+
+      const runTest = async () => {
+        setBusy(true); setTest(null);
+        const r = await api('gateway/test', { url });
+        if (r.ok) setTest(r.data);
+        else setTest({ ok: false, steps: [{ name: '请求失败', ok: false, detail: r.error }] });
+        setBusy(false);
+      };
+
+      return h('div', null,
+        h('div', { style: S.card },
+          h('div', { style: S.field },
+            h('label', { style: S.label }, '网关地址'),
+            h('input', {
+              style: S.input, value: url, placeholder: 'http://127.0.0.1:4000',
+              onChange: (e) => setUrl(e.target.value),
+            }),
+          ),
+          h('div', { style: S.field },
+            h('label', { style: S.label }, '网关 master admin key'),
+            // 密钥区：绝不显示明文，只显示来源标记
+            h('div', {
+              style: { ...S.input, display: 'flex', alignItems: 'center', gap: 8, opacity: 0.9 },
+            },
+              h('span', { style: S.badge(T.success, tint(T.success, 14)) }, '来自 .env 环境变量'),
+              h('span', { style: { ...S.mono, opacity: 0.6 } },
+                keyStatus?.hasKey ? 'LITELLM_MASTER_KEY 已注入' : '未检测到（请在网关侧 .env 配置）'),
+            ),
+          ),
+          h('div', { style: S.row },
+            h('button', { style: S.btn('primary'), onClick: runTest, disabled: busy }, busy ? '测试中…' : '测试连通性'),
+            h('button', { style: S.btn(), onClick: save, disabled: busy }, '保存'),
+          ),
+        ),
+
+        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.steps || []).map((s, i) => h('div', {
+            key: i, style: { display: 'flex', gap: 8, padding: '4px 0', alignItems: 'baseline' },
+          },
+            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('div', { style: { marginTop: 8, ...S.mono, opacity: 0.55 } },
+            `key 来源：${test.keySource || '—'}`),
+        ),
+
+        state?.statePath && h('div', { style: { ...S.mono, opacity: 0.45, marginTop: 4 } },
+          `配置存储：${state.statePath}`),
+
+        // 【需求7】网关状态：运行中 / 已停止 / 异常
+        h(GatewayStatusCard, { api }),
+
+        // 【需求4】一键探针：测当前 profile 选中的那组模型
+        h(ProfileProbePanel, {
+          api,
+          routes: state?.routes,
+          profileIds: state?.profileIds || Object.keys(state?.routes || {}),
+        }),
+      );
+    }
+
+    // -----------------------------------------------------------------------
+    // Tab 2：路由配置
+    //
+    // 【需求3】职责重新定义：
+    //   - 新建 / 编辑 / 删除 profile
+    //   - 对 root / coder / research 三类 Agent，从 **DSH 模型池** 选模型、
+    //     拖拽排序，组装 fallback 降级序列、填超时
+    //   - 保存后下发降级顺序给 LiteLLM 网关（网关只执行调度）
+    // 模型下拉的数据源是 DSH【设置-模型】，不再是网关。
+    // -----------------------------------------------------------------------
+    function RouteTab({ api, state, setState }) {
+      const profileIds = state?.profileIds || Object.keys(state?.routes || {});
+      const [pid, setPid] = useState(profileIds[0] || 'profile-a');
+      const [draft, setDraft] = useState(null);
+      const [busy, setBusy] = useState(false);
+      const [msg, setMsg] = useState(null);
+      const [yaml, setYaml] = useState('');
+      const [pool, setPool] = useState({ models: [], providers: [], hint: '', reason: null });
+      const [poolBusy, setPoolBusy] = useState(false);
+      const [newId, setNewId] = useState('');
+      const [showNew, setShowNew] = useState(false);
+      const dragRef = useRef(null);
+
+      useEffect(() => {
+        if (state?.routes) setDraft(JSON.parse(JSON.stringify(state.routes)));
+      }, [state?.routes]);
+
+      // 【需求2】模型池来自 DSH 设置-模型
+      const loadPool = useCallback(async () => {
+        setPoolBusy(true);
+        const r = await api('models/pool');
+        if (r.ok) setPool(r.data || { models: [], providers: [], hint: '' });
+        else setPool({ models: [], providers: [], hint: `读取失败：${r.error}`, reason: r.error });
+        setPoolBusy(false);
+      }, [api]);
+
+      useEffect(() => { void loadPool(); }, [loadPool]);
+
+      // 当前 pid 被删除 / 不存在时回落到第一个
+      useEffect(() => {
+        if (draft && !draft[pid]) {
+          const first = Object.keys(draft)[0];
+          if (first) setPid(first);
+        }
+      }, [draft, pid]);
+
+      if (!draft) return h('div', { style: { opacity: 0.6 } }, '加载中…');
+      const prof = draft[pid];
+      if (!prof) return h('div', { style: { opacity: 0.6 } }, '没有可用的 profile');
+
+      const setAgent = (at, patch) =>
+        setDraft((d) => {
+          const next = JSON.parse(JSON.stringify(d));
+          next[pid].agents[at] = { ...next[pid].agents[at], ...patch };
+          return next;
+        });
+
+      // ---- 拖拽排序：fallback 列表顺序即降级优先级 ----
+      const onDragStart = (at, idx) => { dragRef.current = { at, idx }; };
+      const onDrop = (at, idx) => {
+        const src = dragRef.current;
+        if (!src || src.at !== at || src.idx === idx) return;
+        const list = [...prof.agents[at].fallbacks];
+        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 });
+      };
+
+      const saveSection = async (at) => {
+        setBusy(true); setMsg(null);
+        const r = await api('routes/saveRoute', { profileId: pid, agentType: at, patch: prof.agents[at] });
+        if (r.ok) {
+          setState((s) => ({ ...s, routes: r.data, profileIds: r.profileIds }));
+          setMsg({ kind: 'ok', text: `${prof.agents[at].label || at} 已保存` });
+        } else {
+          setMsg({ kind: 'err', text: r.error || '保存失败' });
+        }
+        setBusy(false);
+      };
+
+      /** 【需求3】保存并下发：写 config.yaml → 重启网关加载新链路 */
+      const applyChains = async () => {
+        setBusy(true); setMsg(null);
+        // 先保存三条链，再统一下发（顺序很重要：下发读的是已保存状态）
+        for (const at of AGENT_TYPES) {
+          const r = await api('routes/saveRoute', { profileId: pid, agentType: at, patch: prof.agents[at] });
+          if (r.ok) setState((s) => ({ ...s, routes: r.data, profileIds: r.profileIds }));
+          else { setMsg({ kind: 'err', text: `保存 ${at} 失败：${r.error}` }); setBusy(false); return; }
+        }
+        const r = await api('routes/apply', {});
+        if (r.ok) {
+          setYaml(r.data.yaml || '');
+          setMsg({ kind: r.data.restarted ? 'ok' : 'warn', text: r.data.message });
+        } else {
+          setYaml(r.data?.yaml || '');
+          setMsg({ kind: 'err', text: r.data?.error || r.error || '下发失败' });
+        }
+        setBusy(false);
+      };
+
+      const preview = async () => {
+        const r = await api('routes/preview');
+        if (r.ok) setYaml(r.data.yaml);
+      };
+
+      const createProfile = async () => {
+        const id = newId.trim();
+        if (!id) return;
+        setBusy(true); setMsg(null);
+        const r = await api('routes/createProfile', { id, label: id });
+        if (r.ok) {
+          setState((s) => ({ ...s, routes: r.data, profileIds: r.profileIds }));
+          setPid(id);
+          setNewId('');
+          setShowNew(false);
+          setMsg({ kind: 'ok', text: `已新建 profile：${id}` });
+        } else {
+          setMsg({ kind: 'err', text: r.error || '新建失败' });
+        }
+        setBusy(false);
+      };
+
+      const deleteProfile = async (id) => {
+        setBusy(true); setMsg(null);
+        const r = await api('routes/deleteProfile', { id });
+        if (r.ok) {
+          setState((s) => ({ ...s, routes: r.data, profileIds: r.profileIds }));
+          setMsg({ kind: 'ok', text: `已删除 ${id}` });
+        } else {
+          setMsg({ kind: 'err', text: r.error || '删除失败' });
+        }
+        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,
+        // ---- Profile 分组：选择 / 新建 / 删除 ----
+        h('div', { style: S.h2Row },
+          h('h2', { style: S.h2 }, 'Profile 分组'),
+          h('span', { style: { ...S.mono, fontSize: 11, color: T.labelSecondary } },
+            `共 ${profileIds.length} 个`),
+          h('div', { style: S.sectionActions },
+            profileIds.map((p) => h('button', {
+              key: p,
+              style: p === pid
+                ? { ...S.btn('primary'), height: 26, padding: '0 10px', fontSize: 12 }
+                : S.btnSm,
+              onClick: () => setPid(p),
+            }, p)),
+            h('button', { style: S.btnSm, onClick: () => setShowNew((v) => !v) }, showNew ? '取消' : '+ 新建'),
+            profileIds.length > 1 && h('button', {
+              style: { ...S.btnSm, color: T.error, borderColor: tint(T.error, 40) },
+              disabled: busy,
+              onClick: () => deleteProfile(pid),
+            }, '删除当前'),
+          ),
+        ),
+
+        showNew && h('div', { style: { ...S.row, marginBottom: 14 } },
+          h('input', {
+            style: { ...S.input, flex: '1 1 200px' },
+            placeholder: '新 profile 名称（字母数字、连字符、下划线）',
+            value: newId,
+            onChange: (e) => setNewId(e.target.value),
+            onKeyDown: (e) => { if (e.key === 'Enter') void createProfile(); },
+          }),
+          h('button', { style: S.btn('primary'), disabled: busy || !newId.trim(), onClick: createProfile }, '创建'),
+        ),
+
+        // ---- 【需求2】模型池来源说明 ----
+        h('div', { style: { ...S.hint, marginBottom: 14 } },
+          poolBusy
+            ? '正在读取 DSH 模型池…'
+            : (pool.hint || (pool.models.length ? `可用模型 ${pool.models.length} 个` : '未读取到模型池')),
+          h('span', { style: { marginLeft: 8 } },
+            h('button', { style: { ...S.btnSm, height: 22, fontSize: 11 }, disabled: poolBusy, onClick: loadPool }, '刷新模型池')),
+        ),
+
+        // ---- 三条链：root / coder / research ----
+        AGENT_TYPES.map((at) => {
+          const cfg = prof.agents[at];
+          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 },
+            h('div', { style: S.h2Row },
+              h('h2', { style: S.h2 }, groupLabel),
+              isSub && h('span', { style: S.badge() }, '仅子 Agent 使用'),
+              h('span', { style: { ...S.mono, fontSize: 11, color: T.labelSecondary } },
+                chainLen ? `链长 ${chainLen}` : '未配置'),
+              h('div', { style: S.sectionActions },
+                h('button', {
+                  style: S.btnSm,
+                  onClick: () => setDraft((d) => {
+                    const next = JSON.parse(JSON.stringify(d));
+                    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: { 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) }),
+                }),
+              ),
+            ),
+
+            // ---- 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, marginTop: 16 } },
+          h('button', { style: S.btn('primary'), onClick: applyChains, disabled: busy },
+            busy ? '处理中…' : '保存并下发到网关'),
+          h('button', { style: S.btn(), onClick: preview, disabled: busy }, '预览 YAML'),
+        ),
+
+        msg && h('div', {
+          style: { marginTop: 10, padding: '8px 10px', borderRadius: 6, fontSize: 12.5,
+            color: msg.kind === 'ok' ? T.success : msg.kind === 'warn' ? T.warn : T.error,
+            background: tint(msg.kind === 'ok' ? T.success : msg.kind === 'warn' ? T.warn : T.error, 10),
+            border: `1px solid ${tint(msg.kind === 'ok' ? T.success : msg.kind === 'warn' ? T.warn : T.error, 35)}` },
+        }, msg.text),
+
+        yaml && h('div', { style: { marginTop: 12 } },
+          h('div', { style: { ...S.label, marginBottom: 5 } }, '下发给网关的 config.yaml'),
+          h('pre', {
+            style: { ...S.mono, maxHeight: 300, overflow: 'auto', padding: 10, borderRadius: 6,
+              background: T.bgLayer2, border: `1px solid ${T.borderL1}`, margin: 0 },
+          }, yaml),
+        ),
+      );
+    }
+
+    // -----------------------------------------------------------------------
+    // Tab 3：日志面板
+    // -----------------------------------------------------------------------
+    function LogsTab({ api, state }) {
+      const limit = state?.gateway?.logLimit || 50;
+      const [logs, setLogs] = useState([]);
+      const [busy, setBusy] = useState(false);
+      const [err, setErr] = useState(null);
+      const [fAgent, setFAgent] = useState('');
+      const [fProfile, setFProfile] = useState('');
+      const [needsDb, setNeedsDb] = useState(false);
+      const [localOnly, setLocalOnly] = useState(false);
+      /** 【需求7】网关状态随日志一起返回，面板顶部直接展示 */
+      const [gw, setGw] = useState(null);
+
+      const fetchLogs = useCallback(async () => {
+        setBusy(true); setErr(null);
+        const r = await api('logs/fetch', { limit });
+        if (r.ok) {
+          setLogs(r.data || []);
+          setNeedsDb(Boolean(r.needsDatabase));
+          setLocalOnly(Boolean(r.localOnly));
+          setGw(r.gateway || null);
+        } else {
+          setErr(r.error); setLogs([]);
+        }
+        setBusy(false);
+      }, [api, limit]);
+
+      useEffect(() => { fetchLogs(); }, [fetchLogs]);
+
+      const shown = useMemo(() => {
+        let rows = logs.slice(0, limit);
+        if (fAgent) rows = rows.filter((l) => l.agentType === fAgent);
+        if (fProfile) rows = rows.filter((l) => l.profile === fProfile);
+        return rows;
+      }, [logs, limit, fAgent, fProfile]);
+
+      const agents = useMemo(() => [...new Set(logs.map((l) => l.agentType).filter((x) => x && x !== '-'))], [logs]);
+      const profiles = useMemo(() => [...new Set(logs.map((l) => l.profile).filter((x) => x && x !== '-'))], [logs]);
+
+      const kindOf = (l) => (l.status === 'failure' ? 'failed' : l.fallback === 'yes' ? 'fallback' : 'normal');
+      const gwState = gw?.state || 'stopped';
+      const gwLabel = gwState === 'running' ? '运行中' : gwState === 'error' ? '异常' : '已停止';
+      const gwColor = gwState === 'running' ? T.success : gwState === 'error' ? T.error : T.warn;
+
+      return h('div', null,
+        // 【需求7】网关状态条：让用户一眼看到网关是否在跑
+        h('div', {
+          style: {
+            display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
+            padding: '8px 12px', marginBottom: 12, borderRadius: 6,
+            background: tint(gwColor, 8), border: `1px solid ${tint(gwColor, 30)}`,
+          },
+        },
+          h('span', {
+            style: { width: 8, height: 8, borderRadius: '50%', background: gwColor, display: 'inline-block' },
+          }),
+          h('span', { style: { fontWeight: 600, fontSize: 12.5 } }, `网关 ${gwLabel}`),
+          gw?.owned && h('span', { style: S.badge(T.brand, tint(T.brand, 14)) }, '本插件托管'),
+          gw?.lastError && h('span', { style: { ...S.mono, fontSize: 11, color: T.error } },
+            String(gw.lastError).slice(0, 90)),
+          h('button', { style: { ...S.btnSm, marginLeft: 'auto' }, onClick: fetchLogs, disabled: busy },
+            busy ? '加载中…' : '刷新'),
+        ),
+
+        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)),
+          ),
+          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)),
+          ),
+          h('span', { style: { marginLeft: 'auto', ...S.mono, fontSize: 11, color: T.labelSecondary } },
+            `显示 ${shown.length} / 最多 ${limit} 条`),
+        ),
+
+        h('div', { style: { ...S.row, marginBottom: 10, ...S.mono, fontSize: 11, color: T.labelSecondary } },
+          h('span', { style: S.badge(T.warn, tint(T.warn, 14)) }, '橙色 = 触发 fallback'),
+          h('span', { style: S.badge(T.error, tint(T.error, 14)) }, '红色 = 全链路失败'),
+          h('span', { style: S.badge(T.brand, tint(T.brand, 14)) }, 'gateway = 网关生命周期'),
+        ),
+
+        needsDb && h('div', { style: S.notice('warn') },
+          '网关调用日志需要 PostgreSQL（LiteLLM 不支持 SQLite）。当前显示插件侧记录：探针失败 + 网关生命周期事件。'),
+
+        err && h('div', { style: S.notice('error') }, `无法获取日志：${err}`),
+
+        !err && shown.length === 0 && h('div', { style: { color: T.labelSecondary, padding: 14 } },
+          busy ? '加载中…' : '暂无日志'),
+
+        shown.map((l) => {
+          const k = kindOf(l);
+          const isGwEvent = l.source === 'gateway';
+          return h('div', { key: l.id, style: S.logRow(k) },
+            h('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'baseline' } },
+              h('span', { style: { ...S.mono, color: T.labelSecondary, fontSize: 11 } },
+                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),
+              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)) }, '失败'),
+              h('span', { style: { marginLeft: 'auto', ...S.mono, color: T.labelSecondary, fontSize: 11 } },
+                [l.latencyMs != null ? `${Math.round(l.latencyMs)}ms` : null,
+                 l.tokens != null ? `${l.tokens} tok` : null].filter(Boolean).join(' · ')),
+            ),
+            (l.error || l.message) && h('div', { style: { ...S.mono, color: T.error, marginTop: 4, fontSize: 11 } },
+              l.error || l.message),
+          );
+        }),
+      );
+    }
+
+    // -----------------------------------------------------------------------
+    // Tab 4：当前会话
+    // -----------------------------------------------------------------------
+    function SessionTab({ api, ctx, state, setState }) {
+      const profileIds = state?.profileIds || Object.keys(state?.routes || {});
+      const [profile, setProfile] = useState('');
+      const [saved, setSaved] = useState(null);
+      const [busy, setBusy] = useState(false);
+      const [probe, setProbe] = useState(null);
+      const [drops, setDrops] = useState([]);
+
+      // 当前会话 id：尽量从宿主会话上下文取；取不到就用 URL 里的会话标记
+      // 当前会话 id：尽量从宿主会话上下文取；取不到就用 URL 里的会话标记。
+      // 【注意】依赖数组里不能放 ctx / api —— 它们是每次渲染新建的对象，
+      // 放进去会触发无限重渲染（表现为整页空白）。
+      const sessionId = useMemo(() => {
+        try {
+          const fromCtx = ctx?.session?.id || ctx?.sessionId;
+          if (fromCtx) return String(fromCtx);
+          const loc = globalThis.location;
+          const hay = String(loc?.hash || '') + String(loc?.search || '');
+          const m = hay.match(/session[=/]([A-Za-z0-9_-]+)/i);
+          return m ? m[1] : 'current';
+        } catch {
+          return 'current';
+        }
+      }, []);
+
+      useEffect(() => {
+        api('session/getProfile', { sessionId }).then((r) => {
+          if (r.ok) setProfile(r.data || '');
+        });
+      }, [api, sessionId]);
+
+      // 本会话最近降级记录：从日志里按 profile 过滤出 fallback 行
+      const loadDrops = useCallback(async () => {
+        const r = await api('logs/fetch', { limit: 50 });
+        if (r.ok) setDrops((r.data || []).filter((l) => l.fallback === 'yes' || l.status === 'failure').slice(0, 10));
+      }, [api]);
+      useEffect(() => { loadDrops(); }, [loadDrops]);
+
+      // 子代理路由覆盖状态
+      const [rt, setRt] = useState(null);
+      useEffect(() => {
+        api('routing/status', { sessionId }).then((r) => { if (r.ok) setRt(r.data); });
+      }, [api, sessionId]);
+
+      const save = async () => {
+        setBusy(true);
+        const r = await api('session/setProfile', { sessionId, profile });
+        setSaved(r.ok ? { kind: 'ok', text: `已绑定 ${profile || '（已清空）'}，存入会话变量` } : { kind: 'err', text: r.error });
+        setBusy(false);
+      };
+
+      const runProbe = async () => {
+        setBusy(true); setProbe(null);
+        const agentType = 'root';
+        // 【需求4】探针测的是当前 profile 里选中的链头模型，不是写死的名字
+        const r = await api('probe/run', { agentType, profileId: profile || profileIds[0] });
+        setProbe(r.ok
+          ? { kind: 'ok', text: `探针通过（${r.latencyMs}ms）· 回复 ${JSON.stringify(r.data.reply)} · 上游模型 ${r.data.modelUsed}` }
+          : { kind: 'err', text: `探针失败：${r.error}` });
+        setBusy(false);
+      };
+
+      return h('div', null,
+        h('div', { style: S.card },
+          h('div', { style: S.field },
+            h('label', { style: S.label }, '本会话绑定的 Profile（降级链方案）'),
+            h('select', {
+              style: S.input, value: profile, onChange: (e) => setProfile(e.target.value),
+            },
+              h('option', { value: '' }, '（不绑定）'),
+              profileIds.map((p) => h('option', { key: p, value: p }, p)),
+            ),
+            h('div', { style: S.hint },
+              '绑定后：本会话的 root 请求按该 profile 的 root 链走；spawn 的子 Agent 按同 profile 的 coder/research 链走。'),
+          ),
+          h('div', { style: S.row },
+            h('button', { style: S.btn('primary'), onClick: save, disabled: busy }, '保存到会话变量'),
+            h('button', { style: S.btn(), onClick: runProbe, disabled: busy }, busy ? '测试中…' : '一键探针测试'),
+          ),
+          h('div', { style: { ...S.mono, color: T.labelSecondary, marginTop: 8, fontSize: 11 } },
+            `会话变量键：litellm-bridge/session-profile · sessionId=${sessionId}`),
+          saved && h('div', {
+            style: { marginTop: 9, fontSize: 12, color: saved.kind === 'ok' ? T.success : T.error },
+          }, saved.text),
+          probe && h('div', {
+            style: { marginTop: 9, fontSize: 12, color: probe.kind === 'ok' ? T.success : T.error },
+          }, probe.text),
+        ),
+
+        rt && h('div', { style: S.card },
+          h('div', { style: { fontWeight: 600, marginBottom: 8 } }, '子代理路由覆盖'),
+          (() => {
+            const sp = rt.sessionProvider;
+            const isNative = sp && rt.nativeProviders.some((p) => sp.toLowerCase() === p || sp.toLowerCase().startsWith(p + '-'));
+            const isGw = sp && sp.toLowerCase().startsWith('litellm');
+            const verdict = !sp ? { t: '未知', c: S.warn, d: '尚未观察到本会话的模型请求，暂不覆盖（fail-open）' }
+              : isGw ? { t: '全部走网关', c: S.ok, d: '主 Agent 与子 Agent 均走网关链路，不做覆盖' }
+              : isNative ? { t: '子代理将改道网关', c: S.warn, d: `主 Agent 保留 ${sp}（消耗积分）；子 Agent 强制走 ${rt.gatewayProvider}` }
+              : { t: '不覆盖', c: S.ok, d: `供应商 ${sp} 不在覆盖名单` };
+            return h('div', null,
+              h('div', { style: { marginBottom: 6 } },
+                h('span', { style: S.badge() }, `当前供应商: ${sp || '未知'}`),
+                h('span', { style: { color: verdict.c, fontWeight: 600 } }, verdict.t),
+              ),
+              h('div', { style: { fontSize: 12, opacity: 0.75, marginBottom: 6 } }, verdict.d),
+              h('div', { style: { ...S.mono, fontSize: 11, opacity: 0.55 } },
+                `覆盖名单: ${rt.nativeProviders.join(' / ')}  ·  目标: ${rt.gatewayProvider}`),
+              h('div', { style: { ...S.mono, fontSize: 11, opacity: 0.55, marginTop: 3 } },
+                `已评估 ${rt.stats.evaluated} 次 · 改道 ${rt.stats.overridden} 次 · 跳过 ${rt.stats.skipped} 次 · 降级 ${rt.stats.degraded} 次`),
+            );
+          })(),
+        ),
+
+        h('div', { style: S.card },
+          h('div', { style: { fontWeight: 600, marginBottom: 8 } }, '本会话最近降级记录'),
+          drops.length === 0
+            ? h('div', { style: { opacity: 0.5, fontSize: 12 } }, '暂无降级记录（或网关日志不含该字段）')
+            : drops.map((d, i) => h('div', { key: i, style: S.logRow(d.status === 'failure' ? 'failed' : 'fallback') },
+                h('span', { style: { ...S.mono } }, d.model),
+                h('span', { style: { ...S.mono, opacity: 0.6, marginLeft: 8 } },
+                  d.fallback === 'yes' ? '触发降级' : '失败'),
+                d.error && h('div', { style: { ...S.mono, fontSize: 11, color: S.err, marginTop: 3 } }, d.error),
+              )),
+        ),
+
+        h('div', { style: { ...S.mono, opacity: 0.5, fontSize: 11.5, lineHeight: 1.7 } },
+          h('div', null, '联动说明：本插件读写会话 profile 变量 + 子代理路由覆盖；'),
+          h('div', null, 'dsh-plugin-header-inject 读取该变量并注入 x-agent-type / x-session-profile。'),
+          h('div', null, '两插件通过会话变量解耦，互不依赖。'),
+        ),
+      );
+    }
+
+    /**
+     * 创建**稳定引用**的 api 函数（同一个插件实例只创建一次）。
+     *
+     * 为什么必须要稳定：各 Tab 的 useEffect 依赖数组里都有 [api]。若 api 每次
+     * 渲染都变，就会 effect→setState→重渲染→新 api→再 effect 无限循环，
+     * React 表现为组件反复重挂载、页面空白。
+     */
+    const apiCache = new WeakMap();
+    function createStableApi(ctx) {
+      const hit = apiCache.get(ctx);
+      if (hit) return hit;
+      const fn = createApi(ctx);
+      apiCache.set(ctx, fn);
+      return fn;
+    }
+
+    // -----------------------------------------------------------------------
+    // 【会话级入口】标题旁的小按钮 —— 直接给当前会话选降级链（profile）
+    //
+    // 槽位：conversation.session.header.actions（list，scope: session）
+    //   ownerProps 为空；组件通过标准 props 拿到 sessionId。
+    //   这是 dsh-llm-fallbacks 同款做法，replaceRisk: none，不动官方 UI。
+    //
+    // 为什么不做进右下角模型选择器：
+    //   那个槽位是 conversation.input.model（single，shadows-shipped-ui），
+    //   注册即替换掉官方选择器，得不偿失。
+    // -----------------------------------------------------------------------
+    function SessionProfileButton({ api, sessionId }) {
+      const [open, setOpen] = useState(false);
+      const [profile, setProfile] = useState('');
+      const [profiles, setProfiles] = useState([]);
+      const [busy, setBusy] = useState(false);
+      const [msg, setMsg] = useState(null);
+
+      const load = useCallback(async () => {
+        const [r, rs] = await Promise.all([
+          api('session/getProfile', { sessionId }),
+          api('routes/get'),
+        ]);
+        if (r.ok) setProfile(r.data || '');
+        if (rs.ok) setProfiles(rs.profileIds || Object.keys(rs.data || {}));
+      }, [api, sessionId]);
+
+      useEffect(() => { load(); }, [load]);
+
+      const pick = async (p) => {
+        setBusy(true); setMsg(null);
+        const r = await api('session/setProfile', { sessionId, profile: p });
+        if (r.ok) {
+          setProfile(p);
+          setMsg({ ok: true, text: `已绑定 ${p || '（不绑定）'}` });
+        } else {
+          setMsg({ ok: false, text: r.error || '保存失败' });
+        }
+        setBusy(false);
+      };
+
+      const label = profile || '未绑定';
+
+      return h('div', { style: { position: 'relative', display: 'inline-flex' } },
+        h('button', {
+          type: 'button',
+          title: '本会话降级链（profile）',
+          onClick: () => setOpen((v) => !v),
+          style: {
+            ...S.btnSm,
+            height: 26, gap: 5, padding: '0 9px',
+            color: profile ? T.brand : T.labelSecondary,
+            borderColor: profile ? tint(T.brand, 45) : T.borderL2,
+            background: profile ? tint(T.brand, 8) : T.bgLayer1,
+          },
+        },
+          h('span', {
+            style: {
+              width: 6, height: 6, borderRadius: '50%',
+              background: profile ? T.brand : T.idle, display: 'inline-block',
+            },
+          }),
+          h('span', null, label),
+        ),
+
+        open && h('div', {
+          style: {
+            position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 50,
+            minWidth: 220, padding: 8, borderRadius: 8,
+            background: T.bgOverlay, border: `1px solid ${T.borderL2}`,
+            boxShadow: '0 6px 24px rgba(0,0,0,.18)',
+          },
+        },
+          h('div', { style: { ...S.hint, marginBottom: 6, marginTop: 0 } }, '本会话降级链'),
+          ...(profiles.length ? profiles : []).map((p) => h('button', {
+            key: p,
+            type: 'button',
+            disabled: busy,
+            onClick: () => pick(p),
+            style: {
+              display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+              padding: '6px 8px', marginBottom: 2, fontSize: 12.5, cursor: 'pointer',
+              fontFamily: 'inherit', textAlign: 'left', borderRadius: 5,
+              border: '1px solid transparent',
+              background: p === profile ? tint(T.brand, 12) : 'transparent',
+              color: p === profile ? T.brand : T.labelPrimary,
+            },
+          },
+            h('span', { style: { opacity: p === profile ? 1 : 0.25 } }, '●'),
+            h('span', null, p),
+          )),
+          h('button', {
+            type: 'button',
+            disabled: busy,
+            onClick: () => pick(''),
+            style: {
+              width: '100%', padding: '6px 8px', marginTop: 2, fontSize: 12,
+              cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
+              borderRadius: 5, border: `1px solid ${T.borderL1}`,
+              background: 'transparent', color: T.labelSecondary,
+            },
+          }, '清除绑定'),
+          msg && h('div', {
+            style: { ...S.hint, marginTop: 6, color: msg.ok ? T.success : T.error },
+          }, msg.text),
+        ),
+      );
+    }
+
+    // -----------------------------------------------------------------------
+    // 错误边界 —— 任何一个 Tab 抛错时显示具体错误，而不是一片空白
+    // （上一版「当前会话」整页空白，就是因为渲染异常被 React 静默吞掉了）
+    // -----------------------------------------------------------------------
+    function ErrorBox({ title, error }) {
+      return h('div', { style: S.notice('error') },
+        h('div', { style: { fontWeight: 600, marginBottom: 4 } }, `${title} 渲染出错`),
+        h('div', { style: { fontFamily: 'ui-monospace, monospace', fontSize: 11.5, wordBreak: 'break-all' } },
+          String(error?.message || error || '未知错误')),
+        h('div', { style: { ...S.hint, marginTop: 6 } },
+          '请把这段错误发给开发者；同时打开浏览器控制台可看到完整堆栈。'),
+      );
+    }
+
+    /** 用 try/catch 包住子渲染，异常时就地降级为错误块。 */
+    function Guard({ title, children }) {
+      try {
+        return children();
+      } catch (err) {
+        return h(ErrorBox, { title, error: err });
+      }
+    }
+
+    // -----------------------------------------------------------------------
+    // 主面板 —— 对齐 dsh-llm-fallbacks 的官方设置页语言：
+    //   扁平页面（无卡片壳）· 顶部标签导航 · 页内分区 h2 + 每区独立 Save/Discard
+    // -----------------------------------------------------------------------
+    function BridgePanel({ api, ctx }) {
+      const [tab, setTab] = useState('gateway');
+      const [state, setState] = useState(null);
+
+      useEffect(() => {
+        api('gateway/get').then((r) => { if (r.ok) setState(r.data); });
+      }, [api]);
+
+      const tabs = [
+        ['gateway', '网关设置'],
+        ['routes', '路由配置'],
+        ['logs', '日志面板'],
+        ['session', '当前会话'],
+      ];
+
+      return h('div', { style: S.page },
+        // 顶部标签导航
+        h('div', { style: S.tabs },
+          tabs.map(([id, label]) => h('button', {
+            key: id, style: S.tab(tab === id), onClick: () => setTab(id),
+          }, label)),
+        ),
+        // 内容区：限制最大宽度 + 左右留白，避免贴边和大片空白
+        h('div', { style: { padding: '16px 20px 40px', maxWidth: 860, margin: '0 auto' } },
+          tab === 'gateway' && h(Guard, { title: '网关设置' }, () => h(GatewayTab, { api, state, setState })),
+          tab === 'routes' && h(Guard, { title: '路由配置' }, () => h(RouteTab, { api, state, setState })),
+          tab === 'logs' && h(Guard, { title: '日志面板' }, () => h(LogsTab, { api, state })),
+          tab === 'session' && h(Guard, { title: '当前会话' }, () => h(SessionTab, { api, ctx, state, setState })),
+        ),
+      );
+    }
+
+
+    // -----------------------------------------------------------------------
+    // 插件入口
+    // -----------------------------------------------------------------------
+    // 【只依赖 slots】
+    //
+    // 原来写了 ['slots', 'locale', 'connection']。问题：`locale` 与 `connection`
+    // 若在组合里不存在，整个 client entry 会被判定 failed，而 boot audit 会因此
+    // 拒绝启动 —— 表现就是**设置页只剩一个齿轮图标、点进去空白**。
+    //
+    // 对照能正常工作的 dsh-qq-plugin，它的 client inject 就只有 `['slots']`，
+    // 其余能力（工作区、locale）一律用 ctx.get 可选探测。这里照做：
+    //   - locale：我们自己有中文文案，不需要宿主 locale 服务
+    //   - connection：RPC 已改为同源 fetch（/plugins/dsh-plugin-litellm-bridge），
+    //     根本不需要 connection 服务
+    // -----------------------------------------------------------------------
+    const inject = ['slots'];
+
+    /** 导航项标题：优先用 locale 资源，取不到就用内置文案。 */
+    function sectionLabel(ctx) {
+      return () => {
+        try {
+          const loc = ctx?.locale;
+          // 宿主的 locale 服务形态各异，probing 式取值，失败不影响标题
+          const t = typeof loc?.get === 'function'
+            ? loc.get('meta.title')
+            : typeof loc?.text === 'function' ? loc.text('meta.title') : null;
+          if (typeof t === 'string' && t.trim()) return t;
+        } catch { /* 用兜底文案 */ }
+        return 'LiteLLM 网关桥接';
+      };
+    }
+
+    function apply(ctx) {
+      // 【关键】api 必须是稳定引用。
+      // createApi(ctx) 每次渲染都会返回新函数；把它放进 useEffect 的依赖数组
+      // 会导致「effect -> setState -> 重渲染 -> 新 api -> 再跑 effect」死循环，
+      // 表现就是整页空白。
+      const api = createStableApi(ctx);
+      const Panel = () => h(BridgePanel, { api, ctx });
+
+      // 【必须用 ctx.effect 包住注册】
+      // client 侧模板要求 apply 通过 ctx.effect 注册每个资源并返回清理函数。
+      // 裸调用（不包 effect）时，某些宿主版本不会把注册项纳入生命周期，
+      // 结果是「注册了但渲染不出来」。
+      const register = () => {
+        // ---- (1) 设置页：完整配置面板（网关 / 路由 / 日志 / 会话）----
+        const disposeSection = ctx.slots.inject('settings.section', () => {
+          return ctx.slots.register(
+            {
+              name: 'settings.section',
+              id: NS,
+              order: 60,
+              // 【关键 · 之前漏了 label】
+              // 设置页左侧导航的显示名就来自这个 label。缺了它，
+              // 导航里只剩一个没有文字的齿轮图标 —— 就是用户看到的现象。
+              // 写成函数是因为标题要在 locale 变更时跟着变。
+              label: sectionLabel(ctx),
+            },
+            Panel,
+          );
+        });
+
+        // ---- (2) 会话标题旁的小按钮：直接为当前会话选降级链 ----
+        //     槽位是 list + scope:session，组件通过标准 props 拿到 sessionId。
+        const disposeHeader = ctx.slots.inject('conversation.session.header.actions', () => {
+          return ctx.slots.register(
+            {
+              name: 'conversation.session.header.actions',
+              id: NS,
+              order: -5,
+              label: () => '降级链',
+            },
+            (props) => h(SessionProfileButton, {
+              api,
+              sessionId: props?.sessionId ?? props?.session?.id ?? 'current',
+            }),
+          );
+        });
+
+        // 清理：ctx.effect 要求返回 dispose
+        return () => {
+          try { disposeSection?.(); } catch { /* ignore */ }
+          try { disposeHeader?.(); } catch { /* ignore */ }
+        };
+      };
+
+      // ctx.effect 在个别宿主版本上可能是异步语义；同步不可用时直接注册，
+      // 保证「注册本身」一定发生（宁可少一层生命周期管理，也不能不显示）。
+      if (typeof ctx.effect === 'function') {
+        ctx.effect(register);
+      } else {
+        register();
+      }
+    }
+
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  },
+});