dsh-model-pool 0.0.0-stage → 0.1.0

package/client.js

@@ -0,0 +1,2847 @@
+/**
+ * dsh-model-pool — Client half.
+ *
+ * One Settings section (`settings.section`, id `model-pool`, order 45) that
+ * edits the pool's strategy and failover behaviour and shows the aggregated
+ * model pool with per-route health.
+ *
+ * Reads come from this bundle's own HTTP routes (`GET /state`,
+ * `POST /refresh`, `POST /reset-health`). Writes go through the browser's
+ * `configForms` service — the sanctioned settings path — never through HTTP.
+ *
+ * Hand-written ModuleLoader bundle: no build step, and `react` is the only
+ * module required. Everything visual uses `--dsw-alias-*` tokens so the page
+ * follows the Harness theme.
+ *
+ * @module dsh-model-pool/client
+ */
+
+window.__ModuleLoader__.load({
+  id: 'dsh-model-pool',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+
+    /** Host patch entry id owned by this bundle; also the settings namespace. */
+    const ENTRY_ID = 'model-pool';
+    /** Locale namespace for this page's copy. */
+    const NS = 'model-pool';
+    /** Pool strategies, in picker order (`lib/strategies.js` STRATEGIES). */
+    const STRATEGIES = ['priority', 'round-robin', 'weighted-random', 'least-used', 'fastest', 'cheapest'];
+    /** Health states the page knows how to render. */
+    const STATE_IDS = ['ok', 'degraded', 'unavailable', 'unknown'];
+    /** Modality id for text input; the floor every route accepts. */
+    const TEXT_MODALITY = 'text';
+    /** Modality id the router filters on when a call carries an image. */
+    const IMAGE_MODALITY = 'image';
+    /** Locale key per input modality this page has copy for; others render raw. */
+    const MODALITY_KEYS = { text: 'modalityText', image: 'modalityImage' };
+    /** Fallbacks mirroring the Host Config defaults. */
+    const DEFAULT_COOLDOWN_MS = 60000;
+    const DEFAULT_MAX_ATTEMPTS = 3;
+    /** Calendar background-refresh cadence (§3.6), when the payload omits it. */
+    const DEFAULT_UPDATE_DAYS = 7;
+    /** Read timeout for the cached state route. */
+    const STATE_TIMEOUT_MS = 8000;
+    /** Longer budget for the two POSTs: they re-read provider catalogs. */
+    const ACTION_TIMEOUT_MS = 20000;
+
+    const EN = {
+      nav: 'Model Pool',
+      title: 'Model Pool',
+      intro:
+        'Every registered provider is aggregated into one pool. Pick a pooled model in the composer and the strategy below chooses the concrete provider for each call.',
+      version: 'Version {version}',
+      refresh: 'Refresh',
+      refreshing: 'Refreshing…',
+      resetHealth: 'Reset health',
+      resetting: 'Resetting…',
+      loading: 'Loading pool state…',
+      loadFailed: 'Could not read the pool state.',
+      timeout: 'The request timed out.',
+      noSnapshot: 'The pool has not been read yet. Refresh to build it.',
+      catalogError: 'The catalog read failed: {message}',
+      emptyPool: 'No models are in the pool yet. Check the provider filters in the plugin configuration.',
+      takenAt: 'Read at {time}',
+      poolRoute: 'Virtual route: {provider} ({id})',
+      formLoading: 'Loading configuration…',
+      formUnavailable: 'This deployment does not serve the plugin configuration, so these controls are read-only.',
+      readOnly: 'This deployment stores settings read-only.',
+      saveFailed: 'The change was not saved.',
+      noticeRefreshed: 'Pool state refreshed.',
+      noticeHealthReset: 'Route health was reset.',
+      strategyTitle: 'Strategy',
+      strategyHint: 'How one pooled call picks its concrete provider.',
+      'strategy.priority': 'Priority',
+      'strategy.priority.desc': 'Try providers in the configured priority order, highest priority first.',
+      'strategy.round-robin': 'Round-robin',
+      'strategy.round-robin.desc': 'Rotate the starting provider on every call so load spreads evenly.',
+      'strategy.weighted-random': 'Weighted random',
+      'strategy.weighted-random.desc': 'Draw a provider at random, honouring each route weight.',
+      'strategy.least-used': 'Least used',
+      'strategy.least-used.desc': 'Prefer the provider that has served the fewest calls.',
+      'strategy.fastest': 'Fastest',
+      'strategy.fastest.desc': 'Prefer the provider with the lowest recent time to first chunk.',
+      'strategy.cheapest': 'Cheapest',
+      'strategy.cheapest.desc': 'Prefer the provider with the lowest declared cost hint.',
+      behaviourTitle: 'Behaviour',
+      behaviourHint: 'Failover and cooldown rules applied to every pooled call.',
+      fallback: 'Fail over to the next provider',
+      fallbackHint: 'When an attempt fails before producing output, try the next candidate.',
+      skipUnavailable: 'Skip unavailable routes',
+      skipUnavailableHint: 'Leave out routes that are still inside their cooldown window.',
+      sticky: 'Keep a session on one route',
+      stickyHint: 'A conversation keeps the provider it started on, so its prompt cache stays warm. A new conversation picks again with the strategy.',
+      cooldownMs: 'Cooldown (ms)',
+      cooldownMsHint: 'How long a failed route stays out of rotation.',
+      maxAttempts: 'Max attempts',
+      maxAttemptsHint: 'Upper bound on providers tried for one call.',
+      invalidNumber: 'Enter a whole number between {min} and {max}.',
+      poolTitle: 'Model pool',
+      poolSummary: '{models} models from {providers} providers',
+      dockRoute: 'Routed to',
+      dockEffortMapped: 'This route has no "{requested}" tier; it ran "{actual}".',
+      peakTitle: 'Peak and idle periods',
+      peakHint: 'The Priority strategy can rank providers differently inside and outside working hours. Everything outside the windows below is idle.',
+      peakNowPeak: 'Peak',
+      peakNowIdle: 'Idle',
+      peakNowDisabled: 'Period ranking is off, so every call keeps the plain provider priority.',
+      peakNoReading: 'The Host has not reported the current period yet.',
+      peakAt: '{clock} · {zone}',
+      peakNextLabel: 'Next change',
+      peakNextValue: '{time} → {period}',
+      peakHolidayWarning: 'Today is a statutory holiday: the whole day is idle.',
+      peakMakeupWarning: 'Today is a make-up workday, but the policy still treats it as idle.',
+      peakEnabled: 'Rank by period',
+      peakEnabledHint: 'Off means every call keeps the plain provider priority.',
+      peakTimeZone: 'Time zone',
+      peakTimeZoneHint: 'IANA zone the windows are written in, e.g. Asia/Shanghai. An unusable zone falls back to Beijing time.',
+      peakWindows: 'Peak windows',
+      peakWindowsNone: 'none, so the pool never reaches peak',
+      peakWindowsHint: 'One HH:MM-HH:MM range per line, in the time zone above. No line means the pool never reaches peak.',
+      peakWeekdays: 'Peak weekdays',
+      peakWeekdaysNone: 'none, so the pool never reaches peak',
+      peakWeekdaysHint: 'The weekdays the windows apply to. No day selected means the pool never reaches peak.',
+      peakMakeupWorkdays: 'Make-up workdays',
+      peakMakeupWorkdaysHint: 'One YYYY-MM-DD per line. A listed day counts as a working day even at the weekend.',
+      holidayCalendarTitle: 'Holiday calendar',
+      holidayCalendarHint: 'Statutory holidays and make-up workdays come from a maintained public dataset that this plugin fetches and caches. No one types dates here.',
+      holidayStatusOk: 'Synced',
+      holidayStatusStale: 'Stale',
+      holidayStatusNever: 'Not synced yet',
+      holidayStatusFailed: 'Sync failed',
+      holidayNoReading: 'The Host has not reported the calendar yet.',
+      holidayYearLabel: '{year}',
+      holidayCounts: '{holidays} holidays · {makeup} make-up workdays',
+      holidayCurrentPending: 'Not published yet',
+      holidayTotalsLabel: 'Cached totals',
+      holidaySyncError: 'The last sync failed: {message}',
+      holidayUpdated: 'Last updated',
+      holidayUpdatedNever: 'never',
+      holidayCadence: 'Checked every {days} day(s) in the background. Use Sync now to refresh immediately.',
+      holidaySourceLabel: 'Source',
+      holidayPapersLabel: 'Official notice',
+      holidaySyncNow: 'Sync now',
+      holidaySyncing: 'Syncing…',
+      noticeCalendarSynced: 'Holiday calendar synced.',
+      holidaySync: 'Keep the calendar up to date automatically',
+      holidaySyncHint: 'Off still uses the cached calendar, but nothing refreshes it.',
+      holidayAdvanced: 'Advanced: manual correction',
+      holidayOverride: 'Extra idle dates',
+      holidayOverrideHint: 'One YYYY-MM-DD per line, layered on top of the fetched calendar. For a one-off correction only; it survives every refresh.',
+      peakPeakOrder: 'Peak ranking',
+      peakPeakOrderHint: 'Highest first while the pool is at peak. Leave unset to inherit the provider priority.',
+      peakOffPeakOrder: 'Idle ranking',
+      peakOffPeakOrderHint: 'Highest first while the pool is idle. Leave unset to inherit the provider priority.',
+      peakOrderEmpty: 'No provider currently serves the pool.',
+      peakOrderReset: 'Clear ranking',
+      peakOrderSave: 'Save ranking',
+      peakOrderSaved: 'Period ranking saved.',
+      peakSeparator: ', ',
+      peakWeekdayRange: '{from}–{to}',
+      'peakWeekday.mon': 'Mon',
+      'peakWeekday.tue': 'Tue',
+      'peakWeekday.wed': 'Wed',
+      'peakWeekday.thu': 'Thu',
+      'peakWeekday.fri': 'Fri',
+      'peakWeekday.sat': 'Sat',
+      'peakWeekday.sun': 'Sun',
+      priorityTitle: 'Provider priority',
+      priorityHint: 'Highest first. Used when the strategy is Priority. Only providers that currently serve the pool are listed; the rest follow in registration order.',
+      priorityEmpty: 'No provider currently serves the pool. Pool routes fall back to registration order.',
+      priorityReset: 'Reset to registration order',
+      priorityUp: 'Move up',
+      priorityDown: 'Move down',
+      priorityRemove: 'Remove',
+      priorityUnknown: 'Not registered right now',
+      prioritySave: 'Save priority',
+      prioritySaved: 'Provider priority saved.',
+      mergeTitle: 'Merged groups',
+      mergeHint: 'The same model often has a different id on each provider. A merged group lists those ids together and shows them as one row in the pool.',
+      mergeEmpty: 'No merged groups. Every provider id is its own row.',
+      mergeAdd: 'Add group',
+      mergeRemove: 'Remove',
+      mergeName: 'Display name',
+      mergeId: 'Pool id',
+      mergeModels: 'Model ids or patterns',
+      mergeModelsHint: 'One per line. Matches a concrete id, a provider/model pair, or the normalized id. * and ? wildcards allowed, e.g. deepseek-v4.1-flash*',
+      mergeMode: 'Merge into one row',
+      mergeModeHint: 'When on, the claimed routes leave their single-id rows. When off, this is an extra curated pool and the single-id rows stay.',
+      mergeClaimed: '{count} route(s)',
+      mergeNoMatch: 'No route matches these selectors yet.',
+      mergeSave: 'Save groups',
+      mergeSaved: 'Merged groups saved.',
+      colModel: 'Model',
+      colProviders: 'Providers',
+      colDepths: 'Depths',
+      colState: 'State',
+      providersCount: '{count} providers',
+      depthsCount: '{count} thinking depths',
+      'state.ok': 'OK',
+      'state.degraded': 'Degraded',
+      'state.unavailable': 'Unavailable',
+      'state.unknown': 'Unknown',
+      reason: 'Reason: {reason}',
+      latency: '{ms} ms to first chunk',
+      contextWindow: '{tokens} context',
+      weightLabel: 'weight {weight}',
+      defaultEffortTag: 'default',
+      modalityText: 'Text',
+      modalityImage: 'Image',
+      modalityTextOnlyTag: 'text only',
+      modalityRouteHint: 'Input this route accepts. Image-capable routes are the only ones a screenshot can reach.',
+      modalityRouteTextOnlyHint: 'This route does not accept image input. The pool still offers images when another candidate takes them, and then this route is skipped for that call.',
+      modalityPoolHint: 'This pooled model accepts image input: at least one candidate route can see a screenshot.',
+      noEfforts: 'No thinking depths',
+      noRoutes: 'This model has no candidate routes.',
+      failuresTitle: 'Provider catalog failures',
+      failuresHint: 'These providers could not be read and are missing from the pool.',
+    };
+
+    const ZH = {
+      nav: '模型池',
+      title: '模型池',
+      intro:
+        '所有已注册的提供方都会聚合进同一个模型池。在输入框中选择池内模型，下面的策略会为每次调用挑选具体的提供方。',
+      version: '版本 {version}',
+      refresh: '刷新',
+      refreshing: '正在刷新…',
+      resetHealth: '重置健康状态',
+      resetting: '正在重置…',
+      loading: '正在读取模型池状态…',
+      loadFailed: '无法读取模型池状态。',
+      timeout: '请求超时。',
+      noSnapshot: '模型池尚未读取，请点击刷新。',
+      catalogError: '读取模型目录失败：{message}',
+      emptyPool: '模型池中还没有模型。请检查插件配置中的提供方过滤条件。',
+      takenAt: '读取于 {time}',
+      poolRoute: '虚拟路由：{provider}（{id}）',
+      formLoading: '正在读取配置…',
+      formUnavailable: '当前部署未提供插件配置，这些控件为只读。',
+      readOnly: '当前部署的设置为只读。',
+      saveFailed: '设置未保存。',
+      noticeRefreshed: '模型池状态已刷新。',
+      noticeHealthReset: '路由健康状态已重置。',
+      strategyTitle: '策略',
+      strategyHint: '每次池调用如何挑选具体的提供方。',
+      'strategy.priority': '优先级',
+      'strategy.priority.desc': '按配置的优先级顺序尝试提供方，优先级最高的先试。',
+      'strategy.round-robin': '轮询',
+      'strategy.round-robin.desc': '每次调用轮换起始提供方，让负载均匀分布。',
+      'strategy.weighted-random': '加权随机',
+      'strategy.weighted-random.desc': '按每条路由的权重随机抽取提供方。',
+      'strategy.least-used': '最少使用',
+      'strategy.least-used.desc': '优先选择已服务调用次数最少的提供方。',
+      'strategy.fastest': '最快',
+      'strategy.fastest.desc': '优先选择最近首字延迟最低的提供方。',
+      'strategy.cheapest': '最便宜',
+      'strategy.cheapest.desc': '优先选择声明的成本提示最低的提供方。',
+      behaviourTitle: '行为',
+      behaviourHint: '作用于每次池调用的故障转移与冷却规则。',
+      fallback: '失败时切换到下一个提供方',
+      fallbackHint: '一次尝试在产出任何内容之前失败时，继续尝试下一个候选。',
+      skipUnavailable: '跳过不可用的路由',
+      skipUnavailableHint: '跳过仍在冷却窗口内的路由。',
+      sticky: '同一会话固定使用同一路由',
+      stickyHint: '一个对话会保持首次使用的提供商，让它的提示词缓存保持有效。新建对话时重新按策略选择。',
+      cooldownMs: '冷却时间（毫秒）',
+      cooldownMsHint: '失败的路由退出轮转的时长。',
+      maxAttempts: '最大尝试次数',
+      maxAttemptsHint: '一次调用最多尝试的提供方数量。',
+      invalidNumber: '请输入 {min} 到 {max} 之间的整数。',
+      poolTitle: '模型池',
+      poolSummary: '{models} 个模型，来自 {providers} 个提供方',
+      dockRoute: '实际路由',
+      dockEffortMapped: '该线路没有「{requested}」档位，实际以「{actual}」运行。',
+      peakTitle: '高峰与空闲时段',
+      peakHint: '「优先级」策略可以在工作时段内外使用不同的提供方排序。下面时段之外的时间都算空闲。',
+      peakNowPeak: '高峰',
+      peakNowIdle: '空闲',
+      peakNowDisabled: '时段排序已关闭，每次调用都沿用原有的提供方优先级。',
+      peakNoReading: '宿主尚未上报当前时段。',
+      peakAt: '{clock} · {zone}',
+      peakNextLabel: '下次切换',
+      peakNextValue: '{time} → {period}',
+      peakHolidayWarning: '今天是法定节假日，全天按空闲处理。',
+      peakMakeupWarning: '今天是调休上班日，但当前策略仍按空闲处理。',
+      peakEnabled: '按高峰与空闲时段排序',
+      peakEnabledHint: '关闭后每次调用都沿用原有的提供方优先级。',
+      peakTimeZone: '时区',
+      peakTimeZoneHint: '时段所用的 IANA 时区，例如 Asia/Shanghai。无法识别时回退到北京时间。',
+      peakWindows: '高峰时段',
+      peakWindowsNone: '未配置，模型池不会进入高峰',
+      peakWindowsHint: '每行一个 HH:MM-HH:MM 区间，使用上面的时区。留空表示模型池不会进入高峰。',
+      peakWeekdays: '高峰星期',
+      peakWeekdaysNone: '未选择，模型池不会进入高峰',
+      peakWeekdaysHint: '上述时段生效的星期。一天都不选表示模型池不会进入高峰。',
+      peakMakeupWorkdays: '调休上班日',
+      peakMakeupWorkdaysHint: '每行一个 YYYY-MM-DD，列出的日期即使遇到周末也按工作日处理。',
+      holidayCalendarTitle: '节假日日历',
+      holidayCalendarHint: '法定节假日与调休上班日由插件自动获取并缓存自公开维护的数据，无需手动录入日期。',
+      holidayStatusOk: '已同步',
+      holidayStatusStale: '待更新',
+      holidayStatusNever: '尚未同步',
+      holidayStatusFailed: '同步失败',
+      holidayNoReading: '宿主尚未上报日历信息。',
+      holidayYearLabel: '{year} 年',
+      holidayCounts: '{holidays} 天节假日 · {makeup} 天调休上班',
+      holidayCurrentPending: '尚未发布',
+      holidayTotalsLabel: '已缓存合计',
+      holidaySyncError: '上次同步失败：{message}',
+      holidayUpdated: '最近更新',
+      holidayUpdatedNever: '从未',
+      holidayCadence: '后台每 {days} 天检查一次，需要立即更新可点「立即同步」。',
+      holidaySourceLabel: '数据来源',
+      holidayPapersLabel: '官方通知',
+      holidaySyncNow: '立即同步',
+      holidaySyncing: '正在同步…',
+      noticeCalendarSynced: '节假日日历已同步。',
+      holidaySync: '自动保持日历更新',
+      holidaySyncHint: '关闭后仍会使用已缓存的日历，但不再自动刷新。',
+      holidayAdvanced: '高级：手动修正',
+      holidayOverride: '额外空闲日期',
+      holidayOverrideHint: '每行一个 YYYY-MM-DD，叠加在自动获取的日历之上。仅用于一次性修正，刷新时不会被覆盖。',
+      peakPeakOrder: '高峰排序',
+      peakPeakOrderHint: '模型池处于高峰时越靠上优先级越高。留空则沿用提供方优先级。',
+      peakOffPeakOrder: '空闲排序',
+      peakOffPeakOrderHint: '模型池处于空闲时越靠上优先级越高。留空则沿用提供方优先级。',
+      peakOrderEmpty: '当前没有提供方为模型池提供模型。',
+      peakOrderReset: '清空排序',
+      peakOrderSave: '保存排序',
+      peakOrderSaved: '时段排序已保存。',
+      peakSeparator: '、',
+      peakWeekdayRange: '{from} 至 {to}',
+      'peakWeekday.mon': '周一',
+      'peakWeekday.tue': '周二',
+      'peakWeekday.wed': '周三',
+      'peakWeekday.thu': '周四',
+      'peakWeekday.fri': '周五',
+      'peakWeekday.sat': '周六',
+      'peakWeekday.sun': '周日',
+      priorityTitle: '供应商优先级',
+      priorityHint: '越靠上优先级越高，供「优先级」策略使用。这里只列出当前为模型池提供模型的供应商，其余按注册顺序跟在后面。',
+      priorityEmpty: '当前没有供应商为模型池提供模型。模型池将按注册顺序路由。',
+      priorityReset: '恢复注册顺序',
+      priorityUp: '上移',
+      priorityDown: '下移',
+      priorityRemove: '移除',
+      priorityUnknown: '当前未注册',
+      prioritySave: '保存优先级',
+      prioritySaved: '供应商优先级已保存。',
+      mergeTitle: '合并组',
+      mergeHint: '同一个模型在不同提供方下的编号往往不同。合并组把这些编号列在一起，在模型池里只显示为一行。',
+      mergeEmpty: '暂无合并组。每个提供方的编号各占一行。',
+      mergeAdd: '新增合并组',
+      mergeRemove: '删除',
+      mergeName: '显示名称',
+      mergeId: '池内编号',
+      mergeModels: '模型编号或匹配模式',
+      mergeModelsHint: '每行一个。可匹配具体编号、提供方/模型组合，或归一化后的编号。支持 * 和 ? 通配符，例如 deepseek-v4.1-flash*',
+      mergeMode: '合并为一行',
+      mergeModeHint: '开启时，被合并的路由会从各自的单编号行中移走；关闭时仅新增一个精选池，单编号行保留。',
+      mergeClaimed: '{count} 条路由',
+      mergeNoMatch: '目前没有路由匹配这些选择器。',
+      mergeSave: '保存合并组',
+      mergeSaved: '合并组已保存。',
+      colModel: '模型',
+      colProviders: '提供方',
+      colDepths: '深度',
+      colState: '状态',
+      providersCount: '{count} 个提供方',
+      depthsCount: '{count} 档思考深度',
+      'state.ok': '正常',
+      'state.degraded': '降级',
+      'state.unavailable': '不可用',
+      'state.unknown': '未知',
+      reason: '原因：{reason}',
+      latency: '首字延迟 {ms} 毫秒',
+      contextWindow: '上下文 {tokens}',
+      weightLabel: '权重 {weight}',
+      defaultEffortTag: '默认',
+      modalityText: '文本',
+      modalityImage: '图片',
+      modalityTextOnlyTag: '仅文本',
+      modalityRouteHint: '该路由接受的输入类型。只有接受图片的路由才能收到截图。',
+      modalityRouteTextOnlyHint: '该路由不接受图片输入。只要还有其他候选接受图片，模型池仍会对外提供图片能力，此时本次调用会跳过该路由。',
+      modalityPoolHint: '该池内模型接受图片输入：至少有一条候选路由能识别截图。',
+      noEfforts: '没有思考深度',
+      noRoutes: '该模型没有候选路由。',
+      failuresTitle: '提供方目录读取失败',
+      failuresHint: '以下提供方读取失败，未出现在模型池中。',
+    };
+
+    // ── page styles ──────────────────────────────────────────────────────────
+    // Colour comes only from --dsw-alias-* tokens, so light/dark and any
+    // third-party theme work without extra wiring.
+    const CSS = [
+      '.mp_page{display:flex;flex-direction:column;gap:14px;max-width:820px;width:100%;color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px}',
+      '.mp_head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}',
+      '.mp_headText{min-width:0}',
+      '.mp_title{margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+      '.mp_intro{margin:4px 0 0;max-width:560px;font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_actions{display:flex;align-items:center;gap:8px;flex:none}',
+      '.mp_btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:18px;cursor:pointer;white-space:nowrap}',
+      '.mp_btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}',
+      '.mp_btn:disabled{opacity:.5;cursor:default}',
+      '.mp_btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}',
+      '.mp_card{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;background:var(--dsw-alias-bg-layer-1)}',
+      '.mp_cardHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}',
+      '.mp_cardTitle{margin:0;font-size:14px;line-height:22px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+      '.mp_hint{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_error{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-state-error-primary);word-break:break-word}',
+      '.mp_notice{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-state-success-primary)}',
+      '.mp_empty{margin:0;padding:10px 0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 20px}',
+      '.mp_field{display:flex;flex-direction:column;gap:4px;min-width:0}',
+      '.mp_label{font-size:12px;line-height:18px;font-weight:500;color:var(--dsw-alias-label-secondary)}',
+      '.mp_control{box-sizing:border-box;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:18px}',
+      '.mp_control:disabled{opacity:.6;cursor:default}',
+      '.mp_control:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}',
+      '.mp_select{max-width:320px}',
+      '.mp_controlNum{max-width:160px}',
+      '.mp_checks{display:flex;flex-wrap:wrap;gap:16px 24px}',
+      '.mp_mergeGroup{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;background:var(--dsw-alias-bg-base)}',
+      '.mp_mergeHead{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:8px}',
+      '.mp_mergeIndex{display:flex;align-items:center;justify-content:center;font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}',
+      '.mp_mergeHead .mp_label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}',
+      '.mp_mergeHead .mp_field{gap:0}',
+      '.mp_mergeBody{display:flex;flex-direction:column;gap:6px}',
+      '.mp_textarea{height:auto;min-height:34px;padding:6px 8px;resize:vertical;line-height:18px;font-size:12px}',
+      '.mp_mergeActions{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}',
+      '.mp_prioList{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}',
+      '.mp_prioRow,.mp_periodRow{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px}',
+      '.mp_prioIndex{font-size:11px;line-height:16px;text-align:right;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}',
+      '.mp_prioField{display:flex;align-items:center;gap:8px;min-width:0}',
+      '.mp_prioField .mp_input{flex:1 1 auto;min-width:0}',
+      '.mp_prioWarn{flex:none;font-size:11px;line-height:16px;color:var(--dsw-alias-state-warn-primary)}',
+      '.mp_prioActions{display:flex;align-items:center;gap:4px}',
+      '.mp_prioName{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}',
+      '.mp_prioLabel{font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis}',
+      '.mp_prioId{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis}',
+      '.mp_prioAddField{flex:0 1 260px}',
+      '.mp_prioAddField .mp_select{max-width:none}',
+      // Peak/idle period card: a live reading on top, then the editable policy.
+      '.mp_periodHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}',
+      '.mp_periodBadge{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);white-space:nowrap}',
+      '.mp_periodBadge_peak{color:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}',
+      '.mp_periodDot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--dsw-alias-label-secondary)}',
+      '.mp_periodDot_peak{background:var(--dsw-alias-brand-primary)}',
+      '.mp_periodClock{font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}',
+      '.mp_periodFacts{display:flex;flex-direction:column;gap:3px;margin:0;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_periodFact{display:flex;gap:8px;flex-wrap:wrap}',
+      '.mp_periodFactKey{flex:none;min-width:88px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_periodFactValue{min-width:0;color:var(--dsw-alias-label-primary);word-break:break-word}',
+      '.mp_periodWarn{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-state-warn-primary)}',
+      '.mp_periodGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}',
+      '.mp_periodWeekdays{display:flex;flex-wrap:wrap;gap:4px 14px}',
+      '.mp_periodBlock{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;background:var(--dsw-alias-bg-base)}',
+      '.mp_periodBlockHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}',
+      '.mp_periodBlockTitle{margin:0;font-size:12px;line-height:18px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+      // Matches the shape and type scale of the shipped statistics pills
+      // (`anchor > pill > label`): 12px, tabular numerals, one soft pill.
+      '.mp_dock{display:inline-flex;min-width:0;font-size:calc(var(--dsh-content-font-size-secondary,13px) - 1px);line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px))}',
+      '.mp_dockPill{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:1px 8px;border:0;border-radius:var(--dsw-radius-sm);background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;white-space:nowrap}',
+      '.mp_dockSeg{min-width:0;overflow:hidden;text-overflow:ellipsis}',
+      '.mp_dockRoute{color:var(--dsw-alias-label-secondary)}',
+      '.mp_dockSep{flex:none;color:var(--dsw-alias-label-secondary);opacity:.55}',
+      '.mp_btnIcon{width:26px;height:26px;padding:0;font-size:13px;line-height:1}',
+      '.mp_btnPrimary{border-color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-bg-base)}',
+      '.mp_btnPrimary:hover:not(:disabled){filter:brightness(1.06)}',
+      '.mp_btnDanger{color:var(--dsw-alias-state-error-primary)}',
+      '.mp_btnDanger:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}',
+      '.mp_check{display:flex;align-items:flex-start;gap:8px;min-width:0}',
+      '.mp_checks>.mp_check{min-width:220px;flex:1 1 220px}',
+      '.mp_check input{width:14px;height:14px;margin:3px 0 0;accent-color:var(--dsw-alias-brand-primary);flex:none}',
+      '.mp_checkText{min-width:0}',
+      '.mp_checkLabel{display:block;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);cursor:pointer}',
+      '.mp_thead{padding:2px 4px 4px;border-bottom:1px solid var(--dsw-alias-border-l1);font-size:11px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--dsw-alias-label-secondary)}',
+      '.mp_grid{display:grid;grid-template-columns:minmax(0,1fr) 76px 68px 116px 18px;align-items:center;gap:10px}',
+      '.mp_models{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}',
+      '.mp_model{border-bottom:1px solid var(--dsw-alias-border-l1)}',
+      '.mp_model:last-child{border-bottom:none}',
+      '.mp_row{box-sizing:border-box;display:grid;width:100%;margin:0;padding:9px 4px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}',
+      '.mp_row:hover{background:var(--dsw-alias-bg-layer-2)}',
+      '.mp_row:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}',
+      '.mp_modelName{display:flex;flex-direction:column;gap:1px;min-width:0}',
+      '.mp_name{font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis}',
+      '.mp_nameRow{display:flex;align-items:center;gap:6px;min-width:0}',
+      '.mp_nameRow>.mp_name{min-width:0;flex:1 1 auto}',
+      '.mp_nameFlag{flex:none;font-size:10px;line-height:14px;padding:0 5px}',
+      '.mp_id{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis}',
+      '.mp_num{font-size:12px;line-height:18px;text-align:right;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}',
+      '.mp_badge{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);white-space:nowrap}',
+      '.mp_badge_ok{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-primary)}',
+      '.mp_badge_degraded{color:var(--dsw-alias-state-warn-primary);border-color:var(--dsw-alias-state-warn-primary)}',
+      '.mp_badge_unavailable{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}',
+      '.mp_dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--dsw-alias-state-idle-primary)}',
+      '.mp_dot_ok{background:var(--dsw-alias-state-success-primary)}',
+      '.mp_dot_degraded{background:var(--dsw-alias-state-warn-primary)}',
+      '.mp_dot_unavailable{background:var(--dsw-alias-state-error-primary)}',
+      '.mp_dot_unknown{background:var(--dsw-alias-state-idle-primary)}',
+      '.mp_chevron{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);text-align:center}',
+      '.mp_routes{display:flex;flex-direction:column;gap:6px;padding:2px 4px 12px 4px}',
+      '.mp_route{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-layer-2)}',
+      '.mp_route .mp_dot{margin-top:6px}',
+      '.mp_routeBody{display:flex;flex-direction:column;gap:3px;min-width:0}',
+      '.mp_routeTitle{font-size:12px;line-height:18px;color:var(--dsw-alias-label-primary);word-break:break-word}',
+      '.mp_routeProvider{font-weight:500}',
+      '.mp_routeIds{margin-top:1px;font-size:11px;line-height:15px;color:var(--dsw-alias-label-secondary);word-break:break-all}',
+      '.mp_routeMeta{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);word-break:break-word}',
+      '.mp_routeReason{font-size:11px;line-height:16px;color:var(--dsw-alias-state-error-primary);word-break:break-word}',
+      '.mp_routeState{white-space:nowrap}',
+      '.mp_chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}',
+      '.mp_chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;border-radius:6px;border:1px solid var(--dsw-alias-border-l1);font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_chipDefault{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}',
+      '.mp_chipTag{font-size:10px;line-height:14px;opacity:.85}',
+      '.mp_chipWarn{border-color:var(--dsw-alias-state-warn-primary);color:var(--dsw-alias-state-warn-primary)}',
+      '.mp_chipImage{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary)}',
+      '.mp_mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}',
+      '.mp_meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary)}',
+      '.mp_failures{display:flex;flex-direction:column;gap:4px;margin:0;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-layer-2)}',
+      '.mp_failure{font-size:11px;line-height:16px;color:var(--dsw-alias-state-error-primary);word-break:break-word}',
+      '@media (max-width:560px){.mp_grid{grid-template-columns:minmax(0,1fr) 58px 52px 96px 14px}.mp_actions{width:100%}.mp_btn{flex:1}}',
+    ].join('\n');
+
+    /** Marks the one injected stylesheet so a remount never stacks another copy. */
+    const STYLE_TAG_ID = 'dsh-model-pool';
+
+    /**
+     * Install the stylesheet once per document.
+     *
+     * The Settings page and the composer dock are different slots, so each can
+     * mount without the other. Injecting at the document level (rather than from
+     * inside one component's tree) is what lets the dock render styled even when
+     * Settings was never opened.
+     * @returns {void}
+     */
+    function installStyles() {
+      if (typeof document === 'undefined' || document.head === undefined || document.head === null) return;
+      if (document.querySelector(`style[data-plugin="${STYLE_TAG_ID}"]`) !== null) return;
+      const tag = document.createElement('style');
+      tag.dataset.plugin = STYLE_TAG_ID;
+      tag.textContent = CSS;
+      document.head.appendChild(tag);
+    }
+
+    // ── same-origin HTTP helpers ─────────────────────────────────────────────
+    // Resolved against the PAGE base, not an origin-absolute path: under a
+    // reverse-proxy prefix a leading slash would drop the prefix. Falls back to
+    // the root path when `document` (or a usable base) is absent.
+    const API = (() => {
+      try {
+        return new URL('api/model-pool', document.baseURI).pathname;
+      } catch {
+        return '/api/model-pool';
+      }
+    })();
+
+    /**
+     * One JSON request against this plugin's own API.
+     * @param {string} path - path below `/api/model-pool`.
+     * @param {object} [options] - `timeout` plus fetch options.
+     * @returns {Promise<object>} the parsed JSON payload.
+     */
+    async function api(path, options) {
+      const settings = options || {};
+      const timeout = typeof settings.timeout === 'number' ? settings.timeout : STATE_TIMEOUT_MS;
+      const rest = { ...settings };
+      delete rest.timeout;
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), timeout);
+      try {
+        const response = await fetch(`${API}${path}`, {
+          ...rest,
+          redirect: 'error',
+          credentials: 'same-origin',
+          headers: { accept: 'application/json', ...(rest.headers || {}) },
+          signal: controller.signal,
+        });
+        const text = await response.text();
+        let payload;
+        try {
+          payload = text === '' ? {} : JSON.parse(text);
+        } catch {
+          payload = { error: { message: text.slice(0, 300) } };
+        }
+        if (payload === null || typeof payload !== 'object') payload = { value: payload };
+        if (!response.ok) {
+          const failure = payload.error;
+          const reason =
+            typeof failure === 'string'
+              ? failure
+              : failure !== null && typeof failure === 'object' && typeof failure.message === 'string'
+                ? failure.message
+                : '';
+          const error = new Error(reason || `HTTP ${response.status}`);
+          // Keep the status so callers can distinguish "no such route" from a
+          // real failure without parsing a localized server message.
+          error.status = response.status;
+          throw error;
+        }
+        return payload;
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+
+    /**
+     * POST one of the action routes (no request body).
+     * @param {string} path - path below `/api/model-pool`.
+     * @param {number} timeout - abort budget in milliseconds.
+     * @returns {Promise<object>} the parsed JSON payload.
+     */
+    function post(path, timeout) {
+      return api(path, { method: 'POST', timeout });
+    }
+
+    /**
+     * Whether a rejection means "this deployment does not serve that route".
+     * @param {unknown} cause - thrown value.
+     * @returns {boolean} true for an HTTP 404/405 answer.
+     */
+    function isMissingRoute(cause) {
+      if (cause === null || typeof cause !== 'object') return false;
+      if (cause.status === 404 || cause.status === 405) return true;
+      const message = typeof cause.message === 'string' ? cause.message : '';
+      return /\bHTTP (?:404|405)\b/.test(message);
+    }
+
+    /**
+     * Human-readable message for an unknown rejection.
+     * @param {unknown} cause - thrown value.
+     * @returns {string} the message.
+     */
+    function messageOf(cause) {
+      if (cause && typeof cause === 'object' && typeof cause.message === 'string' && cause.message !== '') return cause.message;
+      return String(cause);
+    }
+
+    /**
+     * Plain JSON copy of a value, so nothing non-serializable reaches the Host.
+     * @param {unknown} value - candidate value.
+     * @returns {unknown} a JSON round-tripped value.
+     */
+    function jsonValue(value) {
+      try {
+        const encoded = JSON.stringify(value);
+        return encoded === undefined ? null : JSON.parse(encoded);
+      } catch {
+        return value;
+      }
+    }
+
+    /**
+     * Read a finite number, falling back when the field is absent or malformed.
+     * @param {unknown} value - candidate value.
+     * @param {number} fallback - value to use otherwise.
+     * @returns {number} the resolved number.
+     */
+    function numberOr(value, fallback) {
+      return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+    }
+
+    // ── pool data helpers ────────────────────────────────────────────────────
+
+    /**
+     * Key for one concrete route.
+     * @param {string} provider - provider id.
+     * @param {string} model - concrete model id.
+     * @returns {string} the composite key.
+     */
+    function routeKey(provider, model) {
+      return `${provider}\u0000${model}`;
+    }
+
+    /**
+     * Index the health payload by `provider + model`.
+     * Accepts `{ entries: [...] }`, a bare array, or a `provider/model` map.
+     * @param {unknown} raw - the `health` member of the state payload.
+     * @returns {Map<string, object>} health records by route key.
+     */
+    function healthIndex(raw) {
+      const index = new Map();
+      const add = (entry) => {
+        if (entry === null || typeof entry !== 'object') return;
+        if (typeof entry.provider !== 'string' || typeof entry.model !== 'string') return;
+        index.set(routeKey(entry.provider, entry.model), entry);
+      };
+      if (Array.isArray(raw)) {
+        for (const entry of raw) add(entry);
+      } else if (raw !== null && typeof raw === 'object') {
+        if (Array.isArray(raw.entries)) {
+          for (const entry of raw.entries) add(entry);
+        } else {
+          for (const entry of Object.values(raw)) add(entry);
+        }
+      }
+      return index;
+    }
+
+    /**
+     * Current state of one route.
+     * Derives from the counters when a record carries no usable `state`, so a
+     * stale registry projection still renders sensibly.
+     * @param {object|undefined} entry - health record.
+     * @param {number} now - current clock reading.
+     * @returns {'ok'|'degraded'|'unavailable'|'unknown'} the route state.
+     */
+    function routeState(entry, now) {
+      if (entry === undefined || entry === null) return 'unknown';
+      const declared = STATE_IDS.indexOf(entry.state) >= 0 ? entry.state : '';
+      const failures = numberOr(entry.failures, 0);
+      if (failures > 0) {
+        if (Number.isFinite(entry.cooldownUntil)) return entry.cooldownUntil > now ? 'unavailable' : 'degraded';
+        return declared === 'unavailable' || declared === 'degraded' ? declared : 'degraded';
+      }
+      if (declared === 'ok' || numberOr(entry.successes, 0) > 0) return 'ok';
+      return declared === 'unavailable' || declared === 'degraded' ? declared : 'unknown';
+    }
+
+    /**
+     * Aggregate state of a pool model across its candidate routes.
+     * @param {object[]} routes - candidate routes.
+     * @param {Map<string, object>} index - health index.
+     * @param {number} now - current clock reading.
+     * @returns {'ok'|'degraded'|'unavailable'|'unknown'} the aggregate state.
+     */
+    function aggregateState(routes, index, now) {
+      if (!Array.isArray(routes) || routes.length === 0) return 'unknown';
+      let ok = 0;
+      let degraded = 0;
+      let unavailable = 0;
+      for (const route of routes) {
+        if (route === null || typeof route !== 'object') continue;
+        const entry = index.get(routeKey(route.provider, route.model));
+        const state = routeState(entry, now);
+        if (state === 'ok') ok += 1;
+        else if (state === 'degraded') degraded += 1;
+        else if (state === 'unavailable') unavailable += 1;
+      }
+      if (unavailable === routes.length) return 'unavailable';
+      if (unavailable > 0 || degraded > 0) return 'degraded';
+      if (ok > 0) return 'ok';
+      return 'unknown';
+    }
+
+    /**
+     * Distinct providers behind a model's routes.
+     * @param {object[]} routes - candidate routes.
+     * @returns {number} the provider count.
+     */
+    function providerCount(routes) {
+      const seen = new Set();
+      for (const route of Array.isArray(routes) ? routes : []) {
+        if (route !== null && typeof route === 'object' && typeof route.provider === 'string') seen.add(route.provider);
+      }
+      return seen.size;
+    }
+
+    /**
+     * Number of thinking depths the pool model advertises.
+     * @param {object} model - pool model.
+     * @returns {number} the effort count.
+     */
+    function depthCount(model) {
+      const efforts = model && model.reasoning && Array.isArray(model.reasoning.efforts) ? model.reasoning.efforts : [];
+      return efforts.length;
+    }
+
+    /**
+     * The input modalities one route declares, normalized for display.
+     * Mirrors `lib/capabilities.js`: text is the floor every route accepts, so
+     * an undeclared route (or one that only names `image`) still reads as text.
+     * @param {object} route - a pool route, or a pool model for its union.
+     * @returns {string[]} normalized modality ids, always containing `text`.
+     */
+    function declaredModalities(route) {
+      const raw = route !== null && typeof route === 'object' ? route.inputModalities : undefined;
+      const out = [];
+      if (Array.isArray(raw)) {
+        for (const entry of raw) {
+          if (typeof entry !== 'string') continue;
+          const modality = entry.trim().toLowerCase();
+          if (modality === '' || out.includes(modality)) continue;
+          out.push(modality);
+        }
+      }
+      return out.includes(TEXT_MODALITY) ? out : [TEXT_MODALITY, ...out];
+    }
+
+    /**
+     * Whether a route (or a pool model) accepts image input.
+     * The same `includes('image')` rule the router filters on, so the chip and
+     * the routing decision can never disagree.
+     * @param {object} route - a pool route, or a pool model for its union.
+     * @returns {boolean} true when image input is advertised.
+     */
+    function acceptsImages(route) {
+      return declaredModalities(route).includes(IMAGE_MODALITY);
+    }
+
+    /**
+     * Localized label of one input modality.
+     * @param {Function} t - bound translator.
+     * @param {string} modality - normalized modality id.
+     * @returns {string} the label, or the raw id when this page has no copy.
+     */
+    function modalityLabel(t, modality) {
+      const key = MODALITY_KEYS[modality];
+      return key === undefined ? modality : t(key);
+    }
+
+    /**
+     * Compact context-window label.
+     * @param {number} tokens - window size in tokens.
+     * @returns {string} e.g. `128K`, `1M`, or the raw count.
+     */
+    function formatWindow(tokens) {
+      const n = Number(tokens);
+      if (!Number.isFinite(n) || n <= 0) return '';
+      if (n >= 1000000) return `${Math.round(n / 100000) / 10}M`;
+      if (n >= 1000) return `${Math.round(n / 100) / 10}K`;
+      return String(n);
+    }
+
+    /**
+     * DOM-safe id fragment for `aria-controls`.
+     * @param {unknown} value - model id.
+     * @returns {string} the fragment.
+     */
+    function idFragment(value) {
+      return String(value === undefined || value === null ? '' : value).replace(/[^A-Za-z0-9_-]/g, '-');
+    }
+
+    // ── peak / idle period helpers ───────────────────────────────────────────
+
+    /** ISO weekdays the peak policy can name, Monday first. */
+    const WEEKDAYS = [1, 2, 3, 4, 5, 6, 7];
+    /** Locale key fragment per ISO weekday, in `WEEKDAYS` order. */
+    const WEEKDAY_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+
+    /**
+     * Localized name of one ISO weekday.
+     * @param {Function} t - bound translator.
+     * @param {number} weekday - ISO weekday, 1 = Monday.
+     * @returns {string} the weekday name, or the bare number when unknown.
+     */
+    function weekdayName(t, weekday) {
+      const key = WEEKDAY_KEYS[weekday - 1];
+      return key === undefined ? String(weekday) : t(`peakWeekday.${key}`);
+    }
+
+    /**
+     * Human text for a weekday set, collapsing consecutive runs.
+     *
+     * `[1,2,3,4,5]` reads as "Mon–Fri" rather than five comma-separated names,
+     * which is how the policy is actually stated; a gap starts a new run.
+     * @param {Function} t - bound translator.
+     * @param {number[]} weekdays - ISO weekdays, any order.
+     * @returns {string} the joined text, or '' for an empty set.
+     */
+    function describeWeekdays(t, weekdays) {
+      const days = (Array.isArray(weekdays) ? weekdays : []).filter((day) => WEEKDAYS.indexOf(day) >= 0).sort((left, right) => left - right);
+      if (days.length === 0) return '';
+      const parts = [];
+      let start = days[0];
+      let previous = days[0];
+      for (const day of days.slice(1)) {
+        if (day === previous + 1) {
+          previous = day;
+          continue;
+        }
+        parts.push(runLabel(t, start, previous));
+        start = day;
+        previous = day;
+      }
+      parts.push(runLabel(t, start, previous));
+      return parts.join(t('peakSeparator'));
+    }
+
+    /**
+     * Label for one run of consecutive weekdays.
+     * @param {Function} t - bound translator.
+     * @param {number} from - first ISO weekday of the run.
+     * @param {number} to - last ISO weekday of the run.
+     * @returns {string} one name for a single day, a range otherwise.
+     */
+    function runLabel(t, from, to) {
+      if (from === to) return weekdayName(t, from);
+      return t('peakWeekdayRange', { from: weekdayName(t, from), to: weekdayName(t, to) });
+    }
+
+    /**
+     * Wall-clock time of day from a period payload.
+     * `minuteOfDay` is already the reading in the policy's own zone, so this
+     * never re-derives the zone from the browser.
+     * @param {object} period - `describePeriod` payload.
+     * @returns {string} `HH:MM`.
+     */
+    function clockOf(period) {
+      const minuteOfDay = Number.isFinite(period.minuteOfDay) ? period.minuteOfDay : 0;
+      const hour = Math.floor(minuteOfDay / 60);
+      const minute = minuteOfDay % 60;
+      return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+    }
+
+    /**
+     * Format one instant in the policy's time zone.
+     * Showing the browser's own zone beside a Beijing schedule would invite a
+     * wrong reading, so the configured zone is used when `Intl` can honour it.
+     * @param {number} at - epoch milliseconds.
+     * @param {string} timeZone - IANA zone name.
+     * @returns {string} a short localized date and time.
+     */
+    function zonedClock(at, timeZone) {
+      const date = new Date(at);
+      const local = () => date.toLocaleString();
+      if (typeof timeZone !== 'string' || timeZone === '') return local();
+      if (typeof Intl === 'undefined' || Intl === null || typeof Intl.DateTimeFormat !== 'function') return local();
+      try {
+        return new Intl.DateTimeFormat(undefined, { timeZone, dateStyle: 'short', timeStyle: 'short' }).format(date);
+      } catch {
+        return local();
+      }
+    }
+
+    // ── small controls ───────────────────────────────────────────────────────
+
+    /**
+     * State pill: coloured dot plus localized label.
+     * @param {object} props - `state` and `t`.
+     * @returns {object} the React element.
+     */
+    function StateBadge(props) {
+      const state = STATE_IDS.indexOf(props.state) >= 0 ? props.state : 'unknown';
+      const t = props.t;
+      return h(
+        'span',
+        { className: `mp_badge mp_badge_${state}` },
+        h('span', { className: `mp_dot mp_dot_${state}`, 'aria-hidden': 'true' }),
+        h('span', null, t(`state.${state}`)),
+      );
+    }
+
+    /**
+     * Labelled text input that commits on blur or Enter.
+     * The draft keeps typing local; the committed value only travels upward on
+     * blur/Enter, so the Host is never written per keystroke.
+     * @param {object} props - id, label, hint, value, disabled, placeholder,
+     * `onCommit`.
+     * @returns {object} the React element.
+     */
+    function TextField(props) {
+      const { id, label, hint, value, disabled, placeholder, onCommit } = props;
+      const [draft, setDraft] = React.useState(String(value === undefined || value === null ? '' : value));
+      const committed = String(value === undefined || value === null ? '' : value);
+      React.useEffect(() => {
+        setDraft(committed);
+      }, [committed]);
+      const commit = () => {
+        if (draft !== committed) onCommit(draft);
+      };
+      return h(
+        'label',
+        { className: 'mp_field', htmlFor: id },
+        h('span', { className: 'mp_label' }, label),
+        h('input', {
+          id,
+          type: 'text',
+          className: 'mp_control mp_input',
+          value: draft,
+          disabled: disabled === true,
+          placeholder,
+          onChange: (event) => setDraft(event.target.value),
+          onBlur: commit,
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              event.currentTarget.blur();
+            }
+          },
+        }),
+        hint ? h('span', { className: 'mp_hint' }, hint) : null,
+      );
+    }
+
+    /**
+     * Labelled checkbox with an explanatory hint.
+     * @param {object} props - id, checked, disabled, label, hint, onChange.
+     * @returns {object} the React element.
+     */
+    function CheckField(props) {
+      const id = props.id;
+      return h(
+        'div',
+        { className: 'mp_check' },
+        h('input', {
+          id,
+          type: 'checkbox',
+          checked: props.checked === true,
+          disabled: props.disabled === true,
+          onChange: (event) => props.onChange(event.target.checked === true),
+        }),
+        h(
+          'div',
+          { className: 'mp_checkText' },
+          h('label', { className: 'mp_checkLabel', htmlFor: id }, props.label),
+          props.hint ? h('p', { className: 'mp_hint' }, props.hint) : null,
+        ),
+      );
+    }
+
+    /**
+     * Whole-number field that commits on blur or Enter.
+     * The draft keeps typing local until it parses, so a half-typed number never
+     * becomes a Host write.
+     * @param {object} props - id, label, hint, value, min, max, step, disabled,
+     * `onCommit`, `t`.
+     * @returns {object} the React element.
+     */
+    function NumberField(props) {
+      const { id, label, hint, value, min, max, step, disabled, onCommit, t } = props;
+      const [draft, setDraft] = React.useState(String(value));
+      const [invalid, setInvalid] = React.useState(false);
+      React.useEffect(() => {
+        setDraft(String(value));
+        setInvalid(false);
+      }, [value]);
+      /**
+       * Commit the field value. The live input value is read from the event when
+       * one is available, so a blur in the same tick as the edit still sees it.
+       * @param {object} [event] - the blur/key event, if any.
+       */
+      const commit = (event) => {
+        const target = event && event.currentTarget;
+        const raw = target && typeof target.value === 'string' ? target.value : draft;
+        const parsed = Number.parseInt(raw, 10);
+        if (!Number.isFinite(parsed)) {
+          setInvalid(true);
+          return;
+        }
+        const clamped = Math.min(max, Math.max(min, parsed));
+        setInvalid(false);
+        setDraft(String(clamped));
+        if (clamped !== value) onCommit(clamped);
+      };
+      return h(
+        'div',
+        { className: 'mp_field' },
+        h('label', { className: 'mp_label', htmlFor: id }, label),
+        h('input', {
+          id,
+          className: 'mp_control mp_controlNum',
+          type: 'number',
+          inputMode: 'numeric',
+          min,
+          max,
+          step,
+          value: draft,
+          disabled: disabled === true,
+          'aria-invalid': invalid ? 'true' : undefined,
+          onChange: (event) => setDraft(event.target.value),
+          onBlur: commit,
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') event.currentTarget.blur();
+          },
+        }),
+        invalid ? h('p', { className: 'mp_error', role: 'alert' }, t('invalidNumber', { min, max })) : h('p', { className: 'mp_hint' }, hint),
+      );
+    }
+
+    /**
+     * One candidate route inside an expanded pool model.
+     * @param {object} props - route, health entry, t, now.
+     * @returns {object} the React element.
+     */
+    function RouteRow(props) {
+      const { entry, t, now } = props;
+      const route = props.route !== null && typeof props.route === 'object' ? props.route : {};
+      const state = routeState(entry, now);
+      const reasoning = route.reasoning !== null && typeof route.reasoning === 'object' ? route.reasoning : {};
+      const efforts = Array.isArray(reasoning.efforts) ? reasoning.efforts.filter((effort) => effort !== null && typeof effort === 'object' && typeof effort.id === 'string') : [];
+      const defaultEffort = typeof reasoning.defaultEffort === 'string' ? reasoning.defaultEffort : '';
+      // What this concrete route accepts. The candidates behind one pool model do
+      // not agree here — that divergence is exactly why a route that cannot see an
+      // image is called out: the pool promises images as soon as one candidate
+      // takes them, so a text-only route is the one a screenshot never reaches.
+      const modalities = declaredModalities(route);
+      const imageCapable = acceptsImages(route);
+      const meta = [];
+      if (Number.isFinite(route.contextWindow)) meta.push(t('contextWindow', { tokens: formatWindow(route.contextWindow) }));
+      if (Number.isFinite(route.weight) && route.weight > 1) meta.push(t('weightLabel', { weight: route.weight }));
+      if (entry && Number.isFinite(entry.latencyMs)) meta.push(t('latency', { ms: Math.round(entry.latencyMs) }));
+      const reason = state !== 'ok' && entry && typeof entry.reason === 'string' && entry.reason !== '' ? entry.reason : '';
+      // Names carry the row; the raw route ids sit underneath in small mono text.
+      const providerLabel = typeof route.providerName === 'string' && route.providerName !== '' ? route.providerName : String(route.provider ?? '');
+      const modelLabel = typeof route.name === 'string' && route.name !== '' ? route.name : String(route.model ?? '');
+      return h(
+        'div',
+        { className: 'mp_route' },
+        h('span', { className: `mp_dot mp_dot_${state}`, 'aria-hidden': 'true' }),
+        h(
+          'div',
+          { className: 'mp_routeBody' },
+          h(
+            'div',
+            { className: 'mp_routeTitle' },
+            h('span', { className: 'mp_routeProvider' }, providerLabel),
+            ' · ',
+            h('span', { className: 'mp_routeModel' }, modelLabel),
+          ),
+          h('div', { className: 'mp_routeIds mp_mono' }, `${String(route.provider)} · ${String(route.model)}`),
+          meta.length > 0 ? h('div', { className: 'mp_routeMeta' }, meta.join(' · ')) : null,
+          reason !== '' ? h('div', { className: 'mp_routeReason' }, t('reason', { reason })) : null,
+          h(
+            'div',
+            { className: 'mp_chips', 'data-modalities': modalities.join(' '), title: t(imageCapable ? 'modalityRouteHint' : 'modalityRouteTextOnlyHint') },
+            modalities.map((modality) =>
+              h(
+                'span',
+                {
+                  key: modality,
+                  className: modality === IMAGE_MODALITY ? 'mp_chip mp_chipImage' : 'mp_chip',
+                },
+                modalityLabel(t, modality),
+              ),
+            ),
+            imageCapable ? null : h('span', { className: 'mp_chip mp_chipWarn' }, t('modalityTextOnlyTag')),
+          ),
+          h(
+            'div',
+            { className: 'mp_chips' },
+            efforts.length === 0
+              ? h('span', { className: 'mp_routeMeta' }, t('noEfforts'))
+              : efforts.map((effort) => {
+                  const isDefault = defaultEffort !== '' && effort.id === defaultEffort;
+                  return h(
+                    'span',
+                    {
+                      key: effort.id,
+                      className: isDefault ? 'mp_chip mp_chipDefault' : 'mp_chip',
+                      title: typeof effort.description === 'string' && effort.description !== '' ? effort.description : undefined,
+                    },
+                    typeof effort.name === 'string' && effort.name !== '' ? effort.name : effort.id,
+                    isDefault ? h('span', { className: 'mp_chipTag' }, t('defaultEffortTag')) : null,
+                  );
+                }),
+          ),
+        ),
+        h('div', { className: 'mp_routeState' }, h('span', { className: 'mp_routeMeta' }, t(`state.${state}`))),
+      );
+    }
+
+    /**
+     * One pool-model row plus its expandable route list.
+     * @param {object} props - model, health index, t, now, expanded, onToggle.
+     * @returns {object} the React element.
+     */
+    function ModelRow(props) {
+      const { index, t, now, expanded, onToggle, rowKey } = props;
+      const model = props.model !== null && typeof props.model === 'object' ? props.model : {};
+      const routes = Array.isArray(model.routes) ? model.routes : [];
+      const state = aggregateState(routes, index, now);
+      const panelId = `mp-routes-${idFragment(rowKey)}`;
+      const name = typeof model.name === 'string' && model.name !== '' ? model.name : String(model.id === undefined ? '' : model.id);
+      const showId = typeof model.id === 'string' && model.id !== '' && model.id !== name;
+      // The pool advertises the union of its candidates, so this marker answers
+      // the picker-side question — is this the pooled model to choose for a
+      // screenshot? — without expanding the row to inspect each route.
+      const imageCapable = acceptsImages(model);
+      return h(
+        'li',
+        { className: 'mp_model' },
+        h(
+          'button',
+          {
+            type: 'button',
+            className: 'mp_row mp_grid',
+            'aria-expanded': expanded ? 'true' : 'false',
+            'aria-controls': expanded ? panelId : undefined,
+            onClick: onToggle,
+          },
+          h(
+            'span',
+            { className: 'mp_modelName' },
+            h(
+              'span',
+              { className: 'mp_nameRow' },
+              h('span', { className: 'mp_name' }, name),
+              imageCapable ? h('span', { className: 'mp_chip mp_chipImage mp_nameFlag', title: t('modalityPoolHint') }, t('modalityImage')) : null,
+            ),
+            showId ? h('span', { className: 'mp_id mp_mono' }, model.id) : null,
+          ),
+          h('span', { className: 'mp_num', title: t('providersCount', { count: providerCount(routes) }) }, String(providerCount(routes))),
+          h('span', { className: 'mp_num', title: t('depthsCount', { count: depthCount(model) }) }, String(depthCount(model))),
+          h('span', null, h(StateBadge, { state, t })),
+          h('span', { className: 'mp_chevron', 'aria-hidden': 'true' }, expanded ? '▾' : '▸'),
+        ),
+        expanded
+          ? h(
+              'div',
+              { className: 'mp_routes', id: panelId },
+              routes.length === 0
+                ? h('p', { className: 'mp_hint' }, t('noRoutes'))
+                : routes.map((route, position) =>
+                    h(RouteRow, {
+                      key: `${String(route.provider)}/${String(route.model)}/${position}`,
+                      route,
+                      entry: index.get(routeKey(route.provider, route.model)),
+                      t,
+                      now,
+                    }),
+                  ),
+            )
+          : null,
+      );
+    }
+
+    /**
+     * One row of the provider-priority list: an editable id plus move/remove.
+     * A provider that is not currently registered is still shown (flagged) so a
+     * typo or a temporarily missing provider is visible instead of silently lost.
+     * @param {object} props - `index`, `value`, `total`, `known`, `t`, `disabled`,
+     * `onEdit`, `onMove`, `onRemove`, `rowClass`.
+     * @returns {object} the React element.
+     */
+    function ProviderPriorityRow(props) {
+      const { index, value, total, name, known, t, disabled, onMove, onRemove, rowClass } = props;
+      const id = typeof value === 'string' ? value : '';
+      // An id the registry no longer reports is kept on the list but flagged, so a
+      // provider that is temporarily unmounted is not silently dropped.
+      const missing = known !== undefined && known.has(id) === false;
+      const label = typeof name === 'string' && name !== '' ? name : id;
+      // The row class is a prop so a second list on the same page can carry its
+      // own marker: the provider-priority card identifies its rows by this class,
+      // and sharing it would make the two lists indistinguishable.
+      return h(
+        'li',
+        { className: rowClass === undefined ? 'mp_prioRow' : rowClass },
+        h('span', { className: 'mp_prioIndex', 'aria-hidden': 'true' }, String(index + 1)),
+        h(
+          'span',
+          { className: 'mp_prioName', title: id === label ? undefined : `${label} (${id})` },
+          h('span', { className: 'mp_prioLabel' }, label),
+          id !== label ? h('span', { className: 'mp_prioId mp_mono' }, id) : null,
+          missing ? h('span', { className: 'mp_prioWarn' }, t('priorityUnknown')) : null,
+        ),
+        h(
+          'span',
+          { className: 'mp_prioActions' },
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn mp_btnIcon',
+              disabled,
+              onClick: () => onMove(index, -1),
+              'aria-label': `${t('priorityUp')}: ${label}`,
+              title: t('priorityUp'),
+            },
+            '↑',
+          ),
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn mp_btnIcon',
+              disabled,
+              onClick: () => onMove(index, 1),
+              'aria-label': `${t('priorityDown')}: ${label}`,
+              title: t('priorityDown'),
+            },
+            '↓',
+          ),
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn mp_btnIcon mp_btnDanger',
+              disabled,
+              onClick: () => onRemove(index),
+              'aria-label': `${t('priorityRemove')}: ${label}`,
+              title: t('priorityRemove'),
+            },
+            '×',
+          ),
+        ),
+      );
+    }
+
+    /**
+     * One editable merged group.
+     * Local textarea state is kept per group so typing stays responsive; the
+     * value is split into the `models` array only on change, and the parent
+     * decides when to persist the whole list.
+     * @param {object} props - `index`, `group`, `t`, `disabled`, `onChange`, `onRemove`.
+     * @returns {object} the React element.
+     */
+    function MergedGroupRow(props) {
+      const { index, t, disabled, onChange, onRemove } = props;
+      const group = props.group !== null && typeof props.group === 'object' ? props.group : {};
+      const models = Array.isArray(group.models) ? group.models.filter((entry) => typeof entry === 'string') : [];
+      const [text, setText] = React.useState(() => models.join('\n'));
+      const lastModels = React.useRef(models.join('\n'));
+      // Re-sync when the stored value changes from outside (a save round-trip or
+      // a reset), but never while the user is mid-edit in this textarea.
+      const incoming = models.join('\n');
+      React.useEffect(() => {
+        if (incoming !== lastModels.current) {
+          lastModels.current = incoming;
+          setText(incoming);
+        }
+      }, [incoming]);
+      const label = typeof group.name === 'string' && group.name !== '' ? group.name : String(group.id === undefined ? '' : group.id);
+      return h(
+        'div',
+        { className: 'mp_mergeGroup' },
+        h(
+          'div',
+          { className: 'mp_mergeHead' },
+          h('span', { className: 'mp_mergeIndex', 'aria-hidden': 'true' }, String(index + 1)),
+          h(TextField, {
+            id: `mp-merge-name-${index}`,
+            label: t('mergeName'),
+            value: typeof group.name === 'string' ? group.name : '',
+            disabled,
+            onCommit: (next) => onChange({ name: next }),
+            t,
+          }),
+          h(TextField, {
+            id: `mp-merge-id-${index}`,
+            label: t('mergeId'),
+            value: typeof group.id === 'string' ? group.id : '',
+            disabled,
+            onCommit: (next) => onChange({ id: next }),
+            t,
+          }),
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn mp_btnIcon mp_btnDanger',
+              disabled,
+              onClick: onRemove,
+              'aria-label': `${t('mergeRemove')}: ${label}`,
+              title: t('mergeRemove'),
+            },
+            '×',
+          ),
+        ),
+        h(
+          'div',
+          { className: 'mp_mergeBody' },
+          h('textarea', {
+            id: `mp-merge-models-${index}`,
+            className: 'mp_control mp_textarea mp_mono',
+            rows: Math.min(5, Math.max(2, models.length)),
+            value: text,
+            disabled,
+            placeholder: t('mergeModelsHint'),
+            'aria-label': t('mergeModels'),
+            title: t('mergeModelsHint'),
+            onChange: (event) => {
+              const next = event.target.value;
+              setText(next);
+              const parsed = next
+                .split('\n')
+                .map((line) => line.trim())
+                .filter((line) => line !== '');
+              lastModels.current = parsed.join('\n');
+              onChange({ models: parsed });
+            },
+          }),
+          h(CheckField, {
+            id: `mp-merge-mode-${index}`,
+            checked: group.merge !== false,
+            disabled,
+            label: t('mergeMode'),
+            hint: t('mergeModeHint'),
+            onChange: (next) => onChange({ merge: next }),
+          }),
+        ),
+      );
+    }
+
+    /**
+     * The live peak/idle reading.
+     *
+     * Everything here comes from `/state.period`, which the Host derives from the
+     * same `describePeriod` call the router uses. The card therefore explains
+     * routing rather than approximating it in the browser.
+     * @param {object} props - `period` payload and `t`.
+     * @returns {object|null} the React element, or null without a payload.
+     */
+    function PeriodSummary(props) {
+      const { period, t } = props;
+      if (period === null || typeof period !== 'object') return h('p', { className: 'mp_hint' }, t('peakNoReading'));
+      const peak = period.period === 'peak';
+      const timeZone = typeof period.timeZone === 'string' && period.timeZone !== '' ? period.timeZone : '';
+      const date = typeof period.date === 'string' && period.date !== '' ? period.date : '';
+      const clock = [date, clockOf(period)].filter((part) => part !== '').join(' ');
+      const windows = (Array.isArray(period.windows) ? period.windows : [])
+        .filter((window) => window !== null && typeof window === 'object' && typeof window.label === 'string')
+        .map((window) => window.label);
+      const weekdays = describeWeekdays(t, period.weekdays);
+      const facts = [
+        { key: 'peakWindows', value: windows.length === 0 ? t('peakWindowsNone') : windows.join(t('peakSeparator')) },
+        { key: 'peakWeekdays', value: weekdays === '' ? t('peakWeekdaysNone') : weekdays },
+      ];
+      // The next flip is only known while the feature is enabled and a boundary
+      // exists inside the module's lookahead; absent means "nothing to say".
+      if (Number.isFinite(period.nextChangeAt)) {
+        facts.push({
+          key: 'peakNextLabel',
+          value: t('peakNextValue', {
+            time: zonedClock(period.nextChangeAt, timeZone),
+            period: period.nextPeriod === 'peak' ? t('peakNowPeak') : t('peakNowIdle'),
+          }),
+        });
+      }
+      const warning = period.holiday === true
+        ? t('peakHolidayWarning')
+        : period.makeupWorkday === true && period.period !== 'peak'
+          ? t('peakMakeupWarning')
+          : '';
+      return h(
+        React.Fragment,
+        null,
+        h(
+          'div',
+          { className: 'mp_periodHead' },
+          h(
+            'span',
+            { className: peak ? 'mp_periodBadge mp_periodBadge_peak' : 'mp_periodBadge', 'data-period': peak ? 'peak' : 'offPeak' },
+            h('span', { className: peak ? 'mp_periodDot mp_periodDot_peak' : 'mp_periodDot', 'aria-hidden': 'true' }),
+            h('span', null, peak ? t('peakNowPeak') : t('peakNowIdle')),
+          ),
+          h('span', { className: 'mp_periodClock' }, t('peakAt', { clock, zone: timeZone })),
+        ),
+        period.enabled === false ? h('p', { className: 'mp_hint' }, t('peakNowDisabled')) : null,
+        h(
+          'div',
+          { className: 'mp_periodFacts' },
+          facts.map((fact) =>
+            h(
+              'div',
+              { className: 'mp_periodFact', key: fact.key },
+              h('span', { className: 'mp_periodFactKey' }, t(fact.key)),
+              h('span', { className: 'mp_periodFactValue' }, fact.value),
+            ),
+          ),
+        ),
+        warning !== '' ? h('p', { className: 'mp_periodWarn', role: 'status' }, warning) : null,
+      );
+    }
+
+    /**
+     * Labelled textarea holding one string per line.
+     *
+     * The draft keeps typing local and commits on blur, so the Host is written
+     * once per edit rather than once per keystroke. It re-syncs from the stored
+     * value only when that value changed from outside — a save round-trip or a
+     * reset — never while the user is mid-edit.
+     * @param {object} props - id, label, hint, value, rows, disabled, placeholder,
+     * `onCommit`.
+     * @returns {object} the React element.
+     */
+    function ListField(props) {
+      const { id, label, hint, value, rows, disabled, placeholder, onCommit } = props;
+      const items = Array.isArray(value) ? value.filter((entry) => typeof entry === 'string') : [];
+      const [text, setText] = React.useState(() => items.join('\n'));
+      const lastItems = React.useRef(items.join('\n'));
+      const incoming = items.join('\n');
+      React.useEffect(() => {
+        if (incoming !== lastItems.current) {
+          lastItems.current = incoming;
+          setText(incoming);
+        }
+      }, [incoming]);
+      const commit = () => {
+        const parsed = text
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line !== '');
+        if (parsed.join('\n') !== incoming) onCommit(parsed);
+      };
+      return h(
+        'div',
+        { className: 'mp_field' },
+        h('label', { className: 'mp_label', htmlFor: id }, label),
+        h('textarea', {
+          id,
+          className: 'mp_control mp_textarea mp_mono',
+          rows: rows,
+          value: text,
+          disabled: disabled === true,
+          placeholder,
+          onChange: (event) => setText(event.target.value),
+          onBlur: commit,
+        }),
+        hint ? h('p', { className: 'mp_hint' }, hint) : null,
+      );
+    }
+
+    /**
+     * Weekday multi-select as one checkbox per ISO weekday.
+     *
+     * A checkbox row rather than a multi-`<select>`: the set is small, every
+     * choice stays visible, and "nothing selected" is legible as "never peak".
+     * @param {object} props - id prefix, label, hint, value, disabled, `t`,
+     * `onChange`.
+     * @returns {object} the React element.
+     */
+    function WeekdayField(props) {
+      const { idPrefix, label, hint, value, disabled, t, onChange } = props;
+      const days = (Array.isArray(value) ? value : []).filter((day) => WEEKDAYS.indexOf(day) >= 0);
+      return h(
+        'div',
+        { className: 'mp_field' },
+        h('span', { className: 'mp_label' }, label),
+        h(
+          'div',
+          { className: 'mp_periodWeekdays' },
+          WEEKDAYS.map((day) =>
+            h(
+              'label',
+              { className: 'mp_check', key: day, htmlFor: `${idPrefix}-${day}` },
+              h('input', {
+                id: `${idPrefix}-${day}`,
+                type: 'checkbox',
+                checked: days.indexOf(day) >= 0,
+                disabled: disabled === true,
+                onChange: (event) => {
+                  const next = days.filter((entry) => entry !== day);
+                  if (event.target.checked === true) next.push(day);
+                  onChange(next.sort((left, right) => left - right));
+                },
+              }),
+              h('span', { className: 'mp_checkLabel' }, weekdayName(t, day)),
+            ),
+          ),
+        ),
+        hint ? h('p', { className: 'mp_hint' }, hint) : null,
+      );
+    }
+
+    /**
+     * The read-only holiday calendar block.
+     *
+     * These dates are fetched and cached by the Host; the page only reports what
+     * it got. Nothing here is editable, because a hand-typed statutory calendar
+     * is exactly what this feature replaces.
+     * @param {object} props - `calendar` payload, `updateDays`, `busy`, `t`,
+     * `disabled`, `onSync`.
+     * @returns {object} the React element.
+     */
+    function HolidayCalendar(props) {
+      const { calendar, updateDays, busy, t, disabled, onSync } = props;
+      if (calendar === null || typeof calendar !== 'object') return h('p', { className: 'mp_hint' }, t('holidayNoReading'));
+      const years = Array.isArray(calendar.years) ? calendar.years.filter((year) => Number.isFinite(year)) : [];
+      const pendingYears = Array.isArray(calendar.pendingYears) ? calendar.pendingYears.filter((year) => Number.isFinite(year)) : [];
+      const papers = Array.isArray(calendar.papers) ? calendar.papers.filter((entry) => typeof entry === 'string' && entry !== '') : [];
+      const fetchedAt = Number.isFinite(calendar.fetchedAt) ? calendar.fetchedAt : null;
+      const lastError = typeof calendar.lastError === 'string' && calendar.lastError !== '' ? calendar.lastError : '';
+      const source = typeof calendar.source === 'string' && calendar.source !== '' ? calendar.source : '';
+      // One status word, in the order the facts decide it: a reported error wins,
+      // then "no cache at all", then a cache the Host itself calls stale.
+      const status = lastError !== ''
+        ? 'failed'
+        : fetchedAt === null
+          ? 'never'
+          : calendar.stale === true
+            ? 'stale'
+            : 'ok';
+      const label = status === 'failed' ? t('holidayStatusFailed') : status === 'never' ? t('holidayStatusNever') : status === 'stale' ? t('holidayStatusStale') : t('holidayStatusOk');
+      // The year the counts describe. A Host that predates `currentYear` still gets a
+      // sensible label instead of 'undefined': the browser's own year is the reading a
+      // reader expects, and the Host's own `now()` uses the same wall clock.
+      const currentYear = Number.isFinite(calendar.currentYear) ? calendar.currentYear : new Date().getFullYear();
+      // A Host that predates the per-year counts reports neither, and `numberOr` would
+      // then render "0 holidays" for a year that is fully loaded — a lie in the opposite
+      // direction from the pending case, and the worse of the two because nothing on the
+      // card reveals it. Only trust the per-year figures when the Host actually sent them.
+      const hasCurrentCounts = Number.isFinite(calendar.currentHolidayCount)
+        && Number.isFinite(calendar.currentMakeupCount);
+      const currentHolidays = hasCurrentCounts ? calendar.currentHolidayCount : 0;
+      const currentMakeup = hasCurrentCounts ? calendar.currentMakeupCount : 0;
+      // A pending year is normal, not an error: the State Council publishes next year's
+      // notice in November, so every January has a year the source cannot answer for yet.
+      // Rendering '0 holidays' there would read as a broken calendar, so the card says so
+      // instead. An absent `years` list (an older Host) cannot prove the year is missing,
+      // so only a listed-but-empty or explicitly pending year counts as unpublished.
+      const currentPending = hasCurrentCounts && currentHolidays === 0 && currentMakeup === 0
+        && (pendingYears.indexOf(currentYear) >= 0 || (years.length > 0 && years.indexOf(currentYear) < 0));
+      // Neither figure is trustworthy: fall back to the whole-set totals, which every Host
+      // reports, and label them as the cached set rather than as one year. Showing a true
+      // aggregate beats showing a false per-year zero.
+      const countsKnown = hasCurrentCounts;
+      return h(
+        'div',
+        { className: 'mp_periodBlock', 'data-calendar': status },
+        h(
+          'div',
+          { className: 'mp_periodBlockHead' },
+          h('h4', { className: 'mp_periodBlockTitle' }, t('holidayCalendarTitle')),
+          h(
+            'span',
+            { className: status === 'ok' ? 'mp_periodBadge mp_periodBadge_peak' : 'mp_periodBadge', 'data-calendar-status': status },
+            h('span', { className: status === 'ok' ? 'mp_periodDot mp_periodDot_peak' : 'mp_periodDot', 'aria-hidden': 'true' }),
+            h('span', null, label),
+          ),
+        ),
+        h(
+          'div',
+          { className: 'mp_periodFacts' },
+          // One year only: the reader wants to know whether today's calendar is right,
+          // not how much history happens to be cached. The year labels the counts so
+          // the numbers cannot be misread as a whole-set total.
+          // A Host that reports per-year figures gets the one row that answers "is this
+          // year right". An older Host gets the cached totals instead, labelled as such —
+          // showing a per-year zero it cannot vouch for would be the worse lie.
+          countsKnown
+            ? h(
+                'div',
+                { className: 'mp_periodFact', 'data-calendar-year': String(currentYear) },
+                h('span', { className: 'mp_periodFactKey' }, t('holidayYearLabel', { year: currentYear })),
+                h('span', { className: 'mp_periodFactValue' }, currentPending
+                  ? t('holidayCurrentPending')
+                  : t('holidayCounts', { holidays: currentHolidays, makeup: currentMakeup })),
+              )
+            : h(
+                'div',
+                { className: 'mp_periodFact', 'data-calendar-totals': 'true' },
+                h('span', { className: 'mp_periodFactKey' }, t('holidayTotalsLabel')),
+                h('span', { className: 'mp_periodFactValue' }, t('holidayCounts', {
+                  holidays: numberOr(calendar.holidayCount, 0),
+                  makeup: numberOr(calendar.makeupCount, 0),
+                })),
+              ),
+          h(
+            'div',
+            { className: 'mp_periodFact' },
+            h('span', { className: 'mp_periodFactKey' }, t('holidayUpdated')),
+            h('span', { className: 'mp_periodFactValue' }, fetchedAt === null ? t('holidayUpdatedNever') : zonedClock(fetchedAt, '')),
+          ),
+          source !== ''
+            ? h(
+                'div',
+                { className: 'mp_periodFact' },
+                h('span', { className: 'mp_periodFactKey' }, t('holidaySourceLabel')),
+                h('span', { className: 'mp_periodFactValue mp_mono' }, source),
+              )
+            : null,
+          // The notice URLs are shown as text, never as links: the page has no
+          // business sending a reader off-site, and the ids are what matter.
+          papers.length > 0
+            ? h(
+                'div',
+                { className: 'mp_periodFact' },
+                h('span', { className: 'mp_periodFactKey' }, t('holidayPapersLabel')),
+                h('span', { className: 'mp_periodFactValue mp_mono' }, papers.join(t('peakSeparator'))),
+              )
+            : null,
+        ),
+        h('p', { className: 'mp_hint' }, t('holidayCadence', { days: numberOr(updateDays, 7) })),
+        lastError !== '' ? h('p', { className: 'mp_error', role: 'alert' }, t('holidaySyncError', { message: lastError })) : null,
+        h(
+          'div',
+          { className: 'mp_mergeActions' },
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn',
+              disabled: disabled === true || busy === true,
+              onClick: () => {
+                onSync();
+              },
+            },
+            busy === true ? t('holidaySyncing') : t('holidaySyncNow'),
+          ),
+        ),
+      );
+    }
+
+    /**
+     * One period's provider ranking.
+     *
+     * Rows are the configured ranking followed by every other pool provider in
+     * registration order, exactly like the provider-priority card, so any
+     * provider can be moved into the ranking. The draft is local until saved:
+     * the list only reaches the Host through `onSave`.
+     * @param {object} props - `field`, `title`, `hint`, `ranking`, `providers`,
+     * `t`, `disabled`, `onSave`.
+     * @returns {object} the React element.
+     */
+    function PeriodOrderList(props) {
+      const { field, title, hint, ranking, providers, t, disabled, onSave } = props;
+      const [draft, setDraft] = React.useState(null);
+      const stored = Array.isArray(ranking) ? ranking.filter((id) => typeof id === 'string') : [];
+      const base = Array.isArray(draft) ? draft : stored;
+      const known = new Set(providers.map((provider) => provider.id));
+      const listed = base.filter((id) => known.has(id));
+      const seen = new Set(listed);
+      const shown = [...listed, ...providers.filter((provider) => !seen.has(provider.id)).map((provider) => provider.id)]
+        .map((id) => {
+          const match = providers.find((provider) => provider.id === id);
+          return { id, name: match !== undefined ? match.name : id };
+        });
+      const shownIds = shown.map((row) => row.id);
+      // Dirty is the user's intent against the stored ranking, not the visible
+      // rows against them: rows are appended from the provider directory, so
+      // comparing those would call an explicit "clear ranking" clean whenever the
+      // stored ranking happened to equal registration order.
+      const dirty = draft !== null && JSON.stringify(draft) !== JSON.stringify(stored);
+      const move = (position, delta) => {
+        setDraft(() => {
+          const next = [...shownIds];
+          const target = position + delta;
+          if (target < 0 || target >= next.length) return next;
+          const [moved] = next.splice(position, 1);
+          next.splice(target, 0, moved);
+          return next;
+        });
+      };
+      const remove = (position) => {
+        setDraft(() => {
+          const next = [...shownIds];
+          next.splice(position, 1);
+          return next;
+        });
+      };
+      return h(
+        'div',
+        { className: 'mp_periodBlock', 'data-order': field },
+        h(
+          'div',
+          { className: 'mp_periodBlockHead' },
+          h('h4', { className: 'mp_periodBlockTitle' }, title),
+          h('p', { className: 'mp_hint' }, hint),
+        ),
+        shown.length === 0
+          ? h('p', { className: 'mp_hint' }, t('peakOrderEmpty'))
+          : h('ul', { className: 'mp_prioList' }, shown.map((row, position) =>
+              h(ProviderPriorityRow, {
+                key: `${field}-${row.id}`,
+                index: position,
+                value: row.id,
+                name: row.name,
+                total: shown.length,
+                known,
+                t,
+                disabled: disabled === true,
+                onMove: move,
+                onRemove: remove,
+                rowClass: 'mp_periodRow',
+              }),
+            )),
+        h(
+          'div',
+          { className: 'mp_mergeActions' },
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn',
+              disabled: disabled === true || draft === null,
+              onClick: () => setDraft([]),
+            },
+            t('peakOrderReset'),
+          ),
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mp_btn mp_btnPrimary',
+              disabled: disabled === true || dirty !== true,
+              onClick: () => {
+                void onSave(shownIds, () => setDraft(null));
+              },
+            },
+            t('peakOrderSave'),
+          ),
+        ),
+      );
+    }
+
+    // ── the page ─────────────────────────────────────────────────────────────
+
+    /** Stable empty snapshot for the no-controller case (must not be recreated per read). */
+    const EMPTY_FORM = Object.freeze({ status: 'unavailable', value: undefined, base: undefined, user: undefined, revision: undefined, writable: false });
+    /** Stand-in controller when the configForms entry is missing. */
+    const EMPTY_CONTROLLER = { subscribe: () => () => {}, getSnapshot: () => EMPTY_FORM };
+    /** Stable subscribe/getSnapshot pair for the fallback reader. */
+    const EMPTY_SUBSCRIBE = () => () => {};
+    const EMPTY_READ = () => EMPTY_FORM;
+    /** `useSyncExternalStore` from React 18; absent on an older shell. */
+    const useSyncExternalStore = typeof React.useSyncExternalStore === 'function' ? React.useSyncExternalStore : null;
+
+    /**
+     * Read an observable snapshot and re-render when it changes.
+     * @param {{ subscribe: Function, getSnapshot: Function }} source - the pair.
+     * @returns {object} the current snapshot.
+     */
+    function useSnapshot(source) {
+      if (useSyncExternalStore !== null) return useSyncExternalStore(source.subscribe, source.getSnapshot, EMPTY_READ);
+      // React 17 fallback: a local copy kept in sync by the same subscription.
+      const [snapshot, setSnapshot] = React.useState(() => source.getSnapshot());
+      React.useEffect(() => source.subscribe(() => setSnapshot(source.getSnapshot())), [source]);
+      return snapshot;
+    }
+
+    /**
+     * Render the Settings → Model Pool page.
+     * @param {object} props - slot props: `t` and the `controller` from the
+     * registration's inject face; the shell's standard props are ignored.
+     * @returns {object} the React element.
+     */
+    function SettingsPage(props) {
+      const t = typeof props.t === 'function' ? props.t : (key) => key;
+      const controller = props.controller && typeof props.controller.getSnapshot === 'function' ? props.controller : EMPTY_CONTROLLER;
+
+      // Subscribe to the settings form controller. The pair is memoized on the
+      // controller so a re-render never churns the subscription.
+      const source = React.useMemo(
+        () => ({
+          subscribe: controller === EMPTY_CONTROLLER ? EMPTY_SUBSCRIBE : (listener) => controller.subscribe(listener),
+          getSnapshot: controller === EMPTY_CONTROLLER ? EMPTY_READ : () => controller.getSnapshot(),
+        }),
+        [controller],
+      );
+      const form = useSnapshot(source);
+
+      // Unique id prefix: two mounted instances (a transition or a second shell)
+      // must not collide on the labelled controls. `useId` exists from React 18;
+      // the fallback keeps an older shell rendering with a fixed prefix.
+      const uid = typeof React.useId === 'function' ? React.useId() : 'mp';
+      const [state, setState] = React.useState({ status: 'loading', data: null, error: null });
+      const [busy, setBusy] = React.useState(null);
+      // Kept apart from `busy`: a calendar sync only disables its own button, so
+      // the rest of the page stays usable while a slow fetch runs.
+      const [calendarBusy, setCalendarBusy] = React.useState(false);
+      const [notice, setNotice] = React.useState('');
+      const [writeBusy, setWriteBusy] = React.useState(false);
+      const [writeError, setWriteError] = React.useState('');
+      // Merged groups are edited as a local draft. `null` means "not touched
+      // yet", so the draft follows the stored config until the first edit.
+      const [mergeDraft, setMergeDraft] = React.useState(null);
+      // Provider priority is edited as a local draft for the same reason.
+      const [orderDraft, setOrderDraft] = React.useState(null);
+      const [expanded, setExpanded] = React.useState(() => new Set());
+      const tRef = React.useRef(t);
+      tRef.current = t;
+
+      /**
+       * Load one state payload. `action` picks the route and the button label.
+       * @param {'load'|'refresh'|'reset'|null} action - what triggered the read.
+       * @returns {Promise<void>} settles after the state is stored.
+       */
+      const run = React.useCallback(async (action) => {
+        setBusy(action);
+        try {
+          let payload;
+          if (action === 'reset') {
+            payload = await post('/reset-health', ACTION_TIMEOUT_MS);
+          } else if (action === 'refresh') {
+            // Force a catalog re-read. A Host without the action route still
+            // answers the read route, so the button never becomes a dead end;
+            // any other failure is a real error and is reported as one.
+            try {
+              payload = await post('/refresh', ACTION_TIMEOUT_MS);
+            } catch (cause) {
+              if (!isMissingRoute(cause)) throw cause;
+              payload = await api('/state', { timeout: STATE_TIMEOUT_MS });
+            }
+          } else {
+            payload = await api('/state', { timeout: STATE_TIMEOUT_MS });
+          }
+          setState({ status: 'ready', data: payload && typeof payload === 'object' ? payload : {}, error: null });
+          setNotice(action === 'refresh' ? 'noticeRefreshed' : action === 'reset' ? 'noticeHealthReset' : '');
+        } catch (cause) {
+          const aborted = cause !== null && typeof cause === 'object' && cause.name === 'AbortError';
+          const detail = aborted ? tRef.current('timeout') : messageOf(cause);
+          setState((current) => ({
+            status: current.data ? 'ready' : 'error',
+            data: current.data,
+            error: { message: detail },
+          }));
+          setNotice('');
+        } finally {
+          setBusy(null);
+        }
+      }, []);
+
+      React.useEffect(() => {
+        void run('load');
+      }, [run]);
+
+      /**
+       * Persist one config field through the settings form controller.
+       * @param {string} field - Config field name.
+       * @param {unknown} value - new value.
+       * @returns {Promise<void>} settles when the write is answered.
+       */
+      const writeField = React.useCallback(
+        async (field, value) => {
+          if (controller === EMPTY_CONTROLLER) return;
+          setWriteBusy(true);
+          setWriteError('');
+          try {
+            const accepted = await controller.set(field, jsonValue(value));
+            if (accepted === false) setWriteError(tRef.current('saveFailed'));
+          } catch (cause) {
+            setWriteError(messageOf(cause));
+          } finally {
+            setWriteBusy(false);
+          }
+        },
+        [controller],
+      );
+
+      const data = state.data;
+      const snapshot = data && data.snapshot !== null && typeof data.snapshot === 'object' ? data.snapshot : null;
+      const models = snapshot && Array.isArray(snapshot.models) ? snapshot.models : [];
+      const failures = snapshot && Array.isArray(snapshot.failures) ? snapshot.failures : [];
+      const httpConfig = data && data.config !== null && typeof data.config === 'object' ? data.config : {};
+      const remoteError = data && data.error !== null && typeof data.error === 'object' ? data.error : null;
+      const now = Date.now();
+      const index = healthIndex(data ? data.health : undefined);
+
+      const formReady = form && form.status === 'ready';
+      const formValue = formReady && form.value !== null && typeof form.value === 'object' ? form.value : {};
+      // `writable` is the settings document's own flag (`settings.describe()`).
+      // A state payload that explicitly reports `writable: false` on the pool
+      // snapshot also disables the controls, so either surface can veto writes.
+      const writable = formReady && form.writable !== false && !(snapshot !== null && snapshot.writable === false);
+      const strategy = STRATEGIES.indexOf(formValue.strategy) >= 0 ? formValue.strategy : 'priority';
+      const fallback = formValue.fallback !== false;
+      const skipUnavailable = formValue.skipUnavailable !== false;
+      const sticky = formValue.sticky !== false;
+      const cooldownMs = numberOr(formValue.cooldownMs, DEFAULT_COOLDOWN_MS);
+      const maxAttempts = numberOr(formValue.maxAttempts, DEFAULT_MAX_ATTEMPTS);
+      const controlsDisabled = !writable || writeBusy;
+
+      // Merged groups: the stored list is the source of truth until the user
+      // edits, after which the draft wins locally until it is saved/reset.
+      // Provider priority: same draft rule as the merged groups.
+      const storedOrder = Array.isArray(formValue.providerOrder) ? formValue.providerOrder.filter((id) => typeof id === 'string') : [];
+      const providerOrder = Array.isArray(orderDraft) ? orderDraft : storedOrder;
+      const orderDirty = orderDraft !== null ? JSON.stringify(orderDraft) !== JSON.stringify(storedOrder) : false;
+
+      /**
+       * Move one provider-priority row up or down.
+       * @param {number} position - row index.
+       * @param {number} delta - -1 for up, 1 for down.
+       * @returns {void}
+       */
+      const moveProviderOrder = (position, delta) => {
+        setOrderDraft((current) => {
+          const base = Array.isArray(current) ? [...current] : shownOrderIds();
+          const target = position + delta;
+          if (target < 0 || target >= base.length) return base;
+          const [moved] = base.splice(position, 1);
+          base.splice(target, 0, moved);
+          return base;
+        });
+      };
+
+      /**
+       * Remove one provider-priority row.
+       * @param {number} position - row index.
+       * @returns {void}
+       */
+      const removeProviderOrder = (position) => {
+        setOrderDraft((current) => {
+          const base = Array.isArray(current) ? [...current] : shownOrderIds();
+          base.splice(position, 1);
+          return base;
+        });
+      };
+
+      /**
+       * Persist the provider-priority list.
+       * @returns {Promise<void>} settles when the write is answered.
+       */
+      const saveProviderOrder = async () => {
+        const rows = Array.isArray(orderDraft) ? orderDraft : shownOrderIds();
+        const cleaned = [];
+        for (const entry of rows) {
+          const id = typeof entry === 'string' ? entry.trim() : '';
+          // Drop blanks and duplicates: the Host treats the list as a ranking, so
+          // a repeated id would only be a confusing no-op.
+          if (id === '' || cleaned.includes(id)) continue;
+          cleaned.push(id);
+        }
+        // Storing the untouched registration order would be noise: the router
+        // already falls back to registration order, so an "everything, unchanged"
+        // list is saved as an empty ranking instead.
+        const isRegistrationOrder = cleaned.length > 0
+          && cleaned.join('\u0000') === registrationOrderIds.join('\u0000');
+        await writeField('providerOrder', isRegistrationOrder ? [] : cleaned);
+        setOrderDraft(null);
+        setNotice('prioritySaved');
+        void run('refresh');
+      };
+
+      const storedGroups = Array.isArray(formValue.modelGroups) ? formValue.modelGroups : [];
+      const mergedGroups = Array.isArray(mergeDraft) ? mergeDraft : storedGroups;
+      const mergedGroupsDirty = mergeDraft !== null ? JSON.stringify(mergeDraft) !== JSON.stringify(storedGroups) : false;
+
+      /**
+       * Apply one edit to the merged-group draft.
+       * @param {number} position - group index; `length` appends.
+       * @param {object|null} patch - field patch, or null to remove the group.
+       * @returns {void}
+       */
+      const replaceMergedGroup = (position, patch) => {
+        setMergeDraft((current) => {
+          const base = Array.isArray(current) ? current : storedGroups;
+          const next = base.map((group) => (group !== null && typeof group === 'object' ? { ...group } : { id: '', name: '', models: [], merge: true }));
+          if (patch === null) next.splice(position, 1);
+          else if (position >= next.length) next.push({ id: '', name: '', models: [], merge: true, ...patch });
+          else next[position] = { ...next[position], ...patch };
+          return next;
+        });
+      };
+
+      /**
+       * Persist the whole merged-group list.
+       * @returns {Promise<void>} settles when the write is answered.
+       */
+      const saveMergedGroups = async () => {
+        const groups = Array.isArray(mergeDraft) ? mergeDraft : storedGroups;
+        // Drop rows the user left blank: an unnamed, selector-less group would
+        // only be rejected by the Host anyway.
+        const cleaned = groups
+          .filter((group) => group !== null && typeof group === 'object')
+          .map((group) => ({
+            id: typeof group.id === 'string' ? group.id.trim() : '',
+            name: typeof group.name === 'string' ? group.name.trim() : '',
+            models: (Array.isArray(group.models) ? group.models : []).filter((entry) => typeof entry === 'string' && entry.trim() !== ''),
+            merge: group.merge !== false,
+          }))
+          .filter((group) => group.name !== '' && group.models.length > 0);
+        await writeField('modelGroups', cleaned);
+        setMergeDraft(null);
+        setNotice('mergeSaved');
+        void run('refresh');
+      };
+
+      const allProviders = new Set();
+      for (const model of models) {
+        for (const route of Array.isArray(model && model.routes) ? model.routes : []) {
+          if (route !== null && typeof route === 'object' && typeof route.provider === 'string') allProviders.add(route.provider);
+        }
+      }
+
+      // The registry's provider directory: `{ id, name, registrationIndex }` in
+      // registration order. Used to name each row and to populate the picker, so
+      // the user never types an id.
+      const providerDirectory = snapshot !== null && Array.isArray(snapshot.providers) ? snapshot.providers.filter(
+        (entry) => entry !== null && typeof entry === 'object' && typeof entry.id === 'string',
+      ) : [];
+      const providerNames = new Map(providerDirectory.map((entry) => [entry.id, typeof entry.name === 'string' && entry.name !== '' ? entry.name : entry.id]));
+
+      // Only providers that actually contribute a route to the pool are worth
+      // ranking: a provider with no models cannot be routed to, so listing it
+      // would offer a choice that changes nothing. `poolProviders` is the
+      // registration-ordered subset, which is also the router's fallback order.
+      const poolProviders = providerDirectory
+        .filter((entry) => allProviders.has(entry.id))
+        .sort((left, right) => (left.registrationIndex ?? 0) - (right.registrationIndex ?? 0));
+      const poolProviderIds = new Set(poolProviders.map((entry) => entry.id));
+      /** The same providers with a display name resolved, for the period rankings. */
+      const orderableProviders = poolProviders.map((entry) => ({ id: entry.id, name: providerNames.get(entry.id) ?? entry.id }));
+
+      // Rows: the configured ranking first, then the remaining pool providers in
+      // registration order. With nothing configured this is exactly the
+      // registration order, which is what the router falls back to.
+      const shownOrder = (() => {
+        const listed = providerOrder.filter((id) => typeof id === 'string' && poolProviderIds.has(id));
+        const seen = new Set(listed);
+        const rest = poolProviders.filter((entry) => !seen.has(entry.id)).map((entry) => entry.id);
+        return [...listed, ...rest].map((id) => ({ id, name: providerNames.get(id) ?? id }));
+      })();
+      /** Pool-provider ids in plain registration order, used to normalize a no-op save. */
+      const registrationOrderIds = poolProviders.map((entry) => entry.id);
+      /**
+       * The ids as currently displayed, in display order.
+       *
+       * The mutators above start from this rather than from `storedOrder`:
+       * `shownOrder` appends pool providers that the ranking does not mention,
+       * so with an empty ranking the displayed list has rows while
+       * `storedOrder` has none. Reading `storedOrder` there made every move a
+       * no-op on an unconfigured pool.
+       *
+       * Declared as a function so it can be referenced by handlers defined
+       * above it; it is only called on interaction, after this line runs.
+       * @returns {string[]} provider ids in display order.
+       */
+      function shownOrderIds() {
+        return shownOrder.map((row) => row.id);
+      }
+
+      // Peak / idle policy. The values follow the same rule as every other
+      // field: the stored config is the source of truth, and an absent list is
+      // left undefined so the Host keeps its own default rather than seeing an
+      // accidental "empty".
+      const period = data && data.period !== null && typeof data.period === 'object' ? data.period : null;
+      const calendar = data && data.calendar !== null && typeof data.calendar === 'object' ? data.calendar : null;
+      const peakEnabled = formValue.peakEnabled !== false;
+      const peakTimeZone = typeof formValue.peakTimeZone === 'string' ? formValue.peakTimeZone : '';
+      const peakWindows = Array.isArray(formValue.peakWindows) ? formValue.peakWindows.filter((entry) => typeof entry === 'string') : [];
+      const peakWeekdays = Array.isArray(formValue.peakWeekdays) ? formValue.peakWeekdays.filter((entry) => WEEKDAYS.indexOf(entry) >= 0) : [];
+      const peakMakeupWorkdays = Array.isArray(formValue.peakMakeupWorkdays)
+        ? formValue.peakMakeupWorkdays.filter((entry) => typeof entry === 'string')
+        : [];
+      // Calendar sync settings. `holidaySource` and `holidayUrlTemplate` stay out
+      // of the page: the shipped source is the maintained one, and a URL
+      // template is an operator escape hatch rather than a Settings decision.
+      const holidaySync = formValue.holidaySync !== false;
+      const holidayUpdateDays = numberOr(formValue.holidayUpdateDays, DEFAULT_UPDATE_DAYS);
+      const holidayOverride = Array.isArray(formValue.holidayOverride)
+        ? formValue.holidayOverride.filter((entry) => typeof entry === 'string')
+        : [];
+      const peakProviderOrder = Array.isArray(formValue.peakProviderOrder) ? formValue.peakProviderOrder.filter((entry) => typeof entry === 'string') : [];
+      const offPeakProviderOrder = Array.isArray(formValue.offPeakProviderOrder) ? formValue.offPeakProviderOrder.filter((entry) => typeof entry === 'string') : [];
+
+      /**
+       * Persist one period ranking.
+       *
+       * Same normalisation as `saveProviderOrder`: blanks and duplicates are
+       * dropped because the Host reads the list as a ranking, and a list that
+       * reproduces registration order is stored as `[]` — for a period ranking
+       * that is "inherit `providerOrder`", which is also what "Clear ranking"
+       * means, so the untouched view never pins an accidental order.
+       * @param {string} field - `peakProviderOrder` or `offPeakProviderOrder`.
+       * @param {string[]} rows - the ids in display order.
+       * @param {Function} done - clears the component's local draft.
+       * @returns {Promise<void>} settles when the write is answered.
+       */
+      const savePeriodOrder = async (field, rows, done) => {
+        const cleaned = [];
+        for (const entry of rows) {
+          const id = typeof entry === 'string' ? entry.trim() : '';
+          if (id === '' || cleaned.includes(id)) continue;
+          cleaned.push(id);
+        }
+        const isRegistrationOrder = cleaned.length > 0
+          && cleaned.join('\u0000') === registrationOrderIds.join('\u0000');
+        await writeField(field, isRegistrationOrder ? [] : cleaned);
+        done();
+        setNotice('peakOrderSaved');
+        void run('refresh');
+      };
+
+      /**
+       * Force a calendar refetch.
+       *
+       * The route answers with the whole state payload, so the result replaces the
+       * page's state directly instead of triggering a second read. A failure keeps
+       * whatever calendar is already on screen and reports the reason.
+       * @returns {Promise<void>} settles when the sync is answered.
+       */
+      const syncCalendar = async () => {
+        setCalendarBusy(true);
+        try {
+          const payload = await post('/refresh-calendar', ACTION_TIMEOUT_MS);
+          setState({ status: 'ready', data: payload && typeof payload === 'object' ? payload : {}, error: null });
+          setNotice('noticeCalendarSynced');
+        } catch (cause) {
+          const aborted = cause !== null && typeof cause === 'object' && cause.name === 'AbortError';
+          setState((current) => ({
+            status: current.data ? 'ready' : 'error',
+            data: current.data,
+            error: { message: aborted ? tRef.current('timeout') : messageOf(cause) },
+          }));
+          setNotice('');
+        } finally {
+          setCalendarBusy(false);
+        }
+      };
+
+      let emptyText = t('emptyPool');
+      if (state.status === 'loading') emptyText = t('loading');
+      else if (state.status === 'error') emptyText = t('loadFailed');
+      else if (snapshot === null) emptyText = remoteError ? t('catalogError', { message: String(remoteError.message === undefined ? '' : remoteError.message) }) : t('noSnapshot');
+
+      const formNote =
+        form.status === 'loading'
+          ? t('formLoading')
+          : form.status === 'unavailable'
+            ? t('formUnavailable')
+            : formReady && form.writable === false
+              ? t('readOnly')
+              : '';
+
+      const toggle = (id) => {
+        setExpanded((current) => {
+          const next = new Set(current);
+          if (next.has(id)) next.delete(id);
+          else next.add(id);
+          return next;
+        });
+      };
+
+      return h(
+        React.Fragment,
+        null,
+        h(
+          'div',
+          { className: 'mp_page', 'data-plugin': 'dsh-model-pool' },
+          h(
+            'div',
+            { className: 'mp_head' },
+            h('div', { className: 'mp_headText' }, h('h2', { className: 'mp_title' }, t('title')), h('p', { className: 'mp_intro' }, t('intro'))),
+            h(
+              'div',
+              { className: 'mp_actions' },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'mp_btn',
+                  disabled: busy !== null,
+                  onClick: () => {
+                    void run('refresh');
+                  },
+                },
+                busy === 'refresh' ? t('refreshing') : t('refresh'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'mp_btn',
+                  disabled: busy !== null,
+                  onClick: () => {
+                    void run('reset');
+                  },
+                },
+                busy === 'reset' ? t('resetting') : t('resetHealth'),
+              ),
+            ),
+          ),
+
+          formNote !== '' ? h('p', { className: 'mp_hint' }, formNote) : null,
+          writeError !== '' ? h('p', { className: 'mp_error', role: 'alert' }, writeError) : null,
+          state.error !== null ? h('p', { className: 'mp_error', role: 'alert' }, `${t('loadFailed')} ${state.error.message}`) : null,
+          // A partial failure: the Host answered with a snapshot but also
+          // reported a catalog problem (e.g. one provider unreadable).
+          remoteError !== null && snapshot !== null
+            ? h('p', { className: 'mp_error', role: 'status' }, t('catalogError', { message: String(remoteError.message === undefined ? '' : remoteError.message) }))
+            : null,
+          notice !== '' ? h('p', { className: 'mp_notice', role: 'status' }, t(notice)) : null,
+
+          h(
+            'section',
+            { className: 'mp_card' },
+            h('div', { className: 'mp_cardHead' }, h('h3', { className: 'mp_cardTitle' }, t('strategyTitle')), h('p', { className: 'mp_hint' }, t('strategyHint'))),
+            h(
+              'select',
+              {
+                className: 'mp_control mp_select',
+                value: strategy,
+                disabled: controlsDisabled,
+                'aria-label': t('strategyTitle'),
+                onChange: (event) => {
+                  void writeField('strategy', event.target.value);
+                },
+              },
+              STRATEGIES.map((id) => h('option', { key: id, value: id }, t(`strategy.${id}`))),
+            ),
+            h('p', { className: 'mp_hint' }, t(`strategy.${strategy}.desc`)),
+          ),
+
+          h(
+            'section',
+            { className: 'mp_card' },
+            h('div', { className: 'mp_cardHead' }, h('h3', { className: 'mp_cardTitle' }, t('behaviourTitle')), h('p', { className: 'mp_hint' }, t('behaviourHint'))),
+            h(
+              'div',
+              { className: 'mp_checks' },
+              h(CheckField, {
+                id: `${uid}-fallback`,
+                checked: fallback,
+                disabled: controlsDisabled,
+                label: t('fallback'),
+                hint: t('fallbackHint'),
+                onChange: (next) => {
+                  void writeField('fallback', next);
+                },
+              }),
+              h(CheckField, {
+                id: `${uid}-skip-unavailable`,
+                checked: skipUnavailable,
+                disabled: controlsDisabled,
+                label: t('skipUnavailable'),
+                hint: t('skipUnavailableHint'),
+                onChange: (next) => {
+                  void writeField('skipUnavailable', next);
+                },
+              }),
+              h(CheckField, {
+                id: `${uid}-sticky`,
+                checked: sticky,
+                disabled: controlsDisabled,
+                label: t('sticky'),
+                hint: t('stickyHint'),
+                onChange: (next) => {
+                  void writeField('sticky', next);
+                },
+              }),
+            ),
+            h(
+              'div',
+              { className: 'mp_formGrid' },
+              h(NumberField, {
+                id: `${uid}-cooldown`,
+                label: t('cooldownMs'),
+                hint: t('cooldownMsHint'),
+                value: cooldownMs,
+                min: 0,
+                max: 3600000,
+                step: 1000,
+                disabled: controlsDisabled,
+                onCommit: (next) => {
+                  void writeField('cooldownMs', next);
+                },
+                t,
+              }),
+              h(NumberField, {
+                id: `${uid}-max-attempts`,
+                label: t('maxAttempts'),
+                hint: t('maxAttemptsHint'),
+                value: maxAttempts,
+                min: 1,
+                max: 20,
+                step: 1,
+                disabled: controlsDisabled,
+                onCommit: (next) => {
+                  void writeField('maxAttempts', next);
+                },
+                t,
+              }),
+            ),
+          ),
+
+          h(
+            'section',
+            { className: 'mp_card', 'data-card': 'peak' },
+            h(
+              'div',
+              { className: 'mp_cardHead' },
+              h('h3', { className: 'mp_cardTitle' }, t('peakTitle')),
+              h('p', { className: 'mp_hint' }, t('peakHint')),
+            ),
+
+            // (a) the live reading, straight from the payload the router used
+            h(PeriodSummary, { period, t }),
+
+            // (b) the policy: switch, zone, windows, weekdays, holiday lists
+            h(
+              'div',
+              { className: 'mp_checks' },
+              h(CheckField, {
+                id: `${uid}-peak-enabled`,
+                checked: peakEnabled,
+                disabled: controlsDisabled,
+                label: t('peakEnabled'),
+                hint: t('peakEnabledHint'),
+                onChange: (next) => {
+                  void writeField('peakEnabled', next);
+                },
+              }),
+            ),
+            h(
+              'div',
+              { className: 'mp_periodGrid' },
+              h(TextField, {
+                id: `${uid}-peak-tz`,
+                label: t('peakTimeZone'),
+                hint: t('peakTimeZoneHint'),
+                value: peakTimeZone,
+                disabled: controlsDisabled,
+                placeholder: 'Asia/Shanghai',
+                onCommit: (next) => {
+                  void writeField('peakTimeZone', next);
+                },
+              }),
+              h(WeekdayField, {
+                idPrefix: `${uid}-peak-day`,
+                label: t('peakWeekdays'),
+                hint: t('peakWeekdaysHint'),
+                value: peakWeekdays,
+                disabled: controlsDisabled,
+                onChange: (next) => {
+                  void writeField('peakWeekdays', next);
+                },
+                t,
+              }),
+            ),
+            h(ListField, {
+              id: `${uid}-peak-windows`,
+              label: t('peakWindows'),
+              hint: t('peakWindowsHint'),
+              value: peakWindows,
+              rows: Math.min(5, Math.max(2, peakWindows.length)),
+              disabled: controlsDisabled,
+              placeholder: '09:00-12:00',
+              onCommit: (next) => {
+                void writeField('peakWindows', next);
+              },
+            }),
+            // The statutory calendar is fetched, never typed: the block reports it
+            // read-only, and the only control is a manual refetch.
+            h(HolidayCalendar, {
+              calendar,
+              updateDays: holidayUpdateDays,
+              busy: calendarBusy,
+              t,
+              disabled: controlsDisabled,
+              onSync: () => {
+                void syncCalendar();
+              },
+            }),
+            h(
+              'div',
+              { className: 'mp_checks' },
+              h(CheckField, {
+                id: `${uid}-holiday-sync`,
+                checked: holidaySync,
+                disabled: controlsDisabled,
+                label: t('holidaySync'),
+                hint: t('holidaySyncHint'),
+                onChange: (next) => {
+                  void writeField('holidaySync', next);
+                },
+              }),
+            ),
+            h(
+              'div',
+              { className: 'mp_periodGrid' },
+              h(ListField, {
+                id: `${uid}-peak-makeup`,
+                label: t('peakMakeupWorkdays'),
+                hint: t('peakMakeupWorkdaysHint'),
+                value: peakMakeupWorkdays,
+                rows: Math.min(8, Math.max(3, peakMakeupWorkdays.length)),
+                disabled: controlsDisabled,
+                placeholder: '2026-10-10',
+                onCommit: (next) => {
+                  void writeField('peakMakeupWorkdays', next);
+                },
+              }),
+            ),
+            // A one-off correction layered on top of the fetch. Deliberately the
+            // last thing in the card and explicitly labelled advanced: the normal
+            // path must stay "not configured by hand".
+            h(
+              'div',
+              { className: 'mp_periodBlock' },
+              h('h4', { className: 'mp_periodBlockTitle' }, t('holidayAdvanced')),
+              h(ListField, {
+                id: `${uid}-holiday-override`,
+                label: t('holidayOverride'),
+                hint: t('holidayOverrideHint'),
+                value: holidayOverride,
+                rows: Math.min(5, Math.max(2, holidayOverride.length)),
+                disabled: controlsDisabled,
+                placeholder: '2026-10-01',
+                onCommit: (next) => {
+                  void writeField('holidayOverride', next);
+                },
+              }),
+            ),
+
+            // (c) the two rankings, each saved on its own
+            h(
+              'div',
+              { className: 'mp_periodGrid' },
+              h(PeriodOrderList, {
+                field: 'peakProviderOrder',
+                title: t('peakPeakOrder'),
+                hint: t('peakPeakOrderHint'),
+                ranking: peakProviderOrder,
+                providers: orderableProviders,
+                t,
+                disabled: controlsDisabled,
+                onSave: (rows, done) => savePeriodOrder('peakProviderOrder', rows, done),
+              }),
+              h(PeriodOrderList, {
+                field: 'offPeakProviderOrder',
+                title: t('peakOffPeakOrder'),
+                hint: t('peakOffPeakOrderHint'),
+                ranking: offPeakProviderOrder,
+                providers: orderableProviders,
+                t,
+                disabled: controlsDisabled,
+                onSave: (rows, done) => savePeriodOrder('offPeakProviderOrder', rows, done),
+              }),
+            ),
+          ),
+
+          h(
+            'section',
+            { className: 'mp_card' },
+            h(
+              'div',
+              { className: 'mp_cardHead' },
+              h('h3', { className: 'mp_cardTitle' }, t('priorityTitle')),
+              h('p', { className: 'mp_hint' }, t('priorityHint')),
+            ),
+            shownOrder.length === 0
+              ? h('p', { className: 'mp_hint' }, t('priorityEmpty'))
+              : h('ul', { className: 'mp_prioList' }, shownOrder.map((provider, position) =>
+                  h(ProviderPriorityRow, {
+                    key: `prio-${String(provider.id)}`,
+                    index: position,
+                    value: provider.id,
+                    name: provider.name,
+                    total: shownOrder.length,
+                    known: allProviders,
+                    t,
+                    disabled: controlsDisabled,
+                    onMove: moveProviderOrder,
+                    onRemove: removeProviderOrder,
+                  }),
+                )),
+            h(
+              'div',
+              { className: 'mp_mergeActions' },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'mp_btn',
+                  disabled: controlsDisabled || orderDirty !== true,
+                  onClick: () => {
+                    // An empty ranking *is* registration order: `shownOrder` appends
+                    // every pool provider the ranking omits. Saving this stores `[]`,
+                    // which is exactly the unconfigured state.
+                    setOrderDraft([]);
+                  },
+                },
+                t('priorityReset'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'mp_btn mp_btnPrimary',
+                  disabled: controlsDisabled || orderDirty !== true,
+                  onClick: () => {
+                    void saveProviderOrder();
+                  },
+                },
+                t('prioritySave'),
+              ),
+            ),
+          ),
+
+          h(
+            'section',
+            { className: 'mp_card' },
+            h(
+              'div',
+              { className: 'mp_cardHead' },
+              h('h3', { className: 'mp_cardTitle' }, t('mergeTitle')),
+              h('p', { className: 'mp_hint' }, t('mergeHint')),
+            ),
+            mergedGroups.length === 0
+              ? h('p', { className: 'mp_hint' }, t('mergeEmpty'))
+              : mergedGroups.map((group, position) =>
+                  h(MergedGroupRow, {
+                    key: `merge-${position}`,
+                    index: position,
+                    group,
+                    t,
+                    disabled: controlsDisabled,
+                    onChange: (patch) => replaceMergedGroup(position, patch),
+                    onRemove: () => replaceMergedGroup(position, null),
+                  }),
+                ),
+            h(
+              'div',
+              { className: 'mp_mergeActions' },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'mp_btn',
+                  disabled: controlsDisabled,
+                  onClick: () => replaceMergedGroup(mergedGroups.length, { id: '', name: '', models: [], merge: true }),
+                },
+                t('mergeAdd'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'mp_btn mp_btnPrimary',
+                  disabled: controlsDisabled || mergedGroupsDirty !== true,
+                  onClick: () => {
+                    void saveMergedGroups();
+                  },
+                },
+                t('mergeSave'),
+              ),
+            ),
+          ),
+
+          h(
+            'section',
+            { className: 'mp_card' },
+            h(
+              'div',
+              { className: 'mp_cardHead' },
+              h('h3', { className: 'mp_cardTitle' }, t('poolTitle')),
+              h('p', { className: 'mp_hint' }, t('poolSummary', { models: models.length, providers: allProviders.size })),
+            ),
+            models.length === 0
+              ? null
+              : h(
+                  'div',
+                  { className: 'mp_thead mp_grid' },
+                  h('span', null, t('colModel')),
+                  h('span', { className: 'mp_num' }, t('colProviders')),
+                  h('span', { className: 'mp_num' }, t('colDepths')),
+                  h('span', null, t('colState')),
+                  h('span', { 'aria-hidden': 'true' }),
+                ),
+            models.length === 0
+              ? h('p', { className: 'mp_empty' }, emptyText)
+              : h(
+                  'ul',
+                  { className: 'mp_models' },
+                  models.map((model, position) => {
+                    // Row identity is positional: two models may share an id in
+                    // a malformed snapshot, and the disclosure must not follow.
+                    const rowKey = `${String(model && model.id)}-${position}`;
+                    return h(ModelRow, {
+                      key: rowKey,
+                      rowKey,
+                      model,
+                      index,
+                      t,
+                      now,
+                      expanded: expanded.has(rowKey),
+                      onToggle: () => toggle(rowKey),
+                    });
+                  }),
+                ),
+          ),
+
+          failures.length > 0
+            ? h(
+                'section',
+                { className: 'mp_card' },
+                h(
+                  'div',
+                  { className: 'mp_cardHead' },
+                  h('h3', { className: 'mp_cardTitle' }, t('failuresTitle')),
+                  h('p', { className: 'mp_hint' }, t('failuresHint')),
+                ),
+                h(
+                  'div',
+                  { className: 'mp_failures' },
+                  failures.map((failure, position) =>
+                    h(
+                      'p',
+                      { className: 'mp_failure', key: `${String(failure && failure.provider)}-${position}` },
+                      `${String(failure && failure.name ? failure.name : failure && failure.provider ? failure.provider : '')}: ${String(failure && failure.message ? failure.message : '')}`,
+                    ),
+                  ),
+                ),
+              )
+            : null,
+
+          h(
+            'div',
+            { className: 'mp_meta' },
+            typeof httpConfig.providerId === 'string' && httpConfig.providerId !== ''
+              ? h('span', null, t('poolRoute', { provider: typeof httpConfig.providerName === 'string' && httpConfig.providerName !== '' ? httpConfig.providerName : httpConfig.providerId, id: httpConfig.providerId }))
+              : null,
+            snapshot && Number.isFinite(snapshot.takenAt) && snapshot.takenAt > 0
+              ? h('span', null, t('takenAt', { time: new Date(snapshot.takenAt).toLocaleTimeString() }))
+              : null,
+            data && typeof data.version === 'string' && data.version !== '' ? h('span', null, t('version', { version: data.version })) : null,
+          ),
+        ),
+      );
+    }
+
+    // ── composer dock: the live route of this conversation ───────────────────
+
+    /** How often the dock refreshes while a turn is running. */
+    const DOCK_POLL_MS = 4000;
+
+    /**
+     * Render the concrete provider behind the pool for one session.
+     *
+     * The pool route the user picks is virtual, so without this the composer
+     * only ever shows "Model Pool / DeepSeek V4.1 Flash" and the real upstream
+     * stays invisible. The Host records the route that actually produced
+     * content for each session; this component reads it back.
+     *
+     * It renders nothing at all when the session never ran through the pool,
+     * so a normal conversation is unaffected.
+     *
+     * @param {object} props - slot props; `sessionId` comes from the shell.
+     * @returns {object|null} the React element, or null when inactive.
+     */
+    function PoolRouteDock(props) {
+      const t = React.useMemo(() => props.t, [props.t]);
+      const sessionId = typeof props.sessionId === 'string' ? props.sessionId : '';
+      const [route, setRoute] = React.useState(null);
+      const [failed, setFailed] = React.useState(false);
+
+      React.useEffect(() => {
+        if (sessionId === '') return undefined;
+        // `cancelled` guards against a state write after the session changed or
+        // the dock unmounted, which React would warn about.
+        let cancelled = false;
+        let timer;
+        const read = async () => {
+          try {
+            const payload = await api(`/session?id=${encodeURIComponent(sessionId)}`, { timeout: 6000 });
+            if (cancelled) return;
+            const next = payload && typeof payload.route === 'object' && payload.route !== null ? payload.route : null;
+            setRoute(next);
+            setFailed(false);
+          } catch (cause) {
+            if (!cancelled) setFailed(true);
+          }
+          if (!cancelled) timer = setTimeout(read, DOCK_POLL_MS);
+        };
+        void read();
+        return () => {
+          cancelled = true;
+          clearTimeout(timer);
+        };
+      }, [sessionId, failed === false]);
+
+      if (route === null) return null;
+
+      /** First non-empty string among the candidates. */
+      const pick = (...values) => {
+        for (const value of values) {
+          if (typeof value === 'string' && value !== '') return value;
+        }
+        return '';
+      };
+
+      const provider = pick(route.provider);
+      // Display names throughout: the ids live only in the hover title.
+      const providerLabel = pick(route.providerName, route.provider);
+      const modelLabel = pick(route.providerModelName, route.providerModel);
+      const effortLabel = pick(route.effortName, route.effort);
+      const requestedRaw = pick(route.requestedEffort);
+      const requestedLabel = pick(route.requestedEffortName, route.requestedEffort);
+      if (provider === '') return null;
+
+      // The pill shows names; the hover title adds the ids for anyone who needs
+      // to know the exact route. One part per segment, joined with a separator.
+      const titlePart = (name, id) => {
+        if (name === '' && id === '') return '';
+        if (name === '' || name === id) return id === '' ? name : id;
+        if (id === '') return name;
+        return `${name} (${id})`;
+      };
+      const titleParts = [
+        titlePart(pick(route.providerName), pick(route.provider)),
+        titlePart(pick(route.providerModelName), pick(route.providerModel)),
+        titlePart(pick(route.effortName), pick(route.effort)),
+      ].filter((part) => part !== '');
+      // The adjustment fact still travels in the hover title, where it informs
+      // without popping a box over the composer.
+      if (requestedRaw !== '') titleParts.push(t('dockEffortMapped', { requested: requestedLabel, actual: effortLabel }));
+      const title = titleParts.join(' · ');
+      return h(
+        'span',
+        { className: 'mp_dock', 'data-composer-stat': 'model-pool-route' },
+        h(
+          'span',
+          { className: 'mp_dockPill', title },
+          h('span', { className: 'mp_dockSeg mp_dockRoute' }, providerLabel),
+          modelLabel !== '' ? h('span', { className: 'mp_dockSep', 'aria-hidden': 'true' }, '·') : null,
+          modelLabel !== '' ? h('span', { className: 'mp_dockSeg' }, modelLabel) : null,
+          effortLabel !== '' ? h('span', { className: 'mp_dockSep', 'aria-hidden': 'true' }, '·') : null,
+          // Only the tier that actually ran. An adjustment note is carried in the
+          // pill's own title instead of a separate tooltip on this segment: the
+          // segment is small, easy to hover by accident, and the record describes
+          // the previous call — a floating box there reads as a complaint about
+          // the current selection.
+          effortLabel !== '' ? h('span', { className: 'mp_dockSeg' }, effortLabel) : null,
+        ),
+      );
+    }
+
+    // ── registration ─────────────────────────────────────────────────────────
+
+    /**
+     * Mount the Settings section.
+     * @param {object} ctx - browser plugin context.
+     * @returns {void}
+     */
+    function apply(ctx) {
+      installStyles();
+      const t = ctx.locale.bind(NS);
+      ctx.effect(() => ctx.locale.register(NS, { en: EN, zh: ZH }), 'model-pool: dictionaries');
+
+      const form = ctx.configForms.get(ENTRY_ID);
+
+      ctx.slots.inject('settings.section', () =>
+        ctx.slots.register(
+          {
+            name: 'settings.section',
+            id: ENTRY_ID,
+            order: 45,
+            label: () => t('nav'),
+            locale: NS,
+            inject: () => ({ controller: form }),
+          },
+          SettingsPage,
+        ),
+      );
+
+      // A fresh dock entry beside the shipped `activity`/`usage` statistics. A
+      // distinct id adds a control; reusing an id would replace that one.
+      ctx.slots.inject('conversation.composer.dock', () =>
+        ctx.slots.register(
+          {
+            name: 'conversation.composer.dock',
+            id: 'model-pool-route',
+            order: 2,
+            label: () => t('dockRoute'),
+            locale: NS,
+            inject: () => ({ t }),
+          },
+          PoolRouteDock,
+        ),
+      );
+    }
+
+    return { inject: ['slots', 'locale', 'configForms'], apply };
+  },
+});