dsh-model-flatmap 1.0.0 → 1.0.1

package/README.md

@@ -7,8 +7,9 @@
 
 ## What it is
 
-`dsh-model-flatmap` is a **browser-only** DSH plugin. It replaces the composer's
-`conversation.input.model` seat with a single flat panel rendered in the Web GUI.
+`dsh-model-flatmap` is a **client-side** DSH plugin that runs in both the **Web GUI and the
+Desktop app**. It replaces the composer's `conversation.input.model` seat with a single flat
+panel rendered in the client UI.
 Instead of nested popovers, the whole catalogue is one searchable grid where the
 model grid, the current model's reasoning levels, and the agent-teamwork switch
 are all visible at once.
@@ -58,12 +59,18 @@ levels, and the agent-teamwork switch on one surface:
 - **Adaptive footer.** The reasoning group and the agent-teamwork switch share
   one line when both fit with a 30 px gap, and fall back to one row each when
   they do not — the break is CSS flex wrapping, not a measured pixel threshold.
-- **Out-of-balance models are struck through.** A model whose last call failed
-  on insufficient balance, credit, or quota keeps a `line-through` on its row
-  text until a later call for that same model returns anything else. The strike
-  follows the model the failing request actually used, and covers the Host's
-  `QUOTA` / `ACCOUNT_QUOTA` codes, a provider `402`, and a `429` whose body
-  reports an empty balance — a plain rate limit never strikes.
+- **Out-of-balance models are struck through — everywhere.** A model whose last
+  call failed on insufficient balance, credit, or quota keeps a `line-through`
+  on its row text until a later call for that same model returns anything else.
+  The strike follows the model the failing request actually used, and covers the
+  Host's `QUOTA` / `ACCOUNT_QUOTA` codes, a provider `402`, and a `429` whose
+  body reports an empty balance — a plain rate limit never strikes. Because a
+  balance is a property of the model route and its account, **not of one
+  conversation**, the marks are global: a failure seen in any Session strikes
+  the model in every Session and workspace, and the state is persisted to
+  `localStorage` so it survives a reload. Observations are ordered by event
+  time, so the newest one wins and replaying older history cannot resurrect a
+  strike that a later call already cleared.
 - **Theme-aware.** Styled with host theme tokens only; looks correct in both
   light and dark themes.
 

package/README.zh.md

@@ -7,8 +7,8 @@
 
 ## 这是什么
 
-`dsh-model-flatmap` 是一个**纯浏览器端**的 DSH 插件。它把会话输入框中的
-`conversation.input.model` 控件替换成一个平铺面板，渲染在 Web GUI 内。面板没有
+`dsh-model-flatmap` 是一个**客户端** DSH 插件，在 **Web GUI 与桌面端** 均生效。它把会话输入框中的
+`conversation.input.model` 控件替换成一个平铺面板，渲染在客户端界面中。面板没有
 嵌套的二级菜单：模型网格、当前模型的推理等级，以及智能体协作开关，全部同时可见。
 
 插件**只通过公开的 Client API 读写数据**——每个会话的模型目录、协作设置、以及宿主
@@ -48,10 +48,14 @@
   基于 radio 语义）。
 - **自适应底栏。** 推理等级组与智能体协作开关在放得下（中间至少 30 px）时共用一行，
   放不下时各自占一行回到原来的两行布局——换行由 CSS flex 换行决定，不靠 JS 量像素。
-- **额度不足的模型加删除线。** 某个模型的调用因额度/余额/信用不足而失败后，该模型的
-  行文字会带 `line-through` 删除线，直到同一个模型的下一次调用返回非额度不足的结果
-  才去掉。标记跟随失败那次请求实际使用的模型；覆盖宿主的 `QUOTA` / `ACCOUNT_QUOTA`
+- **额度不足的模型加删除线，且全局生效。** 某个模型的调用因额度/余额/信用不足而失败后，
+  该模型的行文字会带 `line-through` 删除线，直到同一个模型的下一次调用返回非额度不足的
+  结果才去掉。标记跟随失败那次请求实际使用的模型；覆盖宿主的 `QUOTA` / `ACCOUNT_QUOTA`
   代码、provider 的 `402`，以及**正文说明余额不足的 `429`**——纯限流的 429 不会划线。
+  因为「还有没有额度」是模型路由（及其账号）的属性、**与单个会话无关**，所以标记是全局的：
+  在任意会话里观察到的失败，会在所有会话与工作区里同样划线；状态持久化在 `localStorage`
+  中，重载后仍然保留。观察按事件时间排序，最新的一条说了算，因此回放更早的历史不会让一条
+  已被后续调用清除的划线复活。
 - **跟随主题。** 仅使用宿主主题令牌着色，在浅色与深色主题下都正确。
 
 完整行为规格见 [`docs/DETAIL.md`](./docs/DETAIL.md)，设计决策见

package/client.js

@@ -118,16 +118,32 @@ window.__ModuleLoader__.load({
   color: var(--dsw-alias-state-error-primary); font-size: 11px; line-height: 16px; overflow-wrap: anywhere;
 }
 
-/* The only scrolling region. */
-.dshmf-grid { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; display: grid; align-items: start; }
+/* The only scrolling region. Its "align-items: start" keeps the text columns
+   at their natural height; a divider laid out beside them opts back into
+   stretch so it spans the tallest column instead (see .dshmf-colDivider).
+   Every child is placed explicitly by grid-column (and the divider by
+   grid-row) — see the inline style on each one. Auto-placement must NOT be
+   relied on here: a divider that pins its row but not its column is placed
+   first, stealing column 1, and the columns then overflow to columns 2 and 3,
+   squashing the first text column. */
+.dshmf-grid {
+  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
+  display: grid; align-items: start;
+}
 .dshmf-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 /* When more than one column is laid out, separate adjacent columns with a
    faint vertical hairline so the eye can tell the dense model flows apart.
-   The line uses the lightest border token to stay subtle, and the divided
-   column keeps a little right padding so model text never hugs the line.
-   Only columns that actually sit before another one get it (see renderColumn),
-   so a single-column layout stays borderless. */
-.dshmf-col--divided { border-right: 1px solid var(--dsw-alias-border-l3); padding-right: 10px; }
+   The hairline is its OWN grid item, a sibling of the columns rather than a
+   border on one of them: as a border it could only ever be as tall as that
+   column's content. Here it sits in a dedicated gutter track and stretches to
+   the grid's full height, with a small margin top and bottom.
+   Only gutters that actually sit between two columns get one (see the grid
+   children), so a single-column layout stays borderless. */
+.dshmf-colDivider {
+  grid-row: 1; align-self: stretch; justify-self: center;
+  width: 1px; margin: 6px 0;
+  background: var(--dsw-alias-border-l3);
+}
 /* Provider / family label: a filled, rounded band that reads as a section
    header, clearly separated from the model rows below it. Bare host
    group-header fill is only a few levels from the translucent panel surface.
@@ -240,30 +256,28 @@ window.__ModuleLoader__.load({
    No JS width guessing, so it stays correct across panel resize, theme and
    font changes. A max-width of 100% lets a child that ends up alone on a line
    cap to the panel width and wrap internally instead of overflowing.
-   The teamwork row carries no divider of its own (DEC-011 keeps the single
-   grey rule above the reasoning group only), so a shared line needs no
-   border juggling. */
+   The divider sits on this container, not on a child (DEC-016): the two groups
+   can share a line or stack, and either way the rule belongs above the whole
+   footer block, never between them, so no child carries a border. Host border
+   tokens are faint by design, so the line uses explicit greys: medium grey on
+   the light panel, a lighter near-white grey on the dark panel. */
 .dshmf-footer {
   flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap;
   column-gap: 30px; row-gap: 4px;
+  border-top: 1px solid #9CA3AF;
+  padding-top: 6px;
 }
+body[data-ds-dark-theme] .dshmf-footer,
+html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
 
 /* 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
    one visual language for "one of many, exactly one active". */
-/* One obvious grey divider between the scrolling model grid and the fixed
-   reasoning row. Host border tokens are faint by design, so this line uses
-   explicit greys: medium grey on the light panel, a lighter near-white grey
-   on the dark panel. The teamwork row below has no line (DEC-011). */
 .dshmf-reason {
   flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap;
   gap: 2px 6px; max-width: 100%;
-  border-top: 1px solid #9CA3AF;
-  padding-top: 6px;
 }
-body[data-ds-dark-theme] .dshmf-reason,
-html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
 .dshmf-reasonLabel {
   flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
   white-space: nowrap;
@@ -568,37 +582,88 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
     const CLEARING_TURN_ENDS = new Set(['completed', 'max-tokens', 'error'])
 
     /**
-     * Fold ONE durable session event into the per-route insufficient-balance
-     * state. Pure and reference-preserving, so an unrelated event costs nothing
-     * and the caller can compare identity to decide whether to republish.
+     * 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.
+     * @param {unknown} event - one durable Session event.
+     * @returns {number} the event time, or 0 when the feed carried none.
+     */
+    function eventTimeOf(event) {
+      const time = event?.time
+      return typeof time === 'number' && Number.isFinite(time) ? time : 0
+    }
+
+    /**
+     * Decide what ONE durable event says about a model route's balance, with no
+     * state involved. This is the whole semantic core of the feature, kept
+     * separate from the bookkeeping so it can be pinned directly.
      *
-     * A `turn/end` carrying a balance failure marks the route that request used.
-     * A later `turn/end` for the same route that proves the model answered
-     * without a balance failure clears the mark — a completed turn, or a turn
-     * that failed for another reason. A cancellation or a blocked turn clears
-     * nothing, because the model never answered. The route a `turn/end` belongs
-     * to is the latest `request/header` seen before it, which is exactly the
-     * model the failing request was dispatched to.
-     * @param {Map<string, boolean>} state - current marks, mutated in place.
-     * @param {unknown} event - one durable Session event (`{ type, data }`).
-     * @param {{ provider: string, model: string } | null} route - route resolved from the request header, or null.
-     * @returns {boolean} whether the state changed.
+     * - A `turn/end` that failed on insufficient balance → `true` (mark).
+     * - A `turn/end` that proves the model answered otherwise → `false`
+     *   (clear): a completed turn, a `max-tokens` turn, or a turn that failed
+     *   for a different reason.
+     * - A cancellation (`aborted`), a `blocked` turn, and the synthetic
+     *   `interrupted` / `forked` closers → `null` (no decision), because the
+     *   model never answered and the account state is unknown.
+     * - Anything that is not a `turn/end`, or has no route → `null`.
+     * @param {unknown} event - one durable Session event.
+     * @param {{ provider: string, model: string } | null} route - the route that request used.
+     * @returns {boolean | null} mark, clear, or no decision.
      */
-    function foldInsufficient(state, event, route) {
-      if (event === null || typeof event !== 'object') return false
-      if (event.type !== 'turn/end' || route === null) return false
+    function decideMark(event, route) {
+      if (event === null || typeof event !== 'object') return null
+      if (event.type !== 'turn/end' || route === null || route === undefined) return null
       const reason = event.data?.reason
-      if (reason === null || typeof reason !== 'object') return false
-      const key = routeKeyOf(route.provider, route.model)
-      if (reason.kind === 'error' && isInsufficientBalance(reason.error)) {
-        if (state.get(key) === true) return false
-        state.set(key, true)
-        return true
+      if (reason === null || typeof reason !== 'object') return null
+      if (reason.kind === 'error') return isInsufficientBalance(reason.error)
+      return CLEARING_TURN_ENDS.has(reason.kind) ? false : null
+    }
+
+    /**
+     * Fold ONE decision into the mark map, last-writer-wins by event time.
+     *
+     * The time watermark is what makes the state GLOBAL and replay-safe: marks
+     * arrive from every Session's feed (and from storage written by an earlier
+     * page load), so the newest observation wins no matter which Session it came
+     * from. Re-walking an old window therefore cannot resurrect a mark that a
+     * later call already cleared, and a cleared route keeps a watermark so a
+     * stale replay stays a no-op.
+     * @param {Map<string, {marked: boolean, at: number}>} entries - state, mutated in place.
+     * @param {string} key - the route key.
+     * @param {boolean} marked - the decision this event carries.
+     * @param {number} at - the event's time.
+     * @returns {{ visible: boolean, stored: boolean }} whether the visible mark
+     *   set changed, and whether the underlying record changed.
+     */
+    function foldMarkEntry(entries, key, marked, at) {
+      const previous = entries.get(key)
+      if (previous !== undefined && at < previous.at) {
+        return { visible: false, stored: false }
       }
-      if (!CLEARING_TURN_ENDS.has(reason.kind)) return false
-      if (state.get(key) !== true) return false
-      state.delete(key)
-      return true
+      if (previous !== undefined && previous.marked === marked && previous.at === at) {
+        return { visible: false, stored: false }
+      }
+      entries.set(key, { marked, at })
+      return { visible: previous === undefined ? marked : previous.marked !== marked, stored: true }
+    }
+
+    /**
+     * Fold one durable event into the mark map. Pure helper kept for the tests
+     * and for callers that hold their own map; the live store uses
+     * {@link decideMark} + {@link foldMarkEntry} so it can batch persistence.
+     * @param {Map<string, {marked: boolean, at: number}>} state - state, mutated in place.
+     * @param {unknown} event - one durable Session event.
+     * @param {{ provider: string, model: string } | null} route - the route that request used.
+     * @param {number} [at] - the event's time; defaults to `event.time`.
+     * @returns {boolean} whether the visible mark set changed.
+     */
+    function foldInsufficient(state, event, route, at) {
+      const marked = decideMark(event, route)
+      if (marked === null) return false
+      const key = routeKeyOf(route.provider, route.model)
+      const time = at === undefined ? eventTimeOf(event) : at
+      return foldMarkEntry(state, key, marked, time).visible
     }
 
     /**
@@ -1014,6 +1079,320 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
       }
     }
 
+    // ---------------------------------------------------------------------
+    // Insufficient-balance marks are GLOBAL, not Session-scoped.
+    //
+    // Whether a model has any quota left is a fact about the model route (and
+    // the account behind it), not about one conversation: a failure observed in
+    // one Session must strike the same model everywhere — another Session,
+    // another workspace, and after a reload. So the marks live in ONE
+    // module-level store shared by every seat of this plugin generation, and
+    // are persisted to `localStorage` (origin-scoped, exactly like the grouping
+    // choice) so a fresh page load starts from the last known state.
+    //
+    // Ordering across Sessions is by wall-clock time: each durable event keeps
+    // 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.
+    // ---------------------------------------------------------------------
+    const MARKS_KEY = 'dshmf:insufficient'
+    /** Marks older than this are dropped on read, so a stale strike cannot live forever. */
+    const MARKS_TTL = 7 * 24 * 60 * 60 * 1000
+
+    /**
+     * Parse a persisted mark record into the in-memory shape, dropping anything
+     * malformed or older than {@link MARKS_TTL}. Pure, so the storage format is
+     * testable without a `localStorage` shim.
+     * @param {unknown} raw - the stored JSON value (already parsed).
+     * @param {number} now - current time, injected for testability.
+     * @returns {Map<string, {marked: boolean, at: number}>} the parsed entries.
+     */
+    function parseMarks(raw, now) {
+      const entries = new Map()
+      if (raw === null || typeof raw !== 'object') return entries
+      for (const [key, value] of Object.entries(raw)) {
+        if (typeof key !== 'string' || key === '') continue
+        if (value === null || typeof value !== 'object') continue
+        const at = typeof value.at === 'number' && Number.isFinite(value.at) ? value.at : 0
+        if (typeof value.marked !== 'boolean') continue
+        if (now - at > MARKS_TTL) continue
+        entries.set(key, { marked: value.marked, at })
+      }
+      return entries
+    }
+
+    /**
+     * Serialise the in-memory entries for storage, dropping anything older than
+     * {@link MARKS_TTL} so a long-lived page cannot grow the record forever. A
+     * cleared route keeps its watermark only while it can still protect against
+     * a replayed older failure, which is the same window.
+     * @param {Map<string, {marked: boolean, at: number}>} entries - the state.
+     * @param {number} [now] - current time, injected for testability.
+     * @returns {Record<string, {marked: boolean, at: number}>} a JSON-ready record.
+     */
+    function serializeMarks(entries, now) {
+      const time = now === undefined ? Date.now() : now
+      const out = {}
+      for (const [key, value] of entries) {
+        if (time - value.at > MARKS_TTL) continue
+        out[key] = { marked: value.marked, at: value.at }
+      }
+      return out
+    }
+
+    /**
+     * Read the persisted marks, or an empty map when storage is unavailable,
+     * holds garbage, or throws (private mode, sandboxed frame, quota).
+     * @returns {Map<string, {marked: boolean, at: number}>} the stored entries.
+     */
+    function readMarks() {
+      try {
+        if (typeof localStorage === 'undefined') return new Map()
+        const text = localStorage.getItem(MARKS_KEY)
+        if (text === null || text === '') return new Map()
+        return parseMarks(JSON.parse(text), Date.now())
+      } catch {
+        return new Map()
+      }
+    }
+
+    /**
+     * Persist the marks. A write failure is swallowed: the in-memory store still
+     * drives every open panel in this page.
+     * @param {Map<string, {marked: boolean, at: number}>} entries - the state.
+     */
+    function writeMarks(entries) {
+      try {
+        if (typeof localStorage === 'undefined') return
+        localStorage.setItem(MARKS_KEY, JSON.stringify(serializeMarks(entries)))
+      } catch {
+        /* storage unavailable — keep the in-memory state only */
+      }
+    }
+
+    /** Whether two visible mark maps hold the same entries. */
+    function sameMarks(left, right) {
+      if (left.size !== right.size) return false
+      for (const key of left) {
+        if (!right.has(key)) return false
+      }
+      return true
+    }
+
+    /**
+     * Create the one global mark store for this module generation.
+     *
+     * It owns the state, the listeners, and the Session-feed subscriptions; the
+     * seats only read it. Observing EVERY Session (not just the one a seat
+     * renders for) is what makes a failure recorded anywhere visible
+     * everywhere, including in a Session whose own feed was never opened in this
+     * page load (its marks come from storage).
+     *
+     * @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`.
+     */
+    function createMarkStore(deps) {
+      /** 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. */
+      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. */
+      const stops = new Map()
+      /** Sessions attached on behalf of a mounted seat; never pruned by a list sync. */
+      const pinned = new Set()
+      /** Last `sessions` service seen, so a reloaded service is re-attached. */
+      let attachedSessions
+      let stopList
+      let disposed = false
+
+      /** Rebuild the visible map; report whether the rendered set changed. */
+      const recompute = () => {
+        const next = new Map()
+        for (const [key, entry] of entries) {
+          if (entry.marked) next.set(key, true)
+        }
+        if (sameMarks(visible, next)) return false
+        visible = next
+        snapshot = { marks: visible }
+        return true
+      }
+
+      recompute()
+
+      const publish = () => {
+        for (const listener of listeners) listener()
+      }
+
+      /** Fold one batch of durable entries for one Session. */
+      const absorb = (sessionId, windowEntries) => {
+        let stored = false
+        let changed = false
+        for (const entry of windowEntries) {
+          const event = entry?.event
+          if (event === null || event === undefined) continue
+          const header = routeOfHeader(event)
+          if (header !== null) {
+            routes.set(sessionId, header)
+            continue
+          }
+          if (event.type !== 'turn/end') continue
+          const route = routes.get(sessionId) ?? null
+          const marked = decideMark(event, route)
+          if (marked === null) continue
+          const result = foldMarkEntry(
+            entries, routeKeyOf(route.provider, route.model), marked, eventTimeOf(event),
+          )
+          if (result.stored) stored = true
+          if (result.visible) changed = true
+        }
+        return { stored, changed }
+      }
+
+      /** Read a window's entries defensively. */
+      const entriesOf = window => (Array.isArray(window?.entries) ? window.entries : [])
+
+      /** Apply one feed window for one Session. */
+      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
+          // its entries are re-walked. Global watermarks keep a newer fact from
+          // another Session from being overwritten by this replay.
+          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.
+          return
+        }
+        if (result.stored) deps.writeStored(entries)
+        if (result.changed && recompute()) publish()
+      }
+
+      /**
+       * 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).
+       */
+      const attachSession = sessionId => {
+        if (disposed || stops.has(sessionId)) return
+        const sessions = deps.sessionsOf()
+        let binding
+        try {
+          binding = typeof sessions?.binding === 'function' ? sessions.binding(sessionId) : undefined
+        } catch {
+          binding = undefined
+        }
+        const source = binding?.eventSource
+        if (source === undefined || typeof source.subscribe !== 'function'
+          || typeof source.getSnapshot !== 'function') return
+        try {
+          applyWindow(sessionId, source.getSnapshot(), true)
+        } catch {
+          /* an unreadable feed leaves the store as it was */
+        }
+        const listener = () => {
+          try {
+            applyWindow(sessionId, source.getSnapshot(), false)
+          } catch {
+            /* a fold failure must not escape into the slot */
+          }
+        }
+        try {
+          const stop = source.subscribe(listener)
+          stops.set(sessionId, typeof stop === 'function' ? stop : () => {})
+        } catch {
+          /* subscription refused: leave this Session unattached */
+        }
+      }
+
+      /** Attach to every Session the list currently names, and drop the rest. */
+      const sync = () => {
+        if (disposed) return
+        const sessions = deps.sessionsOf()
+        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()
+          stops.clear()
+          routes.clear()
+          if (typeof stopList === 'function') stopList()
+          stopList = undefined
+          attachedSessions = sessions
+          try {
+            if (sessions.list !== undefined && typeof sessions.list.subscribe === 'function') {
+              stopList = sessions.list.subscribe(() => { sync() })
+            }
+          } catch {
+            stopList = undefined
+          }
+        }
+        let ids = []
+        try {
+          const list = sessions.list?.getSnapshot?.()
+          ids = Array.isArray(list?.ids) ? list.ids : []
+        } catch {
+          ids = []
+        }
+        for (const id of ids) attachSession(id)
+        // Drop feeds for Sessions the list no longer names, unless a mounted
+        // seat is currently reading that Session (it may not be listed yet).
+        for (const id of [...stops.keys()]) {
+          if (pinned.has(id)) continue
+          if (!ids.includes(id)) {
+            stops.get(id)?.()
+            stops.delete(id)
+            routes.delete(id)
+          }
+        }
+      }
+
+      return {
+        /** The seat's `useSyncExternalStore` pair. */
+        subscribe: listener => {
+          listeners.add(listener)
+          sync()
+          return () => { listeners.delete(listener) }
+        },
+        getSnapshot: () => snapshot,
+        /** Re-attach (services may bind after the plugin activated). */
+        sync,
+        /**
+         * Pin and immediately attach one Session's feed, for a mounted seat.
+         * The list may not name this Session yet (or at all), so it is attached
+         * directly instead of waiting for a list sync.
+         */
+        watch: sessionId => {
+          if (disposed) return
+          pinned.add(sessionId)
+          sync()
+          attachSession(sessionId)
+        },
+        /** Release every feed subscription. The marks themselves stay persisted. */
+        dispose: () => {
+          if (disposed) return
+          disposed = true
+          for (const stop of stops.values()) stop()
+          stops.clear()
+          routes.clear()
+          pinned.clear()
+          if (typeof stopList === 'function') stopList()
+          stopList = undefined
+          listeners.clear()
+        },
+      }
+    }
+
     const dict = {
       zh: {
         'provider.account': 'DeepSeek 账号',
@@ -1101,7 +1480,7 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
 
     /**
      * Shared empty mark map. One frozen instance keeps `getSnapshot` referentially
-     * stable for every seat that has no Session feed, so an unmarked panel never
+     * stable for every seat that has no store, so an unmarked panel never
      * re-renders because of this feature.
      */
     const EMPTY_INSUFFICIENT_MARKS = new Map()
@@ -1115,13 +1494,13 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
     const EMPTY_INSUFFICIENT_SNAPSHOT = { marks: EMPTY_INSUFFICIENT_MARKS }
 
     /**
-     * Stand-in mark face used before a Session's feed resolves (or when the face
-     * degraded). It never notifies and always answers the same empty snapshot.
+     * Stand-in mark face used when the store degraded. It never notifies and
+     * always answers the same empty snapshot.
      */
     const EMPTY_INSUFFICIENT = {
       subscribe: () => () => {},
       getSnapshot: () => EMPTY_INSUFFICIENT_SNAPSHOT,
-      dispose: () => {},
+      watch: () => {},
     }
 
     // ---------------------------------------------------------------------
@@ -1150,18 +1529,20 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
       const getSnapshot = useCallback(() => store.getSnapshot(), [store])
       const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
 
-      // Per-model insufficient-balance marks, folded from the Session's own
-      // durable event feed by the face. The fallback keeps the hook shape stable
-      // for a composition that omits the face.
+      // Per-model insufficient-balance marks, read from the ONE global store so
+      // a failure recorded in any Session or workspace strikes the model here
+      // too. The fallback keeps the hook shape stable when the face is omitted.
       const markFace = insufficient ?? EMPTY_INSUFFICIENT
       const subscribeMarks = useCallback(listener => markFace.subscribe(listener), [markFace])
       const getMarks = useCallback(() => markFace.getSnapshot(), [markFace])
       const marks = useSyncExternalStore(subscribeMarks, getMarks, getMarks)
 
-      // The mark face observes the Session feed for as long as this seat is
-      // mounted. Detaching on unmount cannot lose a mark: a remount refolds from
-      // the full durable window, so the state is rebuilt rather than remembered.
-      useEffect(() => () => { markFace.dispose() }, [markFace])
+      // 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.
+      useEffect(() => {
+        if (typeof markFace.watch === 'function') markFace.watch(sessionId)
+      }, [markFace, sessionId])
 
       const [open, setOpen] = useState(false)
       const [query, setQuery] = useState('')
@@ -1661,11 +2042,44 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
         }, block.label)
         : renderRow(block.entry))
 
+      // Each child is placed EXPLICITLY (`grid-column` below), never by
+      // auto-placement: a divider that pinned its row but not its column was
+      // laid out first, took column 1, and pushed the columns into columns 2
+      // and 3 — which squashed the first text column to 1px and stacked the
+      // columns on top of each other. Track 2k+1 holds column k (0-based) and
+      // track 2k+2 the gutter that follows it, so a 3-column layout is
+      // col gutter col gutter col.
       const renderColumn = (column, columnIndex) => h('div', {
-        className: 'dshmf-col' + (plan.count > 1 && columnIndex < plan.count - 1 ? ' dshmf-col--divided' : ''),
+        className: 'dshmf-col',
         key: `col-${columnIndex}`,
+        style: { gridColumn: String(columnIndex * 2 + 1), gridRow: '1' },
       }, column.map(unit => unit.blocks.map(renderBlock)))
 
+      // Vertical separators are siblings of the columns, not a border on one
+      // of them: a border can only ever be as tall as its own column, while a
+      // grid item can stretch to the whole grid height (see .dshmf-colDivider).
+      // Called with the index of the column that PRECEDES the gutter.
+      const renderDivider = dividerIndex => h('div', {
+        className: 'dshmf-colDivider',
+        role: 'presentation',
+        key: `gutter-${dividerIndex}`,
+        style: { gridColumn: String(dividerIndex * 2), gridRow: '1' },
+      })
+
+      const renderColumns = () => {
+        const children = []
+        plan.columns.forEach((column, columnIndex) => {
+          if (columnIndex > 0) children.push(renderDivider(columnIndex))
+          children.push(renderColumn(column, columnIndex))
+        })
+        return children
+      }
+
+      // `minmax(0, 1fr)` per column, a hairline track per gutter between them.
+      const gridTemplateColumns = plan.columns
+        .map(() => 'minmax(0, 1fr)')
+        .join(' 1px ')
+
       const renderFailure = failure => h('div', {
         className: 'dshmf-failure',
         key: `failure-${failure.id}`,
@@ -1819,13 +2233,15 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
             h('div', {
               className: 'dshmf-grid',
               style: {
-                gridTemplateColumns: `repeat(${plan.count}, minmax(0, 1fr))`,
+                gridTemplateColumns: showEmptyState
+                  ? 'minmax(0, 1fr)'
+                  : gridTemplateColumns,
                 columnGap: `${COL_GAP}px`,
               },
             },
               showEmptyState
                 ? h('div', { className: 'dshmf-empty', role: 'status' }, t(emptyKey))
-                : plan.columns.map(renderColumn),
+                : renderColumns(),
               state.failures.length === 0 ? null : state.failures.map(renderFailure),
             ),
 
@@ -2042,7 +2458,7 @@ html[data-ds-dark-theme] .dshmf-reason { 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, foldInsufficient, routeOfHeader, routeKeyOf },
+      __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 },
       __component: ModelFlatMap,
       __seat: Seat,
       apply(ctx) {
@@ -2099,6 +2515,33 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
           }
         }
 
+        // ---- the GLOBAL insufficient-balance store
+        //
+        // Created once per activation and shared by every seat, because the
+        // balance state belongs to the model route (and its account), not to one
+        // conversation or workspace. It observes every Session the list names,
+        // persists to `localStorage`, and starts from what the last page load
+        // recorded. A failure to build it degrades to an empty face rather than
+        // costing the control.
+        let markStore
+        try {
+          markStore = createMarkStore({
+            sessionsOf: () => {
+              try {
+                return typeof ctx.get === 'function' ? ctx.get('sessions') : undefined
+              } catch {
+                return undefined
+              }
+            },
+            readStored: readMarks,
+            writeStored: writeMarks,
+          })
+          ctx.effect(() => () => { markStore.dispose() }, 'dsh-model-flatmap: balance marks')
+        } catch (error) {
+          console.error('dsh-model-flatmap: the balance mark store failed to start', error)
+          markStore = undefined
+        }
+
         /**
          * Build the injected face for one Session.
          * @param sessionId - the Session this seat renders for.
@@ -2137,146 +2580,27 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
           }
           const first = resolve()
 
-          // ---- insufficient-balance marks, folded from the live event feed
-          //
-          // `sessions.binding(id).eventSource` is the Client's contiguous
-          // durable event window (the same feed the Chat reads `turn/end` from).
-          // The face keeps ONE immutable snapshot object and replaces it only
-          // when a fold actually changes the marks, so `useSyncExternalStore`
-          // re-renders the panel on a real transition and stays quiet on every
-          // other event.
-          const insufficientListeners = new Set()
-          let insufficientMarks = new Map()
-          let insufficientSnapshot = { marks: insufficientMarks }
-          // The route of the latest request header: a `turn/end` belongs to the
-          // model that request was dispatched to.
-          let pendingRoute = null
-          let stopInsufficient = null
-
-          /** Publish a new snapshot only when the mark set really changed. */
-          const publishInsufficient = () => {
-            insufficientSnapshot = { marks: insufficientMarks }
-            for (const listener of insufficientListeners) listener()
-          }
-
-          /** Read the durable entries out of the current window snapshot. */
-          const entriesOf = window => (Array.isArray(window?.entries) ? window.entries : [])
-
-          /**
-           * Fold one batch of durable entries into the marks. Live chunks carry
-           * no `turn/end`, so they are skipped by type inside the fold.
-           * @param entries - durable event entries from the feed.
-           * @returns whether any mark changed.
-           */
-          const absorb = entries => {
-            let changed = false
-            for (const entry of entries) {
-              const event = entry?.event
-              if (event === null || event === undefined) continue
-              const header = routeOfHeader(event)
-              if (header !== null) {
-                pendingRoute = header
-                continue
-              }
-              if (event.type !== 'turn/end') continue
-              if (foldInsufficient(insufficientMarks, event, pendingRoute)) changed = true
-            }
-            return changed
-          }
-
-          /**
-           * Attach the feed listener. A `replace` (initial load, history
-           * replacement) refolds from scratch, because the window it describes
-           * is the whole truth; an `append` folds only the new entries. A
-           * `prepend` loads OLDER history at the front and cannot change a mark
-           * (marks come from the tail), so it is ignored rather than refolded —
-           * refolding would also re-walk history on every page-in.
-           */
-          const startInsufficientFeed = () => {
-            if (stopInsufficient !== null) return
-            let binding
+          // Attach this Session's feed as soon as its seat exists, not only
+          // when a subscriber appears: the seat always subscribes, but the
+          // face is built before the first render, and a feed that is already
+          // live should contribute its history immediately.
+          if (markStore !== undefined) {
             try {
-              binding = typeof sessions?.binding === 'function' ? sessions.binding(sessionId) : undefined
+              markStore.watch(sessionId)
             } catch {
-              binding = undefined
-            }
-            const source = binding?.eventSource
-            if (source === undefined || typeof source.subscribe !== 'function'
-              || typeof source.getSnapshot !== 'function') return
-            /** Whether two mark maps hold the same entries. */
-            const sameMarks = (left, right) => {
-              if (left.size !== right.size) return false
-              for (const [key, value] of left) {
-                if (right.get(key) !== value) return false
-              }
-              return true
-            }
-            const applyWindow = (window, full) => {
-              const change = window?.change
-              if (full || change?.kind === 'replace') {
-                const previous = insufficientMarks
-                const next = new Map()
-                insufficientMarks = next
-                pendingRoute = null
-                absorb(entriesOf(window))
-                // Adopt the refolded map as the snapshot either way, so the
-                // snapshot and the live state never diverge; only NOTIFY when
-                // the marks really changed, so a history replacement that
-                // re-derives the same marks does not repaint the panel.
-                insufficientSnapshot = { marks: next }
-                if (!sameMarks(previous, next)) publishInsufficient()
-                return
-              }
-              if (change?.kind === 'append' && absorb(change.entries)) publishInsufficient()
-            }
-            try {
-              applyWindow(source.getSnapshot(), true)
-            } catch {
-              /* an unreadable feed leaves the panel unmarked, never broken */
-            }
-            const listener = () => {
-              try {
-                applyWindow(source.getSnapshot(), false)
-              } catch {
-                /* a fold failure must not escape into the slot */
-              }
-            }
-            try {
-              const stop = source.subscribe(listener)
-              stopInsufficient = typeof stop === 'function' ? stop : () => {}
-            } catch {
-              stopInsufficient = null
+              /* the store degrades to storage-only state */
             }
           }
 
-          startInsufficientFeed()
-
-          /**
-           * The seat's read face for the marks. `subscribe` and `getSnapshot`
-           * are the `useSyncExternalStore` pair; the snapshot object is stable
-           * between real transitions.
-           */
-          const insufficient = {
-            subscribe: listener => {
-              insufficientListeners.add(listener)
-              // The binding may have materialized after the face was built.
-              startInsufficientFeed()
-              return () => { insufficientListeners.delete(listener) }
-            },
-            getSnapshot: () => insufficientSnapshot,
-            /** Stop observing the feed; called when the seat's owner disposes. */
-            dispose: () => {
-              if (stopInsufficient !== null) stopInsufficient()
-              stopInsufficient = null
-              insufficientListeners.clear()
-            },
-          }
-
           return {
             sessionId,
             resolveDirectory: resolve,
             safeRead,
-            insufficient,
+            // The GLOBAL mark store, shared by every seat of this plugin
+            // generation. `subscribe` additionally attaches the store to this
+            // Session's feed, so a Session that binds late (or after the page
+            // loaded) still contributes its events.
+            insufficient: markStore ?? EMPTY_INSUFFICIENT,
             // `available: false` only for an addressed subagent Session, which
             // the shipped seat also hides.
             available: first.addressed !== true,
@@ -2336,11 +2660,7 @@ html[data-ds-dark-theme] .dshmf-reason { border-top-color: #6B7280; }
               // component's hook shape never changes and the rows simply stay
               // unstruck. It shares the module-level empty snapshot so the
               // identity stays stable across renders.
-              insufficient: {
-                subscribe: () => () => {},
-                getSnapshot: () => EMPTY_INSUFFICIENT_SNAPSHOT,
-                dispose: () => {},
-              },
+              insufficient: EMPTY_INSUFFICIENT,
             }
           }
         }

package/docs/DETAIL.md

@@ -77,8 +77,9 @@ and the agent teamwork switch are all visible at once.
   side, otherwise the footer wraps back to the original two-line stack. The
   break is decided by CSS flex wrapping and the 30 px `column-gap`, never by a
   JS width threshold, so it stays correct across panel resizes, font loads and
-  both themes. The single grey rule above the reasoning group stays where it
-  is in both states; the teamwork row draws no divider of its own (DEC-011).
+  both themes. The single grey rule belongs to the footer container, so it sits
+  above the whole footer block and stays put in both states; neither group
+  draws a divider of its own (DEC-016).
   The fixed height budget measures the footer container once, not its two
   children, so a shared line is not double-counted against the grid.
 - **Selected model.** The current model reads as a solid deep-blue band with
@@ -136,11 +137,31 @@ and the agent teamwork switch are all visible at once.
     that failed for a different reason. A cancellation (`aborted`), a `blocked`
     turn, and the synthetic `interrupted` / `forked` closers clear nothing —
     the model never answered, so they say nothing about the account.
-  - **Where it comes from.** The seat folds the Session's own durable event
-    feed (`sessions.binding(id).eventSource`), which is the same source the
-    Chat reads its quota notice from. No Host change is involved. A history
-    replacement refolds from scratch; paging in older history cannot change a
-    mark and is ignored.
+  - **The marks are global, not per conversation.** Whether a model has quota
+    left is a fact about the model route and its account, so the state is NOT
+    scoped to the Session a panel happens to render for. One module-level store
+    per plugin generation observes the durable feed of **every** Session the
+    Session list names, and every seat reads that one store. A failure recorded
+    in any Session therefore strikes the same model in every Session and
+    workspace, including in a Session whose feed this page never opened.
+  - **It survives a reload.** The marks are persisted to `localStorage`
+    (origin-scoped, like the grouping choice), so a fresh page load starts from
+    the last known state instead of an empty one. Reads and writes degrade
+    silently when storage is unavailable, and records older than 7 days are
+    dropped so a stale strike cannot live forever.
+  - **The newest observation wins.** A Session feed carries no cross-Session
+    sequence number, but every durable event keeps the Host's wall-clock `time`.
+    Each route keeps the time of its last decision, and an observation older
+    than the stored one is ignored. This is what makes the global state safe:
+    replaying an older window (a history replacement, or a second Session whose
+    history is older) cannot resurrect a strike that a newer call already
+    cleared, and a cleared route keeps its watermark for the same reason.
+  - **Where it comes from.** The store folds each Session's durable event feed
+    (`sessions.binding(id).eventSource`), which is the same source the Chat
+    reads its quota notice from, and re-attaches when the `sessions` service is
+    replaced. No Host change is involved. A history replacement refolds that
+    Session from scratch; `prepend` pages in older history and cannot change a
+    mark, so it is ignored.
 - **Agent teamwork.** The switch keeps the host's semantics: the same label,
   the same confirmation before disabling it mid-conversation, and no optimistic
   update — the state comes from the `agentTeam` projection. The row lives in
@@ -157,9 +178,11 @@ Everything goes through public Client APIs:
 - The directory store is subscribed through `useSyncExternalStore`, so a
   catalog update — including one caused by a selection — repaints the panel.
 - `ctx.sessions.binding(sessionId).eventSource` is the Session's contiguous
-  durable event window. The seat folds it to derive the per-model
-  insufficient-balance marks, and subscribes through `useSyncExternalStore` so
-  a mark transition repaints the panel while every other event stays quiet.
+  durable event window. A single module-level store folds the feed of **every**
+  Session the Session list names (`ctx.sessions.list`) to derive the global
+  per-model insufficient-balance marks, persists them to `localStorage`, and
+  every seat subscribes through `useSyncExternalStore` so a mark transition
+  repaints the panel while every other event stays quiet.
 - `ctx.get('remote').agentTeams.setEnabled()` writes the teamwork selection.
 - `ctx.locale` supplies the copy, resolves catalog badge text, and prefers the
   host's own `agent-team` wording when that namespace is registered.

package/index.js

@@ -1,9 +1,10 @@
 /**
  * Host half of the flat model picker bundle.
  *
- * The plugin is browser-only: it replaces the composer's `conversation.input.model`
- * seat with a flat panel rendered in the Web GUI, and reads the Session's model
- * directory, projections and `session.selectModel` through public Client APIs.
+ * The plugin is client-side and runs in both the Web GUI and the Desktop app: it
+ * replaces the composer's `conversation.input.model` seat with a flat panel rendered
+ * in the client UI, and reads the Session's model directory, projections and
+ * `session.selectModel` through public Client APIs.
  * The Host therefore contributes no service, tool or event.
  */
 export const name = 'dsh-model-flatmap'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-flatmap",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Flat, two-level-free model picker for the DSH composer: every model and reasoning level on one surface.",
   "type": "module",
   "exports": {