@dsh-plugins/dsh-llm-hub 1.6.0 → 1.7.0

package/lib/client.js

@@ -168,6 +168,10 @@ window.__ModuleLoader__.load({
 				routingPrimary: '主力',
 				routingNoRecommendation: '全部不可用',
 				routingLoading: '路由解析中…',
+				routingNav: '路由',
+				// 只讲「这页怎么改」。原先这里还复述了一遍「按顺序取第一个可用的」，
+				// 而下面的规则块和模式提示已经各讲了一次 —— 同一件事在三屏之内说了三遍。
+				routingPageDesc: '每个组是一串按优先级排的模型：第一个是主力，后面依次兜底。点「设为主力」或直接在下拉框里换模型来调整顺序。',
 				routeChipSmart: '智能',
 				routeChipManual: '手动',
 				routeChipModeSmart: '智能路由',
@@ -180,10 +184,18 @@ window.__ModuleLoader__.load({
 				routeRuleText: '按组内顺序取第一个可用；探测失败或额度耗尽的自动跳过；全不可用则保持原样（fail-open）。顺序即优先级 —— 固定成本（包月/订阅）放前面，按量付费放后面兜底。',
 				routeSmartNotice: '已接管：输入框的模型下拉只作参考，实际请求按本卡规则走（实时结果见聊天框左侧 chip）。',
 				routeManualNotice: '未接管：请求还是用你在模型下拉里选的；点「智能路由」才按本卡规则自动切。',
-				routeEditHint: '编辑后点保存写入 settings.dsh-llm-hub.routing',
+				routeEditHint: '改动会自动保存到 settings.dsh-llm-hub.routing',
 				routeSave: '保存',
 				routeSaved: '已保存',
 				routeSaveFailed: '保存失败',
+				routeSaving: '保存中…',
+				routeAutoSaved: '已自动保存',
+				routeRetry: '重试',
+				routeEdit: '编辑',
+				routeCollapse: '收起',
+				routeMakePrimary: '设为主力',
+				routeNotePlaceholder: '备注',
+				routeGroupNotePlaceholder: '这组的备注（比如：公司报销额度，先用它）',
 				routeAddCandidate: '+ 添加候选',
 				routeAddProvider: '提供方',
 				routeAddModel: '模型',
@@ -213,10 +225,6 @@ window.__ModuleLoader__.load({
 				heroFastest: '最优延迟',
 				heroSecurity: '凭据防护',
 				heroSecSafe: '零明文脱敏中',
-				presetsTitle: '⚡ 热门大模型一键装配',
-				presetsSub: '点击主流服务商快速复制 YAML 配置模板与直达控制台',
-				presetsCopied: '已复制配置片段',
-				presetsCopyBtn: '复制 YAML',
 				presetsDocsBtn: '获取 Key ↗',
 				usageTitle: '本月用量',
 				usageCalls: '次调用',
@@ -322,6 +330,8 @@ window.__ModuleLoader__.load({
 				routingPrimary: 'primary',
 				routingNoRecommendation: 'none available',
 				routingLoading: 'resolving routing…',
+				routingNav: 'Routing',
+				routingPageDesc: 'Each group is a priority-ordered list: the first is primary, the rest follow as fallbacks. Use “Make primary” or swap the model in a dropdown to change the order.',
 				routeChipSmart: 'Smart',
 				routeChipManual: 'Manual',
 				routeChipModeSmart: 'Smart routing',
@@ -334,7 +344,15 @@ window.__ModuleLoader__.load({
 				routeRuleText: 'First usable candidate in group order wins; failed probes and exhausted quotas are skipped; if none is usable the original selection is kept (fail-open). Order is priority — fixed-cost plans first, metered pay-as-you-go last.',
 				routeSmartNotice: 'Takeover is on: the composer model dropdown is only a reference; requests follow this card (live result shows in the chip beside the composer).',
 				routeManualNotice: 'Not taking over: requests still use the model you picked in the dropdown. Switch to Smart routing to auto-select.',
-				routeEditHint: 'Save writes settings.dsh-llm-hub.routing',
+				routeEditHint: 'Changes auto-save to settings.dsh-llm-hub.routing',
+				routeSaving: 'Saving…',
+				routeAutoSaved: 'Auto-saved',
+				routeRetry: 'Retry',
+				routeEdit: 'Edit',
+				routeCollapse: 'Collapse',
+				routeMakePrimary: 'Make primary',
+				routeNotePlaceholder: 'Note',
+				routeGroupNotePlaceholder: 'Group note (e.g. company quota, use first)',
 				routeSave: 'Save',
 				routeSaved: 'Saved',
 				routeSaveFailed: 'Save failed',
@@ -367,10 +385,6 @@ window.__ModuleLoader__.load({
 				heroFastest: 'Fastest ping',
 				heroSecurity: 'Key security',
 				heroSecSafe: 'Masked in memory',
-				presetsTitle: '⚡ Popular LLM Quick Presets',
-				presetsSub: 'One-click YAML config snippets and official key links',
-				presetsCopied: 'YAML snippet copied',
-				presetsCopyBtn: 'Copy YAML',
 				presetsDocsBtn: 'Get Key ↗',
 				usageTitle: 'This month',
 				usageCalls: 'calls',
@@ -597,15 +611,20 @@ window.__ModuleLoader__.load({
 				'.dsh-llm-hub-routing__active{color:var(--dsw-alias-label-primary)}',
 				'.dsh-llm-hub-routing__rows{display:flex;flex-direction:column;gap:2px}',
 				'.dsh-llm-hub-routing__row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 4px}',
-				'.dsh-llm-hub-routing__role{display:inline-flex;align-items:center;height:16px;padding:0 5px;',
+				'.dsh-llm-hub-routing__role{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:18px;padding:0 6px;white-space:nowrap;',
 				'border-radius:3px;border:.5px solid var(--dsw-alias-border-l2);',
-				'background:transparent;font-size:10px;color:var(--dsw-alias-label-secondary)}',
+				'background:transparent;font-size:10.5px;color:var(--dsw-alias-label-secondary);transition:all .15s ease}',
+				// 主力：品牌色徽标，与兜底行的中性色拉开差距
+				'.dsh-llm-hub-routing__role.is-primary{',
+				'color:var(--dsw-alias-brand-primary,#3b82f6);',
+				'border-color:var(--dsw-alias-brand-primary,#3b82f6);',
+				'background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,.06));font-weight:600}',
 				'.dsh-llm-hub-routing__name{color:var(--dsw-alias-label-primary);font-weight:600}',
 				// capability 标识：思考 / 多模态。两枚 chip 同形，左思考、右图像；
 				// 边色走 state 提示色，跟健康状态 chip 区分开 —— 一个说「能干什么」，
 				// 一个说「能不能用」。
 				'.dsh-llm-hub-routing__reasoning,.dsh-llm-hub-routing__multimodal{',
-				'display:inline-flex;align-items:center;height:16px;padding:0 6px;',
+				'display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:20px;padding:0 3px;',
 				'border-radius:3px;font-size:10px;line-height:14px;font-weight:500;',
 				'background:transparent;cursor:help}',
 				// 思考：走 warn 主题色（消耗更多 token、需要警觉）
@@ -651,31 +670,99 @@ window.__ModuleLoader__.load({
 				'font-family:ui-monospace,SFMono-Regular,monospace;word-break:break-all;line-height:1.4}',
 				// 智能路由编辑器（设置页路由卡）
 				'.dsh-llm-hub-routing__modes{display:flex;gap:4px;margin-left:auto}',
-				'.dsh-llm-hub-routing__rule{display:flex;gap:6px;align-items:flex-start;font-size:10.5px;line-height:1.5;',
-				'color:var(--dsw-alias-label-secondary);padding:6px 8px;border-radius:6px;background:var(--dsw-alias-bg-layer-2)}',
-				'.dsh-llm-hub-routing__rule-tag{flex:none;font-weight:600;color:var(--dsw-alias-label-primary)}',
+				// 规则说明：去掉盒子背景，只留淡灰单行注脚，视觉权重要低于第 2 行「将路由到…」
+				'.dsh-llm-hub-routing__rule{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:10.5px;line-height:1.5;',
+				'color:var(--dsw-alias-label-tertiary);padding:0}',
+				'.dsh-llm-hub-routing__rule-tag{flex:none;font-weight:500;color:var(--dsw-alias-label-secondary)}',
 				'.dsh-llm-hub-routing__now{font-size:11px;color:var(--dsw-alias-label-primary);font-weight:600}',
 				'.dsh-llm-hub-routing__groups{display:flex;flex-direction:column;gap:6px;margin-top:8px}',
-				'.dsh-llm-hub-routing__group{border:.5px solid var(--dsw-alias-border-l1);border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:5px}',
-				'.dsh-llm-hub-routing__group.is-active{border-color:var(--dsw-alias-state-warn-primary)}',
+				'.dsh-llm-hub-routing__group{border:.5px solid var(--dsw-alias-border-l1);border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:5px;transition:border-color .15s ease,box-shadow .15s ease}',
+				// 当前组：边框降一档 + 顶部 brand 细线高亮，替代原本的 warn 四边描边
+				'.dsh-llm-hub-routing__group.is-active{border-color:var(--dsw-alias-border-l2,var(--dsw-alias-border-l1));box-shadow:inset 0 1px 0 var(--dsw-alias-brand-primary,#3b82f6)}',
 				'.dsh-llm-hub-routing__group-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}',
-				'.dsh-llm-hub-routing__group-toggle{border:0;background:0 0;padding:0;cursor:pointer;font:inherit;font-size:11px;color:var(--dsw-alias-label-secondary)}',
+				'.dsh-llm-hub-routing__group-toggle{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;margin-left:4px;',
+				'border:.5px solid var(--dsw-alias-border-l1);border-radius:4px;background:transparent;cursor:pointer;',
+				'font:inherit;font-size:11px;line-height:1;color:var(--dsw-alias-label-secondary);white-space:nowrap;transition:all .15s ease}',
+				'.dsh-llm-hub-routing__group-toggle:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l2,var(--dsw-alias-border-l1));background:var(--dsw-alias-bg-layer-2)}',
 				'.dsh-llm-hub-routing__group-order{display:flex;align-items:center;gap:2px;flex:none}',
-				'.dsh-llm-hub-routing__group-move{border:0;background:0 0;padding:0 2px;cursor:pointer;font:inherit;font-size:10px;',
-				'color:var(--dsw-alias-label-tertiary);line-height:1}',
-				'.dsh-llm-hub-routing__group-move:hover:not(:disabled){color:var(--dsw-alias-label-primary)}',
+				'.dsh-llm-hub-routing__group-move{display:inline-flex;align-items:center;justify-content:center;width:18px;height:22px;',
+				'border:0;background:transparent;padding:0;cursor:pointer;font:inherit;font-size:12px;line-height:1;',
+				'color:var(--dsw-alias-label-tertiary);border-radius:3px;transition:all .15s ease}',
+				'.dsh-llm-hub-routing__group-move:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}',
 				'.dsh-llm-hub-routing__group-move:disabled{opacity:.25;cursor:default}',
-				'.dsh-llm-hub-routing__group-state b{font-weight:600;color:var(--dsw-alias-label-primary)}',
-				'.dsh-llm-hub-routing__group-more{color:var(--dsw-alias-label-tertiary)}',
-				'.dsh-llm-hub-routing__group-would{color:var(--dsw-alias-state-warn-primary);margin-left:5px}',
 				'.dsh-llm-hub-routing__group-empty{font-style:normal;color:var(--dsw-alias-label-tertiary)}',
-				'.dsh-llm-hub-routing__group-label{flex:0 0 128px;width:128px;box-sizing:border-box;height:22px;padding:0 6px;border-radius:4px;',
-				'border:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit;font-size:11px}',
-				'.dsh-llm-hub-routing__group-state{flex:1;min-width:0;font-size:10.5px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+				// 折叠行（1.6.2）：组名 + 「将路由到 X」+ 主力 + 兜底条数，一行读完。
+				// 组名给固定宽度，与下面展开态的 label 输入框同宽 —— 收起/展开时这一列不跳。
+				'.dsh-llm-hub-routing__group-name{flex:0 0 112px;min-width:0;overflow:hidden;text-overflow:ellipsis;',
+				'white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+				'.dsh-llm-hub-routing__group-label{flex:0 0 112px;width:112px;box-sizing:border-box;height:22px;padding:0 8px;border-radius:5px;',
+				'border:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);',
+				'font:inherit;font-size:11px;outline:none;transition:border-color .15s ease}',
+				'.dsh-llm-hub-routing__group-label:focus{border-color:var(--dsw-alias-brand-primary,#3b82f6)}',
+				// 允许换行，不允许截断（1.6.2 浏览器实测后改的）。设置内容区只有 564px，
+				// 扣掉序号/组名/两个按钮，摘要只剩 ~210px；而真实数据的 provider/model
+				// 要 200-215px —— 差的这几十像素，省不掉，只能换行。之前用 nowrap+ellipsis
+				// 把「→ modelgo-gateway/claude-sonnet-5」砍成「→ modelgo-gatewa…」，
+				// 砍掉的正好是判断路由结果最需要的那段：看不出是 sonnet-5 还是别的。
+				// 组头因此高一行，是「读得全」该付的代价。
+				'.dsh-llm-hub-routing__group-state{flex:1;min-width:0;font-size:10.5px;line-height:1.5;',
+				'color:var(--dsw-alias-label-secondary);display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}',
+				// 断行点放在 provider 与 model 之间的斜杠上：读起来是两条完整信息，
+				// 而不是把一个词从中间劈开。break-all 是兜底 —— provider id 里也有长词。
+				'.dsh-llm-hub-routing__group-would{font-weight:600;color:var(--dsw-alias-label-primary);',
+				'min-width:0;word-break:break-word;overflow-wrap:anywhere}',
+				// 可用/总：紧跟在「将路由到」后面，且**不参与压缩** —— 压它等于把
+				// 「还剩几个能兜」这个答案藏掉，而它只要 30px。
+				'.dsh-llm-hub-routing__group-count{flex:none;display:inline-flex;align-items:center;gap:3px;',
+				'color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}',
+				'.dsh-llm-hub-routing__group-count .dsh-llm-hub-routing__dot{margin:0}',
 				'.dsh-llm-hub-routing__candidates{display:flex;flex-direction:column;gap:3px;padding-top:2px}',
+				// 1.7.0 路由编辑器：序号徽标、编辑按钮、原地下拉、备注、放大的操作按钮、自动保存状态
+				'.dsh-llm-hub-routing__group-index{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:22px;border-radius:4px;',
+				'padding:0 6px;font-size:10.5px;font-weight:600;background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,.08));color:var(--dsw-alias-label-secondary)}',
+				// 全组共用一张网格：行与 pick 都是 display:contents，列宽由整组一起决定 ——
+				// 各行自成网格时，右侧标签列按本行内容伸缩，模型下拉的右边缘每行都不一样（浏览器实测 908 vs 845px）。
+				'.dsh-llm-hub-routing-page{display:flex;flex-direction:column;gap:6px}',
+				'.dsh-llm-hub-routing-page__head{display:flex;align-items:center;justify-content:space-between;gap:12px}',
+				'.dsh-llm-hub-routing__group-delete{margin-left:4px;white-space:nowrap}',
+				'.dsh-llm-hub-routing-page__title{margin:0;font-size:18px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+				'.dsh-llm-hub-routing-page__desc{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--dsw-alias-label-secondary)}',
+				'.dsh-llm-hub-routing__candidates{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1.3fr);gap:4px 6px;align-items:center}',
+				'.dsh-llm-hub-routing__candidates>:not(.dsh-llm-hub-routing__row){grid-column:1/-1}',
+				'.dsh-llm-hub-routing__candidates .dsh-llm-hub-routing__row,.dsh-llm-hub-routing__candidates .dsh-llm-hub-routing__pick{display:contents}',
+				'.dsh-llm-hub-routing__candidates .dsh-llm-hub-routing__role{grid-column:1;justify-self:start;margin-top:6px}',
+				'.dsh-llm-hub-routing__candidates .dsh-llm-hub-routing__pick .dsh-llm-hub-routing__select{width:100%;min-width:0;max-width:none;margin-top:6px}',
+				'.dsh-llm-hub-routing__candidates .dsh-llm-hub-routing__name{grid-column:2/4;min-width:0;margin-top:6px}',
+				'.dsh-llm-hub-routing__line2{grid-column:2/-1;display:flex;align-items:center;gap:6px;min-width:0}',
+				// 标签区给固定宽度并靠右：有无「思考/图像」标签的行，备注框都一样宽，右边缘对齐。
+				'.dsh-llm-hub-routing__meta{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap;flex:none;width:78px}',
+				'.dsh-llm-hub-routing__dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;margin:0 2px;cursor:help;background:var(--dsw-alias-label-tertiary)}',
+				'.dsh-llm-hub-routing__dot--available{background:var(--dsw-alias-state-success-primary)}',
+				'.dsh-llm-hub-routing__dot--unavailable{background:var(--dsw-alias-state-error-primary)}',
+				// 半可用单独一色：全绿和全红之间还有「还剩几个」这个状态，
+				// 混成全绿会让人以为不用管，混成全红会误报故障。
+				'.dsh-llm-hub-routing__dot--degraded{background:var(--dsw-alias-state-warn-primary)}',
+				'.dsh-llm-hub-routing__candidates .dsh-llm-hub-routing__row .dsh-llm-hub-routing__note{flex:1 1 auto;width:auto;max-width:none;min-width:60px}',
+				// 同理固定宽度：主力行没有「设为主力」，按钮区只有 77px（其余 141px），备注右边缘会错开 64px。
+				'.dsh-llm-hub-routing__ops{display:inline-flex;justify-content:flex-end;gap:4px;white-space:nowrap;flex:none;min-width:141px}',
+				'.dsh-llm-hub-routing__note{box-sizing:border-box;height:22px;padding:0 8px;border-radius:4px;',
+				'border:.5px solid var(--dsw-alias-border-l1);background:transparent;color:var(--dsw-alias-label-secondary);',
+				'font:inherit;font-size:10.5px;flex:1 1 120px;min-width:90px;max-width:260px;outline:none;transition:border-color .15s ease}',
+				'.dsh-llm-hub-routing__note:focus{border-color:var(--dsw-alias-brand-primary,#3b82f6)}',
+				'.dsh-llm-hub-routing__note::placeholder{color:var(--dsw-alias-label-tertiary)}',
+				// 候选区是纵向 flex：note 的 flex-basis 120px 在这里会变成「高 120px」，组备注必须脱离 flex 伸缩。
+				'.dsh-llm-hub-routing__note--group{display:block;flex:none;width:100%;max-width:none;margin:2px 0 6px}',
+				'.dsh-llm-hub-routing__op{border:.5px solid var(--dsw-alias-border-l1);background:transparent;border-radius:4px;min-width:22px;height:22px;padding:0 6px;cursor:pointer;font:inherit;font-size:11.5px;color:var(--dsw-alias-label-secondary)}',
+				'.dsh-llm-hub-routing__op:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l2,var(--dsw-alias-border-l1))}',
+				'.dsh-llm-hub-routing__op:disabled{opacity:.3;cursor:default}',
+				'.dsh-llm-hub-routing__op--danger:hover:not(:disabled){color:var(--dsw-alias-state-error-primary)}',
+				'.dsh-llm-hub-routing__status{font-size:10.5px;color:var(--dsw-alias-label-tertiary)}',
+				'.dsh-llm-hub-routing__status.is-fail{color:var(--dsw-alias-state-error-primary)}',
 				'.dsh-llm-hub-routing__add{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:10.5px;color:var(--dsw-alias-label-secondary);padding-top:4px}',
-				'.dsh-llm-hub-routing__select{box-sizing:border-box;height:22px;padding:0 4px;border-radius:4px;border:.5px solid var(--dsw-alias-border-l1);',
-				'background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit;font-size:11px;max-width:170px}',
+				'.dsh-llm-hub-routing__select{box-sizing:border-box;height:22px;padding:0 6px;border-radius:4px;border:.5px solid var(--dsw-alias-border-l1);',
+				'background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit;font-size:11px;max-width:170px;outline:none;',
+				'transition:border-color .15s ease;cursor:pointer}',
+				'.dsh-llm-hub-routing__select:focus{border-color:var(--dsw-alias-brand-primary,#3b82f6)}',
 				'.dsh-llm-hub-routing__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:6px;border-top:.5px solid var(--dsw-alias-border-l1);margin-top:8px}',
 				'.dsh-llm-hub-routing__hint{font-size:10px;color:var(--dsw-alias-label-tertiary)}',
 				'.dsh-llm-hub-routing__mm{display:inline-flex;align-items:center;margin-left:4px;font-size:10px;cursor:help;',
@@ -685,17 +772,12 @@ window.__ModuleLoader__.load({
 				'.dsh-llm-hub-hero__card{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;border:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2,rgba(255,255,255,.02));backdrop-filter:blur(6px)}',
 				'.dsh-llm-hub-hero__num{font-size:15px;font-weight:700;color:var(--dsw-alias-label-primary);font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:-0.3px;line-height:1.2}',
 				'.dsh-llm-hub-hero__label{font-size:10.5px;color:var(--dsw-alias-label-secondary);opacity:.85}',
-				// 热门大模型一键装配 Hub
-				'.dsh-llm-hub-presets{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:8px 10px;border-radius:6px;border:.5px solid var(--dsw-alias-border-l1);background:transparent}',
-				'.dsh-llm-hub-presets__head{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none}',
-				'.dsh-llm-hub-presets__title{color:var(--dsw-alias-label-primary);font-weight:600;font-size:12px;display:inline-flex;align-items:center;gap:5px}',
-				'.dsh-llm-hub-presets__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin-top:6px}',
-				'.dsh-llm-hub-presets__item{display:flex;flex-direction:column;gap:3px;padding:6px 8px;border-radius:5px;border:.5px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2,rgba(255,255,255,.02));cursor:pointer;transition:all .15s ease}',
-				'.dsh-llm-hub-presets__item:hover{border-color:var(--dsw-alias-brand-primary,#3b82f6);transform:translateY(-1px);background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,.05))}',
-				'.dsh-llm-hub-presets__name{font-weight:600;font-size:11.5px;color:var(--dsw-alias-label-primary)}',
-				'.dsh-llm-hub-presets__desc{font-size:10px;color:var(--dsw-alias-label-secondary);opacity:.75;line-height:1.3}',
-				'.dsh-llm-hub-presets__detail{margin-top:6px;padding:8px;border-radius:4px;background:var(--dsw-alias-bg-layer-3,rgba(0,0,0,.2));border:.5px solid var(--dsw-alias-border-l1);font-size:11px}',
-				'.dsh-llm-hub-presets__code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;white-space:pre-wrap;color:var(--dsw-alias-label-secondary);margin:4px 0}',
+				// 添加提供方草稿卡上的匹配提示（1.6.0）
+				'.dsh-llm-hub-preset-hint{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 8px;padding:6px 10px;border-radius:6px;',
+				'border:.5px solid var(--dsw-alias-border-l1);font-size:11px;line-height:1.5}',
+				'.dsh-llm-hub-preset-hint__name{font-weight:600;color:var(--dsw-alias-label-primary)}',
+				'.dsh-llm-hub-preset-hint__desc{color:var(--dsw-alias-label-secondary);flex:1 1 auto;min-width:0}',
+				'.dsh-llm-hub-preset-hint__link{color:var(--dsw-alias-brand-primary,#3b82f6);text-decoration:none;white-space:nowrap}',
 				// 延迟高亮胶囊
 				'.dsh-llm-hub-latency-badge{display:inline-flex;align-items:center;gap:3.5px;padding:1px 5px;border-radius:3px;font-size:10.5px;font-variant-numeric:tabular-nums;line-height:1}',
 				'.dsh-llm-hub-latency-badge.is-fast{background:rgba(16,185,129,.08);color:var(--dsw-alias-state-success-primary,#10b981);border:.5px solid rgba(16,185,129,.2)}',
@@ -1543,45 +1625,45 @@ window.__ModuleLoader__.load({
 		const PRESETS = [
 			{
 				id: 'deepseek',
+				match: ['deepseek', 'llm-deepseek'],
 				name: '🇨🇳 DeepSeek 官方',
 				desc: 'V4.1 Flash / V4 Pro 极速官方直连',
-				docUrl: 'https://platform.deepseek.com/api_keys',
-				yaml: 'llm-deepseek:\n  keyPool:\n    llm-deepseek:\n      - name: "主账号"\n        env: DEEPSEEK_API_KEY\n  models:\n    - id: deepseek-flash\n      name: DeepSeek-V4.1-Flash\n    - id: deepseek-v4-pro\n      name: DeepSeek-V4-Pro'
+				docUrl: 'https://platform.deepseek.com/api_keys'
 			},
 			{
 				id: 'minimax',
+				match: ['minimax', 'minimax-cn'],
 				name: '⚡ MiniMax',
 				desc: 'MiniMax-M3 百万上下文超强大模型',
-				docUrl: 'https://platform.minimaxi.com/user-center/basic-information/interface-key',
-				yaml: 'minimax:\n  displayName: MiniMax\n  api: openai-completions\n  baseURL: https://api.minimaxi.com/v1\n  apiKeyEnv: MINIMAX_API_KEY\n  models:\n    - id: MiniMax-M3\n      name: MiniMax-M3\n    - id: MiniMax-M2.7\n      name: MiniMax-M2.7'
+				docUrl: 'https://platform.minimaxi.com/user-center/basic-information/interface-key'
 			},
 			{
 				id: 'zhipu',
+				match: ['zai-coding-cn', 'zai', 'zhipu'],
 				name: '🧠 智谱清言 GLM',
 				desc: 'GLM-5 / GLM-4.7 国内 Coding 利器',
-				docUrl: 'https://open.bigmodel.cn/usercenter/apikeys',
-				yaml: 'zai-coding-cn:\n  displayName: 智谱 GLM\n  api: openai-completions\n  baseURL: https://open.bigmodel.cn/api/paas/v4\n  apiKeyEnv: ZHIPU_API_KEY\n  models:\n    - id: glm-5-turbo\n    - id: glm-4.7'
+				docUrl: 'https://open.bigmodel.cn/usercenter/apikeys'
 			},
 			{
 				id: 'volc',
+				match: ['volcengine', 'volc', 'ark'],
 				name: '🌋 火山方舟 Ark',
 				desc: '字节豆包 Doubao-1.5 多模态矩阵',
-				docUrl: 'https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey',
-				yaml: 'volcengine:\n  displayName: 火山方舟\n  api: openai-completions\n  baseURL: https://ark.cn-beijing.volces.com/api/v3\n  apiKeyEnv: ARK_API_KEY\n  models:\n    - id: doubao-1.5-pro-32k\n    - id: doubao-1.5-lite-32k'
+				docUrl: 'https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey'
 			},
 			{
 				id: 'siliconflow',
+				match: ['siliconflow'],
 				name: '🚀 硅基流动',
 				desc: 'SiliconFlow 聚合开源高性价比模型',
-				docUrl: 'https://cloud.siliconflow.cn/account/ak',
-				yaml: 'siliconflow:\n  displayName: 硅基流动\n  api: openai-completions\n  baseURL: https://api.siliconflow.cn/v1\n  apiKeyEnv: SILICONFLOW_API_KEY\n  models:\n    - id: deepseek-ai/DeepSeek-V3\n    - id: Qwen/Qwen2.5-72B-Instruct'
+				docUrl: 'https://cloud.siliconflow.cn/account/ak'
 			},
 			{
 				id: 'openrouter',
+				match: ['openrouter'],
 				name: '🌐 OpenRouter',
 				desc: '聚合全球 Claude / GPT / Gemini 全模型',
-				docUrl: 'https://openrouter.ai/keys',
-				yaml: 'openrouter:\n  displayName: OpenRouter\n  api: openai-completions\n  baseURL: https://openrouter.ai/api/v1\n  apiKeyEnv: OPENROUTER_API_KEY\n  models:\n    - id: anthropic/claude-3.7-sonnet\n    - id: deepseek/deepseek-r1'
+				docUrl: 'https://openrouter.ai/keys'
 			}
 		]
 
@@ -1621,58 +1703,52 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * 热门大模型一键装配抽屉
+		 * 添加提供方时的匹配提示（1.6.0 起取代页脚的「热门大模型一键装配」抽屉）。
+		 *
+		 * 为什么改：抽屉常驻在模型页底部，和用户正在配哪一家毫无关系，读起来像一块广告。
+		 * 该出现的时机是「用户在添加提供方里选中了某一家」—— 宿主此时渲染草稿卡，并以
+		 * `configured: false` 派发 settings.models.provider-card（见宿主 slot-contract.d.ts）。
+		 * 于是只在这张卡上、只给匹配到的那一家一行：名称 · 推荐模型 · 获取 Key。
+		 * 不再给 YAML：草稿卡本身就是配置表单，而模板根键（minimax）与目录 id（minimax-cn）
+		 * 对不上，复制过去反而误导。没匹配到的厂商不渲染任何东西。
+		 *
+		 * @param {unknown} provider - 宿主传入的 entry 对象或 provider id 字符串。
+		 * @returns {object | undefined} 命中的预设。
 		 */
-		function QuickPresetsCard(props) {
-			const t = typeof props.t === 'function' ? props.t : fallbackT
-			const [expanded, setExpanded] = React.useState(false)
-			const [selected, setSelected] = React.useState(null)
-			const [copied, setCopied] = React.useState(false)
+		const presetFor = (provider) => {
+			const id = typeof provider === 'string' ? provider : (provider && typeof provider.provider === 'string' ? provider.provider : '')
+			return id === '' ? undefined : PRESETS.find((preset) => preset.match.includes(id))
+		}
 
+		function PresetHint(props) {
+			const t = typeof props.t === 'function' ? props.t : fallbackT
+			const preset = presetFor(props.provider)
+			if (preset === undefined) return null
 			ensureStyle()
+			return h('div', { className: 'dsh-llm-hub-preset-hint' },
+				h('span', { className: 'dsh-llm-hub-preset-hint__name' }, preset.name),
+				h('span', { className: 'dsh-llm-hub-preset-hint__desc' }, preset.desc),
+				h('a', {
+					href: preset.docUrl,
+					target: '_blank',
+					rel: 'noreferrer',
+					className: 'dsh-llm-hub-preset-hint__link'
+				}, t('presetsDocsBtn')))
+		}
 
-			const copyYaml = (e, yaml) => {
-				e.stopPropagation()
-				navigator.clipboard?.writeText(yaml).then(() => {
-					setCopied(true)
-					setTimeout(() => setCopied(false), 2000)
-				}).catch(() => {})
-			}
-
-			return h('div', { className: 'dsh-llm-hub-presets' },
-				h('div', {
-					className: 'dsh-llm-hub-presets__head',
-					onClick: () => setExpanded((prev) => !prev)
-				},
-					h('span', { className: 'dsh-llm-hub-presets__title' },
-						t('presetsTitle'),
-						h('span', { style: { fontSize: '10px', opacity: 0.6 } }, expanded ? ' ▲ 收起' : ' ▼ 展开模版')),
-					h('span', { className: 'dsh-llm-hub-subtext' }, t('presetsSub'))),
-				expanded ? h('div', { className: 'dsh-llm-hub-presets__grid' },
-					PRESETS.map((p) => h('div', {
-						key: p.id,
-						className: 'dsh-llm-hub-presets__item',
-						onClick: () => setSelected(selected?.id === p.id ? null : p)
-					},
-						h('span', { className: 'dsh-llm-hub-presets__name' }, p.name),
-						h('span', { className: 'dsh-llm-hub-presets__desc' }, p.desc)))) : null,
-				expanded && selected !== null ? h('div', { className: 'dsh-llm-hub-presets__detail' },
-					h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-						h('span', { style: { fontWeight: '600' } }, `${selected.name} 配置模版`),
-						h('div', { style: { display: 'flex', gap: '6px' } },
-							h('button', {
-								type: 'button',
-								className: 'dsh-llm-hub-btn',
-								onClick: (e) => copyYaml(e, selected.yaml)
-							}, copied ? t('presetsCopied') : t('presetsCopyBtn')),
-							h('a', {
-								href: selected.docUrl,
-								target: '_blank',
-								rel: 'noreferrer',
-								className: 'dsh-llm-hub-btn',
-								style: { textDecoration: 'none' }
-							}, t('presetsDocsBtn')))),
-					h('pre', { className: 'dsh-llm-hub-presets__code' }, selected.yaml)) : null)
+		/**
+		 * 给 provider-card 组件套上草稿态行为。直接调用原组件（而不是 h(Card)），
+		 * 保证原组件的 hooks 挂在同一个组件上、调用顺序不变 —— 草稿保存后 configured
+		 * 翻成 true，同一个组件实例继续渲染，hook 数量不能变。
+		 *
+		 * 草稿态（configured === false）只给匹配提示、丢掉原卡输出：原卡此时去查一个
+		 * 还没写进配置的 provider，必然渲染红字「llm-pi-ai 段里没有 "xxx" 这个 provider」，
+		 * 用户只是选了一下下拉框，看到的却像报错（2026-09-28 浏览器实测）。
+		 */
+		const withPresetHint = (Card) => (props) => {
+			const card = Card(props)
+			if (props.configured !== false) return card
+			return PresetHint(props)
 		}
 
 		/**
@@ -1694,6 +1770,8 @@ window.__ModuleLoader__.load({
 			const [state, setState] = React.useState(null)
 			const [open, setOpen] = React.useState(false)
 			const [busy, setBusy] = React.useState(false)
+			// 浮层根节点：判断「这次点击算不算点在浮层外面」要用它。
+			const rootRef = React.useRef(null)
 			const query = React.useCallback(() => {
 				fetch(ROUTING_STATE_URL, { headers: { accept: 'application/json' } })
 					.then((res) => res.json())
@@ -1705,6 +1783,25 @@ window.__ModuleLoader__.load({
 				const interval = setInterval(query, 30000)
 				return () => clearInterval(interval)
 			}, [query])
+			// 点浮层外面 / 按 Esc 收起来。少了这条，用户在浮层里做完选择后
+			// 手会先伸向输入框 —— 浮层却还盖在上面，不点第二次 chip 就挡着视线。
+			// 只在 open 时挂监听：关着的时候不留全局 handler。
+			// 必须写在下面那个 `state === null` 早返回之前 —— hooks 不能条件调用。
+			React.useEffect(() => {
+				if (!open) return undefined
+				const onPointerDown = (event) => {
+					const root = rootRef.current
+					if (root !== null && root !== undefined && typeof root.contains === 'function' && root.contains(event.target)) return
+					setOpen(false)
+				}
+				const onKeyDown = (event) => { if (event.key === 'Escape') setOpen(false) }
+				document.addEventListener('mousedown', onPointerDown)
+				document.addEventListener('keydown', onKeyDown)
+				return () => {
+					document.removeEventListener('mousedown', onPointerDown)
+					document.removeEventListener('keydown', onKeyDown)
+				}
+			}, [open])
 			// 一个组都没有：chip 无事可做，不渲染（配置在 settings.yaml 里加）。
 			if (state === null || !Array.isArray(state.groups) || state.groups.length === 0) return null
 			ensureStyle()
@@ -1727,7 +1824,10 @@ window.__ModuleLoader__.load({
 					body: JSON.stringify(patch)
 				})
 					.then((res) => res.json())
-					.then((body) => { if (body !== null && typeof body === 'object' && body.ok === true) setState(body) })
+					// 选完即收：浮层是「选一个值」的一次性动作，不是常驻面板。
+					// 留着不关，用户会以为没点上，只能再点一次 chip 才收得回去。
+					// 写失败时**不关** —— 状态没变，收起来等于把失败藏了。
+					.then((body) => { if (body !== null && typeof body === 'object' && body.ok === true) { setState(body); setOpen(false) } })
 					.catch(() => {})
 					.finally(() => { setBusy(false); query() })
 			}
@@ -1743,12 +1843,14 @@ window.__ModuleLoader__.load({
 					h('button', {
 						type: 'button',
 						className: `dsh-llm-hub-route__mode${isSmart ? ' is-on' : ''}`,
-						onClick: () => { if (!isSmart) select({ mode: 'smart' }) }
+						// 点当前已生效的那个模式：没有请求要发，但**照样收起浮层**。
+						// 否则「点了完全没反应」，用户会当成界面卡住反复点。
+						onClick: () => { if (isSmart) setOpen(false); else select({ mode: 'smart' }) }
 					}, `⚡ ${t('routeChipModeSmart')}`),
 					h('button', {
 						type: 'button',
 						className: `dsh-llm-hub-route__mode${!isSmart ? ' is-on' : ''}`,
-						onClick: () => { if (isSmart) select({ mode: 'manual' }) }
+						onClick: () => { if (!isSmart) setOpen(false); else select({ mode: 'manual' }) }
 					}, t('routeChipModeManual'))),
 				...state.groups.map((group) => h('button', {
 					key: group.id,
@@ -1771,7 +1873,7 @@ window.__ModuleLoader__.load({
 						? h('span', { className: 'dsh-llm-hub-route__hint' }, group.reason)
 						: null)),
 				h('div', { className: 'dsh-llm-hub-route__hint' }, t('routeRuleText'))) : null
-			return h('div', { className: 'dsh-llm-hub-route' },
+			return h('div', { className: 'dsh-llm-hub-route', ref: rootRef },
 				h('button', {
 					type: 'button',
 					className: chipClass,
@@ -1812,22 +1914,29 @@ window.__ModuleLoader__.load({
 			// candidates[0] = 主力（primary），其余是 fallback —— 与 settings 形态一一对应。
 			const [draft, setDraft] = React.useState(null)
 			const [activeGroup, setActiveGroup] = React.useState('')
-			const [expanded, setExpanded] = React.useState('')
+			// null = 还没手动开合过，此时默认展开当前组 —— 一进来就能看到、能改。
+			const [expanded, setExpanded] = React.useState(null)
 			const [picker, setPicker] = React.useState({ provider: '', model: '' })
 			const [busy, setBusy] = React.useState(false)
 			const [notice, setNotice] = React.useState(null)
 			// 保存过/刚拉回的 draft 指纹：用它判断「脏」，避免后台刷新把用户正在编辑的内容冲掉。
 			const [savedKey, setSavedKey] = React.useState('')
 			// label 归一成「空 = null」：草稿里是 ''，服务端回的是 null，不归一会永远显示「未保存」。
-			const draftKeyOf = (report) => JSON.stringify((report?.groups ?? []).map((group) => [
-				group.id,
-				group.label ? group.label : null,
-				(group.candidates ?? []).map((candidate) => `${candidate.provider}/${candidate.model}`)
-			]))
+			// 空组（刚点「新建组」、还没加候选）不参与比较：服务端会丢弃空组，
+			// 若把它算成「脏」，自动保存会一直重试、而且保存回读后这个组就消失了。
+			const draftKeyOf = (report) => JSON.stringify((report?.groups ?? [])
+				.filter((group) => (group.candidates ?? []).length > 0)
+				.map((group) => [
+					group.id,
+					group.label ? group.label : null,
+					group.note ? group.note : null,
+					(group.candidates ?? []).map((candidate) => [`${candidate.provider}/${candidate.model}`, candidate.note ? candidate.note : null])
+				]))
 			const draftFrom = (report) => (report.groups ?? []).map((group) => ({
 				id: group.id,
 				label: group.label ?? '',
-				candidates: group.candidates.map((candidate) => ({ provider: candidate.provider, model: candidate.model }))
+				note: group.note ?? '',
+				candidates: group.candidates.map((candidate) => ({ provider: candidate.provider, model: candidate.model, note: candidate.note ?? '' }))
 			}))
 			// force=true 只用在一处：保存成功后的回读 —— 那时服务端就是权威。
 			// 其余时候（挂载、切模式、轮询）保留用户正在编辑的草稿。
@@ -1850,16 +1959,25 @@ window.__ModuleLoader__.load({
 					.then((body) => { if (body !== null && typeof body === 'object' && body.ok === true && Array.isArray(body.providers)) setCatalog(body.providers) })
 					.catch(() => {})
 			}, [loadState])
+			// 自动保存的防抖定时器。必须写在下面那个 `state === null` 提前 return 之前 ——
+			// hooks 不能出现在条件分支后面；save 定义在后面，所以经 ref 调用。
+			const saveRef = React.useRef(null)
+			const draftKey = draft === null ? '' : draftKeyOf({ groups: draft })
+			React.useEffect(() => {
+				if (draft === null || draftKey === savedKey || notice === 'fail' || notice === 'saving') return undefined
+				const timer = setTimeout(() => { if (typeof saveRef.current === 'function') saveRef.current() }, 800)
+				return () => clearTimeout(timer)
+			}, [draftKey, savedKey, notice])
 			if (state === null) {
-				return h('div', { className: 'dsh-llm-hub-routing' },
-					h('div', { className: 'dsh-llm-hub-routing__head' },
-						h('span', { className: 'dsh-llm-hub-routing__title' }, t('routingTitle')),
+				return h('div', { className: 'dsh-llm-hub-routing dsh-llm-hub-routing-page' },
+					h('div', { className: 'dsh-llm-hub-routing-page__head' },
+						h('h2', { className: 'dsh-llm-hub-routing-page__title' }, t('routingNav')),
 						h('span', null, t('routingLoading'))))
 			}
 			ensureStyle()
 			const isSmart = state.mode === 'smart'
 			const groups = draft ?? []
-			const isDirty = draft !== null && draftKeyOf({ groups: groups.map((group) => ({ id: group.id, label: group.label, candidates: group.candidates })) }) !== savedKey
+			const isDirty = draft !== null && draftKeyOf({ groups }) !== savedKey
 			const post = (url, payload) => fetch(url, {
 				method: 'POST',
 				headers: { 'content-type': 'application/json', accept: 'application/json' },
@@ -1878,18 +1996,23 @@ window.__ModuleLoader__.load({
 					.then((body) => { if (body?.ok === true) adopt(body) })
 					.catch(() => setNotice('fail'))
 			}
+			// 自动保存（1.7.0）：原来要去卡片最底下点「保存」，改完就走的人会丢改动。
+			// 草稿变「脏」后 800ms 防抖落盘；回读**不强制**覆盖草稿 —— 用户可能还在打字。
+			// 只提交有候选的组（空组服务端本来就丢弃），草稿里的空组留在页面上。
 			const save = () => {
-				if (groups.length === 0) return
+				const payload = groups.filter((group) => group.candidates.length > 0)
+				if (payload.length === 0) return
 				setBusy(true)
-				setNotice(null)
-				post(ROUTING_CONFIG_URL, { groups, activeGroup })
+				setNotice('saving')
+				post(ROUTING_CONFIG_URL, { groups: payload, activeGroup })
 					.then((body) => {
-						if (body?.ok === true) { adopt(body, true); setNotice('saved') }
+						if (body?.ok === true) { adopt(body); setNotice('saved') }
 						else setNotice('fail')
 					})
 					.catch(() => setNotice('fail'))
 					.finally(() => setBusy(false))
 			}
+			saveRef.current = save
 			// ── 草稿编辑（全部是纯函数式更新，不碰服务端；保存才落盘）──
 			const editGroup = (id, mutate) => setDraft(groups.map((group) => (group.id === id ? mutate(group) : group)))
 			const moveCandidate = (id, index, delta) => editGroup(id, (group) => {
@@ -1919,26 +2042,64 @@ window.__ModuleLoader__.load({
 				next.splice(target, 0, item)
 				setDraft(next)
 			}
+			const updateCandidate = (id, index, patch) => editGroup(id, (group) => ({
+				...group,
+				candidates: group.candidates.map((candidate, i) => (i === index ? { ...candidate, ...patch } : candidate))
+			}))
+			// 换提供方时模型跟着换成该家第一个模型 —— 留着旧 model 名几乎一定是错的组合。
+			const changeProvider = (id, index, provider) => {
+				const entry = catalog.find((item) => item.id === provider)
+				updateCandidate(id, index, { provider, model: entry?.models?.[0]?.id ?? '' })
+			}
+			const makePrimary = (id, index) => editGroup(id, (group) => {
+				const next = [...group.candidates]
+				const [item] = next.splice(index, 1)
+				return { ...group, candidates: [item, ...next] }
+			})
 			const removeCandidate = (id, index) => editGroup(id, (group) => ({ ...group, candidates: group.candidates.filter((_, i) => i !== index) }))
 			const addCandidate = (id) => {
 				const provider = picker.provider
 				const model = picker.model
 				if (provider === '' || model === '') return
-				editGroup(id, (group) => ({ ...group, candidates: [...group.candidates, { provider, model }] }))
+				editGroup(id, (group) => ({ ...group, candidates: [...group.candidates, { provider, model, note: '' }] }))
 				setPicker({ provider: '', model: '' })
 			}
 			const addGroup = () => {
 				let index = groups.length + 1
 				let id = `group-${index}`
 				while (groups.some((group) => group.id === id)) { index += 1; id = `group-${index}` }
-				setDraft([...groups, { id, label: '', candidates: [] }])
+				setDraft([...groups, { id, label: '', note: '', candidates: [] }])
 				setExpanded(id)
 			}
 			const removeGroup = (id) => {
 				setDraft(groups.filter((group) => group.id !== id))
-				if (expanded === id) setExpanded('')
+				if (expanded === id) setExpanded(null)
+			}
+			const catalogEntryFor = (provider) => catalog.find((item) => item.id === provider)
+			const modelOptionsFor = (provider, current) => {
+				const ids = (catalogEntryFor(provider)?.models ?? []).map((model) => model.id)
+				return current && !ids.includes(current) ? [current, ...ids] : ids
 			}
 			const stateChipClass = (value) => `dsh-llm-hub-health__chip dsh-llm-hub-health__chip--${value ?? 'unknown'}`
+			/**
+			 * 一组里探测为「可用」的候选数。探不到（没记录）时返回 0 —— 折叠行要报
+			 * 「0/N」而不是假装健康：未探明和不可用在用户眼里同样是「先别指望它」。
+			 * @param {object | undefined} live - /routing/state 里该组的快照。
+			 * @returns {number} 可用候选数。
+			 */
+			const availableOf = (live) => (live?.candidates ?? []).filter((item) => item.state === 'available').length
+			/**
+			 * 折叠行那个健康点的颜色：全可用 / 还剩几个 / 一个都不剩。
+			 * 不用单一绿点，绿点只说「还行」，说不出「还剩几个能兜」。
+			 * @param {object | undefined} live - 该组快照。
+			 * @returns {'available' | 'degraded' | 'unavailable'}
+			 */
+			const groupDotState = (live) => {
+				const total = live?.candidates?.length ?? 0
+				const available = availableOf(live)
+				if (total === 0 || available === 0) return 'unavailable'
+				return available < total ? 'degraded' : 'available'
+			}
 			/**
 			 * 一个候选是否多模态（输入含 text 之外的模态，典型是 image）。
 			 *
@@ -1982,8 +2143,9 @@ window.__ModuleLoader__.load({
 				if (group?.wouldRoute) return `${t('routeChipWouldRoute')}: ${group.wouldRoute.provider}/${group.wouldRoute.model}`
 				return group?.reason ?? t('routeChipReasonNone')
 			}
-			const header = h('div', { className: 'dsh-llm-hub-routing__head' },
-				h('span', { className: 'dsh-llm-hub-routing__title' }, t('routingTitle')),
+			// 页头（1.7.0）：「路由」标题与模式开关同一行。原来页头一个「路由」、卡内又一个「当前路由」，重复。
+			const header = h('div', { className: 'dsh-llm-hub-routing-page__head' },
+				h('h2', { className: 'dsh-llm-hub-routing-page__title' }, t('routingNav')),
 				h('div', { className: 'dsh-llm-hub-routing__modes' },
 					h('button', {
 						type: 'button',
@@ -1995,25 +2157,29 @@ window.__ModuleLoader__.load({
 						className: `dsh-llm-hub-route__mode${!isSmart ? ' is-on' : ''}`,
 						onClick: () => { if (isSmart) setMode('manual') }
 					}, t('routeChipModeManual'))))
-			const rule = h('div', { className: 'dsh-llm-hub-routing__rule' },
+				const pageDesc = h('p', { className: 'dsh-llm-hub-routing-page__desc' }, t('routingPageDesc'))
+				const rule = h('div', { className: 'dsh-llm-hub-routing__rule' },
 				h('span', { className: 'dsh-llm-hub-routing__rule-tag' }, t('routeRuleTitle')),
 				h('span', null, t('routeRuleText')))
-			const noticeLine = h('div', { className: 'dsh-llm-hub-routing__reason' },
-				isSmart ? t('routeSmartNotice') : t('routeManualNotice'))
+			// 只在智能路由真的接管时提示。手动模式下那行「请求还是用你在模型下拉里
+			// 选的」讲的是当前高亮的按钮本身，没有新信息，却常驻占一整行；
+			// 而接管后「下拉只作参考」是按钮推不出来的，必须留着。
+			const noticeLine = isSmart
+				? h('div', { className: 'dsh-llm-hub-routing__reason' }, t('routeSmartNotice'))
+				: null
 			const nowLine = h('div', { className: 'dsh-llm-hub-routing__now' }, resolvedText())
 			const groupRows = groups.map((group, groupIndex) => {
 				const live = state.groups.find((item) => item.id === group.id)
+				// 始终折叠，展开才编辑（1.6.2）。原先是「当前组默认展开」，于是这页一进来
+				// 就是一屏逐条候选的表单 —— 而进来看的是「这几组各自会路由到哪」，
+				// 那是折叠行就能答完的问题。编辑是低频动作，折叠是默认态。
 				const isOpen = expanded === group.id
 				const candidates = group.candidates
 				return h('div', { key: group.id, className: `dsh-llm-hub-routing__group${activeGroup === group.id ? ' is-active' : ''}` },
 					h('div', { className: 'dsh-llm-hub-routing__group-top' },
 						// 顺序即优先级，所以序号 + 上下移都得露在折叠态 —— 折叠着也能改顺序。
 						h('div', { className: 'dsh-llm-hub-routing__group-order' },
-							h('button', {
-								type: 'button',
-								className: 'dsh-llm-hub-routing__group-toggle',
-								onClick: () => setExpanded(isOpen ? '' : group.id)
-							}, `${isOpen ? '▾' : '▸'} ${groupIndex + 1}`),
+							h('span', { className: 'dsh-llm-hub-routing__group-index' }, `${groupIndex + 1}`),
 							h('button', {
 								type: 'button',
 								className: 'dsh-llm-hub-routing__group-move',
@@ -2028,42 +2194,78 @@ window.__ModuleLoader__.load({
 								disabled: groupIndex === groups.length - 1,
 								onClick: () => moveGroup(groupIndex, 1)
 							}, '↓')),
-						h('input', {
-							className: 'dsh-llm-hub-routing__group-label',
-							value: group.label ?? '',
-							placeholder: t('routeGroupLabelPlaceholder'),
-							onChange: (event) => editGroup(group.id, (current) => ({ ...current, label: event.target.value }))
-						}),
-						// 折叠态给出「这一组会按什么顺序试」的摘要：主力 + 兜底条数。
-						// 之前顺序完全藏在折叠区里，用户看不到自己在排什么。
-						h('span', { className: 'dsh-llm-hub-routing__group-state' },
-							candidates.length === 0
-								? h('em', { className: 'dsh-llm-hub-routing__group-empty' }, t('routeNoCandidate'))
-								: [
-									h('b', { key: 'p' }, `${candidates[0].provider}/${candidates[0].model}`),
-									candidates.length > 1
-										? h('span', { key: 'n', className: 'dsh-llm-hub-routing__group-more' },
-											` + ${candidates.length - 1} ${t('routeFallbackCount')}`)
-										: null,
-									// 只在「实际会切到非主模型」时才提示 —— 跟主模型相同的箭头是纯冗余，
-									// 还会把摘要挤到省略号里。真正有信息量的只有「兜底被选上了」。
-									live?.wouldRoute && `${live.wouldRoute.provider}/${live.wouldRoute.model}` !== `${candidates[0].provider}/${candidates[0].model}`
-										? h('span', { key: 'w', className: 'dsh-llm-hub-routing__group-would' },
-											`→ ${live.wouldRoute.provider}/${live.wouldRoute.model}`)
-										: null,
-									live?.reason
-										? h('span', { key: 'r', className: 'dsh-llm-hub-routing__group-would' }, live.reason)
-										: null,
-								]),
+						// 组名折叠时是**纯文本**，展开才给输入框。折叠行还摆着一个输入框，
+						// 会让「这一行正在编辑」和「这一行只是显示」看起来一模一样 ——
+						// 而折叠行的职责恰恰是「看，不是改」。
+						isOpen
+							? h('input', {
+								className: 'dsh-llm-hub-routing__group-label',
+								value: group.label ?? '',
+								placeholder: t('routeGroupLabelPlaceholder'),
+								onChange: (event) => editGroup(group.id, (current) => ({ ...current, label: event.target.value }))
+							})
+							: h('span', { className: 'dsh-llm-hub-routing__group-name' }, group.label || group.id),
+						// 折叠态就三件事：会路由到哪 · 组里几个候选、几个可用 · 组名。
+						// 为什么是这三件：设置内容区只有 564px，组头扣掉序号/组名/两个按钮后，
+						// 摘要只剩 ~235px；而「将路由到 modelgo-gateway/claude-sonnet-5」按真实数据
+						// 就要 231px。再塞第四件（主力 provider/model）必然把最该被读到的那段
+						// 压成「将路由到 m…」（浏览器实测）。所以砍内容，不是调 CSS：
+						//   · 主力去掉 —— 它答「第一个是谁」，这行该答「实际走哪个」，展开态第一行就有；
+						//   · 「+N 条兜底」去掉 —— 旁边「4/5」已把总数和可用数都说了，是同义重复；
+						//   · 「将路由到」四字换成箭头 —— 省 48px，全称进 title 悬停可见。
+						!isOpen
+							? h('span', { className: 'dsh-llm-hub-routing__group-state' },
+								candidates.length === 0
+									? h('em', { className: 'dsh-llm-hub-routing__group-empty' }, t('routeNoCandidate'))
+									: [
+										live?.wouldRoute
+											? h('b', {
+												key: 'w',
+												className: 'dsh-llm-hub-routing__group-would',
+												title: `${t('routeChipWouldRoute')} ${live.wouldRoute.provider}/${live.wouldRoute.model}`
+											}, `\u2192 ${live.wouldRoute.provider}/${live.wouldRoute.model}`)
+											: h('em', {
+												key: 'w',
+												className: 'dsh-llm-hub-routing__group-would',
+												title: live?.reason ?? t('routeChipReasonNone')
+											}, live?.reason ?? t('routeChipReasonNone')),
+										// 「可用/总」比一个孤零零的绿点有信息：点只说「还行」，数字说清还剩几个能兜。
+										h('span', { key: 'c', className: 'dsh-llm-hub-routing__group-count' },
+											h('span', { className: `dsh-llm-hub-routing__dot dsh-llm-hub-routing__dot--${groupDotState(live)}` }),
+											`${availableOf(live)}/${live?.candidates?.length ?? candidates.length}`),
+									])
+							: null,
 						activeGroup === group.id
 							? h('span', { className: 'dsh-llm-hub-routing__role' }, t('routeActiveTag'))
 							: h('button', {
 								type: 'button',
 								className: 'dsh-llm-hub-foot__link',
 								onClick: () => markActive(group.id)
-							}, t('routeSetActive'))),
+							}, t('routeSetActive')),
+						// 「删除该组」原来孤零零挂在组底正中；挪到组头、只在展开编辑时出现，挨着「收起」。
+						isOpen
+							? h('button', {
+								type: 'button',
+								className: 'dsh-llm-hub-routing__op dsh-llm-hub-routing__op--danger dsh-llm-hub-routing__group-delete',
+								onClick: () => removeGroup(group.id)
+							}, t('routeDeleteGroup'))
+							: null,
+						// 原来开合藏在序号「▸ 1」上，看不出能点；现在是一个写明「编辑 / 收起」的按钮。
+						// 关起用 null 而不是 ''：空串只是「曾经用过的哨兵值」，读代码的人分不清它
+						// 跟「还没开合过」是不是一回事（1.6.2 之前确实当成两码事）。
+						h('button', {
+							type: 'button',
+							className: 'dsh-llm-hub-btn dsh-llm-hub-routing__group-toggle',
+							onClick: () => setExpanded(isOpen ? null : group.id)
+						}, isOpen ? `▾ ${t('routeCollapse')}` : `✎ ${t('routeEdit')}`)),
 					isOpen
 						? h('div', { className: 'dsh-llm-hub-routing__candidates' },
+							h('input', {
+								className: 'dsh-llm-hub-routing__note dsh-llm-hub-routing__note--group',
+								value: group.note ?? '',
+								placeholder: t('routeGroupNotePlaceholder'),
+								onChange: (event) => editGroup(group.id, (current) => ({ ...current, note: event.target.value }))
+							}),
 							...candidates.map((candidate, index) => {
 								const liveCandidate = live?.candidates?.find((item) => item.provider === candidate.provider && item.model === candidate.model)
 								const multimodal = isMultimodal(candidate.provider, candidate.model)
@@ -2071,28 +2273,67 @@ window.__ModuleLoader__.load({
 								const reasoningTip = reasoning === undefined
 									? undefined
 									: `${t('routeReasoningTip')}\n${reasoning.map((level) => `  · ${level.name} → ${level.id}`).join('\n')}`
-								return h('div', { key: `${candidate.provider}/${candidate.model}/${index}`, className: 'dsh-llm-hub-routing__row' },
-									h('span', { className: 'dsh-llm-hub-routing__role' }, index === 0 ? t('routePrimaryTag') : `${t('routeFallbackTag')}${index}`),
-									h('span', { className: 'dsh-llm-hub-routing__name' }, `${candidate.provider}/${candidate.model}`),
-									reasoning !== undefined
-										? h('span', {
-											key: 'reasoning',
-											className: 'dsh-llm-hub-routing__reasoning',
-											title: reasoningTip
-										}, `💭 ${t('routeReasoningShort')} ${reasoningShort(reasoning)}`)
-										: null,
-									multimodal === true
-										? h('span', {
-											key: 'multimodal',
-											className: 'dsh-llm-hub-routing__multimodal',
-											title: t('routeMultimodalTip')
-										}, '👁 ' + t('routeMultimodalShort'))
+								return h('div', { key: `${candidate.provider}/${candidate.model}/${index}`, className: `dsh-llm-hub-routing__row${index === 0 ? ' is-primary' : ''}` },
+									h('span', { className: `dsh-llm-hub-routing__role${index === 0 ? ' is-primary' : ''}` }, index === 0 ? t('routePrimaryTag') : `${t('routeFallbackTag')}${index}`),
+									// 原地改（1.7.0）：提供方 / 模型直接是下拉框，不用删了重加再连点 ↑。
+									// 目录里没有这家（没配置 / 目录没拉到）时退回纯文本，不让一行坏数据变成下拉框里的空值。
+									catalogEntryFor(candidate.provider) !== undefined
+										? h('span', { className: 'dsh-llm-hub-routing__pick' },
+											h('select', {
+												className: 'dsh-llm-hub-routing__select',
+												value: candidate.provider,
+												title: t('routeAddProvider'),
+												onChange: (event) => changeProvider(group.id, index, event.target.value)
+											}, ...catalog.map((entry) => h('option', { key: entry.id, value: entry.id }, `${entry.displayName ?? entry.id}`))),
+											h('select', {
+												className: 'dsh-llm-hub-routing__select',
+												value: candidate.model,
+												title: t('routeAddModel'),
+												onChange: (event) => updateCandidate(group.id, index, { model: event.target.value })
+											}, ...modelOptionsFor(candidate.provider, candidate.model).map((id) => h('option', { key: id, value: id }, id))))
+										: h('span', { className: 'dsh-llm-hub-routing__name' }, `${candidate.provider}/${candidate.model}`),
+									// 行排成固定两行网格（1.7.0）：第一行 角色 · 提供方 · 模型 · 能力/状态，
+									// 第二行 备注（占满） · 操作按钮（右对齐）。原来全部 flex-wrap，每行按内容长短
+									// 在不同位置折行，五行排不成列（浏览器实测截图）。
+									// 第二行：备注（撑满）· 能力/状态标签 · 操作按钮。标签原来在第一行最右，固定吃掉约 180px，
+									// 两个下拉被挤到截断「Antigravity 本地反…」「MiniMax-M3.1-Flash-Prev…」。
+									h('span', { className: 'dsh-llm-hub-routing__line2' },
+									h('input', {
+										className: 'dsh-llm-hub-routing__note',
+										value: candidate.note ?? '',
+										placeholder: t('routeNotePlaceholder'),
+										title: candidate.note ?? '',
+										onChange: (event) => updateCandidate(group.id, index, { note: event.target.value })
+									}),
+									h('span', { className: 'dsh-llm-hub-routing__meta' },
+										// 窄容器只放图标，文字进 title（1.7.0）：「思考 high/max / 图像 / 可用」三枚文字标签
+										// 吃掉约 176px，备注框被挤到只剩 150px、备注被截断（浏览器实测）。
+										reasoning !== undefined
+											? h('span', {
+												key: 'reasoning',
+												className: 'dsh-llm-hub-routing__reasoning',
+												title: `${t('routeReasoningShort')} ${reasoningShort(reasoning)}\n${reasoningTip}`
+											}, '💭')
+											: null,
+										multimodal === true
+											? h('span', {
+												key: 'multimodal',
+												className: 'dsh-llm-hub-routing__multimodal',
+												title: `${t('routeMultimodalShort')} · ${t('routeMultimodalTip')}`
+											}, '👁')
+											: null,
+										h('span', {
+											className: `dsh-llm-hub-routing__dot dsh-llm-hub-routing__dot--${liveCandidate?.state ?? 'unknown'}`,
+											title: liveCandidate?.state === 'available' ? '可用' : (liveCandidate?.state === 'unknown' ? '未探明' : '不可用')
+										})),
+									h('span', { className: 'dsh-llm-hub-routing__ops' },
+									index > 0
+										? h('button', { type: 'button', className: 'dsh-llm-hub-routing__op', onClick: () => makePrimary(group.id, index) }, t('routeMakePrimary'))
 										: null,
-									h('span', { className: stateChipClass(liveCandidate?.state) }, liveCandidate?.state === 'available' ? '可用' : (liveCandidate?.state === 'unknown' ? '未探明' : '不可用')),
-									h('button', { type: 'button', className: 'dsh-llm-hub-foot__link', title: t('routeUp'), onClick: () => moveCandidate(group.id, index, -1) }, '↑'),
-									h('button', { type: 'button', className: 'dsh-llm-hub-foot__link', title: t('routeDown'), onClick: () => moveCandidate(group.id, index, 1) }, '↓'),
-									h('button', { type: 'button', className: 'dsh-llm-hub-foot__link', title: t('routeRemove'), onClick: () => removeCandidate(group.id, index) }, '✕'))
-							}),
+									h('button', { type: 'button', className: 'dsh-llm-hub-routing__op', title: t('routeUp'), disabled: index === 0, onClick: () => moveCandidate(group.id, index, -1) }, '↑'),
+									h('button', { type: 'button', className: 'dsh-llm-hub-routing__op', title: t('routeDown'), disabled: index === candidates.length - 1, onClick: () => moveCandidate(group.id, index, 1) }, '↓'),
+									h('button', { type: 'button', className: 'dsh-llm-hub-routing__op dsh-llm-hub-routing__op--danger', title: t('routeRemove'), onClick: () => removeCandidate(group.id, index) }, '✕'))))
+								}),
 							h('div', { className: 'dsh-llm-hub-routing__add' },
 								h('span', null, t('routeAddProvider')),
 								catalog.length > 0
@@ -2142,26 +2383,31 @@ window.__ModuleLoader__.load({
 									className: 'dsh-llm-hub-btn',
 									onClick: () => addCandidate(group.id)
 								}, t('routeAdd'))),
-							catalog.length === 0 ? h('div', { className: 'dsh-llm-hub-routing__rule' }, t('routeNoCatalog')) : null,
-							h('button', {
-								type: 'button',
-								className: 'dsh-llm-hub-foot__link',
-								onClick: () => removeGroup(group.id)
-							}, t('routeDeleteGroup')))
+							catalog.length === 0 ? h('div', { className: 'dsh-llm-hub-routing__rule' }, t('routeNoCatalog')) : null)
 						: null)
 			})
+			// 空闲态不再写死「已保存」—— 那三个字跟「刚刚存成功」长得一模一样，
+			// 读起来像一条一直挂着的成功提示，而它其实什么都没说。空闲时干脆不占位，
+			// 真存过 / 存到一半 / 存失败才给反馈。
+			const noticing = notice === 'fail' || notice === 'saving' || notice === 'saved'
 			const footer = h('div', { className: 'dsh-llm-hub-routing__actions' },
 				h('button', { type: 'button', className: 'dsh-llm-hub-btn', onClick: addGroup }, t('routeNewGroup')),
-				h('button', {
-					type: 'button',
-					className: 'dsh-llm-hub-btn',
-					disabled: busy || !isDirty,
-					onClick: save
-				}, isDirty ? t('routeSave') : t('routeSaved')),
-				notice === 'fail' ? h('span', { className: 'dsh-llm-hub-routing__reason' }, t('routeSaveFailed')) : null,
+				// 注意这里不能写成 h(cond ? <span/> : null) —— 多包的那层 h 没有 tag，
+				// flatten 不递归进去，状态文案在测试里就永远取不到（真实浏览器里没事，
+				// 因为 DOM 照样渲染 —— 正是「测试挂了但界面看着正常」的那类坑）。
+				noticing || busy || isDirty
+					? h('span', { className: `dsh-llm-hub-routing__status${notice === 'fail' ? ' is-fail' : ''}` },
+						notice === 'fail' ? t('routeSaveFailed')
+							: (busy || notice === 'saving' || isDirty) ? t('routeSaving')
+								: t('routeAutoSaved'))
+					: null,
+				notice === 'fail'
+					? h('button', { type: 'button', className: 'dsh-llm-hub-btn', disabled: busy, onClick: () => { setNotice(null); save() } }, t('routeRetry'))
+					: null,
 				h('span', { className: 'dsh-llm-hub-routing__hint' }, t('routeEditHint')))
-			return h('div', { className: 'dsh-llm-hub-routing' },
+			return h('div', { className: 'dsh-llm-hub-routing dsh-llm-hub-routing-page' },
 				header,
+				pageDesc,
 				rule,
 				noticeLine,
 				nowLine,
@@ -2169,6 +2415,14 @@ window.__ModuleLoader__.load({
 				footer)
 		}
 
+		/**
+		 * 「路由」设置页：页头（标题 + 一句怎么用）+ 路由编辑器。
+		 * 直接调用 RoutingCard(props) 而不是 h(RoutingCard)：少一层组件，hooks 顺序不变。
+		 */
+		function RoutingSection(props) {
+			return RoutingCard(props)
+		}
+
 		/**
 		 * 格式化 token 数字 —— 大数带千分位，>9999 折成 1.2万。
 		 * @param value - token 数。
@@ -2631,13 +2885,13 @@ window.__ModuleLoader__.load({
 				key: CARD_KEY,
 				locale: NS,
 				inject: () => ({ t, availability })
-			}, BalanceCard))
+			}, withPresetHint(BalanceCard)))
 			ctx.slots.inject('settings.models.provider-card', () => ctx.slots.register({
 				name: 'settings.models.provider-card',
 				key: PIAI_CARD_KEY,
 				locale: NS,
 				inject: () => ({ t, availability })
-			}, PiAiCard))
+			}, withPresetHint(PiAiCard)))
 			// settings.models.footer 的契约是 kind:'list'（见宿主 dsh-client-ui-settings-models
 			// 的 children 声明），list 类 slot 注册**必须带 id** —— 参照宿主自己的
 			// settings.onboarding 注册（id:'welcome-notice', order:-100）。
@@ -2651,13 +2905,6 @@ window.__ModuleLoader__.load({
 				locale: NS,
 				inject: () => ({ t, availability })
 			}, HeroOverviewCard))
-			ctx.slots.inject('settings.models.footer', () => ctx.slots.register({
-				name: 'settings.models.footer',
-				id: 'dsh-llm-hub-presets',
-				order: 65,
-				locale: NS,
-				inject: () => ({ t })
-			}, QuickPresetsCard))
 			ctx.slots.inject('settings.models.footer', () => ctx.slots.register({
 				name: 'settings.models.footer',
 				id: 'dsh-llm-hub-health',
@@ -2665,13 +2912,17 @@ window.__ModuleLoader__.load({
 				locale: NS,
 				inject: () => ({ t, availability })
 			}, HealthCard))
-			ctx.slots.inject('settings.models.footer', () => ctx.slots.register({
-				name: 'settings.models.footer',
+			// 路由配置是独立的一页（1.7.0）：原来挂在「模型」页脚第 75 位，要往下翻好几屏才找得到，
+			// 用户的原话是「我自己怎么选主力、在哪里改」。settings.section 的 order：
+			// 通用 0 / 模型 10 / 插件 15 —— 取 12，正好排在「模型」下面。
+			ctx.slots.inject('settings.section', () => ctx.slots.register({
+				name: 'settings.section',
 				id: 'dsh-llm-hub-routing',
-				order: 75,
+				order: 12,
+				label: () => t('routingNav'),
 				locale: NS,
 				inject: () => ({ t })
-			}, RoutingCard))
+			}, RoutingSection))
 			ctx.slots.inject('settings.models.footer', () => ctx.slots.register({
 				name: 'settings.models.footer',
 				id: 'dsh-llm-hub-usage',