dsh-claude-style 0.3.2 → 0.5.0

package/lib/client.js

@@ -16,10 +16,15 @@
  *   - src/overrides/copy.js
  *   - src/overrides/permissions.js
  *   - src/overrides/model-brand.js
+ *   - src/overrides/model-copy-lookup.js
+ *   - src/overrides/model-effort.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
+ *   - src/overrides/workspace-view.js
  *   - src/overrides/scheduler.js
  *   - src/settings.js
  *   - src/entry.js
@@ -36,6 +41,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
@@ -55,6 +61,25 @@ window.__ModuleLoader__.load({
 
     var STYLE_ID = 'dsh-claude-style-style'
 
+    /**
+     * Settings identity, for both host generations.
+     *
+     * 0.1.5-rc.2 and earlier let a plugin own a namespace by name
+     * (`claude-style`, registered host-side). 0.1.7 dropped that registry: a
+     * settings namespace IS a profile entry id and its schema IS the entry's
+     * Config, so the id below is what both halves address — read off the
+     * running loader entry where possible, with the id `cordis.patch.yml`
+     * inserts as the fallback.
+     *
+     * PACKAGE_NAME is the other half of the 0.1.7 contract: a bundle's own
+     * configuration is a `plugins.bundle.config` entry keyed by the bundle's
+     * package name, which is what makes it render on this plugin's page.
+     */
+    var SETTINGS_ENTRY_FALLBACK = 'ui-skin-claude-style'
+    var PACKAGE_NAME = 'dsh-claude-style'
+    var BUNDLE_CONFIG_SLOT = 'plugins.bundle.config'
+    var SETTINGS_SECTION_SLOT = 'settings.section'
+
     var COMPOSER_HINT = 'How can I help you today?'
 
     /**
@@ -79,9 +104,14 @@ window.__ModuleLoader__.load({
     var MODEL_EMPTY_LABEL = 'No models available.'
     var MODEL_EFFORT_LABEL = 'Reasoning effort'
     var MODEL_EFFORT_DEFAULT = 'Default'
+    /** The effort slider's two ends. Kept in English in every locale: they name
+     *  the axis, not a level, and the level's own name rides beside the label. */
+    var MODEL_EFFORT_FASTER = 'Faster'
+    var MODEL_EFFORT_SMARTER = 'Smarter'
+    /** What the slider reads when the model offers no levels at all. */
+    var MODEL_EFFORT_NONE = '—'
     var MODEL_MORE_LABEL = 'More models'
     var MODEL_TRIGGER_LABEL = 'Select model, currently {model}'
-    var MODEL_NO_EFFORT_LABEL = 'This model offers no reasoning levels.'
 
     /** English weekday names, indexed by Date#getDay() (0 = Sunday). */
     var WEEKDAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
@@ -220,6 +250,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 +269,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. */
@@ -263,13 +311,6 @@ window.__ModuleLoader__.load({
       "  --dsw-font-serif: 'Anthropic Serif Web Text',Georgia,'Times New Roman','Noto Sans SC','Source Han Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;",
       "  --dsw-font-prose: 'Anthropic Serif Web Text',Georgia,'Times New Roman','Noto Sans SC','Source Han Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;",
       "  --dsw-font-code: 'JetBrains Mono','Noto Sans SC','Source Han Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',ui-monospace,'SF Mono','Fira Code',Consolas,'Liberation Mono',Menlo,Courier,monospace;",
-      "  /* The picker's vendor face: a model row may wear the typeface of the vendor",
-      "     that made the model, exactly as it already wears that vendor's mark. Only",
-      "     Gemini has one today — a Latin-only Google Sans Flex subset (standard",
-      "     weight, upright, SIL OFL 1.1, fonts/OFL-GoogleSansFlex.txt) — and the UI",
-      "     face stays behind it in the stack, so a label carrying a character outside",
-      "     the subset still renders instead of falling to tofu. */",
-      "  --dsw-font-brand-gemini: 'Google Sans Flex Picker', var(--dsw-font-family);",
       "  /* Claude's lockup is drawn in Anthropic's serif, so its rows take the same face:",
       "     the wordmark and the rest of the label then read as one piece of lettering.",
       "     The face is already served for the UI (see typography.css); the serif token",
@@ -502,23 +543,6 @@ window.__ModuleLoader__.load({
       "  font-display: swap;",
       "}",
       "",
-      "/* The one vendor typeface the skin borrows: a Gemini row's name is set in",
-      "   Google Sans Flex, so the row reads as Google's model rather than as one more",
-      "   Claude-labelled entry — the row already carries the vendor's mark, and the",
-      "   label is the only string in the picker that names a model instead of the",
-      "   shell. It ships in the package as a Latin-only subset (standard weight,",
-      "   upright, kerned; ~9 KB from a 4.2 MB six-axis variable font) built by",
-      "   scripts/slim-google-sans.py under SIL OFL 1.1 — fonts/OFL-GoogleSansFlex.txt.",
-      "   Latin-only is the point: characters outside the subset fall through to the",
-      "   stack in --dsw-font-brand-gemini, which is why this is a static 400 cut. */",
-      "@font-face {",
-      "  font-family: 'Google Sans Flex Picker';",
-      "  src: url('/dsh-claude-style/fonts/GoogleSansFlexPicker.woff2') format('woff2');",
-      "  font-weight: 400;",
-      "  font-style: normal;",
-      "  font-display: swap;",
-      "}",
-      "",
       "/* ---------- typography: serif display + sans UI + mono code ---------- */",
       "body[data-dsh-claude-style] {",
       "  font-family: var(--dsw-font-family);",
@@ -926,9 +950,17 @@ window.__ModuleLoader__.load({
       "  z-index: 100 !important;",
       "}",
       "",
+      "/* The header actions are NOT inside the composer seat, so unlike the three",
+      "   overlays above they escape every stacking context and their value is read",
+      "   against the page: the right Sidebar's panel covers through ui-dockkit's dock",
+      "   layer (`--dsh-dockkit-dock-layer`, 10 normal and 40 fullscreen), and a",
+      "   header action above those paints through the fullscreen panel. 9 keeps the",
+      "   actions over the message layer (pinned headers 7, back-to-bottom 8) while",
+      "   staying under both panel layers. The composer overlays keep 100 because the",
+      "   seat's own stacking context caps them. */",
       "body[data-dsh-claude-style] [data-slot=\"conversation.session.header.actions\"] > * {",
       "  position: relative;",
-      "  z-index: 100 !important;",
+      "  z-index: 9 !important;",
       "}",
       "",
       "/* The shipped queue dock cancels the stack gap AND pulls 3px further, so the",
@@ -1123,7 +1155,7 @@ window.__ModuleLoader__.load({
       "",
       "/* Commands and attach: 7px corners instead of the shipped full circle, no",
       "   resting fill, and a warm plate on hover. */",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active] :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]) {",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]) {",
       "  border-radius: 7px;",
       "}",
       "",
@@ -1133,11 +1165,11 @@ window.__ModuleLoader__.load({
       "  border-radius: 7px;",
       "}",
       "",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active]:not([data-ds-dark-theme]) :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]) {",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active]:not([data-ds-dark-theme]) :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]) {",
       "  background: transparent;",
       "}",
       "",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active]:not([data-ds-dark-theme]) :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]):hover:not(:disabled) {",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active]:not([data-ds-dark-theme]) :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]):hover:not(:disabled) {",
       "  background: #f6f6f4;",
       "}",
       "",
@@ -1642,8 +1674,8 @@ window.__ModuleLoader__.load({
       "  align-items: center !important;",
       "  justify-content: center !important;",
       "}",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-composer-card][data-composer-variant=\"inline\"] :is(button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]),",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [class*=\"composerStack\"]:not([data-composer-variant=\"hero\"]) [data-composer-card] :is(button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]) {",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-composer-card][data-composer-variant=\"inline\"] :is(button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]),",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [class*=\"composerStack\"]:not([data-composer-variant=\"hero\"]) [data-composer-card] :is(button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]) {",
       "  order: 3 !important;",
       "  width: 24px !important;",
       "  height: 24px !important;",
@@ -1654,8 +1686,8 @@ window.__ModuleLoader__.load({
       "  align-items: center !important;",
       "  justify-content: center !important;",
       "}",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-composer-card][data-composer-variant=\"inline\"] :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]):hover:not(:disabled),",
-      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [class*=\"composerStack\"]:not([data-composer-variant=\"hero\"]) [data-composer-card] :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"]):hover:not(:disabled) {",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-composer-card][data-composer-variant=\"inline\"] :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]):hover:not(:disabled),",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [class*=\"composerStack\"]:not([data-composer-variant=\"hero\"]) [data-composer-card] :is(button[aria-label=\"指令\"], button[aria-label=\"Commands\"], button[aria-label=\"添加附件\"], button[aria-label=\"Add attachment\"], button[aria-label*=\"添加文件\"], button[aria-label*=\"Add files\"]):hover:not(:disabled) {",
       "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
       "  color: var(--dsw-alias-label-primary) !important;",
       "}",
@@ -1764,14 +1796,15 @@ window.__ModuleLoader__.load({
       "  z-index: 3 !important;",
       "  width: auto !important;",
       "  max-width: none !important;",
-      "  margin: 0 8px !important;",
+      "  /* Auto width, centered: the sentence hugs its own text (so the hover plate",
+      "     covers the text and not the whole row) and the auto margins centre it in",
+      "     the air between the left tool cluster and the trailing model group. */",
+      "  margin: 0 auto !important;",
       "  padding: 0 !important;",
       "  height: auto !important;",
       "  line-height: 20px !important;",
-      "  /* Fill the space between the left tool cluster and the trailing model",
-      "     group, then center the sentence in it: equal air on both sides. */",
       "  justify-content: center !important;",
-      "  flex: 1 1 auto !important;",
+      "  flex: 0 1 auto !important;",
       "  min-width: 0 !important;",
       "}",
       "/* The stats pills are on-demand: hidden unless the chat window (the composer)",
@@ -1877,6 +1910,26 @@ window.__ModuleLoader__.load({
       "  border-radius: 6px !important;",
       "}",
       "",
+      "/* ---------- one type for the composer's bottom line ---------- */",
+      "/* The ring, the model trigger and the stats sentence are three host widgets",
+      "   that each brought their own type: the trigger 13px/500 in the secondary",
+      "   tone, the stats 12px/400 tertiary, the ring the host's secondary content",
+      "   size. They share one line now, so they read as one family — same face, same",
+      "   size, same weight, same tone. The stats' inner buttons inherit through the",
+      "   `font: inherit` rule above; the ring's trigger is targeted explicitly because",
+      "   the host sets its own colour and size on that button. */",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-context-meter],",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-dsh-claude-context-meter] button,",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-composer-card] [class*=\"_row\"] [data-composer-stats],",
+      "body[data-dsh-claude-style][data-dsh-claude-composer-active] [data-composer-card] [class*=\"_row\"] .dsh-claude-model-btn {",
+      "  font-family: var(--dsw-font-family) !important;",
+      "  font-size: 13px !important;",
+      "  font-weight: 500 !important;",
+      "  line-height: 20px !important;",
+      "  letter-spacing: normal !important;",
+      "  color: var(--dsw-alias-label-secondary) !important;",
+      "}",
+      "",
       "/* The host renders two separate stat dialogs; hide them and use one custom",
       "   combined popover instead. */",
       "body[data-dsh-claude-style][data-dsh-claude-composer-active] [role=\"dialog\"]:has([data-session-stats-details]),",
@@ -1888,21 +1941,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 +1994,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;",
@@ -2029,7 +2084,10 @@ window.__ModuleLoader__.load({
       "}",
       "",
       "/* ---------- Claude Code layout: new session button ---------- */",
-      "/* Narrow height matching conversation row, persistent hover plate, left-aligned plus icon */",
+      "/* Narrow height matching conversation row, left-aligned plus icon. No plate at",
+      "   rest — Claude's own sidebar keeps every row flat until the pointer is on it —",
+      "   and the leading glyph is a 20px CHIP: a circular fill with the plus drawn",
+      "   inside, which is how Claude marks its primary \"New\" row. */",
       "body[data-dsh-claude-style] button[class*=\"newSession\"] {",
       "  display: flex !important;",
       "  align-items: center !important;",
@@ -2043,37 +2101,277 @@ window.__ModuleLoader__.load({
       "  margin: 0 0 6px 0 !important;",
       "  border: none !important;",
       "  border-radius: 6px !important;",
-      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
+      "  background: transparent !important;",
       "  color: var(--dsw-alias-label-primary, #141413) !important;",
       "  font-family: var(--dsw-font-family) !important;",
       "  font-size: 13px !important;",
       "  font-weight: 500 !important;",
+      "  /* Explicit, so the label's x does not depend on the host's gap: both sidebar",
+      "     rows place their text at padding + 20px icon box + 6px. */",
+      "  gap: 6px !important;",
       "  cursor: pointer !important;",
       "  box-shadow: none !important;",
       "  transition: background-color 0.12s ease !important;",
       "}",
       "body[data-dsh-claude-style] button[class*=\"newSession\"]:hover {",
-      "  background: rgba(0, 0, 0, 0.12) !important;",
+      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
       "}",
       "body[data-dsh-claude-style][data-ds-dark-theme] button[class*=\"newSession\"] {",
       "  color: #f5f4ef !important;",
       "}",
       "body[data-dsh-claude-style][data-ds-dark-theme] button[class*=\"newSession\"]:hover {",
-      "  background: rgba(255, 255, 255, 0.12) !important;",
+      "  background: rgba(255, 255, 255, 0.08) !important;",
       "}",
       "body[data-dsh-claude-style] button[class*=\"newSession\"] svg {",
       "  display: none !important;",
       "}",
+      "/* The chip: one 20px box that paints BOTH the circular fill and the plus. A mask",
+      "   cannot do that — it clips the element to the glyph, taking the fill with it —",
+      "   so the plus is a background image instead, which costs the currentColor",
+      "   adaptivity and buys a theme pair below. */",
       "body[data-dsh-claude-style] button[class*=\"newSession\"]::before {",
       "  content: \"\";",
       "  display: inline-block !important;",
+      "  width: 20px !important;",
+      "  height: 20px !important;",
+      "  margin-right: 0 !important;",
+      "  flex: none !important;",
+      "  border-radius: 50% !important;",
+      "  /* The page inherits `corner-shape: superellipse(1.5)` from <html>, which turns",
+      "     a 50% radius into a pebble. True circles say so — exactly what the host's",
+      "     own spinner/dot/toggle rules do. */",
+      "  corner-shape: round !important;",
+      "  background-color: rgba(0, 0, 0, 0.10) !important;",
+      "  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141413' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='6' x2='12' y2='18'></line><line x1='6' y1='12' x2='18' y2='12'></line></svg>\") !important;",
+      "  background-repeat: no-repeat !important;",
+      "  background-position: center !important;",
+      "  background-size: 12px 12px !important;",
+      "  -webkit-mask: none !important;",
+      "  mask: none !important;",
+      "}",
+      "body[data-dsh-claude-style][data-ds-dark-theme] button[class*=\"newSession\"]::before {",
+      "  background-color: rgba(255, 255, 255, 0.14) !important;",
+      "  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf9f5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='6' x2='12' y2='18'></line><line x1='6' y1='12' x2='18' y2='12'></line></svg>\") !important;",
+      "}",
+      "",
+      "/* ---------- Claude Code layout: the sidebar's panel row (插件) ---------- */",
+      "/* DSH 0.1.7 added a panel entry right under the new-session button, styled by",
+      "   the host at 36px tall / 14px / 12px corners while the new-session row is",
+      "   28px / 13px / 6px — two rows stacked on top of each other reading as two",
+      "   different lists. One row, one look: the same metrics, the same flat rest and",
+      "   hover plate as the new-session button, and the same 20px icon box so both",
+      "   labels start at the same x. */",
+      "body[data-dsh-claude-style] button[class*=\"panelRow\"] {",
+      "  display: flex !important;",
+      "  align-items: center !important;",
+      "  justify-content: flex-start !important;",
+      "  text-align: left !important;",
+      "  width: 100% !important;",
+      "  box-sizing: border-box !important;",
+      "  height: 28px !important;",
+      "  /* The host floors this row at 36px with a min-height, which `height` alone",
+      "     cannot beat. */",
+      "  min-height: 28px !important;",
+      "  line-height: 28px !important;",
+      "  padding: 0 8px !important;",
+      "  margin: 0 0 6px 0 !important;",
+      "  border: none !important;",
+      "  border-radius: 6px !important;",
+      "  background: transparent !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "  font-family: var(--dsw-font-family) !important;",
+      "  font-size: 13px !important;",
+      "  font-weight: 500 !important;",
+      "  gap: 6px !important;",
+      "  cursor: pointer !important;",
+      "  box-shadow: none !important;",
+      "  transition: background-color 0.12s ease !important;",
+      "}",
+      "body[data-dsh-claude-style] button[class*=\"panelRow\"]:hover {",
+      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
+      "}",
+      "body[data-dsh-claude-style][data-ds-dark-theme] button[class*=\"panelRow\"] {",
+      "  color: #f5f4ef !important;",
+      "}",
+      "body[data-dsh-claude-style][data-ds-dark-theme] button[class*=\"panelRow\"]:hover {",
+      "  background: rgba(255, 255, 255, 0.08) !important;",
+      "}",
+      "/* A 13px glyph in a 20px box: the same box the new-session chip occupies, so the",
+      "   two labels line up. */",
+      "body[data-dsh-claude-style] button[class*=\"panelRow\"] svg {",
       "  width: 13px !important;",
       "  height: 13px !important;",
-      "  margin-right: 6px !important;",
+      "  margin: 0 3.5px !important;",
+      "  flex: none !important;",
+      "}",
+      "",
+      "/* ---------- sidebar rows: the icon turns a quarter on hover ---------- */",
+      "/* Both glyphs are four-fold symmetric, so the turn ends where it started and",
+      "   reads as a spin rather than a change of state. The transition is what turns",
+      "   the icon back when the pointer leaves. */",
+      "body[data-dsh-claude-style] button[class*=\"newSession\"]::before,",
+      "body[data-dsh-claude-style] button[class*=\"panelRow\"] svg {",
+      "  transition: transform 0.25s ease !important;",
+      "  transform-origin: center !important;",
+      "}",
+      "body[data-dsh-claude-style] button[class*=\"newSession\"]:hover::before,",
+      "body[data-dsh-claude-style] button[class*=\"panelRow\"]:hover svg {",
+      "  transform: rotate(90deg) !important;",
+      "}",
+      "",
+      "/* ---------- workspace section: 进行中 / 已归档 ---------- */",
+      "/* The section label gives way to a two-state segment control (the skin's own",
+      "   markup, built by src/overrides/workspace-view.js); the archived state swaps",
+      "   the host's tree for the skin's list, and the list's rows carry a delete",
+      "   button. */",
+      "body[data-dsh-claude-style] [class*=\"sectionLabel\"][data-dsh-claude-ws-label] {",
+      "  display: none !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-ws-segments {",
+      "  display: inline-flex !important;",
+      "  align-items: center !important;",
+      "  gap: 2px !important;",
+      "  padding: 2px !important;",
+      "  border-radius: 7px !important;",
+      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.06)) !important;",
+      "  flex: none !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-ws-segment {",
+      "  appearance: none !important;",
+      "  border: none !important;",
+      "  background: transparent !important;",
+      "  color: var(--dsw-alias-label-tertiary, #8f8d84) !important;",
+      "  font-family: var(--dsw-font-family) !important;",
+      "  font-size: 12px !important;",
+      "  font-weight: 500 !important;",
+      "  line-height: 18px !important;",
+      "  padding: 0 8px !important;",
+      "  height: 20px !important;",
+      "  border-radius: 5px !important;",
+      "  cursor: pointer !important;",
+      "  transition: background-color 0.12s ease, color 0.12s ease !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-ws-segment:hover {",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-ws-segment[aria-checked=\"true\"] {",
+      "  background: var(--dsw-alias-bg-overlay, #ffffff) !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "  box-shadow: 0 1px 2px rgba(20, 20, 19, 0.10) !important;",
+      "}",
+      "body[data-dsh-claude-style][data-ds-dark-theme] .dsh-claude-ws-segment[aria-checked=\"true\"] {",
+      "  background: rgba(255, 255, 255, 0.14) !important;",
+      "  color: #f5f4ef !important;",
+      "  box-shadow: none !important;",
+      "}",
+      "/* ---------- workspace view: the skin's own archived list ---------- */",
+      "/* 已归档 is the skin's list (src/overrides/workspace-view.js), flat on purpose:",
+      "   the host's own filter buries archived rows inside collapsed workspace groups",
+      "   and its state is not reachable without clicking its menu. */",
+      "body[data-dsh-claude-style] [data-dsh-claude-ws-view=\"archived\"] [data-dsh-claude-ws-tree] {",
+      "  display: none !important;",
+      "}",
+      "body[data-dsh-claude-style] [data-dsh-claude-ws-view=\"active\"] .dsh-claude-archive-list {",
+      "  display: none !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-list {",
+      "  display: flex !important;",
+      "  flex-direction: column !important;",
+      "  gap: 1px !important;",
+      "  /* No inset of its own: the region already indents its content by 12px, which is",
+      "     where the host's tree rows start (measured: row x=12, title x=36). The 5px on",
+      "     the right is the tree's own inset — matching it keeps the two rows the same",
+      "     width (251px) instead of letting this one run 5px wider. */",
+      "  padding: 0 5px 0 0 !important;",
+      "  min-width: 0 !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-row {",
+      "  display: flex !important;",
+      "  align-items: center !important;",
+      "  gap: 4px !important;",
+      "  height: 28px !important;",
+      "  /* The host's own session row: 6px inside the list's 12px, so the row's box and",
+      "     the title's x land where the tree's rows put them (measured 12 / 36). */",
+      "  padding: 0 6px !important;",
+      "  border-radius: 6px !important;",
+      "  cursor: pointer !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "  font-family: var(--dsw-font-family) !important;",
+      "  font-size: 13px !important;",
+      "  font-weight: 400 !important;",
+      "  transition: background-color 0.12s ease !important;",
+      "}",
+      "/* The leading slot the host's rows carry (a 5px circle centred in 14px), so the",
+      "   two lists start their titles at the same x. */",
+      "body[data-dsh-claude-style] .dsh-claude-archive-row::before {",
+      "  content: \"\" !important;",
+      "  flex: none !important;",
+      "  width: 5px !important;",
+      "  height: 5px !important;",
+      "  margin: 0 4.5px !important;",
+      "  border-radius: 50% !important;",
+      "  corner-shape: round !important;",
+      "  border: 1.2px solid var(--dsw-alias-label-caption, #a6a094) !important;",
+      "  box-sizing: border-box !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-row:hover {",
+      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.06)) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-title {",
+      "  flex: 1 1 auto !important;",
+      "  min-width: 0 !important;",
+      "  overflow: hidden !important;",
+      "  white-space: nowrap !important;",
+      "  text-overflow: ellipsis !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-time {",
       "  flex: none !important;",
-      "  background-color: currentColor !important;",
-      "  -webkit-mask: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>\") center / contain no-repeat !important;",
-      "  mask: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>\") center / contain no-repeat !important;",
+      "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
+      "  font-size: 11px !important;",
+      "}",
+      "/* The two row actions stay out of the way until the row is hovered: the list is",
+      "   for reading, and a column of buttons reads as a toolbar. Each button lives in",
+      "   the span its React root renders into. */",
+      "body[data-dsh-claude-style] .dsh-claude-archive-action {",
+      "  display: inline-flex !important;",
+      "  flex: none !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-delete,",
+      "body[data-dsh-claude-style] .dsh-claude-archive-restore {",
+      "  flex: none !important;",
+      "  display: inline-flex !important;",
+      "  align-items: center !important;",
+      "  justify-content: center !important;",
+      "  width: 22px !important;",
+      "  height: 22px !important;",
+      "  padding: 0 !important;",
+      "  border: none !important;",
+      "  border-radius: 5px !important;",
+      "  background: transparent !important;",
+      "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
+      "  cursor: pointer !important;",
+      "  opacity: 0 !important;",
+      "  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-row:hover .dsh-claude-archive-delete,",
+      "body[data-dsh-claude-style] .dsh-claude-archive-row:hover .dsh-claude-archive-restore,",
+      "body[data-dsh-claude-style] .dsh-claude-archive-delete:focus-visible,",
+      "body[data-dsh-claude-style] .dsh-claude-archive-restore:focus-visible {",
+      "  opacity: 1 !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-restore:hover {",
+      "  background: var(--dsh-claude-hover-bg, rgba(0, 0, 0, 0.08)) !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-delete:hover {",
+      "  background: rgba(192, 57, 43, 0.12) !important;",
+      "  color: var(--dsw-alias-state-error-primary, #c0392b) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-archive-status {",
+      "  padding: 8px !important;",
+      "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
+      "  font-family: var(--dsw-font-family) !important;",
+      "  font-size: 12px !important;",
       "}",
       "",
       "/* ---------- Claude Code layout: workspace & session sidebar ---------- */",
@@ -2238,6 +2536,7 @@ window.__ModuleLoader__.load({
       "  width: 5px;",
       "  height: 5px;",
       "  border-radius: 50%;",
+      "  corner-shape: round;",
       "  border: 1.2px solid var(--dsw-alias-label-caption, #a6a094);",
       "  box-sizing: border-box;",
       "}",
@@ -2248,6 +2547,7 @@ window.__ModuleLoader__.load({
       "  height: 10px !important;",
       "  box-sizing: border-box !important;",
       "  border-radius: 50% !important;",
+      "  corner-shape: round !important;",
       "  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;",
       "  border-top-color: #faf9f5 !important;",
       "  animation: 0.85s linear infinite dsh-claude-win11-spin !important;",
@@ -2403,7 +2703,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 +2827,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 +2863,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;",
       "}",
@@ -2903,6 +3204,7 @@ window.__ModuleLoader__.load({
       "  height: 24px;",
       "  margin-top: 1px;",
       "  border-radius: 50%;",
+      "  corner-shape: round;",
       "  background: var(--dsh-ban-hover);",
       "  color: var(--dsh-ban-text);",
       "  font-size: 12px;",
@@ -3050,7 +3352,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 +3390,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 +3426,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;",
       "}",
       "",
@@ -3171,16 +3497,6 @@ window.__ModuleLoader__.load({
       "  font-weight: 500 !important;",
       "  line-height: 16px !important;",
       "}",
-      "/* A Gemini row wears Gemini's own face for its name. The row already carries the",
-      "   vendor's mark, and the name is the one string in the picker that names a model",
-      "   rather than the shell — so the vendor's typeface is the same signal in a second",
-      "   material. `data-brand` is the mark id the picker stamps on the row",
-      "   (src/overrides/model-picker.js); only Gemini resolves to a face today, and a",
-      "   brand without one simply keeps the UI face. The stack is additive: a name with",
-      "   a character outside the Latin subset falls through character by character. */",
-      "body[data-dsh-claude-style] .dsh-claude-model-option[data-brand='gemini'] .dsh-claude-model-name {",
-      "  font-family: var(--dsw-font-brand-gemini) !important;",
-      "}",
       "/* Claude's wordmark is set in Anthropic's serif, so the rest of the label follows",
       "   it — the row reads as one piece of lettering rather than serif art beside sans. */",
       "body[data-dsh-claude-style] .dsh-claude-model-option[data-brand='claude'] .dsh-claude-model-name {",
@@ -3243,13 +3559,43 @@ 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;",
       "}",
-      "/* Level-2 row: label + current value + chevron; hover opens its own level. */",
+      "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 + chevron; hover opens its own level. */",
       "body[data-dsh-claude-style] .dsh-claude-model-cell {",
       "  display: flex !important;",
       "  align-items: center !important;",
@@ -3273,11 +3619,6 @@ window.__ModuleLoader__.load({
       "  flex: 1 !important;",
       "  min-width: 0 !important;",
       "}",
-      "body[data-dsh-claude-style] .dsh-claude-model-cell-value {",
-      "  flex: none !important;",
-      "  color: var(--dsw-alias-label-tertiary, #8f8d84) !important;",
-      "  font-size: 12px !important;",
-      "}",
       "body[data-dsh-claude-style] .dsh-claude-model-cell-chevron {",
       "  flex: none !important;",
       "  display: inline-flex !important;",
@@ -3285,42 +3626,151 @@ window.__ModuleLoader__.load({
       "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
       "}",
       "",
-      "/* Popover Header. Vertical padding only: the clickable account row carries its",
-      "   own inline padding (components/account-footer.css), and the divider below is a",
-      "   full-bleed rule that must not be inset by this box. */",
-      "body[data-dsh-claude-style] .dsh-claude-account-popover-header {",
-      "  padding: 6px 0 !important;",
+      "/* ---------- Reasoning-effort slider (first level's footer) ---------- */",
+      "/* The effort ladder drawn as a track instead of a second level. The knob",
+      "   travels continuously with the pointer and settles on the nearest level when",
+      "   the gesture ends — release, or the pointer leaving the control — so the",
+      "   control never reads as a hard switch between fixed stops. The transition is",
+      "   what makes that settle read as a settle; it is switched off while the pointer",
+      "   owns the knob, which is what `data-dragging` marks. */",
+      "body[data-dsh-claude-style] .dsh-claude-effort {",
       "  display: flex !important;",
       "  flex-direction: column !important;",
-      "  gap: 2px !important;",
+      "  gap: 3px !important;",
+      "  padding: 3px 7px 4px 7px !important;",
+      "  min-width: 0 !important;",
+      "  user-select: none !important;",
+      "  -webkit-user-select: none !important;",
       "}",
-      "body[data-dsh-claude-style] .dsh-claude-account-popover-name {",
-      "  font-size: 14px !important;",
-      "  font-weight: 600 !important;",
-      "  color: var(--dsw-alias-label-primary, #141413) !important;",
-      "  line-height: 18px !important;",
-      "  font-family: var(--dsw-font-family) !important;",
+      "body[data-dsh-claude-style] .dsh-claude-effort-head {",
+      "  display: flex !important;",
+      "  align-items: baseline !important;",
+      "  gap: 6px !important;",
+      "  min-width: 0 !important;",
       "}",
-      "body[data-dsh-claude-style] .dsh-claude-account-popover-divider {",
-      "  height: 1px !important;",
-      "  background: var(--dsw-alias-border-l1, #e8e6dc) !important;",
-      "  margin: 2px 0 !important;",
+      "body[data-dsh-claude-style] .dsh-claude-effort-label {",
       "  flex: none !important;",
+      "  font-size: 13px !important;",
+      "  line-height: 16px !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
       "}",
-      "",
-      "/* Popover Body & Items */",
-      "body[data-dsh-claude-style] .dsh-claude-account-popover-body {",
+      "/* The level's name trails the label instead of sitting at the far edge: the",
+      "   control reads as one phrase, `Reasoning effort Default`, the way the ends",
+      "   below read as one scale. */",
+      "body[data-dsh-claude-style] .dsh-claude-effort-value {",
+      "  flex: 0 1 auto !important;",
+      "  min-width: 0 !important;",
+      "  overflow: hidden !important;",
+      "  text-overflow: ellipsis !important;",
+      "  white-space: nowrap !important;",
+      "  font-size: 13px !important;",
+      "  line-height: 16px !important;",
+      "  color: var(--dsw-alias-label-secondary, #787672) !important;",
+      "}",
+      "/* The ends name the axis, so they stay in English in every locale and in the",
+      "   caption colour: they are a scale, not a value. */",
+      "body[data-dsh-claude-style] .dsh-claude-effort-ends {",
       "  display: flex !important;",
-      "  flex-direction: column !important;",
-      "  gap: 2px !important;",
-      "  max-height: 360px !important;",
-      "  overflow-y: auto !important;",
+      "  align-items: center !important;",
+      "  justify-content: space-between !important;",
+      "  gap: 8px !important;",
+      "  font-size: 11px !important;",
+      "  line-height: 14px !important;",
+      "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
       "}",
-      "body[data-dsh-claude-style] .dsh-claude-popover-item {",
-      "  width: 100% !important;",
-      "  height: 32px !important;",
+      "body[data-dsh-claude-style] .dsh-claude-effort-track {",
+      "  position: relative !important;",
+      "  height: 18px !important;",
+      "  margin-top: 1px !important;",
+      "  cursor: pointer !important;",
+      "  touch-action: none !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-effort-track::before {",
+      "  content: \"\" !important;",
+      "  position: absolute !important;",
+      "  left: 0 !important;",
+      "  right: 0 !important;",
+      "  top: 50% !important;",
+      "  /* Nearly as tall as the 16px knob (Claude's real Effort slider reads as one",
+      "     chunky pill, not a bead on a wire): 6px read as a thin rail the knob sat",
+      "     ON, 14px reads as a groove the knob rides IN. */",
+      "  height: 14px !important;",
+      "  margin-top: -7px !important;",
+      "  border-radius: 999px !important;",
+      "  /* A pill: its caps are meant to be round, and the page inherits superellipse",
+      "     corners from <html>. */",
+      "  corner-shape: round !important;",
+      "  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.08)) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-effort-knob {",
+      "  position: absolute !important;",
+      "  left: 0 !important;",
+      "  top: 50% !important;",
+      "  width: 16px !important;",
+      "  height: 16px !important;",
+      "  margin-top: -8px !important;",
+      "  border-radius: 50% !important;",
+      "  corner-shape: round !important;",
+      "  background: var(--dsw-alias-bg-overlay, #ffffff) !important;",
+      "  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.28), 0 0 0 1px rgba(20, 20, 19, 0.06) !important;",
+      "  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) !important;",
+      "  will-change: transform !important;",
+      "}",
+      "body[data-dsh-claude-style][data-ds-dark-theme] .dsh-claude-effort-knob {",
+      "  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-effort[data-dragging] .dsh-claude-effort-knob {",
+      "  transition: none !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-effort-track:focus-visible {",
+      "  outline: 2px solid var(--dsw-alias-brand-primary, #d97757) !important;",
+      "  outline-offset: 1px !important;",
+      "  border-radius: 6px !important;",
+      "}",
+      "/* No ladder to climb: the track is dimmed and the value reads as a dash, but the",
+      "   knob still travels and eases home — the control keeps its shape. */",
+      "body[data-dsh-claude-style] .dsh-claude-effort[data-empty] .dsh-claude-effort-track::before {",
+      "  opacity: 0.55 !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-effort[data-empty] .dsh-claude-effort-value {",
+      "  color: var(--dsw-alias-label-caption, #a6a094) !important;",
+      "}",
+      "",
+      "/* Popover Header. Vertical padding only: the clickable account row carries its",
+      "   own inline padding (components/account-footer.css), and the divider below is a",
+      "   full-bleed rule that must not be inset by this box. */",
+      "body[data-dsh-claude-style] .dsh-claude-account-popover-header {",
+      "  padding: 6px 0 !important;",
+      "  display: flex !important;",
+      "  flex-direction: column !important;",
+      "  gap: 2px !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-account-popover-name {",
+      "  font-size: 14px !important;",
+      "  font-weight: 600 !important;",
+      "  color: var(--dsw-alias-label-primary, #141413) !important;",
+      "  line-height: 18px !important;",
+      "  font-family: var(--dsw-font-family) !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-account-popover-divider {",
+      "  height: 1px !important;",
+      "  background: var(--dsw-alias-border-l1, #e8e6dc) !important;",
+      "  margin: 2px 0 !important;",
+      "  flex: none !important;",
+      "}",
+      "",
+      "/* Popover Body & Items */",
+      "body[data-dsh-claude-style] .dsh-claude-account-popover-body {",
+      "  display: flex !important;",
+      "  flex-direction: column !important;",
+      "  gap: 2px !important;",
+      "  max-height: 360px !important;",
+      "  overflow-y: auto !important;",
+      "}",
+      "body[data-dsh-claude-style] .dsh-claude-popover-item {",
+      "  width: 100% !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 +3828,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",
@@ -3680,6 +4274,8 @@ window.__ModuleLoader__.load({
       "  width: 16px;",
       "  height: 16px;",
       "  border-radius: 50%;",
+      "  /* A true circle: the page inherits superellipse corners from <html>. */",
+      "  corner-shape: round;",
       "  background: var(--dsw-alias-bg-overlay, #ffffff);",
       "  box-shadow: 0 1px 2px rgba(20, 20, 19, 0.18);",
       "  transition: transform .12s ease;",
@@ -3715,6 +4311,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)",
       "   ============================================================================ */",
@@ -3907,11 +4529,20 @@ window.__ModuleLoader__.load({
     /**
      * Skin preferences.
      *
-     * The authoritative store is the host settings namespace `claude-style`,
-     * reached through this plugin's own route: the configuration client
-     * (`settingsScope`) only reaches namespaces the api-proxy exposes to it, and
-     * a plugin's own namespace is not on that list. `src/../lib/index.js` owns
-     * the namespace and the route; this side only reads and writes it.
+     * The authoritative store is the host settings namespace, reached one of two
+     * ways depending on the host generation:
+     *
+     *   * 0.1.7+ serves every registered namespace to the browser through
+     *     `ctx.configForms`, whose per-entry controller carries the values, the
+     *     write queue and the revision fence. That is the transport used
+     *     whenever the service is present.
+     *   * 0.1.5-rc.2 and earlier expose only the namespaces the api-proxy lists,
+     *     and a plugin's own is not among them, so this side falls back to the
+     *     route its host half registers (`lib/index.js`).
+     *
+     * Both transports carry the same eight fields, so everything below stays
+     * transport-agnostic: `loadPrefs`/`savePrefs` pick one, and the rest of the
+     * skin keeps reading the mirrored `prefs` object.
      *
      * Every value is mirrored onto the document as an attribute, so the
      * stylesheet — not this module — decides what a preference means visually.
@@ -3968,8 +4599,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,
     }
@@ -3977,6 +4610,84 @@ window.__ModuleLoader__.load({
     var prefsAvailable = false
     var prefsListeners = []
 
+    /**
+     * The official settings form, when this host has one.
+     *
+     * 0.1.7 replaced the imperative namespace registry with Config-derived
+     * forms: `ctx.configForms.get(entryId)` hands back a controller carrying the
+     * values, a write queue and a revision fence, and the namespace is this
+     * plugin's profile entry id. The older host has no such service, so this
+     * stays null there and the route below is the transport instead.
+     */
+    var prefsForm = null
+
+    /** This plugin's settings namespace: the loader entry id, or the patch's id. */
+    function settingsEntryId(ctx) {
+      try {
+        var entry = ctx && ctx.fiber ? ctx.fiber.entry : null
+        var id = entry ? entry.id : null
+        if (typeof id === 'string' && id !== '') return id
+      } catch (error) { /* no loader entry: fall back to the id the patch declares */ }
+      return SETTINGS_ENTRY_FALLBACK
+    }
+
+    /** Whether this host serves namespaces to the browser (0.1.7+). */
+    function hostConfigForms(ctx) {
+      try {
+        if (!ctx || typeof ctx.get !== 'function') return null
+        var forms = ctx.get('configForms')
+        return forms !== null && forms !== undefined && typeof forms.get === 'function' ? forms : null
+      } catch (error) {
+        return null
+      }
+    }
+
+    /** The form's current field values, or null while it is not ready. */
+    function readFormValue() {
+      if (prefsForm === null) return null
+      try {
+        var snapshot = prefsForm.getSnapshot()
+        if (snapshot === null || snapshot === undefined) return null
+        if (snapshot.status !== 'ready') return null
+        return snapshot.value && typeof snapshot.value === 'object' ? snapshot.value : null
+      } catch (error) {
+        return null
+      }
+    }
+
+    /**
+     * Bind the official form when the host offers one.
+     *
+     * Called once per install, before the first read. A host that serves the
+     * service later (or never) simply keeps the route transport, so this never
+     * blocks or fails the skin.
+     */
+    function adoptSettingsForm(ctx) {
+      if (prefsForm !== null) return true
+      var forms = hostConfigForms(ctx)
+      if (forms === null) return false
+      var form = null
+      try {
+        form = forms.get(settingsEntryId(ctx))
+      } catch (error) {
+        form = null
+      }
+      if (form === null || form === undefined || typeof form.getSnapshot !== 'function') return false
+      prefsForm = form
+      if (typeof form.subscribe === 'function') {
+        try {
+          form.subscribe(function () {
+            var value = readFormValue()
+            if (value === null) return
+            prefsAvailable = true
+            adoptPrefs(normalizePrefs(value))
+            replayPendingBanLocale(value)
+          })
+        } catch (error) { /* no subscribe face: reads stay on demand */ }
+      }
+      return true
+    }
+
     /**
      * Browser-local fallback for the custom username.
      *
@@ -4040,8 +4751,23 @@ window.__ModuleLoader__.load({
     /**
      * Read the preferences once. A failure keeps the defaults and leaves the
      * settings page to report that the store is unavailable.
+     *
+     * The official form is read first when it exists: its subscription already
+     * re-reads on every host change, so this call only has to cover the case
+     * where the values are ready before the subscription settles.
      */
     function loadPrefs() {
+      if (prefsForm !== null) {
+        var formValue = readFormValue()
+        if (formValue !== null) {
+          prefsAvailable = true
+          var formName = typeof formValue.username === 'string' ? formValue.username.trim() : ''
+          if (formName) setFallbackUsername('')
+          adoptPrefs(normalizePrefs(formValue))
+          replayPendingBanLocale(formValue)
+        }
+        return
+      }
       if (typeof fetch !== 'function') return
       try {
         fetch(PREFS_ROUTE, {
@@ -4066,14 +4792,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),
       }
@@ -4098,6 +4856,65 @@ window.__ModuleLoader__.load({
       savePrefs({ banLocale: fallbackBanLocale })
     }
 
+    /**
+     * Write a partial change through the official form.
+     *
+     * One `set()` per field, chained: the controller owns the write queue and
+     * takes its revision fence from the last settlement, so a burst of toggles
+     * cannot interleave or lose a field. `set()` also validates the field path
+     * against the entry's Config before anything crosses the wire, which is why
+     * an unknown key is dropped here rather than sent.
+     *
+     * @param patch - preference keys to change.
+     * @returns a promise for the resolved preferences, or null when refused.
+     */
+    function savePrefsViaForm(patch) {
+      var keys = []
+      for (var key in patch) {
+        if (Object.prototype.hasOwnProperty.call(patch, key)) keys.push(key)
+      }
+      var step = function (name) {
+        return function (accepted) {
+          if (accepted === false) return false
+          try {
+            var pending = prefsForm.set(name, patch[name])
+            return pending && typeof pending.then === 'function'
+              ? pending.then(function (ok) { return ok === true })
+              : true
+          } catch (error) {
+            return false
+          }
+        }
+      }
+      var run = Promise.resolve(true)
+      for (var i = 0; i < keys.length; i++) run = run.then(step(keys[i]))
+      return run.then(function (accepted) {
+        if (accepted === false) {
+          // Refused (a stale revision, or a field this Config does not carry):
+          // re-read rather than guess, the way the route path does.
+          loadPrefs()
+          return null
+        }
+        var value = readFormValue()
+        if (value !== null) {
+          prefsAvailable = true
+          if (typeof patch.username === 'string') {
+            var hostName = typeof value.username === 'string' ? value.username.trim() : ''
+            setFallbackUsername(hostName ? '' : patch.username)
+          }
+          // The host echoing the value back is the only proof it knows the
+          // field; anything else means the write did not land and the local
+          // fallback has to keep it.
+          if (typeof patch.banLocale === 'string') {
+            var hostLocale = typeof value.banLocale === 'string' ? value.banLocale : ''
+            setFallbackBanLocale(hostLocale === patch.banLocale ? '' : patch.banLocale)
+          }
+          adoptPrefs(normalizePrefs(value))
+        }
+        return prefs
+      })
+    }
+
     /**
      * Write a partial preference change.
      *
@@ -4109,6 +4926,7 @@ window.__ModuleLoader__.load({
      * @returns a promise for the resolved preferences, or null when unavailable.
      */
     function savePrefs(patch) {
+      if (prefsForm !== null) return savePrefsViaForm(patch)
       if (typeof fetch !== 'function') return Promise.resolve(null)
       var body = { revision: prefsRevision }
       for (var key in patch) body[key] = patch[key]
@@ -4151,19 +4969,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 +5131,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
+      })
     }
 
     /**
@@ -4386,36 +5195,75 @@ window.__ModuleLoader__.load({
         y = rect.top - (opts.gap || 0) - height
         if (y < margin) y = Math.min(rect.bottom + (opts.gap || 0), Math.max(margin, window.innerHeight - height - margin))
       }
+      // Same-value guard: this runs on every scheduler pass while a popover is
+      // open, and an identical write still dirties layout — the next geometry
+      // read (the drag paths read rect/offset every frame) would then force a
+      // synchronous recalc. Skip the write when the anchor did not move.
+      var leftValue = Math.round(x) + 'px'
+      var topValue = Math.round(y) + 'px'
       if (opts.important) {
-        pop.style.setProperty('left', Math.round(x) + 'px', 'important')
-        pop.style.setProperty('top', Math.round(y) + 'px', 'important')
+        if (pop.style.left !== leftValue) pop.style.setProperty('left', leftValue, 'important')
+        if (pop.style.top !== topValue) pop.style.setProperty('top', topValue, 'important')
       } else {
-        pop.style.left = x + 'px'
-        pop.style.top = y + 'px'
+        if (pop.style.left !== leftValue) pop.style.left = leftValue
+        if (pop.style.top !== topValue) pop.style.top = topValue
       }
       return { x: x, y: y }
     }
 
     /**
-     * Hover-intent helper shared by the model picker and account popover.
+     * Hover dwell before a popover unfolds, and grace before it closes.
+     *
+     * The dwell is deliberately tiny: it exists to swallow a pointer that merely
+     * CROSSES a trigger on its way somewhere else, not to make the user wait for
+     * the card. The grace is what lets the pointer travel the gap between a
+     * trigger and its card without the card vanishing underneath it.
+     */
+    var POPOVER_OPEN_DELAY = 50
+    var POPOVER_CLOSE_DELAY = 100
+
+    /**
+     * Hover-intent helper shared by the model picker, permission popover and
+     * account popover.
      *
-     * The `open` callback is part of the shared signature but the original
-     * hover behaviour only schedules the close side (mouseenter calls the
-     * feature's open function directly); keeping the parameter makes the two
-     * call sites symmetrical.
+     * BOTH sides are scheduled: `scheduleOpen` waits out the dwell (so a pointer
+     * crossing the trigger never unfolds anything) and `scheduleClose` waits out
+     * the grace. `cancel` clears whichever side is pending — entering the card
+     * cancels a close, and leaving the trigger before the dwell cancels the open
+     * (`scheduleClose` drops a pending open as well, so a leave needs only the
+     * one call).
      */
-    function createHoverIntent(open, close, delay) {
-      var timer = null
+    function createHoverIntent(open, close, openDelay, closeDelay) {
+      var openTimer = null
+      var closeTimer = null
       return {
         cancel: function () {
-          if (timer) {
-            clearTimeout(timer)
-            timer = null
+          if (openTimer) {
+            clearTimeout(openTimer)
+            openTimer = null
+          }
+          if (closeTimer) {
+            clearTimeout(closeTimer)
+            closeTimer = null
           }
         },
+        scheduleOpen: function () {
+          if (openTimer) clearTimeout(openTimer)
+          openTimer = setTimeout(function () {
+            openTimer = null
+            open()
+          }, openDelay)
+        },
         scheduleClose: function () {
-          if (timer) clearTimeout(timer)
-          timer = setTimeout(close, delay)
+          if (openTimer) {
+            clearTimeout(openTimer)
+            openTimer = null
+          }
+          if (closeTimer) clearTimeout(closeTimer)
+          closeTimer = setTimeout(function () {
+            closeTimer = null
+            close()
+          }, closeDelay)
         },
       }
     }
@@ -4643,6 +5491,10 @@ window.__ModuleLoader__.load({
 
       var permDocPointerListener = null
       var permResizeListener = null
+      /** The context meter this skin last moved out of the host's dock line. */
+      var dockedMeter = null
+      /** Identity of the stats bindings THIS generation installed (see bindStatsHover). */
+      var statsBindingToken = {}
 
       /** Every dismiss route (item pick, outside pointer, resize/scroll, Escape) closes the menu through this one path. */
       function closePermMenu() {
@@ -4727,13 +5579,13 @@ window.__ModuleLoader__.load({
           popover.setAttribute('data-open', 'true')
         }
 
-        permHoverIntent = createHoverIntent(openPerm, closePermMenu, 150)
+        permHoverIntent = createHoverIntent(openPerm, closePermMenu, POPOVER_OPEN_DELAY, POPOVER_CLOSE_DELAY)
 
         btn.addEventListener('mouseenter', function () {
-          if (readPrefs().autoPopover) openPerm()
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) permHoverIntent.scheduleOpen()
         })
         btn.addEventListener('mouseleave', function () {
-          if (readPrefs().autoPopover) permHoverIntent.scheduleClose()
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) permHoverIntent.scheduleClose()
         })
         popover.addEventListener('mouseenter', function () {
           permHoverIntent.cancel()
@@ -4938,6 +5790,75 @@ window.__ModuleLoader__.load({
         else row.appendChild(stats)
       }
 
+      /** The composer's dock line: the stack child that is not the card. The host
+       * parks the stats pills there, and since 0.1.7 the context meter too. */
+      function composerDock(card) {
+        var stack = card.parentElement
+        if (stack === null) return null
+        for (var i = 0; i < stack.children.length; i++) {
+          if (stack.children[i] !== card) return stack.children[i]
+        }
+        return null
+      }
+
+      /** The meter the host parks in that dock, or null when it is not there. */
+      function dockedContextMeter(dock) {
+        if (dock === null) return null
+        var triggers = dock.querySelectorAll('button[aria-haspopup="dialog"]')
+        for (var i = 0; i < triggers.length; i++) {
+          // The meter's trigger IS the occupancy reading ("42%") and no stats
+          // pill ever is, so the label alone identifies it without a class name
+          // (the host hashes those per build).
+          if (!/^\d{1,3}%$/.test((triggers[i].textContent || '').trim())) continue
+          var node = triggers[i]
+          while (node.parentElement !== null && node.parentElement !== dock) node = node.parentElement
+          return node
+        }
+        return null
+      }
+
+      /**
+       * Merge the context-occupancy meter into the toolbar row beside the stats.
+       * DSH 0.1.7 moved the meter out of the input bar's trailing cluster into
+       * the dock line below the card, so a skin that merges only the stats
+       * leaves it alone on a line of its own — a stray marker on a second row.
+       * Older hosts keep it inside the card, where this finds nothing to move.
+       * A host re-render can put it back, so the move is re-applied every pass.
+       */
+      function mergeContextMeterIntoRow() {
+        var card = document.querySelector('[data-composer-card]')
+        if (card === null) return
+        var dock = composerDock(card)
+        var row = card.querySelector('[class*="_row"]')
+        if (row === null) return
+        if (!ui.copy.isComposerActive()) {
+          if (dockedMeter !== null && dock !== null && row.contains(dockedMeter)) dock.appendChild(dockedMeter)
+          return
+        }
+        var meter = dockedContextMeter(dock)
+        if (meter === null) return
+        dockedMeter = meter
+        // The stamp is what the stylesheet hangs the shared composer-line type
+        // on: the host's own class names are hashed per build, and the ring's
+        // trigger has no other stable hook.
+        meter.setAttribute('data-dsh-claude-context-meter', '')
+        var trailing = row.querySelector('[class*="trailing"]')
+        if (trailing === null) { row.appendChild(meter); return }
+        // Right of the model trigger, which lives inside the trailing cluster:
+        // park the ring after whichever trailing child owns that trigger (our
+        // own button when the skin draws the seat, the host's cluster when the
+        // picker preference hands it back).
+        var anchor = trailing.querySelector('[class*="standardControls"]')
+        var modelBtn = trailing.querySelector('.dsh-claude-model-btn')
+        if (modelBtn !== null) {
+          var node = modelBtn
+          while (node.parentElement !== null && node.parentElement !== trailing) node = node.parentElement
+          if (node.parentElement === trailing) anchor = node
+        }
+        if (anchor !== null) trailing.insertBefore(meter, anchor.nextSibling)
+        else trailing.appendChild(meter)
+      }
+
       // Re-insert when a re-render swapped the host row, then mirror the running preset.
       function syncSegments() {
         var isHero = ui.copy.isHeroView()
@@ -5188,12 +6109,30 @@ window.__ModuleLoader__.load({
         if (statsPopover !== null) statsPopover.setAttribute('data-open', 'false')
       }
 
+      /**
+       * Drop stats cards left behind by a previous client generation.
+       *
+       * Client HMR drops the old fiber's disposals, so the teardown never runs:
+       * the previous generation's card stays in <body> holding its last content
+       * and `data-open="true"` — a second, frozen popover sitting beside the
+       * live one (which is why the two read differently: the stale card shows
+       * whatever sections it was last rendered with). The model picker and the
+       * account footer sweep their own strays the same way; the stats card was
+       * the one that did not.
+       */
+      function sweepStrayStatsPopovers() {
+        var strays = document.querySelectorAll('body > .dsh-claude-stats-popover')
+        for (var i = 0; i < strays.length; i++) {
+          if (strays[i] !== statsPopover) strays[i].parentElement.removeChild(strays[i])
+        }
+      }
+
       function scheduleHideStatsPopover() {
         if (statsHideTimer) clearTimeout(statsHideTimer)
         statsHideTimer = setTimeout(function () {
           statsHideTimer = null
           hideStatsPopover()
-        }, 160)
+        }, POPOVER_CLOSE_DELAY)
       }
 
       function renderStatsPopover(sections) {
@@ -5238,18 +6177,55 @@ 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.
+        // Generation-scoped, not a plain boolean: the host owns the stats node
+        // and reuses it across a client HMR reload, so a boolean left by the
+        // previous generation made this one skip binding entirely — the OLD
+        // closure kept serving the card (its content, its stale node) while this
+        // generation's listeners never existed.
+        if (root.__dshStatsHoverToken === statsBindingToken) return
+        root.__dshStatsHoverToken = statsBindingToken
+        var openTimer = null
+        function cancelOpen() {
+          if (openTimer) {
+            clearTimeout(openTimer)
+            openTimer = null
+          }
+        }
+        // Hover still opens the card under "All" — the setting promises exactly
+        // that — but only after a deliberate dwell: the stats sentence sits in
+        // the MIDDLE of the composer row, so a pointer on its way from the
+        // permission selector to the model trigger used to unfold the card on
+        // the way past. A passing pointer never stays the dwell out; a pointer
+        // the user actually parked there does.
         root.addEventListener('mouseenter', function () {
-          if (readPrefs().autoPopover) showStatsPopover(root)
+          cancelOpen()
+          if (readPrefs().autoPopover !== AUTO_POPOVER_ALL) return
+          openTimer = setTimeout(function () {
+            openTimer = null
+            showStatsPopover(root)
+          }, 300)
         })
         root.addEventListener('mouseleave', function () {
-          if (readPrefs().autoPopover) scheduleHideStatsPopover()
+          cancelOpen()
+          // Unconditional, unlike the open side: a card opened by CLICK has to
+          // close when the pointer leaves, whatever the hover switch says.
+          scheduleHideStatsPopover()
+        })
+        // The host's own stats dialogs are hidden by the stylesheet, so a click
+        // has to land somewhere: it opens this card — the only stats surface
+        // left when the hover switch is off or scoped to the account rail.
+        //
+        // Only a REAL click counts. Collecting the card's content means clicking
+        // the host's two pills to open their dialogs, and those synthetic clicks
+        // bubble back up to this listener: re-entering the collection from
+        // inside itself made two reads race, which is why sections went missing
+        // (the card kept flipping between "会话统计 + Token 用量" and "Token 用量"
+        // alone) and why the card stopped closing — every re-entry cancelled the
+        // pending hide.
+        root.addEventListener('click', function (event) {
+          if (event && event.isTrusted === false) return
+          cancelOpen()
+          showStatsPopover(root)
         })
       }
 
@@ -5292,11 +6268,14 @@ window.__ModuleLoader__.load({
         sync: function () {
           syncAttachmentState()
           mergeStatsIntoRow()
+          mergeContextMeterIntoRow()
+          sweepStrayStatsPopovers()
           syncStatsSummary()
           syncSegments()
           syncChatTabComposer()
         },
-        closeMenu: closePermMenu
+        closeMenu: closePermMenu,
+        closeStats: hideStatsPopover
       }
 
       return function () {
@@ -5326,15 +6305,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 +6323,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++) {
@@ -5419,6 +6388,418 @@ window.__ModuleLoader__.load({
       return el
     }
 
+    /**
+     * Resolving a catalog model to its description line.
+     *
+     * The copy document (src/model-descriptions.json) ships as data beside the
+     * bundle and is fetched at runtime, so this is the only place that knows how
+     * a model's id becomes a sentence. Resolution descends: exact entry (one
+     * model resold by several providers folds to a single key) → family rule →
+     * tier rule → the catalog's own text. Family rules are ordered and anchored
+     * so another vendor's flash tier never borrows DeepSeek's copy; the tier
+     * rules are the last resort, read out of the id itself. A model this table
+     * has never seen and the catalog does not describe resolves to an empty
+     * string on purpose: a name-only row beats an invented line.
+     *
+     * Split out of model-picker.js when the effort slider pushed that fragment
+     * past the repository's size stop line; nothing here touches the picker's
+     * closure, only the shared copy document.
+     */
+    /** Exact entry: `provider/model`, bare id, folded id, then the alias table. */
+    function exactModelCopy(groupId, modelId) {
+      if (modelCopy === null) return null
+      var gid = String(groupId === void 0 || groupId === null ? '' : groupId).toLowerCase()
+      var mid = String(modelId === void 0 || modelId === null ? '' : modelId)
+      var midLower = mid.toLowerCase()
+      var byProvider = modelCopy.exact[groupId + '/' + mid] || modelCopy.exact[gid + '/' + midLower]
+      if (byProvider) return byProvider
+      if (modelCopy.exact[mid]) return modelCopy.exact[mid]
+      if (modelCopy.exact[midLower]) return modelCopy.exact[midLower]
+      var folded = normalizeModelId(mid)
+      if (modelCopy.folded[folded]) return modelCopy.folded[folded]
+      var alias = modelCopy.aliases[mid] || modelCopy.aliases[midLower] || modelCopy.aliases[folded] || (modelCopy.foldedAliases && modelCopy.foldedAliases[folded])
+      if (alias) {
+        if (modelCopy.exact[alias]) return modelCopy.exact[alias]
+        var foldedAlias = normalizeModelId(alias)
+        if (modelCopy.folded[foldedAlias]) return modelCopy.folded[foldedAlias]
+      }
+      return null
+    }
+
+    /**
+     * Family entry. The model id is tried alone first because it is the stronger
+     * signal, then `provider/id` for ids that carry no brand of their own
+     * (`abab6.5s-chat` under a provider called `minimax`).
+     */
+    function familyModelCopy(groupId, modelId) {
+      if (modelCopy === null) return null
+      var id = String(modelId === void 0 || modelId === null ? '' : modelId).toLowerCase()
+      var haystacks = [id, String(groupId === void 0 || groupId === null ? '' : groupId).toLowerCase() + '/' + id]
+      for (var h = 0; h < haystacks.length; h++) {
+        for (var i = 0; i < modelCopy.families.length; i++) {
+          var rule = modelCopy.families[i]
+          if (!rule.re.test(haystacks[h])) continue
+          if (rule.key) return modelCopy.exact[rule.key] || null
+          return rule.text
+        }
+      }
+      return null
+    }
+
+    /** Last-resort tier rule, read out of the id itself. */
+    function tierModelCopy(modelId) {
+      if (modelCopy === null) return null
+      var id = String(modelId === void 0 || modelId === null ? '' : modelId).toLowerCase()
+      for (var i = 0; i < modelCopy.tiers.length; i++) {
+        if (modelCopy.tiers[i].re.test(id)) return modelCopy.tiers[i].text
+      }
+      return null
+    }
+
+    /**
+     * The description line for one catalog model, in the shell's language.
+     * `ctx` is the caller's context, used only to read the shell's locale.
+     */
+    function modelDescription(ctx, groupId, model) {
+      var id = typeof model.id === 'string' ? model.id : ''
+      var pair = exactModelCopy(groupId, id) || familyModelCopy(groupId, id) || tierModelCopy(id)
+      var text = localized(pair, ctx)
+      if (text) return text
+      return typeof model.description === 'string' ? model.description : ''
+    }
+
+    /**
+     * The reasoning-effort slider that sits at the foot of the model picker's
+     * first level.
+     *
+     * The catalog describes a model's reasoning as a discrete ladder
+     * (`reasoning.efforts` plus the level in force), and this control draws that
+     * ladder as a track: the label carries the level's name, `Faster` / `Smarter`
+     * name the direction of travel, and the knob follows the pointer
+     * CONTINUOUSLY rather than hopping stop to stop. The value settles only when
+     * the gesture ends — release, or the pointer leaving the control — and it
+     * settles on the NEAREST level, so dragging never reads as a hard switch
+     * between fixed positions.
+     *
+     * A model that offers no levels still gets the slider, because the picker
+     * always wears the same shape at its foot: the knob travels the same way and
+     * eases back to its resting end, but there is nothing to snap to and nothing
+     * to select.
+     *
+     * The element is built once and reused across the picker's re-renders: a
+     * rebuild mid-gesture would detach it and drop the pointer capture, so the
+     * picker skips its render pass while a drag is in flight (see
+     * src/overrides/model-picker.js).
+     *
+     * @param opts - `{ read, onPick, onDragStart }`. `read()` returns the model
+     *   picker's `modelEffort()` result for the current seat (or null), and
+     *   `onPick(levelId)` commits one level — `undefined` is the model's own
+     *   default level.
+     * @returns `{ el, update, isDragging }`.
+     */
+    function createEffortControl(opts) {
+      var root = modelEl('div', 'dsh-claude-effort')
+      var head = modelEl('div', 'dsh-claude-effort-head')
+      var labelEl = modelEl('span', 'dsh-claude-effort-label')
+      var valueEl = modelEl('span', 'dsh-claude-effort-value')
+      var ends = modelEl('div', 'dsh-claude-effort-ends')
+      var fasterEl = modelEl('span', 'dsh-claude-effort-end')
+      var smarterEl = modelEl('span', 'dsh-claude-effort-end')
+      var track = modelEl('div', 'dsh-claude-effort-track')
+      var knob = modelEl('div', 'dsh-claude-effort-knob')
+
+      head.appendChild(labelEl)
+      head.appendChild(valueEl)
+      ends.appendChild(fasterEl)
+      ends.appendChild(smarterEl)
+      track.appendChild(knob)
+      root.appendChild(head)
+      root.appendChild(ends)
+      root.appendChild(track)
+      track.setAttribute('role', 'slider')
+      track.setAttribute('tabindex', '0')
+
+      /** The ladder in force, the level it is on, and the words around it. */
+      var steps = []
+      var selected = -1
+      var live = -1
+      var dragging = false
+      var painted = false
+      var pointerId = null
+      /** The dash shown when there is no level to name; cached, not re-read per move. */
+      var noneLabel = ''
+
+      /**
+       * The ladder as ordered steps, the step in force, and the words. A model
+       * with no reasoning (or one whose catalog entry has not loaded) resolves to
+       * an empty ladder: the slider is still shown, it just has nothing to
+       * select. The catalog may leave out a default level (`defaultEffort` is
+       * undefined) — that "Default" is a real position on the track, so it leads
+       * the steps with an undefined id.
+       */
+      function state() {
+        var effort = opts.read()
+        var list = []
+        var index = -1
+        if (effort !== null) {
+          if (effort.reasoning.defaultEffort === void 0) list.push({ id: void 0, name: MODEL_EFFORT_DEFAULT })
+          for (var i = 0; i < effort.reasoning.efforts.length; i++) {
+            list.push({ id: effort.reasoning.efforts[i].id, name: effort.reasoning.efforts[i].name })
+          }
+          index = 0
+          for (var s = 0; s < list.length; s++) {
+            if (list[s].id === effort.effective) { index = s; break }
+          }
+        }
+        return {
+          steps: list,
+          index: index,
+          labels: {
+            label: copyLabel('effortLabel', MODEL_EFFORT_LABEL),
+            faster: copyLabel('effortFaster', MODEL_EFFORT_FASTER),
+            smarter: copyLabel('effortSmarter', MODEL_EFFORT_SMARTER),
+            none: MODEL_EFFORT_NONE,
+          },
+        }
+      }
+
+      /** How wide the knob is, and how far its centre may travel. */
+      function geometry() {
+        var size = knob.offsetWidth || 16
+        return { size: size, span: Math.max(0, track.clientWidth - size) }
+      }
+
+      /** The knob's x for one level. No levels (or a single one) rest at the end. */
+      function positionFor(index) {
+        var box = geometry()
+        if (index < 0 || steps.length < 2) return box.span
+        return (index / (steps.length - 1)) * box.span
+      }
+
+      /**
+       * Move the knob. While the gesture runs this is ONE compositor write:
+       * the stylesheet already forces `transition: none` for `data-dragging`,
+       * so an inline transition dance (and the forced reflow it needs to take
+       * effect) would be pure overhead on every pointermove. The inline dance
+       * survives only for the rare non-drag instant move (a ladder swap on
+       * first paint), where the stylesheet's transition would otherwise
+       * animate the jump.
+       */
+      function place(x, animate) {
+        var value = 'translateX(' + Math.round(x) + 'px)'
+        if (animate || dragging) {
+          knob.style.transform = value
+          return
+        }
+        knob.style.transition = 'none'
+        knob.style.transform = value
+        void knob.offsetWidth
+        knob.style.transition = ''
+      }
+
+      /** Where the pointer sits along the track, in knob-travel units. */
+      function pointerTravel(clientX) {
+        var box = geometry()
+        var raw = clientX - track.getBoundingClientRect().left - box.size / 2
+        return Math.max(0, Math.min(box.span, raw))
+      }
+
+      /** The level nearest a travel position: the one a release settles on. */
+      function nearest(x) {
+        if (steps.length === 0) return -1
+        if (steps.length === 1) return 0
+        var box = geometry()
+        var ratio = box.span === 0 ? 0 : x / box.span
+        return Math.max(0, Math.min(steps.length - 1, Math.round(ratio * (steps.length - 1))))
+      }
+
+      /**
+       * The level's name while the gesture runs, the committed one otherwise.
+       * Same-value guard: the write runs per frame while dragging, and an
+       * identical textContent assignment still replaces the text node — the
+       * resulting mutation would feed the scheduler's observer and keep a full
+       * pass running every frame.
+       */
+      function paintValue() {
+        var at = dragging ? live : selected
+        var text = at >= 0 && steps[at] ? steps[at].name : noneLabel
+        if (valueEl.textContent !== text) valueEl.textContent = text
+      }
+
+      function paintAria(labels) {
+        noneLabel = labels.none
+        // Same-value guards throughout: update() runs on every scheduler pass,
+        // and an identical write here (in particular the aria-label, which is
+        // in the observer's attributeFilter) re-schedules the next pass — a
+        // self-sustaining one-pass-per-frame loop.
+        if (labelEl.textContent !== labels.label) labelEl.textContent = labels.label
+        if (fasterEl.textContent !== labels.faster) fasterEl.textContent = labels.faster
+        if (smarterEl.textContent !== labels.smarter) smarterEl.textContent = labels.smarter
+        if (track.getAttribute('aria-label') !== labels.label) track.setAttribute('aria-label', labels.label)
+        if (steps.length === 0) {
+          root.setAttribute('data-empty', '')
+          track.setAttribute('aria-disabled', 'true')
+          track.removeAttribute('aria-valuemin')
+          track.removeAttribute('aria-valuemax')
+          track.removeAttribute('aria-valuenow')
+          track.removeAttribute('aria-valuetext')
+          return
+        }
+        var at = Math.max(0, selected)
+        root.removeAttribute('data-empty')
+        track.removeAttribute('aria-disabled')
+        track.setAttribute('aria-valuemin', '0')
+        track.setAttribute('aria-valuemax', String(steps.length - 1))
+        track.setAttribute('aria-valuenow', String(at))
+        track.setAttribute('aria-valuetext', steps[at] ? steps[at].name : '')
+      }
+
+      /** Commit one level, once: the host is told only when the level moved. */
+      function commit(index) {
+        if (index < 0 || index >= steps.length || index === selected) return
+        selected = index
+        opts.onPick(steps[index].id)
+      }
+
+      function releaseCapture() {
+        try {
+          if (pointerId !== null && track.hasPointerCapture && track.hasPointerCapture(pointerId)) {
+            track.releasePointerCapture(pointerId)
+          }
+        } catch (error) { /* the capture may already be gone */ }
+        pointerId = null
+      }
+
+      /** The gesture ends: the knob lands on the nearest level and commits it. */
+      function settle() {
+        if (!dragging) return
+        if (moveQueued) {
+          // Land the still-pending position first, so the release settles on
+          // where the pointer actually is rather than one event behind.
+          cancelAnimationFrame(pendingFrame)
+          moveQueued = false
+          pendingFrame = 0
+          applyPending()
+          if (!dragging) return
+        }
+        dragging = false
+        root.removeAttribute('data-dragging')
+        releaseCapture()
+        var index = live
+        live = -1
+        place(positionFor(index), true)
+        paintValue()
+        commit(index)
+      }
+
+      function onPointerDown(e) {
+        if (e.button !== 0) return
+        e.preventDefault()
+        e.stopPropagation()
+        dragging = true
+        painted = true
+        root.setAttribute('data-dragging', '')
+        pointerId = e.pointerId
+        try { track.setPointerCapture(e.pointerId) } catch (error) { /* capture is a nicety */ }
+        if (typeof opts.onDragStart === 'function') opts.onDragStart()
+        var x = pointerTravel(e.clientX)
+        place(x, false)
+        live = nearest(x)
+        paintValue()
+      }
+
+      /**
+       * The gesture's latest pointer position. pointermove fires faster than
+       * frames render; the event stores the position and ONE animation-frame
+       * callback applies it — reads first (boundary box, travel geometry),
+       * writes after (one transform + the level name) — so the drag costs one
+       * layout flush per frame instead of one forced reflow per event.
+       */
+      var pendingFrame = 0
+      var moveQueued = false
+      var pendingX = 0
+      var pendingY = 0
+
+      function applyPending() {
+        if (!dragging) return
+        var box = root.getBoundingClientRect()
+        // Leaving the control ends the gesture where it stands — the knob
+        // settles on the nearest level instead of trailing the pointer away.
+        if (pendingX < box.left - 6 || pendingX > box.right + 6 || pendingY < box.top - 6 || pendingY > box.bottom + 6) {
+          settle()
+          return
+        }
+        var x = pointerTravel(pendingX)
+        place(x, false)
+        live = nearest(x)
+        paintValue()
+      }
+
+      function onPointerMove(e) {
+        if (!dragging) return
+        pendingX = e.clientX
+        pendingY = e.clientY
+        if (moveQueued) return
+        moveQueued = true
+        pendingFrame = requestAnimationFrame(function () {
+          moveQueued = false
+          pendingFrame = 0
+          applyPending()
+        })
+      }
+
+      track.addEventListener('pointerdown', onPointerDown)
+      track.addEventListener('pointermove', onPointerMove)
+      track.addEventListener('pointerup', function () { settle() })
+      track.addEventListener('pointercancel', function () { settle() })
+      track.addEventListener('keydown', function (e) {
+        if (steps.length === 0) return
+        var base = selected < 0 ? 0 : selected
+        var next = base
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = Math.max(0, base - 1)
+        else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = Math.min(steps.length - 1, base + 1)
+        else if (e.key === 'Home') next = 0
+        else if (e.key === 'End') next = steps.length - 1
+        else return
+        e.preventDefault()
+        e.stopPropagation()
+        commit(next)
+        place(positionFor(next), true)
+        paintAria(state().labels)
+        paintValue()
+      })
+
+      /**
+       * Re-point the control at the model in force. The ladder is rebuilt only
+       * when the levels themselves change; the knob is only animated when the
+       * selected level moved on its own (the host echoing a selection back).
+       */
+      function update() {
+        var next = state()
+        var changed = next.steps.length !== steps.length
+        if (!changed) {
+          for (var i = 0; i < next.steps.length; i++) {
+            if (next.steps[i].id !== steps[i].id) { changed = true; break }
+          }
+        }
+        if (changed) steps = next.steps.slice()
+        if (!dragging) {
+          var moved = painted && !changed && selected !== next.index
+          selected = next.index
+          place(positionFor(selected), moved)
+          painted = true
+        }
+        paintAria(next.labels)
+        paintValue()
+      }
+
+      return {
+        el: root,
+        update: update,
+        isDragging: function () { return dragging },
+      }
+    }
+
     function installModelPicker(ctx, ui) {
       /**
        * The host's model seat is a click-triggered two-pane menu (Model /
@@ -5438,80 +6819,92 @@ window.__ModuleLoader__.load({
       var modelPop = null
       var modelSubPop = null
       var modelBody = null
+      var modelFooter = null
+      var effortSlider = null
       var modelSubBody = null
-      var modelHoverIntent = createHoverIntent(openModelPopover, closeModelPopovers, 180)
+      /**
+       * The picker is two cards wide, and the level-2 card only cancels a pending
+       * close once the pointer is ON it — so the grace has to cover the journey
+       * from a level-1 row, across the gap, onto the sub card. At the shared 100ms
+       * a slow traverse ran it out and both cards folded up mid-journey.
+       */
+      var MODEL_CLOSE_DELAY = 150
+      /** Pending fold of level 2 while the pointer is still crossing level 1. */
+      var subFoldTimer = null
+      var modelHoverIntent = createHoverIntent(openModelPopover, closeModelIfAway, POPOVER_OPEN_DELAY, MODEL_CLOSE_DELAY)
+      /** The More-models cell drills in on the same dwell/grace as the trigger. */
+      var modelSubHoverIntent = createHoverIntent(openModelSub, closeModelIfAway, POPOVER_OPEN_DELAY, MODEL_CLOSE_DELAY)
       var modelDir = null
       var modelSub = null
       var modelSessionId = null
       var modelWarmRequested = false
-      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) {
-        if (modelCopy === null) return null
-        var gid = String(groupId === void 0 || groupId === null ? '' : groupId).toLowerCase()
-        var mid = String(modelId === void 0 || modelId === null ? '' : modelId)
-        var midLower = mid.toLowerCase()
-        var byProvider = modelCopy.exact[groupId + '/' + mid] || modelCopy.exact[gid + '/' + midLower]
-        if (byProvider) return byProvider
-        if (modelCopy.exact[mid]) return modelCopy.exact[mid]
-        if (modelCopy.exact[midLower]) return modelCopy.exact[midLower]
-        var folded = normalizeModelId(mid)
-        if (modelCopy.folded[folded]) return modelCopy.folded[folded]
-        var alias = modelCopy.aliases[mid] || modelCopy.aliases[midLower] || modelCopy.aliases[folded] || (modelCopy.foldedAliases && modelCopy.foldedAliases[folded])
-        if (alias) {
-          if (modelCopy.exact[alias]) return modelCopy.exact[alias]
-          var foldedAlias = normalizeModelId(alias)
-          if (modelCopy.folded[foldedAlias]) return modelCopy.folded[foldedAlias]
+      function cancelCloseModel() {
+        modelHoverIntent.cancel()
+        if (subFoldTimer !== null) {
+          clearTimeout(subFoldTimer)
+          subFoldTimer = null
         }
-        return null
+      }
+
+      function scheduleCloseModel() {
+        modelHoverIntent.scheduleClose()
       }
 
       /**
-       * Family entry. The model id is tried alone first because it is the
-       * stronger signal, then `provider/id` for ids that carry no brand of their
-       * own (`abab6.5s-chat` under a provider called `minimax`).
+       * Where the pointer last was, tracked only while a card is up. The two cards
+       * are separate boxes with a sliver of desktop between them, and a pointer
+       * crossing that sliver has not left the picker — without this the grace
+       * simply runs out mid-gap and both cards fold.
        */
-      function familyModelCopy(groupId, modelId) {
-        if (modelCopy === null) return null
-        var id = String(modelId === void 0 || modelId === null ? '' : modelId).toLowerCase()
-        var haystacks = [id, String(groupId === void 0 || groupId === null ? '' : groupId).toLowerCase() + '/' + id]
-        for (var h = 0; h < haystacks.length; h++) {
-          for (var i = 0; i < modelCopy.families.length; i++) {
-            var rule = modelCopy.families[i]
-            if (!rule.re.test(haystacks[h])) continue
-            if (rule.key) return modelCopy.exact[rule.key] || null
-            return rule.text
-          }
+      var pointer = null
+      var pointerBound = false
+      function trackPointer(event) {
+        pointer = { x: event.clientX, y: event.clientY }
+      }
+      function trackPointerWhileOpen() {
+        var wanted = modelPop !== null && modelPop.getAttribute('data-open') === 'true'
+        if (wanted === pointerBound) return
+        pointerBound = wanted
+        if (wanted) {
+          document.addEventListener('mousemove', trackPointer, true)
+        } else {
+          document.removeEventListener('mousemove', trackPointer, true)
+          pointer = null
         }
-        return null
       }
 
-      /** Last-resort tier rule, read out of the id itself. */
-      function tierModelCopy(modelId) {
-        if (modelCopy === null) return null
-        var id = String(modelId === void 0 || modelId === null ? '' : modelId).toLowerCase()
-        for (var i = 0; i < modelCopy.tiers.length; i++) {
-          if (modelCopy.tiers[i].re.test(id)) return modelCopy.tiers[i].text
+      /** True while the pointer sits in either card, or in the gap between them. */
+      function pointerInPicker() {
+        if (pointer === null) return false
+        var cards = [modelPop, modelSubPop]
+        for (var i = 0; i < cards.length; i++) {
+          var card = cards[i]
+          if (card === null || card.getAttribute('data-open') !== 'true') continue
+          var box = card.getBoundingClientRect()
+          if (pointer.x >= box.left - 8 && pointer.x <= box.right + 8 &&
+              pointer.y >= box.top - 8 && pointer.y <= box.bottom + 8) return true
         }
-        return null
-      }
-
-      function cancelCloseModel() {
-        modelHoverIntent.cancel()
+        return false
       }
 
-      function scheduleCloseModel() {
-        modelHoverIntent.scheduleClose()
+      /** Close on leave, but treat the gap between the two cards as still inside. */
+      function closeModelIfAway() {
+        if (pointerInPicker()) {
+          scheduleCloseModel()
+          return
+        }
+        closeModelPopovers()
       }
 
       function closeModelPopovers() {
         cancelCloseModel()
         if (modelPop) modelPop.setAttribute('data-open', 'false')
         if (modelSubPop) modelSubPop.setAttribute('data-open', 'false')
-        modelSubKind = null
       }
 
       function openModelPopover() {
@@ -5527,16 +6920,14 @@ window.__ModuleLoader__.load({
             }
           } catch (error) { /* synchronous failure — the store's error surface covers it */ }
         }
-        modelSubKind = null
         if (modelSubPop) modelSubPop.setAttribute('data-open', 'false')
         renderModelBody()
         positionModelPopovers()
         if (modelPop) modelPop.setAttribute('data-open', 'true')
       }
 
-      function openModelSub(kind) {
+      function openModelSub() {
         cancelCloseModel()
-        modelSubKind = kind
         renderModelSub()
         positionModelPopovers()
         if (modelSubPop) modelSubPop.setAttribute('data-open', 'true')
@@ -5597,7 +6988,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 +7002,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.
@@ -5671,34 +7093,58 @@ window.__ModuleLoader__.load({
       }
 
       /**
-       * The description line for one catalog model, in the shell's language.
-       *
-       * Resolution descends: exact entry (one model resold by several providers
-       * folds to a single key) → family rule → tier rule → the catalog's own
-       * text. Family rules are ordered and anchored (see
-       * src/model-descriptions.json) so another vendor's flash tier never
-       * borrows DeepSeek's copy. A model this table has never seen and the
-       * catalog does not describe resolves to an empty string on purpose: a
-       * name-only row beats an invented line.
+       * The effort slider (src/overrides/model-effort.js). It is handed a reader
+       * rather than the seat itself: the control re-reads the catalog on every
+       * pass, so a selection the host echoes back lands on the knob without the
+       * picker having to push it.
        */
-      function modelDescription(groupId, model) {
-        var id = typeof model.id === 'string' ? model.id : ''
-        var pair = exactModelCopy(groupId, id) || familyModelCopy(groupId, id) || tierModelCopy(id)
-        var text = localized(pair, ctx)
-        if (text) return text
-        return typeof model.description === 'string' ? model.description : ''
+      function effortControlElement() {
+        if (effortSlider === null) {
+          effortSlider = createEffortControl({
+            read: function () { return modelEffort(modelSnapshot()) },
+            onPick: pickEffort,
+            // A drag must not be cut short by the hover-close timer: the pointer
+            // is inside the control the whole time.
+            onDragStart: cancelCloseModel,
+          })
+        }
+        return effortSlider.el
+      }
+
+      /** Re-point the slider at the current seat (every render pass). */
+      function updateEffortControl() {
+        if (effortSlider !== null) effortSlider.update()
       }
 
       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
@@ -5712,7 +7158,7 @@ window.__ModuleLoader__.load({
         // while "More models" is every provider's full catalog and reads better
         // as names alone. One line, in the shell's language — the copy document is
         // localized rather than stacked, so a row never carries two languages.
-        var desc = withDescription ? modelDescription(group.id, model) : ''
+        var desc = withDescription ? modelDescription(ctx, group.id, model) : ''
         if (desc) copy.appendChild(modelEl('span', 'dsh-claude-model-desc', desc))
         item.appendChild(copy)
         var check = modelEl('span', 'dsh-claude-model-check')
@@ -5727,28 +7173,27 @@ window.__ModuleLoader__.load({
         return item
       }
 
-      /** One level-2 row: label + current value + chevron, hover opens its level. */
-      function buildModelCell(label, value, kind) {
+      /** The More-models row: label + chevron, hover opens the second level. */
+      function buildModelCell(label) {
         var cell = modelEl('button', 'dsh-claude-model-cell')
         cell.type = 'button'
         cell.setAttribute('role', 'menuitem')
         cell.appendChild(modelEl('span', 'dsh-claude-model-cell-label', label))
-        if (value) cell.appendChild(modelEl('span', 'dsh-claude-model-cell-value', value))
         var chevron = modelEl('span', 'dsh-claude-model-cell-chevron')
         chevron.innerHTML = MODEL_CHEVRON_SVG
         cell.appendChild(chevron)
-        cell.addEventListener('mouseenter', (function (k) {
-          return function () {
-            if (readPrefs().autoPopover) openModelSub(k)
-          }
-        })(kind))
-        cell.addEventListener('click', (function (k) {
-          return function (e) {
-            e.stopPropagation()
-            if (modelSubKind === k) closeModelPopovers()
-            else openModelSub(k)
-          }
-        })(kind))
+        cell.addEventListener('mouseenter', function () {
+          if (readPrefs().autoPopover === AUTO_POPOVER_ALL) modelSubHoverIntent.scheduleOpen()
+        })
+        cell.addEventListener('mouseleave', function () {
+          // A pointer that only crossed the cell must not drill in behind it.
+          modelSubHoverIntent.cancel()
+        })
+        cell.addEventListener('click', function (e) {
+          e.stopPropagation()
+          if (modelSubPop && modelSubPop.getAttribute('data-open') === 'true') closeModelPopovers()
+          else openModelSub()
+        })
         return cell
       }
 
@@ -5764,6 +7209,7 @@ window.__ModuleLoader__.load({
         closeModelPopovers()
       }
 
+      /** Commit one reasoning level. The slider stays open for the next nudge. */
       function pickEffort(effort) {
         var dir = modelDirectory()
         var snap = modelSnapshot()
@@ -5774,73 +7220,137 @@ window.__ModuleLoader__.load({
           var pending = dir.select(selection)
           if (pending && typeof pending.catch === 'function') pending.catch(function () {})
         } catch (error) { /* rejected selections surface on the host's toast */ }
-        closeModelPopovers()
       }
 
-      /** Level 1: the official provider's models, divider, effort + more rows. */
+      /**
+       * The providers level 1 lists: the official service first, then the quick
+       * providers the settings page picked. 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.
+       */
+      function levelOneSections(groups) {
+        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 (chosen.indexOf(groups[g2].id) === -1 || groups[g2].id === MODEL_OFFICIAL_GROUP || groups[g2].models.length === 0) continue
+          sections.push(groups[g2])
+        }
+        if (sections.length === 0) {
+          for (var g4 = 0; g4 < groups.length; g4++) {
+            if (groups[g4].models.length > 0) sections.push(groups[g4])
+          }
+        }
+        return sections
+      }
+
+      /**
+       * The provider groups level 1 does NOT show — which is exactly what level 2
+       * is for. Repeating a provider across the two cards made the same models
+       * appear twice, one card apart.
+       *
+       * Only a GROUP counts as shown. The seat level 1 surfaces as a row of its
+       * own does not: that row carries one model, not the provider, so hiding the
+       * provider's remaining models behind it would strand them.
+       */
+      function remainingGroups(groups, sections) {
+        var shown = {}
+        for (var i = 0; i < sections.length; i++) shown[sections[i].id] = true
+        var out = []
+        for (var g = 0; g < groups.length; g++) {
+          if (groups[g].models.length === 0 || shown[groups[g].id] === true) continue
+          out.push(groups[g])
+        }
+        return out
+      }
+
+      /** Level 1: the provider sections, the divider, the effort slider, More models. */
       function renderModelBody() {
         if (!modelBody) return
+        // A drag in flight owns the slider: rebuilding the footer would detach it
+        // and drop its pointer capture mid-gesture. The pass that ends the drag —
+        // settle commits, the host answers, a pass is scheduled — picks it up.
+        if (effortSlider !== null && effortSlider.isDragging()) return
         var snap = modelSnapshot()
         var status = snap ? snap.status : 'idle'
         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
+        if (sig === modelBodySig) {
+          // The list is unchanged, but the slider still has to follow the seat:
+          // its geometry tracks the card's width, its value a selection the host
+          // echoed back.
+          updateEffortControl()
+          return
+        }
         modelBodySig = sig
         while (modelBody.firstChild) modelBody.removeChild(modelBody.firstChild)
-
-        if (status === 'idle' || status === 'loading' || status === 'selecting') {
+        while (modelFooter && modelFooter.firstChild) modelFooter.removeChild(modelFooter.firstChild)
+
+        // A seat whose data is still in flight must not blank a picker that
+        // already has a list. The host marks the directory `selecting` for the
+        // WHOLE selectModel round-trip, and that round-trip runs for seconds on
+        // providers whose adapters resolve over the network — the effort slider
+        // commits through the very same RPC, so nudging it used to empty the
+        // card (list, slider and More-models row all gone) for exactly as long
+        // as the host took to answer. Only a directory with nothing to show
+        // yet falls back to the loading line.
+        var seated = groups.length > 0 && current !== null
+        if (!seated && (status === 'idle' || status === 'loading' || status === 'selecting')) {
           modelBody.appendChild(modelEl('div', 'dsh-claude-model-status', copyLabel('loading', MODEL_LOADING_LABEL)))
         } else {
-          var official = null
-          for (var g2 = 0; g2 < groups.length; g2++) {
-            if (groups[g2].id === MODEL_OFFICIAL_GROUP) { official = groups[g2]; break }
-          }
-          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 (rows.length === 0) {
+          var sections = levelOneSections(groups)
+          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)
+            var currentDesc = modelDescription(ctx, current.group.id, current.model)
             if (currentDesc) currentCopy.appendChild(modelEl('span', 'dsh-claude-model-desc', currentDesc))
             currentRow.appendChild(currentCopy)
             var currentCheck = modelEl('span', 'dsh-claude-model-check')
@@ -5852,60 +7362,51 @@ 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) {
+            // The slider belongs to models that actually offer levels: without
+            // reasoning metadata there is nothing to configure, so the row is not
+            // drawn at all instead of being drawn inert.
+            var showEffort = effort !== null
+            // "More models" carries what level 1 does not. With every provider
+            // already on screen the row would only open an empty card, so it goes
+            // away with the last remaining provider.
+            var showMore = remainingGroups(groups, sections).length > 0
+            // The divider exists to close the list off from what follows it. With
+            // both rows gone there is nothing left to close off, and a bare line
+            // under the list reads as a stray rule.
+            if (showEffort || showMore) {
+              modelFooter.appendChild(modelEl('div', 'dsh-claude-model-divider'))
+              if (showEffort) modelFooter.appendChild(effortControlElement())
+              if (showMore) modelFooter.appendChild(buildModelCell(copyLabel('moreLabel', MODEL_MORE_LABEL)))
+            }
+          }
         }
+        updateEffortControl()
       }
 
-      /** Level 2: the effort ladder, or every provider group's models. */
+      /** Level 2: the providers level 1 does NOT show, each headed by its name. */
       function renderModelSub() {
         if (!modelSubBody) return
         var snap = modelSnapshot()
-        if (modelSubKind === 'effort') {
-          var effort = modelEffort(snap)
-          var sig = 'effort:' + (effort ? String(effort.effective) : 'none')
-          if (sig === modelSubSig) return
-          modelSubSig = sig
-          while (modelSubBody.firstChild) modelSubBody.removeChild(modelSubBody.firstChild)
-          if (effort === null) {
-            modelSubBody.appendChild(modelEl('div', 'dsh-claude-model-status', copyLabel('noEffort', MODEL_NO_EFFORT_LABEL)))
-            return
-          }
-          var levels = []
-          if (effort.reasoning.defaultEffort === void 0) levels.push({ effort: void 0, label: MODEL_EFFORT_DEFAULT })
-          for (var i = 0; i < effort.reasoning.efforts.length; i++) {
-            levels.push({ effort: effort.reasoning.efforts[i].id, label: effort.reasoning.efforts[i].name })
-          }
-          for (var l = 0; l < levels.length; l++) {
-            (function (level, active) {
-              var item = modelEl('button', 'dsh-claude-model-option')
-              item.type = 'button'
-              item.setAttribute('role', 'menuitemradio')
-              item.setAttribute('aria-checked', active ? 'true' : 'false')
-              item.appendChild(modelEl('span', 'dsh-claude-model-copy', level.label))
-              var check = modelEl('span', 'dsh-claude-model-check')
-              check.innerHTML = active ? MODEL_CHECK_SVG : ''
-              item.appendChild(check)
-              item.addEventListener('click', function (e) {
-                e.stopPropagation()
-                pickEffort(level.effort)
-              })
-              modelSubBody.appendChild(item)
-            })(levels[l], effort.effective === levels[l].effort)
-          }
-          return
-        }
-        // 'more': every provider group, headed by its name.
         var groups = (snap && snap.groups) || []
         var current = modelCurrent(snap)
-        var sig2 = 'more'
+        // What level 2 holds depends on what level 1 lists, so the signature has
+        // to carry level 1's provider ids as well.
+        var sections = levelOneSections(groups)
+        var listed = []
+        for (var s0 = 0; s0 < sections.length; s0++) listed.push(sections[s0].id)
+        var sig2 = 'more|' + listed.join(',')
         for (var g = 0; g < groups.length; g++) sig2 += ';' + groups[g].id + ':' + groups[g].models.length
         if (current) sig2 += '#' + current.group.id + '/' + current.model.id
         if (sig2 === modelSubSig) return
         modelSubSig = sig2
         while (modelSubBody.firstChild) modelSubBody.removeChild(modelSubBody.firstChild)
-        for (var g2 = 0; g2 < groups.length; g2++) {
-          var group = groups[g2]
+        var rest = remainingGroups(groups, sections)
+        for (var g2 = 0; g2 < rest.length; g2++) {
+          var group = rest[g2]
           if (group.models.length === 0) continue
           var groupSection = modelEl('div', 'dsh-claude-model-group-section')
           var groupRow = modelEl('div', 'dsh-claude-model-group-row')
@@ -5918,11 +7419,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))
@@ -5935,22 +7432,39 @@ window.__ModuleLoader__.load({
       }
 
       function positionModelPopovers() {
+        trackPointerWhileOpen()
         if (!modelBtn || !modelPop) return
         var pos = positionAnchoredPopover(modelBtn, modelPop, { side: 'above', gap: 6 })
         if (modelSubPop && modelSubPop.getAttribute('data-open') === 'true') {
           var w2 = modelSubPop.offsetWidth
           var h2 = modelSubPop.offsetHeight
+          var h1 = modelPop.offsetHeight
           // Beside the first level; flip to its left when the viewport is tight.
-          var x2 = pos.x + modelPop.offsetWidth + 4
+          var x2 = pos.x + modelPop.offsetWidth + 2
           if (x2 + w2 > window.innerWidth - POPOVER_MARGIN) x2 = Math.max(POPOVER_MARGIN, pos.x - 4 - w2)
-          var y2 = Math.max(POPOVER_MARGIN, Math.min(pos.y, window.innerHeight - h2 - POPOVER_MARGIN))
+          // Bottom-aligned with the first level: a short level 2 used to hang from
+          // the top, leaving dead space under it that the pointer had to cross to
+          // reach the card from the More-models row. A level 2 TALLER than level 1
+          // keeps its top instead, so it cannot push itself off the top edge.
+          var y2 = pos.y + Math.max(0, h1 - h2)
+          y2 = Math.max(POPOVER_MARGIN, Math.min(y2, window.innerHeight - h2 - POPOVER_MARGIN))
           modelSubPop.style.left = x2 + 'px'
           modelSubPop.style.top = y2 + 'px'
         }
       }
 
       function ensureModelChrome() {
-        if (modelPop === null) {
+        // Idempotence guard, not just a null check: the picker's own teardown
+        // sweep, or a hot-reload generation's stray sweep, can REMOVE the
+        // popover node while the closure still references it. With a null-only
+        // check the reference stays non-null-but-detached and is never rebuilt
+        // — the trigger then toggles a popover that is not in the document and
+        // the picker silently loses its click effect. The account footer's
+        // equivalent guard (footArea.contains) is the established pattern.
+        // Rebuilding also re-points the body/footer children and resets the
+        // render signatures so the next pass repaints into the fresh nodes.
+        if (modelPop === null || modelPop.parentElement === null) {
+          if (modelPop !== null && modelPop.parentElement !== null) modelPop.parentElement.removeChild(modelPop)
           modelPop = document.createElement('div')
           modelPop.className = 'dsh-claude-model-popover'
           modelPop.setAttribute('role', 'menu')
@@ -5958,11 +7472,43 @@ 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)
+          // The second level belongs to its More-models cell: while it is open,
+          // the pointer landing anywhere else on the first level (the effort
+          // slider, a model row, bare card) folds it — the first level itself
+          // stays open, it is the hover-intent host. Delegated mouseover, not
+          // mouseenter: moving from the cell to the slider never crosses the
+          // popover's boundary, so a boundary event would never fire.
+          modelPop.addEventListener('mouseover', function (e) {
+            if (modelSubPop === null || modelSubPop.getAttribute('data-open') !== 'true') return
+            var target = e.target
+            if (target && typeof target.closest === 'function' && target.closest('.dsh-claude-model-cell')) return
+            // Delayed, not immediate: the sub card sits BESIDE level 1, so a
+            // pointer on its way from the cell to the sub crosses level 1's own
+            // rows — folding on the spot made that journey impossible at any
+            // speed. Folding now waits out the same grace, and stands down if the
+            // pointer has meanwhile reached either card.
+            if (subFoldTimer !== null) clearTimeout(subFoldTimer)
+            subFoldTimer = setTimeout(function () {
+              subFoldTimer = null
+              if (pointerInPicker()) return
+              if (modelSubPop !== null) modelSubPop.setAttribute('data-open', 'false')
+            }, MODEL_CLOSE_DELAY)
+          })
+          modelPop.addEventListener('mouseleave', function () {
+            // A drag in flight must not be cut short by the hover-close timer: the
+            // pointer is working the slider, not leaving the card.
+            if (effortSlider !== null && effortSlider.isDragging()) return
+            scheduleCloseModel()
+          })
           document.body.appendChild(modelPop)
+          modelBodySig = ''
         }
-        if (modelSubPop === null) {
+        if (modelSubPop === null || modelSubPop.parentElement === null) {
+          if (modelSubPop !== null && modelSubPop.parentElement !== null) modelSubPop.parentElement.removeChild(modelSubPop)
           modelSubPop = document.createElement('div')
           modelSubPop.className = 'dsh-claude-model-popover dsh-claude-model-popover-sub'
           modelSubPop.setAttribute('role', 'menu')
@@ -5973,12 +7519,16 @@ window.__ModuleLoader__.load({
           modelSubPop.addEventListener('mouseenter', cancelCloseModel)
           modelSubPop.addEventListener('mouseleave', scheduleCloseModel)
           document.body.appendChild(modelSubPop)
+          modelSubSig = ''
         }
       }
 
       /** 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,8 +7545,8 @@ window.__ModuleLoader__.load({
           modelPop = null
           modelSubPop = null
           modelBody = null
+          modelFooter = null
           modelSubBody = null
-          modelSubKind = null
           modelBodySig = ''
           modelSubSig = ''
           cancelCloseModel()
@@ -6014,6 +7564,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 +7587,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) modelHoverIntent.scheduleOpen()
           })
           modelBtn.addEventListener('mouseleave', function () {
-            if (readPrefs().autoPopover) scheduleCloseModel()
+            if (readPrefs().autoPopover === AUTO_POPOVER_ALL) scheduleCloseModel()
           })
           modelBtn.addEventListener('click', function (e) {
             e.stopPropagation()
@@ -6045,11 +7607,24 @@ window.__ModuleLoader__.load({
         var snap = modelSnapshot()
         var current = modelCurrent(snap)
         var effort = modelEffort(snap)
+        var groupsNow = (snap && snap.groups) || []
         var label = current ? current.model.name : copyLabel('fallbackLabel', MODEL_FALLBACK_LABEL)
         var labelEl = modelBtn.querySelector('.dsh-claude-model-btn-label')
         if (labelEl) {
-          labelEl.textContent = label
-          labelEl.classList.toggle('dsh-claude-model-btn-loading', !!(snap && (snap.status === 'loading' || snap.status === 'idle' || snap.status === 'selecting')))
+          // Same-value guards: syncModelControl runs on every scheduler pass,
+          // and an identical write still mutates the DOM (textContent replaces
+          // the text node; setAttribute queues an attribute record — and
+          // aria-label is in the observer's attributeFilter). Unguarded, each
+          // pass feeds the observer that schedules the next pass, keeping one
+          // full pass running every frame even at idle.
+          if (labelEl.textContent !== label) labelEl.textContent = label
+          // The dimmed tone means "no seat to name yet". A selection in flight
+          // still names the model in force, so it keeps the normal tone — the
+          // host can hold `selecting` for seconds (the effort slider commits
+          // through that same RPC), and a greyed-out trigger for that long
+          // reads as broken rather than busy.
+          var unsettled = !!(snap && (snap.status === 'loading' || snap.status === 'idle' || snap.status === 'selecting')) && !(groupsNow.length > 0 && current !== null)
+          labelEl.classList.toggle('dsh-claude-model-btn-loading', unsettled)
         }
         var effortEl = modelBtn.querySelector('.dsh-claude-model-btn-effort')
         if (effort) {
@@ -6057,19 +7632,22 @@ window.__ModuleLoader__.load({
             effortEl = modelEl('span', 'dsh-claude-model-btn-effort')
             modelBtn.insertBefore(effortEl, modelBtn.firstChild ? labelEl.nextSibling : null)
           }
-          effortEl.textContent = '· ' + effort.label
+          var effortText = '· ' + effort.label
+          if (effortEl.textContent !== effortText) effortEl.textContent = effortText
         } else if (effortEl !== null && effortEl.parentElement) {
           effortEl.parentElement.removeChild(effortEl)
         }
-        modelBtn.setAttribute('aria-label', copyLabel('triggerLabel', MODEL_TRIGGER_LABEL, { model: label }))
+        var triggerAria = copyLabel('triggerLabel', MODEL_TRIGGER_LABEL, { model: label })
+        if (modelBtn.getAttribute('aria-label') !== triggerAria) modelBtn.setAttribute('aria-label', triggerAria)
         modelBtn.disabled = false
 
         renderModelBody()
-        if (modelSubKind !== null) {
+        if (modelSubPop && modelSubPop.getAttribute('data-open') === 'true') {
           renderModelSub()
-          if (modelSubPop && modelSubPop.getAttribute('data-open') === 'true') positionModelPopovers()
+          positionModelPopovers()
+        } else if (modelPop && modelPop.getAttribute('data-open') === 'true') {
+          positionModelPopovers()
         }
-        if (modelPop && modelPop.getAttribute('data-open') === 'true') positionModelPopovers()
       }
 
 
@@ -6083,6 +7661,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,8 +7683,9 @@ window.__ModuleLoader__.load({
           modelPop = null
           modelSubPop = null
           modelBody = null
+          modelFooter = null
+          effortSlider = null
           modelSubBody = null
-          modelSubKind = null
           modelBodySig = ''
           modelSubSig = ''
         }
@@ -6107,11 +7694,361 @@ 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 = POPOVER_CLOSE_DELAY
+      /** 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 openTimer = null
+      var openedByHover = false
+
+      function cancelHoverClose() {
+        if (closeTimer === null) return
+        clearTimeout(closeTimer)
+        closeTimer = null
+      }
+
+      function cancelHoverOpen() {
+        if (openTimer === null) return
+        clearTimeout(openTimer)
+        openTimer = null
+      }
+
+      /**
+       * Open what hover asked for, once the pointer has stayed the dwell out.
+       * The host's menu has no hover of its own — this clicks its trigger — so
+       * the dwell is what keeps a pointer merely crossing the hero row from
+       * unfolding the card.
+       */
+      function openFromHover(trigger) {
+        openTimer = null
+        if (!hoverEnabled()) return
+        if (trigger.getAttribute('aria-expanded') === 'true') return
+        trigger.click()
+        openedByHover = true
+      }
+
+      function scheduleHoverOpen(trigger) {
+        cancelHoverOpen()
+        openTimer = setTimeout(function () { openFromHover(trigger) }, POPOVER_OPEN_DELAY)
+      }
+
+      /** 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') scheduleHoverOpen(trigger)
+      }
+
+      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
+        cancelHoverOpen()
+        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()
+        cancelHoverOpen()
+        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
       var popoverBody = null
-      var popoverHoverIntent = createHoverIntent(openPopover, closePopover, 150)
+      var popoverHoverIntent = createHoverIntent(openPopover, closePopover, POPOVER_OPEN_DELAY, POPOVER_CLOSE_DELAY)
       // Whether the popover is up because it was CLICKED (rather than hovered).
       // Clicking the account row opens the ban-screen easter egg and leaves the
       // pointer inside the popover, so without this the row's own mouseleave
@@ -6696,6 +8633,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 +8665,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) popoverHoverIntent.scheduleOpen()
           })
           accountBtn.addEventListener('mouseleave', function () {
-            if (readPrefs().autoPopover && !popoverOpenedByClick) scheduleClosePopover()
+            if (readPrefs().autoPopover !== AUTO_POPOVER_OFF && !popoverOpenedByClick) scheduleClosePopover()
           })
           accountBtn.addEventListener('click', function (e) {
             e.stopPropagation()
@@ -7279,6 +9231,419 @@ window.__ModuleLoader__.load({
       }
     }
 
+    /**
+     * The sidebar's workspace section, re-cut as a two-state view.
+     *
+     * 进行中 needs no filtering of its own: the host's tree already leaves
+     * archived sessions out (measured on 0.1.7-alpha.1 — 10 rows, 6 archived, zero
+     * overlap). 已归档 is the skin's own flat list of archived conversations, built
+     * from the archive registry (ids) plus the session list (titles and times),
+     * with a delete button on every row.
+     *
+     * The host DOES ship this filter, but its state lives in a store created per
+     * view instance (`createWorkspaceViewStore`) and is not reachable as a client
+     * service — the only way to use it is to click its options menu, which flashes
+     * a popover in the user's face and still leaves the archived rows buried in
+     * collapsed workspace groups. Listing them here is quieter and flat.
+     *
+     * @param ctx - client context.
+     * @param ui - shared handle table.
+     * @returns teardown.
+     */
+    function installWorkspaceView(ctx, ui) {
+      /** Trash can for one archived row. */
+      var DELETE_SVG = '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.6 4.2h10.8"/><path d="M6.4 4.2V3a.8.8 0 0 1 .8-.8h1.6a.8.8 0 0 1 .8.8v1.2"/><path d="M4.2 4.2l.6 8.3a1 1 0 0 0 1 .9h4.4a1 1 0 0 0 1-.9l.6-8.3"/><path d="M6.7 6.8v4M9.3 6.8v4"/></svg>'
+      /** Tray with an up arrow: put this conversation back among the live ones. */
+      var RESTORE_SVG = '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.6 9.2v3.4a1 1 0 0 0 1 1h8.8a1 1 0 0 0 1-1V9.2"/><path d="M8 10.4V2.6"/><path d="M5.2 5.4L8 2.6l2.8 2.8"/></svg>'
+      /**
+       * The host's own Tooltip and icons, reached through the plugin loader's
+       * `require` — the same packages its UI uses, so these row actions look and
+       * behave like the host's. `@deepseek-ai/dsh-client-ui-primitives` exports
+       * `Tooltip`, `IconUnarchiveOutlineRegular` and `IconTrashOutlineRegular`.
+       * Guarded: a loader that hands over nothing leaves the skin's own SVG and a
+       * native title in place.
+       */
+      var primitives = null
+      var react = null
+      var reactDom = null
+      try { primitives = require('@deepseek-ai/dsh-client-ui-primitives') } catch (error) { primitives = null }
+      try { react = require('react') } catch (error) { react = null }
+      try { reactDom = require('react-dom/client') } catch (error) { reactDom = null }
+      /** React roots holding the row actions, unmounted when the list is rebuilt. */
+      var actionRoots = []
+      var VIEW_ATTR = 'data-dsh-claude-ws-view'
+      var LABEL_ATTR = 'data-dsh-claude-ws-label'
+      var TREE_ATTR = 'data-dsh-claude-ws-tree'
+      var SEGMENTS = [
+        { id: 'active', key: 'archiveActive', fallback: 'Active' },
+        { id: 'archived', key: 'archiveArchived', fallback: 'Archived' }
+      ]
+      var LABEL_TEXTS = ['工作区', 'Workspace']
+      var view = 'active'
+      var control = null
+      var listHost = null
+      var markedLabel = null
+      var markedTree = null
+      /** `null` until the registry answers; then `[{ id, title, at }]`. */
+      var items = null
+      var loading = false
+      /**
+       * Whether this host archives conversations at all. DSH 0.1.5 has no archive
+       * feature and no `workspaceRegistry` remote, so the section keeps its plain
+       * label there instead of growing a control that can only ever show an empty
+       * list. `null` = not known yet.
+       */
+      var supported = null
+      var disposed = false
+      var retryTimer = null
+
+      function service(name) {
+        try { return ctx.get(name) } catch (error) { return undefined }
+      }
+
+      function findSection() {
+        var labels = document.querySelectorAll('[class*="sectionLabel"]')
+        var first = null
+        for (var i = 0; i < labels.length; i++) {
+          var text = (labels[i].textContent || '').trim()
+          if (first === null) first = labels[i]
+          for (var t = 0; t < LABEL_TEXTS.length; t++) {
+            if (text === LABEL_TEXTS[t]) return labels[i]
+          }
+        }
+        return first
+      }
+
+      /**
+       * The tree's rows. `data-row-key` is what 0.1.7 stamps on them, but the
+       * bundled 0.1.5 has no such attribute at all — matching only that made the
+       * whole section bail out on 0.1.5, control and all. The row CLASSES are
+       * stable across both, and the skin's own stylesheet already keys off them.
+       */
+      var TREE_ROW_SELECTOR = '[data-row-key], [class*="sessionRow"], [class*="projectRow"]'
+
+      function findTree(label) {
+        var region = label.parentElement
+        while (region !== null && region !== document.body) {
+          var tree = region.querySelector('[role="tree"], [class*="list"]')
+          if (tree !== null && tree.querySelector(TREE_ROW_SELECTOR) !== null) return tree
+          region = region.parentElement
+        }
+        return null
+      }
+
+      function relativeTime(at) {
+        if (typeof at !== 'number' || !isFinite(at)) return ''
+        var minutes = Math.floor((Date.now() - at) / 60000)
+        if (minutes < 1) return copyLabel('archiveJustNow', 'Just now')
+        if (minutes < 60) return copyLabel('archiveMinutes', '{count} min', { count: minutes })
+        var hours = Math.floor(minutes / 60)
+        if (hours < 24) return copyLabel('archiveHours', '{count} h', { count: hours })
+        return copyLabel('archiveDays', '{count} d', { count: Math.floor(hours / 24) })
+      }
+
+      /** Ids → `{ title, updatedAt }`, from the session list the shell already has. */
+      function titlesFor() {
+        var sessions = service('remote.session')
+        if (sessions === undefined || sessions === null || typeof sessions.list !== 'function') return Promise.resolve({})
+        return sessions.list({}).then(function (result) {
+          var map = {}
+          var rows = (result && result.ok === true && result.value && result.value.items) || []
+          for (var i = 0; i < rows.length; i++) {
+            var values = rows[i].projections && rows[i].projections.values
+            map[rows[i].sessionId] = { title: values ? values.title : null, updatedAt: rows[i].updatedAt }
+          }
+          return map
+        }).catch(function () { return {} })
+      }
+
+      function loadArchived(attempt) {
+        function retry() {
+          if (disposed || attempt >= 4) {
+            // No archive service answered: this host does not have one (0.1.5), so
+            // the section goes back to being a plain label.
+            supported = false
+            items = []
+            loading = false
+            renderList()
+            return
+          }
+          loading = true
+          renderList()
+          retryTimer = setTimeout(function () {
+            retryTimer = null
+            loadArchived(attempt + 1)
+          }, 600)
+        }
+        var registry = service('remote.workspaceRegistry')
+        if (registry === undefined || registry === null || typeof registry.archivedSessionMetadata !== 'function') {
+          retry()
+          return
+        }
+        loading = true
+        renderList()
+        registry.archivedSessionMetadata().then(function (result) {
+          if (!result || result.ok !== true) throw new Error('archived metadata unavailable')
+          var rows = (result.value && result.value.items) || []
+          supported = true
+          items = rows.map(function (row) { return { id: row.sessionId, title: null, at: row.createdAt } })
+          items.sort(function (a, b) { return (b.at || 0) - (a.at || 0) })
+          loading = false
+          renderList()
+          return fillTitles(0)
+        }).catch(function () { retry() })
+      }
+
+      /**
+       * Titles and times ride the session list, which the shell may still be
+       * loading when the registry answers — a row falls back to its id until they
+       * land, and a couple of re-reads fill them in. Bounded, and abandoned the
+       * moment the view is left or the fragment is torn down.
+       */
+      function fillTitles(attempt) {
+        return titlesFor().then(function (titles) {
+          if (items === null) return
+          var missing = false
+          for (var i = 0; i < items.length; i++) {
+            var meta = titles[items[i].id]
+            if (meta && meta.title) items[i].title = meta.title
+            if (meta && meta.updatedAt) items[i].at = meta.updatedAt
+            if (!items[i].title) missing = true
+          }
+          items.sort(function (a, b) { return (b.at || 0) - (a.at || 0) })
+          renderList()
+          if (!missing || attempt >= 4 || view !== 'archived' || disposed) return
+          return new Promise(function (resolve) {
+            retryTimer = setTimeout(resolve, 500)
+          }).then(function () {
+            retryTimer = null
+            if (disposed || view !== 'archived') return
+            return fillTitles(attempt + 1)
+          })
+        })
+      }
+
+      function openArchived(id) {
+        var sessions = service('sessions')
+        if (sessions !== undefined && sessions !== null && typeof sessions.open === 'function') sessions.open(id)
+      }
+
+      function removeArchived(id) {
+        var registry = service('remote.workspaceRegistry')
+        if (registry === undefined || registry === null || typeof registry.deleteSession !== 'function') return
+        registry.deleteSession(id).then(function (result) {
+          if (!result || result.ok !== true) return
+          if (items !== null) items = items.filter(function (row) { return row.id !== id })
+          renderList()
+        }).catch(function () { /* the row stays; the next read tells the truth */ })
+      }
+
+      /** Put a conversation back among the live ones; it leaves this list. */
+      function restoreArchived(id) {
+        var registry = service('remote.workspaceRegistry')
+        if (registry === undefined || registry === null || typeof registry.unarchiveSession !== 'function') return
+        registry.unarchiveSession(id).then(function (result) {
+          if (!result || result.ok !== true) return
+          if (items !== null) items = items.filter(function (row) { return row.id !== id })
+          renderList()
+          // The host's own tree has to be told to pick the conversation back up.
+          var sessions = service('sessions')
+          if (sessions !== undefined && sessions !== null && typeof sessions.refresh === 'function') sessions.refresh()
+        }).catch(function () { /* the row stays; the next read tells the truth */ })
+      }
+
+      /**
+       * One row action: the host's icon inside the host's tooltip when the loader
+       * gives us both, and the skin's own SVG plus a native title when it does not.
+       */
+      function actionButton(kind, label, fallbackSvg, onClick) {
+        var wrapper = modelEl('span', 'dsh-claude-archive-action')
+        var className = kind === 'restore' ? 'dsh-claude-archive-restore' : 'dsh-claude-archive-delete'
+        var Icon = primitives === null ? null : (kind === 'restore' ? primitives.IconUnarchiveOutlineRegular : primitives.IconTrashOutlineRegular)
+        if (react !== null && reactDom !== null && primitives !== null && primitives.Tooltip && Icon) {
+          var root = reactDom.createRoot(wrapper)
+          actionRoots.push(root)
+          root.render(react.createElement(primitives.Tooltip, { label: label, side: 'top', delayMs: 500 },
+            react.createElement('button', { type: 'button', className: className, 'aria-label': label, title: label, onClick: onClick },
+              react.createElement(Icon, { size: 14 }))))
+          return wrapper
+        }
+        var button = modelEl('button', className)
+        button.type = 'button'
+        button.setAttribute('aria-label', label)
+        button.setAttribute('title', label)
+        button.innerHTML = fallbackSvg
+        button.addEventListener('click', onClick)
+        wrapper.appendChild(button)
+        return wrapper
+      }
+
+      function buildArchivedRow(item) {
+        var row = modelEl('div', 'dsh-claude-archive-row')
+        row.setAttribute('role', 'button')
+        row.setAttribute('tabindex', '0')
+        row.setAttribute('data-session-id', item.id)
+        row.appendChild(modelEl('span', 'dsh-claude-archive-title', item.title || copyLabel('archiveUntitled', 'Untitled conversation')))
+        row.appendChild(modelEl('span', 'dsh-claude-archive-time', relativeTime(item.at)))
+        // The host's archived rows offer an unarchive action; the skin's list
+        // carries the same pair, so leaving the archived view is not the only way
+        // back to a conversation.
+        row.appendChild(actionButton('restore', copyLabel('archiveRestore', 'Unarchive conversation'), RESTORE_SVG, function (event) {
+          event.stopPropagation()
+          restoreArchived(item.id)
+        }))
+        row.appendChild(actionButton('delete', copyLabel('archiveDelete', 'Delete conversation'), DELETE_SVG, function (event) {
+          event.stopPropagation()
+          removeArchived(item.id)
+        }))
+        row.addEventListener('click', function () { openArchived(item.id) })
+        return row
+      }
+
+      function renderList() {
+        if (listHost === null) return
+        // The actions live in React roots; drop them before the rows go, or every
+        // rebuild would leave a tree behind.
+        for (var r = 0; r < actionRoots.length; r++) {
+          try { actionRoots[r].unmount() } catch (error) { /* already gone */ }
+        }
+        actionRoots = []
+        while (listHost.firstChild) listHost.removeChild(listHost.firstChild)
+        if (loading) {
+          listHost.appendChild(modelEl('div', 'dsh-claude-archive-status', copyLabel('archiveLoading', 'Loading…')))
+          return
+        }
+        if (items === null) return
+        if (items.length === 0) {
+          listHost.appendChild(modelEl('div', 'dsh-claude-archive-status', copyLabel('archiveEmpty', 'No archived conversations')))
+          return
+        }
+        for (var i = 0; i < items.length; i++) listHost.appendChild(buildArchivedRow(items[i]))
+      }
+
+      function buildControl() {
+        var group = modelEl('div', 'dsh-claude-ws-segments')
+        group.setAttribute('role', 'radiogroup')
+        for (var i = 0; i < SEGMENTS.length; i++) {
+          var item = modelEl('button', 'dsh-claude-ws-segment', '')
+          item.type = 'button'
+          item.setAttribute('role', 'radio')
+          item.setAttribute('data-view', SEGMENTS[i].id)
+          group.appendChild(item)
+        }
+        group.addEventListener('click', function (event) {
+          var target = event.target
+          var item = target !== null && typeof target.closest === 'function' ? target.closest('.dsh-claude-ws-segment') : null
+          if (item === null) return
+          event.stopPropagation()
+          event.preventDefault()
+          setView(item.getAttribute('data-view'))
+        })
+        return group
+      }
+
+      function setView(next) {
+        if (next !== 'active' && next !== 'archived') return
+        if (next === view) return
+        view = next
+        if (view === 'archived' && items === null && !loading) loadArchived(0)
+        sync()
+      }
+
+      function sync() {
+        var label = findSection()
+        if (label === null || label.parentElement === null) return
+        var header = label.parentElement
+        // Find out whether this host archives at all, once, on the first pass —
+        // the answer decides whether the section keeps its label.
+        if (supported === null && !loading) loadArchived(0)
+        if (supported !== true) {
+          if (control !== null) {
+            if (control.parentElement !== null) control.parentElement.removeChild(control)
+            control = null
+          }
+          if (listHost !== null) {
+            if (listHost.parentElement !== null) listHost.parentElement.removeChild(listHost)
+            listHost = null
+          }
+          if (markedLabel !== null) {
+            markedLabel.removeAttribute(LABEL_ATTR)
+            markedLabel = null
+          }
+          return
+        }
+        if (markedLabel !== label) {
+          if (markedLabel !== null) markedLabel.removeAttribute(LABEL_ATTR)
+          markedLabel = label
+          label.setAttribute(LABEL_ATTR, '')
+        }
+        if (control === null || control.parentElement !== header) {
+          if (control !== null && control.parentElement !== null) control.parentElement.removeChild(control)
+          control = buildControl()
+          header.insertBefore(control, header.firstChild)
+        }
+        for (var i = 0; i < control.children.length; i++) {
+          var item = control.children[i]
+          var id = item.getAttribute('data-view')
+          for (var s = 0; s < SEGMENTS.length; s++) {
+            if (SEGMENTS[s].id !== id) continue
+            var text = copyLabel(SEGMENTS[s].key, SEGMENTS[s].fallback)
+            if (item.textContent !== text) item.textContent = text
+          }
+          var on = id === view
+          if (item.getAttribute('aria-checked') !== (on ? 'true' : 'false')) item.setAttribute('aria-checked', on ? 'true' : 'false')
+        }
+        var tree = findTree(label)
+        if (tree === null) return
+        if (markedTree !== tree) {
+          if (markedTree !== null) markedTree.removeAttribute(TREE_ATTR)
+          markedTree = tree
+          tree.setAttribute(TREE_ATTR, '')
+        }
+        var host = tree.parentElement
+        if (host === null) return
+        if (listHost === null || listHost.parentElement !== host) {
+          if (listHost !== null && listHost.parentElement !== null) listHost.parentElement.removeChild(listHost)
+          listHost = modelEl('div', 'dsh-claude-archive-list')
+          host.insertBefore(listHost, tree.nextSibling)
+          renderList()
+        }
+        // The sidebar re-renders its own way: when React replaces the container
+        // that held the list, the old copy can stay in the document while a new
+        // one is built elsewhere. Sweep every copy but the live one, the same way
+        // the stats popover sweeps its strays.
+        var strays = document.querySelectorAll('.dsh-claude-archive-list')
+        for (var k = 0; k < strays.length; k++) {
+          if (strays[k] === listHost) continue
+          if (strays[k].parentElement !== null) strays[k].parentElement.removeChild(strays[k])
+        }
+        if (host.getAttribute(VIEW_ATTR) !== view) host.setAttribute(VIEW_ATTR, view)
+      }
+
+      ui.workspace = { sync: sync }
+
+      return function () {
+        disposed = true
+        for (var r = 0; r < actionRoots.length; r++) {
+          try { actionRoots[r].unmount() } catch (error) { /* already gone */ }
+        }
+        actionRoots = []
+        if (retryTimer !== null) {
+          clearTimeout(retryTimer)
+          retryTimer = null
+        }
+        if (control !== null && control.parentElement !== null) control.parentElement.removeChild(control)
+        if (listHost !== null && listHost.parentElement !== null) listHost.parentElement.removeChild(listHost)
+        if (markedLabel !== null) markedLabel.removeAttribute(LABEL_ATTR)
+        if (markedTree !== null) markedTree.removeAttribute(TREE_ATTR)
+        control = null
+        listHost = null
+        markedLabel = null
+        markedTree = null
+        delete ui.workspace
+      }
+    }
+
     function installScheduler(ctx, ui) {
       function onGlobalPointerDown(e) {
         var target = e.target
@@ -7339,6 +9704,28 @@ 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()
+        // The hero menu has no close of its own — it lives and dies with the
+        // host's hover state, and syncHeroMenu notices when it is gone — so the
+        // call is guarded like closeStats above. Unguarded it threw a TypeError
+        // on every composer focus-in, which also aborted the rest of this
+        // handler for that event.
+        if (ui.heroMenu && ui.heroMenu.close) ui.heroMenu.close()
+        if (ui.quickProviders) ui.quickProviders.close()
+      }
+
       function onComposerInput(e) {
         var target = e.target
         if (!target) return
@@ -7352,12 +9739,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,7 +9818,9 @@ 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.workspace) ui.workspace.sync()
           if (ui.settings) ui.settings.sync()
           // Covers the rail toggle (and any reflow) while the popover is open:
           // its anchor moved without a window resize or a page scroll.
@@ -7497,6 +9888,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]')
@@ -7516,11 +9908,15 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * The settings page section, mounted by the host into the `settings.section`
-     * slot. That slot hands a section only `{ close }` plus the standard hooks,
-     * so this component owns no store of its own: it reads and writes the skin
-     * preferences through src/context/prefs.js, which owns the host round trip, and
-     * follows changes the same way the rest of the skin does.
+     * The skin's settings page, mounted by whichever seat this host has.
+     *
+     * 0.1.7 moved a bundle's own configuration onto its plugin page, so there
+     * the rows register as a `plugins.bundle.config` entry keyed by the package
+     * name. Older hosts have no such slot and keep the full-page
+     * `settings.section` entry. Both render the same component, and neither
+     * seat hands it a store: it reads and writes the skin preferences through
+     * src/context/prefs.js, which owns the host round trip, and follows changes
+     * the same way the rest of the skin does.
      *
      * Copy comes from the model copy document's `settings` block, so the page
      * follows the shell language like every other string the skin paints. The
@@ -7530,7 +9926,14 @@ 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.
      */
-    function ClaudeStyleSettingsSection() {
+    /**
+     * 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(props) {
       var state = React.useState(readPrefs())
       var prefs = state[0]
       var setPrefs = state[1]
@@ -7541,6 +9944,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 +10073,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 +10130,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 +10139,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'),
@@ -7736,14 +10173,35 @@ window.__ModuleLoader__.load({
         rows.push(React.createElement('div', { className: 'dsh-claude-settings-error', key: 'error' }, error))
       }
 
+      // The plugin page already heads the form with the bundle's own title and
+      // description, so the embedded rendering drops the skin's title rather
+      // than printing it twice.
+      var embedded = !!(props && props.embed)
       return React.createElement(
         'div',
-        { className: 'dsh-claude-settings' },
-        React.createElement('div', { className: 'dsh-claude-settings-title' }, settingsCopy('title', 'Claude Style')),
+        { className: embedded ? 'dsh-claude-settings dsh-claude-settings-embedded' : 'dsh-claude-settings' },
+        embedded ? null : React.createElement('div', { className: 'dsh-claude-settings-title' }, settingsCopy('title', 'Claude Style')),
         rows,
       )
     }
 
+    /**
+     * The plugin page's configuration entry (0.1.7+).
+     *
+     * A `plugins.bundle.config` entry is asked for two views: `summary` is the
+     * one-liner on the bundle's card, `page` is the form itself. The host does
+     * not hand this seat a form — the entry is keyed to the package, not to a
+     * namespace — so the rows read and write through src/context/prefs.js like
+     * every other surface in the skin, which is where the official form is
+     * bound.
+     */
+    function ClaudeStyleBundleConfig(props) {
+      if (props && props.view === 'summary') {
+        return React.createElement('span', null, settingsCopy('title', 'Claude Style'))
+      }
+      return React.createElement(ClaudeStyleSettingsSection, { embed: true })
+    }
+
     /**
      * Register the settings section.
      *
@@ -7780,20 +10238,49 @@ window.__ModuleLoader__.load({
 
     function installSettingsSection(ctx, ui) {
       loadModelCopy()
+      // The settings services are up by now even when they were not at apply
+      // time, so retry the official-form binding before choosing a seat. It is
+      // idempotent: a host without `configForms` keeps the plugin's own route.
+      adoptSettingsForm(ctx)
       if (ui) {
         ui.settings = {
           sync: syncSettingsNav,
         }
+        quickProviderApi = ui.quickProviders || null
       }
       if (typeof ctx.inject !== 'function') return function () {}
       var fiber = ctx.inject(['slots'], function (scope) {
         var slots = scope.get('slots')
         if (slots === void 0 || slots === null || typeof slots.inject !== 'function') return
+        // 0.1.7 keeps a bundle's own configuration on the plugin's page: the
+        // entry is keyed by the bundle's package name and rendered there —
+        // `view: 'page'` for the form, `view: 'summary'` for the card's
+        // one-liner. The slot is declared by that host's plugin manager, so this
+        // registration is a no-op on an older host.
+        scope.effect(function () {
+          return slots.inject(BUNDLE_CONFIG_SLOT, function () {
+            return slots.register(
+              {
+                name: BUNDLE_CONFIG_SLOT,
+                key: PACKAGE_NAME,
+                label: function () { return settingsCopy('title', 'Claude Style') },
+              },
+              ClaudeStyleBundleConfig,
+            )
+          })
+        }, 'dsh-claude-style: plugin page')
+        // The full-page section is the older host's seat. 0.1.7 still declares
+        // the slot, but there the skin's settings live on its plugin page — and
+        // a host that serves `configForms` is by definition the newer one, so
+        // that check tells the two apart without a version probe. (The settings
+        // shell cannot have declared this slot before `configForms` mounted: it
+        // injects the service itself.)
         scope.effect(function () {
-          return slots.inject('settings.section', function () {
+          return slots.inject(SETTINGS_SECTION_SLOT, function () {
+            if (hostConfigForms(ctx) !== null) return function () {}
             return slots.register(
               {
-                name: 'settings.section',
+                name: SETTINGS_SECTION_SLOT,
                 id: 'claude-style',
                 order: 22,
                 // A function, so the navigation entry localizes once the copy
@@ -7809,6 +10296,7 @@ window.__ModuleLoader__.load({
         if (ui && ui.settings) {
           delete ui.settings
         }
+        quickProviderApi = null
         try {
           if (fiber && typeof fiber.dispose === 'function') fiber.dispose()
         } catch (error) {
@@ -7821,6 +10309,10 @@ window.__ModuleLoader__.load({
       var body = document.body
       body.setAttribute('data-dsh-claude-style', '')
       setHostContext(ctx)
+      // Bind the official settings form before anything reads a preference:
+      // 0.1.7+ serves namespaces through `ctx.configForms`, and a host without
+      // it keeps the plugin's own route. The choice is made once, here.
+      adoptSettingsForm(ctx)
       loadModelCopy()
       loadUsername()
       // Preferences are read asynchronously from the host settings namespace;
@@ -7844,9 +10336,12 @@ 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()) // 主题翻转瞬间抑制过渡，修掉「先色后样」
+      teardowns.push(installWorkspaceView(ctx, ui)) // 侧栏工作区：进行中 / 已归档 分段 + 归档行删除
       var stopSettings = installSettingsSection(ctx, ui)
       teardowns.push(installScheduler(ctx, ui)) // 最后装，回调中惰性读 ui 句柄