dsh-bottom-info-bar 1.9.0 → 1.9.2

package/lib/client.js

@@ -413,1451 +413,1448 @@ function installStyles() {
   return function () { style.remove(); };
 }
 
-module.exports = {
-  inject: ['slots'],
-  async apply(ctx) {
-    // slots 服务可能晚于 apply 就绪：优先 ctx.slots（inject 注入属性），回退 ctx.get('slots')；
-    // 仍不可用则轮询等待（最多 60×300ms ≈ 18s），绝不提前退出导致注册丢失
-    let slots = ctx.slots || ctx.get('slots');
-    for (let i = 0; slots === undefined && i < 60; i++) {
-      await new Promise(function (resolve) { window.setTimeout(resolve, 300); });
-      slots = ctx.slots || ctx.get('slots');
-    }
-    if (slots === undefined) {
-      console.warn('[dsh-bottom-info-bar] slots 服务 18s 内未就绪，信息栏未注册');
-      return;
-    }
-
-    ctx.effect(function () {
-      const disposeStyles = installStyles();
-      return function () { disposeStyles(); };
-    }, 'dsh-bottom-info-bar: styles');
+// ---------- v1.9.0 PR2 → v1.9.1 设置页（并入本文件，单文件化） ----------
+// 原 plugin/src/client-settings.js 整体迁移至此（v1.9.1 拆除 build 跨文件拼接与 module.exports 重写机制）：
+// 与信息栏同一 factory 作用域，直接复用 React/rpc/FIELD_REGISTRY/PRESET_COLORS/PRESET_COLOR_SET；
+// 注册动作进 apply()，与信息栏共用等好的 slots 变量、走同一 slots.inject 路径
+// （官方 dsh-client-ui-settings-general 同型写法），不再有 async 串接。
+// 约定：本段顶层标识符一律 bibSet* / InfoBarSettings* 前缀，绝不与主包重名。
+const BIB_SET_EVENT = 'dsh-bib-config-changed';
+const BIB_SET_PRESET_LABELS = { red: '红', green: '绿', blue: '蓝', purple: '紫', orange: '橙', neutral: '中性' };
+// 原生取色器（input[type=color]）在未自定义时显示的代表色（浅色主题值；实际信息栏渲染仍按主题变量）
+const BIB_SET_PRESET_WELL_HEX = { red: '#D92D20', green: '#087F5B', blue: '#0044CC', purple: '#6941C6', orange: '#B54708', neutral: '#333333' };
+const BIB_SET_HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+// 「显示字段」两级分组（D6 用户拍板：原生在前、插件在后）——构建从 constants.js 注入（单一来源）
+const FIELD_GROUP_ORDER = ['native', 'plugin'];
+const FIELD_GROUP_LABELS = {
+  native: '原生字段',
+  plugin: '插件字段',
+};
+// 每行出现条件文案：modes → 中文（余额制/订阅制/账单制/原生统计行/通用）
+const BIB_SET_MODE_LABELS = { balance: '余额制', subscription: '订阅制', billing: '账单制', native: '原生统计行', common: '通用' };
+function bibSetModeText(field) {
+  if (!field || !Array.isArray(field.modes) || field.modes.length === 0) return '';
+  if (field.modes.length === 1 && field.modes[0] === 'native') return '原生统计行字段';
+  const labels = [];
+  for (let i = 0; i < field.modes.length; i++) {
+    const label = BIB_SET_MODE_LABELS[field.modes[i]];
+    if (label && labels.indexOf(label) === -1) labels.push(label);
+  }
+  return labels.length > 0 ? '出现于' + labels.join('、') : '';
+}
 
-    // ---------- 注册：一体替换（同 id 'stats'） ----------
-    let density = 'full';
-    let toggling = false; // 持久化期间禁止重复切换（只允许 full/compact 两态）
-    let densityVersion = 0;
-    let occupantDispose = null;
-    const densityListeners = new Set();
-    const densityBusyListeners = new Set();
-    // Survives composer remounts, so returning to an already visited session
-    // does not require even one paint of an intermediate state.
-    const sessionModelCache = new Map();
-    function applyMode() {
-      if (occupantDispose) { occupantDispose(); occupantDispose = null; }
-      occupantDispose = slots.register(
-        // 静态注册无动态沙箱的优先级自动分配：显式给低 priority（最低者渲染）以遮蔽原生 stats 栏（priority 0）
-        { name: 'conversation.composer.dock', id: 'stats', priority: -1000 },
-        function (slotProps) {
-          return React.createElement(BottomInfoBar, Object.assign({}, slotProps, { density: density, onToggleDensity: onToggleDensity }));
-        }
-      );
-    }
+function bibSetDispatchChanged() {
+  // 设置页保存成功后广播：信息栏监听并立即重拉配置（宿主内存缓存，即回）
+  try { document.dispatchEvent(new CustomEvent(BIB_SET_EVENT)); } catch (err) { /* 事件总线不可用时静默：30s 周期校准兜底 */ }
+}
 
-    // 不重新注册 slot：保留同一个 React 树，CSS 才能连续地收合/展开行高。
-    function setDensity(next) {
-      density = next;
-      densityListeners.forEach(function (listener) { listener(next); });
-    }
+function bibSetOperationMessage(err) {
+  return String((err && err.message) || err || '请稍后再试');
+}
 
-    function setDensitySaving(next) {
-      toggling = next;
-      densityBusyListeners.forEach(function (listener) { listener(next); });
-    }
+// ---------- 设置页样式（融入 DSH 设置面板：卡片/行布局/控件全部走 --dsw-alias-* 令牌） ----------
+function bibSetInstallStyles() {
+  const id = 'dsh-bottom-info-bar-settings';
+  const existing = document.querySelector('style[data-plugin-css="' + id + '"]');
+  if (existing !== null) return function () {};
+  const style = document.createElement('style');
+  style.dataset.plugin = 'dsh-bottom-info-bar';
+  style.dataset.pluginCss = id;
+  style.textContent = `
+      .bib-set-root { --bib-set-brand: var(--dsw-alias-brand-primary, #4d6bfe); }
+      /* 页面标题行（M2 首渲骨架）：数据未到也先渲染标题，绝不白屏 */
+      .bib-set-page-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--dsw-alias-label-primary); }
+      .bib-settings { max-width: 720px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; color: var(--dsw-alias-label-primary); }
+      .bib-set-intro { margin: 0; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+      .bib-set-status { margin: 0; color: var(--dsw-alias-label-tertiary); font-size: 13px; line-height: 20px; }
+      .bib-set-card { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-3); border-radius: 12px; }
+      .bib-set-card-header { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
+      .bib-set-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--dsw-alias-label-primary); }
+      .bib-set-card-desc { font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); }
+      .bib-set-body { border-top: 1px solid var(--dsw-alias-border-l2); margin: 0 16px; padding: 0 0 6px; }
+      .bib-set-group-title { margin: 12px 0 2px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+      .bib-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dsw-alias-border-l2); }
+      .bib-set-row:last-child { border-bottom: none; }
+      .bib-set-rowText { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
+      .bib-set-rowTitle { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-primary); }
+      .bib-set-keep { flex: none; padding: 0 6px; border-radius: 999px; background: var(--dsw-alias-fill-tsp-secondary, rgba(128,128,128,0.12)); color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 500; line-height: 16px; }
+      .bib-set-rowDesc { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+      /* 开关：iOS 原生质感（40×24 轨道 + 18px 圆钮），语义 = role:switch + aria-checked */
+      .bib-set-switch { appearance: none; background: 0 0; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; flex: none; border-radius: 12px; }
+      .bib-set-switch:disabled { cursor: default; opacity: 0.5; }
+      .bib-set-switch:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
+      .bib-set-switch-track { position: relative; display: inline-block; box-sizing: border-box; width: 40px; height: 24px; border-radius: 12px; background: var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); transition: background-color 160ms var(--ds-ease-in-out, ease); }
+      .bib-set-switch-track[data-on="true"] { background: var(--bib-set-brand); }
+      .bib-set-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 160ms var(--ds-ease-in-out, ease); }
+      .bib-set-switch-track[data-on="true"] .bib-set-switch-thumb { transform: translateX(16px); }
+      /* 色板圆点：role:radio + roving tabindex（方向键/Home/End 可达），选中态外圈描边 */
+      .bib-set-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
+      .bib-set-dots { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+      .bib-set-dot { appearance: none; width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+      .bib-set-dot:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
+      .bib-set-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3, #fff), 0 0 0 4px var(--bib-set-brand); }
+      .bib-set-dot-core { display: block; width: 14px; height: 14px; border-radius: 50%; }
+      .bib-set-dot-default .bib-set-dot-core { background: transparent; border: 1.5px dashed var(--dsw-alias-label-quaternary, rgba(128,128,128,0.5)); }
+      /* 原生取色器色井：保留系统行为，仅样式化为圆角色井 */
+      .bib-set-well { display: inline-flex; flex: none; }
+      .bib-set-well input[type="color"] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 30px; height: 26px; padding: 2px; border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); border-radius: 8px; background: var(--dsw-alias-bg-layer-2, transparent); cursor: pointer; }
+      .bib-set-well input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
+      .bib-set-well input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
+      .bib-set-well input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }
+      .bib-set-well input[type="color"]:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
+      /* hex 输入：等宽字体、即时校验（非法描红 + aria-invalid），Enter/失焦提交，非法回退 */
+      .bib-set-hex { box-sizing: border-box; width: 88px; padding: 4px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2, transparent); border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); border-radius: 8px; }
+      .bib-set-hex:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 1px; }
+      .bib-set-hex[data-invalid="true"] { border-color: var(--dsw-alias-state-error-primary, var(--dsw-alias-label-error, #d92d20)); }
+      .bib-set-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 2px 0 10px; }
+      .bib-set-btn { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); color: var(--dsw-alias-label-secondary); background: 0 0; border-radius: 8px; padding: 5px 14px; font-size: 13px; line-height: 1.5; }
+      .bib-set-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.08)); }
+      .bib-set-btn:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
+      .bib-set-btn:disabled { opacity: 0.5; cursor: default; }
+      .bib-set-alert { margin: 0; color: var(--dsw-alias-state-error-primary, var(--dsw-alias-label-error, #d92d20)); font-size: 12px; line-height: 18px; flex: 1 1 auto; min-width: 0; }
+      .bib-set-notice { margin: 0; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; flex: 1 1 auto; min-width: 0; }
+      @media (prefers-reduced-motion: reduce) { .bib-set-switch-track, .bib-set-switch-thumb { transition: none; } }
+    `;
+  document.head.appendChild(style);
+  return function () { style.remove(); };
+}
 
-    function onToggleDensity() {
-      if (toggling) return; // 切换进行中，忽略连点
-      const requestVersion = ++densityVersion;
-      setDensitySaving(true);
-      const previous = density;
-      const next = density === 'full' ? 'compact' : 'full';
-      // 交互反馈不等网络；写入失败才回退，避免慢网络让点击看似没有生效。
-      setDensity(next);
-      rpc('setInfoDensity', { density: next }).then(function () {
-        if (requestVersion === densityVersion) setDensitySaving(false);
-      }).catch(function (err) {
-        if (requestVersion !== densityVersion) return;
-        setDensitySaving(false);
-        if (density === next) setDensity(previous);
-        console.error('Bottom Info Bar 切换信息密度失败', err);
-      });
-    }
+// ---------- 控件 ----------
+function bibSetSwitch(props) {
+  const checked = !!props.checked;
+  return React.createElement('button', {
+    type: 'button',
+    className: 'bib-set-switch',
+    role: 'switch',
+    'aria-checked': checked,
+    'aria-label': props.label,
+    disabled: props.disabled === true,
+    title: props.title,
+    onClick: function () { if (props.onToggle) props.onToggle(!checked); },
+  },
+  React.createElement('span', { className: 'bib-set-switch-track', 'data-on': checked ? 'true' : 'false', 'aria-hidden': 'true' },
+    React.createElement('span', { className: 'bib-set-switch-thumb' })));
+}
 
-    slots.inject('conversation.composer.dock', function () {
-      applyMode();
-      return function () { if (occupantDispose) occupantDispose(); };
-    });
+// 色板圆点组：默认 + 预设色名；role=radiogroup/radio + roving tabindex（方向键/Home/End）
+function bibSetPalette(props) {
+  const options = ['default'].concat(PRESET_COLORS);
+  const refs = React.useRef({});
+  const isSelected = function (option) {
+    return option === 'default' ? props.value === null : props.value === option;
+  };
+  const select = function (option) {
+    if (props.onSelect) props.onSelect(option === 'default' ? null : option);
+  };
+  const move = function (from, step) {
+    const next = (from + step + options.length) % options.length;
+    const node = refs.current[next];
+    if (node && typeof node.focus === 'function') node.focus();
+    select(options[next]);
+  };
+  const onKey = function (event, index) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { event.preventDefault(); move(index, 1); }
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { event.preventDefault(); move(index, -1); }
+    else if (event.key === 'Home') { event.preventDefault(); move(index, -index); }
+    else if (event.key === 'End') { event.preventDefault(); move(index, options.length - 1 - index); }
+  };
+  const children = options.map(function (option, index) {
+    const selected = isSelected(option);
+    const isDefault = option === 'default';
+    const coreStyle = {};
+    if (!isDefault) coreStyle.background = 'var(--bi-palette-' + option + ')';
+    const ariaLabel = isDefault ? '恢复默认颜色' : (BIB_SET_PRESET_LABELS[option] || option);
+    return React.createElement('button', {
+      key: option,
+      type: 'button',
+      ref: function (node) { refs.current[index] = node; },
+      className: 'bib-set-dot' + (isDefault ? ' bib-set-dot-default' : ''),
+      role: 'radio',
+      'aria-checked': selected,
+      'aria-label': ariaLabel,
+      title: ariaLabel,
+      tabIndex: selected ? 0 : -1,
+      onClick: function () { select(option); },
+      onKeyDown: function (event) { onKey(event, index); },
+    }, React.createElement('span', { className: 'bib-set-dot-core', style: coreStyle, 'aria-hidden': 'true' }));
+  });
+  return React.createElement('span', { className: 'bib-set-dots', role: 'radiogroup', 'aria-label': props.label }, children);
+}
 
-    const initialDensityVersion = densityVersion;
-    try {
-      const cfg = await rpc('getConfig');
-      // 用户已经作出新选择时，绝不让启动阶段的旧配置覆盖它。
-      if (initialDensityVersion === densityVersion && cfg && (cfg.infoDensity === 'full' || cfg.infoDensity === 'compact') && cfg.infoDensity !== density) {
-        setDensity(cfg.infoDensity);
-      }
-    } catch (err) { /* 默认完整 */ }
+// ---------- 页面组件 ----------
+// M2 首渲骨架：页面标题行——任何状态下都先输出可见标题（数据未到、加载失败也一样有东西看）
+function bibSetPageTitle() {
+  return React.createElement('h1', { className: 'bib-set-page-title' }, '信息底栏设置');
+}
 
-    // v1.9.0 PR2：字段配置与密度同型——启动拉取一次；设置页保存成功后派发 CustomEvent 即时同步；
-    // load() 周期顺带校准（宿主常驻内存缓存，拉取即回）
-    refreshFieldConfig();
-    ctx.effect(function () {
-      if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined;
-      const onConfigChanged = function () { refreshFieldConfig(); };
-      document.addEventListener('dsh-bib-config-changed', onConfigChanged);
-      return function () { document.removeEventListener('dsh-bib-config-changed', onConfigChanged); };
-    }, 'dsh-bottom-info-bar: field config sync');
+function InfoBarSettingsSection(props) {
+  void props; // 与官方 section 组件同签名（外壳会传入 renderSlot/close 等，本页不使用）
+  const [snapshot, setSnapshot] = React.useState(null); // { fields, colors, configVersion }
+  const [status, setStatus] = React.useState('loading');
+  const [loadError, setLoadError] = React.useState(null);
+  const [opError, setOpError] = React.useState(null);
+  const [notice, setNotice] = React.useState(null);
+  const [saving, setSaving] = React.useState(false);
+  const [hexDrafts, setHexDrafts] = React.useState({});
+  const opSeqRef = React.useRef(0); // 版本号守卫：慢响应绝不覆盖更新的操作
+  const savingCountRef = React.useRef(0);
 
-    // ---------- 组件 ----------
-    function BottomInfoBar(props) {
-      // 原生/会话投影（hooks 无条件调用）
-      const statsProj = props.useProjection ? props.useProjection('sessionStats') : undefined;
-      const usageProj = props.useProjection ? props.useProjection('tokenUsage') : undefined;
-
-      const [state, setState] = React.useState({
-        loading: true, balance: null, pricing: null, usage: null, billingMode: null, sub: null, billing: null,
-        errors: { balance: null, pricing: null, usage: null, billingMode: null, sub: null, billing: null },
-      });
-      // 版本信息由 host 在启动时从 package.json 读取；无论是否有新版，都用于服务商/模型 hover 展示。
-      const [updateInfo, setUpdateInfo] = React.useState(null);
-      const [now, setNow] = React.useState(Date.now());
-      // This state is owned by DSH's per-session model selector, not by the
-      // process-wide default for newly-created Agents.
-      const [sessionModel, setSessionModel] = React.useState(null);
-      const [modelSource, setModelSource] = React.useState('pending');
-      const [displayDensity, setDisplayDensity] = React.useState(props.density);
-      const [isDensitySaving, setIsDensitySaving] = React.useState(toggling);
+  React.useEffect(function () {
+    let active = true;
+    rpc('getFieldConfig').then(function (cfg) {
+      if (!active) return;
+      if (cfg && typeof cfg === 'object' && cfg.fields) {
+        setSnapshot({ fields: cfg.fields, colors: cfg.colors || {}, configVersion: cfg.configVersion || 0 });
+        setStatus('ready');
+      } else {
+        setLoadError('配置暂时无法读取'); setStatus('error');
+      }
+    }).catch(function (err) {
+      if (!active) return;
+      setLoadError(bibSetOperationMessage(err)); setStatus('error');
+    });
+    return function () { active = false; };
+  }, []);
 
-      // 外层持有持久化后的密度；组件只订阅数值变化，避免 slot 卸载重建打断动画。
-      React.useEffect(function () {
-        densityListeners.add(setDisplayDensity);
-        densityBusyListeners.add(setIsDensitySaving);
-        // 订阅前后没有异步间隙：立即回读，避免首次 effect 建立前的更新丢失。
-        setDisplayDensity(density);
-        setIsDensitySaving(toggling);
-        return function () {
-          densityListeners.delete(setDisplayDensity);
-          densityBusyListeners.delete(setIsDensitySaving);
-        };
-      }, []);
+  const beginOp = React.useCallback(function () {
+    savingCountRef.current += 1;
+    setSaving(true);
+  }, []);
+  const endOp = React.useCallback(function () {
+    savingCountRef.current = Math.max(0, savingCountRef.current - 1);
+    if (savingCountRef.current === 0) setSaving(false);
+  }, []);
 
-      // v1.9.0 PR2：字段配置订阅——设置页保存（CustomEvent）或周期校准更新配置时重渲染。
-      // 配置本体存模块级单例，组件只记版本号；订阅建立时立即回读避免首帧用过期配置。
-      const [fieldConfigTick, setFieldConfigTick] = React.useState(fieldConfigVersion);
-      React.useEffect(function () {
-        const listener = function () { setFieldConfigTick(fieldConfigVersion); };
-        fieldConfigListeners.add(listener);
-        setFieldConfigTick(fieldConfigVersion);
-        return function () { fieldConfigListeners.delete(listener); };
-      }, []);
-      void fieldConfigTick;
+  // M2 屏显防护（铁律：绝不允许白屏）：渲染主体整体包进 try/catch——
+  // 任何渲染期异常都在页面内渲染为可见红色错误框（role=alert，含错误信息），而不是中断成白屏
+  try {
+    // 首渲骨架：即便配置尚未取回，也立刻渲染「信息底栏设置」标题行 + 载入说明
+    if (status === 'loading') {
+      return React.createElement('div', { className: 'bib-set-root bib-settings' },
+        bibSetPageTitle(),
+        React.createElement('p', { className: 'bib-set-status' }, '正在载入信息底栏设置…'));
+    }
+    // RPC 加载失败：照旧显示可见错误文字（角色 alert），页面不空白
+    if (status === 'error') {
+      return React.createElement('div', { className: 'bib-set-root bib-settings' },
+        bibSetPageTitle(),
+        React.createElement('p', { className: 'bib-set-alert', role: 'alert' }, '信息底栏设置暂时无法读取：' + (loadError || '请稍后再试')));
+    }
 
-      // 当前会话 ID 多路获取：slotProps 标准 kit → session 快照 → 运行时 sessions 服务
-      // （DSH 各版本注入方式不同，任一路可用即拿到真实会话 ID，避免回退到上一会话的账）
-      const propsRef = React.useRef(props);
-      propsRef.current = props;
-      const resolveSessionId = React.useCallback(function () {
-        const p = propsRef.current;
-        try {
-          if (p.sessionId) return p.sessionId;
-          if (p.session && p.session.sessionId) return p.session.sessionId;
-          const sessions = ctx.get ? ctx.get('sessions') : null;
-          const cur = sessions && sessions.list && sessions.list.getSnapshot().current;
-          if (cur) return cur;
-        } catch (e) { /* 拿不到则返回空串，host 端对空串返回 null（显示 ¥0.000） */ }
-        return '';
-      }, []);
-      const sessionId = resolveSessionId();
+  const fieldsById = {};
+  for (let i = 0; i < FIELD_REGISTRY.length; i++) fieldsById[FIELD_REGISTRY[i].id] = FIELD_REGISTRY[i];
+  function fieldOn(id) { return snapshot.fields[id] !== false; }
+  function colorOf(id) {
+    const value = snapshot.colors[id];
+    return typeof value === 'string' && value.length > 0 ? value : null;
+  }
+  function labelOf(id) { const f = fieldsById[id]; return f ? f.label : id; }
+  function makePair(key, value) { const pair = {}; pair[key] = value; return pair; }
 
-      // Subscribe to the exact store the native model seat uses.  A session
-      // activation or a successful model switch publishes here immediately;
-      // no polling and no host HTTP request sit on the display path.
-      React.useEffect(function () {
-        let stop = null;
-        let active = true;
-        setSessionModel(null);
-        setModelSource('pending');
-        if (!sessionId) { setModelSource('unavailable'); return function () {}; }
-        try {
-          const directories = ctx.get ? ctx.get('modelDirectories') : null;
-          if (!directories || typeof directories.directoryFor !== 'function') {
-            setModelSource('unavailable');
-            return function () {};
-          }
-          setModelSource('available');
-          const directory = directories.directoryFor(sessionId);
-          const publish = function () {
-            if (!active || !directory.store || typeof directory.store.getSnapshot !== 'function') return;
-            const snapshot = directory.store.getSnapshot();
-            const selected = snapshot && snapshot.current;
-            if (!selected || typeof selected.provider !== 'string' || typeof selected.model !== 'string') return;
-            const group = Array.isArray(snapshot.groups) ? snapshot.groups.find(function (g) { return g && g.id === selected.provider; }) : null;
-            const model = group && Array.isArray(group.models) ? group.models.find(function (m) { return m && m.id === selected.model; }) : null;
-            const inputModalities = model && Array.isArray(model.inputModalities) ? model.inputModalities : null;
-            const value = {
-              sessionId: sessionId,
-              provider: selected.provider,
-              model: selected.model,
-              providerDisplay: group && typeof group.name === 'string' ? group.name : selected.provider,
-              modelDisplay: model && typeof model.name === 'string' ? model.name : selected.model,
-              // true/false 来自 DSH 的明确目录 metadata；null 表示仍待 host 查询，不能误画成文本模型。
-              acceptsImageInput: inputModalities === null ? null : inputModalities.indexOf('image') !== -1,
-            };
-            sessionModelCache.set(sessionId, value);
-            setSessionModel(value);
-          };
-          publish();
-          if (directory.store && typeof directory.store.subscribe === 'function') stop = directory.store.subscribe(publish);
-        } catch (err) { setModelSource('unavailable'); /* old DSH: retain the RPC fallback */ }
-        return function () { active = false; if (typeof stop === 'function') stop(); };
-      }, [sessionId]);
+  // 服务端快照回写（configVersion 一并更新；persisted=false 时如实提示落盘失败）
+  function applyServerResult(res) {
+    if (!res || typeof res !== 'object') return;
+    setSnapshot(function (prev) {
+      return {
+        fields: res.fields || (prev && prev.fields) || {},
+        colors: res.colors || (prev && prev.colors) || {},
+        configVersion: typeof res.configVersion === 'number' ? res.configVersion : ((prev && prev.configVersion) || 0),
+      };
+    });
+    if (res.persisted === false) setNotice('改动已生效，但写入本地配置文件失败：' + (res.warning || '未知原因'));
+  }
 
-      // 组件生命周期 AbortSignal：卸载时中止所有在途 RPC（配合 rpc 20s 超时，双保险防旧响应写 state）
-      const abortRef = React.useRef(null);
-      React.useEffect(function () {
-        const controller = new AbortController();
-        abortRef.current = controller;
-        return function () { controller.abort(); };
-      }, []);
+  // 乐观更新 + 失败回退（参照 density toggle）+ 版本号守卫
+  function commit(patch, applyOptimistic, revertOptimistic, errorPrefix) {
+    setOpError(null);
+    setNotice(null);
+    const seq = ++opSeqRef.current;
+    applyOptimistic();
+    beginOp();
+    rpc('setFieldConfig', patch).then(function (res) {
+      if (seq !== opSeqRef.current) { endOp(); return; }
+      endOp();
+      applyServerResult(res);
+      bibSetDispatchChanged();
+    }).catch(function (err) {
+      if (seq !== opSeqRef.current) { endOp(); return; }
+      endOp();
+      revertOptimistic();
+      setOpError(errorPrefix + '保存失败：' + bibSetOperationMessage(err));
+    });
+  }
 
-      const loadVersionRef = React.useRef(0);
-      const cachedSessionModel = sessionId ? sessionModelCache.get(sessionId) : null;
-      const activeSessionModel = sessionModel && sessionModel.sessionId === sessionId ? sessionModel : (cachedSessionModel || null);
-      const load = React.useCallback(function (selection) {
-        // v1.9.0 PR2：周期顺带校准字段配置（宿主内存缓存，即回；设置页变更另有 CustomEvent 即时通道）
-        refreshFieldConfig();
-        const requestVersion = ++loadVersionRef.current;
-        const activeSelection = selection || activeSessionModel;
-        const selectionArgs = activeSelection ? { selection: { provider: activeSelection.provider, model: activeSelection.model } } : {};
-        // 首启窗口内（打开/刷新网页头几秒）→ 快照类请求强制重查；之后的 30s 周期轮询走常规缓存节奏
-        const force = Date.now() - BOOT_AT < FORCE_REFRESH_WINDOW_MS;
-        if (force) { selectionArgs.force = true; }
-        const signal = abortRef.current ? abortRef.current.signal : null;
-        // 逐接口容错：allSettled 等全部 settle（最坏 20s 超时兜底），任一失败只降级该端点，
-        // 不拖垮其他成功数据；合并逻辑在 mergeLoadResults（失败端点保留旧值 + 记录错误）
-        Promise.allSettled([
-          rpc('getBalanceSnapshot', activeSelection ? { provider: activeSelection.provider, force: force } : (force ? { force: true } : null), signal),
-          rpc('getPricing', selectionArgs, signal),
-          rpc('getUsageSummary', Object.assign({ sessionId: sessionId }, selectionArgs), signal),
-          rpc('getBillingMode', selectionArgs, signal),
-          rpc('getSubscriptionSnapshot', selectionArgs, signal),
-          rpc('getBillingStatus', selectionArgs, signal),
-        ]).then(function (results) {
-          // Do not allow a late A response to overwrite newly active B.
-          if ((signal && signal.aborted) || requestVersion !== loadVersionRef.current) return;
-          setState(function (s) { return mergeLoadResults(s, results); });
-        });
-      }, [resolveSessionId, activeSessionModel, sessionId]);
+  function setFieldFlag(id, next) {
+    const previous = fieldOn(id);
+    if (previous === next) return;
+    commit({ fields: makePair(id, next) },
+      function () { setSnapshot(function (s) { return Object.assign({}, s, { fields: Object.assign({}, s.fields, makePair(id, next)) }); }); },
+      function () { setSnapshot(function (s) { return Object.assign({}, s, { fields: Object.assign({}, s.fields, makePair(id, previous)) }); }); },
+      '「' + labelOf(id) + '」');
+  }
 
-      React.useEffect(function () {
-        load();
-        const id = window.setInterval(load, 30000);
-        return function () { window.clearInterval(id); };
-      }, [load]);
+  function setColor(id, next) {
+    const previous = colorOf(id);
+    if (previous === next) {
+      setHexDrafts(function (drafts) { return Object.assign({}, drafts, makePair(id, undefined)); });
+      return;
+    }
+    commit({ colors: makePair(id, next) },
+      function () { setSnapshot(function (s) { return Object.assign({}, s, { colors: Object.assign({}, s.colors, makePair(id, next)) }); }); },
+      function () { setSnapshot(function (s) { return Object.assign({}, s, { colors: Object.assign({}, s.colors, makePair(id, previous)) }); }); },
+      '「' + labelOf(id) + '」颜色');
+  }
 
-      // 版本检查由 host 在进程启动时完成；这里仅读取一次缓存，不轮询 NPM。
-       React.useEffect(function () {
-         let active = true;
-         rpc('getUpdateInfo').then(function (info) {
-           if (active && info && typeof info.current === 'string') setUpdateInfo(info);
-         }).catch(function () { /* 版本检查失败静默，不影响信息栏 */ });
-         return function () { active = false; };
-       }, []);
+  // hex 输入：输入中仅标记非法（描红 + aria-invalid）；Enter/失焦时合法才提交，非法回退当前值
+  function hexDraftOf(id) {
+    const draft = hexDrafts[id];
+    return typeof draft === 'string' ? draft : null;
+  }
+  function committedHexText(id) {
+    const value = colorOf(id);
+    if (value === null) return '';
+    return PRESET_COLOR_SET.has(value) ? value.toUpperCase() : value;
+  }
+  function onHexChange(id, raw) {
+    setHexDrafts(function (drafts) { return Object.assign({}, drafts, makePair(id, raw)); });
+  }
+  function commitHex(id) {
+    const draft = hexDraftOf(id);
+    if (draft === null) return;
+    const value = draft.trim();
+    setHexDrafts(function (drafts) { return Object.assign({}, drafts, makePair(id, undefined)); });
+    if (value.length === 0) return;
+    if (!BIB_SET_HEX_PATTERN.test(value)) {
+      setOpError('「' + labelOf(id) + '」颜色格式无效：请输入 #RRGGBB（例如 #0044CC）');
+      return;
+    }
+    setColor(id, value.toUpperCase());
+  }
 
-      // Model text comes from sessionModel synchronously.  The following load
-      // only refreshes secondary data in the background.
-      React.useEffect(function () {
-        if (activeSessionModel) load(activeSessionModel);
-      }, [load, activeSessionModel]);
+  function runReset(kind) {
+    setOpError(null);
+    setNotice(null);
+    const seq = ++opSeqRef.current;
+    beginOp();
+    rpc(kind === 'colors' ? 'resetFieldColors' : 'resetFieldConfig').then(function (res) {
+      if (seq !== opSeqRef.current) { endOp(); return; }
+      endOp();
+      applyServerResult(res);
+      bibSetDispatchChanged();
+      setNotice(kind === 'colors' ? '已恢复默认颜色' : '已恢复默认标签');
+    }).catch(function (err) {
+      if (seq !== opSeqRef.current) { endOp(); return; }
+      endOp();
+      setOpError('重置失败：' + bibSetOperationMessage(err));
+    });
+  }
 
-      // 会话统计变化（回复中 turns/steps/tokens 增长，回复完成时停止）→ 防抖后即时刷新花费，
-      // 不等下一个 30s 轮询：用户回复一结束即可看到真实金额
-      React.useEffect(function () {
-        if (!statsProj) return undefined;
-        const timer = window.setTimeout(load, 800);
-        return function () { window.clearTimeout(timer); };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [load,
-        statsProj && statsProj.turns,
-        statsProj && statsProj.steps,
-        statsProj && statsProj.decodeTokens,
-      ]);
+  // ---- 渲染 ----
+  const groupsChildren = [];
+  for (let g = 0; g < FIELD_GROUP_ORDER.length; g++) {
+    const group = FIELD_GROUP_ORDER[g];
+    const groupFields = FIELD_REGISTRY.filter(function (f) { return f.group === group; });
+    if (groupFields.length === 0) continue;
+    const rows = [];
+    for (let i = 0; i < groupFields.length; i++) {
+      const field = groupFields[i];
+      const isAnchor = field.anchor === true;
+      const descParts = [];
+      // D6：锚点与其他字段同等可隐藏——「身份锚点」仅作为说明保留，不再恒开/禁用
+      if (isAnchor) descParts.push('身份锚点：当前对话的服务商与模型标识。');
+      const modeText = bibSetModeText(field);
+      if (modeText) descParts.push(modeText + '。');
+      if (field.note) descParts.push(field.note);
+      if (field.suggestKeep) descParts.push('关闭后相应提示不再出现，建议保留。');
+      rows.push(React.createElement('div', { key: field.id, className: 'bib-set-row' },
+        React.createElement('div', { className: 'bib-set-rowText' },
+          React.createElement('div', { className: 'bib-set-rowTitle' },
+            field.label,
+            field.suggestKeep ? React.createElement('span', { className: 'bib-set-keep' }, '建议保留') : null),
+          React.createElement('div', { className: 'bib-set-rowDesc' }, descParts.join(''))),
+        bibSetSwitch({
+          label: '显示' + field.label,
+          checked: fieldOn(field.id),
+          title: fieldOn(field.id) ? '点击隐藏' : '点击显示',
+          onToggle: function (next) { setFieldFlag(field.id, next); },
+        })));
+    }
+    groupsChildren.push(React.createElement('div', { key: 'g-' + group },
+      React.createElement('div', { className: 'bib-set-group-title' }, FIELD_GROUP_LABELS[group] || group),
+      rows));
+  }
 
-      React.useEffect(function () {
-        const id = window.setInterval(function () { setNow(Date.now()); }, 1000);
-        return function () { window.clearInterval(id); };
-      }, []);
+  const colorChildren = [];
+  for (let g = 0; g < FIELD_GROUP_ORDER.length; g++) {
+    const group = FIELD_GROUP_ORDER[g];
+    const groupFields = FIELD_REGISTRY.filter(function (f) { return f.group === group; });
+    if (groupFields.length === 0) continue;
+    const rows = [];
+    for (let i = 0; i < groupFields.length; i++) {
+      const field = groupFields[i];
+      const value = colorOf(field.id);
+      const isPreset = value !== null && PRESET_COLOR_SET.has(value);
+      const isHex = value !== null && !isPreset;
+      const draft = hexDraftOf(field.id);
+      const hexValue = draft !== null ? draft : committedHexText(field.id);
+      const hexInvalid = draft !== null && draft.trim().length > 0 && !BIB_SET_HEX_PATTERN.test(draft.trim());
+      const wellValue = isHex ? value : (isPreset ? (BIB_SET_PRESET_WELL_HEX[value] || '#333333') : '#333333');
+      const valueText = value === null ? '默认'
+        : (isPreset ? (BIB_SET_PRESET_LABELS[value] || value) : value.toUpperCase());
+      rows.push(React.createElement('div', { key: field.id, className: 'bib-set-row' },
+        React.createElement('div', { className: 'bib-set-rowText' },
+          React.createElement('div', { className: 'bib-set-rowTitle' }, field.label),
+          React.createElement('div', { className: 'bib-set-rowDesc' }, '当前：' + valueText + (field.anchor === true ? '（身份锚点）' : ''))),
+        React.createElement('div', { className: 'bib-set-controls' },
+          React.createElement(bibSetPalette, {
+            label: field.label + '的预设颜色',
+            value: value,
+            onSelect: function (next) { setColor(field.id, next); },
+          }),
+          React.createElement('label', { className: 'bib-set-well' },
+            React.createElement('input', {
+              type: 'color',
+              'aria-label': field.label + '的自定义颜色',
+              title: '自定义颜色（打开系统取色器）',
+              value: wellValue,
+              onChange: function (event) {
+                const picked = event && event.target ? event.target.value : null;
+                if (picked && BIB_SET_HEX_PATTERN.test(picked)) setColor(field.id, picked.toUpperCase());
+              },
+            })),
+          React.createElement('input', {
+            type: 'text',
+            className: 'bib-set-hex',
+            'aria-label': field.label + '的十六进制颜色',
+            'aria-invalid': hexInvalid ? 'true' : 'false',
+            'data-invalid': hexInvalid ? 'true' : 'false',
+            placeholder: '#RRGGBB',
+            spellCheck: false,
+            maxLength: 7,
+            value: hexValue,
+            onChange: function (event) { onHexChange(field.id, event && event.target ? event.target.value : ''); },
+            onBlur: function () { commitHex(field.id); },
+            onKeyDown: function (event) { if (event.key === 'Enter') { event.preventDefault(); commitHex(field.id); } },
+          }))));
+    }
+    colorChildren.push(React.createElement('div', { key: 'c-' + group },
+      React.createElement('div', { className: 'bib-set-group-title' }, FIELD_GROUP_LABELS[group] || group),
+      rows));
+  }
 
-      // While background RPCs catch up, render the newly activated session's
-      // model and suppress details from the prior session rather than showing
-      // a convincing but wrong provider/model combination.
-      const waitForSessionModel = !!sessionId && modelSource !== 'unavailable' && !activeSessionModel;
-      const visiblePricing = activeSessionModel && (!state.pricing
-        || state.pricing.provider !== activeSessionModel.provider || state.pricing.model !== activeSessionModel.model)
-        ? { provider: activeSessionModel.provider, model: activeSessionModel.model, providerDisplay: activeSessionModel.providerDisplay, modelDisplay: activeSessionModel.modelDisplay, mode: 'unknown', acceptsImageInput: activeSessionModel.acceptsImageInput }
-        : (waitForSessionModel ? null : state.pricing);
-      // v1.6 T7：订阅 provider 集合提取为共享常量，消除两端硬编码漂移
-      var SUBSCRIPTION_PROVIDERS = ['codex', 'chatgpt', 'opencode-go', 'opencode', 'openai-codex', 'zai', 'zai-coding-cn', 'xiaomi-token-plan-cn', 'xiaomi-token-plan-sgp', 'xiaomi-token-plan-ams'];
-      // v1.7 FR-14：云账单 provider 集合（账单型显示，与余额/额度互斥）
-      var BILLING_PROVIDERS = ['together', 'fireworks', 'amazon-bedrock', 'cloudflare-ai-gateway', 'cloudflare-workers-ai'];
-      const visibleBillingMode = activeSessionModel && (!state.billingMode
-        || state.billingMode.provider !== activeSessionModel.provider || state.billingMode.model !== activeSessionModel.model)
-        ? { provider: activeSessionModel.provider, model: activeSessionModel.model, mode: SUBSCRIPTION_PROVIDERS.indexOf(activeSessionModel.provider) >= 0 ? 'subscription' : (BILLING_PROVIDERS.indexOf(activeSessionModel.provider) >= 0 ? 'billing' : 'balance') }
-        : (waitForSessionModel ? null : state.billingMode);
-      // ---- 与原生一致格式工具 ----
-      function formatTokens(n) {
-        const scaled = function (v) { return v >= 100 ? String(Math.round(v)) : String(Math.round(v * 10) / 10); };
-        if (n < 1e3) return String(n);
-        if (n < 1e6) return scaled(n / 1e3) + 'K';
-        return scaled(n / 1e6) + 'M';
-      }
-      function formatDuration(ms) {
-        const s = ms / 1e3;
-        if (s < 60) return Math.round(s * 10) / 10 + 's';
-        const whole = Math.round(s);
-        const sec = whole % 60;
-        return Math.floor(whole / 60) + 'm' + String(sec).padStart(2, '0') + 's';
-      }
-      function formatTps(tps) {
-        const clamped = Math.max(0, tps);
-        return clamped >= 10 ? String(Math.round(clamped)) : String(Math.round(clamped * 10) / 10);
-      }
-      function billedInput(usage) {
-        return (usage.uncachedInputTokens || 0) + (usage.cacheReadTokens || 0) + (usage.cacheWriteTokens || 0);
-      }
-      function fmt(n, digits) {
-        if (n == null || isNaN(n)) return '—';
-        return n.toFixed(digits == null ? 2 : digits);
-      }
-      function fmtCountdown(ms) {
-        if (ms == null || ms <= 0) return '00:00';
-        const totalSec = Math.floor(ms / 1000);
-        const h = Math.floor(totalSec / 3600);
-        const m = Math.floor((totalSec % 3600) / 60);
-        const s = totalSec % 60;
-        const p = function (x) { return String(x).padStart(2, '0'); };
-        return h > 0 ? h + 'h' + p(m) + 'm' : p(m) + ':' + p(s);
-      }
-      // 订阅窗口重置时刻（本地时区，hover 浮窗用）
-      function formatDateTime(ms) {
-        const d = new Date(ms);
-        const p = function (x) { return String(x).padStart(2, '0'); };
-        return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
-      }
-      // 订阅窗口重置倒计时（天级格式）：≥1 天 → '1d 21h'；≥1 小时 → '3h 12m'；<1 小时 → '12:34'
-      function fmtResetCountdown(ms) {
-        if (ms == null || ms <= 0) return '00:00';
-        const totalSec = Math.floor(ms / 1000);
-        const d = Math.floor(totalSec / 86400);
-        const h = Math.floor((totalSec % 86400) / 3600);
-        const m = Math.floor((totalSec % 3600) / 60);
-        if (d > 0) return d + 'd ' + h + 'h';
-        if (h > 0) return h + 'h ' + String(m).padStart(2, '0') + 'm';
-        return String(m).padStart(2, '0') + ':' + String(totalSec % 60).padStart(2, '0');
-      }
+  const feedback = [];
+  if (opError) feedback.push(React.createElement('p', { key: 'err', className: 'bib-set-alert', role: 'alert' }, opError));
+  else if (notice) feedback.push(React.createElement('p', { key: 'notice', className: 'bib-set-notice', role: 'status' }, notice));
+  else if (saving) feedback.push(React.createElement('p', { key: 'saving', className: 'bib-set-notice', 'aria-live': 'polite' }, '正在保存…'));
 
-      // 订阅窗口剩余百分比（剩余 = 100 - 已用；钳制 ≥0 防接口异常值）
-      function remainingPercent(w) {
-        return Math.max(0, 100 - w.usedPercent);
-      }
-      // 订阅窗口紧凑行标签（5小时 → '5h'，周 → '周'，月 → '月'）；hover 明细仍用完整标签
-      function compactWindowLabel(key) {
-        if (key === 'five_hour') return '5h';
-        if (key === 'seven_day') return '周';
-        if (key === 'monthly') return '月';
-        return '窗口';
-      }
+  return React.createElement('div', { className: 'bib-set-root bib-settings' },
+    bibSetPageTitle(),
+    React.createElement('p', { className: 'bib-set-intro' },
+      '选择信息底栏显示哪些信息、为每个信息挑一个颜色。改动即时生效并自动保存，重启后仍然保留；隐藏信息不会删除任何记账数据。'),
+    React.createElement('section', { className: 'bib-set-card', 'aria-labelledby': 'bib-set-fields-title' },
+      React.createElement('div', { className: 'bib-set-card-header' },
+        React.createElement('h2', { id: 'bib-set-fields-title', className: 'bib-set-card-title' }, '显示字段'),
+        React.createElement('div', { className: 'bib-set-card-desc' },
+          '关闭的字段立刻从信息栏隐藏且不占位；「刷新失败」「账单未保存」等提示建议保留，方便发现数据异常。')),
+      React.createElement('div', { className: 'bib-set-body' }, groupsChildren)),
+    React.createElement('section', { className: 'bib-set-card', 'aria-labelledby': 'bib-set-colors-title' },
+      React.createElement('div', { className: 'bib-set-card-header' },
+        React.createElement('h2', { id: 'bib-set-colors-title', className: 'bib-set-card-title' }, '字段颜色'),
+        React.createElement('div', { className: 'bib-set-card-desc' },
+          '挑选预设色或用取色器、十六进制自定义；颜色会自动适配浅色与深色主题，保持可读。未改动前与现在的外观完全一致。')),
+      React.createElement('div', { className: 'bib-set-body' }, colorChildren)),
+    React.createElement('div', { className: 'bib-set-footer' },
+      feedback,
+      React.createElement('button', {
+        type: 'button', className: 'bib-set-btn', disabled: saving,
+        onClick: function () { runReset('fields'); },
+      }, '重置标签'),
+      React.createElement('button', {
+        type: 'button', className: 'bib-set-btn', disabled: saving,
+        onClick: function () { runReset('colors'); },
+      }, '重置颜色')));
+  } catch (err) {
+    // M2：渲染期异常绝不以白屏收场——改为页面内可见的红色错误框（role=alert，含错误信息）
+    return React.createElement('div', { className: 'bib-set-root bib-settings' },
+      bibSetPageTitle(),
+      React.createElement('p', { className: 'bib-set-alert', role: 'alert' }, '信息底栏设置渲染出错：' + bibSetOperationMessage(err)));
+  }
+}
 
-      // 数字统一加粗（仅数字本身）
-      function num(t, extraClass) {
-        return React.createElement('b', { className: 'bi-num' + (extraClass ? ' ' + extraClass : '') }, String(t));
-      }
+module.exports = {
+  inject: ['slots'],
+  async apply(ctx) {
+    // slots 服务可能晚于 apply 就绪：优先 ctx.slots（inject 注入属性），回退 ctx.get('slots')；
+    // 仍不可用则轮询等待（最多 60×300ms ≈ 18s），绝不提前退出导致注册丢失
+    let slots = ctx.slots || ctx.get('slots');
+    for (let i = 0; slots === undefined && i < 60; i++) {
+      await new Promise(function (resolve) { window.setTimeout(resolve, 300); });
+      slots = ctx.slots || ctx.get('slots');
+    }
+    if (slots === undefined) {
+      console.warn('[dsh-bottom-info-bar] slots 服务 18s 内未就绪，信息栏未注册');
+      return;
+    }
 
-      // 统一数值语法：标签保持常规，数值与紧随的单位/货币符号作为一个加粗的数据令牌。
-      function metric(label, value, extraClass) {
-        return React.createElement('span', { className: 'bi-metric', 'data-metric-text': label + ' ' + value },
-          React.createElement('span', { className: 'bi-metric-label' }, label),
-          React.createElement('span', { className: 'bi-metric-data' }, num(value, extraClass)));
-      }
+    ctx.effect(function () {
+      const disposeStyles = installStyles();
+      return function () { disposeStyles(); };
+    }, 'dsh-bottom-info-bar: styles');
 
-      // 仅在 DSH 模型目录明确声明 inputModalities 包含 image 时，将“完整模型名 视觉”合并为一个椭圆。
-      function modelLabelWithCapability(pr, modelLabel) {
-        if (pr && pr.acceptsImageInput === null) {
-          return React.createElement('span', { className: 'bi-model-capability-pending', 'aria-hidden': 'true' }, modelLabel);
+    // ---------- 注册：一体替换（同 id 'stats'） ----------
+    let density = 'full';
+    let toggling = false; // 持久化期间禁止重复切换（只允许 full/compact 两态）
+    let densityVersion = 0;
+    let occupantDispose = null;
+    const densityListeners = new Set();
+    const densityBusyListeners = new Set();
+    // Survives composer remounts, so returning to an already visited session
+    // does not require even one paint of an intermediate state.
+    const sessionModelCache = new Map();
+    function applyMode() {
+      if (occupantDispose) { occupantDispose(); occupantDispose = null; }
+      occupantDispose = slots.register(
+        // 静态注册无动态沙箱的优先级自动分配：显式给低 priority（最低者渲染）以遮蔽原生 stats 栏（priority 0）
+        { name: 'conversation.composer.dock', id: 'stats', priority: -1000 },
+        function (slotProps) {
+          return React.createElement(BottomInfoBar, Object.assign({}, slotProps, { density: density, onToggleDensity: onToggleDensity }));
         }
-        if (!pr || pr.acceptsImageInput !== true) return React.createElement('span', { className: 'bi-model-name' }, modelLabel);
-        return React.createElement('span', { className: 'bi-vision', title: '支持图像输入。' },
-          React.createElement('span', { className: 'bi-vision-model' }, modelLabel),
-          React.createElement('span', { className: 'bi-vision-kind' }, '视觉'));
-      }
+      );
+    }
 
-      function modelSeparator() {
-        return React.createElement('span', { className: 'bi-model-dot', 'aria-hidden': 'true' }, '·');
-      }
+    // 不重新注册 slot：保留同一个 React 树，CSS 才能连续地收合/展开行高。
+    function setDensity(next) {
+      density = next;
+      densityListeners.forEach(function (listener) { listener(next); });
+    }
 
-      function modelDetail(pr, modelName) {
-        return React.createElement('span', { className: 'bi-model-detail' },
-          modelSeparator(), modelLabelWithCapability(pr, modelName));
-      }
+    function setDensitySaving(next) {
+      toggling = next;
+      densityBusyListeners.forEach(function (listener) { listener(next); });
+    }
+
+    function onToggleDensity() {
+      if (toggling) return; // 切换进行中，忽略连点
+      const requestVersion = ++densityVersion;
+      setDensitySaving(true);
+      const previous = density;
+      const next = density === 'full' ? 'compact' : 'full';
+      // 交互反馈不等网络；写入失败才回退，避免慢网络让点击看似没有生效。
+      setDensity(next);
+      rpc('setInfoDensity', { density: next }).then(function () {
+        if (requestVersion === densityVersion) setDensitySaving(false);
+      }).catch(function (err) {
+        if (requestVersion !== densityVersion) return;
+        setDensitySaving(false);
+        if (density === next) setDensity(previous);
+        console.error('Bottom Info Bar 切换信息密度失败', err);
+      });
+    }
 
-      // 参考图的视觉标签将服务商显示在椭圆外；仅移除重复的服务商前缀，不截断真实模型名。
-      function modelLabelWithoutProvider(modelLabel, providerLabel) {
-        if (modelLabel.toLowerCase().indexOf(providerLabel.toLowerCase()) !== 0) return modelLabel;
-        const suffix = modelLabel.slice(providerLabel.length);
-        // 只有目录以分隔符明确写成“服务商 + 模型”时才去重；例如 OpenAICode 不是 OpenAI 的重复前缀。
-        if (!/^[\s·._/-]+/.test(suffix)) return modelLabel;
-        return suffix.replace(/^[\s·._/-]+/, '') || modelLabel;
-      }
+    slots.inject('conversation.composer.dock', function () {
+      applyMode();
+      return function () { if (occupantDispose) occupantDispose(); };
+    });
 
-      // 服务商 + 具体模型（两种模式共用；纯显示，不拦截点击——点击冒泡到整条信息栏触发密度切换；hover 展示定价模式）
-      // 模型目录名可能重复服务商前缀（如 DeepSeek V4 Flash）；始终拆分为“DeepSeek · V4 Flash”，
-      // 既保留服务商信息，也不让模型名重复前缀。
-      function providerGroup() {
-        const pr = visiblePricing;
-        const provLabel = (pr && pr.providerDisplay) ? pr.providerDisplay : '未知';
-        const modelLabel = (pr && pr.modelDisplay) ? pr.modelDisplay
-          : (pr && pr.model ? pr.model : '未知模型');
-        const modelName = modelLabelWithoutProvider(modelLabel, provLabel);
-        const versionLine = updateInfo && typeof updateInfo.current === 'string'
-          ? '\n插件版本：' + updateInfo.current : '';
-        const provTitle = '服务商：' + provLabel + ' ' + modelLabel + '\n'
-          + (pr && pr.mode === 'peak-valley' ? '定价：峰谷价（工作日高峰 9-12、14-18 点；周末全天空闲）'
-            : (pr && pr.mode === 'flat' ? '定价：固定价' : '定价：未收录，按默认计'))
-          + versionLine;
-        return React.createElement('span', { key: 'prov', className: 'bi-model-group', title: provTitle },
-          React.createElement('b', { className: 'bi-model-provider' }, provLabel),
-          modelDetail(pr, modelName));
-      }
+    // v1.9.0 PR2 信息底栏设置页（v1.9.1 单文件化）：与信息栏同一 apply、复用已等好的 slots 变量，
+    // 直接注册 settings.section——官方 dsh-client-ui-settings-general 同型写法（name/id/order/label + 组件），
+    // 不再有跨文件拼接、module.exports 重写与 async 串接。
+    ctx.effect(function () {
+      return bibSetInstallStyles();
+    }, 'dsh-bottom-info-bar: settings styles');
+    slots.inject('settings.section', function () {
+      return slots.register(
+        { name: 'settings.section', id: 'bottom-info-bar', order: 100, label: '信息底栏' },
+        InfoBarSettingsSection);
+    });
 
-      // 订阅服务名（订阅制模式下"服务商"指订阅服务本身，不是模型厂商）
-      // Codex 与 ChatGPT 已合并：实际 provider openai-codex / chatgpt 均显示 ChatGPT；codex 保持 Codex
-      // v1.6 T7：新增 zai/zai-coding-cn → '智谱'；v1.7：小米 Token Plan → '小米 MiMo'
-      function subscriptionServiceName(provider) {
-        if (provider === 'chatgpt' || provider === 'openai-codex') return 'ChatGPT';
-        if (provider === 'codex') return 'Codex';
-        if (provider === 'opencode-go' || provider === 'opencode') return 'OpenCode Go';
-        if (provider === 'zai' || provider === 'zai-coding-cn') return '智谱';
-        if (provider === 'xiaomi-token-plan-cn' || provider === 'xiaomi-token-plan-sgp' || provider === 'xiaomi-token-plan-ams') return '小米 MiMo';
-        return '订阅';
+    const initialDensityVersion = densityVersion;
+    try {
+      const cfg = await rpc('getConfig');
+      // 用户已经作出新选择时，绝不让启动阶段的旧配置覆盖它。
+      if (initialDensityVersion === densityVersion && cfg && (cfg.infoDensity === 'full' || cfg.infoDensity === 'compact') && cfg.infoDensity !== density) {
+        setDensity(cfg.infoDensity);
       }
+    } catch (err) { /* 默认完整 */ }
 
-      // 账单型服务名（v1.7：云账单 provider 显示品牌名，未知保持兜底）
-      function billingServiceName(provider) {
-        if (provider === 'together') return 'Together';
-        if (provider === 'fireworks') return 'Fireworks';
-        if (provider === 'amazon-bedrock') return 'AWS Bedrock';
-        if (provider === 'cloudflare-ai-gateway' || provider === 'cloudflare-workers-ai') return 'Cloudflare';
-        return '云账单';
-      }
+    // v1.9.0 PR2：字段配置与密度同型——启动拉取一次；设置页保存成功后派发 CustomEvent 即时同步；
+    // load() 周期顺带校准（宿主常驻内存缓存，拉取即回）
+    refreshFieldConfig();
+    ctx.effect(function () {
+      if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined;
+      const onConfigChanged = function () { refreshFieldConfig(); };
+      document.addEventListener('dsh-bib-config-changed', onConfigChanged);
+      return function () { document.removeEventListener('dsh-bib-config-changed', onConfigChanged); };
+    }, 'dsh-bottom-info-bar: field config sync');
 
-      // 套餐档位短名（JWT 订阅卡：plus/pro/team/enterprise → Plus/Pro/Team/Enterprise；未知返回 null 显示模型名）
-      function subscriptionPlanShort(planType) {
-        if (typeof planType !== 'string' || planType.length === 0) return null;
-        const map = { plus: 'Plus', pro: 'Pro', team: 'Team', enterprise: 'Enterprise' };
-        return map[planType.toLowerCase()] || null;
-      }
+    // ---------- 组件 ----------
+    function BottomInfoBar(props) {
+      // 原生/会话投影（hooks 无条件调用）
+      const statsProj = props.useProjection ? props.useProjection('sessionStats') : undefined;
+      const usageProj = props.useProjection ? props.useProjection('tokenUsage') : undefined;
 
-      // 本地时区 YYYY-MM-DD（订阅到期日）
-      function formatDate(ms) {
-        if (ms == null || isNaN(ms)) return '—';
-        const d = new Date(ms);
-        const p = function (x) { return String(x).padStart(2, '0'); };
-        return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate());
-      }
+      const [state, setState] = React.useState({
+        loading: true, balance: null, pricing: null, usage: null, billingMode: null, sub: null, billing: null,
+        errors: { balance: null, pricing: null, usage: null, billingMode: null, sub: null, billing: null },
+      });
+      // 版本信息由 host 在启动时从 package.json 读取；无论是否有新版，都用于服务商/模型 hover 展示。
+      const [updateInfo, setUpdateInfo] = React.useState(null);
+      const [now, setNow] = React.useState(Date.now());
+      // This state is owned by DSH's per-session model selector, not by the
+      // process-wide default for newly-created Agents.
+      const [sessionModel, setSessionModel] = React.useState(null);
+      const [modelSource, setModelSource] = React.useState('pending');
+      const [displayDensity, setDisplayDensity] = React.useState(props.density);
+      const [isDensitySaving, setIsDensitySaving] = React.useState(toggling);
 
-      // 订阅制模型组：订阅服务名 · 具体模型（如 `OpenCode Go · V4 Flash`、`Codex · GPT 5 Codex`）
-      // v1.7 FR-8：codex 源有 JWT 套餐档位时，模型位显示套餐档位（如 `ChatGPT · Plus`），真实信息来自 id_token claims
-      function subscriptionProviderGroup() {
-        const pr = visiblePricing;
-        const serviceName = subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider);
-        const subSnapshot = state.sub;
-        const planShort = subSnapshot && subSnapshot.planType ? subscriptionPlanShort(subSnapshot.planType) : null;
-        const rawModelLabel = (pr && pr.modelDisplay) ? pr.modelDisplay
-          : (pr && pr.model ? pr.model : '未知模型');
-        const modelLabel = planShort ? planShort : rawModelLabel;
-        const modelName = modelLabelWithoutProvider(modelLabel, serviceName);
-        const versionLine = updateInfo && typeof updateInfo.current === 'string'
-          ? '\n插件版本：' + updateInfo.current : '';
-        const planLine = subSnapshot && subSnapshot.plan ? '\n套餐：' + subSnapshot.plan : '';
-        const expiryLine = subSnapshot && subSnapshot.expiryAt ? '\n到期：' + formatDate(subSnapshot.expiryAt) + '（本地时区）' : '';
-        const title = '订阅服务：' + serviceName + '\n模型：' + rawModelLabel + planLine + expiryLine + versionLine;
-        return React.createElement('span', { key: 'subprov', className: 'bi-model-group', title: title },
-          React.createElement('b', { className: 'bi-model-provider' }, serviceName),
-          modelDetail(pr, modelName),
-        );
-      }
+      // 外层持有持久化后的密度；组件只订阅数值变化，避免 slot 卸载重建打断动画。
+      React.useEffect(function () {
+        densityListeners.add(setDisplayDensity);
+        densityBusyListeners.add(setIsDensitySaving);
+        // 订阅前后没有异步间隙：立即回读，避免首次 effect 建立前的更新丢失。
+        setDisplayDensity(density);
+        setIsDensitySaving(toggling);
+        return function () {
+          densityListeners.delete(setDisplayDensity);
+          densityBusyListeners.delete(setIsDensitySaving);
+        };
+      }, []);
 
-      // 字段包装：带 data-field 与（可选）颜色变量的容器 span，供 CSS 按字段着色（未自定义时变量不存在，零回归）
-      function fieldSpan(id, key, children) {
-        return React.createElement('span', { key: key, 'data-field': id, style: fieldStyle(id) }, children);
-      }
+      // v1.9.0 PR2：字段配置订阅——设置页保存（CustomEvent）或周期校准更新配置时重渲染。
+      // 配置本体存模块级单例，组件只记版本号；订阅建立时立即回读避免首帧用过期配置。
+      const [fieldConfigTick, setFieldConfigTick] = React.useState(fieldConfigVersion);
+      React.useEffect(function () {
+        const listener = function () { setFieldConfigTick(fieldConfigVersion); };
+        fieldConfigListeners.add(listener);
+        setFieldConfigTick(fieldConfigVersion);
+        return function () { fieldConfigListeners.delete(listener); };
+      }, []);
+      void fieldConfigTick;
 
-      // ---- 余额制模式（v1.0.0 现状，完全不动）：服务商+模型 → 余额 → 时段 → 倒计时 → 本会话花费 ----
-      // v1.9.0 PR2：每个渲染片段按设置过滤（fieldVisible）；隐藏不占位，组间分隔符由组装层自动收合
-      function pushBalanceGroups(groups, trailingErrorGroups) {
-        const bal = state.balance;
-        const errors = state.errors || {};
-        const alertActive = !!(bal && bal.alert && bal.alert.active);
-        if (fieldVisible('anchorGroup')) {
-          const anchor = providerGroup();
-          groups.push(React.cloneElement(anchor, { 'data-field': 'anchorGroup', style: fieldStyle('anchorGroup') }));
-        }
+      // 当前会话 ID 多路获取：slotProps 标准 kit → session 快照 → 运行时 sessions 服务
+      // （DSH 各版本注入方式不同，任一路可用即拿到真实会话 ID，避免回退到上一会话的账）
+      const propsRef = React.useRef(props);
+      propsRef.current = props;
+      const resolveSessionId = React.useCallback(function () {
+        const p = propsRef.current;
+        try {
+          if (p.sessionId) return p.sessionId;
+          if (p.session && p.session.sessionId) return p.session.sessionId;
+          const sessions = ctx.get ? ctx.get('sessions') : null;
+          const cur = sessions && sessions.list && sessions.list.getSnapshot().current;
+          if (cur) return cur;
+        } catch (e) { /* 拿不到则返回空串，host 端对空串返回 null（显示 ¥0.000） */ }
+        return '';
+      }, []);
+      const sessionId = resolveSessionId();
 
-        // v1.6 T7：未适配账户渲染"未适配"弱提示
-        if (bal && bal.unmapped) {
-          if (fieldVisible('unmapped')) {
-            trailingErrorGroups.push(fieldSpan('unmapped', 'unmapped',
-              React.createElement('span', { className: 'bi-muted', title: '该服务商暂未适配余额查询，后续版本将支持。' }, '未适配')));
-          }
-        }
-        // 余额（纯金额；hover 仅展示余额，不显示充值/赠金）
-        // v1.6 T7：未配置提示改为按账户显示凭据名（去掉写死的 DeepSeek 文案）
-        else if (bal && bal.error && bal.error.kind === 'no-key') {
-          if (fieldVisible('noKeyHint')) {
-            const credName = bal.error.message ? String(bal.error.message).replace('未配置 ', '') : 'API_KEY';
-            trailingErrorGroups.push(fieldSpan('noKeyHint', 'nokey',
-              React.createElement('span', { className: 'bi-err', title: '未配置 ' + credName + '。请在"设置 → 模型"中填写。' },
-                '未配置 ' + credName + ' → 设置→模型 填写')));
-          }
-        } else if (bal && bal.data) {
-          const symbol = bal.currency === 'USD' ? '$' : '¥';
-          const balTitle = bal.estimate
-            ? '估算余额：' + symbol + fmt(bal.data.total)
-            : '余额：' + symbol + fmt(bal.data.total);
-          if (fieldVisible('balance')) {
-            groups.push(fieldSpan('balance', 'bal', React.createElement('span', { title: balTitle },
-              metric('余额', symbol + fmt(bal.data.total), alertActive ? 'bi-alert-num' : ''),
-              alertActive ? React.createElement('span', { className: 'bi-low-status' }, '低') : null,
-              bal.estimate ? React.createElement('span', { className: 'bi-muted' }, '（估算）') : null,
-            )));
-          }
-          // host 快照失败（bal.error）或本次 RPC 失败（errors.balance）→ 均保留旧数据 + 降级标记
-          if (fieldVisible('balanceError') && (bal.error || errors.balance)) {
-            trailingErrorGroups.push(fieldSpan('balanceError', 'balerr',
-              React.createElement('span', { className: 'bi-stale', title: '余额暂不可用；正在显示上次数据并自动重试。' }, '刷新失败')));
-          }
-        } else if (bal && bal.error) {
-          if (fieldVisible('balanceError')) {
-            trailingErrorGroups.push(fieldSpan('balanceError', 'berr',
-              React.createElement('span', { className: 'bi-err', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败')));
-          }
-        } else if (errors.balance) {
-          // 本次 RPC 失败且无旧数据：只降级余额块，其余端点数据照常渲染
-          if (fieldVisible('balanceError')) {
-            trailingErrorGroups.push(fieldSpan('balanceError', 'berr',
-              React.createElement('span', { className: 'bi-err', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败')));
+      // Subscribe to the exact store the native model seat uses.  A session
+      // activation or a successful model switch publishes here immediately;
+      // no polling and no host HTTP request sit on the display path.
+      React.useEffect(function () {
+        let stop = null;
+        let active = true;
+        setSessionModel(null);
+        setModelSource('pending');
+        if (!sessionId) { setModelSource('unavailable'); return function () {}; }
+        try {
+          const directories = ctx.get ? ctx.get('modelDirectories') : null;
+          if (!directories || typeof directories.directoryFor !== 'function') {
+            setModelSource('unavailable');
+            return function () {};
           }
-        }
+          setModelSource('available');
+          const directory = directories.directoryFor(sessionId);
+          const publish = function () {
+            if (!active || !directory.store || typeof directory.store.getSnapshot !== 'function') return;
+            const snapshot = directory.store.getSnapshot();
+            const selected = snapshot && snapshot.current;
+            if (!selected || typeof selected.provider !== 'string' || typeof selected.model !== 'string') return;
+            const group = Array.isArray(snapshot.groups) ? snapshot.groups.find(function (g) { return g && g.id === selected.provider; }) : null;
+            const model = group && Array.isArray(group.models) ? group.models.find(function (m) { return m && m.id === selected.model; }) : null;
+            const inputModalities = model && Array.isArray(model.inputModalities) ? model.inputModalities : null;
+            const value = {
+              sessionId: sessionId,
+              provider: selected.provider,
+              model: selected.model,
+              providerDisplay: group && typeof group.name === 'string' ? group.name : selected.provider,
+              modelDisplay: model && typeof model.name === 'string' ? model.name : selected.model,
+              // true/false 来自 DSH 的明确目录 metadata；null 表示仍待 host 查询，不能误画成文本模型。
+              acceptsImageInput: inputModalities === null ? null : inputModalities.indexOf('image') !== -1,
+            };
+            sessionModelCache.set(sessionId, value);
+            setSessionModel(value);
+          };
+          publish();
+          if (directory.store && typeof directory.store.subscribe === 'function') stop = directory.store.subscribe(publish);
+        } catch (err) { setModelSource('unavailable'); /* old DSH: retain the RPC fallback */ }
+        return function () { active = false; if (typeof stop === 'function') stop(); };
+      }, [sessionId]);
 
-        // 时段：仅峰谷价服务商显示"高峰价/空闲价"（flat/unknown 服务商不显示；hover 展示具体价格）
-        const pr = visiblePricing;
-        if (pr && pr.mode === 'peak-valley' && fieldVisible('period')) {
-          const peakNow = pr.period === 'peak';
-          const p = pr.prices || {};
-          const periodTitle = '北京时间 ' + (peakNow ? '高峰价' : '空闲价') + '：输入 ¥' + (p.inputCacheMiss != null ? p.inputCacheMiss : '?')
-            + '/M · 缓存 ¥' + (p.inputCacheHit != null ? p.inputCacheHit : '?')
-            + '/M · 输出 ¥' + (p.output != null ? p.output : '?') + '/M';
-          groups.push(fieldSpan('period', 'period', React.createElement('span', { className: peakNow ? 'bi-peak' : 'bi-offpeak', title: periodTitle },
-            peakNow ? '高峰价' : '空闲价')));
-        }
+      // 组件生命周期 AbortSignal：卸载时中止所有在途 RPC（配合 rpc 20s 超时，双保险防旧响应写 state）
+      const abortRef = React.useRef(null);
+      React.useEffect(function () {
+        const controller = new AbortController();
+        abortRef.current = controller;
+        return function () { controller.abort(); };
+      }, []);
 
-        // 倒计时：仅峰谷价服务商显示"距高峰/距空闲"（hover 展示下次切换时刻；数字加粗）
-        if (pr && pr.mode === 'peak-valley' && pr.nextSwitch && fieldVisible('countdown')) {
-          const peakNow = pr.period === 'peak';
-          const countdownTitle = '北京时间 ' + pr.nextSwitch.atLabel + ' 切换为' + (peakNow ? '空闲价' : '高峰价') + '。';
-          groups.push(fieldSpan('countdown', 'countdown', React.createElement('span', { title: countdownTitle },
-            metric('距' + (peakNow ? '空闲' : '高峰'), fmtCountdown(pr.nextSwitch.at - now)))));
-        }
+      const loadVersionRef = React.useRef(0);
+      const cachedSessionModel = sessionId ? sessionModelCache.get(sessionId) : null;
+      const activeSessionModel = sessionModel && sessionModel.sessionId === sessionId ? sessionModel : (cachedSessionModel || null);
+      const load = React.useCallback(function (selection) {
+        // v1.9.0 PR2：周期顺带校准字段配置（宿主内存缓存，即回；设置页变更另有 CustomEvent 即时通道）
+        refreshFieldConfig();
+        const requestVersion = ++loadVersionRef.current;
+        const activeSelection = selection || activeSessionModel;
+        const selectionArgs = activeSelection ? { selection: { provider: activeSelection.provider, model: activeSelection.model } } : {};
+        // 首启窗口内（打开/刷新网页头几秒）→ 快照类请求强制重查；之后的 30s 周期轮询走常规缓存节奏
+        const force = Date.now() - BOOT_AT < FORCE_REFRESH_WINDOW_MS;
+        if (force) { selectionArgs.force = true; }
+        const signal = abortRef.current ? abortRef.current.signal : null;
+        // 逐接口容错：allSettled 等全部 settle（最坏 20s 超时兜底），任一失败只降级该端点，
+        // 不拖垮其他成功数据；合并逻辑在 mergeLoadResults（失败端点保留旧值 + 记录错误）
+        Promise.allSettled([
+          rpc('getBalanceSnapshot', activeSelection ? { provider: activeSelection.provider, force: force } : (force ? { force: true } : null), signal),
+          rpc('getPricing', selectionArgs, signal),
+          rpc('getUsageSummary', Object.assign({ sessionId: sessionId }, selectionArgs), signal),
+          rpc('getBillingMode', selectionArgs, signal),
+          rpc('getSubscriptionSnapshot', selectionArgs, signal),
+          rpc('getBillingStatus', selectionArgs, signal),
+        ]).then(function (results) {
+          // Do not allow a late A response to overwrite newly active B.
+          if ((signal && signal.aborted) || requestVersion !== loadVersionRef.current) return;
+          setState(function (s) { return mergeLoadResults(s, results); });
+        });
+      }, [resolveSessionId, activeSessionModel, sessionId]);
 
-        // 本会话花费（公共小部件 pushSessionCost：只显示钱；hover 显示 今天/近一月/全部）
-        // 始终显示：新会话/对话刚开始尚无记账时显示 ¥0.000，hover 仍可查看持久化的 今天/近一月/全部
-        pushSessionCost(groups, trailingErrorGroups, !!(bal && bal.currency === 'USD'));
-      }
+      React.useEffect(function () {
+        load();
+        const id = window.setInterval(load, 30000);
+        return function () { window.clearInterval(id); };
+      }, [load]);
 
-      // 本会话花费块（余额制 与 订阅·充值余额 形态共用的小部件）：
-      // 只显示钱；hover 浮窗显示 含子代理说明 + 今天 / 近一月 / 全部；金额数字加粗。
-      // usdSymbol：账户币种为美元时，hover 汇总行用 $ 前缀（本会话单值仍按其真实计价币种）
-      function pushSessionCost(groups, trailingErrorGroups, usdSymbol) {
-        const usg = state.usage;
-        const errs = state.errors || {};
-        if (usg) {
-          // 隐藏不占位（错误提示属于独立字段 usageError，两支互斥不受影响）
-          if (fieldVisible('sessionCost')) {
-            const cs = usg.currentSession;
-            const costCNY = cs && cs.costs && cs.costs.CNY != null ? cs.costs.CNY : null;
-            const costUSD = cs && cs.costs && cs.costs.USD != null ? cs.costs.USD : null;
-            const symbol = usdSymbol ? '$' : '¥';
-            const costTxt = costCNY != null ? '¥' + costCNY.toFixed(3)
-              : (costUSD != null ? '$' + costUSD.toFixed(3) : symbol + (0).toFixed(3));
-            const today = usg.todaySpend != null ? '今天 ' + symbol + fmt(usg.todaySpend, 3) : '';
-            const month = usg.monthSpend != null ? '近一月 ' + symbol + fmt(usg.monthSpend, 3) : '';
-            const total = usg.totalSpend != null ? '全部 ' + symbol + fmt(usg.totalSpend, 3) : '';
-            const detail = [today, month, total].filter(function (s) { return s.length > 0; }).join(' · ');
-            groups.push(fieldSpan('sessionCost', 'convo', React.createElement('span', {
-              title: '本会话 ' + costTxt + '（含子代理）' + (detail ? '\n' + detail : '') },
-              metric('本会话', costTxt))));
-          }
-        } else if (errs.usage && fieldVisible('usageError')) {
-          trailingErrorGroups.push(fieldSpan('usageError', 'usageerr',
-            React.createElement('span', { className: 'bi-err', title: '花费暂不可用；不会影响对话。' }, '花费获取失败')));
-        }
-      }
+      // 版本检查由 host 在进程启动时完成；这里仅读取一次缓存，不轮询 NPM。
+       React.useEffect(function () {
+         let active = true;
+         rpc('getUpdateInfo').then(function (info) {
+           if (active && info && typeof info.current === 'string') setUpdateInfo(info);
+         }).catch(function () { /* 版本检查失败静默，不影响信息栏 */ });
+         return function () { active = false; };
+       }, []);
 
-      // ---- 订阅制模式（互斥替换余额制版）：
-      //      套餐额度型：订阅服务+模型 → 三窗口额度 → 距重置倒计时（余额/时段/花费/token 不显示）
-      //      充值余额型（如智谱按量账户，windows 空且有 sub.balance）：服务商+模型 → 余额 → 本会话花费 ----
-       function subscriptionFailureHint(error, source) {
-         const kind = error && error.kind;
-         const serviceName = subscriptionServiceName(source);
-         const message = error && typeof error.message === 'string' ? error.message : '';
-         const statusMatch = message.match(/HTTP (\d{3})/);
-         const status = statusMatch ? statusMatch[1] : '';
-         if (kind === 'no-key') return '未找到 ' + serviceName + ' 登录凭证。请重新授权。';
-         if (kind === 'auth' || status === '401') return serviceName + ' 登录凭证已失效。请重新授权。';
-         if (status === '403') return serviceName + ' 拒绝访问。请重新授权或稍后再试。';
-         if (status === '429') return serviceName + ' 请求过于频繁。请稍后再试。';
-         if (kind === 'timeout' || /timeout|timed out|abort/i.test(message)) return serviceName + ' 响应超时。请检查网络后再试。';
-         if (kind === 'parse') return serviceName + ' 返回的数据暂时无法识别。请稍后再试。';
-         return serviceName + ' 暂不可用。请检查网络后再试。';
-       }
+      // Model text comes from sessionModel synchronously.  The following load
+      // only refreshes secondary data in the background.
+      React.useEffect(function () {
+        if (activeSessionModel) load(activeSessionModel);
+      }, [load, activeSessionModel]);
 
-       function pushSubscriptionGroups(groups, trailingErrorGroups) {
-        if (fieldVisible('subServiceGroup')) {
-          const subAnchor = subscriptionProviderGroup();
-          groups.push(React.cloneElement(subAnchor, { 'data-field': 'subServiceGroup', style: fieldStyle('subServiceGroup') }));
-        }
-        const sub = state.sub;
-        const errors = state.errors || {};
-        // v1.7 FR-8：JWT 订阅卡——真实套餐到期日（纯本地解码；无登录态/解析失败不显示此处）
-        if (sub && sub.planType && sub.expiryAt && fieldVisible('expiry')) {
-          groups.push(fieldSpan('expiry', 'subexp', React.createElement('span', { title: '订阅到期：' + formatDate(sub.expiryAt) + '（本地时区）' },
-            metric('到期', formatDate(sub.expiryAt)))));
-        }
-        if (!sub) {
-          if (errors.sub && fieldVisible('refreshFailure')) {
-            // 本次 RPC 失败且无旧数据：显示失败信息而非永久"加载中…"
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'suberr',
-              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint({ kind: 'exception', message: String(errors.sub) }, visibleBillingMode && visibleBillingMode.provider) }, '刷新失败')));
-          }
-          return;
-        }
-        const rawWindows = Array.isArray(sub.windows) ? sub.windows : [];
-        // v1.9.0 PR2：逐窗口显隐过滤（5h/周/月各自独立开关），后续优先窗口/重置倒计时都基于过滤后的集合
-        const windows = rawWindows.filter(function (w) {
-          return w && typeof w.usedPercent === 'number' && windowFieldVisible(w.key);
-        });
-        const hasData = windows.length > 0;
-        // 错误分支：无旧数据时给出明确引导 / 错误文案；有旧数据时走下方渲染并附"刷新失败"标记。
-        // no-key（无令牌/缺 access_token）与 auth（令牌失效 401）→ 统一"未绑定/重新绑定"引导——
-        // 令牌由独立插件 dsh-chatgpt-subscription 维护，本插件只读令牌显示额度，不自行绑定/续期
-        if (sub.error && !hasData) {
-          if (fieldVisible('refreshFailure')) {
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'substale',
-              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint(sub.error, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
-          }
-          return;
-        }
-        // v1.8：充值余额模式——无额度窗口但有 balance 字段（如智谱普通 API 余额用户）
-        // 显示"余额 ¥XX.XX"，与 Coding Plan 额度窗口互斥
-        if (!hasData && typeof sub.balance === 'number' && isFinite(sub.balance)) {
-          if (fieldVisible('subBalance')) {
-            const balTxt = '¥' + fmt(sub.balance, 2);
-            const titleLines = ['订阅源：' + subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider) + '（' + (sub.plan || '充值余额') + '）',
-              '可用余额：' + balTxt];
-            groups.push(fieldSpan('subBalance', 'subbal', React.createElement('span', { title: titleLines.join('\n') },
-              metric('余额', balTxt))));
-          }
-          // 充值余额用户按量付费，花销与余额同等重要 → 追加公共花费块（含子代理聚合）
-          pushSessionCost(groups, trailingErrorGroups, false);
-          // host 快照失败（sub.error）或本次 RPC 失败（errors.sub）→ 保留旧数据 + 降级标记
-          if (fieldVisible('refreshFailure') && (sub.error || errors.sub)) {
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'substale',
-              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint(sub.error || { kind: 'exception', message: String(errors.sub || '') }, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
-          }
-          return;
-        }
-        // 窗口缺失（如 Codex 无 5 小时窗口）→ 跳过窗口组，不占位、不报错
-        if (hasData) {
-          // 简洁模式下选择"时间最短且有重置时刻"的窗口（刷新最快，用户最需关注）：
-          // 优先级：5小时 > 周 > 月（按窗口时长排序，而非已用百分比）
-          const windowPriority = { five_hour: 1, seven_day: 2, monthly: 3 };
-          const windowsWithReset = windows.filter(function (w) { return w.resetsAt; });
-          const displayWindow = windowsWithReset.length > 0
-            ? windowsWithReset.slice().sort(function (a, b) {
-                const pa = windowPriority[a.key] || 99;
-                const pb = windowPriority[b.key] || 99;
-                return pa - pb;
-              })[0]
-            : null;
+      // 会话统计变化（回复中 turns/steps/tokens 增长，回复完成时停止）→ 防抖后即时刷新花费，
+      // 不等下一个 30s 轮询：用户回复一结束即可看到真实金额
+      React.useEffect(function () {
+        if (!statsProj) return undefined;
+        const timer = window.setTimeout(load, 800);
+        return function () { window.clearTimeout(timer); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [load,
+        statsProj && statsProj.turns,
+        statsProj && statsProj.steps,
+        statsProj && statsProj.decodeTokens,
+      ]);
 
-          // 完整模式显示全部窗口；简洁模式只显示选中的那个窗口
-          const visible = full ? windows : (displayWindow ? [displayWindow] : []);
+      React.useEffect(function () {
+        const id = window.setInterval(function () { setNow(Date.now()); }, 1000);
+        return function () { window.clearInterval(id); };
+      }, []);
 
-          // 预警触发条件：已用 ≥80%（= 剩余 ≤20%）→ 鲜红色文字；正常额度使用中性文字。
-          const LOW_QUOTA_PERCENT = 20;
-          const titleLines = ['订阅源：' + subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider) + (sub.plan ? '（' + sub.plan + '）' : '')]
-            .concat(windows.map(function (w) {
-              return w.label + '窗口：剩余 ' + remainingPercent(w) + '%（已用 ' + w.usedPercent + '%）'
-                + (w.resetsAt ? ' · 重置 ' + formatDateTime(w.resetsAt) + ' · 距重置 ' + fmtResetCountdown(w.resetsAt - now) : '');
-            }));
-          const winNodes = [];
-          for (let i = 0; i < visible.length; i++) {
-            const w = visible[i];
-            if (i > 0) winNodes.push(' · ');
-            const remaining = remainingPercent(w);
-            const numberClass = remaining <= LOW_QUOTA_PERCENT ? 'bi-quota-low' : '';
-            // 每个窗口独立 data-field（subWindow5h/Week/Month），色变量按字段注入；「低」字标签保留
-            winNodes.push(fieldSpan(WINDOW_FIELD_IDS[w.key] || 'subWindow5h', 'w' + i,
-              metric(compactWindowLabel(w.key), remaining + '%', numberClass)));
-            if (remaining <= LOW_QUOTA_PERCENT) winNodes.push(React.createElement('span', { key: 'low' + i, className: 'bi-low-status' }, '低'));
-          }
-          // 全部窗口被隐藏（或紧凑模式无候选）→ 整组不推送，分隔符由组装层正确收合
-          if (winNodes.length > 0) {
-            groups.push(React.createElement('span', { key: 'subwin', title: titleLines.join('\n') }, ...winNodes));
-          }
-          // host 快照失败（sub.error）或本次 RPC 失败（errors.sub）→ 均保留旧数据 + 降级标记
-          if (fieldVisible('refreshFailure') && (sub.error || errors.sub)) {
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'substale',
-              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint(sub.error || { kind: 'exception', message: String(errors.sub || '') }, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
-          }
-          // 距重置倒计时（与显示的窗口一致，确保额度与倒计时匹配）
-          if (displayWindow && displayWindow.resetsAt && fieldVisible('resetCountdown')) {
-            const cdTitle = displayWindow.label + '窗口 剩余 ' + remainingPercent(displayWindow)
-              + '%（已用 ' + displayWindow.usedPercent + '%） · 重置 ' + formatDateTime(displayWindow.resetsAt);
-            groups.push(fieldSpan('resetCountdown', 'subcd', React.createElement('span', { title: cdTitle },
-              metric('距重置', fmtResetCountdown(displayWindow.resetsAt - now)))));
-          }
-        }
+      // While background RPCs catch up, render the newly activated session's
+      // model and suppress details from the prior session rather than showing
+      // a convincing but wrong provider/model combination.
+      const waitForSessionModel = !!sessionId && modelSource !== 'unavailable' && !activeSessionModel;
+      const visiblePricing = activeSessionModel && (!state.pricing
+        || state.pricing.provider !== activeSessionModel.provider || state.pricing.model !== activeSessionModel.model)
+        ? { provider: activeSessionModel.provider, model: activeSessionModel.model, providerDisplay: activeSessionModel.providerDisplay, modelDisplay: activeSessionModel.modelDisplay, mode: 'unknown', acceptsImageInput: activeSessionModel.acceptsImageInput }
+        : (waitForSessionModel ? null : state.pricing);
+      // v1.6 T7：订阅 provider 集合提取为共享常量，消除两端硬编码漂移
+      var SUBSCRIPTION_PROVIDERS = ['codex', 'chatgpt', 'opencode-go', 'opencode', 'openai-codex', 'zai', 'zai-coding-cn', 'xiaomi-token-plan-cn', 'xiaomi-token-plan-sgp', 'xiaomi-token-plan-ams'];
+      // v1.7 FR-14：云账单 provider 集合（账单型显示，与余额/额度互斥）
+      var BILLING_PROVIDERS = ['together', 'fireworks', 'amazon-bedrock', 'cloudflare-ai-gateway', 'cloudflare-workers-ai'];
+      const visibleBillingMode = activeSessionModel && (!state.billingMode
+        || state.billingMode.provider !== activeSessionModel.provider || state.billingMode.model !== activeSessionModel.model)
+        ? { provider: activeSessionModel.provider, model: activeSessionModel.model, mode: SUBSCRIPTION_PROVIDERS.indexOf(activeSessionModel.provider) >= 0 ? 'subscription' : (BILLING_PROVIDERS.indexOf(activeSessionModel.provider) >= 0 ? 'billing' : 'balance') }
+        : (waitForSessionModel ? null : state.billingMode);
+      // ---- 与原生一致格式工具 ----
+      function formatTokens(n) {
+        const scaled = function (v) { return v >= 100 ? String(Math.round(v)) : String(Math.round(v * 10) / 10); };
+        if (n < 1e3) return String(n);
+        if (n < 1e6) return scaled(n / 1e3) + 'K';
+        return scaled(n / 1e6) + 'M';
       }
-
-      // ---- v1.7 账单型模式（FR-10~13/FR-14，互斥第三态）：
-      //      账单服务+模型 → 本月真实花费 →（预算%）→（免费额度+重置倒计时）；余额/额度/本会话花费均不显示 ----
-      function billingFailureHint(error, provider) {
-        const serviceName = billingServiceName(provider);
-        const message = error && typeof error.message === 'string' ? error.message : '';
-        const statusMatch = message.match(/HTTP (\d{3})/);
-        const status = statusMatch ? statusMatch[1] : '';
-        if (error && error.kind === 'no-key') return '未配置 ' + message.replace('未配置 ', '') + '。请在"设置 → 模型"中填写。';
-        if (status === '403' || /缺少 .*权限/.test(message)) return serviceName + ' 拒绝访问：Token 可能缺少账单读取权限。';
-        if (error && error.kind === 'parse') return serviceName + ' 返回的数据暂时无法识别。请稍后再试。';
-        if (/timeout|timed out|abort/i.test(message)) return serviceName + ' 响应超时。请检查网络后再试。';
-        return serviceName + ' 账单暂不可用。请检查网络与权限后再试。';
+      function formatDuration(ms) {
+        const s = ms / 1e3;
+        if (s < 60) return Math.round(s * 10) / 10 + 's';
+        const whole = Math.round(s);
+        const sec = whole % 60;
+        return Math.floor(whole / 60) + 'm' + String(sec).padStart(2, '0') + 's';
       }
-
-      function pushBillingGroups(groups, trailingErrorGroups) {
-        if (fieldVisible('billingServiceGroup')) {
-          const billAnchor = billingProviderGroup();
-          groups.push(React.cloneElement(billAnchor, { 'data-field': 'billingServiceGroup', style: fieldStyle('billingServiceGroup') }));
-        }
-        const bill = state.billing;
-        const errors = state.errors || {};
-        if (!bill) {
-          if (errors.billing && fieldVisible('refreshFailure')) {
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'billerr',
-              React.createElement('span', { className: 'bi-stale', title: billingFailureHint({ kind: 'exception', message: String(errors.billing) }, visibleBillingMode && visibleBillingMode.provider) }, '刷新失败')));
-          }
-          return;
-        }
-        const d = bill.data;
-        const hasSpend = !!(d && (d.currentPeriodSpend != null || d.usage != null));
-        if (bill.error && !hasSpend) {
-          if (fieldVisible('refreshFailure')) {
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'billstale',
-              React.createElement('span', { className: 'bi-stale', title: billingFailureHint(bill.error, bill.type || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
-          }
-          return;
-        }
-        if (hasSpend) {
-          const symbol = d.currency === 'CNY' ? '¥' : '$';
-          const titleLines = ['账单源：' + billingServiceName(visibleBillingMode && visibleBillingMode.provider)]
-            .concat(d.note ? [d.note] : [])
-            .concat(d.currentPeriodSpend != null ? ['本月花费：' + symbol + fmt(d.currentPeriodSpend, 2)] : [])
-            .concat(d.budgetPercent != null ? ['预算使用：' + fmt(d.budgetPercent, 0) + '%'] : [])
-            .concat(d.freeRemaining != null ? ['每日免费额度剩余：' + fmt(d.freeRemaining, 0)] : []);
-          // v1.9.0 PR2：本月/预算/免费额度三片段各自显隐，分隔符只在可见片段之间
-          const nodes = [];
-          if (d.currentPeriodSpend != null && fieldVisible('billingSpend')) {
-            nodes.push(fieldSpan('billingSpend', 'billspend', metric('本月', symbol + fmt(d.currentPeriodSpend, 2))));
-          } else if (d.usage != null && fieldVisible('billingSpend')) {
-            nodes.push(fieldSpan('billingSpend', 'billspend', metric('本月用量', fmt(d.usage, 2) + (d.usageUnit ? ' ' + d.usageUnit : ''))));
-          }
-          if (d.budgetPercent != null && fieldVisible('budget')) {
-            if (nodes.length > 0) nodes.push(' · ');
-            nodes.push(fieldSpan('budget', 'billbudget', metric('预算', fmt(d.budgetPercent, 0) + '%')));
-          }
-          // 免费额度仅当接口显式给出（freeRemaining/resetsAt 同时存在）才显示，绝不编造
-          if (d.freeRemaining != null && d.resetsAt && fieldVisible('freeQuota')) {
-            if (nodes.length > 0) nodes.push(' · ');
-            nodes.push(fieldSpan('freeQuota', 'billfree', metric('免费', fmt(d.freeRemaining, 0) + ' · 距重置 ' + fmtResetCountdown(d.resetsAt - now))));
-          }
-          if (nodes.length > 0) {
-            groups.push(React.createElement('span', { key: 'bill', title: titleLines.join('\n') }, ...nodes));
-          }
-          if (fieldVisible('refreshFailure') && (bill.error || errors.billing)) {
-            trailingErrorGroups.push(fieldSpan('refreshFailure', 'billstale',
-              React.createElement('span', { className: 'bi-stale', title: billingFailureHint(bill.error || { kind: 'exception', message: String(errors.billing || '') }, bill.type || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
-          }
-        }
+      function formatTps(tps) {
+        const clamped = Math.max(0, tps);
+        return clamped >= 10 ? String(Math.round(clamped)) : String(Math.round(clamped * 10) / 10);
       }
-
-      // 账单型模型组：账单服务名 · 具体模型（如 `AWS Bedrock · Claude`）
-      function billingProviderGroup() {
-        const pr = visiblePricing;
-        const serviceName = billingServiceName(visibleBillingMode && visibleBillingMode.provider);
-        const modelLabel = (pr && pr.modelDisplay) ? pr.modelDisplay
-          : (pr && pr.model ? pr.model : '未知模型');
-        const modelName = modelLabelWithoutProvider(modelLabel, serviceName);
-        const versionLine = updateInfo && typeof updateInfo.current === 'string'
-          ? '\n插件版本：' + updateInfo.current : '';
-        const title = '账单服务：' + serviceName + '\n模型：' + modelLabel + versionLine;
-        return React.createElement('span', { key: 'billprov', className: 'bi-model-group', title: title },
-          React.createElement('b', { className: 'bi-model-provider' }, serviceName),
-          modelDetail(pr, modelName),
-        );
+      function billedInput(usage) {
+        return (usage.uncachedInputTokens || 0) + (usage.cacheReadTokens || 0) + (usage.cacheWriteTokens || 0);
       }
-
-      const groups = [];
-      // 报错不打断主要信息的阅读顺序：统一延后到整行最右侧。
-      const trailingErrorGroups = [];
-      // 两态严格判定：density 只能是 'full' 或 'compact'（host 校验 + 本地防抖保证）
-      const full = displayDensity === 'full';
-      // 模式互斥：订阅制渲染订阅版 row2，账单制渲染账单版 row2，余额制渲染 v1.0.0 现状——三态绝不叠加（FR-14）
-      const isSub = !!(visibleBillingMode && visibleBillingMode.mode === 'subscription');
-      const isBilling = !!(visibleBillingMode && visibleBillingMode.mode === 'billing');
-      // Never paint a loading placeholder.  Before the active session's model
-      // is available, leave this compact row empty rather than briefly showing
-      // either a generic loading label or data from the previous session.
-      if (waitForSessionModel) {
-        // Intentionally empty: session model publish fills the row immediately.
-      } else if (isBilling) {
-        pushBillingGroups(groups, trailingErrorGroups);
-      } else if (isSub) {
-        pushSubscriptionGroups(groups, trailingErrorGroups);
-      } else {
-        pushBalanceGroups(groups, trailingErrorGroups);
+      function fmt(n, digits) {
+        if (n == null || isNaN(n)) return '—';
+        return n.toFixed(digits == null ? 2 : digits);
       }
-
-      // 全局降级提示：任一端点失败 → 旧数据照常渲染 + 角落提示（title 列出失败项），仅失败项降级
-      const errors = state.errors || {};
-      const failedLabels = [];
-      if (errors.balance) failedLabels.push('余额');
-      if (errors.pricing) failedLabels.push('定价');
-      if (errors.usage) failedLabels.push('花费');
-      if (errors.billingMode) failedLabels.push('模式');
-      if (errors.sub) failedLabels.push('订阅额度');
-      if (errors.billing) failedLabels.push('账单');
-      if (failedLabels.length > 0 && fieldVisible('refreshFailure')) {
-        trailingErrorGroups.push(fieldSpan('refreshFailure', 'degraded',
-          React.createElement('span', { className: 'bi-stale', key: 'degraded',
-            title: failedLabels.join('、') + '暂不可用；正在保留上次数据并自动重试。' }, '刷新失败')));
+      function fmtCountdown(ms) {
+        if (ms == null || ms <= 0) return '00:00';
+        const totalSec = Math.floor(ms / 1000);
+        const h = Math.floor(totalSec / 3600);
+        const m = Math.floor((totalSec % 3600) / 60);
+        const s = totalSec % 60;
+        const p = function (x) { return String(x).padStart(2, '0'); };
+        return h > 0 ? h + 'h' + p(m) + 'm' : p(m) + ':' + p(s);
       }
-      const persistence = state.usage && state.usage.persistence;
-      if (persistence && persistence.state && persistence.state !== 'ok' && fieldVisible('persistWarning')) {
-        const snapshotOnly = persistence.state === 'snapshot-stale';
-        trailingErrorGroups.push(fieldSpan('persistWarning', 'ledger-save', React.createElement('span', {
-          className: snapshotOnly ? 'bi-stale' : 'bi-err',
-          title: snapshotOnly
-            ? '账单流水已保存，但可直接查看的账单文件暂未更新：' + (persistence.message || '未知原因')
-            : '本次账单未保存，不会计入金额：' + (persistence.message || '未知原因'),
-        }, snapshotOnly ? '账单待整理' : '账单未保存')));
+      // 订阅窗口重置时刻（本地时区，hover 浮窗用）
+      function formatDateTime(ms) {
+        const d = new Date(ms);
+        const p = function (x) { return String(x).padStart(2, '0'); };
+        return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
+      }
+      // 订阅窗口重置倒计时（天级格式）：≥1 天 → '1d 21h'；≥1 小时 → '3h 12m'；<1 小时 → '12:34'
+      function fmtResetCountdown(ms) {
+        if (ms == null || ms <= 0) return '00:00';
+        const totalSec = Math.floor(ms / 1000);
+        const d = Math.floor(totalSec / 86400);
+        const h = Math.floor((totalSec % 86400) / 3600);
+        const m = Math.floor((totalSec % 3600) / 60);
+        if (d > 0) return d + 'd ' + h + 'h';
+        if (h > 0) return h + 'h ' + String(m).padStart(2, '0') + 'm';
+        return String(m).padStart(2, '0') + ':' + String(totalSec % 60).padStart(2, '0');
       }
 
-       if (updateInfo && updateInfo.available === true && fieldVisible('updateNotice')) {
-         groups.push(fieldSpan('updateNotice', 'update', React.createElement('span', {
-           className: 'bi-update', title: '请告知你的 Agent 将本插件更新到“' + updateInfo.latest + '”版本。',
-       }, '新版本提醒')));
-       }
+      // 订阅窗口剩余百分比（剩余 = 100 - 已用；钳制 ≥0 防接口异常值）
+      function remainingPercent(w) {
+        return Math.max(0, 100 - w.usedPercent);
+      }
+      // 订阅窗口紧凑行标签（5小时 → '5h'，周 → '周'，月 → '月'）；hover 明细仍用完整标签
+      function compactWindowLabel(key) {
+        if (key === 'five_hour') return '5h';
+        if (key === 'seven_day') return '周';
+        if (key === 'monthly') return '月';
+        return '窗口';
+      }
 
-       // ---- 组装（分隔符收合与「刷新失败」去重见模块级 assembleInfoBarRow） ----
-       const nodes = assembleInfoBarRow(groups, trailingErrorGroups, React.createElement);
-       const row2 = React.createElement('div', { id: 'dsh-bottom-info-bar-primary', className: 'bi-row2' }, ...nodes);
+      // 数字统一加粗（仅数字本身）
+      function num(t, extraClass) {
+        return React.createElement('b', { className: 'bi-num' + (extraClass ? ' ' + extraClass : '') }, String(t));
+      }
 
-      let row1 = null;
-      if (statsProj) {
-        // 每组：{ nodes: React 节点数组（数字用 num 加粗）, text: 纯文本（title 用）, fieldId: 字段 id（着色用） }
-        const ng = [];
-        function group(parts, hidden, fieldId) {
-          const nodesArr = [];
-          const texts = [];
-          function textOf(part) {
-            if (part == null) return '';
-            if (typeof part === 'string' || typeof part === 'number') return String(part);
-            if (Array.isArray(part)) return part.map(textOf).join('');
-            if (part.props && part.props['data-metric-text']) return part.props['data-metric-text'];
-            return part.props ? textOf(part.props.children) : '';
-          }
-          for (let i = 0; i < parts.length; i++) {
-            const p = parts[i];
-            if (typeof p === 'string') { nodesArr.push(p); texts.push(p); }
-            else if (Array.isArray(p)) { for (let j = 0; j < p.length; j++) nodesArr.push(p[j]); texts.push(textOf(p)); }
-            else { nodesArr.push(p); texts.push(textOf(p)); }
-          }
-          ng.push({ nodes: nodesArr, text: texts.join(''), hidden: !!hidden, fieldId: fieldId || null });
-        }
+      // 统一数值语法：标签保持常规，数值与紧随的单位/货币符号作为一个加粗的数据令牌。
+      function metric(label, value, extraClass) {
+        return React.createElement('span', { className: 'bi-metric', 'data-metric-text': label + ' ' + value },
+          React.createElement('span', { className: 'bi-metric-label' }, label),
+          React.createElement('span', { className: 'bi-metric-data' }, num(value, extraClass)));
+      }
 
-        // v1.9.0 PR2：原生统计行字段按设置过滤（隐藏组完全不进 ng，不占版式也不进 title）
-        if (fieldVisible('turnsSteps')) {
-          // 中文界面遵循数字与汉字混排留白：数值与量词视觉上分开，便于快速扫读。
-          group([num(statsProj.turns + ' 轮'), ' · ', num(statsProj.steps + ' 步')], false, 'turnsSteps');
+      // 仅在 DSH 模型目录明确声明 inputModalities 包含 image 时，将“完整模型名 视觉”合并为一个椭圆。
+      function modelLabelWithCapability(pr, modelLabel) {
+        if (pr && pr.acceptsImageInput === null) {
+          return React.createElement('span', { className: 'bi-model-capability-pending', 'aria-hidden': 'true' }, modelLabel);
         }
+        if (!pr || pr.acceptsImageInput !== true) return React.createElement('span', { className: 'bi-model-name' }, modelLabel);
+        return React.createElement('span', { className: 'bi-vision', title: '支持图像输入。' },
+          React.createElement('span', { className: 'bi-vision-model' }, modelLabel),
+          React.createElement('span', { className: 'bi-vision-kind' }, '视觉'));
+      }
 
-        const durations = [];
-        if (statsProj.llmMs > 0 && fieldVisible('llmTime')) durations.push(fieldSpan('llmTime', 'durl', metric('LLM', formatDuration(statsProj.llmMs))));
-        if (statsProj.toolMs > 0 && fieldVisible('toolTime')) {
-          if (durations.length > 0) durations.push(' · ');
-          durations.push(fieldSpan('toolTime', 'durt', metric('工具调用', formatDuration(statsProj.toolMs))));
-        }
-        if (durations.length > 0) group(durations);
+      function modelSeparator() {
+        return React.createElement('span', { className: 'bi-model-dot', 'aria-hidden': 'true' }, '·');
+      }
 
-        const speeds = [];
-        if (statsProj.ttftSteps > 0) speeds.push(metric('首 token 平均', formatDuration(statsProj.ttftMs / statsProj.ttftSteps)));
-        if (statsProj.decodeMs > 0) speeds.push(' · ', num(formatTps(statsProj.decodeTokens / (statsProj.decodeMs / 1e3)) + ' tok/s'));
-        if (speeds.length > 0) group(speeds, HIDE_SPEED_FIELDS); // 不占可见版式，title 浮窗保留（官方隐藏字段，非用户可配）
+      function modelDetail(pr, modelName) {
+        return React.createElement('span', { className: 'bi-model-detail' },
+          modelSeparator(), modelLabelWithCapability(pr, modelName));
+      }
 
-        if (usageProj && (billedInput(usageProj) > 0 || (usageProj.outputTokens || 0) > 0)) {
-          const denom = billedInput(usageProj);
-          const hit = denom > 0 ? Math.round(((usageProj.cacheReadTokens || 0) / denom) * 100) : null;
-          if (hit != null && fieldVisible('cacheHit')) group([metric('缓存命中', hit + '%')], false, 'cacheHit');
-          if (fieldVisible('tokensIO')) {
-            group([metric('输入', formatTokens(billedInput(usageProj)) + ' tok'), ' · ', metric('输出', formatTokens(usageProj.outputTokens || 0) + ' tok')], false, 'tokensIO');
-          }
-        }
+      // 参考图的视觉标签将服务商显示在椭圆外；仅移除重复的服务商前缀，不截断真实模型名。
+      function modelLabelWithoutProvider(modelLabel, providerLabel) {
+        if (modelLabel.toLowerCase().indexOf(providerLabel.toLowerCase()) !== 0) return modelLabel;
+        const suffix = modelLabel.slice(providerLabel.length);
+        // 只有目录以分隔符明确写成“服务商 + 模型”时才去重；例如 OpenAICode 不是 OpenAI 的重复前缀。
+        if (!/^[\s·._/-]+/.test(suffix)) return modelLabel;
+        return suffix.replace(/^[\s·._/-]+/, '') || modelLabel;
+      }
 
-        const nativeLine = ng.map(function (g) { return g.text; }).join(' | ');
-        const ngNodes = [];
-        let visCount = 0;
-        for (let i = 0; i < ng.length; i++) {
-          if (ng[i].hidden) continue; // 隐藏分组不占版式（title 仍含其文本）
-          if (visCount > 0) ngNodes.push(React.createElement('span', { key: 'nsep' + i, className: 'bi-sep' }, '|'));
-          visCount++;
-          ngNodes.push(React.createElement('span', {
-            key: 'ng' + i,
-            'data-field': ng[i].fieldId || undefined,
-            style: ng[i].fieldId ? fieldStyle(ng[i].fieldId) : undefined,
-          }, ng[i].nodes));
-        }
-        // D6：原生组全部被隐藏（或全空）→ 原生行不渲染（不留空行/占位；hover 浮窗随之消失）
-        if (ngNodes.length === 0) row1 = null;
-        else row1 = React.createElement('div', { id: 'dsh-bottom-info-bar-native', className: 'bi-native-row', title: nativeLine }, ...ngNodes);
+      // 服务商 + 具体模型（两种模式共用；纯显示，不拦截点击——点击冒泡到整条信息栏触发密度切换；hover 展示定价模式）
+      // 模型目录名可能重复服务商前缀（如 DeepSeek V4 Flash）；始终拆分为“DeepSeek · V4 Flash”，
+      // 既保留服务商信息，也不让模型名重复前缀。
+      function providerGroup() {
+        const pr = visiblePricing;
+        const provLabel = (pr && pr.providerDisplay) ? pr.providerDisplay : '未知';
+        const modelLabel = (pr && pr.modelDisplay) ? pr.modelDisplay
+          : (pr && pr.model ? pr.model : '未知模型');
+        const modelName = modelLabelWithoutProvider(modelLabel, provLabel);
+        const versionLine = updateInfo && typeof updateInfo.current === 'string'
+          ? '\n插件版本：' + updateInfo.current : '';
+        const provTitle = '服务商：' + provLabel + ' ' + modelLabel + '\n'
+          + (pr && pr.mode === 'peak-valley' ? '定价：峰谷价（工作日高峰 9-12、14-18 点；周末全天空闲）'
+            : (pr && pr.mode === 'flat' ? '定价：固定价' : '定价：未收录，按默认计'))
+          + versionLine;
+        return React.createElement('span', { key: 'prov', className: 'bi-model-group', title: provTitle },
+          React.createElement('b', { className: 'bi-model-provider' }, provLabel),
+          modelDetail(pr, modelName));
       }
 
-      // D6 用户拍板：全部字段隐藏 = 底栏彻底移除——不渲染任何 DOM（无空行/占位高度/悬空分隔符），
-      // density 点击因无 DOM 而天然无副作用、不报错。两条路径：①配置层面所有字段都被关闭；
-      // ②渲染层面（数据条件导致）原生行/主行全空。
-      if (infoBarShouldRemoveAll(FIELD_REGISTRY, fieldVisible) || (row1 === null && nodes.length === 0)) {
-        return null;
+      // 订阅服务名（订阅制模式下"服务商"指订阅服务本身，不是模型厂商）
+      // Codex 与 ChatGPT 已合并：实际 provider openai-codex / chatgpt 均显示 ChatGPT；codex 保持 Codex
+      // v1.6 T7：新增 zai/zai-coding-cn → '智谱'；v1.7：小米 Token Plan → '小米 MiMo'
+      function subscriptionServiceName(provider) {
+        if (provider === 'chatgpt' || provider === 'openai-codex') return 'ChatGPT';
+        if (provider === 'codex') return 'Codex';
+        if (provider === 'opencode-go' || provider === 'opencode') return 'OpenCode Go';
+        if (provider === 'zai' || provider === 'zai-coding-cn') return '智谱';
+        if (provider === 'xiaomi-token-plan-cn' || provider === 'xiaomi-token-plan-sgp' || provider === 'xiaomi-token-plan-ams') return '小米 MiMo';
+        return '订阅';
       }
 
-      const animatedRow1 = row1 === null ? null : React.createElement('div', { className: 'bi-density-extra' },
-        React.createElement('div', { className: 'bi-density-extra-inner' }, row1));
-      const rootCls = 'bi-root';
-      return React.createElement('div', {
-        className: rootCls,
-        onClick: function () { props.onToggleDensity(); },
-        onKeyDown: function (event) {
-          if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            props.onToggleDensity();
-          }
-        },
-        role: 'button',
-        tabIndex: 0,
-        'aria-labelledby': full && row1 !== null ? 'dsh-bottom-info-bar-native dsh-bottom-info-bar-primary' : 'dsh-bottom-info-bar-primary',
-        'aria-describedby': 'dsh-bottom-info-bar-action',
-        'aria-pressed': full,
-        'aria-busy': isDensitySaving,
-        'aria-disabled': isDensitySaving,
-        'data-density': displayDensity,
-        'data-density-saving': isDensitySaving,
-        title: isDensitySaving ? '正在保存切换…' : '单击切换 完整/简洁',
-      }, animatedRow1, row2,
-      React.createElement('span', { id: 'dsh-bottom-info-bar-action', className: 'bi-sr-only' },
-        full ? '按 Enter 或空格切换为简洁模式。' : '按 Enter 或空格切换为完整模式。'));
-    }
-  },
-};
+      // 账单型服务名（v1.7：云账单 provider 显示品牌名，未知保持兜底）
+      function billingServiceName(provider) {
+        if (provider === 'together') return 'Together';
+        if (provider === 'fireworks') return 'Fireworks';
+        if (provider === 'amazon-bedrock') return 'AWS Bedrock';
+        if (provider === 'cloudflare-ai-gateway' || provider === 'cloudflare-workers-ai') return 'Cloudflare';
+        return '云账单';
+      }
 
-// Bottom Info Bar（底部信息栏插件）— client 设置页扩展（与 client-bundle.js 同一 bundle 作用域拼接）
-// v1.9.0 PR2：注册 DSH 设置面板 settings.section 插座，新增「信息底栏」设置页。
-// 设计规范：苹果 HIG（设置型界面改动即时生效）+ 融入 DSH 设置面板既有视觉（--dsw-alias-* 令牌、
-// 卡片圆角 12px、行标题 14px/说明 12px），全程键盘可达（roving tabindex 方向键）、
-// role=switch/radio + aria-checked、:focus-visible 焦点环、prefers-reduced-motion 降级。
-// 约定：本文件与 client-bundle.js 拼接进同一个 __ModuleLoader__ factory 作用域，
-// 顶层标识符一律 bibSet* / InfoBarSettings* 前缀，绝不与主包重名（React/rpc/FIELD_REGISTRY 等直接复用主包声明）。
-'use strict';
+      // 套餐档位短名（JWT 订阅卡：plus/pro/team/enterprise → Plus/Pro/Team/Enterprise；未知返回 null 显示模型名）
+      function subscriptionPlanShort(planType) {
+        if (typeof planType !== 'string' || planType.length === 0) return null;
+        const map = { plus: 'Plus', pro: 'Pro', team: 'Team', enterprise: 'Enterprise' };
+        return map[planType.toLowerCase()] || null;
+      }
 
-const BIB_SET_EVENT = 'dsh-bib-config-changed';
-const BIB_SET_PRESET_LABELS = { red: '红', green: '绿', blue: '蓝', purple: '紫', orange: '橙', neutral: '中性' };
-// 原生取色器（input[type=color]）在未自定义时显示的代表色（浅色主题值；实际信息栏渲染仍按主题变量）
-const BIB_SET_PRESET_WELL_HEX = { red: '#D92D20', green: '#087F5B', blue: '#0044CC', purple: '#6941C6', orange: '#B54708', neutral: '#333333' };
-const BIB_SET_HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
-// 「显示字段」两级分组（D6 用户拍板：原生在前、插件在后）——构建从 constants.js 注入（单一来源）
-const FIELD_GROUP_ORDER = ['native', 'plugin'];
-const FIELD_GROUP_LABELS = {
-  native: '原生字段',
-  plugin: '插件字段',
-};
-// 每行出现条件文案：modes → 中文（余额制/订阅制/账单制/原生统计行/通用）
-const BIB_SET_MODE_LABELS = { balance: '余额制', subscription: '订阅制', billing: '账单制', native: '原生统计行', common: '通用' };
-function bibSetModeText(field) {
-  if (!field || !Array.isArray(field.modes) || field.modes.length === 0) return '';
-  if (field.modes.length === 1 && field.modes[0] === 'native') return '原生统计行字段';
-  const labels = [];
-  for (let i = 0; i < field.modes.length; i++) {
-    const label = BIB_SET_MODE_LABELS[field.modes[i]];
-    if (label && labels.indexOf(label) === -1) labels.push(label);
-  }
-  return labels.length > 0 ? '出现于' + labels.join('、') : '';
-}
+      // 本地时区 YYYY-MM-DD（订阅到期日）
+      function formatDate(ms) {
+        if (ms == null || isNaN(ms)) return '—';
+        const d = new Date(ms);
+        const p = function (x) { return String(x).padStart(2, '0'); };
+        return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate());
+      }
 
-function bibSetDispatchChanged() {
-  // 设置页保存成功后广播：信息栏监听并立即重拉配置（宿主内存缓存，即回）
-  try { document.dispatchEvent(new CustomEvent(BIB_SET_EVENT)); } catch (err) { /* 事件总线不可用时静默：30s 周期校准兜底 */ }
-}
+      // 订阅制模型组：订阅服务名 · 具体模型（如 `OpenCode Go · V4 Flash`、`Codex · GPT 5 Codex`）
+      // v1.7 FR-8：codex 源有 JWT 套餐档位时，模型位显示套餐档位（如 `ChatGPT · Plus`），真实信息来自 id_token claims
+      function subscriptionProviderGroup() {
+        const pr = visiblePricing;
+        const serviceName = subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider);
+        const subSnapshot = state.sub;
+        const planShort = subSnapshot && subSnapshot.planType ? subscriptionPlanShort(subSnapshot.planType) : null;
+        const rawModelLabel = (pr && pr.modelDisplay) ? pr.modelDisplay
+          : (pr && pr.model ? pr.model : '未知模型');
+        const modelLabel = planShort ? planShort : rawModelLabel;
+        const modelName = modelLabelWithoutProvider(modelLabel, serviceName);
+        const versionLine = updateInfo && typeof updateInfo.current === 'string'
+          ? '\n插件版本：' + updateInfo.current : '';
+        const planLine = subSnapshot && subSnapshot.plan ? '\n套餐：' + subSnapshot.plan : '';
+        const expiryLine = subSnapshot && subSnapshot.expiryAt ? '\n到期：' + formatDate(subSnapshot.expiryAt) + '（本地时区）' : '';
+        const title = '订阅服务：' + serviceName + '\n模型：' + rawModelLabel + planLine + expiryLine + versionLine;
+        return React.createElement('span', { key: 'subprov', className: 'bi-model-group', title: title },
+          React.createElement('b', { className: 'bi-model-provider' }, serviceName),
+          modelDetail(pr, modelName),
+        );
+      }
 
-function bibSetOperationMessage(err) {
-  return String((err && err.message) || err || '请稍后再试');
-}
+      // 字段包装：带 data-field 与（可选）颜色变量的容器 span，供 CSS 按字段着色（未自定义时变量不存在，零回归）
+      function fieldSpan(id, key, children) {
+        return React.createElement('span', { key: key, 'data-field': id, style: fieldStyle(id) }, children);
+      }
 
-// ---------- 设置页样式（融入 DSH 设置面板：卡片/行布局/控件全部走 --dsw-alias-* 令牌） ----------
-function bibSetInstallStyles() {
-  const id = 'dsh-bottom-info-bar-settings';
-  const existing = document.querySelector('style[data-plugin-css="' + id + '"]');
-  if (existing !== null) return function () {};
-  const style = document.createElement('style');
-  style.dataset.plugin = 'dsh-bottom-info-bar';
-  style.dataset.pluginCss = id;
-  style.textContent = `
-      .bib-set-root { --bib-set-brand: var(--dsw-alias-brand-primary, #4d6bfe); }
-      .bib-settings { max-width: 720px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; color: var(--dsw-alias-label-primary); }
-      .bib-set-intro { margin: 0; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
-      .bib-set-status { margin: 0; color: var(--dsw-alias-label-tertiary); font-size: 13px; line-height: 20px; }
-      .bib-set-card { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-3); border-radius: 12px; }
-      .bib-set-card-header { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
-      .bib-set-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--dsw-alias-label-primary); }
-      .bib-set-card-desc { font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); }
-      .bib-set-body { border-top: 1px solid var(--dsw-alias-border-l2); margin: 0 16px; padding: 0 0 6px; }
-      .bib-set-group-title { margin: 12px 0 2px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
-      .bib-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dsw-alias-border-l2); }
-      .bib-set-row:last-child { border-bottom: none; }
-      .bib-set-rowText { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
-      .bib-set-rowTitle { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-primary); }
-      .bib-set-keep { flex: none; padding: 0 6px; border-radius: 999px; background: var(--dsw-alias-fill-tsp-secondary, rgba(128,128,128,0.12)); color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 500; line-height: 16px; }
-      .bib-set-rowDesc { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
-      /* 开关：iOS 原生质感（40×24 轨道 + 18px 圆钮），语义 = role:switch + aria-checked */
-      .bib-set-switch { appearance: none; background: 0 0; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; flex: none; border-radius: 12px; }
-      .bib-set-switch:disabled { cursor: default; opacity: 0.5; }
-      .bib-set-switch:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
-      .bib-set-switch-track { position: relative; display: inline-block; box-sizing: border-box; width: 40px; height: 24px; border-radius: 12px; background: var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); transition: background-color 160ms var(--ds-ease-in-out, ease); }
-      .bib-set-switch-track[data-on="true"] { background: var(--bib-set-brand); }
-      .bib-set-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 160ms var(--ds-ease-in-out, ease); }
-      .bib-set-switch-track[data-on="true"] .bib-set-switch-thumb { transform: translateX(16px); }
-      /* 色板圆点：role:radio + roving tabindex（方向键/Home/End 可达），选中态外圈描边 */
-      .bib-set-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
-      .bib-set-dots { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
-      .bib-set-dot { appearance: none; width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
-      .bib-set-dot:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
-      .bib-set-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3, #fff), 0 0 0 4px var(--bib-set-brand); }
-      .bib-set-dot-core { display: block; width: 14px; height: 14px; border-radius: 50%; }
-      .bib-set-dot-default .bib-set-dot-core { background: transparent; border: 1.5px dashed var(--dsw-alias-label-quaternary, rgba(128,128,128,0.5)); }
-      /* 原生取色器色井：保留系统行为，仅样式化为圆角色井 */
-      .bib-set-well { display: inline-flex; flex: none; }
-      .bib-set-well input[type="color"] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 30px; height: 26px; padding: 2px; border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); border-radius: 8px; background: var(--dsw-alias-bg-layer-2, transparent); cursor: pointer; }
-      .bib-set-well input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
-      .bib-set-well input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
-      .bib-set-well input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }
-      .bib-set-well input[type="color"]:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
-      /* hex 输入：等宽字体、即时校验（非法描红 + aria-invalid），Enter/失焦提交，非法回退 */
-      .bib-set-hex { box-sizing: border-box; width: 88px; padding: 4px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2, transparent); border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.4)); border-radius: 8px; }
-      .bib-set-hex:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 1px; }
-      .bib-set-hex[data-invalid="true"] { border-color: var(--dsw-alias-state-error-primary, var(--dsw-alias-label-error, #d92d20)); }
-      .bib-set-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 2px 0 10px; }
-      .bib-set-btn { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); color: var(--dsw-alias-label-secondary); background: 0 0; border-radius: 8px; padding: 5px 14px; font-size: 13px; line-height: 1.5; }
-      .bib-set-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.08)); }
-      .bib-set-btn:focus-visible { outline: 2px solid var(--bib-set-brand); outline-offset: 2px; }
-      .bib-set-btn:disabled { opacity: 0.5; cursor: default; }
-      .bib-set-alert { margin: 0; color: var(--dsw-alias-state-error-primary, var(--dsw-alias-label-error, #d92d20)); font-size: 12px; line-height: 18px; flex: 1 1 auto; min-width: 0; }
-      .bib-set-notice { margin: 0; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; flex: 1 1 auto; min-width: 0; }
-      @media (prefers-reduced-motion: reduce) { .bib-set-switch-track, .bib-set-switch-thumb { transition: none; } }
-    `;
-  document.head.appendChild(style);
-  return function () { style.remove(); };
-}
+      // ---- 余额制模式（v1.0.0 现状，完全不动）：服务商+模型 → 余额 → 时段 → 倒计时 → 本会话花费 ----
+      // v1.9.0 PR2：每个渲染片段按设置过滤（fieldVisible）；隐藏不占位，组间分隔符由组装层自动收合
+      function pushBalanceGroups(groups, trailingErrorGroups) {
+        const bal = state.balance;
+        const errors = state.errors || {};
+        const alertActive = !!(bal && bal.alert && bal.alert.active);
+        if (fieldVisible('anchorGroup')) {
+          const anchor = providerGroup();
+          groups.push(React.cloneElement(anchor, { 'data-field': 'anchorGroup', style: fieldStyle('anchorGroup') }));
+        }
+
+        // v1.6 T7：未适配账户渲染"未适配"弱提示
+        if (bal && bal.unmapped) {
+          if (fieldVisible('unmapped')) {
+            trailingErrorGroups.push(fieldSpan('unmapped', 'unmapped',
+              React.createElement('span', { className: 'bi-muted', title: '该服务商暂未适配余额查询，后续版本将支持。' }, '未适配')));
+          }
+        }
+        // 余额（纯金额；hover 仅展示余额，不显示充值/赠金）
+        // v1.6 T7：未配置提示改为按账户显示凭据名（去掉写死的 DeepSeek 文案）
+        else if (bal && bal.error && bal.error.kind === 'no-key') {
+          if (fieldVisible('noKeyHint')) {
+            const credName = bal.error.message ? String(bal.error.message).replace('未配置 ', '') : 'API_KEY';
+            trailingErrorGroups.push(fieldSpan('noKeyHint', 'nokey',
+              React.createElement('span', { className: 'bi-err', title: '未配置 ' + credName + '。请在"设置 → 模型"中填写。' },
+                '未配置 ' + credName + ' → 设置→模型 填写')));
+          }
+        } else if (bal && bal.data) {
+          const symbol = bal.currency === 'USD' ? '$' : '¥';
+          const balTitle = bal.estimate
+            ? '估算余额：' + symbol + fmt(bal.data.total)
+            : '余额：' + symbol + fmt(bal.data.total);
+          if (fieldVisible('balance')) {
+            groups.push(fieldSpan('balance', 'bal', React.createElement('span', { title: balTitle },
+              metric('余额', symbol + fmt(bal.data.total), alertActive ? 'bi-alert-num' : ''),
+              alertActive ? React.createElement('span', { className: 'bi-low-status' }, '低') : null,
+              bal.estimate ? React.createElement('span', { className: 'bi-muted' }, '（估算）') : null,
+            )));
+          }
+          // host 快照失败（bal.error）或本次 RPC 失败（errors.balance）→ 均保留旧数据 + 降级标记
+          if (fieldVisible('balanceError') && (bal.error || errors.balance)) {
+            trailingErrorGroups.push(fieldSpan('balanceError', 'balerr',
+              React.createElement('span', { className: 'bi-stale', title: '余额暂不可用；正在显示上次数据并自动重试。' }, '刷新失败')));
+          }
+        } else if (bal && bal.error) {
+          if (fieldVisible('balanceError')) {
+            trailingErrorGroups.push(fieldSpan('balanceError', 'berr',
+              React.createElement('span', { className: 'bi-err', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败')));
+          }
+        } else if (errors.balance) {
+          // 本次 RPC 失败且无旧数据：只降级余额块，其余端点数据照常渲染
+          if (fieldVisible('balanceError')) {
+            trailingErrorGroups.push(fieldSpan('balanceError', 'berr',
+              React.createElement('span', { className: 'bi-err', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败')));
+          }
+        }
 
-// ---------- 控件 ----------
-function bibSetSwitch(props) {
-  const checked = !!props.checked;
-  return React.createElement('button', {
-    type: 'button',
-    className: 'bib-set-switch',
-    role: 'switch',
-    'aria-checked': checked,
-    'aria-label': props.label,
-    disabled: props.disabled === true,
-    title: props.title,
-    onClick: function () { if (props.onToggle) props.onToggle(!checked); },
-  },
-  React.createElement('span', { className: 'bib-set-switch-track', 'data-on': checked ? 'true' : 'false', 'aria-hidden': 'true' },
-    React.createElement('span', { className: 'bib-set-switch-thumb' })));
-}
+        // 时段：仅峰谷价服务商显示"高峰价/空闲价"（flat/unknown 服务商不显示；hover 展示具体价格）
+        const pr = visiblePricing;
+        if (pr && pr.mode === 'peak-valley' && fieldVisible('period')) {
+          const peakNow = pr.period === 'peak';
+          const p = pr.prices || {};
+          const periodTitle = '北京时间 ' + (peakNow ? '高峰价' : '空闲价') + '：输入 ¥' + (p.inputCacheMiss != null ? p.inputCacheMiss : '?')
+            + '/M · 缓存 ¥' + (p.inputCacheHit != null ? p.inputCacheHit : '?')
+            + '/M · 输出 ¥' + (p.output != null ? p.output : '?') + '/M';
+          groups.push(fieldSpan('period', 'period', React.createElement('span', { className: peakNow ? 'bi-peak' : 'bi-offpeak', title: periodTitle },
+            peakNow ? '高峰价' : '空闲价')));
+        }
 
-// 色板圆点组：默认 + 预设色名；role=radiogroup/radio + roving tabindex（方向键/Home/End）
-function bibSetPalette(props) {
-  const options = ['default'].concat(PRESET_COLORS);
-  const refs = React.useRef({});
-  const isSelected = function (option) {
-    return option === 'default' ? props.value === null : props.value === option;
-  };
-  const select = function (option) {
-    if (props.onSelect) props.onSelect(option === 'default' ? null : option);
-  };
-  const move = function (from, step) {
-    const next = (from + step + options.length) % options.length;
-    const node = refs.current[next];
-    if (node && typeof node.focus === 'function') node.focus();
-    select(options[next]);
-  };
-  const onKey = function (event, index) {
-    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { event.preventDefault(); move(index, 1); }
-    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { event.preventDefault(); move(index, -1); }
-    else if (event.key === 'Home') { event.preventDefault(); move(index, -index); }
-    else if (event.key === 'End') { event.preventDefault(); move(index, options.length - 1 - index); }
-  };
-  const children = options.map(function (option, index) {
-    const selected = isSelected(option);
-    const isDefault = option === 'default';
-    const coreStyle = {};
-    if (!isDefault) coreStyle.background = 'var(--bi-palette-' + option + ')';
-    const ariaLabel = isDefault ? '恢复默认颜色' : (BIB_SET_PRESET_LABELS[option] || option);
-    return React.createElement('button', {
-      key: option,
-      type: 'button',
-      ref: function (node) { refs.current[index] = node; },
-      className: 'bib-set-dot' + (isDefault ? ' bib-set-dot-default' : ''),
-      role: 'radio',
-      'aria-checked': selected,
-      'aria-label': ariaLabel,
-      title: ariaLabel,
-      tabIndex: selected ? 0 : -1,
-      onClick: function () { select(option); },
-      onKeyDown: function (event) { onKey(event, index); },
-    }, React.createElement('span', { className: 'bib-set-dot-core', style: coreStyle, 'aria-hidden': 'true' }));
-  });
-  return React.createElement('span', { className: 'bib-set-dots', role: 'radiogroup', 'aria-label': props.label }, children);
-}
+        // 倒计时：仅峰谷价服务商显示"距高峰/距空闲"（hover 展示下次切换时刻；数字加粗）
+        if (pr && pr.mode === 'peak-valley' && pr.nextSwitch && fieldVisible('countdown')) {
+          const peakNow = pr.period === 'peak';
+          const countdownTitle = '北京时间 ' + pr.nextSwitch.atLabel + ' 切换为' + (peakNow ? '空闲价' : '高峰价') + '。';
+          groups.push(fieldSpan('countdown', 'countdown', React.createElement('span', { title: countdownTitle },
+            metric('距' + (peakNow ? '空闲' : '高峰'), fmtCountdown(pr.nextSwitch.at - now)))));
+        }
 
-// ---------- 页面组件 ----------
-function InfoBarSettingsSection(props) {
-  void props; // 与官方 section 组件同签名（外壳会传入 renderSlot/close 等，本页不使用）
-  const [snapshot, setSnapshot] = React.useState(null); // { fields, colors, configVersion }
-  const [status, setStatus] = React.useState('loading');
-  const [loadError, setLoadError] = React.useState(null);
-  const [opError, setOpError] = React.useState(null);
-  const [notice, setNotice] = React.useState(null);
-  const [saving, setSaving] = React.useState(false);
-  const [hexDrafts, setHexDrafts] = React.useState({});
-  const opSeqRef = React.useRef(0); // 版本号守卫：慢响应绝不覆盖更新的操作
-  const savingCountRef = React.useRef(0);
+        // 本会话花费（公共小部件 pushSessionCost：只显示钱；hover 显示 今天/近一月/全部）
+        // 始终显示：新会话/对话刚开始尚无记账时显示 ¥0.000，hover 仍可查看持久化的 今天/近一月/全部
+        pushSessionCost(groups, trailingErrorGroups, !!(bal && bal.currency === 'USD'));
+      }
 
-  React.useEffect(function () {
-    let active = true;
-    rpc('getFieldConfig').then(function (cfg) {
-      if (!active) return;
-      if (cfg && typeof cfg === 'object' && cfg.fields) {
-        setSnapshot({ fields: cfg.fields, colors: cfg.colors || {}, configVersion: cfg.configVersion || 0 });
-        setStatus('ready');
-      } else {
-        setLoadError('配置暂时无法读取'); setStatus('error');
+      // 本会话花费块（余额制 与 订阅·充值余额 形态共用的小部件）：
+      // 只显示钱；hover 浮窗显示 含子代理说明 + 今天 / 近一月 / 全部；金额数字加粗。
+      // usdSymbol：账户币种为美元时，hover 汇总行用 $ 前缀（本会话单值仍按其真实计价币种）
+      function pushSessionCost(groups, trailingErrorGroups, usdSymbol) {
+        const usg = state.usage;
+        const errs = state.errors || {};
+        if (usg) {
+          // 隐藏不占位（错误提示属于独立字段 usageError，两支互斥不受影响）
+          if (fieldVisible('sessionCost')) {
+            const cs = usg.currentSession;
+            const costCNY = cs && cs.costs && cs.costs.CNY != null ? cs.costs.CNY : null;
+            const costUSD = cs && cs.costs && cs.costs.USD != null ? cs.costs.USD : null;
+            const symbol = usdSymbol ? '$' : '¥';
+            const costTxt = costCNY != null ? '¥' + costCNY.toFixed(3)
+              : (costUSD != null ? '$' + costUSD.toFixed(3) : symbol + (0).toFixed(3));
+            const today = usg.todaySpend != null ? '今天 ' + symbol + fmt(usg.todaySpend, 3) : '';
+            const month = usg.monthSpend != null ? '近一月 ' + symbol + fmt(usg.monthSpend, 3) : '';
+            const total = usg.totalSpend != null ? '全部 ' + symbol + fmt(usg.totalSpend, 3) : '';
+            const detail = [today, month, total].filter(function (s) { return s.length > 0; }).join(' · ');
+            groups.push(fieldSpan('sessionCost', 'convo', React.createElement('span', {
+              title: '本会话 ' + costTxt + '（含子代理）' + (detail ? '\n' + detail : '') },
+              metric('本会话', costTxt))));
+          }
+        } else if (errs.usage && fieldVisible('usageError')) {
+          trailingErrorGroups.push(fieldSpan('usageError', 'usageerr',
+            React.createElement('span', { className: 'bi-err', title: '花费暂不可用；不会影响对话。' }, '花费获取失败')));
+        }
       }
-    }).catch(function (err) {
-      if (!active) return;
-      setLoadError(bibSetOperationMessage(err)); setStatus('error');
-    });
-    return function () { active = false; };
-  }, []);
 
-  const beginOp = React.useCallback(function () {
-    savingCountRef.current += 1;
-    setSaving(true);
-  }, []);
-  const endOp = React.useCallback(function () {
-    savingCountRef.current = Math.max(0, savingCountRef.current - 1);
-    if (savingCountRef.current === 0) setSaving(false);
-  }, []);
+      // ---- 订阅制模式（互斥替换余额制版）：
+      //      套餐额度型：订阅服务+模型 → 三窗口额度 → 距重置倒计时（余额/时段/花费/token 不显示）
+      //      充值余额型（如智谱按量账户，windows 空且有 sub.balance）：服务商+模型 → 余额 → 本会话花费 ----
+       function subscriptionFailureHint(error, source) {
+         const kind = error && error.kind;
+         const serviceName = subscriptionServiceName(source);
+         const message = error && typeof error.message === 'string' ? error.message : '';
+         const statusMatch = message.match(/HTTP (\d{3})/);
+         const status = statusMatch ? statusMatch[1] : '';
+         if (kind === 'no-key') return '未找到 ' + serviceName + ' 登录凭证。请重新授权。';
+         if (kind === 'auth' || status === '401') return serviceName + ' 登录凭证已失效。请重新授权。';
+         if (status === '403') return serviceName + ' 拒绝访问。请重新授权或稍后再试。';
+         if (status === '429') return serviceName + ' 请求过于频繁。请稍后再试。';
+         if (kind === 'timeout' || /timeout|timed out|abort/i.test(message)) return serviceName + ' 响应超时。请检查网络后再试。';
+         if (kind === 'parse') return serviceName + ' 返回的数据暂时无法识别。请稍后再试。';
+         return serviceName + ' 暂不可用。请检查网络后再试。';
+       }
+
+       function pushSubscriptionGroups(groups, trailingErrorGroups) {
+        if (fieldVisible('subServiceGroup')) {
+          const subAnchor = subscriptionProviderGroup();
+          groups.push(React.cloneElement(subAnchor, { 'data-field': 'subServiceGroup', style: fieldStyle('subServiceGroup') }));
+        }
+        const sub = state.sub;
+        const errors = state.errors || {};
+        // v1.7 FR-8：JWT 订阅卡——真实套餐到期日（纯本地解码；无登录态/解析失败不显示此处）
+        if (sub && sub.planType && sub.expiryAt && fieldVisible('expiry')) {
+          groups.push(fieldSpan('expiry', 'subexp', React.createElement('span', { title: '订阅到期：' + formatDate(sub.expiryAt) + '（本地时区）' },
+            metric('到期', formatDate(sub.expiryAt)))));
+        }
+        if (!sub) {
+          if (errors.sub && fieldVisible('refreshFailure')) {
+            // 本次 RPC 失败且无旧数据：显示失败信息而非永久"加载中…"
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'suberr',
+              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint({ kind: 'exception', message: String(errors.sub) }, visibleBillingMode && visibleBillingMode.provider) }, '刷新失败')));
+          }
+          return;
+        }
+        const rawWindows = Array.isArray(sub.windows) ? sub.windows : [];
+        // v1.9.0 PR2：逐窗口显隐过滤（5h/周/月各自独立开关），后续优先窗口/重置倒计时都基于过滤后的集合
+        const windows = rawWindows.filter(function (w) {
+          return w && typeof w.usedPercent === 'number' && windowFieldVisible(w.key);
+        });
+        const hasData = windows.length > 0;
+        // 错误分支：无旧数据时给出明确引导 / 错误文案；有旧数据时走下方渲染并附"刷新失败"标记。
+        // no-key（无令牌/缺 access_token）与 auth（令牌失效 401）→ 统一"未绑定/重新绑定"引导——
+        // 令牌由独立插件 dsh-chatgpt-subscription 维护，本插件只读令牌显示额度，不自行绑定/续期
+        if (sub.error && !hasData) {
+          if (fieldVisible('refreshFailure')) {
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'substale',
+              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint(sub.error, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
+          }
+          return;
+        }
+        // v1.8：充值余额模式——无额度窗口但有 balance 字段（如智谱普通 API 余额用户）
+        // 显示"余额 ¥XX.XX"，与 Coding Plan 额度窗口互斥
+        if (!hasData && typeof sub.balance === 'number' && isFinite(sub.balance)) {
+          if (fieldVisible('subBalance')) {
+            const balTxt = '¥' + fmt(sub.balance, 2);
+            const titleLines = ['订阅源：' + subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider) + '（' + (sub.plan || '充值余额') + '）',
+              '可用余额：' + balTxt];
+            groups.push(fieldSpan('subBalance', 'subbal', React.createElement('span', { title: titleLines.join('\n') },
+              metric('余额', balTxt))));
+          }
+          // 充值余额用户按量付费，花销与余额同等重要 → 追加公共花费块（含子代理聚合）
+          pushSessionCost(groups, trailingErrorGroups, false);
+          // host 快照失败（sub.error）或本次 RPC 失败（errors.sub）→ 保留旧数据 + 降级标记
+          if (fieldVisible('refreshFailure') && (sub.error || errors.sub)) {
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'substale',
+              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint(sub.error || { kind: 'exception', message: String(errors.sub || '') }, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
+          }
+          return;
+        }
+        // 窗口缺失（如 Codex 无 5 小时窗口）→ 跳过窗口组，不占位、不报错
+        if (hasData) {
+          // 简洁模式下选择"时间最短且有重置时刻"的窗口（刷新最快，用户最需关注）：
+          // 优先级：5小时 > 周 > 月（按窗口时长排序，而非已用百分比）
+          const windowPriority = { five_hour: 1, seven_day: 2, monthly: 3 };
+          const windowsWithReset = windows.filter(function (w) { return w.resetsAt; });
+          const displayWindow = windowsWithReset.length > 0
+            ? windowsWithReset.slice().sort(function (a, b) {
+                const pa = windowPriority[a.key] || 99;
+                const pb = windowPriority[b.key] || 99;
+                return pa - pb;
+              })[0]
+            : null;
 
-  if (status === 'loading') {
-    return React.createElement('div', { className: 'bib-set-root bib-settings' },
-      React.createElement('p', { className: 'bib-set-status' }, '正在载入信息底栏设置…'));
-  }
-  if (status === 'error') {
-    return React.createElement('div', { className: 'bib-set-root bib-settings' },
-      React.createElement('p', { className: 'bib-set-alert', role: 'alert' }, '信息底栏设置暂时无法读取：' + (loadError || '请稍后再试')));
-  }
+          // 完整模式显示全部窗口；简洁模式只显示选中的那个窗口
+          const visible = full ? windows : (displayWindow ? [displayWindow] : []);
 
-  const fieldsById = {};
-  for (let i = 0; i < FIELD_REGISTRY.length; i++) fieldsById[FIELD_REGISTRY[i].id] = FIELD_REGISTRY[i];
-  function fieldOn(id) { return snapshot.fields[id] !== false; }
-  function colorOf(id) {
-    const value = snapshot.colors[id];
-    return typeof value === 'string' && value.length > 0 ? value : null;
-  }
-  function labelOf(id) { const f = fieldsById[id]; return f ? f.label : id; }
-  function makePair(key, value) { const pair = {}; pair[key] = value; return pair; }
+          // 预警触发条件：已用 ≥80%（= 剩余 ≤20%）→ 鲜红色文字；正常额度使用中性文字。
+          const LOW_QUOTA_PERCENT = 20;
+          const titleLines = ['订阅源：' + subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider) + (sub.plan ? '（' + sub.plan + '）' : '')]
+            .concat(windows.map(function (w) {
+              return w.label + '窗口：剩余 ' + remainingPercent(w) + '%（已用 ' + w.usedPercent + '%）'
+                + (w.resetsAt ? ' · 重置 ' + formatDateTime(w.resetsAt) + ' · 距重置 ' + fmtResetCountdown(w.resetsAt - now) : '');
+            }));
+          const winNodes = [];
+          for (let i = 0; i < visible.length; i++) {
+            const w = visible[i];
+            if (i > 0) winNodes.push(' · ');
+            const remaining = remainingPercent(w);
+            const numberClass = remaining <= LOW_QUOTA_PERCENT ? 'bi-quota-low' : '';
+            // 每个窗口独立 data-field（subWindow5h/Week/Month），色变量按字段注入；「低」字标签保留
+            winNodes.push(fieldSpan(WINDOW_FIELD_IDS[w.key] || 'subWindow5h', 'w' + i,
+              metric(compactWindowLabel(w.key), remaining + '%', numberClass)));
+            if (remaining <= LOW_QUOTA_PERCENT) winNodes.push(React.createElement('span', { key: 'low' + i, className: 'bi-low-status' }, '低'));
+          }
+          // 全部窗口被隐藏（或紧凑模式无候选）→ 整组不推送，分隔符由组装层正确收合
+          if (winNodes.length > 0) {
+            groups.push(React.createElement('span', { key: 'subwin', title: titleLines.join('\n') }, ...winNodes));
+          }
+          // host 快照失败（sub.error）或本次 RPC 失败（errors.sub）→ 均保留旧数据 + 降级标记
+          if (fieldVisible('refreshFailure') && (sub.error || errors.sub)) {
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'substale',
+              React.createElement('span', { className: 'bi-stale', title: subscriptionFailureHint(sub.error || { kind: 'exception', message: String(errors.sub || '') }, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
+          }
+          // 距重置倒计时（与显示的窗口一致，确保额度与倒计时匹配）
+          if (displayWindow && displayWindow.resetsAt && fieldVisible('resetCountdown')) {
+            const cdTitle = displayWindow.label + '窗口 剩余 ' + remainingPercent(displayWindow)
+              + '%（已用 ' + displayWindow.usedPercent + '%） · 重置 ' + formatDateTime(displayWindow.resetsAt);
+            groups.push(fieldSpan('resetCountdown', 'subcd', React.createElement('span', { title: cdTitle },
+              metric('距重置', fmtResetCountdown(displayWindow.resetsAt - now)))));
+          }
+        }
+      }
 
-  // 服务端快照回写（configVersion 一并更新；persisted=false 时如实提示落盘失败）
-  function applyServerResult(res) {
-    if (!res || typeof res !== 'object') return;
-    setSnapshot(function (prev) {
-      return {
-        fields: res.fields || (prev && prev.fields) || {},
-        colors: res.colors || (prev && prev.colors) || {},
-        configVersion: typeof res.configVersion === 'number' ? res.configVersion : ((prev && prev.configVersion) || 0),
-      };
-    });
-    if (res.persisted === false) setNotice('改动已生效，但写入本地配置文件失败：' + (res.warning || '未知原因'));
-  }
+      // ---- v1.7 账单型模式（FR-10~13/FR-14，互斥第三态）：
+      //      账单服务+模型 → 本月真实花费 →（预算%）→（免费额度+重置倒计时）；余额/额度/本会话花费均不显示 ----
+      function billingFailureHint(error, provider) {
+        const serviceName = billingServiceName(provider);
+        const message = error && typeof error.message === 'string' ? error.message : '';
+        const statusMatch = message.match(/HTTP (\d{3})/);
+        const status = statusMatch ? statusMatch[1] : '';
+        if (error && error.kind === 'no-key') return '未配置 ' + message.replace('未配置 ', '') + '。请在"设置 → 模型"中填写。';
+        if (status === '403' || /缺少 .*权限/.test(message)) return serviceName + ' 拒绝访问：Token 可能缺少账单读取权限。';
+        if (error && error.kind === 'parse') return serviceName + ' 返回的数据暂时无法识别。请稍后再试。';
+        if (/timeout|timed out|abort/i.test(message)) return serviceName + ' 响应超时。请检查网络后再试。';
+        return serviceName + ' 账单暂不可用。请检查网络与权限后再试。';
+      }
 
-  // 乐观更新 + 失败回退（参照 density toggle）+ 版本号守卫
-  function commit(patch, applyOptimistic, revertOptimistic, errorPrefix) {
-    setOpError(null);
-    setNotice(null);
-    const seq = ++opSeqRef.current;
-    applyOptimistic();
-    beginOp();
-    rpc('setFieldConfig', patch).then(function (res) {
-      if (seq !== opSeqRef.current) { endOp(); return; }
-      endOp();
-      applyServerResult(res);
-      bibSetDispatchChanged();
-    }).catch(function (err) {
-      if (seq !== opSeqRef.current) { endOp(); return; }
-      endOp();
-      revertOptimistic();
-      setOpError(errorPrefix + '保存失败：' + bibSetOperationMessage(err));
-    });
-  }
+      function pushBillingGroups(groups, trailingErrorGroups) {
+        if (fieldVisible('billingServiceGroup')) {
+          const billAnchor = billingProviderGroup();
+          groups.push(React.cloneElement(billAnchor, { 'data-field': 'billingServiceGroup', style: fieldStyle('billingServiceGroup') }));
+        }
+        const bill = state.billing;
+        const errors = state.errors || {};
+        if (!bill) {
+          if (errors.billing && fieldVisible('refreshFailure')) {
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'billerr',
+              React.createElement('span', { className: 'bi-stale', title: billingFailureHint({ kind: 'exception', message: String(errors.billing) }, visibleBillingMode && visibleBillingMode.provider) }, '刷新失败')));
+          }
+          return;
+        }
+        const d = bill.data;
+        const hasSpend = !!(d && (d.currentPeriodSpend != null || d.usage != null));
+        if (bill.error && !hasSpend) {
+          if (fieldVisible('refreshFailure')) {
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'billstale',
+              React.createElement('span', { className: 'bi-stale', title: billingFailureHint(bill.error, bill.type || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
+          }
+          return;
+        }
+        if (hasSpend) {
+          const symbol = d.currency === 'CNY' ? '¥' : '$';
+          const titleLines = ['账单源：' + billingServiceName(visibleBillingMode && visibleBillingMode.provider)]
+            .concat(d.note ? [d.note] : [])
+            .concat(d.currentPeriodSpend != null ? ['本月花费：' + symbol + fmt(d.currentPeriodSpend, 2)] : [])
+            .concat(d.budgetPercent != null ? ['预算使用：' + fmt(d.budgetPercent, 0) + '%'] : [])
+            .concat(d.freeRemaining != null ? ['每日免费额度剩余：' + fmt(d.freeRemaining, 0)] : []);
+          // v1.9.0 PR2：本月/预算/免费额度三片段各自显隐，分隔符只在可见片段之间
+          const nodes = [];
+          if (d.currentPeriodSpend != null && fieldVisible('billingSpend')) {
+            nodes.push(fieldSpan('billingSpend', 'billspend', metric('本月', symbol + fmt(d.currentPeriodSpend, 2))));
+          } else if (d.usage != null && fieldVisible('billingSpend')) {
+            nodes.push(fieldSpan('billingSpend', 'billspend', metric('本月用量', fmt(d.usage, 2) + (d.usageUnit ? ' ' + d.usageUnit : ''))));
+          }
+          if (d.budgetPercent != null && fieldVisible('budget')) {
+            if (nodes.length > 0) nodes.push(' · ');
+            nodes.push(fieldSpan('budget', 'billbudget', metric('预算', fmt(d.budgetPercent, 0) + '%')));
+          }
+          // 免费额度仅当接口显式给出（freeRemaining/resetsAt 同时存在）才显示，绝不编造
+          if (d.freeRemaining != null && d.resetsAt && fieldVisible('freeQuota')) {
+            if (nodes.length > 0) nodes.push(' · ');
+            nodes.push(fieldSpan('freeQuota', 'billfree', metric('免费', fmt(d.freeRemaining, 0) + ' · 距重置 ' + fmtResetCountdown(d.resetsAt - now))));
+          }
+          if (nodes.length > 0) {
+            groups.push(React.createElement('span', { key: 'bill', title: titleLines.join('\n') }, ...nodes));
+          }
+          if (fieldVisible('refreshFailure') && (bill.error || errors.billing)) {
+            trailingErrorGroups.push(fieldSpan('refreshFailure', 'billstale',
+              React.createElement('span', { className: 'bi-stale', title: billingFailureHint(bill.error || { kind: 'exception', message: String(errors.billing || '') }, bill.type || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败')));
+          }
+        }
+      }
 
-  function setFieldFlag(id, next) {
-    const previous = fieldOn(id);
-    if (previous === next) return;
-    commit({ fields: makePair(id, next) },
-      function () { setSnapshot(function (s) { return Object.assign({}, s, { fields: Object.assign({}, s.fields, makePair(id, next)) }); }); },
-      function () { setSnapshot(function (s) { return Object.assign({}, s, { fields: Object.assign({}, s.fields, makePair(id, previous)) }); }); },
-      '「' + labelOf(id) + '」');
-  }
+      // 账单型模型组：账单服务名 · 具体模型（如 `AWS Bedrock · Claude`）
+      function billingProviderGroup() {
+        const pr = visiblePricing;
+        const serviceName = billingServiceName(visibleBillingMode && visibleBillingMode.provider);
+        const modelLabel = (pr && pr.modelDisplay) ? pr.modelDisplay
+          : (pr && pr.model ? pr.model : '未知模型');
+        const modelName = modelLabelWithoutProvider(modelLabel, serviceName);
+        const versionLine = updateInfo && typeof updateInfo.current === 'string'
+          ? '\n插件版本：' + updateInfo.current : '';
+        const title = '账单服务：' + serviceName + '\n模型：' + modelLabel + versionLine;
+        return React.createElement('span', { key: 'billprov', className: 'bi-model-group', title: title },
+          React.createElement('b', { className: 'bi-model-provider' }, serviceName),
+          modelDetail(pr, modelName),
+        );
+      }
 
-  function setColor(id, next) {
-    const previous = colorOf(id);
-    if (previous === next) {
-      setHexDrafts(function (drafts) { return Object.assign({}, drafts, makePair(id, undefined)); });
-      return;
-    }
-    commit({ colors: makePair(id, next) },
-      function () { setSnapshot(function (s) { return Object.assign({}, s, { colors: Object.assign({}, s.colors, makePair(id, next)) }); }); },
-      function () { setSnapshot(function (s) { return Object.assign({}, s, { colors: Object.assign({}, s.colors, makePair(id, previous)) }); }); },
-      '「' + labelOf(id) + '」颜色');
-  }
+      const groups = [];
+      // 报错不打断主要信息的阅读顺序：统一延后到整行最右侧。
+      const trailingErrorGroups = [];
+      // 两态严格判定：density 只能是 'full' 或 'compact'（host 校验 + 本地防抖保证）
+      const full = displayDensity === 'full';
+      // 模式互斥：订阅制渲染订阅版 row2，账单制渲染账单版 row2，余额制渲染 v1.0.0 现状——三态绝不叠加（FR-14）
+      const isSub = !!(visibleBillingMode && visibleBillingMode.mode === 'subscription');
+      const isBilling = !!(visibleBillingMode && visibleBillingMode.mode === 'billing');
+      // Never paint a loading placeholder.  Before the active session's model
+      // is available, leave this compact row empty rather than briefly showing
+      // either a generic loading label or data from the previous session.
+      if (waitForSessionModel) {
+        // Intentionally empty: session model publish fills the row immediately.
+      } else if (isBilling) {
+        pushBillingGroups(groups, trailingErrorGroups);
+      } else if (isSub) {
+        pushSubscriptionGroups(groups, trailingErrorGroups);
+      } else {
+        pushBalanceGroups(groups, trailingErrorGroups);
+      }
 
-  // hex 输入：输入中仅标记非法（描红 + aria-invalid）；Enter/失焦时合法才提交，非法回退当前值
-  function hexDraftOf(id) {
-    const draft = hexDrafts[id];
-    return typeof draft === 'string' ? draft : null;
-  }
-  function committedHexText(id) {
-    const value = colorOf(id);
-    if (value === null) return '';
-    return PRESET_COLOR_SET.has(value) ? value.toUpperCase() : value;
-  }
-  function onHexChange(id, raw) {
-    setHexDrafts(function (drafts) { return Object.assign({}, drafts, makePair(id, raw)); });
-  }
-  function commitHex(id) {
-    const draft = hexDraftOf(id);
-    if (draft === null) return;
-    const value = draft.trim();
-    setHexDrafts(function (drafts) { return Object.assign({}, drafts, makePair(id, undefined)); });
-    if (value.length === 0) return;
-    if (!BIB_SET_HEX_PATTERN.test(value)) {
-      setOpError('「' + labelOf(id) + '」颜色格式无效：请输入 #RRGGBB（例如 #0044CC）');
-      return;
-    }
-    setColor(id, value.toUpperCase());
-  }
+      // 全局降级提示：任一端点失败 → 旧数据照常渲染 + 角落提示（title 列出失败项），仅失败项降级
+      const errors = state.errors || {};
+      const failedLabels = [];
+      if (errors.balance) failedLabels.push('余额');
+      if (errors.pricing) failedLabels.push('定价');
+      if (errors.usage) failedLabels.push('花费');
+      if (errors.billingMode) failedLabels.push('模式');
+      if (errors.sub) failedLabels.push('订阅额度');
+      if (errors.billing) failedLabels.push('账单');
+      if (failedLabels.length > 0 && fieldVisible('refreshFailure')) {
+        trailingErrorGroups.push(fieldSpan('refreshFailure', 'degraded',
+          React.createElement('span', { className: 'bi-stale', key: 'degraded',
+            title: failedLabels.join('、') + '暂不可用；正在保留上次数据并自动重试。' }, '刷新失败')));
+      }
+      const persistence = state.usage && state.usage.persistence;
+      if (persistence && persistence.state && persistence.state !== 'ok' && fieldVisible('persistWarning')) {
+        const snapshotOnly = persistence.state === 'snapshot-stale';
+        trailingErrorGroups.push(fieldSpan('persistWarning', 'ledger-save', React.createElement('span', {
+          className: snapshotOnly ? 'bi-stale' : 'bi-err',
+          title: snapshotOnly
+            ? '账单流水已保存，但可直接查看的账单文件暂未更新：' + (persistence.message || '未知原因')
+            : '本次账单未保存，不会计入金额：' + (persistence.message || '未知原因'),
+        }, snapshotOnly ? '账单待整理' : '账单未保存')));
+      }
 
-  function runReset(kind) {
-    setOpError(null);
-    setNotice(null);
-    const seq = ++opSeqRef.current;
-    beginOp();
-    rpc(kind === 'colors' ? 'resetFieldColors' : 'resetFieldConfig').then(function (res) {
-      if (seq !== opSeqRef.current) { endOp(); return; }
-      endOp();
-      applyServerResult(res);
-      bibSetDispatchChanged();
-      setNotice(kind === 'colors' ? '已恢复默认颜色' : '已恢复默认标签');
-    }).catch(function (err) {
-      if (seq !== opSeqRef.current) { endOp(); return; }
-      endOp();
-      setOpError('重置失败：' + bibSetOperationMessage(err));
-    });
-  }
+       if (updateInfo && updateInfo.available === true && fieldVisible('updateNotice')) {
+         groups.push(fieldSpan('updateNotice', 'update', React.createElement('span', {
+           className: 'bi-update', title: '请告知你的 Agent 将本插件更新到“' + updateInfo.latest + '”版本。',
+       }, '新版本提醒')));
+       }
 
-  // ---- 渲染 ----
-  const groupsChildren = [];
-  for (let g = 0; g < FIELD_GROUP_ORDER.length; g++) {
-    const group = FIELD_GROUP_ORDER[g];
-    const groupFields = FIELD_REGISTRY.filter(function (f) { return f.group === group; });
-    if (groupFields.length === 0) continue;
-    const rows = [];
-    for (let i = 0; i < groupFields.length; i++) {
-      const field = groupFields[i];
-      const isAnchor = field.anchor === true;
-      const descParts = [];
-      // D6：锚点与其他字段同等可隐藏——「身份锚点」仅作为说明保留，不再恒开/禁用
-      if (isAnchor) descParts.push('身份锚点：当前对话的服务商与模型标识。');
-      const modeText = bibSetModeText(field);
-      if (modeText) descParts.push(modeText + '。');
-      if (field.note) descParts.push(field.note);
-      if (field.suggestKeep) descParts.push('关闭后相应提示不再出现，建议保留。');
-      rows.push(React.createElement('div', { key: field.id, className: 'bib-set-row' },
-        React.createElement('div', { className: 'bib-set-rowText' },
-          React.createElement('div', { className: 'bib-set-rowTitle' },
-            field.label,
-            field.suggestKeep ? React.createElement('span', { className: 'bib-set-keep' }, '建议保留') : null),
-          React.createElement('div', { className: 'bib-set-rowDesc' }, descParts.join(''))),
-        bibSetSwitch({
-          label: '显示' + field.label,
-          checked: fieldOn(field.id),
-          title: fieldOn(field.id) ? '点击隐藏' : '点击显示',
-          onToggle: function (next) { setFieldFlag(field.id, next); },
-        })));
-    }
-    groupsChildren.push(React.createElement('div', { key: 'g-' + group },
-      React.createElement('div', { className: 'bib-set-group-title' }, FIELD_GROUP_LABELS[group] || group),
-      rows));
-  }
+       // ---- 组装（分隔符收合与「刷新失败」去重见模块级 assembleInfoBarRow） ----
+       const nodes = assembleInfoBarRow(groups, trailingErrorGroups, React.createElement);
+       const row2 = React.createElement('div', { id: 'dsh-bottom-info-bar-primary', className: 'bi-row2' }, ...nodes);
 
-  const colorChildren = [];
-  for (let g = 0; g < FIELD_GROUP_ORDER.length; g++) {
-    const group = FIELD_GROUP_ORDER[g];
-    const groupFields = FIELD_REGISTRY.filter(function (f) { return f.group === group; });
-    if (groupFields.length === 0) continue;
-    const rows = [];
-    for (let i = 0; i < groupFields.length; i++) {
-      const field = groupFields[i];
-      const value = colorOf(field.id);
-      const isPreset = value !== null && PRESET_COLOR_SET.has(value);
-      const isHex = value !== null && !isPreset;
-      const draft = hexDraftOf(field.id);
-      const hexValue = draft !== null ? draft : committedHexText(field.id);
-      const hexInvalid = draft !== null && draft.trim().length > 0 && !BIB_SET_HEX_PATTERN.test(draft.trim());
-      const wellValue = isHex ? value : (isPreset ? (BIB_SET_PRESET_WELL_HEX[value] || '#333333') : '#333333');
-      const valueText = value === null ? '默认'
-        : (isPreset ? (BIB_SET_PRESET_LABELS[value] || value) : value.toUpperCase());
-      rows.push(React.createElement('div', { key: field.id, className: 'bib-set-row' },
-        React.createElement('div', { className: 'bib-set-rowText' },
-          React.createElement('div', { className: 'bib-set-rowTitle' }, field.label),
-          React.createElement('div', { className: 'bib-set-rowDesc' }, '当前：' + valueText + (field.anchor === true ? '（身份锚点）' : ''))),
-        React.createElement('div', { className: 'bib-set-controls' },
-          bibSetPalette({
-            label: field.label + '的预设颜色',
-            value: value,
-            onSelect: function (next) { setColor(field.id, next); },
-          }),
-          React.createElement('label', { className: 'bib-set-well' },
-            React.createElement('input', {
-              type: 'color',
-              'aria-label': field.label + '的自定义颜色',
-              title: '自定义颜色（打开系统取色器）',
-              value: wellValue,
-              onChange: function (event) {
-                const picked = event && event.target ? event.target.value : null;
-                if (picked && BIB_SET_HEX_PATTERN.test(picked)) setColor(field.id, picked.toUpperCase());
-              },
-            })),
-          React.createElement('input', {
-            type: 'text',
-            className: 'bib-set-hex',
-            'aria-label': field.label + '的十六进制颜色',
-            'aria-invalid': hexInvalid ? 'true' : 'false',
-            'data-invalid': hexInvalid ? 'true' : 'false',
-            placeholder: '#RRGGBB',
-            spellCheck: false,
-            maxLength: 7,
-            value: hexValue,
-            onChange: function (event) { onHexChange(field.id, event && event.target ? event.target.value : ''); },
-            onBlur: function () { commitHex(field.id); },
-            onKeyDown: function (event) { if (event.key === 'Enter') { event.preventDefault(); commitHex(field.id); } },
-          }))));
-    }
-    colorChildren.push(React.createElement('div', { key: 'c-' + group },
-      React.createElement('div', { className: 'bib-set-group-title' }, FIELD_GROUP_LABELS[group] || group),
-      rows));
-  }
+      let row1 = null;
+      if (statsProj) {
+        // 每组：{ nodes: React 节点数组（数字用 num 加粗）, text: 纯文本（title 用）, fieldId: 字段 id（着色用） }
+        const ng = [];
+        function group(parts, hidden, fieldId) {
+          const nodesArr = [];
+          const texts = [];
+          function textOf(part) {
+            if (part == null) return '';
+            if (typeof part === 'string' || typeof part === 'number') return String(part);
+            if (Array.isArray(part)) return part.map(textOf).join('');
+            if (part.props && part.props['data-metric-text']) return part.props['data-metric-text'];
+            return part.props ? textOf(part.props.children) : '';
+          }
+          for (let i = 0; i < parts.length; i++) {
+            const p = parts[i];
+            if (typeof p === 'string') { nodesArr.push(p); texts.push(p); }
+            else if (Array.isArray(p)) { for (let j = 0; j < p.length; j++) nodesArr.push(p[j]); texts.push(textOf(p)); }
+            else { nodesArr.push(p); texts.push(textOf(p)); }
+          }
+          ng.push({ nodes: nodesArr, text: texts.join(''), hidden: !!hidden, fieldId: fieldId || null });
+        }
 
-  const feedback = [];
-  if (opError) feedback.push(React.createElement('p', { key: 'err', className: 'bib-set-alert', role: 'alert' }, opError));
-  else if (notice) feedback.push(React.createElement('p', { key: 'notice', className: 'bib-set-notice', role: 'status' }, notice));
-  else if (saving) feedback.push(React.createElement('p', { key: 'saving', className: 'bib-set-notice', 'aria-live': 'polite' }, '正在保存…'));
+        // v1.9.0 PR2：原生统计行字段按设置过滤（隐藏组完全不进 ng，不占版式也不进 title）
+        if (fieldVisible('turnsSteps')) {
+          // 中文界面遵循数字与汉字混排留白：数值与量词视觉上分开，便于快速扫读。
+          group([num(statsProj.turns + ' 轮'), ' · ', num(statsProj.steps + ' 步')], false, 'turnsSteps');
+        }
 
-  return React.createElement('div', { className: 'bib-set-root bib-settings' },
-    React.createElement('p', { className: 'bib-set-intro' },
-      '选择信息底栏显示哪些信息、为每个信息挑一个颜色。改动即时生效并自动保存，重启后仍然保留；隐藏信息不会删除任何记账数据。'),
-    React.createElement('section', { className: 'bib-set-card', 'aria-labelledby': 'bib-set-fields-title' },
-      React.createElement('div', { className: 'bib-set-card-header' },
-        React.createElement('h2', { id: 'bib-set-fields-title', className: 'bib-set-card-title' }, '显示字段'),
-        React.createElement('div', { className: 'bib-set-card-desc' },
-          '关闭的字段立刻从信息栏隐藏且不占位；「刷新失败」「账单未保存」等提示建议保留，方便发现数据异常。')),
-      React.createElement('div', { className: 'bib-set-body' }, groupsChildren)),
-    React.createElement('section', { className: 'bib-set-card', 'aria-labelledby': 'bib-set-colors-title' },
-      React.createElement('div', { className: 'bib-set-card-header' },
-        React.createElement('h2', { id: 'bib-set-colors-title', className: 'bib-set-card-title' }, '字段颜色'),
-        React.createElement('div', { className: 'bib-set-card-desc' },
-          '挑选预设色或用取色器、十六进制自定义；颜色会自动适配浅色与深色主题，保持可读。未改动前与现在的外观完全一致。')),
-      React.createElement('div', { className: 'bib-set-body' }, colorChildren)),
-    React.createElement('div', { className: 'bib-set-footer' },
-      feedback,
-      React.createElement('button', {
-        type: 'button', className: 'bib-set-btn', disabled: saving,
-        onClick: function () { runReset('fields'); },
-      }, '重置标签'),
-      React.createElement('button', {
-        type: 'button', className: 'bib-set-btn', disabled: saving,
-        onClick: function () { runReset('colors'); },
-      }, '重置颜色')));
-}
+        const durations = [];
+        if (statsProj.llmMs > 0 && fieldVisible('llmTime')) durations.push(fieldSpan('llmTime', 'durl', metric('LLM', formatDuration(statsProj.llmMs))));
+        if (statsProj.toolMs > 0 && fieldVisible('toolTime')) {
+          if (durations.length > 0) durations.push(' · ');
+          durations.push(fieldSpan('toolTime', 'durt', metric('工具调用', formatDuration(statsProj.toolMs))));
+        }
+        if (durations.length > 0) group(durations);
 
-// 注册入口：在信息栏 apply 完成后调用（见文件尾部的 module.exports 包装）。
-async function applyInfoBarSettingsSection(ctx) {
-  let slots = ctx.slots || (ctx.get ? ctx.get('slots') : undefined);
-  for (let i = 0; slots === undefined && i < 60; i++) {
-    await new Promise(function (resolve) { window.setTimeout(resolve, 300); });
-    slots = ctx.slots || (ctx.get ? ctx.get('slots') : undefined);
-  }
-  if (slots === undefined) {
-    console.warn('[dsh-bottom-info-bar] slots 服务 18s 内未就绪，信息底栏设置页未注册');
-    return;
-  }
-  ctx.effect(function () {
-    return bibSetInstallStyles();
-  }, 'dsh-bottom-info-bar: settings styles');
-  ctx.slots.inject('settings.section', function () {
-    return ctx.slots.register(
-      { name: 'settings.section', id: 'bottom-info-bar', order: 100, label: '信息底栏' },
-      InfoBarSettingsSection);
-  });
-}
+        const speeds = [];
+        if (statsProj.ttftSteps > 0) speeds.push(metric('首 token 平均', formatDuration(statsProj.ttftMs / statsProj.ttftSteps)));
+        if (statsProj.decodeMs > 0) speeds.push(' · ', num(formatTps(statsProj.decodeTokens / (statsProj.decodeMs / 1e3)) + ' tok/s'));
+        if (speeds.length > 0) group(speeds, HIDE_SPEED_FIELDS); // 不占可见版式，title 浮窗保留（官方隐藏字段，非用户可配）
 
-// ---- 设置页扩展：包装模块导出，在信息栏 apply 完成后注册 settings.section ----
-;(function () {
-  const baseExports = module.exports;
-  module.exports = {
-    inject: baseExports.inject,
-    apply: async function (ctx) {
-      await baseExports.apply(ctx);
-      await applyInfoBarSettingsSection(ctx);
-    },
-  };
-})();
+        if (usageProj && (billedInput(usageProj) > 0 || (usageProj.outputTokens || 0) > 0)) {
+          const denom = billedInput(usageProj);
+          const hit = denom > 0 ? Math.round(((usageProj.cacheReadTokens || 0) / denom) * 100) : null;
+          if (hit != null && fieldVisible('cacheHit')) group([metric('缓存命中', hit + '%')], false, 'cacheHit');
+          if (fieldVisible('tokensIO')) {
+            group([metric('输入', formatTokens(billedInput(usageProj)) + ' tok'), ' · ', metric('输出', formatTokens(usageProj.outputTokens || 0) + ' tok')], false, 'tokensIO');
+          }
+        }
+
+        const nativeLine = ng.map(function (g) { return g.text; }).join(' | ');
+        const ngNodes = [];
+        let visCount = 0;
+        for (let i = 0; i < ng.length; i++) {
+          if (ng[i].hidden) continue; // 隐藏分组不占版式（title 仍含其文本）
+          if (visCount > 0) ngNodes.push(React.createElement('span', { key: 'nsep' + i, className: 'bi-sep' }, '|'));
+          visCount++;
+          ngNodes.push(React.createElement('span', {
+            key: 'ng' + i,
+            'data-field': ng[i].fieldId || undefined,
+            style: ng[i].fieldId ? fieldStyle(ng[i].fieldId) : undefined,
+          }, ng[i].nodes));
+        }
+        // D6：原生组全部被隐藏（或全空）→ 原生行不渲染（不留空行/占位；hover 浮窗随之消失）
+        if (ngNodes.length === 0) row1 = null;
+        else row1 = React.createElement('div', { id: 'dsh-bottom-info-bar-native', className: 'bi-native-row', title: nativeLine }, ...ngNodes);
+      }
+
+      // D6 用户拍板：全部字段隐藏 = 底栏彻底移除——不渲染任何 DOM（无空行/占位高度/悬空分隔符），
+      // density 点击因无 DOM 而天然无副作用、不报错。两条路径：①配置层面所有字段都被关闭；
+      // ②渲染层面（数据条件导致）原生行/主行全空。
+      if (infoBarShouldRemoveAll(FIELD_REGISTRY, fieldVisible) || (row1 === null && nodes.length === 0)) {
+        return null;
+      }
+
+      const animatedRow1 = row1 === null ? null : React.createElement('div', { className: 'bi-density-extra' },
+        React.createElement('div', { className: 'bi-density-extra-inner' }, row1));
+      const rootCls = 'bi-root';
+      return React.createElement('div', {
+        className: rootCls,
+        onClick: function () { props.onToggleDensity(); },
+        onKeyDown: function (event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            props.onToggleDensity();
+          }
+        },
+        role: 'button',
+        tabIndex: 0,
+        'aria-labelledby': full && row1 !== null ? 'dsh-bottom-info-bar-native dsh-bottom-info-bar-primary' : 'dsh-bottom-info-bar-primary',
+        'aria-describedby': 'dsh-bottom-info-bar-action',
+        'aria-pressed': full,
+        'aria-busy': isDensitySaving,
+        'aria-disabled': isDensitySaving,
+        'data-density': displayDensity,
+        'data-density-saving': isDensitySaving,
+        title: isDensitySaving ? '正在保存切换…' : '单击切换 完整/简洁',
+      }, animatedRow1, row2,
+      React.createElement('span', { id: 'dsh-bottom-info-bar-action', className: 'bi-sr-only' },
+        full ? '按 Enter 或空格切换为简洁模式。' : '按 Enter 或空格切换为完整模式。'));
+    }
+  },
+};
 
 return module.exports;
 } });