dsh-bottom-info-bar 1.7.0 → 1.9.0

package/lib/client.js

@@ -25,6 +25,12 @@ const HIDE_SPEED_FIELDS = true;
 // RPC 超时兜底：host 侧 15s 超时之上再留余量；端点挂起时 20s 内必失败，杜绝永久"加载中…"
 const RPC_TIMEOUT_MS = 20000;
 
+// 首启强制刷新窗口：页面刚打开/用户手动刷新后的这几秒内，快照请求带 force=true，
+// host 会绕过缓存与失败退避当场重查服务商——用户刷新页面立即看到最新余额/额度，
+// 不必干等后台 60s 自动周期。覆盖窗口需容纳会话模型从空到确定的短暂翻转期。
+const BOOT_AT = Date.now();
+const FORCE_REFRESH_WINDOW_MS = 6000;
+
 // rpc(method, args, externalSignal)：
 // - 超时：20s 未响应 → abort 并以"请求超时"失败（fetch 挂起不阻塞界面）
 // - 可中止：传入外部 AbortSignal（组件卸载时 abort）→ 立即取消并拒绝"请求已取消"
@@ -88,6 +94,256 @@ function mergeLoadResults(prev, results) {
   return next;
 }
 
+// ---------- v1.9.0 PR2：字段显隐/颜色配置（宿主落盘，设置页变更后经 CustomEvent 即时同步） ----------
+// 字段注册表/预设色板由构建从 constants.js 注入（单一来源，宿主白名单同源）
+const FIELD_REGISTRY = [
+  // 插件字段 · 服务锚点（D6：与其他字段同等可隐藏）
+  { id: 'anchorGroup', label: '服务商与模型', group: 'plugin', modes: ['balance'], anchor: true, colorKind: 'provider', note: '当前对话使用的服务商与模型名，信息栏的身份锚点' },
+  { id: 'subServiceGroup', label: '订阅服务与模型', group: 'plugin', modes: ['subscription'], anchor: true, colorKind: 'provider', note: '订阅服务名（ChatGPT/Codex/OpenCode Go/智谱/小米 MiMo）与模型或套餐档位' },
+  { id: 'billingServiceGroup', label: '账单服务与模型', group: 'plugin', modes: ['billing'], anchor: true, colorKind: 'provider', note: '云账单服务名（Together/Fireworks/AWS Bedrock/Cloudflare）与模型名' },
+  // 插件字段 · 通用（多模式共用）
+  { id: 'sessionCost', label: '本会话花费', group: 'plugin', modes: ['balance', 'subscription'], colorKind: 'inherit', note: '当前会话（含子代理）的真实花费；新会话尚无记账时显示 ¥0.000，悬停可看今天/近一月/全部' },
+  // 插件字段 · 余额制
+  { id: 'balance', label: '余额', group: 'plugin', modes: ['balance'], colorKind: 'inherit', note: '服务商账户的真实余额；低余额时数字变红并带「低」字' },
+  { id: 'period', label: '定价时段', group: 'plugin', modes: ['balance'], colorKind: 'period', note: '仅峰谷价模型显示（当前为 DeepSeek 系列）：高峰价红色 / 空闲价绿色' },
+  { id: 'countdown', label: '时段切换倒计时', group: 'plugin', modes: ['balance'], colorKind: 'inherit', note: '仅峰谷价模型显示：距空闲/距高峰的小时计倒计时' },
+  // 插件字段 · 订阅制
+  { id: 'expiry', label: '订阅到期日', group: 'plugin', modes: ['subscription'], colorKind: 'inherit', note: '订阅登录凭据中带有到期信息时显示（如 Codex 套餐）' },
+  { id: 'subWindow5h', label: '5 小时额度窗口', group: 'plugin', modes: ['subscription'], colorKind: 'inherit', note: '5 小时滚动额度剩余百分比；简洁模式下仅显示时间最短的可用窗口' },
+  { id: 'subWindowWeek', label: '周额度窗口', group: 'plugin', modes: ['subscription'], colorKind: 'inherit', note: '每周额度剩余百分比；完整模式显示，简洁模式让位给更短窗口' },
+  { id: 'subWindowMonth', label: '月额度窗口', group: 'plugin', modes: ['subscription'], colorKind: 'inherit', note: '每月额度剩余百分比；完整模式显示，简洁模式让位给更短窗口' },
+  { id: 'resetCountdown', label: '额度重置倒计时', group: 'plugin', modes: ['subscription'], colorKind: 'inherit', note: '当前显示的额度窗口距重置的倒计时' },
+  { id: 'subBalance', label: '充值余额', group: 'plugin', modes: ['subscription'], colorKind: 'inherit', note: '订阅源为充值余额形态时显示（如智谱按量账户），与额度窗口互斥' },
+  // 插件字段 · 账单制
+  { id: 'billingSpend', label: '本月花费/用量', group: 'plugin', modes: ['billing'], colorKind: 'inherit', note: '云账单当前计费周期的真实花费或用量' },
+  { id: 'budget', label: '预算使用', group: 'plugin', modes: ['billing'], colorKind: 'inherit', note: '仅提供预算查询的服务商显示（当前为 AWS Bedrock）' },
+  { id: 'freeQuota', label: '免费额度与重置', group: 'plugin', modes: ['billing'], colorKind: 'inherit', note: '接口显式给出每日免费额度与重置时刻时才显示，绝不编造' },
+  // 原生字段（DeepSeek 原生底部栏原有；完整模式独占可见）
+  { id: 'turnsSteps', label: '轮次与步数', group: 'native', modes: ['native'], colorKind: 'inherit', note: '「N 轮 · M 步」对话进度统计' },
+  { id: 'llmTime', label: 'LLM 耗时', group: 'native', modes: ['native'], colorKind: 'inherit', note: '模型推理累计耗时' },
+  { id: 'toolTime', label: '工具调用耗时', group: 'native', modes: ['native'], colorKind: 'inherit', note: '工具调用累计耗时' },
+  { id: 'cacheHit', label: '缓存命中', group: 'native', modes: ['native'], colorKind: 'inherit', note: '提示词缓存命中率百分比' },
+  { id: 'tokensIO', label: '输入/输出 tokens', group: 'native', modes: ['native'], colorKind: 'inherit', note: '「输入 X tok · 输出 Y tok」本次会话累计用量' },
+  // 插件字段 · 状态与提醒（建议保留）
+  { id: 'unmapped', label: '未适配提示', group: 'plugin', modes: ['balance'], colorKind: 'muted', note: '当前服务商暂无余额查询适配时出现的弱提示' },
+  { id: 'noKeyHint', label: '未配置凭据提示', group: 'plugin', modes: ['balance'], suggestKeep: true, colorKind: 'alert', note: '缺少 API Key 时的设置引导文案' },
+  { id: 'balanceError', label: '余额获取/刷新失败提示', group: 'plugin', modes: ['balance'], suggestKeep: true, colorKind: 'alert', note: '余额查询失败或正在显示上次数据时的提示' },
+  { id: 'usageError', label: '花费获取失败提示', group: 'plugin', modes: ['balance', 'subscription'], suggestKeep: true, colorKind: 'alert', note: '花费数据暂时不可用时的提示' },
+  { id: 'refreshFailure', label: '刷新失败提示', group: 'plugin', modes: ['balance', 'subscription', 'billing'], suggestKeep: true, colorKind: 'alert', note: '任一数据源降级时在行尾合并显示的一个提醒（多个来源自动去重）' },
+  { id: 'persistWarning', label: '账单未保存提醒', group: 'plugin', modes: ['balance', 'subscription', 'billing'], suggestKeep: true, colorKind: 'alert', note: '账本落盘异常时出现；隐藏后金额可能悄悄不准，建议保留' },
+  { id: 'updateNotice', label: '新版本提醒', group: 'plugin', modes: ['balance', 'subscription', 'billing'], suggestKeep: true, colorKind: 'alert', note: 'npm 上有新版本时提醒更新' },
+];
+const PRESET_COLORS = ['red', 'green', 'blue', 'purple', 'orange', 'neutral'];
+const PRESET_COLOR_SET = new Set(PRESET_COLORS);
+
+let fieldConfig = { fields: {}, colors: {} };
+let fieldConfigVersion = 0;
+let fieldConfigServerVersion = -1; // 宿主 configVersion（-1=尚未取得）；过期响应据此丢弃（D3）
+const fieldConfigListeners = new Set();
+let fieldConfigInFlight = false;
+let fieldConfigRefetchPending = false; // 在途期间收到刷新请求（如设置页 CustomEvent）→ 当前响应落地后立即补拉（D3）
+
+function applyFieldConfigSnapshot(next) {
+  fieldConfig = {
+    fields: next && next.fields && typeof next.fields === 'object' ? next.fields : {},
+    colors: next && next.colors && typeof next.colors === 'object' ? next.colors : {},
+  };
+  fieldConfigVersion += 1;
+  fieldConfigListeners.forEach(function (listener) { listener(); });
+}
+
+// 版本守卫（纯函数，供单测）：只有严格更新的快照才应用。
+// - incoming 缺失（旧宿主无 configVersion）→ 接受，兼容不阻断；
+// - 尚未应用过任何快照（applied < 0）→ 接受；
+// - 相同版本不重复应用（宿主每次变更必 +1，同版本即同内容，省去 30s 轮询的无谓重渲染）；
+// - 过期响应（incoming < applied）→ 拒绝，绝不回退用户刚保存的配置。
+// 注：宿主重启必然伴随 dsh web 重启与页面重载，客户端版本号随之重置，不存在版本回退场景。
+function fieldConfigSnapshotIsNewer(incomingVersion, appliedVersion) {
+  if (typeof incomingVersion !== 'number') return true;
+  if (!(appliedVersion >= 0)) return true;
+  return incomingVersion > appliedVersion;
+}
+
+// 宿主把配置常驻内存缓存，拉取即回；在途去重避免 30s 轮询叠加请求。
+// D3：在途期间的新刷新请求（设置页 CustomEvent）记为 pending，当前响应落地后立即补拉，
+// 配合版本守卫——过期响应直接丢弃——保证刚保存的配置最迟一次往返内生效，绝不被旧响应覆盖。
+function refreshFieldConfig() {
+  if (fieldConfigInFlight) { fieldConfigRefetchPending = true; return; }
+  fieldConfigInFlight = true;
+  rpc('getFieldConfig').then(function (cfg) {
+    fieldConfigInFlight = false;
+    if (cfg && typeof cfg === 'object') {
+      const incoming = typeof cfg.configVersion === 'number' ? cfg.configVersion : null;
+      if (fieldConfigSnapshotIsNewer(incoming, fieldConfigServerVersion)) {
+        if (incoming !== null) fieldConfigServerVersion = incoming;
+        applyFieldConfigSnapshot(cfg);
+      }
+      // 过期/相同版本响应：直接丢弃，不触发重渲染
+    }
+    if (fieldConfigRefetchPending) { fieldConfigRefetchPending = false; refreshFieldConfig(); }
+  }).catch(function () {
+    fieldConfigInFlight = false;
+    if (fieldConfigRefetchPending) { fieldConfigRefetchPending = false; refreshFieldConfig(); }
+  });
+}
+
+// 未知/缺省 id 一律视为显示：与历史行为一致（默认值全部=显示），前向兼容新字段
+function fieldVisible(id) {
+  return fieldConfig.fields[id] !== false;
+}
+
+function fieldColor(id) {
+  const value = fieldConfig.colors[id];
+  return typeof value === 'string' && value.length > 0 ? value : null;
+}
+
+// 深色主题下把自定义 hex 向白色混合 45%，避免深底上不可读；预设色名走三套主题变量，无需处理
+function readableDarkVariant(hex) {
+  const value = parseInt(hex.slice(1), 16);
+  function mix(channel) { return Math.round(channel + (255 - channel) * 0.45); }
+  const r = mix((value >> 16) & 255);
+  const g = mix((value >> 8) & 255);
+  const b = mix(value & 255);
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+}
+
+// WCAG 相对亮度（对比度计算用，纯函数供单测）
+function hexLuminance(value) {
+  function linear(channel) {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  }
+  return 0.2126 * linear((value >> 16) & 255) + 0.7152 * linear((value >> 8) & 255) + 0.0722 * linear(value & 255);
+}
+
+// 浅色主题钳制（D2）：自定义 hex 对白底对比度 < 4.5:1 时逐级向黑混合（每步 5%，至多 95%），
+// 直到可读；本就可读的颜色原样返回（大写规范化）。深浅两套变量由此始终各自可读。
+function readableLightVariant(hex) {
+  const value = parseInt(hex.slice(1), 16);
+  if (1.05 / (hexLuminance(value) + 0.05) >= 4.5) return hex.toUpperCase();
+  for (let step = 1; step <= 19; step++) {
+    const keep = 1 - step * 0.05;
+    const r = Math.round(((value >> 16) & 255) * keep);
+    const g = Math.round(((value >> 8) & 255) * keep);
+    const b = Math.round((value & 255) * keep);
+    const candidate = (r << 16) | (g << 8) | b;
+    if (step === 19 || 1.05 / (hexLuminance(candidate) + 0.05) >= 4.5) {
+      return '#' + candidate.toString(16).padStart(6, '0').toUpperCase();
+    }
+  }
+  return hex.toUpperCase();
+}
+
+// 字段已自定义颜色时返回要注入的 CSS 变量；未自定义返回 undefined → 变量不存在 → 完全沿用现有颜色（零回归）
+// 浅色默认层取浅色钳制变体（--bi-field-<id>），深色覆盖层取向白加亮变体（--bi-field-<id>-dark）
+function fieldStyle(id) {
+  const color = fieldColor(id);
+  if (!color) return undefined;
+  const style = {};
+  if (PRESET_COLOR_SET.has(color)) {
+    style['--bi-field-' + id] = 'var(--bi-palette-' + color + ')';
+    return style;
+  }
+  style['--bi-field-' + id] = readableLightVariant(color);
+  style['--bi-field-' + id + '-dark'] = readableDarkVariant(color);
+  return style;
+}
+
+// 字段级颜色 CSS 生成：回退值=各字段原语义色，未自定义时渲染结果与旧版一致。
+// 深色主题规则用更高优先级选择器优先取 hex 加亮变体（--bi-field-<id>-dark；预设色名无该变量时自然回落）。
+function buildFieldColorCss() {
+  const rules = [];
+  for (let i = 0; i < FIELD_REGISTRY.length; i++) {
+    const field = FIELD_REGISTRY[i];
+    const id = field.id;
+    const kind = field.colorKind;
+    const attr = '[data-field="' + id + '"]';
+    let pairs;
+    if (kind === 'alert') {
+      pairs = [
+        ['.bi-root ' + attr + '.bi-err', 'var(--bi-state-alert)'],
+        ['.bi-root ' + attr + '.bi-stale', 'var(--bi-state-alert)'],
+        ['.bi-root ' + attr + '.bi-update', 'var(--bi-state-alert)'],
+      ];
+    } else if (kind === 'period') {
+      pairs = [
+        ['.bi-root ' + attr + '.bi-peak', 'var(--bi-state-alert)'],
+        ['.bi-root ' + attr + '.bi-offpeak', 'var(--bi-state-price-low)'],
+      ];
+    } else if (kind === 'provider') {
+      pairs = [
+        ['.bi-root ' + attr, 'inherit'],
+        ['.bi-root ' + attr + ' .bi-model-provider', 'var(--bi-label-primary)'],
+      ];
+    } else if (kind === 'muted') {
+      pairs = [['.bi-root ' + attr, 'var(--bi-label-supporting)']];
+    } else {
+      pairs = [['.bi-root ' + attr, 'inherit']];
+    }
+    for (let j = 0; j < pairs.length; j++) {
+      const selector = pairs[j][0];
+      const fallback = pairs[j][1];
+      const light = 'var(--bi-field-' + id + ', ' + fallback + ')';
+      const dark = 'var(--bi-field-' + id + '-dark, ' + light + ')';
+      rules.push(selector + ' { color: ' + light + '; }');
+      rules.push('body[data-ds-dark-theme] ' + selector + ' { color: ' + dark + '; }');
+    }
+  }
+  return rules.join('\n');
+}
+const FIELD_COLOR_CSS = buildFieldColorCss();
+// 订阅窗口 key → 字段 id（简洁模式只显示优先窗口的既有逻辑保持不变，只叠加显隐过滤）
+const WINDOW_FIELD_IDS = { five_hour: 'subWindow5h', seven_day: 'subWindowWeek', monthly: 'subWindowMonth' };
+function windowFieldVisible(key) {
+  const id = WINDOW_FIELD_IDS[key];
+  return id ? fieldVisible(id) : true;
+}
+
+// 降级节点现在包着 data-field 容器（fieldSpan 着色），文案要穿透一层包装再读
+function trailingErrorText(node) {
+  let current = node;
+  for (let depth = 0; depth < 3 && current && current.props; depth++) {
+    const child = current.props.children;
+    if (typeof child === 'string') return child;
+    current = child;
+  }
+  return '';
+}
+
+// 行组装（模块级纯函数，createElement 注入以便单测用桩验证分隔符收合与全隐藏零输出）：
+// 居中组之间插一个分隔符；尾部错误组多来源「刷新失败」去重后逐个接在右侧，
+// 分隔符只在已有内容之后出现——全空输入返回空数组（D6：零节点/零分隔符）。
+function assembleInfoBarRow(groups, trailingErrorGroups, createElement) {
+  const nodes = [];
+  for (let i = 0; i < groups.length; i++) {
+    if (i > 0) nodes.push(createElement('span', { key: 'sep' + i, className: 'bi-sep' }, '|'));
+    nodes.push(createElement('span', { key: 'g' + i }, groups[i]));
+  }
+  const seenRefreshFailure = { value: false };
+  const visibleErrors = trailingErrorGroups.filter(function (node) {
+    const text = trailingErrorText(node);
+    if (text !== '刷新失败') return true;
+    if (seenRefreshFailure.value) return false;
+    seenRefreshFailure.value = true;
+    return true;
+  });
+  for (let i = 0; i < visibleErrors.length; i++) {
+    if (groups.length > 0 || i > 0) nodes.push(createElement('span', { key: 'errsep' + i, className: 'bi-sep' }, '|'));
+    nodes.push(createElement('span', { key: 'err' + i }, visibleErrors[i]));
+  }
+  return nodes;
+}
+
+// D6 用户拍板：全部字段隐藏 = 底栏彻底移除。此判定为纯函数供单测：
+// 注册表内没有任何可见字段，或渲染结果（原生行/主行/错误组）全空 → 信息栏整体不渲染，
+// 不留空行、占位高度或悬空分隔符；density 点击因无 DOM 而天然无副作用。
+function infoBarShouldRemoveAll(registry, isVisible) {
+  for (let i = 0; i < registry.length; i++) {
+    if (isVisible(registry[i].id)) return false;
+  }
+  return registry.length > 0;
+}
+
 function installStyles() {
   const id = 'dsh-bottom-info-bar';
   const existing = document.querySelector('style[data-plugin-css="' + id + '"]');
@@ -146,6 +402,12 @@ function installStyles() {
       .bi-model-capability-pending { visibility: hidden; }
       /* 读屏说明不参与视觉排版。 */
       .bi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+      /* v1.9.0 PR2 预设色板：浅色默认 → 深色覆盖 → 增强对比三套成对（与现有语义色同一套规则）；设置页共用 .bib-set-root 取同一色板 */
+      .bi-root, .bib-set-root { --bi-palette-red: #d92d20; --bi-palette-green: #087f5b; --bi-palette-blue: #0044cc; --bi-palette-purple: #6941c6; --bi-palette-orange: #b54708; --bi-palette-neutral: var(--dsw-alias-label-primary, var(--bi-label-primary, #333)); }
+      body[data-ds-dark-theme] .bi-root, body[data-ds-dark-theme] .bib-set-root { --bi-palette-red: #ff6961; --bi-palette-green: #86efac; --bi-palette-blue: #66a3ff; --bi-palette-purple: #b19cf7; --bi-palette-orange: #fdb022; }
+      @media (prefers-contrast: more) { body:not([data-ds-dark-theme]) .bi-root, body:not([data-ds-dark-theme]) .bib-set-root { --bi-palette-red: #ad1717; --bi-palette-green: #05603a; --bi-palette-blue: #003399; --bi-palette-purple: #4a1fb8; --bi-palette-orange: #7a2e0e; } body[data-ds-dark-theme] .bi-root, body[data-ds-dark-theme] .bib-set-root { --bi-palette-red: #ff7770; --bi-palette-blue: #80b3ff; --bi-palette-purple: #c9b8ff; --bi-palette-orange: #ffcc80; } }
+      /* 字段级颜色消费规则由注册表生成，拼接在样式表顶层（任何环境生效）——严禁并入上方 @media 块（D1 回归警戒） */
+` + FIELD_COLOR_CSS + `
     `;
   document.head.appendChild(style);
   return function () { style.remove(); };
@@ -235,6 +497,16 @@ module.exports = {
       }
     } catch (err) { /* 默认完整 */ }
 
+    // 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 BottomInfoBar(props) {
       // 原生/会话投影（hooks 无条件调用）
@@ -268,6 +540,17 @@ module.exports = {
         };
       }, []);
 
+      // 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;
+
       // 当前会话 ID 多路获取：slotProps 标准 kit → session 快照 → 运行时 sessions 服务
       // （DSH 各版本注入方式不同，任一路可用即拿到真实会话 ID，避免回退到上一会话的账）
       const propsRef = React.useRef(props);
@@ -340,14 +623,19 @@ module.exports = {
       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 } : null, signal),
+          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),
@@ -598,91 +886,125 @@ module.exports = {
         );
       }
 
+      // 字段包装：带 data-field 与（可选）颜色变量的容器 span，供 CSS 按字段着色（未自定义时变量不存在，零回归）
+      function fieldSpan(id, key, children) {
+        return React.createElement('span', { key: key, 'data-field': id, style: fieldStyle(id) }, children);
+      }
+
       // ---- 余额制模式（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);
-        groups.push(providerGroup());
+        if (fieldVisible('anchorGroup')) {
+          const anchor = providerGroup();
+          groups.push(React.cloneElement(anchor, { 'data-field': 'anchorGroup', style: fieldStyle('anchorGroup') }));
+        }
 
         // v1.6 T7：未适配账户渲染"未适配"弱提示
         if (bal && bal.unmapped) {
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-muted', key: 'unmapped', title: '该服务商暂未适配余额查询，后续版本将支持。' }, '未适配'));
+          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') {
-          const credName = bal.error.message ? String(bal.error.message).replace('未配置 ', '') : 'API_KEY';
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-err', key: 'nokey', title: '未配置 ' + credName + '。请在"设置 → 模型"中填写。' },
-            '未配置 ' + credName + ' → 设置→模型 填写'));
+          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);
-          groups.push(React.createElement('span', { key: 'bal', 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,
-          ));
+          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 (bal.error || errors.balance) {
-            trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'balerr', title: '余额暂不可用；正在显示上次数据并自动重试。' }, '刷新失败'));
+          if (fieldVisible('balanceError') && (bal.error || errors.balance)) {
+            trailingErrorGroups.push(fieldSpan('balanceError', 'balerr',
+              React.createElement('span', { className: 'bi-stale', title: '余额暂不可用；正在显示上次数据并自动重试。' }, '刷新失败')));
           }
         } else if (bal && bal.error) {
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-err', key: 'berr', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败'));
+          if (fieldVisible('balanceError')) {
+            trailingErrorGroups.push(fieldSpan('balanceError', 'berr',
+              React.createElement('span', { className: 'bi-err', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败')));
+          }
         } else if (errors.balance) {
           // 本次 RPC 失败且无旧数据：只降级余额块，其余端点数据照常渲染
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-err', key: 'berr', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败'));
+          if (fieldVisible('balanceError')) {
+            trailingErrorGroups.push(fieldSpan('balanceError', 'berr',
+              React.createElement('span', { className: 'bi-err', title: '余额获取失败。请检查网络和 API Key。' }, '余额获取失败')));
+          }
         }
 
         // 时段：仅峰谷价服务商显示"高峰价/空闲价"（flat/unknown 服务商不显示；hover 展示具体价格）
         const pr = visiblePricing;
-        if (pr && pr.mode === 'peak-valley') {
+        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(React.createElement('span', { key: 'period', className: peakNow ? 'bi-peak' : 'bi-offpeak', title: periodTitle },
-            peakNow ? '高峰价' : '空闲价'));
+          groups.push(fieldSpan('period', 'period', React.createElement('span', { className: peakNow ? 'bi-peak' : 'bi-offpeak', title: periodTitle },
+            peakNow ? '高峰价' : '空闲价')));
         }
 
         // 倒计时：仅峰谷价服务商显示"距高峰/距空闲"（hover 展示下次切换时刻；数字加粗）
-        if (pr && pr.mode === 'peak-valley' && pr.nextSwitch) {
+        if (pr && pr.mode === 'peak-valley' && pr.nextSwitch && fieldVisible('countdown')) {
           const peakNow = pr.period === 'peak';
           const countdownTitle = '北京时间 ' + pr.nextSwitch.atLabel + ' 切换为' + (peakNow ? '空闲价' : '高峰价') + '。';
-          groups.push(React.createElement('span', { key: 'countdown', title: countdownTitle },
-            metric('距' + (peakNow ? '空闲' : '高峰'), fmtCountdown(pr.nextSwitch.at - now))));
+          groups.push(fieldSpan('countdown', 'countdown', React.createElement('span', { title: countdownTitle },
+            metric('距' + (peakNow ? '空闲' : '高峰'), fmtCountdown(pr.nextSwitch.at - now)))));
         }
 
-        // 本会话花费（只显示钱；hover 浮窗显示 本会话（含子代理）+ 今天 / 近一月 / 全部；金额数字加粗）
+        // 本会话花费（公共小部件 pushSessionCost：只显示钱；hover 显示 今天/近一月/全部）
         // 始终显示：新会话/对话刚开始尚无记账时显示 ¥0.000，hover 仍可查看持久化的 今天/近一月/全部
+        pushSessionCost(groups, trailingErrorGroups, !!(bal && bal.currency === 'USD'));
+      }
+
+      // 本会话花费块（余额制 与 订阅·充值余额 形态共用的小部件）：
+      // 只显示钱；hover 浮窗显示 含子代理说明 + 今天 / 近一月 / 全部；金额数字加粗。
+      // usdSymbol：账户币种为美元时，hover 汇总行用 $ 前缀（本会话单值仍按其真实计价币种）
+      function pushSessionCost(groups, trailingErrorGroups, usdSymbol) {
         const usg = state.usage;
+        const errs = state.errors || {};
         if (usg) {
-          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 zeroTxt = (bal && bal.currency === 'USD' ? '$' : '¥') + (0).toFixed(3);
-          const costTxt = costCNY != null ? '¥' + costCNY.toFixed(3)
-            : (costUSD != null ? '$' + costUSD.toFixed(3) : zeroTxt);
-          const symbol = bal && bal.currency === 'USD' ? '$' : '¥';
-          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(' · ');
-          // v1.7 发布前微调：hover 明确标注"含子代理"——本会话聚合同账户所有记录（同起点后）
-          groups.push(React.createElement('span', { key: 'convo',
-            title: '本会话 ' + costTxt + '（含子代理）' + (detail ? '\n' + detail : '') },
-            metric('本会话', costTxt)));
-        } else if (errors.usage) {
-          // 本次 RPC 失败且无旧数据：只降级花费块，其余端点数据照常渲染
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-err', key: 'usageerr', title: '花费暂不可用；不会影响对话。' }, '花费获取失败'));
+          // 隐藏不占位（错误提示属于独立字段 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: '花费暂不可用；不会影响对话。' }, '花费获取失败')));
         }
       }
 
-      // ---- 订阅制模式（互斥替换余额制版，row2 只三类信息）：
-      //      订阅服务+模型 → 三窗口额度 → 距重置倒计时（最紧窗口）；余额/时段/花费/token 均不显示 ----
+      // ---- 订阅制模式（互斥替换余额制版）：
+      //      套餐额度型：订阅服务+模型 → 三窗口额度 → 距重置倒计时（余额/时段/花费/token 不显示）
+      //      充值余额型（如智谱按量账户，windows 空且有 sub.balance）：服务商+模型 → 余额 → 本会话花费 ----
        function subscriptionFailureHint(error, source) {
          const kind = error && error.kind;
          const serviceName = subscriptionServiceName(source);
@@ -699,31 +1021,58 @@ module.exports = {
        }
 
        function pushSubscriptionGroups(groups, trailingErrorGroups) {
-        groups.push(subscriptionProviderGroup());
+        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) {
-          groups.push(React.createElement('span', { key: 'subexp', title: '订阅到期：' + formatDate(sub.expiryAt) + '（本地时区）' },
-            metric('到期', formatDate(sub.expiryAt))));
+        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) {
+          if (errors.sub && fieldVisible('refreshFailure')) {
             // 本次 RPC 失败且无旧数据：显示失败信息而非永久"加载中…"
-            trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'suberr', title: subscriptionFailureHint({ kind: 'exception', message: String(errors.sub) }, visibleBillingMode && visibleBillingMode.provider) }, '刷新失败'));
+            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';
+          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) {
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'substale', title: subscriptionFailureHint(sub.error, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败'));
+          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 小时窗口）→ 跳过窗口组，不占位、不报错
@@ -739,10 +1088,10 @@ module.exports = {
                 return pa - pb;
               })[0]
             : null;
-          
+
           // 完整模式显示全部窗口；简洁模式只显示选中的那个窗口
           const visible = full ? windows : (displayWindow ? [displayWindow] : []);
-          
+
           // 预警触发条件：已用 ≥80%（= 剩余 ≤20%）→ 鲜红色文字；正常额度使用中性文字。
           const LOW_QUOTA_PERCENT = 20;
           const titleLines = ['订阅源：' + subscriptionServiceName(visibleBillingMode && visibleBillingMode.provider) + (sub.plan ? '（' + sub.plan + '）' : '')]
@@ -756,20 +1105,26 @@ module.exports = {
             if (i > 0) winNodes.push(' · ');
             const remaining = remainingPercent(w);
             const numberClass = remaining <= LOW_QUOTA_PERCENT ? 'bi-quota-low' : '';
-            winNodes.push(metric(compactWindowLabel(w.key), remaining + '%', numberClass));
+            // 每个窗口独立 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' }, '低'));
           }
-          groups.push(React.createElement('span', { key: 'subwin', title: titleLines.join('\n') }, ...winNodes));
+          // 全部窗口被隐藏（或紧凑模式无候选）→ 整组不推送，分隔符由组装层正确收合
+          if (winNodes.length > 0) {
+            groups.push(React.createElement('span', { key: 'subwin', title: titleLines.join('\n') }, ...winNodes));
+          }
           // host 快照失败（sub.error）或本次 RPC 失败（errors.sub）→ 均保留旧数据 + 降级标记
-          if (sub.error || errors.sub) {
-            trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'substale', title: subscriptionFailureHint(sub.error || { kind: 'exception', message: String(errors.sub || '') }, sub.source || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败'));
+          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) {
+          if (displayWindow && displayWindow.resetsAt && fieldVisible('resetCountdown')) {
             const cdTitle = displayWindow.label + '窗口 剩余 ' + remainingPercent(displayWindow)
               + '%（已用 ' + displayWindow.usedPercent + '%） · 重置 ' + formatDateTime(displayWindow.resetsAt);
-            groups.push(React.createElement('span', { key: 'subcd', title: cdTitle },
-              metric('距重置', fmtResetCountdown(displayWindow.resetsAt - now))));
+            groups.push(fieldSpan('resetCountdown', 'subcd', React.createElement('span', { title: cdTitle },
+              metric('距重置', fmtResetCountdown(displayWindow.resetsAt - now)))));
           }
         }
       }
@@ -789,19 +1144,26 @@ module.exports = {
       }
 
       function pushBillingGroups(groups, trailingErrorGroups) {
-        groups.push(billingProviderGroup());
+        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) {
-            trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'billerr', title: billingFailureHint({ kind: 'exception', message: String(errors.billing) }, visibleBillingMode && visibleBillingMode.provider) }, '刷新失败'));
+          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) {
-          trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'billstale', title: billingFailureHint(bill.error, bill.type || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败'));
+          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) {
@@ -811,17 +1173,28 @@ module.exports = {
             .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) nodes.push(metric('本月', symbol + fmt(d.currentPeriodSpend, 2)));
-          else if (d.usage != null) nodes.push(metric('本月用量', fmt(d.usage, 2) + (d.usageUnit ? ' ' + d.usageUnit : '')));
-          if (d.budgetPercent != null) nodes.push(' · ', metric('预算', fmt(d.budgetPercent, 0) + '%'));
+          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) {
-            nodes.push(' · ', metric('免费', fmt(d.freeRemaining, 0) + ' · 距重置 ' + fmtResetCountdown(d.resetsAt - now)));
+          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))));
           }
-          groups.push(React.createElement('span', { key: 'bill', title: titleLines.join('\n') }, ...nodes));
-          if (bill.error || errors.billing) {
-            trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'billstale', title: billingFailureHint(bill.error || { kind: 'exception', message: String(errors.billing || '') }, bill.type || (visibleBillingMode && visibleBillingMode.provider)) }, '刷新失败'));
+          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)) }, '刷新失败')));
           }
         }
       }
@@ -872,53 +1245,37 @@ module.exports = {
       if (errors.billingMode) failedLabels.push('模式');
       if (errors.sub) failedLabels.push('订阅额度');
       if (errors.billing) failedLabels.push('账单');
-      if (failedLabels.length > 0) {
-        trailingErrorGroups.push(React.createElement('span', { className: 'bi-stale', key: 'degraded',
-          title: failedLabels.join('、') + '暂不可用；正在保留上次数据并自动重试。' }, '刷新失败'));
+      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') {
+      if (persistence && persistence.state && persistence.state !== 'ok' && fieldVisible('persistWarning')) {
         const snapshotOnly = persistence.state === 'snapshot-stale';
-        trailingErrorGroups.push(React.createElement('span', {
-          className: snapshotOnly ? 'bi-stale' : 'bi-err', key: 'ledger-save',
+        trailingErrorGroups.push(fieldSpan('persistWarning', 'ledger-save', React.createElement('span', {
+          className: snapshotOnly ? 'bi-stale' : 'bi-err',
           title: snapshotOnly
             ? '账单流水已保存，但可直接查看的账单文件暂未更新：' + (persistence.message || '未知原因')
             : '本次账单未保存，不会计入金额：' + (persistence.message || '未知原因'),
-        }, snapshotOnly ? '账单待整理' : '账单未保存'));
+        }, snapshotOnly ? '账单待整理' : '账单未保存')));
       }
 
-       if (updateInfo && updateInfo.available === true) {
-         groups.push(React.createElement('span', {
-           className: 'bi-update', key: 'update', title: '请告知你的 Agent 将本插件更新到“' + updateInfo.latest + '”版本。',
-       }, '新版本提醒'));
+       if (updateInfo && updateInfo.available === true && fieldVisible('updateNotice')) {
+         groups.push(fieldSpan('updateNotice', 'update', React.createElement('span', {
+           className: 'bi-update', title: '请告知你的 Agent 将本插件更新到“' + updateInfo.latest + '”版本。',
+       }, '新版本提醒')));
        }
 
-       // ---- 组装 ----
-      const sepNodes = [];
-      const nodes = [];
-      for (let i = 0; i < groups.length; i++) {
-        if (i > 0) nodes.push(React.createElement('span', { key: 'sep' + i, className: 'bi-sep' }, '|'));
-        nodes.push(React.createElement('span', { key: 'g' + i }, groups[i]));
-      }
-      const seenRefreshFailure = { value: false };
-      const visibleErrors = trailingErrorGroups.filter(function (node) {
-        const text = node && node.props ? node.props.children : '';
-        if (text !== '刷新失败') return true;
-        if (seenRefreshFailure.value) return false;
-        seenRefreshFailure.value = true;
-        return true;
-      });
-      for (let i = 0; i < visibleErrors.length; i++) {
-        if (groups.length > 0 || i > 0) nodes.push(React.createElement('span', { key: 'errsep' + i, className: 'bi-sep' }, '|'));
-        nodes.push(React.createElement('span', { key: 'err' + i }, visibleErrors[i]));
-      }
-      const row2 = React.createElement('div', { id: 'dsh-bottom-info-bar-primary', className: 'bi-row2' }, ...nodes);
+       // ---- 组装（分隔符收合与「刷新失败」去重见模块级 assembleInfoBarRow） ----
+       const nodes = assembleInfoBarRow(groups, trailingErrorGroups, React.createElement);
+       const row2 = React.createElement('div', { id: 'dsh-bottom-info-bar-primary', className: 'bi-row2' }, ...nodes);
 
       let row1 = null;
       if (statsProj) {
-        // 每组：{ nodes: React 节点数组（数字用 num 加粗）, text: 纯文本（title 用） }
+        // 每组：{ nodes: React 节点数组（数字用 num 加粗）, text: 纯文本（title 用）, fieldId: 字段 id（着色用） }
         const ng = [];
-        function group(parts, hidden) {
+        function group(parts, hidden, fieldId) {
           const nodesArr = [];
           const texts = [];
           function textOf(part) {
@@ -934,27 +1291,35 @@ module.exports = {
             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 });
+          ng.push({ nodes: nodesArr, text: texts.join(''), hidden: !!hidden, fieldId: fieldId || null });
         }
 
-        // 中文界面遵循数字与汉字混排留白：数值与量词视觉上分开，便于快速扫读。
-        group([num(statsProj.turns + ' 轮'), ' · ', num(statsProj.steps + ' 步')]);
+        // v1.9.0 PR2：原生统计行字段按设置过滤（隐藏组完全不进 ng，不占版式也不进 title）
+        if (fieldVisible('turnsSteps')) {
+          // 中文界面遵循数字与汉字混排留白：数值与量词视觉上分开，便于快速扫读。
+          group([num(statsProj.turns + ' 轮'), ' · ', num(statsProj.steps + ' 步')], false, 'turnsSteps');
+        }
 
         const durations = [];
-        if (statsProj.llmMs > 0) durations.push(metric('LLM', formatDuration(statsProj.llmMs)));
-        if (statsProj.toolMs > 0) durations.push(' · ', metric('工具调用', formatDuration(statsProj.toolMs)));
+        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);
 
         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 浮窗保留
+        if (speeds.length > 0) group(speeds, HIDE_SPEED_FIELDS); // 不占可见版式，title 浮窗保留（官方隐藏字段，非用户可配）
 
         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) group([metric('缓存命中', hit + '%')]);
-          group([metric('输入', formatTokens(billedInput(usageProj)) + ' tok'), ' · ', metric('输出', formatTokens(usageProj.outputTokens || 0) + ' tok')]);
+          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(' | ');
@@ -964,9 +1329,22 @@ module.exports = {
           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 }, ng[i].nodes));
+          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));
         }
-        row1 = React.createElement('div', { id: 'dsh-bottom-info-bar-native', className: 'bi-native-row', title: nativeLine }, ...ngNodes);
+        // 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' },
@@ -998,5 +1376,488 @@ module.exports = {
   },
 };
 
+// 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';
+
+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('、') : '';
+}
+
+function bibSetDispatchChanged() {
+  // 设置页保存成功后广播：信息栏监听并立即重拉配置（宿主内存缓存，即回）
+  try { document.dispatchEvent(new CustomEvent(BIB_SET_EVENT)); } catch (err) { /* 事件总线不可用时静默：30s 周期校准兜底 */ }
+}
+
+function bibSetOperationMessage(err) {
+  return String((err && err.message) || err || '请稍后再试');
+}
+
+// ---------- 设置页样式（融入 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(); };
+}
+
+// ---------- 控件 ----------
+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' })));
+}
+
+// 色板圆点组：默认 + 预设色名；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);
+}
+
+// ---------- 页面组件 ----------
+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);
+
+  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; };
+  }, []);
+
+  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);
+  }, []);
+
+  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 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; }
+
+  // 服务端快照回写（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 || '未知原因'));
+  }
+
+  // 乐观更新 + 失败回退（参照 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 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) + '」');
+  }
+
+  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) + '」颜色');
+  }
+
+  // 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());
+  }
+
+  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));
+    });
+  }
+
+  // ---- 渲染 ----
+  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));
+  }
+
+  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));
+  }
+
+  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' }, '正在保存…'));
+
+  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'); },
+      }, '重置颜色')));
+}
+
+// 注册入口：在信息栏 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);
+  });
+}
+
+// ---- 设置页扩展：包装模块导出，在信息栏 apply 完成后注册 settings.section ----
+;(function () {
+  const baseExports = module.exports;
+  module.exports = {
+    inject: baseExports.inject,
+    apply: async function (ctx) {
+      await baseExports.apply(ctx);
+      await applyInfoBarSettingsSection(ctx);
+    },
+  };
+})();
+
 return module.exports;
 } });