dsh-model-flatmap 1.0.3 → 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); }
@@ -334,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
@@ -439,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', {
@@ -464,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
@@ -1221,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.
     //
@@ -1405,7 +1677,12 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       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()
@@ -1515,17 +1792,28 @@ 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)
@@ -1535,12 +1823,23 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       }
 
       /**
-       * 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 {
@@ -1551,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 {
@@ -1565,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 */
         }
@@ -1578,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()
@@ -1605,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)
           }
@@ -1652,7 +1967,7 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             clearTimeout(expiryTimer)
             expiryTimer = null
           }
-          for (const stop of stops.values()) stop()
+          for (const attached of stops.values()) attached.stop()
           stops.clear()
           routes.clear()
           pinned.clear()
@@ -1693,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',
@@ -1723,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',
       },
     }
 
@@ -1774,6 +2097,126 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       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
@@ -1908,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),
@@ -1930,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.
@@ -2081,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
@@ -2213,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 }))
@@ -2265,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(() => {
@@ -2416,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,
@@ -2665,7 +3262,8 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           },
         },
           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' })
@@ -2760,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,
@@ -2823,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
@@ -2884,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
     // ---------------------------------------------------------------------
@@ -2965,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
     // ---------------------------------------------------------------------
@@ -2979,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: { 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, isInsufficientBalance, decideMark, eventTimeOf, foldInsufficient, foldMarkEntry, routeOfHeader, routeKeyOf, MARKS_KEY, MARKS_TTL, STRIKE_TTL, markIsLive, 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 {
@@ -3063,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.
@@ -3150,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')),
           }
         }
 
@@ -3182,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,
             }
           }
         }
@@ -3208,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)
+        }
       },
     }
   },