dsh-claude-style 0.3.2 → 0.4.0

package/lib/client.js

@@ -17,6 +17,8 @@
  *   - src/overrides/permissions.js
  *   - src/overrides/model-brand.js
  *   - src/overrides/model-picker.js
+ *   - src/overrides/hero-menu.js
+ *   - src/overrides/quick-providers.js
  *   - src/overrides/account-footer.js
  *   - src/overrides/ban-screen.js
  *   - src/overrides/theme-flip.js
@@ -36,6 +38,7 @@
  *   - src/styles/components/account-footer.css
  *   - src/styles/components/ban-screen.css
  *   - src/styles/components/model-picker.css
+ *   - src/styles/components/hero-menu.css
  *   - src/styles/components/footer-takeover.css
  *   - src/styles/components/third-party.css
  *   - src/styles/components/settings.css
@@ -220,6 +223,14 @@ window.__ModuleLoader__.load({
     var DEFAULT_BAN_LOCALE = BAN_LOCALE_EN
     /** Present while the composer restyle applies to the page currently shown. */
     var COMPOSER_ATTR = 'data-dsh-claude-composer-active'
+    /**
+     * Stamped on the host's shared menu card while it is the hero row's picker
+     * (the workspace chip or the agent-preset seat opened it). The host portals
+     * that card to <body> with no marker of its own, so the stylesheet cannot
+     * tell it from the host's other menus; src/overrides/hero-menu.js stamps it
+     * and components/hero-menu.css switches on this attribute.
+     */
+    var HERO_MENU_ATTR = 'data-dsh-claude-hero-menu'
     /**
      * Present while the browser window does NOT hold focus.
      *
@@ -231,6 +242,16 @@ window.__ModuleLoader__.load({
     var WINDOW_BLUR_ATTR = 'data-dsh-window-blur'
     /** Composer surfaces the restyle may cover, in settings order. */
     var COMPOSER_SCOPES = ['off', 'hero', 'conversation', 'all']
+    /**
+     * How eagerly the skin's popovers open on hover: `off` is click-only,
+     * `account` auto-opens the sidebar account popover alone, and `all` adds the
+     * permission, model, session-stats and the host's two hero-row pickers.
+     */
+    var AUTO_POPOVER_OFF = 'off'
+    var AUTO_POPOVER_ACCOUNT = 'account'
+    var AUTO_POPOVER_ALL = 'all'
+    var AUTO_POPOVER_SCOPES = [AUTO_POPOVER_OFF, AUTO_POPOVER_ACCOUNT, AUTO_POPOVER_ALL]
+    var DEFAULT_AUTO_POPOVER = AUTO_POPOVER_ALL
     /** Route the browser half reads and writes preferences through (lib/index.js). */
     var PREFS_ROUTE = '/dsh-claude-style/prefs'
     /** Route that resolves the host OS user once; never polled. */
@@ -1888,21 +1909,22 @@ window.__ModuleLoader__.load({
       "   content below, roomy type. */",
       "body[data-dsh-claude-style][data-dsh-claude-composer-active] .dsh-claude-stats-popover {",
       "  position: fixed !important;",
-      "  z-index: 100000 !important;",
-      "  min-width: 260px !important;",
+      "  z-index: 99999 !important;",
+      "  min-width: 248px !important;",
       "  max-width: min(380px, calc(100vw - 16px)) !important;",
       "  box-sizing: border-box !important;",
-      "  padding: 8px !important;",
+      "  padding: 6px !important;",
       "  background: var(--dsw-alias-bg-overlay, #ffffff) !important;",
       "  border: 1px solid var(--dsw-alias-border-l1, #e8e6dc) !important;",
       "  border-radius: 12px !important;",
       "  box-shadow: 0 8px 30px rgba(20, 20, 19, 0.12), 0 2px 8px rgba(20, 20, 19, 0.06) !important;",
       "  display: flex !important;",
       "  flex-direction: column !important;",
-      "  gap: 4px !important;",
+      "  gap: 6px !important;",
       "  opacity: 0 !important;",
       "  pointer-events: none !important;",
       "  transform: translateY(4px) scale(0.98) !important;",
+      "  transform-origin: bottom left !important;",
       "  transition: opacity 0.15s ease, transform 0.15s ease !important;",
       "  font-family: var(--dsw-font-family) !important;",
       "}",
@@ -1940,8 +1962,9 @@ window.__ModuleLoader__.load({
       "  display: flex !important;",
       "  flex-direction: column !important;",
       "  gap: 2px !important;",
-      "  padding: 6px 8px !important;",
-      "  border-radius: 8px !important;",
+      "  min-height: 32px !important;",
+      "  padding: 2px 7px !important;",
+      "  border-radius: 6px !important;",
       "}",
       "body[data-dsh-claude-style][data-dsh-claude-composer-active] .dsh-claude-stats-popover-item:hover {",
       "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
@@ -2403,7 +2426,7 @@ window.__ModuleLoader__.load({
       "}",
       "body[data-dsh-claude-style] .dsh-claude-perm-popover {",
       "  position: fixed !important;",
-      "  min-width: 220px !important;",
+      "  min-width: 248px !important;",
       "  background: var(--dsw-alias-bg-overlay, #ffffff) !important;",
       "  border: 1px solid var(--dsw-alias-border-l1, #e8e6dc) !important;",
       "  border-radius: 12px !important;",
@@ -2527,10 +2550,10 @@ window.__ModuleLoader__.load({
       "  box-shadow: 0 8px 30px rgba(20, 20, 19, 0.12), 0 2px 8px rgba(20, 20, 19, 0.06) !important;",
       "  padding: 6px !important;",
       "  box-sizing: border-box !important;",
-      "  z-index: 1000 !important;",
+      "  z-index: 99999 !important;",
       "  display: flex !important;",
       "  flex-direction: column !important;",
-      "  gap: 2px !important;",
+      "  gap: 6px !important;",
       "  opacity: 0 !important;",
       "  pointer-events: none !important;",
       "  transform: translateY(6px) scale(0.98) !important;",
@@ -2563,8 +2586,9 @@ window.__ModuleLoader__.load({
       "   strip is the inner row, so the hover plate covers the name and not the divider",
       "   that follows it. */",
       "body[data-dsh-claude-style] .dsh-claude-account-popover-row {",
-      "  padding: 6px 8px !important;",
-      "  border-radius: 8px !important;",
+      "  min-height: 32px !important;",
+      "  padding: 2px 7px !important;",
+      "  border-radius: 6px !important;",
       "  cursor: pointer !important;",
       "  transition: background-color 0.12s ease !important;",
       "}",
@@ -3050,7 +3074,11 @@ window.__ModuleLoader__.load({
       "  position: fixed !important;",
       "  min-width: 248px !important;",
       "  max-width: min(360px, calc(100vw - 16px)) !important;",
-      "  max-height: min(440px, calc(100vh - 96px)) !important;",
+      "  /* The first level is sized by its content like the second: the cap is only",
+      "     the viewport, so a short list does not leave a tall empty card. The level-1",
+      "     list scrolls inside the body instead (see the scoped rule below); this",
+      "     overflow-y stays for the sub popover, whose whole card scrolls. */",
+      "  max-height: calc(100vh - 80px) !important;",
       "  overflow-y: auto !important;",
       "  background: var(--dsw-alias-bg-overlay, #ffffff) !important;",
       "  border: 1px solid var(--dsw-alias-border-l1, #e8e6dc) !important;",
@@ -3084,17 +3112,35 @@ window.__ModuleLoader__.load({
       "  gap: 3px !important;",
       "  min-width: 0 !important;",
       "}",
+      "/* Level 1 splits into a scrollable list and a pinned footer: the model rows",
+      "   scroll under the divider / effort / more-models rows, which never leave the",
+      "   viewport edge of the card. Only the first level does this — the sub popover",
+      "   keeps scrolling as one card, with its provider labels pinned (below). */",
+      "body[data-dsh-claude-style] .dsh-claude-model-popover:not(.dsh-claude-model-popover-sub) {",
+      "  overflow: hidden !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-model-popover:not(.dsh-claude-model-popover-sub) .dsh-claude-model-popover-body {",
+      "  flex: 1 1 auto !important;",
+      "  min-height: 0 !important;",
+      "  overflow-y: auto !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-model-footer {",
+      "  flex: none !important;",
+      "  display: flex !important;",
+      "  flex-direction: column !important;",
+      "  gap: 2px !important;",
+      "  min-width: 0 !important;",
+      "}",
       "body[data-dsh-claude-style] .dsh-claude-model-status {",
       "  color: var(--dsw-alias-label-tertiary, #8f8d84) !important;",
       "  font-size: 12px !important;",
       "  line-height: 20px !important;",
       "  padding: 4px 8px !important;",
       "}",
-      "/* The sub popover is taller than the first level; its provider labels stay",
-      "   pinned to the top while the list scrolls, the next provider replacing the",
-      "   previous one. */",
+      "/* The sub popover is taller than the first level and sized by its content: the",
+      "   cap is only the viewport, so a short provider list does not leave a tall empty",
+      "   card. Provider labels stay pinned to the top while the list scrolls. */",
       "body[data-dsh-claude-style] .dsh-claude-model-popover-sub {",
-      "  max-height: min(540px, calc(100vh - 80px)) !important;",
       "  padding-top: 0 !important;",
       "}",
       "",
@@ -3102,7 +3148,9 @@ window.__ModuleLoader__.load({
       "  position: relative !important;",
       "  display: flex !important;",
       "  flex-direction: column !important;",
-      "  gap: 3px !important;",
+      "  /* Level 2 rows sit close together: the 3px the body uses between sections",
+      "     read as a gap between models of the same provider. */",
+      "  gap: 1px !important;",
       "  min-width: 0 !important;",
       "}",
       "",
@@ -3243,12 +3291,42 @@ window.__ModuleLoader__.load({
       "  align-items: center !important;",
       "  color: var(--dsw-alias-brand-primary, #d97757) !important;",
       "}",
-      "body[data-dsh-claude-style] .dsh-claude-model-divider {",
+      "/* The picker's two hairlines share one declaration: the provider header's rule",
+      "   and the divider that closes the model list. Same colour, same thickness, same",
+      "   insets — the only difference left is that the header's line starts after the",
+      "   provider's name, which is the point of that row. */",
+      "body[data-dsh-claude-style] .dsh-claude-model-divider,",
+      "body[data-dsh-claude-style] .dsh-claude-model-rule::after {",
       "  height: 1px !important;",
       "  background: var(--dsw-alias-border-l1, #e8e6dc) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-model-divider {",
+      "  margin: 2px 4px !important;",
+      "  flex: none !important;",
+      "}",
+      "/* The provider header: the name first, then the rule running to the right edge.",
+      "   The line is what is left of that row, not a separate full-width rule above it",
+      "   — one rule per provider boundary, and nothing more. An empty label leaves the",
+      "   bare rule, which is how a provider that needs no naming (the official source)",
+      "   is separated. */",
+      "body[data-dsh-claude-style] .dsh-claude-model-rule {",
+      "  display: flex !important;",
+      "  align-items: center !important;",
+      "  gap: 6px !important;",
       "  margin: 2px 4px !important;",
       "  flex: none !important;",
       "}",
+      "body[data-dsh-claude-style] .dsh-claude-model-rule::after {",
+      "  content: \"\" !important;",
+      "  flex: 1 !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-model-rule-name {",
+      "  flex: none !important;",
+      "  font-size: 11px !important;",
+      "  line-height: 14px !important;",
+      "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
+      "  letter-spacing: 0.02em !important;",
+      "}",
       "/* Level-2 row: label + current value + chevron; hover opens its own level. */",
       "body[data-dsh-claude-style] .dsh-claude-model-cell {",
       "  display: flex !important;",
@@ -3318,9 +3396,8 @@ window.__ModuleLoader__.load({
       "}",
       "body[data-dsh-claude-style] .dsh-claude-popover-item {",
       "  width: 100% !important;",
-      "  height: 32px !important;",
       "  min-height: 32px !important;",
-      "  padding: 0 8px !important;",
+      "  padding: 2px 7px !important;",
       "  border-radius: 6px !important;",
       "  border: none !important;",
       "  background: transparent !important;",
@@ -3378,12 +3455,156 @@ window.__ModuleLoader__.load({
       "  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.08)) !important;",
       "  color: var(--dsw-alias-label-secondary, #787672) !important;",
       "}",
+      "/* A provider the catalog no longer offers: its stored row stays checked but is",
+      "   muted, so it reads as \"this used to be picked\" and can be unchecked away. */",
+      "body[data-dsh-claude-style] .dsh-claude-popover-item.dsh-claude-model-stale .dsh-claude-popover-item-text,",
+      "body[data-dsh-claude-style] .dsh-claude-popover-item.dsh-claude-model-stale .dsh-claude-popover-item-badge {",
+      "  color: var(--dsw-alias-label-tertiary, #8f8d84) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-popover-item.dsh-claude-model-stale .dsh-claude-popover-item-badge {",
+      "  background: transparent !important;",
+      "}",
       "",
       "/* Ensure popover items only display inside the popover */",
       "body[data-dsh-claude-style] [class*=\"footArea\"] > .dsh-claude-popover-item {",
       "  display: none !important;",
       "}",
       "",
+      "/* @composer-gate */",
+      "/* ---------- Host menu primitive: the hero row's pickers ---------- */",
+      "/* The workspace (directory) chip and the agent-preset seat open the host's",
+      "   shared Menu primitive, which portals its card to <body>. The card carries no",
+      "   marker of its own, so src/overrides/hero-menu.js stamps the one that belongs",
+      "   to this row with HERO_MENU_ATTR and these rules reach it alone — the host's",
+      "   other menus keep their own design. The metrics are the skin's popover",
+      "   language, the same card / rows / hover plate / accent check as",
+      "   components/model-picker.css and components/permissions.css. */",
+      "",
+      "/* Two class-name families meet here. The host's client-ui packages hash as",
+      "   `<hash>_<local>`, so their fragments read `_itemName` / `_itemDesc`; the",
+      "   shared menu ships inside the web shell and hashes as `_<local>_<hash>_<n>`,",
+      "   so its fragments read `_itemWrap_` / `_itemLabel_`. Both are the longest",
+      "   stable piece of the class — never the bare local name. */",
+      "",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] {",
+      "  min-width: 248px !important;",
+      "  max-width: min(360px, calc(100vw - 16px)) !important;",
+      "  max-height: min(440px, calc(100vh - 96px)) !important;",
+      "  padding: 6px !important;",
+      "  gap: 6px !important;",
+      "  border: 1px solid var(--dsw-alias-border-l1, #e8e6dc) !important;",
+      "  border-radius: 12px !important;",
+      "  background: var(--dsw-alias-bg-overlay, #ffffff) !important;",
+      "  box-shadow: 0 8px 30px rgba(20, 20, 19, 0.12), 0 2px 8px rgba(20, 20, 19, 0.06) !important;",
+      "  z-index: 99999 !important;",
+      "  font-family: var(--dsw-font-family) !important;",
+      "  /* The host mounts the card instead of toggling a `data-open` attribute, so",
+      "     the skin's open transition becomes a one-shot animation with the same",
+      "     values. Its origin is the edge nearest the trigger: the card sits beside it. */",
+      "  transform-origin: bottom left !important;",
+      "  animation: dsh-claude-hero-menu-in 0.15s ease !important;",
+      "}",
+      "@keyframes dsh-claude-hero-menu-in {",
+      "  from {",
+      "    opacity: 0;",
+      "    transform: translateY(4px) scale(0.98);",
+      "  }",
+      "  to {",
+      "    opacity: 1;",
+      "    transform: none;",
+      "  }",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active][data-ds-dark-theme] [data-dsh-claude-hero-menu] {",
+      "  background: #1e1e1d !important;",
+      "  border-color: #2e2c29 !important;",
+      "  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;",
+      "}",
+      "",
+      "/* One row height, one radius, one hover plate for both pickers. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemWrap_\"] > [role=\"menuitem\"] {",
+      "  min-height: 32px !important;",
+      "  padding: 2px 7px !important;",
+      "  gap: 8px !important;",
+      "  border-radius: 6px !important;",
+      "  font-size: 13px !important;",
+      "  line-height: 20px !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "  transition: background-color 0.12s ease !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemWrap_\"] > [role=\"menuitem\"]:hover:not(:disabled) {",
+      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemWrap_\"] > [role=\"menuitem\"]:disabled {",
+      "  opacity: 0.4 !important;",
+      "  cursor: not-allowed !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemIcon_\"] {",
+      "  width: 16px !important;",
+      "  height: 16px !important;",
+      "  color: var(--dsw-alias-label-secondary, #787672) !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemIcon_\"] svg {",
+      "  width: 16px !important;",
+      "  height: 16px !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemLabel_\"] {",
+      "  font-size: 13px !important;",
+      "  line-height: 20px !important;",
+      "}",
+      "/* The current row is marked by the accent, as in the model picker. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_check_\"] {",
+      "  flex: none !important;",
+      "  color: var(--dsw-alias-brand-primary, #d97757) !important;",
+      "}",
+      "",
+      "/* The preset rows are two lines (name + description) and the workspace rows",
+      "   one with an icon, so the height above is a floor rather than a cap. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemName\"] {",
+      "  font-size: 13px !important;",
+      "  font-weight: 500 !important;",
+      "  line-height: 16px !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_itemDesc\"] {",
+      "  font-size: 11px !important;",
+      "  line-height: 14px !important;",
+      "  color: var(--dsw-alias-label-tertiary, #8f8d84) !important;",
+      "}",
+      "",
+      "/* Heading and separator rows. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] > [class*=\"_viewport_\"] > [role=\"presentation\"] {",
+      "  padding: 6px 7px 2px !important;",
+      "  font-size: 11px !important;",
+      "  font-weight: 600 !important;",
+      "  line-height: 16px !important;",
+      "  letter-spacing: 0.04em !important;",
+      "  text-transform: uppercase !important;",
+      "  color: var(--dsw-alias-label-tertiary, #8f8d84) !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [role=\"separator\"] {",
+      "  height: 1px !important;",
+      "  margin: 2px 4px !important;",
+      "  background: var(--dsw-alias-border-l1, #e8e6dc) !important;",
+      "}",
+      "",
+      "/* The pinned footer (\"添加工作区…\") keeps the host's spacing with the skin's",
+      "   hairline. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] > [class*=\"_footer_\"] {",
+      "  margin-top: 4px !important;",
+      "  padding-top: 4px !important;",
+      "  border-top: 1px solid var(--dsw-alias-border-l1, #e8e6dc) !important;",
+      "}",
+      "",
+      "/* The card's padding is the skin's 6px rather than the host's 4px, so a side",
+      "   card moves with it: 6px pad + 6px gap. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_submenu_\"] {",
+      "  bottom: -6px !important;",
+      "  left: calc(100% + 12px) !important;",
+      "}",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-hero-menu] [class*=\"_submenu_\"]::before {",
+      "  left: -12px !important;",
+      "  width: 12px !important;",
+      "}",
+      "",
       "/* ---------- Footer takeover ----------",
       "   Everything in this block modifies the HOST's own footer (it hides entries and",
       "   zeroes the containers that host them) and exists only because the skin",
@@ -3715,6 +3936,32 @@ window.__ModuleLoader__.load({
       "  color: var(--dsw-alias-label-caption);",
       "}",
       "",
+      "/* The quick-provider trigger belongs to the same control family as the username",
+      "   input: one bordered plate that opens a picker. Its card is the shared popover",
+      "   card (components/permissions.css), so only the trigger is styled here. */",
+      "body[data-dsh-claude-style] .dsh-claude-settings-picker {",
+      "  flex: none;",
+      "  min-width: 140px;",
+      "  max-width: 45%;",
+      "  box-sizing: border-box;",
+      "  border: 1px solid var(--dsw-alias-border-l1);",
+      "  border-radius: 8px;",
+      "  background: var(--dsw-alias-bg-layer-1);",
+      "  color: var(--dsw-alias-label-primary);",
+      "  padding: 6px 10px;",
+      "  font: inherit;",
+      "  font-size: 13px;",
+      "  line-height: 18px;",
+      "  text-align: left;",
+      "  cursor: pointer;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-settings-picker:hover {",
+      "  border-color: var(--dsw-alias-border-l2);",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-settings-picker[aria-expanded=\"true\"] {",
+      "  border-color: var(--dsw-alias-brand-primary, #d97757);",
+      "}",
+      "",
       "/* ============================================================================",
       "   主题翻转：瞬时抑制过渡 (Theme Flip: Transition Suppression)",
       "   ============================================================================ */",
@@ -3968,8 +4215,10 @@ window.__ModuleLoader__.load({
     var prefs = {
       brand: DEFAULT_BRAND,
       collapseFooter: true,
-      autoPopover: true,
+      autoPopover: DEFAULT_AUTO_POPOVER,
       composerScope: 'all',
+      modelPicker: true,
+      quickProviders: [],
       username: '',
       banLocale: fallbackBanLocale || DEFAULT_BAN_LOCALE,
     }
@@ -4066,14 +4315,46 @@ window.__ModuleLoader__.load({
       } catch (error) { /* no fetch: defaults stay */ }
     }
 
+    /**
+     * Clamp the hover-open preference. It used to be a boolean, and a value
+     * stored in that shape still has to land on a scope: `true` meant every
+     * popover, `false` meant click-only.
+     */
+    function normalizeAutoPopover(value) {
+      if (value === true) return AUTO_POPOVER_ALL
+      if (value === false) return AUTO_POPOVER_OFF
+      return AUTO_POPOVER_SCOPES.indexOf(value) === -1 ? DEFAULT_AUTO_POPOVER : value
+    }
+
+    /**
+     * The provider ids the picker's first level carries. Ids rather than names:
+     * a provider can be renamed by the catalog at any time, and the stored
+     * selection has to survive that. Order is the caller's, duplicates dropped.
+     * The official service is the picker's default, not a choice, so a stored
+     * id for it is dropped: the first level shows it whenever nothing else is
+     * picked, which is what "default" means.
+     */
+    function normalizeQuickProviders(value) {
+      if (!Array.isArray(value)) return []
+      var out = []
+      for (var i = 0; i < value.length; i++) {
+        var id = value[i]
+        if (typeof id !== 'string' || id === '' || id === MODEL_OFFICIAL_GROUP || out.indexOf(id) !== -1) continue
+        out.push(id)
+      }
+      return out
+    }
+
     /** Clamp one host value into the preference shape (the host already did this). */
     function normalizePrefs(value) {
       var section = value && typeof value === 'object' ? value : {}
       return {
         brand: section.brand === BRAND_ANTHROPIC || section.brand === BRAND_OFF ? section.brand : BRAND_CLAUDE,
         collapseFooter: section.collapseFooter !== false,
-        autoPopover: section.autoPopover !== false,
+        autoPopover: normalizeAutoPopover(section.autoPopover),
         composerScope: COMPOSER_SCOPES.indexOf(section.composerScope) === -1 ? 'all' : section.composerScope,
+        modelPicker: section.modelPicker !== false,
+        quickProviders: normalizeQuickProviders(section.quickProviders),
         username: (typeof section.username === 'string' ? section.username.trim().slice(0, USERNAME_MAX) : '') || fallbackUsername,
         banLocale: resolveBanLocale(section.banLocale),
       }
@@ -4151,19 +4432,6 @@ window.__ModuleLoader__.load({
         })
     }
 
-    /**
-     * The brand to show. `off` leaves the brand area entirely to the host, so
-     * the stylesheet matches neither brand variant for it.
-     *
-     * @param brand - the stored choice.
-     * @returns the brand actually applied.
-     */
-    function applyBrand(brand) {
-      var next = brand === BRAND_ANTHROPIC || brand === BRAND_OFF ? brand : BRAND_CLAUDE
-      document.body.setAttribute(BRAND_ATTR, next)
-      return next
-    }
-
     /**
      * Model & settings localized copy.
      *
@@ -4326,9 +4594,13 @@ window.__ModuleLoader__.load({
      * the picker copy, so the page follows the shell language too — and the
      * English constants stay as the fallback for a failed fetch.
      */
-    function settingsCopy(key, fallback) {
+    function settingsCopy(key, fallback, params) {
       var text = modelCopy === null || !modelCopy.settings ? '' : localized(modelCopy.settings[key])
-      return text || fallback
+      if (!text) text = fallback
+      if (!params) return text
+      return text.replace(/\{(\w+)\}/g, function (match, name) {
+        return Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : match
+      })
     }
 
     /**
@@ -4730,10 +5002,10 @@ window.__ModuleLoader__.load({
         permHoverIntent = createHoverIntent(openPerm, closePermMenu, 150)
 
         btn.addEventListener('mouseenter', function () {
-          if (readPrefs().autoPopover) openPerm()
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) openPerm()
         })
         btn.addEventListener('mouseleave', function () {
-          if (readPrefs().autoPopover) permHoverIntent.scheduleClose()
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) permHoverIntent.scheduleClose()
         })
         popover.addEventListener('mouseenter', function () {
           permHoverIntent.cancel()
@@ -5240,16 +5512,18 @@ window.__ModuleLoader__.load({
       function bindStatsHover(root) {
         if (root.__dshStatsHoverBound) return
         root.__dshStatsHoverBound = true
-        // Gated like the account, model and permission popovers. The setting promises
-        // "hover opens these; off makes them click-to-open", and the stats popover was
-        // the one that opened on hover no matter what — so it ignored the switch. With
-        // the setting off, a click still reaches the host's own stats dialog, which is
-        // exactly what that button is for.
+        // Gated like the account, model and permission popovers — and on the
+        // strictest scope: the stats card is not a picker, so it only auto-opens
+        // under "All". The setting promises "hover opens these; off makes them
+        // click-to-open", and the stats popover was the one that opened on hover
+        // no matter what — so it ignored the switch. With the setting off, a
+        // click still reaches the host's own stats dialog, which is exactly what
+        // that button is for.
         root.addEventListener('mouseenter', function () {
-          if (readPrefs().autoPopover) showStatsPopover(root)
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) showStatsPopover(root)
         })
         root.addEventListener('mouseleave', function () {
-          if (readPrefs().autoPopover) scheduleHideStatsPopover()
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) scheduleHideStatsPopover()
         })
       }
 
@@ -5296,7 +5570,8 @@ window.__ModuleLoader__.load({
           syncSegments()
           syncChatTabComposer()
         },
-        closeMenu: closePermMenu
+        closeMenu: closePermMenu,
+        closeStats: hideStatsPopover
       }
 
       return function () {
@@ -5326,15 +5601,6 @@ window.__ModuleLoader__.load({
       }
     }
 
-    // 从 model-picker.js 抽出（体量停止线：该文件已达 737/750 行）。碎片共享一个
-    // 工厂作用域，所以这里能直接看到 context/model-copy.js 的 modelCopy 与构建生成
-    // 的 COMBINE_SVGS / COMBINE_WORDS，
-    // 不需要 import；函数声明会提升，所以本文件在 build.mjs 的 FRAGMENTS 里的位置
-    // 不影响调用。
-    //
-    // modelEl 是行构建器共用的元素工厂，随它的消费者一起搬过来（原先与这些函数同
-    // 在 installModelPicker 内）。
-
     function modelEl(tag, cls, text) {
       var el = document.createElement(tag)
       if (cls) el.className = cls
@@ -5353,11 +5619,10 @@ window.__ModuleLoader__.load({
      * model it did not make (an OpenCode row wearing OpenCode's mark beside
      * "LongCat-2.0"), which reads as a wrong answer rather than a missing one.
      *
-     * @param groupId - provider route id (unused; kept for call-site symmetry).
      * @param modelId - catalog model id.
      * @returns the vendored lockup's id, or null when no rule claims it.
      */
-    function modelBrand(groupId, modelId) {
+    function modelBrand(modelId) {
       if (modelCopy !== null) {
         var id = String(modelId === void 0 || modelId === null ? '' : modelId).toLowerCase()
         for (var i = 0; i < modelCopy.brandRules.length; i++) {
@@ -5438,6 +5703,7 @@ window.__ModuleLoader__.load({
       var modelPop = null
       var modelSubPop = null
       var modelBody = null
+      var modelFooter = null
       var modelSubBody = null
       var modelHoverIntent = createHoverIntent(openModelPopover, closeModelPopovers, 180)
       var modelDir = null
@@ -5447,6 +5713,8 @@ window.__ModuleLoader__.load({
       var modelSubKind = null
       var modelBodySig = ''
       var modelSubSig = ''
+      /** Settings-page listeners waiting on the provider list. */
+      var providerListeners = []
 
       /** Exact entry: `provider/model`, bare id, folded id, then the alias table. */
       function exactModelCopy(groupId, modelId) {
@@ -5597,7 +5865,7 @@ window.__ModuleLoader__.load({
           var store = modelDir.store
           if (store && typeof store.subscribe === 'function') {
             try {
-              modelSub = store.subscribe(function () { if (ui.schedule) ui.schedule() })
+              modelSub = store.subscribe(function () { notifyProviders(); if (ui.schedule) ui.schedule() })
             } catch (error) {
               modelSub = null
             }
@@ -5611,6 +5879,37 @@ window.__ModuleLoader__.load({
         try { return modelDir.store.getSnapshot() } catch (error) { return null }
       }
 
+      /**
+       * The catalog's providers, in catalog order, each with its model count.
+       *
+       * The settings page's quick-provider picker is the other consumer, and it
+       * may be opened before the picker itself ever was — so this resolves the
+       * directory and starts the shared catalog load rather than requiring a
+       * first popover open.
+       */
+      function modelProviders() {
+        modelDirectory()
+        warmModelCatalog()
+        var snap = modelSnapshot()
+        var groups = (snap && snap.groups) || []
+        var out = []
+        for (var i = 0; i < groups.length; i++) {
+          if (groups[i].models.length === 0) continue
+          out.push({ id: groups[i].id, name: groups[i].name || groups[i].id, count: groups[i].models.length })
+        }
+        return out
+      }
+
+      /** Tell the settings picker the provider list moved (catalog arrived, changed). */
+      function notifyProviders() {
+        if (providerListeners.length === 0) return
+        var list = modelProviders()
+        var listeners = providerListeners.slice()
+        for (var i = 0; i < listeners.length; i++) {
+          try { listeners[i](list) } catch (error) { /* one listener must not block the rest */ }
+        }
+      }
+
       /**
        * Start the host's model catalog load as soon as a session resolves, rather
        * than waiting for the first popover open.
@@ -5692,13 +5991,32 @@ window.__ModuleLoader__.load({
       var MODEL_CHECK_SVG = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3.2 3.2L13 5"/></svg>'
       var MODEL_CHEVRON_SVG = '<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4l4 4-4 4"/></svg>'
 
+      /** Catalog order is whatever the provider happened to send; id order is scannable. */
+      function byModelId(a, b) {
+        var left = String(a.id)
+        var right = String(b.id)
+        return left < right ? -1 : left > right ? 1 : 0
+      }
+
+      /**
+       * The rule that separates one provider's models from the next. The provider
+       * name rides the rule itself rather than trailing the model in parentheses:
+       * one quiet line above the group says who serves it, and the model names
+       * stay clean.
+       */
+      function buildProviderRule(name) {
+        var rule = modelEl('div', 'dsh-claude-model-rule')
+        if (name) rule.appendChild(modelEl('span', 'dsh-claude-model-rule-name', name))
+        return rule
+      }
+
       /** One selectable model row: brand mark, name, optional description line and a check when current. */
       function buildModelOption(group, model, selected, withDescription) {
         var item = modelEl('button', 'dsh-claude-model-option')
         item.type = 'button'
         item.setAttribute('role', 'menuitemradio')
         item.setAttribute('aria-checked', selected ? 'true' : 'false')
-        var brand = modelBrand(group.id, model.id)
+        var brand = modelBrand(model.id)
         // The brand id is the row's styling hook — it is what gives a vendor's rows
         // their own typography (see .dsh-claude-model-name in
         // styles/components/model-picker.css). The vendor's mark is no longer drawn
@@ -5739,7 +6057,7 @@ window.__ModuleLoader__.load({
         cell.appendChild(chevron)
         cell.addEventListener('mouseenter', (function (k) {
           return function () {
-            if (readPrefs().autoPopover) openModelSub(k)
+            if (readPrefs().autoPopover === AUTO_POPOVER_ALL) openModelSub(k)
           }
         })(kind))
         cell.addEventListener('click', (function (k) {
@@ -5785,60 +6103,81 @@ window.__ModuleLoader__.load({
         var groups = (snap && snap.groups) || []
         var current = modelCurrent(snap)
         var effort = modelEffort(snap)
-        var sig = [status, activeLocale(), current ? current.group.id + '/' + current.model.id : '', effort ? String(effort.effective) : ''].join('|')
+        var sig = [status, activeLocale(), current ? current.group.id + '/' + current.model.id : '', effort ? String(effort.effective) : '', readPrefs().quickProviders.join(',')].join('|')
         for (var g = 0; g < groups.length; g++) sig += ';' + groups[g].id + ':' + groups[g].models.length
         if (sig === modelBodySig) return
         modelBodySig = sig
         while (modelBody.firstChild) modelBody.removeChild(modelBody.firstChild)
+        while (modelFooter && modelFooter.firstChild) modelFooter.removeChild(modelFooter.firstChild)
 
         if (status === 'idle' || status === 'loading' || status === 'selecting') {
           modelBody.appendChild(modelEl('div', 'dsh-claude-model-status', copyLabel('loading', MODEL_LOADING_LABEL)))
         } else {
-          var official = null
+          // Level 1 always leads with the official service: it is the default
+          // provider, not a choice in the settings, so it stays first no matter
+          // what else is picked. The quick providers the settings page picked
+          // follow it, each under its own rule. Only when the catalog has no
+          // (non-empty) official service at all does the list fall back to the
+          // picked providers, and with none picked to every provider.
+          var sections = []
+          var chosen = readPrefs().quickProviders
+          for (var g0 = 0; g0 < groups.length; g0++) {
+            if (groups[g0].id === MODEL_OFFICIAL_GROUP && groups[g0].models.length > 0) {
+              sections.push(groups[g0])
+              break
+            }
+          }
           for (var g2 = 0; g2 < groups.length; g2++) {
-            if (groups[g2].id === MODEL_OFFICIAL_GROUP) { official = groups[g2]; break }
+            if (chosen.indexOf(groups[g2].id) === -1 || groups[g2].id === MODEL_OFFICIAL_GROUP || groups[g2].models.length === 0) continue
+            sections.push(groups[g2])
           }
-          var rows = []
-          if (official) {
-            for (var m = 0; m < official.models.length; m++) rows.push({ group: official, model: official.models[m] })
-          } else {
-            for (var g3 = 0; g3 < groups.length; g3++) {
-              for (var m2 = 0; m2 < groups[g3].models.length; m2++) rows.push({ group: groups[g3], model: groups[g3].models[m2] })
+          if (sections.length === 0) {
+            for (var g4 = 0; g4 < groups.length; g4++) {
+              if (groups[g4].models.length > 0) sections.push(groups[g4])
             }
           }
-          if (rows.length === 0) {
+          if (sections.length === 0) {
             modelBody.appendChild(modelEl('div', 'dsh-claude-model-status', copyLabel('empty', MODEL_EMPTY_LABEL)))
           } else {
-            for (var r = 0; r < rows.length; r++) {
-              var selected = current !== null && current.group.id === rows[r].group.id && current.model.id === rows[r].model.id
-              modelBody.appendChild(buildModelOption(rows[r].group, rows[r].model, selected, true))
+            for (var s = 0; s < sections.length; s++) {
+              var section = sections[s]
+              // The official source needs no naming, and the first section needs
+              // no rule: a bare line above the list would be one line too many.
+              var sectionLabel = section.id === MODEL_OFFICIAL_GROUP ? '' : (section.name || section.id)
+              if (sectionLabel !== '' || s > 0) modelBody.appendChild(buildProviderRule(sectionLabel))
+              var sectionModels = section.models.slice().sort(byModelId)
+              for (var m = 0; m < sectionModels.length; m++) {
+                var selected = current !== null && current.group.id === section.id && current.model.id === sectionModels[m].id
+                modelBody.appendChild(buildModelOption(section, sectionModels[m], selected, true))
+              }
             }
           }
-          modelBody.appendChild(modelEl('div', 'dsh-claude-model-divider'))
-          // When the active model is not on the official service, surface it under
-          // the official list so the current seat is still visible before the
-          // effort/More rows. It reads `model (provider)` in display names, never
-          // ids, and the provider trails the model instead of leading it: a
-          // wordmark may stand at the front of the label, and the seat has to say
-          // both which model it is on and which provider serves it — a wordmark
-          // names the vendor, not the route. It carries a description like any
-          // level-1 row, because this is the row the seat is read from.
-          if (current !== null && current.group.id !== MODEL_OFFICIAL_GROUP) {
+          // The current seat is surfaced under the list when none of the sections
+          // above already carries it, so the row the seat is read from is always
+          // on screen. Its provider rides a rule of its own rather than trailing
+          // the model in parentheses — the same idiom the sections use. It stays
+          // above the divider: the divider closes the model list, so anything
+          // that belongs to the list has to sit on its side of it.
+          var currentListed = false
+          for (var c = 0; c < sections.length; c++) {
+            if (current !== null && sections[c].id === current.group.id) currentListed = true
+          }
+          if (current !== null && !currentListed) {
+            // The divider above already draws a line, so a provider that needs no
+            // naming (the official source) adds nothing here.
+            var currentRuleName = current.group.id === MODEL_OFFICIAL_GROUP ? '' : (current.group.name || current.group.id)
+            if (currentRuleName !== '') modelBody.appendChild(buildProviderRule(currentRuleName))
             var currentRow = modelEl('button', 'dsh-claude-model-option')
             currentRow.type = 'button'
             currentRow.setAttribute('role', 'menuitemradio')
             currentRow.setAttribute('aria-checked', 'true')
-            var currentBrand = modelBrand(current.group.id, current.model.id)
+            var currentBrand = modelBrand(current.model.id)
             var currentName = current.model.name || current.model.id
             // The brand id is the row's styling hook here too, so this row wears
             // the same vendor lockup and face as the list entry it stands for.
             if (currentBrand) currentRow.setAttribute('data-brand', currentBrand)
             var currentCopy = modelEl('span', 'dsh-claude-model-copy')
             var currentLabel = buildModelLabel(currentName, currentBrand)
-            // The provider's own display name; the route id only stands in when
-            // the catalog gives the group no name.
-            var currentProvider = current.group.name || current.group.id
-            if (currentProvider) currentLabel.appendChild(document.createTextNode(' (' + currentProvider + ')'))
             currentCopy.appendChild(currentLabel)
             var currentDesc = modelDescription(current.group.id, current.model)
             if (currentDesc) currentCopy.appendChild(modelEl('span', 'dsh-claude-model-desc', currentDesc))
@@ -5852,8 +6191,14 @@ window.__ModuleLoader__.load({
             })
             modelBody.appendChild(currentRow)
           }
-          if (effort) modelBody.appendChild(buildModelCell(copyLabel('effortLabel', MODEL_EFFORT_LABEL), effort.label, 'effort'))
-          modelBody.appendChild(buildModelCell(copyLabel('moreLabel', MODEL_MORE_LABEL), '', 'more'))
+          // The divider closes the model list and the two drill rows follow it;
+          // all three live in the footer, OUTSIDE the scroll area — the list
+          // above scrolls under them while the controls stay reachable.
+          if (modelFooter) {
+            modelFooter.appendChild(modelEl('div', 'dsh-claude-model-divider'))
+            if (effort) modelFooter.appendChild(buildModelCell(copyLabel('effortLabel', MODEL_EFFORT_LABEL), effort.label, 'effort'))
+            modelFooter.appendChild(buildModelCell(copyLabel('moreLabel', MODEL_MORE_LABEL), '', 'more'))
+          }
         }
       }
 
@@ -5918,11 +6263,7 @@ window.__ModuleLoader__.load({
           // A provider's models read in id order, so the list is scannable and stays
           // put between visits; the catalog's own order is whatever the provider
           // happened to send. Sorted on a copy — the snapshot belongs to the store.
-          var groupModels = group.models.slice().sort(function (a, b) {
-            var left = String(a.id)
-            var right = String(b.id)
-            return left < right ? -1 : left > right ? 1 : 0
-          })
+          var groupModels = group.models.slice().sort(byModelId)
           for (var m = 0; m < groupModels.length; m++) {
             var selected = current !== null && current.group.id === group.id && current.model.id === groupModels[m].id
             groupSection.appendChild(buildModelOption(group, groupModels[m], selected, false))
@@ -5958,6 +6299,9 @@ window.__ModuleLoader__.load({
           modelBody = document.createElement('div')
           modelBody.className = 'dsh-claude-model-popover-body'
           modelPop.appendChild(modelBody)
+          modelFooter = document.createElement('div')
+          modelFooter.className = 'dsh-claude-model-footer'
+          modelPop.appendChild(modelFooter)
           modelPop.addEventListener('mouseenter', cancelCloseModel)
           modelPop.addEventListener('mouseleave', scheduleCloseModel)
           document.body.appendChild(modelPop)
@@ -5978,7 +6322,10 @@ window.__ModuleLoader__.load({
 
       /** Build/refresh the trigger, its label and the popover rows. */
       function syncModelControl() {
-        if (!ui.copy.isComposerActive()) {
+        // Two ways to be off: the composer restyle does not apply to this page, or
+        // the picker preference is off. Both hand the host's own model seat and
+        // menu back, so both run the same sweep.
+        if (!ui.copy.isComposerActive() || !readPrefs().modelPicker) {
           var allHosts = document.querySelectorAll('[data-dsh-claude-model-host]')
           for (var h = 0; h < allHosts.length; h++) {
             allHosts[h].removeAttribute('data-dsh-claude-model-host')
@@ -5995,6 +6342,7 @@ window.__ModuleLoader__.load({
           modelPop = null
           modelSubPop = null
           modelBody = null
+          modelFooter = null
           modelSubBody = null
           modelSubKind = null
           modelBodySig = ''
@@ -6014,6 +6362,18 @@ window.__ModuleLoader__.load({
         var slot = document.querySelector('[data-slot="conversation.input.model"]')
         if (slot === null) return
         // Hide the host's own seat (React owns the node; re-mark on swap).
+        // Idempotent against a torn-down-less reload, like the account footer:
+        // client HMR drops the old fiber's disposals, so a previous generation's
+        // trigger and popovers are still in the DOM while this fresh scope starts
+        // from null. Sweep the strays, or the seat renders twice.
+        var strayBtns = slot.querySelectorAll('.dsh-claude-model-btn')
+        for (var sb = 0; sb < strayBtns.length; sb++) {
+          if (strayBtns[sb] !== modelBtn) strayBtns[sb].parentElement.removeChild(strayBtns[sb])
+        }
+        var strayPops = document.querySelectorAll('body > .dsh-claude-model-popover')
+        for (var sp = 0; sp < strayPops.length; sp++) {
+          if (strayPops[sp] !== modelPop && strayPops[sp] !== modelSubPop) strayPops[sp].parentElement.removeChild(strayPops[sp])
+        }
         var hostRoot = slot.firstElementChild
         if (hostRoot !== null && !hostRoot.hasAttribute('data-dsh-claude-model-host')) {
           hostRoot.setAttribute('data-dsh-claude-model-host', '')
@@ -6025,13 +6385,13 @@ window.__ModuleLoader__.load({
           modelBtn.className = 'dsh-claude-model-btn'
           modelBtn.setAttribute('aria-haspopup', 'menu')
           modelBtn.innerHTML = '<span class="dsh-claude-model-btn-label"></span>'
-          // Same contract as the account trigger: hover unless the preference
-          // says click-only.
+          // Same contract as the account trigger: hover under the "All" scope,
+          // click-only otherwise.
           modelBtn.addEventListener('mouseenter', function () {
-            if (readPrefs().autoPopover) openModelPopover()
+            if (readPrefs().autoPopover === AUTO_POPOVER_ALL) openModelPopover()
           })
           modelBtn.addEventListener('mouseleave', function () {
-            if (readPrefs().autoPopover) scheduleCloseModel()
+            if (readPrefs().autoPopover === AUTO_POPOVER_ALL) scheduleCloseModel()
           })
           modelBtn.addEventListener('click', function (e) {
             e.stopPropagation()
@@ -6083,6 +6443,14 @@ window.__ModuleLoader__.load({
                  (modelSubPop !== null && modelSubPop.contains(target))
         },
         reposition: positionModelPopovers,
+        providers: modelProviders,
+        onProviders: function (listener) {
+          providerListeners.push(listener)
+          return function () {
+            var at = providerListeners.indexOf(listener)
+            if (at !== -1) providerListeners.splice(at, 1)
+          }
+        },
         invalidateCopy: function () {
           modelBodySig = ''
           modelSubSig = ''
@@ -6097,6 +6465,7 @@ window.__ModuleLoader__.load({
           modelPop = null
           modelSubPop = null
           modelBody = null
+          modelFooter = null
           modelSubBody = null
           modelSubKind = null
           modelBodySig = ''
@@ -6107,6 +6476,331 @@ window.__ModuleLoader__.load({
       return ui.model.teardown
     }
 
+    /**
+     * The hero row's two pickers — the workspace (directory) chip and the
+     * agent-preset seat — both open the host's shared menu primitive, which
+     * portals its card to <body>. That card carries no marker of its own, so a
+     * stylesheet cannot tell it apart from the host's other menus (sidebar row
+     * menus, the settings permission row, submenus) — and it has to: this skin
+     * redraws these two and leaves the rest alone.
+     *
+     * So the browser half stamps the open card rather than guessing in CSS.
+     * While either trigger reports `aria-expanded="true"`, the one host menu
+     * sitting in <body> is that card; HERO_MENU_ATTR is what
+     * components/hero-menu.css switches on.
+     *
+     * The scheduler's attributeFilter does not watch `aria-expanded`, but the
+     * card is inserted into <body> as it opens — a childList mutation the pass
+     * already observes — so the stamp lands on the frame the menu appears. Two
+     * candidates mean an unrelated menu is open as well: the pass then leaves
+     * every card alone rather than stamping the wrong one.
+     *
+     * The host drops that card below its trigger, which is exactly where the
+     * composer sits: it would land on the input area and on the controls in it.
+     * This row is *above* the composer, so the card belongs beside the trigger
+     * instead — bottom-aligned with it and growing upward into the empty hero
+     * space. The host re-places the card on every scroll and resize, so this
+     * position is written with `important` (which beats its inline write) and
+     * re-applied from the scheduler's scroll/resize hook.
+     *
+     * Hover is the host's own click handler driven from here: the "Open popovers
+     * on hover" preference's `all` scope covers these two, and the host offers no
+     * hover of its own. The listeners are delegated from the document because
+     * React replaces the triggers, and the close waits out the gap between the
+     * trigger and the card so crossing it does not shut the menu.
+     */
+    function installHeroMenu(ctx, ui) {
+      /** Air between the trigger and the card, and the viewport's own margin. */
+      var GAP = 6
+      var MARGIN = 12
+      /** Long enough to cross the gap above, short enough to still read as hover. */
+      var CLOSE_DELAY = 160
+      /** The two triggers, and the card once it is stamped. */
+      var TRIGGER_SELECTOR = '[class*="heroWorkspaceRow"] [aria-haspopup="menu"]'
+      var CARD_SELECTOR = '[' + HERO_MENU_ATTR + ']'
+      var stamped = null
+      var stampedTrigger = null
+      var closeTimer = null
+      var openedByHover = false
+
+      function cancelHoverClose() {
+        if (closeTimer === null) return
+        clearTimeout(closeTimer)
+        closeTimer = null
+      }
+
+      /** Close what hover opened; a click-opened menu is left alone. */
+      function closeFromHover() {
+        closeTimer = null
+        if (!openedByHover) return
+        var trigger = openTrigger()
+        if (trigger !== null) trigger.click()
+        openedByHover = false
+      }
+
+      function scheduleHoverClose() {
+        cancelHoverClose()
+        closeTimer = setTimeout(closeFromHover, CLOSE_DELAY)
+      }
+
+      /** The `all` scope only, and only while the composer restyle is in play. */
+      function hoverEnabled() {
+        return readPrefs().autoPopover === AUTO_POPOVER_ALL &&
+               ui.copy !== undefined && ui.copy.isComposerActive()
+      }
+
+      function closestWithin(target, selector) {
+        if (target === null || target === undefined || typeof target.closest !== 'function') return null
+        return target.closest(selector)
+      }
+
+      function onHeroPointerOver(e) {
+        if (!hoverEnabled()) return
+        var target = e.target
+        if (closestWithin(target, CARD_SELECTOR) !== null) {
+          cancelHoverClose()
+          return
+        }
+        var trigger = closestWithin(target, TRIGGER_SELECTOR)
+        if (trigger === null) return
+        cancelHoverClose()
+        if (trigger.getAttribute('aria-expanded') !== 'true') {
+          trigger.click()
+          openedByHover = true
+        }
+      }
+
+      function onHeroPointerOut(e) {
+        if (!hoverEnabled()) return
+        var target = e.target
+        if (closestWithin(target, CARD_SELECTOR) === null && closestWithin(target, TRIGGER_SELECTOR) === null) return
+        // Moving onto the other half — the card, or the trigger — is not a leave.
+        var next = e.relatedTarget
+        if (closestWithin(next, CARD_SELECTOR) !== null || closestWithin(next, TRIGGER_SELECTOR) !== null) return
+        scheduleHoverClose()
+      }
+
+      document.addEventListener('mouseover', onHeroPointerOver, true)
+      document.addEventListener('mouseout', onHeroPointerOut, true)
+
+      function clearStamp() {
+        if (stamped === null) return
+        stamped.removeAttribute(HERO_MENU_ATTR)
+        stamped = null
+        stampedTrigger = null
+      }
+
+      /** The trigger whose picker is open, or null. */
+      function openTrigger() {
+        return document.querySelector('[class*="heroWorkspaceRow"] [aria-haspopup="menu"][aria-expanded="true"]') ||
+               document.querySelector('[class*="cardWorkspaceTrigger"] [aria-expanded="true"]')
+      }
+
+      /**
+       * Park the card beside its trigger: to its right, bottom-aligned so it
+       * grows upward, flipped to the left when the viewport is tight, and clamped
+       * to the viewport either way. A card that has not been laid out yet is left
+       * for the next pass rather than pinned to a zero-sized guess.
+       */
+      function placeCard(trigger, card) {
+        var rect = trigger.getBoundingClientRect()
+        var width = card.offsetWidth
+        var height = card.offsetHeight
+        if (width === 0 || height === 0) return
+        var left = rect.right + GAP
+        if (left + width > window.innerWidth - MARGIN) left = rect.left - GAP - width
+        left = Math.max(MARGIN, Math.min(left, window.innerWidth - width - MARGIN))
+        var top = rect.bottom - height
+        top = Math.max(MARGIN, Math.min(top, window.innerHeight - height - MARGIN))
+        card.style.setProperty('left', Math.round(left) + 'px', 'important')
+        card.style.setProperty('top', Math.round(top) + 'px', 'important')
+      }
+
+      /** Re-place an open card after a scroll or a resize moved its anchor. */
+      function repositionHeroMenu() {
+        if (stamped === null || stampedTrigger === null) return
+        placeCard(stampedTrigger, stamped)
+      }
+
+      function syncHeroMenu() {
+        var trigger = openTrigger()
+        if (trigger === null) {
+          // The menu is shut — by a click, by Escape or by an outside press — so
+          // whatever hover opened it no longer owns it.
+          openedByHover = false
+          cancelHoverClose()
+          clearStamp()
+          return
+        }
+        // The skin's own popovers carry their own classes, so excluding them
+        // leaves the host's menus only.
+        var cards = document.querySelectorAll('body > [role="menu"]:not([class*="dsh-claude"])')
+        if (cards.length !== 1) {
+          clearStamp()
+          return
+        }
+        if (stamped !== cards[0]) {
+          clearStamp()
+          stamped = cards[0]
+          stampedTrigger = trigger
+          stamped.setAttribute(HERO_MENU_ATTR, '')
+        }
+        placeCard(trigger, stamped)
+      }
+
+      ui.heroMenu = { sync: syncHeroMenu, reposition: repositionHeroMenu }
+      return function () {
+        cancelHoverClose()
+        openedByHover = false
+        clearStamp()
+        document.removeEventListener('mouseover', onHeroPointerOver, true)
+        document.removeEventListener('mouseout', onHeroPointerOut, true)
+        delete ui.heroMenu
+      }
+    }
+
+    /**
+     * The settings page's quick-provider picker — the providers whose models the
+     * model picker's first level carries.
+     *
+     * It is the permission popover's design in multi-select form: the same card
+     * and the same rows (`.dsh-claude-perm-popover` is that shared card, the name
+     * is historical), with the accent check marking the chosen providers. It is a
+     * settings control rather than a takeover, so it opens on click only —
+     * hovering a settings row should not unfold a menu — and it stays open while
+     * rows are toggled.
+     *
+     * The card is appended to <body> rather than rendered inside the settings row:
+     * a dialog clips and may transform its own subtree, so a `position: fixed`
+     * card in there would be positioned against the dialog, not the viewport.
+     */
+    function installQuickProviders(ctx, ui) {
+      var CHECK_SVG = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3.2 3.2L13 5"/></svg>'
+      var card = null
+      var cardBody = null
+      var anchor = null
+      var onWrite = null
+      var providers = []
+      var unsubscribe = null
+
+      function close() {
+        if (card !== null && card.parentElement) card.parentElement.removeChild(card)
+        if (anchor !== null) anchor.setAttribute('aria-expanded', 'false')
+        card = null
+        cardBody = null
+        anchor = null
+        onWrite = null
+        document.removeEventListener('pointerdown', onOutsidePointerDown, true)
+        document.removeEventListener('keydown', onKeyDown, true)
+      }
+
+      function onOutsidePointerDown(e) {
+        if (card === null) return
+        var target = e.target
+        if (card.contains(target)) return
+        if (anchor !== null && anchor.contains(target)) return
+        close()
+      }
+
+      function onKeyDown(e) {
+        if (e.key === 'Escape') close()
+      }
+
+      /** One provider: its name, how many models it offers, and a check when chosen. */
+      function buildRow(provider, chosen, stale) {
+        var row = modelEl('button', 'dsh-claude-popover-item')
+        if (stale) row.classList.add('dsh-claude-model-stale')
+        row.type = 'button'
+        row.setAttribute('role', 'menuitemcheckbox')
+        row.setAttribute('aria-checked', chosen ? 'true' : 'false')
+        row.appendChild(modelEl('span', 'dsh-claude-popover-item-text', provider.name))
+        row.appendChild(modelEl('span', 'dsh-claude-popover-item-badge', stale ? settingsCopy('quickRemoved', 'Removed') : String(provider.count)))
+        var check = modelEl('span', 'dsh-claude-model-check')
+        check.innerHTML = chosen ? CHECK_SVG : ''
+        row.appendChild(check)
+        row.addEventListener('click', function (e) {
+          e.stopPropagation()
+          var next = readPrefs().quickProviders.slice()
+          var at = next.indexOf(provider.id)
+          if (at === -1) next.push(provider.id)
+          else next.splice(at, 1)
+          if (typeof onWrite === 'function') onWrite(next)
+          renderBody()
+        })
+        return row
+      }
+
+      function renderBody() {
+        if (cardBody === null) return
+        while (cardBody.firstChild) cardBody.removeChild(cardBody.firstChild)
+        if (providers.length === 0) {
+          cardBody.appendChild(modelEl('div', 'dsh-claude-model-status', settingsCopy('quickLoading', 'Loading providers…')))
+          return
+        }
+        var chosen = readPrefs().quickProviders
+        // The official service always leads the first level, so it is not a
+        // choice here: it is never listed, and a stored id for it is pruned on
+        // load. A provider that vanished from the catalog still appears, marked
+        // removed, so it can be unchecked out of the stored list instead of
+        // lingering invisibly.
+        var known = {}
+        for (var i = 0; i < providers.length; i++) {
+          if (providers[i].id === MODEL_OFFICIAL_GROUP) continue
+          known[providers[i].id] = true
+          cardBody.appendChild(buildRow(providers[i], chosen.indexOf(providers[i].id) !== -1, false))
+        }
+        for (var s = 0; s < chosen.length; s++) {
+          if (chosen[s] === MODEL_OFFICIAL_GROUP || known[chosen[s]]) continue
+          cardBody.appendChild(buildRow({ id: chosen[s], name: chosen[s], count: 0 }, true, true))
+        }
+      }
+
+      function open(trigger, write) {
+        anchor = trigger
+        anchor.setAttribute('aria-expanded', 'true')
+        onWrite = write
+        providers = ui.model && typeof ui.model.providers === 'function' ? ui.model.providers() : []
+        card = modelEl('div', 'dsh-claude-perm-popover')
+        card.setAttribute('role', 'menu')
+        card.setAttribute('data-open', 'true')
+        cardBody = modelEl('div', 'dsh-claude-model-popover-body')
+        card.appendChild(cardBody)
+        renderBody()
+        document.body.appendChild(card)
+        positionAnchoredPopover(trigger, card, { side: 'above', gap: 6, important: true })
+        document.addEventListener('pointerdown', onOutsidePointerDown, true)
+        document.addEventListener('keydown', onKeyDown, true)
+      }
+
+      function toggle(trigger, write) {
+        if (card === null) open(trigger, write)
+        else close()
+      }
+
+      // The catalog arrives after the settings page may already be open, so an
+      // open card follows it rather than showing an empty list until reopened.
+      if (ui.model && typeof ui.model.onProviders === 'function') {
+        unsubscribe = ui.model.onProviders(function (list) {
+          providers = list
+          if (card !== null) renderBody()
+        })
+      }
+
+      ui.quickProviders = {
+        toggle: toggle,
+        close: close,
+        isOpen: function () { return card !== null },
+      }
+      return function () {
+        close()
+        if (unsubscribe !== null) {
+          try { unsubscribe() } catch (error) { /* already disposed */ }
+          unsubscribe = null
+        }
+        delete ui.quickProviders
+      }
+    }
+
     function installAccountFooter(ctx, ui) {
       var accountBtn = null
       var accountPopover = null
@@ -6696,6 +7390,20 @@ window.__ModuleLoader__.load({
         }
         var username = getUsername(ctx)
 
+        // Idempotent against a torn-down-less reload: client HMR drops the old
+        // fiber's disposals instead of running them, so a previous generation's
+        // button and popover are still in the DOM and this fresh scope knows
+        // nothing of them. Sweep the strays before deciding whether to build —
+        // otherwise the row renders twice (and the orphan keeps a stale name).
+        var strayBtns = footArea.querySelectorAll('.dsh-claude-account-btn')
+        for (var sb = 0; sb < strayBtns.length; sb++) {
+          if (strayBtns[sb] !== accountBtn) strayBtns[sb].parentElement.removeChild(strayBtns[sb])
+        }
+        var strayPops = document.querySelectorAll('body > .dsh-claude-account-popover')
+        for (var sp = 0; sp < strayPops.length; sp++) {
+          if (strayPops[sp] !== accountPopover) strayPops[sp].parentElement.removeChild(strayPops[sp])
+        }
+
         if (accountBtn === null || !footArea.contains(accountBtn)) {
           if (accountBtn && accountBtn.parentElement) accountBtn.parentElement.removeChild(accountBtn)
           accountBtn = document.createElement('div')
@@ -6714,12 +7422,13 @@ window.__ModuleLoader__.load({
           // Hover is the default way in; the "Open popovers on hover"
           // preference turns it off, leaving the click handler below as the only
           // way in (and the only way out, so a click-opened popover does not
-          // vanish when the pointer leaves).
+          // vanish when the pointer leaves). The account row is the one popover
+          // the `account` scope keeps on hover.
           accountBtn.addEventListener('mouseenter', function () {
-            if (readPrefs().autoPopover) openPopover()
+            if (readPrefs().autoPopover !== AUTO_POPOVER_OFF) openPopover()
           })
           accountBtn.addEventListener('mouseleave', function () {
-            if (readPrefs().autoPopover && !popoverOpenedByClick) scheduleClosePopover()
+            if (readPrefs().autoPopover !== AUTO_POPOVER_OFF && !popoverOpenedByClick) scheduleClosePopover()
           })
           accountBtn.addEventListener('click', function (e) {
             e.stopPropagation()
@@ -7339,6 +8048,23 @@ window.__ModuleLoader__.load({
         }
       }
 
+      // Focus moving into the composer means the user is about to type: every
+      // popover the skin keeps open around the card is in the way there, so all
+      // of them close. `focusin` bubbles (unlike focus), so one listener covers
+      // the card and everything inside it; the observer's attributeFilter does
+      // not watch focus events, so this cannot feed itself another pass.
+      function onComposerFocusIn(e) {
+        var target = e.target
+        if (!target || typeof target.closest !== 'function') return
+        if (target.closest('[data-composer-card]') === null) return
+        if (ui.model) ui.model.close()
+        if (ui.permissions) ui.permissions.closeMenu()
+        if (ui.permissions && ui.permissions.closeStats) ui.permissions.closeStats()
+        if (ui.footer) ui.footer.close()
+        if (ui.heroMenu) ui.heroMenu.close()
+        if (ui.quickProviders) ui.quickProviders.close()
+      }
+
       function onComposerInput(e) {
         var target = e.target
         if (!target) return
@@ -7352,12 +8078,14 @@ window.__ModuleLoader__.load({
       document.addEventListener('keydown', onGlobalKeyDown, true)
       document.addEventListener('input', onComposerInput, true)
       document.addEventListener('compositionend', onComposerInput, true)
+      document.addEventListener('focusin', onComposerFocusIn, true)
 
       // Both fixed popovers are anchored to their trigger; scroll of the page
       // (not the conversation's own auto-stick) and resizes move the anchor, so
       // whichever is open must re-resolve it.
       function onFixedPopoverViewportChange() {
         if (ui.model) ui.model.reposition()
+        if (ui.heroMenu) ui.heroMenu.reposition()
         if (ui.footer && ui.footer.isOpen()) ui.footer.reposition()
       }
       window.addEventListener('resize', onFixedPopoverViewportChange)
@@ -7429,6 +8157,7 @@ window.__ModuleLoader__.load({
           if (ui.copy) ui.copy.sync()
           if (ui.permissions) ui.permissions.sync()
           if (ui.model) ui.model.sync()
+          if (ui.heroMenu) ui.heroMenu.sync()
           if (ui.footer) ui.footer.sync()
           if (ui.settings) ui.settings.sync()
           // Covers the rail toggle (and any reflow) while the popover is open:
@@ -7497,6 +8226,7 @@ window.__ModuleLoader__.load({
         document.removeEventListener('keydown', onGlobalKeyDown, true)
         document.removeEventListener('input', onComposerInput, true)
         document.removeEventListener('compositionend', onComposerInput, true)
+        document.removeEventListener('focusin', onComposerFocusIn, true)
         // Safety-net DOM sweep. Feature teardowns run after this and tolerate
         // nodes already being detached.
         var leftoverItems = document.querySelectorAll('.dsh-claude-popover-item, .dsh-claude-popover-embed, .dsh-claude-account-popover, .dsh-claude-account-btn, .dsh-claude-perm-container, .dsh-claude-perm-popover, .dsh-claude-segments[data-composer-segments], .dsh-claude-model-btn, .dsh-claude-model-popover, .dsh-claude-ban, [data-dsh-synthetic-placeholder]')
@@ -7530,6 +8260,13 @@ window.__ModuleLoader__.load({
      * `.dsh-claude-segment` classes — the same control the composer's permission
      * picker uses — so the two read as one design instead of two lookalikes.
      */
+    /**
+     * The quick-provider popover (src/overrides/quick-providers.js). The settings
+     * row is React-rendered while that card is imperative, so the row reaches the
+     * popover through this handle.
+     */
+    var quickProviderApi = null
+
     function ClaudeStyleSettingsSection() {
       var state = React.useState(readPrefs())
       var prefs = state[0]
@@ -7541,6 +8278,7 @@ window.__ModuleLoader__.load({
       var username = usernameState[0]
       var setUsername = usernameState[1]
       var usernameTimer = React.useRef(null)
+      var quickTrigger = React.useRef(null)
 
       // The skin's own apply-side writes land here too (a reload, a conflict
       // re-read), so the page never drifts from what the document says.
@@ -7669,6 +8407,17 @@ window.__ModuleLoader__.load({
         { value: BAN_LOCALE_ZH, label: settingsCopy('banLocaleZh', '中文') },
         { value: BAN_LOCALE_EN, label: settingsCopy('banLocaleEn', 'English') },
       ]
+      var autoPopoverOptions = [
+        { value: AUTO_POPOVER_OFF, label: settingsCopy('autoPopoverOff', 'Off') },
+        { value: AUTO_POPOVER_ACCOUNT, label: settingsCopy('autoPopoverAccount', 'Account only') },
+        { value: AUTO_POPOVER_ALL, label: settingsCopy('autoPopoverAll', 'All') },
+      ]
+
+      /** What the quick-provider trigger reads: how many, or nothing chosen. */
+      var quickSummary = function (chosen) {
+        if (chosen.length === 0) return settingsCopy('quickNone', 'None')
+        return settingsCopy('quickCount', '{count} providers', { count: chosen.length })
+      }
 
       var rows = [
         row(
@@ -7715,8 +8464,8 @@ window.__ModuleLoader__.load({
         row(
           'autoPopover',
           settingsCopy('autoPopoverTitle', 'Open popovers on hover'),
-          settingsCopy('autoPopoverDesc', 'Hover opens the account, model, and permission popovers. Off switches them to click-to-open.'),
-          toggle(prefs.autoPopover, function (value) { write({ autoPopover: value }) }),
+          settingsCopy('autoPopoverDesc', 'Which popovers hover opens. Off leaves them all click-to-open.'),
+          segment(autoPopoverOptions, prefs.autoPopover, function (value) { write({ autoPopover: value }) }),
         ),
         row(
           'composerScope',
@@ -7724,6 +8473,28 @@ window.__ModuleLoader__.load({
           settingsCopy('composerDesc', 'Which input area the skin restyles: the new-conversation page, the conversation, or both.'),
           segment(scopeOptions, prefs.composerScope, function (value) { write({ composerScope: value }) }),
         ),
+        row(
+          'modelPicker',
+          settingsCopy('pickerTitle', 'Redraw the model picker'),
+          settingsCopy('pickerDesc', 'Replace the composer\'s model seat with the two-level Claude-style menu. Off hands the model menu back to the host; the rest of the composer restyle is unaffected.'),
+          toggle(prefs.modelPicker, function (value) { write({ modelPicker: value }) }),
+        ),
+        row(
+          'quickProviders',
+          settingsCopy('quickTitle', 'Quick providers'),
+          settingsCopy('quickDesc', 'Providers whose models the picker\'s first level lists, one rule between providers. Nothing picked keeps the default: the official service.'),
+          React.createElement('button', {
+            type: 'button',
+            ref: quickTrigger,
+            className: 'dsh-claude-settings-picker',
+            'aria-haspopup': 'menu',
+            'aria-expanded': 'false',
+            onClick: function () {
+              if (quickProviderApi === null || quickTrigger.current === null) return
+              quickProviderApi.toggle(quickTrigger.current, function (next) { write({ quickProviders: next }) })
+            },
+          }, quickSummary(prefs.quickProviders)),
+        ),
         row(
           'banLocale',
           settingsCopy('banLocaleTitle', 'Account-hold easter egg language'),
@@ -7784,6 +8555,7 @@ window.__ModuleLoader__.load({
         ui.settings = {
           sync: syncSettingsNav,
         }
+        quickProviderApi = ui.quickProviders || null
       }
       if (typeof ctx.inject !== 'function') return function () {}
       var fiber = ctx.inject(['slots'], function (scope) {
@@ -7809,6 +8581,7 @@ window.__ModuleLoader__.load({
         if (ui && ui.settings) {
           delete ui.settings
         }
+        quickProviderApi = null
         try {
           if (fiber && typeof fiber.dispose === 'function') fiber.dispose()
         } catch (error) {
@@ -7844,6 +8617,8 @@ window.__ModuleLoader__.load({
       teardowns.push(installCopy(ctx, ui))
       teardowns.push(installPermissions(ctx, ui))
       teardowns.push(installModelPicker(ctx, ui))
+      teardowns.push(installHeroMenu(ctx, ui)) // hero 行的目录/预设弹层：打标记给样式表用
+      teardowns.push(installQuickProviders(ctx, ui)) // 设置页的「快捷供应商」多选弹层
       teardowns.push(installAccountFooter(ctx, ui))
       teardowns.push(installBanScreen(ctx, ui)) // 账户横条的封号彩蛋（账户弹层把点击交给 ui.ban）
       teardowns.push(installThemeFlip()) // 主题翻转瞬间抑制过渡，修掉「先色后样」