dsh-model-flatmap 1.0.2 → 1.1.0

package/client.js

@@ -54,6 +54,31 @@ window.__ModuleLoader__.load({
 .dshmf-trigger:disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
 .dshmf-triggerIcon { display: var(--dsh-composer-model-icon-display, none); flex: 0 0 auto; }
 .dshmf-triggerText { display: var(--dsh-composer-model-text-display, block); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The trigger's label cell, whatever fills it: the shipped picker's own label
+   slot (a provider's chip, its rate, its load mark) or this plugin's fallback.
+   An inline-flex box keeps a chip on the text baseline instead of riding high,
+   and a full-width cap lets the occupant ellipsise inside the trigger rather
+   than widening it. */
+.dshmf-triggerLabel { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; vertical-align: baseline; }
+/* Fallback chip, matching the shipped Tag's geometry (11/17, 1px 8px, 999px)
+   so a model the catalog badges looks the same whether a label occupant drew
+   it or this plugin did. */
+.dshmf-triggerBadge {
+  flex: none; display: inline-flex; align-items: center; padding: 1px 8px;
+  border-radius: 999px; corner-shape: round;
+  font-size: 11px; line-height: 17px; font-weight: 500; white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-secondary);
+}
+.dshmf-triggerBadge[data-tone="info"] { background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent); color: var(--dsw-alias-state-business-primary); }
+.dshmf-triggerBadge[data-tone="success"] { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent); color: var(--dsw-alias-state-success-primary); }
+.dshmf-triggerBadge[data-tone="warning"] { background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent); color: var(--dsw-alias-state-warn-primary); }
+.dshmf-triggerBadge[data-tone="danger"] { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); color: var(--dsw-alias-state-error-primary); }
+.dshmf-triggerBadge[data-tone="solid"] { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-layer-3); }
+.dshmf-triggerBadge[data-tone="outline"] { border: 0.5px solid var(--dsw-alias-border-l4); color: var(--dsw-alias-label-tertiary); }
+.dshmf-triggerBadge[data-tone="quiet"] { background: transparent; color: var(--dsw-alias-label-tertiary); }
+/* A model name inside the label cell: ellipsised like the shipped trigger's,
+   so a long name truncates instead of pushing the chevron out. */
+.dshmf-triggerName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dshmf-triggerEffort { flex-shrink: 1000; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-caption); }
 .dshmf-chevron { flex: 0 0 auto; color: var(--dsw-alias-label-caption); transition: transform 120ms ease; }
 .dshmf-chevronOpen { transform: rotate(180deg); }
@@ -169,9 +194,10 @@ html[data-ds-dark-theme] .dshmf-panel { border-color: #6B7280; }
    stay borderless, so the dense flow across columns is kept (see DEC-003,
    DEC-005). */
 .dshmf-groupTitle {
-  align-self: flex-start; max-width: 100%;
+  align-self: flex-start; max-width: 100%; min-width: 0;
   box-sizing: border-box; height: 20px; padding: 0 8px 0 6px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: flex; align-items: center;
+  overflow: hidden; white-space: nowrap;
   border: 1px solid var(--dsw-alias-border-l2);
   border-left: 3px solid var(--dsw-alias-border-l3);
   border-radius: var(--dsw-radius-xs);
@@ -180,6 +206,20 @@ html[data-ds-dark-theme] .dshmf-panel { border-color: #6B7280; }
   color: var(--dsw-alias-label-primary);
   font-size: 10px; line-height: 18px; font-weight: 700; letter-spacing: .02em;
 }
+/* The label gets the SAME window/track split as a model row (DEC-021): the
+   band is the frame, and the text inside it is a clipped window holding a
+   track that can be wider than the window. That is what lets a long heading
+   ("ModelScope Token Plan") run the same one-pass hover marquee as a long
+   model name, while the band's frame, fill and shadow stay put (DEC-023). */
+.dshmf-groupTitleWindow {
+  flex: 1 1 auto; min-width: 0; display: block;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.dshmf-groupTitleTrack { width: max-content; max-width: none; white-space: nowrap; }
+.dshmf-groupTitleTrack[data-running="true"] {
+  display: inline-block;
+  animation: dshmf-rowNameMarquee var(--dshmf-marquee-duration, 3000ms) ease-in-out 1 forwards;
+}
 .dshmf-row {
   box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%;
   height: 26px; padding: 0 6px; border: 0; border-radius: var(--dsw-radius-sm);
@@ -209,9 +249,42 @@ html[data-ds-dark-theme] .dshmf-panel { border-color: #6B7280; }
   background: color-mix(in srgb, var(--dsw-static-neutral-bluish-00) 22%, transparent);
   color: inherit;
 }
-.dshmf-rowName { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshmf-rowNameWindow {
+  flex: 1 1 auto; min-width: 0; display: block;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* The name itself never ellipsises on its own: the window clips it, and the
+   track is what slides when the pointer rests on a truncated row (DEC-021).
+   width: max-content is what lets the track be wider than the window, which is
+   both the overflow signal (scrollWidth) and what the marquee reveals. */
+.dshmf-rowName {
+  width: max-content; max-width: none;
+  white-space: nowrap;
+}
+/* Resting the pointer on a row whose name does not fit starts ONE marquee
+   pass: the name glides left until its last glyph reaches the window, then
+   STOPS there. The easing is ease-in-out, so the start and the arrival are
+   soft rather than a constant crawl. Only the name TRACK moves — the window
+   clips it, so the right-aligned badge (限时免费, ×0.1) and the pending
+   spinner, which sit as siblings AFTER the window, never shift. There is no
+   return trip and no iteration: fill-mode forwards holds the end state, and
+   leaving the row drops the animation entirely, which snaps back with no
+   transition. */
+@keyframes dshmf-rowNameMarquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(var(--dshmf-marquee-shift)); }
+}
+.dshmf-rowNameTrack[data-running="true"] {
+  display: inline-block;
+  animation: dshmf-rowNameMarquee var(--dshmf-marquee-duration, 3000ms) ease-in-out 1 forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dshmf-rowNameTrack[data-running="true"],
+  .dshmf-groupTitleTrack[data-running="true"] { animation: none; }
+}
 /* The model's last call failed on insufficient balance / credit / quota, and no
-   later call for the same model has cleared it. The row text is struck through
+   later call for the same model has cleared it, nor has the mark aged past
+   STRIKE_TTL (24h) without a fresh attempt. The row text is struck through
    rather than recoloured: the strike survives both themes and the selected
    row's blue band, and it does not compete with the error strip's own red.
    The decoration is applied to the row's text only (name + variant tag), not
@@ -227,17 +300,25 @@ html[data-ds-dark-theme] .dshmf-panel { border-color: #6B7280; }
    multiplier reads as an aside without disturbing the row's text rhythm
    (see renderRow's nameRuns). */
 .dshmf-rowNameMark { font-size: 11px; line-height: 18px; font-weight: 700; letter-spacing: normal; }
-/* Secondary text in a family-grouped row. The primary text is the provider,
-   so this is only a short variant tail shown when one provider offers several
-   models in the same family. Quieter than the primary text (caption colour,
-   11px) and shrinks before it does. No width cap: a cap truncates a perfectly
-   readable label ("CodeBuddy …") in a column that had room for it. */
+/* The model-specific tail of a family-grouped row, e.g. "3.8-Flash-Next",
+   "V4.1-Flash · x0.01", "2.1 Turbo". The primary text is the provider and the
+   heading names the family, so this is what is LEFT after both are removed —
+   the型号 and the multiplier the heading cannot carry (DEC-023). It sits at
+   the END of the row and is quieter than the primary text (caption colour,
+   11px), shrinks before it, and never wraps. No width cap: a cap truncates a
+   perfectly readable label ("CodeBuddy …") in a column that had room for it. */
 .dshmf-rowProvider {
   flex: 0 1 auto; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   color: var(--dsw-alias-label-caption);
   font-size: 11px; line-height: 16px; font-weight: 400;
 }
+/* A multiplier inside that tail ("x0.01") keeps the same "smaller and bolder"
+   treatment it gets inside a model name in *By provider* (see
+   .dshmf-rowNameMark and renderRow's nameRuns), so the rate reads identically
+   in both grouping modes. The base rule already makes it bold and 11px; inside
+   the 11px tail it steps down once more, to 10px, to stay visibly apart. */
+.dshmf-rowProvider .dshmf-rowNameMark { font-size: 10px; line-height: 16px; }
 .dshmf-rowTail { display: grid; place-items: center; flex: 0 0 14px; color: inherit; }
 
 /* Catalog badge (for example a third-party rate multiplier). Rendered only
@@ -278,6 +359,66 @@ html[data-ds-dark-theme] .dshmf-panel { border-color: #6B7280; }
 body[data-ds-dark-theme] .dshmf-footer,
 html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
 
+/* Display-mode button: the footer's trailing member, pinned to the panel's
+   bottom-right by an auto left margin. Drawn with the panel's own segment
+   recipe (toned track, 2px inset, radius-xs) so it reads as the same design
+   system as the header grouping control and the reasoning levels, and so the
+   pressed state is unmistakable in both themes. The auto margin also survives
+   the wrap case: alone on its line it still sits right. */
+.dshmf-modeBtn {
+  flex: 0 0 auto; margin-left: auto;
+  height: 22px; padding: 0 8px; border: 0; border-radius: var(--dsw-radius-xs);
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+  font-family: inherit; font-size: 11px; line-height: 16px; font-weight: 400;
+  white-space: nowrap; cursor: pointer;
+  transition: color 120ms ease, background 120ms ease;
+}
+@media (hover: hover) { .dshmf-modeBtn:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--dsw-alias-label-primary); } }
+.dshmf-modeBtn[aria-pressed="true"] {
+  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary);
+  box-shadow: var(--dsw-elevation-soft); font-weight: 500;
+}
+.dshmf-modeBtn:disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
+.dshmf-modeBtn:focus-visible { outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: -2px; }
+
+/* The bottom action that brings the panel back from native mode. It occupies
+   the HOST picker's own root-menu slot (conversation.input.model.options), which
+   renders its occupants after the Model / Effort rows. The slot hands us a bare
+   display: contents anchor, so the box below is entirely ours to draw: it is
+   deliberately NOT a menu-row clone. A row in this menu means "one of a set of
+   values, pick one" — this control does something else, so it separates itself
+   with a rule above and presents as a compact, out-lined push button.
+   The band spans the FULL row width (the menu already pads 4px, and a row's
+   hover fill spans that same width), so it carries no horizontal padding of its
+   own: the button's edges line up with the rows above it instead of sitting a
+   few pixels inside them. */
+.dshmf-modeAction {
+  box-sizing: border-box; display: flex; align-items: center;
+  width: auto; min-width: 100%; margin-top: 2px; padding: 7px 0 1px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+.dshmf-modeBtnRow {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
+  gap: 6px; width: 100%; height: 30px; padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l3); border-radius: var(--dsw-radius-sm);
+  outline: none; background: transparent; color: var(--dsw-alias-label-primary);
+  font-family: inherit; font-size: 12px; line-height: 18px; font-weight: 500;
+  white-space: nowrap; cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.dshmf-modeBtnRowIcon { flex: 0 0 auto; color: var(--dsw-alias-label-secondary); }
+.dshmf-modeBtnRowLabel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.dshmf-modeBtnRow:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+}
+@media (hover: hover) {
+  .dshmf-modeBtnRow:hover {
+    background: var(--dsw-alias-interactive-bg-hover);
+    border-color: var(--dsw-alias-border-l4);
+  }
+}
+
 /* Reasoning levels: a caption and a multi-segmentation control on one line;
    the track wraps below the caption only when the row cannot fit. The
    segment visual mirrors the header's grouping control, so the panel has
@@ -383,11 +524,64 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     const ROW_GAP = 2
     const BALANCE_THRESHOLD = 24
 
+    /**
+     * The band a re-measurement must leave before it counts as a real layout
+     * change (DEC-026). Two physical pixels: smaller than anything the column
+     * plan acts on (its smallest unit is a 26px row), larger than the
+     * scrollbar / flex-wrap jitter that would otherwise re-plan the panel from
+     * its own output.
+     */
+    const METRIC_HYSTERESIS = 2
+
+    /**
+     * The height quantum a measurement is snapped to (DEC-026).
+     *
+     * `getBoundingClientRect().height` and `offsetHeight` are physical pixels:
+     * a web font swapping in, a scrollbar appearing, or a flex container
+     * re-rounding can move them by a fraction of a pixel between two frames
+     * that render the same visual layout. Because the measured value feeds back
+     * into the panel's own column plan, taking such noise literally makes the
+     * panel oscillate. Half a pixel is below anything the layout acts on
+     * (the smallest thing it decides is a 26px row), so snapping both the
+     * comparison and the stored value to it absorbs the noise while keeping
+     * every real change — a wrapped footer, a shown error strip.
+     * @param {number} value - a raw measured height in px.
+     * @returns {number} the height snapped to the nearest half pixel.
+     */
+    const quantizeMetric = value => {
+      const numeric = Number(value)
+      if (!Number.isFinite(numeric) || numeric <= 0) return 0
+      return Math.round(numeric * 2) / 2
+    }
+
+    /**
+     * Is a new measurement meaningfully different from the stored one (DEC-026)?
+     *
+     * Measurement feeds the panel's own column plan, and the plan feeds the
+     * panel's layout, so this comparison is the loop's control point: it must
+     * answer "no" for anything that is not a real change. A 2px band absorbs
+     * the one thing quantization cannot — the footer's CSS flex wrapping
+     * flipping back and forth across a scrollbar boundary, which moves the
+     * measured block by a couple of pixels in either direction but draws the
+     * same panel. Real transitions (a footer wrapping at all, an error strip
+     * appearing) move the value far outside the band.
+     * @param {number} previous - the stored measurement.
+     * @param {number} next - the freshly measured one.
+     * @returns {boolean} true when the difference is worth a re-plan.
+     */
+    const metricChanged = (previous, next) => {
+      if (previous === next) return false
+      return Math.abs(next - previous) >= METRIC_HYSTERESIS
+    }
+
     const PATH_CHEVRON = 'M3.2 5.6 7 9.4 10.8 5.6'
     const PATH_CLOSE = 'M4 4 10 10M10 4 4 10'
     const PATH_INFO = 'M7 6.4v4.1M7 3.7v.8'
     const PATH_SPARK = 'M7 1.6 8.3 5.7 12.4 7 8.3 8.3 7 12.4 5.7 8.3 1.6 7 5.7 5.7 7 1.6Z'
     const PATH_MODELS = 'M7 2.1 11.9 4.7 7 7.3 2.1 4.7 7 2.1Zm-4.9 5.1L7 9.8l4.9-2.6M2.1 10.3 7 12.9l4.9-2.6'
+    /* Four tiles: the flat panel this control returns to, so the icon names the
+       DESTINATION rather than repeating the model glyph above it. */
+    const PATH_GRID = 'M2.4 2.4h3.6v3.6H2.4zM8 2.4h3.6v3.6H8zM2.4 8h3.6v3.6H2.4zM8 8h3.6v3.6H8z'
 
     function svg(path, size, extra) {
       return h('svg', {
@@ -408,6 +602,26 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       return template.replace(/\{(\w+)\}/g, (_, name) => String(values[name] ?? ''))
     }
 
+    /**
+     * A provider's display label, resolved from the catalog's own name.
+     *
+     * Extracted so the trigger's label seat and the panel's group headings
+     * cannot drift: both hand the label slot the same `provider.name`, and a
+     * heading that said "豆包(doubao)" while the trigger said "Doubao" would be
+     * two spellings of one provider on one screen.
+     * @param {{id: string, name: unknown}} group - one provider entry.
+     * @param {Function} t - the panel's own translate seat.
+     * @param {Function|undefined} resolveText - the host's catalog-text resolver.
+     * @returns {string} a display-ready label; never empty.
+     */
+    function providerLabel(group, t, resolveText) {
+      if (group.id === 'deepseek-account') return t('provider.account')
+      const resolved = resolveText === undefined ? undefined : resolveText(group.name)
+      if (typeof resolved === 'string' && resolved.trim() !== '') return resolved
+      const fallback = fallbackText(group.name)
+      return fallback.trim() === '' ? group.id : fallback
+    }
+
     /**
      * Split a raw query into lowercase search tokens. Whitespace separates
      * tokens, so `mod inte` asks for `mod` AND `inte` rather than for that
@@ -493,6 +707,15 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     // The wording pass is deliberately narrow: a bare "402"/"429" only counts
     // when it reads as the leading status, never as a number inside another
     // message, and every example below is taken from a real recorded session.
+    //
+    // A strike also EXPIRES. Every record keeps the wall-clock moment the
+    // observation was made, which is what lets the panel tell "this model is out
+    // of balance" apart from "this model has not been tried since that verdict".
+    // Quotas reset daily and balances get topped up, so a strike that nobody
+    // refreshed stops being drawn after STRIKE_TTL; a retry that fails again
+    // re-stamps the record and restarts the window, and a retry that answers
+    // clears it outright. The window is therefore always "24h since the newest
+    // thing we learned about this route", not "24h since the row was drawn".
     // ---------------------------------------------------------------------
 
     /** Failure codes that mean "this account has no usable balance left". */
@@ -593,13 +816,18 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
      * Wall-clock time one durable event was recorded at. The Client feed keeps
      * the Host's `time` (`Date.now()` at append), which is what lets marks
      * gathered from DIFFERENT Sessions be ordered against each other — a Session
-     * feed has no cross-Session sequence number.
+     * feed has no cross-Session sequence number — and it is the same clock the
+     * strike lifetime is measured against.
+     *
+     * An event with no stamp is an observation made NOW, not one made at the
+     * epoch: folding it as `0` would file a fact we just learned as 56 years old
+     * and a strike could never be drawn for it.
      * @param {unknown} event - one durable Session event.
-     * @returns {number} the event time, or 0 when the feed carried none.
+     * @returns {number} the event time, or the current time when the feed carried none.
      */
     function eventTimeOf(event) {
       const time = event?.time
-      return typeof time === 'number' && Number.isFinite(time) ? time : 0
+      return typeof time === 'number' && Number.isFinite(time) ? time : Date.now()
     }
 
     /**
@@ -922,22 +1150,86 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     }
 
     /**
-     * The distinguishing part of one model for a family-grouped row: the id's
-     * variant tail first, then any catalog-name words that are not just the
-     * family heading or a bare version number. Returns '' when the model adds
-     * nothing beyond what the family heading already says.
+     * Separators a strip leaves dangling at either end of a tail. `·` is the
+     * catalog's own "name · multiplier" separator (`Hy4 · x0.00`).
+     */
+    const TAIL_EDGE = /^[\s·・.,:;|/\\_-]+|[\s·・.,:;|/\\_-]+$/g
+
+    /**
+     * Remove every occurrence of a family heading from a text, as a SUBSTRING.
+     *
+     * A family is glued to its version tail in real ids and names — `Qwen3.8-…`,
+     * `Deepseek-V4.1-…`, `MiniMax-M3` — so a whole-word match would miss the
+     * very case this exists for. The gap left behind becomes a space, so
+     * removing a prefix never glues two words together.
+     * @param {string} text - the model name.
+     * @param {string} needle - the family heading.
+     * @returns {string} the text with the heading removed.
+     */
+    function dropSubstring(text, needle) {
+      const lower = needle.toLowerCase()
+      if (lower.length < 2) return text
+      let out = text
+      for (;;) {
+        const at = out.toLowerCase().indexOf(lower)
+        if (at === -1) return out
+        out = `${out.slice(0, at)} ${out.slice(at + lower.length)}`
+      }
+    }
+
+    /**
+     * Remove whole words from a text (case-insensitive).
+     *
+     * Used for the provider's own label, which is the row's PRIMARY text — so a
+     * tail that repeats it would print the same word twice. Whole-word matching
+     * is what keeps a short token from punching a hole in an unrelated word
+     * (provider `AI` must not turn `Rain` into `Rn`). Word edges are any
+     * non-letter/digit, so the CJK provider label `豆包` still matches inside
+     * `豆包 2.1 Turbo`.
+     * @param {string} text - the model name.
+     * @param {string[]} words - provider label words; each needs 2+ characters.
+     * @returns {string} the text with those words removed.
+     */
+    function dropWords(text, words) {
+      let out = text
+      for (const word of words) {
+        if (word.length < 2) continue
+        const escaped = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        out = out.replace(
+          new RegExp(`(?<![\\p{L}\\p{N}])${escaped}(?![\\p{L}\\p{N}])`, 'giu'),
+          ' ',
+        )
+      }
+      return out
+    }
+
+    /**
+     * The model-specific part of a family-grouped row: the model name with the
+     * family heading and the provider's own label removed, so only what the
+     * heading does NOT already say is left.
+     *
+     * `Qwen3.8-Flash-Next` under `Qwen` → `3.8-Flash-Next`, `Qwen3.8-27B` →
+     * `3.8-27B`; `Deepseek-V4.1-Flash · x0.00` under `DeepSeek` →
+     * `V4.1-Flash · x0.00`; `豆包 2.1 Turbo` under provider `豆包(doubao)` →
+     * `2.1 Turbo`. Version numbers are KEPT — they are the型号 the heading
+     * lacks, unlike the id-derived tail that drops them.
+     *
+     * When the name adds nothing (`Hy4` under `HY4`), the id tail is used so a
+     * variant like `hy4free` still reads `free`. An empty result is valid: the
+     * row then draws no tail at all.
      * @param {{id: string, name: string}} model - catalog entry.
      * @param {string} family - the resolved family heading.
-     * @returns {string} a short, non-family supplement; possibly ''.
-     */
-    function rowVariantOf(model, family) {
-      const fromId = idVariantOf(model, family)
-      if (fromId !== '') return fromId
-      const familyWords = new Set(family.toLowerCase().split(/[\s-]+/).filter(Boolean))
-      return String(model.name ?? '').split(/[\s._-]+/).filter(word => {
-        const lower = word.toLowerCase()
-        return word !== '' && !familyWords.has(lower) && !/^\d+(\.\d+)?$/.test(lower)
-      }).join(' ')
+     * @param {string} [providerLabel] - the row's primary text; stripped when it repeats.
+     * @returns {string} the model-specific supplement; possibly ''.
+     */
+    function rowVariantOf(model, family, providerLabel = '') {
+      const name = String(model.name ?? '')
+      const providerWords = String(providerLabel).split(/[^\p{L}\p{N}]+/u).filter(Boolean)
+      const tail = dropWords(dropSubstring(name, family), providerWords)
+        .replace(/\s+/g, ' ')
+        .replace(TAIL_EDGE, '')
+      if (tail !== '') return tail
+      return idVariantOf(model, family)
     }
 
     // ---------------------------------------------------------------------
@@ -1087,6 +1379,120 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       }
     }
 
+    // ---------------------------------------------------------------------
+    // Display mode — `flat` (this panel) or `native` (the Host's own picker).
+    //
+    // The panel can hand the composer's model seat back to whatever the Host
+    // ships in `conversation.input.model`. It does that by DISPOSING its own
+    // slot entry. A `single` slot keeps EVERY registration and renders only the
+    // highest-priority live one, so the shipped entry underneath is elected and
+    // the real, current Host component appears. Nothing is copied, imported or
+    // re-mounted — which is the whole point: an upgraded DSH shows its own
+    // newest picker, so this mode cannot drift out of date (DEC-027).
+    //
+    // The choice persists exactly like the grouping choice (origin-scoped
+    // `localStorage`), and every access degrades to `flat` — a missing store
+    // must never be able to leave the composer without a model control.
+    // ---------------------------------------------------------------------
+    const DISPLAY_MODE_KEY = 'dshmf:mode'
+    const DISPLAY_MODE_DEFAULT = 'flat'
+    /**
+     * Read the persisted display mode, or the default when nothing valid was
+     * stored (or storage is unavailable).
+     * @returns `'flat'` or `'native'`.
+     */
+    function readDisplayMode() {
+      try {
+        if (typeof localStorage === 'undefined') return DISPLAY_MODE_DEFAULT
+        const value = localStorage.getItem(DISPLAY_MODE_KEY)
+        return value === 'flat' || value === 'native' ? value : DISPLAY_MODE_DEFAULT
+      } catch {
+        return DISPLAY_MODE_DEFAULT
+      }
+    }
+    /**
+     * Persist one display mode. A write failure is swallowed: the in-memory
+     * value still drives the current tab.
+     * @param {'flat'|'native'} value - the mode to persist.
+     */
+    function writeDisplayMode(value) {
+      try {
+        if (typeof localStorage === 'undefined') return
+        localStorage.setItem(DISPLAY_MODE_KEY, value)
+      } catch {
+        /* storage unavailable — keep the in-memory choice only */
+      }
+    }
+    /** Schedule a callback outside the current event dispatch. */
+    const scheduleMicrotask = typeof queueMicrotask === 'function'
+      ? queueMicrotask
+      : callback => { Promise.resolve().then(callback) }
+
+    /**
+     * The ONE display-mode store per plugin generation: a uSES-safe snapshot
+     * (`getSnapshot` keeps referential identity until the value changes) shared
+     * by the panel's mode button and the composer-row chip.
+     *
+     * `set` notifies `queueMicrotask`-late on purpose. The click that switches
+     * the mode DISPOSES the slot entry that owns the button, so notifying
+     * synchronously would mutate the slot registry in the middle of React's
+     * event dispatch — the entry would vanish while its own handler is still on
+     * the stack.
+     * @param deps - storage accessors, injected for testability.
+     * @returns the store plus an idempotent `set`.
+     */
+    function createDisplayModeStore(deps) {
+      const normalize = value => (value === 'native' ? 'native' : DISPLAY_MODE_DEFAULT)
+      let value = normalize(typeof deps.readStored === 'function' ? deps.readStored() : DISPLAY_MODE_DEFAULT)
+      const listeners = new Set()
+      let scheduled = false
+      const flush = () => {
+        scheduled = false
+        for (const listener of [...listeners]) {
+          try {
+            listener()
+          } catch {
+            /* one bad subscriber must not starve the others */
+          }
+        }
+      }
+      return {
+        getSnapshot: () => value,
+        subscribe: listener => {
+          listeners.add(listener)
+          return () => { listeners.delete(listener) }
+        },
+        set: next => {
+          const normalized = normalize(next)
+          if (normalized === value) return
+          value = normalized
+          try {
+            if (typeof deps.writeStored === 'function') deps.writeStored(value)
+          } catch {
+            /* storage unavailable — the in-memory value still applies */
+          }
+          if (scheduled) return
+          scheduled = true
+          scheduleMicrotask(flush)
+        },
+        /** Drop every subscriber (activation teardown). */
+        dispose: () => {
+          listeners.clear()
+          scheduled = false
+        },
+      }
+    }
+    /**
+     * Frozen stand-in for a screen that has no store (a degraded activation, or
+     * a test double). One shared instance keeps `getSnapshot` stable, so a uSES
+     * consumer never re-renders in a loop.
+     */
+    const FLAT_DISPLAY_MODE = {
+      getSnapshot: () => DISPLAY_MODE_DEFAULT,
+      subscribe: () => () => {},
+      set: () => {},
+    }
+
     // ---------------------------------------------------------------------
     // Insufficient-balance marks are GLOBAL, not Session-scoped.
     //
@@ -1102,10 +1508,47 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     // the Host's `time`, and the newest observation of a route wins. That is
     // what lets a replayed window (or a stored entry) never override a newer
     // fact from another Session.
+    //
+    // The same stamp is what makes a strike go STALE: it is the time the verdict
+    // was made, so a mark nobody refreshed stops being drawn after STRIKE_TTL
+    // while the record stays behind as the watermark. See markIsLive.
     // ---------------------------------------------------------------------
     const MARKS_KEY = 'dshmf:insufficient'
-    /** Marks older than this are dropped on read, so a stale strike cannot live forever. */
+    /**
+     * How long a RECORD is kept. Records older than this are dropped on read,
+     * so a stale verdict cannot live forever — and so a cleared route's
+     * watermark (which shields it from a replayed older failure) has an end.
+     */
     const MARKS_TTL = 7 * 24 * 60 * 60 * 1000
+    /**
+     * How long a MARK is DRAWN. This is the one the user sees: if nothing new has
+     * been observed for a route for a day, the user never retried it, and the
+     * panel stops claiming the model is unusable — an exhausted balance gets
+     * topped up and a quota resets daily, so a strike that outlives a whole day
+     * of silence is stale information, not a warning. The record itself survives
+     * (up to {@link MARKS_TTL}) as the watermark that keeps a replayed older
+     * failure from re-stamping it.
+     */
+    const STRIKE_TTL = 24 * 60 * 60 * 1000
+
+    /**
+     * Whether one record still justifies drawing a strike at `now`.
+     *
+     * `at` is the time of the LAST observation for the route, so the answer to
+     * "has the user tried this model again?" is already in it: a retry that
+     * failed on balance restamps `at` and restarts the window, a retry that
+     * answered flips `marked`, and a route nobody touched just ages out.
+     * @param {{ marked: boolean, at: number } | undefined} entry - one record.
+     * @param {number} now - the current wall-clock time.
+     * @param {number} [strikeTtl] - how long a mark is drawn; defaults to {@link STRIKE_TTL}.
+     * @returns {boolean} true only for a mark that is set AND still fresh.
+     */
+    function markIsLive(entry, now, strikeTtl) {
+      if (entry === undefined || entry.marked !== true) return false
+      const life = typeof strikeTtl === 'number' && Number.isFinite(strikeTtl) ? strikeTtl : STRIKE_TTL
+      // A stamp from the future (a clock that ran ahead) is fresh, never expired.
+      return now - entry.at < life
+    }
 
     /**
      * Parse a persisted mark record into the in-memory shape, dropping anything
@@ -1178,10 +1621,17 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       }
     }
 
-    /** Whether two visible mark maps hold the same entries. */
+    /**
+     * Whether two visible mark maps hold the same entries.
+     *
+     * Iterating a Map yields `[key, value]` PAIRS, so this walks `keys()` — a
+     * `for (const key of map)` here compares a pair against `has()` and always
+     * answers "different", which hands the seats a brand-new snapshot object on
+     * every recompute and puts `useSyncExternalStore` into a render loop.
+     */
     function sameMarks(left, right) {
       if (left.size !== right.size) return false
-      for (const key of left) {
+      for (const key of left.keys()) {
         if (!right.has(key)) return false
       }
       return true
@@ -1196,22 +1646,43 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
      * everywhere, including in a Session whose own feed was never opened in this
      * page load (its marks come from storage).
      *
+     * The store is also the thing that ages strikes out. A mark retiring itself
+     * is a state change no event announces, so the store watches the clock on its
+     * own behalf — on every fold, on every seat mounting, and on a timer set for
+     * the soonest deadline — instead of waiting for a fold that may never come.
+     *
      * @param {object} deps - resolution hooks.
      * @param {() => object | undefined} deps.sessionsOf - read the `sessions` service, per call.
      * @param {() => Map<string, {marked: boolean, at: number}>} deps.readStored - initial/persisted state.
      * @param {(entries: Map<string, {marked: boolean, at: number}>) => void} deps.writeStored - persistence sink.
-     * @returns {object} the store: `subscribe`, `getSnapshot`, `dispose`, `sync`.
+     * @param {() => number} [deps.now] - the clock; defaults to `Date.now`.
+     * @param {number} [deps.strikeTtl] - strike lifetime; defaults to {@link STRIKE_TTL}.
+     * @returns {object} the store: `subscribe`, `getSnapshot`, `dispose`, `sync`, `watch`, `refresh`.
      */
     function createMarkStore(deps) {
+      /**
+       * The clock strikes age against. Injectable so a test does not have to sit
+       * through a day; every read of the state takes it fresh, because a page
+       * lives long enough for the wall clock to matter.
+       */
+      const nowFn = typeof deps.now === 'function' ? deps.now : () => Date.now()
+      const strikeTtl = typeof deps.strikeTtl === 'number' && Number.isFinite(deps.strikeTtl)
+        ? deps.strikeTtl
+        : STRIKE_TTL
       /** Internal truth: route key → last decision and when it was made. */
       const entries = new Map(deps.readStored())
-      /** Visible subset the rows read: route key → true. */
+      /** Visible subset the rows read: route key → true, the LIVE marks only. */
       let visible = new Map()
       let snapshot = { marks: visible }
       const listeners = new Set()
       /** Per-Session route of the latest request header (a route is Session-local). */
       const routes = new Map()
-      /** Per-Session stop handle for its event feed. */
+      /**
+       * Per-Session event feed subscription: `{ source, stop }`. The source is
+       * kept beside its unsubscribe so a re-materialised Session (same id, new
+       * `eventSource`) is detected and re-attached instead of silently staying
+       * bound to the retired feed.
+       */
       const stops = new Map()
       /** Sessions attached on behalf of a mounted seat; never pruned by a list sync. */
       const pinned = new Set()
@@ -1219,12 +1690,19 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       let attachedSessions
       let stopList
       let disposed = false
+      /** Timer for the soonest strike that is still being drawn. */
+      let expiryTimer = null
+
+      const publish = () => {
+        for (const listener of listeners) listener()
+      }
 
-      /** Rebuild the visible map; report whether the rendered set changed. */
+      /** Rebuild the visible map against the clock; report whether it changed. */
       const recompute = () => {
+        const now = nowFn()
         const next = new Map()
         for (const [key, entry] of entries) {
-          if (entry.marked) next.set(key, true)
+          if (markIsLive(entry, now, strikeTtl)) next.set(key, true)
         }
         if (sameMarks(visible, next)) return false
         visible = next
@@ -1232,12 +1710,56 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         return true
       }
 
-      recompute()
+      /**
+       * Arm the clock for the soonest live strike.
+       *
+       * A strike retiring is the one transition no event reports: the user
+       * simply never came back to this model. A page left open across the
+       * deadline therefore has to wake itself, or a stale line-through would sit
+       * on the row until some unrelated fold happened to recompute it.
+       */
+      const scheduleExpiry = () => {
+        if (expiryTimer !== null) {
+          clearTimeout(expiryTimer)
+          expiryTimer = null
+        }
+        if (disposed || typeof setTimeout !== 'function') return
+        const now = nowFn()
+        let earliest = Number.POSITIVE_INFINITY
+        for (const entry of entries.values()) {
+          if (!markIsLive(entry, now, strikeTtl)) continue
+          const deadline = entry.at + strikeTtl
+          if (deadline < earliest) earliest = deadline
+        }
+        if (!Number.isFinite(earliest)) return
+        const handle = setTimeout(() => {
+          expiryTimer = null
+          refresh()
+        }, Math.max(0, earliest - now))
+        // A day-long timer must never be the reason a process stays alive (a
+        // Node host, a test run): `unref` lets it fire while anything else is
+        // running without holding the loop. A browser handle is a number and has
+        // no `unref`, and there the page keeps its own clock.
+        if (typeof handle?.unref === 'function') handle.unref()
+        expiryTimer = handle
+      }
 
-      const publish = () => {
-        for (const listener of listeners) listener()
+      /**
+       * Re-read the clock and tell the seats if anything aged out.
+       * @returns {boolean} whether the rendered set changed.
+       */
+      const refresh = () => {
+        if (disposed) return false
+        const changed = recompute()
+        // Re-arm first: a strike that just aged out may leave a later one live.
+        scheduleExpiry()
+        if (changed) publish()
+        return changed
       }
 
+      recompute()
+      scheduleExpiry()
+
       /** Fold one batch of durable entries for one Session. */
       const absorb = (sessionId, windowEntries) => {
         let stored = false
@@ -1270,30 +1792,54 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       const applyWindow = (sessionId, window, full) => {
         const change = window?.change
         let result
-        if (full || change?.kind === 'replace') {
-          // The window is that Session's whole truth, so its route restarts and
+        if (full || change?.kind === 'replace' || change?.kind === 'prepend') {
+          // `replace` is that Session's whole truth, so its route restarts and
           // its entries are re-walked. Global watermarks keep a newer fact from
           // another Session from being overwritten by this replay.
+          //
+          // `prepend` (scrolling up) must be re-walked for the SAME reason, and
+          // this is not an optimisation to skip: older history is exactly where
+          // a failure lives once the turn that hit it has scrolled out of the
+          // first page. Folding only the appended tail left the store blind to
+          // every failure that happened before the window's oldest entry, which
+          // is the common case on a long Session — the strike then never
+          // appeared for the model that actually ran out. The route map is
+          // Session-local and positional, so the prepended page is folded with
+          // the whole window (oldest entry first) to attribute each failure to
+          // the header that really preceded it.
           routes.delete(sessionId)
           result = absorb(sessionId, entriesOf(window))
         } else if (change?.kind === 'append') {
           result = absorb(sessionId, change.entries)
         } else {
-          // `prepend` pages in OLDER history and `settle-assistant` only swaps a
-          // live attempt for its durable form; neither can change a mark.
+          // `settle-assistant` only swaps a live attempt for its durable form —
+          // an Assistant message — so it cannot carry a turn/end or a header.
           return
         }
         if (result.stored) deps.writeStored(entries)
-        if (result.changed && recompute()) publish()
+        // The clock — not the raw record — decides what the rows draw, and a new
+        // record moves the soonest deadline, so re-read both after any fold.
+        if (result.stored || result.changed) refresh()
       }
 
       /**
-       * Attach to one Session's durable feed. Idempotent, and a no-op when the
-       * Session has no retained binding (an unopened Session has no feed; its
-       * marks can only come from storage).
+       * Attach to one Session's durable feed. Idempotent for one feed, and a
+       * no-op when the Session has no retained binding (an unopened Session has
+       * no feed; its marks can only come from storage).
+       *
+       * "Already attached" has to mean "attached to THIS feed", not "attached to
+       * this Session id". The Client materialises a Session scope on demand and
+       * retires it when nothing retains it any more — switching to another
+       * conversation and coming back, or opening a second one, drops the old
+       * scope and builds a NEW Session object with a NEW `eventSource`. Keying
+       * the subscription by id alone left the store listening to the retired
+       * feed forever: the live failure was never folded (no strike appeared)
+       * while the dead feed could still inject stale facts. So the subscription
+       * is remembered together with the source it came from and replaced when
+       * the identity changes.
        */
       const attachSession = sessionId => {
-        if (disposed || stops.has(sessionId)) return
+        if (disposed) return
         const sessions = deps.sessionsOf()
         let binding
         try {
@@ -1304,6 +1850,19 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         const source = binding?.eventSource
         if (source === undefined || typeof source.subscribe !== 'function'
           || typeof source.getSnapshot !== 'function') return
+        const attached = stops.get(sessionId)
+        if (attached !== undefined && attached.source === source) return
+        // A different feed for the same id: drop the dead subscription and
+        // forget the route map, which was derived from the retired window.
+        if (attached !== undefined) {
+          try {
+            attached.stop()
+          } catch {
+            /* a refused unsubscribe must not keep the new feed out */
+          }
+          stops.delete(sessionId)
+          routes.delete(sessionId)
+        }
         try {
           applyWindow(sessionId, source.getSnapshot(), true)
         } catch {
@@ -1318,7 +1877,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         }
         try {
           const stop = source.subscribe(listener)
-          stops.set(sessionId, typeof stop === 'function' ? stop : () => {})
+          stops.set(sessionId, {
+            source,
+            stop: typeof stop === 'function' ? stop : () => {},
+          })
         } catch {
           /* subscription refused: leave this Session unattached */
         }
@@ -1331,7 +1893,7 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         if (sessions === undefined) return
         // A client reload replaces the service; re-attach from the new one.
         if (sessions !== attachedSessions) {
-          for (const stop of stops.values()) stop()
+          for (const attached of stops.values()) attached.stop()
           stops.clear()
           routes.clear()
           if (typeof stopList === 'function') stopList()
@@ -1358,7 +1920,7 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         for (const id of [...stops.keys()]) {
           if (pinned.has(id)) continue
           if (!ids.includes(id)) {
-            stops.get(id)?.()
+            stops.get(id)?.stop()
             stops.delete(id)
             routes.delete(id)
           }
@@ -1368,6 +1930,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       return {
         /** The seat's `useSyncExternalStore` pair. */
         subscribe: listener => {
+          // A seat mounting IS the model list being displayed, so this is where a
+          // strike that aged out while nobody was looking gets retired — before
+          // React reads the snapshot it is about to render from.
+          refresh()
           listeners.add(listener)
           sync()
           return () => { listeners.delete(listener) }
@@ -1385,12 +1951,23 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           pinned.add(sessionId)
           sync()
           attachSession(sessionId)
+          refresh()
         },
+        /**
+         * Re-read the clock: retire any mark older than the strike lifetime and
+         * notify the seats that drew it. Call it whenever the list is displayed,
+         * because that is the moment the answer must be current.
+         */
+        refresh,
         /** Release every feed subscription. The marks themselves stay persisted. */
         dispose: () => {
           if (disposed) return
           disposed = true
-          for (const stop of stops.values()) stop()
+          if (expiryTimer !== null) {
+            clearTimeout(expiryTimer)
+            expiryTimer = null
+          }
+          for (const attached of stops.values()) attached.stop()
           stops.clear()
           routes.clear()
           pinned.clear()
@@ -1431,6 +2008,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         'failure.group': '{name} 加载失败：{message}',
         'error.action': '模型操作失败：{message}',
         'error.sessionInUse': '当前会话已被占用，可能是其他正在运行的 DSH 导致的，请退出其他正在运行的 DSH 后重试。',
+        'native.label': '默认样式',
+        'native.enter': '切换到默认样式',
+        'native.back': '回到平铺模型面板',
+        'native.unavailable': '默认样式当前不可用',
       },
       en: {
         'provider.account': 'DeepSeek Account',
@@ -1461,6 +2042,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         'failure.group': '{name} failed to load: {message}',
         'error.action': 'Model operation failed: {message}',
         'error.sessionInUse': 'This session is already in use, possibly by another running DSH instance. Quit other running DSH instances and try again.',
+        'native.label': 'Default style',
+        'native.enter': 'Switch to the default style',
+        'native.back': 'Back to the flat model panel',
+        'native.unavailable': 'The default style is unavailable right now',
       },
     }
 
@@ -1509,6 +2094,249 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       subscribe: () => () => {},
       getSnapshot: () => EMPTY_INSUFFICIENT_SNAPSHOT,
       watch: () => {},
+      refresh: () => {},
+    }
+
+    /**
+     * The slot whose occupant decorates a model name in the shipped picker.
+     *
+     * It is a `single`, session-scoped child slot declared by the shipped
+     * `ModelSelect` entry. This plugin shadows that entry but never disposes it,
+     * so the declaration and every contribution to it stay alive — which is
+     * exactly why the trigger can draw the same occupant the native picker
+     * would (DEC-030).
+     */
+    const LABEL_SLOT = 'conversation.input.model.label'
+
+    /**
+     * Read the entry that currently OWNS the label cell, or undefined.
+     *
+     * `entriesOfSlot` is the documented "winner per cell" accessor (the same
+     * one the renderer's outlet uses), so this asks the host the same question
+     * the native trigger does rather than guessing at priorities. Anything
+     * unexpected — an older host without the accessor, a thrown service call, a
+     * slot that lost its declaration — answers undefined and the trigger falls
+     * back to the catalog name, which is the shipped fallback's own behaviour.
+     * @param {object|undefined} slots - the `slots` client service.
+     * @returns {object|undefined} the winning StoredEntry.
+     */
+    function readLabelEntry(slots) {
+      if (slots === undefined || slots === null || typeof slots.entriesOfSlot !== 'function') return undefined
+      try {
+        const winners = slots.entriesOfSlot(LABEL_SLOT)
+        const entry = Array.isArray(winners) ? winners[0] : undefined
+        // A component is the whole point; an entry without one (or a cell that
+        // abdicated after a crash) is the same as no occupant at all.
+        return entry !== undefined && typeof entry.component === 'function' ? entry : undefined
+      } catch {
+        return undefined
+      }
+    }
+
+    /** One shared passthrough, so a degraded seat is not a new reference per render. */
+    const identityTranslate = key => String(key)
+
+    /** Shared empty business face, for the same reason as `identityTranslate`. */
+    const EMPTY_LABEL_FACE = {}
+
+    /** Per (locale face, namespace, revision) translate seats, mirroring the renderer. */
+    const labelSeatCache = new WeakMap()
+
+    /**
+     * Build the locale seat a label occupant expects.
+     *
+     * A registered entry's `t` is synthesized by the renderer from its declared
+     * `locale` namespace (`entry.locale`) through the installed locale face's
+     * `bind()`. Rendering that component ourselves means synthesizing the same
+     * seat; a contribution that declares no namespace gets a passthrough that
+     * answers its own key, which is what the renderer's kit would omit anyway.
+     * @param {object|undefined} locale - the `locale` client service.
+     * @param {string|undefined} namespace - the occupant's declared namespace.
+     * @returns {Function} a translate seat.
+     */
+    function labelSeat(locale, namespace) {
+      if (typeof namespace !== 'string' || namespace === '') return identityTranslate
+      if (locale === undefined || typeof locale.bind !== 'function') return identityTranslate
+      try {
+        // Cached per (face, namespace, revision) exactly as the renderer's own
+        // `localeSeat` does. The identity matters: the occupant is a React
+        // component, and a fresh `t` on every render would look like new props
+        // on every paint — a memoized chip would re-render forever, and an
+        // effect keyed on `t` would re-run forever.
+        const revision = typeof locale.getSnapshot === 'function'
+          ? locale.getSnapshot()?.revision
+          : undefined
+        let perNamespace = labelSeatCache.get(locale)
+        if (perNamespace === undefined) {
+          perNamespace = new Map()
+          labelSeatCache.set(locale, perNamespace)
+        }
+        const cached = perNamespace.get(namespace)
+        if (cached !== undefined && cached.revision === revision) return cached.t
+        const bound = locale.bind(namespace)
+        const t = typeof bound === 'function'
+          ? (key, params) => bound(key, params)
+          : identityTranslate
+        perNamespace.set(namespace, { revision, t })
+        return t
+      } catch {
+        return identityTranslate
+      }
+    }
+
+    /**
+     * A `useSyncExternalStore` source over "who owns the label cell".
+     *
+     * The trigger has to re-read the winner when a connection plugin registers
+     * or disposes — otherwise a plugin that loads a second after boot keeps its
+     * chip off the trigger until a page reload. The host already publishes the
+     * change channel: `slots.subscribe(key, fn)` plus a monotonic `getVersion`,
+     * which is the documented uSES pairing (`SlotRegistry.getVersion`).
+     *
+     * A host without those accessors yields a source that never notifies and
+     * always answers 0 — the trigger then simply renders whatever it read on
+     * its first paint.
+     * @param {object|undefined} slots - the `slots` client service.
+     * @returns {{subscribe: Function, getSnapshot: Function}} a stable source.
+     */
+    const labelSlotSources = new WeakMap()
+    function labelSlotSource(slots) {
+      const noop = { subscribe: () => () => {}, getSnapshot: () => 0 }
+      if (slots === undefined || slots === null || typeof slots !== 'object') return noop
+      if (typeof slots.subscribe !== 'function' || typeof slots.getVersion !== 'function') return noop
+      const cached = labelSlotSources.get(slots)
+      if (cached !== undefined) return cached
+      const source = {
+        subscribe: listener => slots.subscribe(LABEL_SLOT, listener),
+        getSnapshot: () => slots.getVersion(LABEL_SLOT),
+      }
+      labelSlotSources.set(slots, source)
+      return source
+    }
+
+    /** The source a seat uses when the face was degraded or omitted. */
+    const NO_LABEL_SLOT = { subscribe: () => () => {}, getSnapshot: () => 0 }
+
+    /**
+     * How long the pointer must rest on a truncated model name before the
+     * marquee starts. Long enough that sweeping across the grid never starts a
+     * scroll, short enough to feel like a direct response (DEC-021).
+     */
+    const MARQUEE_DELAY = 500
+    /**
+     * One CSS pixel per 20ms — 50px/s. The trailing end of a long name scrolls
+     * at the same pace, so a 300px overflow still finishes in ~6s instead of
+     * crawling, and the speed reads as a considered crawl rather than a ticker.
+     */
+    const MARQUEE_PX_PER_SECOND = 50
+    /** Shortest pass, so a barely-truncated name does not blink past. */
+    const MARQUEE_MIN_MS = 900
+
+    /**
+     * Does this element actually clip its text?
+     *
+     * The measured element is the row's name WINDOW, a plain block-level flex
+     * item with `overflow: hidden; white-space: nowrap`, so `scrollWidth` is the
+     * full width of the name and `clientWidth` the visible part. A one-pixel
+     * slack keeps sub-pixel rounding from starting a marquee on a name that
+     * fits exactly.
+     * @param {Element | null | undefined} element - the name window.
+     * @returns {number} the clipped amount in px; 0 when nothing is cut off.
+     */
+    const nameClippedBy = element => {
+      if (element === null || element === undefined) return 0
+      const clientWidth = Number(element.clientWidth) || 0
+      if (clientWidth <= 0) return 0
+      const clipped = (Number(element.scrollWidth) || 0) - clientWidth
+      return clipped > 1 ? clipped : 0
+    }
+
+    /**
+     * The geometry of the single marquee pass (DEC-021).
+     *
+     * `shift` is how far the name travels for its LAST glyph to reach the
+     * right edge of the window — exactly the clipped amount, so nothing scrolls
+     * past the point of being readable. The pass is one-way and eased
+     * (ease-in-out), which is symmetric, so its AVERAGE velocity is still the
+     * pinned MARQUEE_PX_PER_SECOND: the duration is simply
+     * `shift / MARQUEE_PX_PER_SECOND`. Easing makes the ends soften around that
+     * average instead of changing it.
+     * @param {number} clipped - pixels of the name hidden to the right.
+     * @returns {{shift: number, duration: number}} geometry in px / ms.
+     */
+    const marqueePassGeometry = clipped => {
+      const shift = Number.isFinite(clipped) && clipped > 0 ? Math.ceil(clipped) : 0
+      if (shift === 0) return { shift: 0, duration: 0 }
+      const duration = Math.max(MARQUEE_MIN_MS, Math.round((shift / MARQUEE_PX_PER_SECOND) * 1000))
+      return { shift, duration }
+    }
+
+    /**
+     * Does the user ask the OS to reduce motion? The marquee is decorative, so
+     * it is skipped entirely under that preference — the ellipsis and the row
+     * tooltip already carry the full name.
+     * @returns {boolean} true when motion should be suppressed.
+     */
+    const prefersReducedMotion = () => {
+      try {
+        return typeof window !== 'undefined'
+          && typeof window.matchMedia === 'function'
+          && window.matchMedia('(prefers-reduced-motion: reduce)').matches === true
+      } catch {
+        return false
+      }
+    }
+
+    /**
+     * The sliding part of a row's primary text.
+     *
+     * The row wraps it in the clipped window, so the pass runs on the track
+     * alone: everything AFTER the window (the variant tail, the catalog badge,
+     * the pending spinner) is right-aligned and never pushed along.
+     * `shift`/`duration` arrive as inline values because they depend on this
+     * row's measurement.
+     * @param {object} props - `shift` (px), `duration` (ms), `children`.
+     * @returns {object} the track element.
+     */
+    const renderNameTrack = props => {
+      const { shift, duration, children } = props
+      const running = shift > 0
+      return h('span', {
+        className: 'dshmf-rowNameTrack dshmf-rowName',
+        'data-running': running ? 'true' : undefined,
+        style: running
+          ? {
+            '--dshmf-marquee-shift': `-${shift}px`,
+            '--dshmf-marquee-duration': `${duration}ms`,
+          }
+          : undefined,
+      }, children)
+    }
+
+    /**
+     * The sliding part of a group title (DEC-023).
+     *
+     * The band plays the role the row plays for a model name: it is the frame,
+     * and it never moves. The text inside is a clipped window holding a track,
+     * so a heading too long for its column (`ModelScope Token Plan`) runs the
+     * SAME one-pass eased marquee a truncated model name does, while the band's
+     * fill, frame, radius and elevation stay put.
+     * @param {object} props - `shift` (px), `duration` (ms), `children`.
+     * @returns {object} the track element.
+     */
+    const renderTitleTrack = props => {
+      const { shift, duration, children } = props
+      const running = shift > 0
+      return h('span', {
+        className: 'dshmf-groupTitleTrack',
+        'data-running': running ? 'true' : undefined,
+        style: running
+          ? {
+            '--dshmf-marquee-shift': `-${shift}px`,
+            '--dshmf-marquee-duration': `${duration}ms`,
+          }
+          : undefined,
+      }, children)
     }
 
     // ---------------------------------------------------------------------
@@ -1523,7 +2351,7 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         locked, sessionId, t,
         available, directory, load, select, resolveText, resolveDirectory,
         teamAvailable, setTeamMode, useProjection, useSession, useSessions,
-        insufficient,
+        insufficient, displayMode, setDisplayMode, nativeAvailable,
       } = props
 
       // The store may arrive after the first render (the Session binds later),
@@ -1545,6 +2373,29 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       const getMarks = useCallback(() => markFace.getSnapshot(), [markFace])
       const marks = useSyncExternalStore(subscribeMarks, getMarks, getMarks)
 
+      // The display mode is shared page state, not panel state: the composer-row
+      // chip that brings the panel back reads the SAME store while this seat is
+      // disposed. The fallback keeps the hook shape stable when the face was
+      // degraded.
+      const modeFace = displayMode ?? FLAT_DISPLAY_MODE
+      const subscribeMode = useCallback(listener => modeFace.subscribe(listener), [modeFace])
+      const getMode = useCallback(() => modeFace.getSnapshot(), [modeFace])
+      const mode = useSyncExternalStore(subscribeMode, getMode, getMode)
+      // Resolved per render: the shipped entry may register after this face was
+      // built, and the button has to enable itself without a reload.
+      const canGoNative = typeof nativeAvailable === 'function' && nativeAvailable() === true
+      // The panel only ever renders while it OWNS the cell, so the stored mode
+      // and the visible mode can disagree in exactly one case: `native` was
+      // persisted but there is nothing to inherit the cell, so the controller
+      // refused to step aside and this panel is still on screen. Reporting the
+      // stored value then would paint the button pressed while the panel shows —
+      // so report the mode that is actually in effect (DEC-027).
+      const modeIsNative = mode === 'native' && canGoNative
+      const switchMode = next => {
+        if (typeof setDisplayMode === 'function') setDisplayMode(next)
+        else modeFace.set(next)
+      }
+
       // Keep the store attached to this Session's feed while the seat is mounted.
       // It is shared, so unmounting must NOT dispose it — the marks belong to the
       // page, not to this seat.
@@ -1579,6 +2430,70 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       const confirmRef = useRef(null)
       const id = useId()
 
+      // ---- Model-name marquee (DEC-021)
+      // A name wider than its row is ellipsised ("DeepSeek Reasone…"). Resting
+      // the pointer on such a row for MARQUEE_DELAY starts the marquee; moving
+      // away stops it. Only one row can run at a time, and the sliding element
+      // is the name TRACK only, so right-aligned trailing content (the catalog
+      // badge — 限时免费, ×0.1 — and the pending spinner) never moves.
+      // A group title is the same shape one level up (DEC-023): the band is the
+      // frame and its text slides inside it, so a truncated heading runs the
+      // same pass. Rows and titles therefore share this ONE state machine and
+      // are told apart only by their key prefix.
+      const [marquee, setMarquee] = useState({ key: '', shift: 0, duration: 0 })
+      const marqueeTimer = useRef(null)
+      /** The row whose delay is still running; '' when nothing is armed. */
+      const marqueeArmed = useRef('')
+      const idleMarquee = { key: '', shift: 0, duration: 0 }
+      const clearMarqueeTimer = () => {
+        if (marqueeTimer.current !== null) {
+          clearTimeout(marqueeTimer.current)
+          marqueeTimer.current = null
+        }
+      }
+      /** Drop an armed delay (the pointer left before it fired). */
+      const disarmMarquee = () => {
+        clearMarqueeTimer()
+        marqueeArmed.current = ''
+      }
+      /**
+       * Pointer arrived on a marquee-able element. Leave any other one first,
+       * then arm the delay. The measurement happens when it fires — the element
+       * is laid out by then, and a name that fits never moves.
+       * @param {string} key - the row's route key or the title's block key (one runner at a time).
+       * @param {Element | null} element - the row (or band) the pointer entered.
+       * @param {string} [selector] - the clipped window inside it.
+       */
+      const enterRow = (key, element, selector = '.dshmf-rowNameWindow') => {
+        disarmMarquee()
+        marqueeArmed.current = key
+        // Leaving the previous row stops its pass immediately.
+        setMarquee(previous => (previous.key === '' ? previous : idleMarquee))
+        marqueeTimer.current = setTimeout(() => {
+          marqueeTimer.current = null
+          if (marqueeArmed.current !== key) return
+          marqueeArmed.current = ''
+          const nameWindow = typeof element?.querySelector === 'function'
+            ? element.querySelector(selector)
+            : null
+          if (prefersReducedMotion()) return
+          const geometry = marqueePassGeometry(nameClippedBy(nameWindow))
+          if (geometry.shift === 0) return
+          setMarquee({ key, shift: geometry.shift, duration: geometry.duration })
+        }, MARQUEE_DELAY)
+      }
+      /**
+       * Pointer left a row. An armed delay for THAT row is cancelled (so a
+       * quick sweep never starts anything), and a running pass is dropped.
+       * @param {string} key - the row the pointer left.
+       */
+      const leaveRow = key => {
+        if (marqueeArmed.current === key) disarmMarquee()
+        setMarquee(previous => (previous.key === key ? idleMarquee : previous))
+      }
+      // Unmount safety: a pending timer must not outlive the seat.
+      useEffect(() => () => { clearTimeout(marqueeTimer.current) }, [])
+
       // Standard props always carry these three hooks for a session-scope slot;
       // the fallbacks keep the component renderable (rather than throwing) in a
       // composition that omits one, and they are plain values so the hook order
@@ -1632,13 +2547,7 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
          * @param {{id: string, name: unknown}} group - one provider entry.
          * @returns {string} a display-ready label; never empty.
          */
-        const providerLabelOf = group => {
-          if (group.id === 'deepseek-account') return t('provider.account')
-          const resolved = resolveText === undefined ? undefined : resolveText(group.name)
-          if (typeof resolved === 'string' && resolved.trim() !== '') return resolved
-          const fallback = fallbackText(group.name)
-          return fallback.trim() === '' ? group.id : fallback
-        }
+        const providerLabelOf = group => providerLabel(group, t, resolveText)
         /**
          * A provider whose own name or id matches the query keeps its whole
          * catalog: `dou` shows the `豆包(doubao)` provider with every model it
@@ -1695,10 +2604,12 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         for (const family of families) {
           family.scored.sort((left, right) => left.score - right.score)
           // Under family grouping each row's primary text is its provider and
-          // the family name is NOT repeated (the heading already says it). Only
-          // when ONE provider offers several models in this family do the rows
-          // need a short distinguishing tail, so the same provider name is not
-          // printed twice with no way to tell the models apart.
+          // the family name is NOT repeated (the heading already says it). The
+          // heading is only half the picture though: it cannot say WHICH model
+          // the row stands for (`Qwen` holds 3.8-Flash-Next and 3.8-27B), nor
+          // carry the catalog's rate multiplier (`Deepseek-V4.1-Flash · x0.00`).
+          // Both move into a tail at the END of the row, drawn from the model
+          // name with the family heading and the provider's own label removed.
           const byProvider = new Map()
           for (const item of family.scored) {
             const list = byProvider.get(item.entry.providerId) ?? []
@@ -1706,17 +2617,21 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             byProvider.set(item.entry.providerId, list)
           }
           for (const list of byProvider.values()) {
-            if (list.length <= 1) continue
             const used = new Map()
             for (const item of list) {
-              // An empty variant is intentional: the plain/base model of this
-              // family carries no tag at all. Only a real collision (two rows
-              // with the same non-empty variant, or two rows both empty) needs
-              // a distinguishing fallback — the model id, which is unique.
-              const variant = rowVariantOf(item.entry.model, family.title)
+              // An empty tail is valid: a model whose name says nothing beyond
+              // the family and the provider draws no tail at all.
+              const variant = rowVariantOf(
+                item.entry.model,
+                family.title,
+                item.entry.providerLabel,
+              )
               item.entry.rowVariant = variant
               used.set(variant, (used.get(variant) ?? 0) + 1)
             }
+            // Two rows of one provider that still read alike (the same name
+            // under different ids) fall back to the unique model id, so no two
+            // rows in the grid are indistinguishable.
             if ([...used.values()].some(count => count > 1)) {
               for (const item of list) {
                 if (used.get(item.entry.rowVariant) > 1) {
@@ -1758,27 +2673,66 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       const effortChoices = reasoning === undefined ? [] : reasoning.efforts
       const busy = state.pending !== null
 
+      // What decides which fixed sections EXIST — the measurement effect's
+      // dependency set (DEC-026). The derived members are reduced to stable
+      // keys so a new array/object identity per render cannot re-arm it.
+      //
+      // The footer itself is ALWAYS rendered now (it carries the display-mode
+      // button), so what can move its height is which of its dynamic members
+      // are present — the reasoning group and the teamwork row — not whether
+      // the footer exists. Naming the key after those members keeps a footer
+      // that merely gains or loses one of them a real measurement, while a
+      // footer whose content is unchanged stays quiet.
+      const teamRowShown = teamMode !== undefined && teamAvailable()
+      const sectionCount = sections.length
+      const footerKey = `${effortChoices.length > 0 ? 'reason' : 'none'}:${teamRowShown ? 'team' : 'none'}`
+      const errorKey = state.error === null ? '' : state.error
+      const confirmOpen = confirming
+      const teamErrorKey = teamFailure === null ? '' : teamFailure
+
       // ---- measurement: probe metrics + fixed-section heights
       // The reasoning group and the teamwork row now share ONE footer flex
       // container, so measure that container once instead of the two children
       // separately: when they sit on the same line the two heights overlap,
       // and summing them would over-subtract from the grid's budget.
+      //
+      // This effect MUST NOT run on every render (DEC-026). `metrics.fixed`
+      // feeds `availableHeight`, which decides the column plan, which changes
+      // the panel's own height, which changes the next measurement: an
+      // unconditional measure/setMetrics pass closes that into a feedback loop
+      // and React aborts it with "Maximum update depth exceeded" (error #185).
+      // A browser reaches it on its own — a web font swapping in, a scrollbar
+      // appearing, a sub-pixel height drift — which is why the crash looked
+      // spontaneous. Measuring is therefore tied to the inputs that can
+      // actually move a section (the panel opening, the section list, the
+      // locale, and the debounced replan), and the compared values are
+      // QUANTIZED so sub-pixel noise can never be mistaken for a new layout.
       useLayoutEffect(() => {
         if (!open) return
-        const rowH = probeRowRef.current?.getBoundingClientRect().height ?? 26
-        const headH = probeHeadRef.current?.getBoundingClientRect().height ?? 20
+        const rowH = quantizeMetric(probeRowRef.current?.getBoundingClientRect().height ?? 26)
+        const headH = quantizeMetric(probeHeadRef.current?.getBoundingClientRect().height ?? 20)
         const heights = [headRef, errorRef, footerRef, confirmRef, teamErrorRef]
-          .map(ref => ref.current?.offsetHeight ?? 0)
+          .map(ref => quantizeMetric(ref.current?.offsetHeight ?? 0))
           .filter(height => height > 0)
         const fixed = heights.reduce((sum, height) => sum + height, 0)
         const fixedCount = heights.length
-        setMetrics(previous => (previous.rowH === rowH && previous.headH === headH
-          && previous.fixed === fixed && previous.fixedCount === fixedCount
-          ? previous
-          : { ...previous, rowH, headH, fixed, fixedCount }))
-      })
+        setMetrics(previous => (metricChanged(previous.rowH, rowH)
+          || metricChanged(previous.headH, headH)
+          || metricChanged(previous.fixed, fixed)
+          || previous.fixedCount !== fixedCount
+          ? { ...previous, rowH, headH, fixed, fixedCount }
+          : previous))
+      }, [open, sectionCount, footerKey, errorKey, confirmOpen, teamErrorKey, replan])
 
       // ---- placement: above the trigger, kept inside the viewport
+      //
+      // Like the measurement above, this must NOT re-run on every render
+      // (DEC-026): `place()` writes `metrics.box`, and the panel's height —
+      // which `place()` reads — is derived from `metrics`. Left unconditional,
+      // a panel whose height rounds differently at the new position re-places
+      // itself forever, which is the same #185 abort the measure loop caused.
+      // It is therefore armed on the inputs that move the panel (opening, the
+      // plan, the viewport) and observes resize/scroll directly.
       useLayoutEffect(() => {
         if (!open) {
           setMetrics(previous => (previous.box === null ? previous : { ...previous, box: null }))
@@ -1810,7 +2764,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           window.removeEventListener('resize', place)
           window.removeEventListener('scroll', place, true)
         }
-      })
+        // `plan` is derived from these metrics, so re-placing on the metrics is
+        // the same trigger one level up — and it avoids reading `plan` before
+        // it is computed.
+      }, [open, metrics.fixed, metrics.rowH, metrics.headH, metrics.fixedCount])
 
       // Re-plan once fonts settle and on panel resize (debounced).
       useEffect(() => {
@@ -1961,6 +2918,101 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         return { label, tone: badge.tone ?? 'neutral' }
       }
 
+      // ---- the trigger's label cell (DEC-030)
+      //
+      // The shipped picker does not paint a model name on its trigger: it
+      // renders the `conversation.input.model.label` slot and lets the winner
+      // decorate the name. Connection plugins use that seam for things the
+      // catalog does not carry — a promotion chip, a rate, and workbuddy's
+      // load mark (one/two/three queued people, or a rocket when idle). Drawing
+      // a bare name here therefore loses decoration the native trigger shows.
+      //
+      // This plugin cannot DECLARE that slot (the shipped entry already did, and
+      // a second declaration throws), but it does not need to: the declaration
+      // outlives our shadowing entry, so `entriesOfSlot` still names its owner
+      // and that owner's component can be rendered directly with the seats it
+      // expects. The occupant is third-party code, so the whole cell sits behind
+      // its own error boundary — a crashing chip must cost the chip, never the
+      // seat.
+      const labelSlot = props.labelSlot ?? NO_LABEL_SLOT
+      const subscribeLabel = useCallback(listener => labelSlot.subscribe(listener), [labelSlot])
+      const getLabelVersion = useCallback(() => labelSlot.getSnapshot(), [labelSlot])
+      useSyncExternalStore(subscribeLabel, getLabelVersion, getLabelVersion)
+      // Re-read on every render: the winner can change without the version
+      // changing (a disposed entry re-elected to its predecessor in the same
+      // microtask batch), and the read is a map lookup.
+      const labelEntry = typeof props.labelEntry === 'function'
+        ? derive('reading the model label slot', () => props.labelEntry(), undefined)
+        : undefined
+      /**
+       * The occupant's own props: the shipped owner share, exactly as the native
+       * picker passes it. Memoized on the identity of what it names, so the
+       * occupant does not see a "new" provider/model object on every paint.
+       */
+      const labelOwnerProps = useMemo(() => {
+        if (currentModel === null || currentModel === undefined) return undefined
+        const group = currentModel.group
+        return {
+          provider: {
+            id: group.id,
+            // The catalog's own name, unresolved: the occupant resolves it with
+            // its own locale seat, exactly as it does inside the native picker.
+            name: group.id === 'deepseek-account' ? t('provider.account') : group.name,
+          },
+          model: currentModel.model,
+          placement: 'trigger',
+          selected: true,
+        }
+      }, [currentModel, t])
+      /**
+       * The occupant's props, assembled once per (entry, model, label text).
+       *
+       * The identity has to be stable across renders: the occupant is an
+       * ordinary React component, and a fresh props object on every paint makes
+       * a memoized one re-render forever. `entry.inject(sessionId)` is the
+       * expensive half (it reads services and builds a face), so it is part of
+       * the same memo rather than a separate call per render.
+       */
+      const labelNode = useMemo(() => {
+        if (labelEntry === undefined || labelOwnerProps === undefined) return undefined
+        const Occupant = labelEntry.component
+        const face = typeof props.labelFace === 'function'
+          ? derive('building the model label face', () => props.labelFace(labelEntry), {})
+          : EMPTY_LABEL_FACE
+        const translate = typeof props.labelSeatFor === 'function'
+          ? derive('binding the model label locale', () => props.labelSeatFor(labelEntry.locale), identityTranslate)
+          : identityTranslate
+        return h(LabelBoundary, {
+          // Keyed by the winner, so a change of occupant remounts rather than
+          // handing one plugin's component another plugin's state.
+          key: `label-${labelEntry.options?.id ?? labelEntry.registrant ?? 'entry'}`,
+          fallback: undefined,
+        }, h(Occupant, { ...face, t: translate, ...labelOwnerProps }))
+      }, [labelEntry, labelOwnerProps, props.labelFace, props.labelSeatFor])
+
+      /**
+       * What the trigger draws when no label occupant answered: the catalog
+       * name, plus the model's own `badge` chip.
+       *
+       * This is the shipped picker's own fallback (name + `Tag`), reproduced
+       * rather than imported — the host's `Tag` lives in a primitives package
+       * this plugin does not depend on, and the chip's geometry is four
+       * declarations. Drawing the badge here matters even with an occupant
+       * installed: an occupant that wins the cell but does not reproduce a
+       * sibling's `model.badge` (or no occupant at all) would otherwise lose the
+       * promotion marker the native trigger shows.
+       */
+      const triggerFallbackLabel = () => {
+        const badge = triggerModel === undefined ? null : badgeOf(triggerModel)
+        if (badge === null) return h('span', { className: 'dshmf-triggerName' }, modelLabel)
+        return h('span', { className: 'dshmf-triggerLabel' },
+          // The shipped fallback puts the badge BEFORE the name on the trigger
+          // and after it in menus; the trigger is what this draws.
+          h('span', { className: 'dshmf-triggerBadge', 'data-tone': badge.tone }, badge.label),
+          h('span', { className: 'dshmf-triggerName' }, modelLabel),
+        )
+      }
+
       /**
        * Split a model name into React children, lifting any "xN" multiplier
        * marker (rate/size tags like "x0.01", "x1.5", "X 2.2") into a smaller,
@@ -2011,8 +3063,12 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         // yet: the row text is struck through until a later call for the same
         // model route returns anything else.
         const insufficientRoute = marks.marks.get(routeKeyOf(providerId, model.id)) === true
+        // The marquee runs one row at a time, keyed by the model route so a
+        // re-render cannot start the wrong row (DEC-021).
+        const routeKey = `${providerId}/${model.id}`
+        const running = marquee.key === routeKey
         return h('button', {
-          key: `${providerId}/${model.id}`,
+          key: routeKey,
           type: 'button',
           className: 'dshmf-row',
           'aria-pressed': selected,
@@ -2020,15 +3076,37 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           title: rowTitle,
           disabled: busy,
           onClick: () => { chooseModel(providerId, model) },
+          // The pointer must REST for MARQUEE_DELAY before anything moves, so
+          // sweeping across the grid never triggers it. Measuring happens in
+          // the timeout, when the row is laid out and the panel is settled.
+          onMouseEnter: event => { enterRow(routeKey, event?.currentTarget) },
+          onMouseLeave: () => { leaveRow(routeKey) },
+          // Keyboard focus counts as "resting on the row" for the same reason
+          // the tooltip does: a focused row is one the user is looking at.
+          onFocus: event => { enterRow(routeKey, event?.currentTarget) },
+          onBlur: () => { leaveRow(routeKey) },
         },
           // `nameRuns` (xN multiplier markers) is applied to whatever the
           // primary text is: the model name under provider grouping, or the
-          // provider name under family grouping.
-          h('span', { className: 'dshmf-rowName' }, ...nameRuns(primary)),
+          // provider name under family grouping. Only the track (inside the
+          // clipped window) moves; the variant tail, the badge and the spinner
+          // are siblings AFTER the window and stay put on the right.
+          h('span', { className: 'dshmf-rowNameWindow' },
+            running
+              ? renderNameTrack({ shift: marquee.shift, duration: marquee.duration, children: nameRuns(primary) })
+              : h('span', { className: 'dshmf-rowNameTrack dshmf-rowName' }, ...nameRuns(primary)),
+          ),
+          // The model-specific tail sits at the END of the row, after the
+          // primary text: the heading already names the family, and the
+          // provider is the primary text, so what is LEFT is the型号 and the
+          // multiplier (`3.8-Flash-Next`, `V4.1-Flash · x0.01`). It runs
+          // through `nameRuns` too, so a multiplier in the tail keeps the
+          // same two-sizes-smaller treatment it gets inside a model name.
+          // It shrinks before the primary text and never wraps.
           showVariant ? h('span', {
             className: 'dshmf-rowProvider',
             title: rowVariant,
-          }, rowVariant) : null,
+          }, ...nameRuns(rowVariant)) : null,
           badge === null ? null : h('span', {
             className: 'dshmf-badge',
             'data-tone': badge.tone,
@@ -2042,12 +3120,34 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         ? 'status.loading'
         : totalModels === 0 ? 'empty.models' : 'empty.search'
 
-      const renderBlock = block => (block.kind === 'title'
-        ? h('div', {
+      // A group title is a marquee-able band like a model row (DEC-023): the
+      // band itself is the frame and never moves, while its text sits in a
+      // clipped window around a track that slides on hover when the heading
+      // does not fit its column. Titles and rows share one state machine, keyed
+      // by `block.key` (`t:…`) versus a row's route key, so only one thing in
+      // the whole panel scrolls at a time. The band keeps its `title` tooltip
+      // for the hover case the OS tooltip covers.
+      const renderTitle = block => {
+        const running = marquee.key === block.key
+        return h('div', {
           className: 'dshmf-groupTitle',
           key: block.key,
           title: block.label,
-        }, block.label)
+          // A heading has no action of its own: these handlers only arm the
+          // marquee, so keyboard focus is deliberately NOT a trigger.
+          onMouseEnter: event => { enterRow(block.key, event?.currentTarget, '.dshmf-groupTitleWindow') },
+          onMouseLeave: () => { leaveRow(block.key) },
+        },
+          h('span', { className: 'dshmf-groupTitleWindow' },
+            running
+              ? renderTitleTrack({ shift: marquee.shift, duration: marquee.duration, children: block.label })
+              : h('span', { className: 'dshmf-groupTitleTrack' }, block.label),
+          ),
+        )
+      }
+
+      const renderBlock = block => (block.kind === 'title'
+        ? renderTitle(block)
         : renderRow(block.entry))
 
       // Each child is placed EXPLICITLY (`grid-column` below), never by
@@ -2154,11 +3254,16 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             }
             setSelectionFocus(false)
             triggerRef.current?.focus()
+            // Opening the panel IS showing the models: ask the store to re-read
+            // the clock first, so a strike that went stale while the panel was
+            // closed is gone from the rows this click draws (DEC-024).
+            if (typeof markFace.refresh === 'function') markFace.refresh()
             setOpen(true)
           },
         },
           svg(PATH_MODELS, 16, { className: 'dshmf-triggerIcon' }),
-          h('span', { className: 'dshmf-triggerText' }, modelLabel),
+          h('span', { className: 'dshmf-triggerText' },
+            labelNode === undefined ? triggerFallbackLabel() : labelNode),
           effortLabel === undefined ? null : h('span', { className: 'dshmf-triggerEffort' }, effortLabel),
           busy
             ? h('span', { className: 'dshmf-spin' })
@@ -2253,15 +3358,14 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
               state.failures.length === 0 ? null : state.failures.map(renderFailure),
             ),
 
-            // ---- fixed: reasoning levels of the current model, rendered as
-            // one labelled group of mutually exclusive choices
-            // ---- fixed, bottom: the agent teamwork switch. `teamAvailable`
-            // is evaluated per render because the remote scope may bind late.
-            // Both live in ONE footer flex container: they share a line when
-            // they fit with the 30px gap, otherwise each takes its own line.
-            (effortChoices.length === 0 && (teamMode === undefined || !teamAvailable()))
-              ? null
-              : h('div', { className: 'dshmf-footer', ref: footerRef },
+            // ---- fixed, bottom: the adaptive footer.
+            // It ALWAYS renders now: the reasoning group, the teamwork row and
+            // the display-mode button live in ONE flex container, and the mode
+            // button is the one member that is always present (the other two
+            // come and go with the model and the remote scope). They share a
+            // line when they fit with the 30px gap, otherwise each takes its own
+            // line; the mode button is pushed to the trailing edge.
+            h('div', { className: 'dshmf-footer', ref: footerRef },
                 effortChoices.length === 0 ? null : h('div', {
                   className: 'dshmf-reason',
                   ref: reasonRef,
@@ -2316,6 +3420,30 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
                       onClick: () => { changeTeamMode(!teamMode.enabled) },
                     }, h('span', { className: 'dshmf-thumb' })),
                   ),
+
+                // ---- display mode: hand the seat back to the Host's own
+                // picker, or take it back. One button, `aria-pressed` carrying
+                // the state. It is the footer's trailing member, so an auto left
+                // margin pins it to the panel's bottom-right and the wrap rule
+                // keeps every other member left-aligned.
+                // Disabled while the Host ships no picker to hand over to — a
+                // seat nobody would take must never empty the composer.
+                // Clicking TOGGLES: a pressed button means native mode is in
+                // effect, so it must offer the way back rather than re-assert
+                // the mode that is already on.
+                h('button', {
+                  type: 'button',
+                  className: 'dshmf-modeBtn',
+                  'aria-pressed': modeIsNative,
+                  'aria-label': modeIsNative
+                    ? t('native.back')
+                    : (canGoNative ? t('native.enter') : t('native.unavailable')),
+                  title: modeIsNative
+                    ? t('native.back')
+                    : (canGoNative ? t('native.enter') : t('native.unavailable')),
+                  disabled: !canGoNative,
+                  onClick: () => { switchMode(modeIsNative ? 'flat' : 'native') },
+                }, t('native.label')),
               ),
 
             // ---- fixed: teamwork disable confirmation
@@ -2354,14 +3482,20 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             }, teamFailure),
 
             // ---- measurement probe (never painted). It mirrors a family-
-            // grouped row (provider primary + variant tag), the widest row
-            // shape, so the measured row height covers every mode. It carries
-            // no trailing tail: the selected row is a filled band now and the
-            // spinner is only drawn for a pending selection.
+            // grouped row (provider primary + model-specific tail) and a group
+            // title, the two shapes the grid can draw, so the measured row and
+            // head heights cover every mode. Both now use the window/track
+            // split (DEC-021, DEC-023), so the probe mirrors that too — a track
+            // inside a clipped window is what the grid actually sizes. It
+            // carries no badge and no spinner: the selected row is a filled band
+            // now and the spinner is only drawn for a pending selection.
             h('div', { className: 'dshmf-probe', 'aria-hidden': 'true' },
-              h('div', { ref: probeHeadRef, className: 'dshmf-groupTitle' }, 'X'),
+              h('div', { ref: probeHeadRef, className: 'dshmf-groupTitle' },
+                h('span', { className: 'dshmf-groupTitleWindow' },
+                  h('span', { className: 'dshmf-groupTitleTrack' }, 'X'))),
               h('div', { ref: probeRowRef, className: 'dshmf-row' },
-                h('span', { className: 'dshmf-rowName' }, 'X'),
+                h('span', { className: 'dshmf-rowNameWindow' },
+                  h('span', { className: 'dshmf-rowNameTrack dshmf-rowName' }, 'X')),
                 h('span', { className: 'dshmf-rowProvider' }, 'X'),
               ),
             ),
@@ -2371,6 +3505,43 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       )
     }
 
+    // ---------------------------------------------------------------------
+    // Label boundary
+    // ---------------------------------------------------------------------
+    /**
+     * Keep the trigger alive when the label cell's occupant fails.
+     *
+     * The occupant is another plugin's component, rendered here on the
+     * documented owner-props contract but without the renderer's own per-entry
+     * error boundary. It can therefore throw on a host whose props differ from
+     * the ones it was written for, or on data it did not expect. Catching it
+     * here costs the decoration, never the seat: the caller's `fallback` is
+     * `undefined`, which makes the trigger draw the catalog name exactly as the
+     * shipped picker does when the cell has no occupant.
+     *
+     * The report is once per failure, not once per render — a chip that throws
+     * on every paint would otherwise flood the console.
+     */
+    class LabelBoundary extends React.Component {
+      constructor(props) {
+        super(props)
+        this.state = { failed: false }
+      }
+
+      static getDerivedStateFromError() {
+        return { failed: true }
+      }
+
+      componentDidCatch(error, info) {
+        console.error('dsh-model-flatmap: the model label slot failed; the trigger falls back to the catalog name', error, info)
+      }
+
+      render() {
+        if (this.state.failed) return this.props.fallback ?? null
+        return this.props.children
+      }
+    }
+
     // ---------------------------------------------------------------------
     // Seat boundary
     // ---------------------------------------------------------------------
@@ -2452,6 +3623,68 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         h(ModelFlatMap, props))
     }
 
+    /**
+     * The way back out of native mode.
+     *
+     * Native mode DISPOSES this plugin's `conversation.input.model` entry, so
+     * the footer button that switched it disappears with the panel. This row
+     * rides the HOST picker's own root menu instead: `conversation.input.model.
+     * options` is the list child slot the shipped `ModelSelect` declares and
+     * renders right after its Model / Effort rows, so the control appears at
+     * the bottom of the native picker's own panel — the one place that both
+     * survives the seat's disposal AND belongs to the control it acts on. No
+     * host component is rendered, imported or copied; the slot is a public
+     * declaration of the installed package.
+     *
+     * It renders NOTHING unless native mode is in effect, so the shipped menu
+     * looks exactly as shipped while the flat panel is the one on screen.
+     *
+     * Visually it is NOT a menu row. Every row above it answers "which value?";
+     * this one performs an action, so it sits below a separator rule and is
+     * drawn as an outlined push button. The slot gives us only a
+     * `display: contents` anchor, so the whole box is ours to style.
+     *
+     * It reads the same page-wide store as the panel's footer button, so a
+     * switch made here is the switch the panel sees when it comes back.
+     * @param props - the slot's standard props plus the injected mode face.
+     */
+    function NativeMenuRow(props) {
+      const {
+        t, displayMode, setDisplayMode, nativeAvailable, dismiss,
+      } = props
+      const modeFace = displayMode ?? FLAT_DISPLAY_MODE
+      const subscribeMode = useCallback(listener => modeFace.subscribe(listener), [modeFace])
+      const getMode = useCallback(() => modeFace.getSnapshot(), [modeFace])
+      const mode = useSyncExternalStore(subscribeMode, getMode, getMode)
+      // The panel's own business: this row exists only while the Host's picker
+      // is the seat on screen.
+      if (mode !== 'native') return null
+      const canGoFlat = typeof nativeAvailable !== 'function' || nativeAvailable() === true
+      if (!canGoFlat) return null
+      const translate = typeof t === 'function' ? t : key => key
+      // A band whose top rule separates an ACTION from the value rows above it,
+      // then a full-width outlined button inside. Keeping the anchor full-width
+      // is what makes the rule span the menu; the button is what reads as
+      // something to press rather than something to choose.
+      return h('div', { className: 'dshmf-modeAction' },
+        h('button', {
+          type: 'button',
+          className: 'dshmf-modeBtnRow',
+          title: translate('native.back'),
+          onClick: () => {
+            // Let the host close its own menu before switching: the switch
+            // disposes the entry that owns this menu, and closing on the host's
+            // own terms (its state, its listener cleanup, its focus handoff)
+            // beats having a portaled menu unmount underneath the click.
+            if (typeof dismiss === 'function') dismiss()
+            if (typeof setDisplayMode === 'function') setDisplayMode('flat')
+            else modeFace.set('flat')
+          },
+        },
+          svg(PATH_GRID, 13, { className: 'dshmf-modeBtnRowIcon' }),
+          h('span', { className: 'dshmf-modeBtnRowLabel' }, translate('native.back'))))
+    }
+
     // ---------------------------------------------------------------------
     // Plugin
     // ---------------------------------------------------------------------
@@ -2466,9 +3699,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       // Pure layout and grouping derivations plus the component itself,
       // exposed for `node --test` so grouping, filtering and the column
       // algorithm are pinned without a browser. The shell never reads this key.
-      __test: { familyOf, familyRank, familyVariant: rowVariantOf, idVariantOf, matchScore, providerScore, searchTokens, buildUnits, columnHeight, packColumns, planColumns, readGrouping, writeGrouping, GROUPING_KEY, GROUPING_DEFAULT, isInsufficientBalance, decideMark, eventTimeOf, foldInsufficient, foldMarkEntry, routeOfHeader, routeKeyOf, MARKS_KEY, MARKS_TTL, parseMarks, serializeMarks, readMarks, writeMarks, createMarkStore },
+      __test: { marqueePassGeometry, nameClippedBy, MARQUEE_DELAY, MARQUEE_PX_PER_SECOND, MARQUEE_MIN_MS, familyOf, familyRank, familyVariant: rowVariantOf, idVariantOf, matchScore, providerScore, searchTokens, buildUnits, columnHeight, packColumns, planColumns, readGrouping, writeGrouping, GROUPING_KEY, GROUPING_DEFAULT, readDisplayMode, writeDisplayMode, createDisplayModeStore, DISPLAY_MODE_KEY, DISPLAY_MODE_DEFAULT, FLAT_DISPLAY_MODE, isInsufficientBalance, decideMark, eventTimeOf, foldInsufficient, foldMarkEntry, routeOfHeader, routeKeyOf, MARKS_KEY, MARKS_TTL, STRIKE_TTL, markIsLive, parseMarks, serializeMarks, readMarks, writeMarks, createMarkStore, quantizeMetric, metricChanged, METRIC_HYSTERESIS, LabelBoundary, readLabelEntry, labelSeat, labelSlotSource, LABEL_SLOT, providerLabel },
       __component: ModelFlatMap,
       __seat: Seat,
+      __nativeMenuRow: NativeMenuRow,
       apply(ctx) {
         const read = name => {
           try {
@@ -2550,6 +3784,72 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           markStore = undefined
         }
 
+        // ---- the display-mode store (flat panel vs the Host's own picker)
+        //
+        // One store per activation, shared by the panel's footer button and the
+        // composer-row chip that outlives it. `readDisplayMode` already returned
+        // `flat` for a missing or unreadable store, so a persistence failure
+        // costs the memory of the choice, never the control.
+        let modeStore
+        try {
+          modeStore = createDisplayModeStore({
+            readStored: readDisplayMode,
+            writeStored: writeDisplayMode,
+          })
+          ctx.effect(() => () => { modeStore.dispose?.() }, 'dsh-model-flatmap: display mode')
+        } catch (error) {
+          console.error('dsh-model-flatmap: the display mode store failed to start', error)
+          modeStore = createDisplayModeStore({ readStored: () => DISPLAY_MODE_DEFAULT })
+        }
+
+        /**
+         * Every OTHER live registration in the model seat.
+         *
+         * A `single` slot keeps every registration and elects the highest
+         * priority; this plugin only owns the cell because it registers at a
+         * negative priority. Disposing our own entry therefore hands the cell to
+         * whatever is underneath — normally the shipped `ModelSelect` — with no
+         * copy, import or re-mount, so an upgraded DSH shows its own newest
+         * picker (DEC-027).
+         * @returns the competing entries, or `undefined` when the Host cannot
+         *   enumerate them (an older version): unverifiable means "do not step
+         *   aside", never a blank composer.
+         */
+        const otherEntries = () => {
+          try {
+            if (typeof slots.entries !== 'function') return undefined
+            const all = slots.entries('conversation.input.model')
+            if (!Array.isArray(all)) return undefined
+            return all.filter(entry => entry?.component !== Seat)
+          } catch {
+            return undefined
+          }
+        }
+        /**
+         * May the panel hand the seat over? Only when another live entry exists
+         * to inherit it. Deliberately does NOT require the shipped package name:
+         * a composed profile may legitimately elect another plugin's seat, and
+         * that is exactly what the user asked to see.
+         * @returns whether disposing this entry leaves a model control behind.
+         */
+        const canStepAside = () => {
+          const others = otherEntries()
+          return others !== undefined && others.length > 0
+        }
+        /** Report the inheriting entry once, so a support log names the target. */
+        let inheritReported = false
+        const reportInherit = () => {
+          if (inheritReported) return
+          inheritReported = true
+          try {
+            const others = otherEntries()
+            const names = (others ?? []).map(entry => entry?.registrant ?? entry?.options?.id ?? 'unknown')
+            console.info(`dsh-model-flatmap: the model seat is handed to ${names.join(', ') || 'no entry'}`)
+          } catch {
+            /* diagnostics only */
+          }
+        }
+
         /**
          * Build the injected face for one Session.
          * @param sessionId - the Session this seat renders for.
@@ -2637,6 +3937,37 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
                 ? Promise.resolve(undefined)
                 : service.setEnabled(sessionId, enabled)
             },
+            // Display mode: the ONE page-wide store, read by both this seat's
+            // footer button and the composer-row chip that takes over while
+            // this seat is disposed.
+            displayMode: modeStore,
+            setDisplayMode: value => { modeStore.set(value) },
+            // Lazy for the same reason as `teamAvailable`: the shipped entry can
+            // register AFTER this face is built, and the button has to enable
+            // itself without a reload.
+            nativeAvailable: canStepAside,
+            // The trigger's label: the entry that owns the shipped picker's
+            // model-label cell, plus the two seats it needs to render (its own
+            // locale namespace and its business inject). Resolved per call so a
+            // connection plugin that registers a moment after boot still gets
+            // its chip on the trigger without a reload (DEC-030).
+            labelEntry: () => readLabelEntry(safeRead('slots')),
+            labelSeatFor: namespace => labelSeat(safeRead('locale'), namespace),
+            labelFace: entry => {
+              if (entry === undefined || typeof entry.inject !== 'function') return {}
+              try {
+                // The renderer's own contract: a session-scoped entry's inject
+                // receives the Session id and is merged UNDER the owner props.
+                const face = entry.inject(sessionId)
+                return face !== null && typeof face === 'object' ? face : {}
+              } catch (error) {
+                console.error('dsh-model-flatmap: the label slot face failed to build', error)
+                return {}
+              }
+            },
+            // A stable subscribe/getSnapshot pair so the trigger re-reads the
+            // winning entry when a connection plugin registers or disposes.
+            labelSlot: labelSlotSource(safeRead('slots')),
           }
         }
 
@@ -2669,6 +4000,13 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
               // unstruck. It shares the module-level empty snapshot so the
               // identity stays stable across renders.
               insufficient: EMPTY_INSUFFICIENT,
+              // Same principle for the mode: a stable flat snapshot and a
+              // no-op setter keep the footer's hook shape intact. Stepping aside
+              // is refused outright — a face this broken must not hand the
+              // composer to anything.
+              displayMode: FLAT_DISPLAY_MODE,
+              setDisplayMode: () => {},
+              nativeAvailable: () => false,
             }
           }
         }
@@ -2695,11 +4033,108 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           return () => {}
         }
 
+        // ---- the mode controller
+        //
+        // Flat mode keeps this plugin's entry registered (it shadows the
+        // shipped one at a negative priority). Native mode DISPOSES that entry,
+        // which elects the shipped picker underneath. Mount and unmount are
+        // therefore the two halves of one switch, and both are idempotent: the
+        // notify path re-enters `syncMode` through our own slot mutations.
+        let seatDispose
+        /** Guard against re-entry from our own registration changes. */
+        let syncing = false
+        const mountSeat = () => {
+          if (seatDispose !== undefined) return
+          seatDispose = registerSeat()
+        }
+        const unmountSeat = () => {
+          const dispose = seatDispose
+          if (dispose === undefined) return
+          seatDispose = undefined
+          try {
+            dispose()
+          } catch (error) {
+            console.error('dsh-model-flatmap: the model seat did not dispose cleanly', error)
+          }
+        }
+        /**
+         * Reconcile the registration with the store. Native mode only takes
+         * effect when another entry can inherit the cell — otherwise the panel
+         * stays, so a profile without the shipped picker never loses its model
+         * control.
+         */
+        const syncMode = () => {
+          if (syncing) return
+          syncing = true
+          try {
+            const wantsNative = modeStore.getSnapshot() === 'native'
+            if (wantsNative && canStepAside()) {
+              reportInherit()
+              unmountSeat()
+            } else {
+              mountSeat()
+            }
+          } finally {
+            syncing = false
+          }
+        }
+
         try {
-          slots.inject('conversation.input.model', registerSeat)
+          slots.inject('conversation.input.model', () => {
+            syncMode()
+            const offMode = modeStore.subscribe(syncMode)
+            // The shipped entry may register after ours, and a competing entry
+            // may unload: both change whether stepping aside is possible, so the
+            // button's availability rides the same reconcile.
+            const offSlot = typeof slots.subscribe === 'function'
+              ? slots.subscribe('conversation.input.model', syncMode)
+              : undefined
+            return () => {
+              if (typeof offMode === 'function') offMode()
+              if (typeof offSlot === 'function') offSlot()
+              unmountSeat()
+            }
+          })
         } catch (error) {
           console.error('dsh-model-flatmap: slots.inject failed for the model seat', error)
         }
+
+        // ---- the chip that brings the panel back from native mode
+        //
+        // Native mode disposes the seat, and with it the footer button that
+        // switched. The way back rides the HOST picker's OWN root menu instead:
+        // `conversation.input.model.options` is the list child slot the shipped
+        // `ModelSelect` declares and renders after its Model / Effort rows, so
+        // our row appears at the bottom of the native panel itself. It survives
+        // the seat's disposal (it belongs to the shipped entry, not to ours) and
+        // renders nothing while the flat panel is the seat on screen.
+        try {
+          if (typeof slots.inject === 'function') {
+            slots.inject('conversation.input.model.options', () => {
+              if (typeof slots.register !== 'function') return () => {}
+              try {
+                return slots.register({
+                  name: 'conversation.input.model.options',
+                  id: 'dsh-model-flatmap.native',
+                  order: 50,
+                  locale: NS,
+                  inject: () => ({
+                    displayMode: modeStore,
+                    setDisplayMode: value => { modeStore.set(value) },
+                    nativeAvailable: canStepAside,
+                  }),
+                }, NativeMenuRow)
+              } catch (error) {
+                console.error('dsh-model-flatmap: the native-mode menu row was not registered', error)
+                return () => {}
+              }
+            })
+          }
+        } catch (error) {
+          // Losing the row costs the way BACK, never the way in: the panel and
+          // its footer button still work, and a reload restores flat mode.
+          console.error('dsh-model-flatmap: slots.inject failed for the native-mode menu row', error)
+        }
       },
     }
   },