dsh-model-flatmap 1.0.1 → 1.0.3

package/README.md

@@ -48,29 +48,42 @@ levels, and the agent-teamwork switch on one surface:
   `hy3` → `HY3`, `hy4free` / `hy4std` / `hy4-preview` → `HY4`, and a bare `hy`
   → `HY`. Unregistered brands still collapse their version tail; dictionary
   families (GPT, Qwen…) are never split.
-- **Rows are provider-primary.** Under *By family* the heading already says what
-  the models are, so the family name is not repeated in a row: the primary text
-  is the provider name. Only when one provider offers several models in the same
-  family does a short id-derived suffix differentiate them. The full model name
-  and description stay in the tooltip.
+- **Rows are provider-primary, with a model tail.** Under *By family* the
+  heading already says what the models are, so the family name is not repeated
+  in a row: the primary text is the provider name. What neither the heading nor
+  the provider can say — which model of the family the row is, and the
+  catalog's rate multiplier — is drawn as a quieter tail at the end of the row,
+  with the family name and the provider label stripped off: `Qwen3.8-27B` under
+  *Qwen* reads `3.8-27B`, and `Deepseek-V4.1-Flash · x0.01` under *DeepSeek*
+  reads `V4.1-Flash · x0.01` with the multiplier drawn smaller and bold. The
+  full model name and description stay in the tooltip.
+- **Long names and long headings scroll on hover.** A clipped model name or
+  group heading runs one eased leftward pass after the pointer rests on it for
+  0.5 s, then stops; leaving resets it instantly. Only the text moves — the
+  trailing badge and the title's band never do.
 - **Reasoning effort.** The current model's reasoning levels render as an
   exclusive, keyboard-operable group ("推理等级" / "Reasoning effort") driven by
   radio semantics.
 - **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 — 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
+- **Out-of-balance models are struck through — everywhere, for a day.** 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, and until the mark has gone 24 hours without a new attempt —
+  whichever comes first. A balance is topped up and a quota resets daily, so a
+  strike nobody refreshed is stale information, not a warning. 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.
+  `localStorage` so it survives a reload. Every mark keeps the time of the
+  observation that made it, so opening the list a day later draws that row
+  plain. Observations are ordered by that same time, so the newest one wins and
+  replaying older history cannot resurrect a strike that has already ended —
+  by a later call or by age.
 - **Theme-aware.** Styled with host theme tokens only; looks correct in both
   light and dark themes.
 

package/README.zh.md

@@ -41,21 +41,29 @@
 - **generation 要区分开。** 已注册品牌按 generation 分节：`hy3` 归 `HY3`、`hy4free` /
   `hy4std` / `hy4-preview` 归 `HY4`，裸 `hy` 仍是 `HY`；未注册品牌仍折叠版本后缀。
   词典家族（GPT、Qwen…）不拆 generation。
-- **row content 以 provider 为主。** *按 family* 下标题已经说明模型是什么，所以行里
-  不再重复家族名，主文本改为 provider name；仅当同一 provider 在同一家族下有多个
-  模型时，才补一个由 id 推出的短后缀区分。完整模型名/描述保留在 tooltip。
+- **row content 以 provider 为主，末尾补型号尾标。** *按 family* 下标题已经说明模型
+  是什么，所以行里不再重复家族名，主文本改为 provider name。标题和 provider 都说不出
+  的信息——这一行究竟是家族里的哪个型号、以及目录给的倍数——放在行**末尾**一个更安静的
+  尾标里：把家族名和 provider label 从模型名里剥掉，`Qwen` 下的 `Qwen3.8-27B` 显示为
+  `3.8-27B`，`DeepSeek` 下的 `Deepseek-V4.1-Flash · x0.01` 显示为
+  `V4.1-Flash · x0.01`，其中倍数照旧用更小更粗的字重。完整模型名/描述保留在 tooltip。
+- **长名称与长标题 hover 跑马灯。** 显示不全的模型名或分组标题，在鼠标停留 0.5 s 后
+  向左跑**一趟**（ease-in-out）即停，移开立刻复位。只有文字在动——右侧的 badge 和
+  标题所在的色带本身都不动。
 - **推理等级。** 当前模型的推理等级渲染为一个互斥、可键盘操作的分组（"推理等级"，
   基于 radio 语义）。
 - **自适应底栏。** 推理等级组与智能体协作开关在放得下（中间至少 30 px）时共用一行，
   放不下时各自占一行回到原来的两行布局——换行由 CSS flex 换行决定，不靠 JS 量像素。
-- **额度不足的模型加删除线，且全局生效。** 某个模型的调用因额度/余额/信用不足而失败后，
-  该模型的行文字会带 `line-through` 删除线，直到同一个模型的下一次调用返回非额度不足的
-  结果才去掉。标记跟随失败那次请求实际使用的模型；覆盖宿主的 `QUOTA` / `ACCOUNT_QUOTA`
-  代码、provider 的 `402`，以及**正文说明余额不足的 `429`**——纯限流的 429 不会划线。
-  因为「还有没有额度」是模型路由（及其账号）的属性、**与单个会话无关**，所以标记是全局的：
-  在任意会话里观察到的失败，会在所有会话与工作区里同样划线；状态持久化在 `localStorage`
-  中，重载后仍然保留。观察按事件时间排序，最新的一条说了算，因此回放更早的历史不会让一条
-  已被后续调用清除的划线复活。
+- **额度不足的模型加删除线，全局生效，且只生效一天。** 某个模型的调用因额度/余额/信用不足
+  而失败后，该模型的行文字会带 `line-through` 删除线，直到同一个模型的下一次调用返回非额度
+  不足的结果，或者这条标记已经 24 小时没有新尝试——以先到者为准。余额会被充值、额度会按日
+  重置，所以一条没人更新的划线是**过时的信息**，不是警告。标记跟随失败那次请求实际使用的
+  模型；覆盖宿主的 `QUOTA` / `ACCOUNT_QUOTA` 代码、provider 的 `402`，以及**正文说明余额
+  不足的 `429`**——纯限流的 429 不会划线。因为「还有没有额度」是模型路由（及其账号）的属性、
+  **与单个会话无关**，所以标记是全局的：在任意会话里观察到的失败，会在所有会话与工作区里
+  同样划线；状态持久化在 `localStorage` 中，重载后仍然保留。每条标记都记下「这次判定发生的
+  时间」，因此一天之后再打开列表，那一行就是干净的。观察按同一个时间排序，最新的一条说了算，
+  所以回放更早的历史既不能让一条已被后续调用清除的划线复活，也不能让一条已经过期的复活。
 - **跟随主题。** 仅使用宿主主题令牌着色，在浅色与深色主题下都正确。
 
 完整行为规格见 [`docs/DETAIL.md`](./docs/DETAIL.md)，设计决策见

package/client.js

@@ -59,12 +59,15 @@ window.__ModuleLoader__.load({
 .dshmf-chevronOpen { transform: rotate(180deg); }
 
 /* Panel: the host menu surface (menu fill + blur + prominent elevation + lg
-   corners), capped at 320px; only the grid scrolls. */
+   corners), capped at 320px; only the grid scrolls. A 1px light-grey frame
+   traces the panel edge in both themes — explicitly NOT a border token: the
+   border-* tokens are near-invisible hairlines (see DEC-011/DEC-012), and the
+   frame has to be readable on the blurred translucent surface. */
 .dshmf-panel {
   box-sizing: border-box; position: fixed; z-index: 1100;
   display: flex; flex-direction: column; gap: 4px; padding: 6px;
   max-height: 320px; overflow: hidden;
-  border: 0; border-radius: var(--dsw-radius-lg);
+  border: 1px solid #D1D5DB; border-radius: var(--dsw-radius-lg);
   background: var(--dsw-menu-surface-fill);
   -webkit-backdrop-filter: var(--dsw-menu-backdrop-filter, none);
   backdrop-filter: var(--dsw-menu-backdrop-filter, none);
@@ -74,6 +77,11 @@ window.__ModuleLoader__.load({
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
   --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
 }
+/* The same light-grey frame, stepped to the footer divider's dark-theme grey
+   (#6B7280, DEC-012) so it stays a light frame on the near-black surface
+   without glaring: the width stays 1px in both themes. */
+body[data-ds-dark-theme] .dshmf-panel,
+html[data-ds-dark-theme] .dshmf-panel { border-color: #6B7280; }
 
 /* Fixed sections. */
 .dshmf-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 28px; }
@@ -161,9 +169,10 @@ window.__ModuleLoader__.load({
    stay borderless, so the dense flow across columns is kept (see DEC-003,
    DEC-005). */
 .dshmf-groupTitle {
-  align-self: flex-start; max-width: 100%;
+  align-self: flex-start; max-width: 100%; min-width: 0;
   box-sizing: border-box; height: 20px; padding: 0 8px 0 6px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: flex; align-items: center;
+  overflow: hidden; white-space: nowrap;
   border: 1px solid var(--dsw-alias-border-l2);
   border-left: 3px solid var(--dsw-alias-border-l3);
   border-radius: var(--dsw-radius-xs);
@@ -172,6 +181,20 @@ window.__ModuleLoader__.load({
   color: var(--dsw-alias-label-primary);
   font-size: 10px; line-height: 18px; font-weight: 700; letter-spacing: .02em;
 }
+/* The label gets the SAME window/track split as a model row (DEC-021): the
+   band is the frame, and the text inside it is a clipped window holding a
+   track that can be wider than the window. That is what lets a long heading
+   ("ModelScope Token Plan") run the same one-pass hover marquee as a long
+   model name, while the band's frame, fill and shadow stay put (DEC-023). */
+.dshmf-groupTitleWindow {
+  flex: 1 1 auto; min-width: 0; display: block;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.dshmf-groupTitleTrack { width: max-content; max-width: none; white-space: nowrap; }
+.dshmf-groupTitleTrack[data-running="true"] {
+  display: inline-block;
+  animation: dshmf-rowNameMarquee var(--dshmf-marquee-duration, 3000ms) ease-in-out 1 forwards;
+}
 .dshmf-row {
   box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%;
   height: 26px; padding: 0 6px; border: 0; border-radius: var(--dsw-radius-sm);
@@ -201,9 +224,42 @@ window.__ModuleLoader__.load({
   background: color-mix(in srgb, var(--dsw-static-neutral-bluish-00) 22%, transparent);
   color: inherit;
 }
-.dshmf-rowName { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshmf-rowNameWindow {
+  flex: 1 1 auto; min-width: 0; display: block;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* The name itself never ellipsises on its own: the window clips it, and the
+   track is what slides when the pointer rests on a truncated row (DEC-021).
+   width: max-content is what lets the track be wider than the window, which is
+   both the overflow signal (scrollWidth) and what the marquee reveals. */
+.dshmf-rowName {
+  width: max-content; max-width: none;
+  white-space: nowrap;
+}
+/* Resting the pointer on a row whose name does not fit starts ONE marquee
+   pass: the name glides left until its last glyph reaches the window, then
+   STOPS there. The easing is ease-in-out, so the start and the arrival are
+   soft rather than a constant crawl. Only the name TRACK moves — the window
+   clips it, so the right-aligned badge (限时免费, ×0.1) and the pending
+   spinner, which sit as siblings AFTER the window, never shift. There is no
+   return trip and no iteration: fill-mode forwards holds the end state, and
+   leaving the row drops the animation entirely, which snaps back with no
+   transition. */
+@keyframes dshmf-rowNameMarquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(var(--dshmf-marquee-shift)); }
+}
+.dshmf-rowNameTrack[data-running="true"] {
+  display: inline-block;
+  animation: dshmf-rowNameMarquee var(--dshmf-marquee-duration, 3000ms) ease-in-out 1 forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dshmf-rowNameTrack[data-running="true"],
+  .dshmf-groupTitleTrack[data-running="true"] { animation: none; }
+}
 /* The model's last call failed on insufficient balance / credit / quota, and no
-   later call for the same model has cleared it. The row text is struck through
+   later call for the same model has cleared it, nor has the mark aged past
+   STRIKE_TTL (24h) without a fresh attempt. The row text is struck through
    rather than recoloured: the strike survives both themes and the selected
    row's blue band, and it does not compete with the error strip's own red.
    The decoration is applied to the row's text only (name + variant tag), not
@@ -219,17 +275,25 @@ window.__ModuleLoader__.load({
    multiplier reads as an aside without disturbing the row's text rhythm
    (see renderRow's nameRuns). */
 .dshmf-rowNameMark { font-size: 11px; line-height: 18px; font-weight: 700; letter-spacing: normal; }
-/* Secondary text in a family-grouped row. The primary text is the provider,
-   so this is only a short variant tail shown when one provider offers several
-   models in the same family. Quieter than the primary text (caption colour,
-   11px) and shrinks before it does. No width cap: a cap truncates a perfectly
-   readable label ("CodeBuddy …") in a column that had room for it. */
+/* The model-specific tail of a family-grouped row, e.g. "3.8-Flash-Next",
+   "V4.1-Flash · x0.01", "2.1 Turbo". The primary text is the provider and the
+   heading names the family, so this is what is LEFT after both are removed —
+   the型号 and the multiplier the heading cannot carry (DEC-023). It sits at
+   the END of the row and is quieter than the primary text (caption colour,
+   11px), shrinks before it, and never wraps. No width cap: a cap truncates a
+   perfectly readable label ("CodeBuddy …") in a column that had room for it. */
 .dshmf-rowProvider {
   flex: 0 1 auto; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   color: var(--dsw-alias-label-caption);
   font-size: 11px; line-height: 16px; font-weight: 400;
 }
+/* A multiplier inside that tail ("x0.01") keeps the same "smaller and bolder"
+   treatment it gets inside a model name in *By provider* (see
+   .dshmf-rowNameMark and renderRow's nameRuns), so the rate reads identically
+   in both grouping modes. The base rule already makes it bold and 11px; inside
+   the 11px tail it steps down once more, to 10px, to stay visibly apart. */
+.dshmf-rowProvider .dshmf-rowNameMark { font-size: 10px; line-height: 16px; }
 .dshmf-rowTail { display: grid; place-items: center; flex: 0 0 14px; color: inherit; }
 
 /* Catalog badge (for example a third-party rate multiplier). Rendered only
@@ -485,6 +549,15 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     // The wording pass is deliberately narrow: a bare "402"/"429" only counts
     // when it reads as the leading status, never as a number inside another
     // message, and every example below is taken from a real recorded session.
+    //
+    // A strike also EXPIRES. Every record keeps the wall-clock moment the
+    // observation was made, which is what lets the panel tell "this model is out
+    // of balance" apart from "this model has not been tried since that verdict".
+    // Quotas reset daily and balances get topped up, so a strike that nobody
+    // refreshed stops being drawn after STRIKE_TTL; a retry that fails again
+    // re-stamps the record and restarts the window, and a retry that answers
+    // clears it outright. The window is therefore always "24h since the newest
+    // thing we learned about this route", not "24h since the row was drawn".
     // ---------------------------------------------------------------------
 
     /** Failure codes that mean "this account has no usable balance left". */
@@ -585,13 +658,18 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
      * Wall-clock time one durable event was recorded at. The Client feed keeps
      * the Host's `time` (`Date.now()` at append), which is what lets marks
      * gathered from DIFFERENT Sessions be ordered against each other — a Session
-     * feed has no cross-Session sequence number.
+     * feed has no cross-Session sequence number — and it is the same clock the
+     * strike lifetime is measured against.
+     *
+     * An event with no stamp is an observation made NOW, not one made at the
+     * epoch: folding it as `0` would file a fact we just learned as 56 years old
+     * and a strike could never be drawn for it.
      * @param {unknown} event - one durable Session event.
-     * @returns {number} the event time, or 0 when the feed carried none.
+     * @returns {number} the event time, or the current time when the feed carried none.
      */
     function eventTimeOf(event) {
       const time = event?.time
-      return typeof time === 'number' && Number.isFinite(time) ? time : 0
+      return typeof time === 'number' && Number.isFinite(time) ? time : Date.now()
     }
 
     /**
@@ -914,22 +992,86 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     }
 
     /**
-     * The distinguishing part of one model for a family-grouped row: the id's
-     * variant tail first, then any catalog-name words that are not just the
-     * family heading or a bare version number. Returns '' when the model adds
-     * nothing beyond what the family heading already says.
+     * Separators a strip leaves dangling at either end of a tail. `·` is the
+     * catalog's own "name · multiplier" separator (`Hy4 · x0.00`).
+     */
+    const TAIL_EDGE = /^[\s·・.,:;|/\\_-]+|[\s·・.,:;|/\\_-]+$/g
+
+    /**
+     * Remove every occurrence of a family heading from a text, as a SUBSTRING.
+     *
+     * A family is glued to its version tail in real ids and names — `Qwen3.8-…`,
+     * `Deepseek-V4.1-…`, `MiniMax-M3` — so a whole-word match would miss the
+     * very case this exists for. The gap left behind becomes a space, so
+     * removing a prefix never glues two words together.
+     * @param {string} text - the model name.
+     * @param {string} needle - the family heading.
+     * @returns {string} the text with the heading removed.
+     */
+    function dropSubstring(text, needle) {
+      const lower = needle.toLowerCase()
+      if (lower.length < 2) return text
+      let out = text
+      for (;;) {
+        const at = out.toLowerCase().indexOf(lower)
+        if (at === -1) return out
+        out = `${out.slice(0, at)} ${out.slice(at + lower.length)}`
+      }
+    }
+
+    /**
+     * Remove whole words from a text (case-insensitive).
+     *
+     * Used for the provider's own label, which is the row's PRIMARY text — so a
+     * tail that repeats it would print the same word twice. Whole-word matching
+     * is what keeps a short token from punching a hole in an unrelated word
+     * (provider `AI` must not turn `Rain` into `Rn`). Word edges are any
+     * non-letter/digit, so the CJK provider label `豆包` still matches inside
+     * `豆包 2.1 Turbo`.
+     * @param {string} text - the model name.
+     * @param {string[]} words - provider label words; each needs 2+ characters.
+     * @returns {string} the text with those words removed.
+     */
+    function dropWords(text, words) {
+      let out = text
+      for (const word of words) {
+        if (word.length < 2) continue
+        const escaped = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        out = out.replace(
+          new RegExp(`(?<![\\p{L}\\p{N}])${escaped}(?![\\p{L}\\p{N}])`, 'giu'),
+          ' ',
+        )
+      }
+      return out
+    }
+
+    /**
+     * The model-specific part of a family-grouped row: the model name with the
+     * family heading and the provider's own label removed, so only what the
+     * heading does NOT already say is left.
+     *
+     * `Qwen3.8-Flash-Next` under `Qwen` → `3.8-Flash-Next`, `Qwen3.8-27B` →
+     * `3.8-27B`; `Deepseek-V4.1-Flash · x0.00` under `DeepSeek` →
+     * `V4.1-Flash · x0.00`; `豆包 2.1 Turbo` under provider `豆包(doubao)` →
+     * `2.1 Turbo`. Version numbers are KEPT — they are the型号 the heading
+     * lacks, unlike the id-derived tail that drops them.
+     *
+     * When the name adds nothing (`Hy4` under `HY4`), the id tail is used so a
+     * variant like `hy4free` still reads `free`. An empty result is valid: the
+     * row then draws no tail at all.
      * @param {{id: string, name: string}} model - catalog entry.
      * @param {string} family - the resolved family heading.
-     * @returns {string} a short, non-family supplement; possibly ''.
+     * @param {string} [providerLabel] - the row's primary text; stripped when it repeats.
+     * @returns {string} the model-specific supplement; possibly ''.
      */
-    function rowVariantOf(model, family) {
-      const fromId = idVariantOf(model, family)
-      if (fromId !== '') return fromId
-      const familyWords = new Set(family.toLowerCase().split(/[\s-]+/).filter(Boolean))
-      return String(model.name ?? '').split(/[\s._-]+/).filter(word => {
-        const lower = word.toLowerCase()
-        return word !== '' && !familyWords.has(lower) && !/^\d+(\.\d+)?$/.test(lower)
-      }).join(' ')
+    function rowVariantOf(model, family, providerLabel = '') {
+      const name = String(model.name ?? '')
+      const providerWords = String(providerLabel).split(/[^\p{L}\p{N}]+/u).filter(Boolean)
+      const tail = dropWords(dropSubstring(name, family), providerWords)
+        .replace(/\s+/g, ' ')
+        .replace(TAIL_EDGE, '')
+      if (tail !== '') return tail
+      return idVariantOf(model, family)
     }
 
     // ---------------------------------------------------------------------
@@ -1094,10 +1236,47 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
     // the Host's `time`, and the newest observation of a route wins. That is
     // what lets a replayed window (or a stored entry) never override a newer
     // fact from another Session.
+    //
+    // The same stamp is what makes a strike go STALE: it is the time the verdict
+    // was made, so a mark nobody refreshed stops being drawn after STRIKE_TTL
+    // while the record stays behind as the watermark. See markIsLive.
     // ---------------------------------------------------------------------
     const MARKS_KEY = 'dshmf:insufficient'
-    /** Marks older than this are dropped on read, so a stale strike cannot live forever. */
+    /**
+     * How long a RECORD is kept. Records older than this are dropped on read,
+     * so a stale verdict cannot live forever — and so a cleared route's
+     * watermark (which shields it from a replayed older failure) has an end.
+     */
     const MARKS_TTL = 7 * 24 * 60 * 60 * 1000
+    /**
+     * How long a MARK is DRAWN. This is the one the user sees: if nothing new has
+     * been observed for a route for a day, the user never retried it, and the
+     * panel stops claiming the model is unusable — an exhausted balance gets
+     * topped up and a quota resets daily, so a strike that outlives a whole day
+     * of silence is stale information, not a warning. The record itself survives
+     * (up to {@link MARKS_TTL}) as the watermark that keeps a replayed older
+     * failure from re-stamping it.
+     */
+    const STRIKE_TTL = 24 * 60 * 60 * 1000
+
+    /**
+     * Whether one record still justifies drawing a strike at `now`.
+     *
+     * `at` is the time of the LAST observation for the route, so the answer to
+     * "has the user tried this model again?" is already in it: a retry that
+     * failed on balance restamps `at` and restarts the window, a retry that
+     * answered flips `marked`, and a route nobody touched just ages out.
+     * @param {{ marked: boolean, at: number } | undefined} entry - one record.
+     * @param {number} now - the current wall-clock time.
+     * @param {number} [strikeTtl] - how long a mark is drawn; defaults to {@link STRIKE_TTL}.
+     * @returns {boolean} true only for a mark that is set AND still fresh.
+     */
+    function markIsLive(entry, now, strikeTtl) {
+      if (entry === undefined || entry.marked !== true) return false
+      const life = typeof strikeTtl === 'number' && Number.isFinite(strikeTtl) ? strikeTtl : STRIKE_TTL
+      // A stamp from the future (a clock that ran ahead) is fresh, never expired.
+      return now - entry.at < life
+    }
 
     /**
      * Parse a persisted mark record into the in-memory shape, dropping anything
@@ -1170,10 +1349,17 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       }
     }
 
-    /** Whether two visible mark maps hold the same entries. */
+    /**
+     * Whether two visible mark maps hold the same entries.
+     *
+     * Iterating a Map yields `[key, value]` PAIRS, so this walks `keys()` — a
+     * `for (const key of map)` here compares a pair against `has()` and always
+     * answers "different", which hands the seats a brand-new snapshot object on
+     * every recompute and puts `useSyncExternalStore` into a render loop.
+     */
     function sameMarks(left, right) {
       if (left.size !== right.size) return false
-      for (const key of left) {
+      for (const key of left.keys()) {
         if (!right.has(key)) return false
       }
       return true
@@ -1188,16 +1374,32 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
      * everywhere, including in a Session whose own feed was never opened in this
      * page load (its marks come from storage).
      *
+     * The store is also the thing that ages strikes out. A mark retiring itself
+     * is a state change no event announces, so the store watches the clock on its
+     * own behalf — on every fold, on every seat mounting, and on a timer set for
+     * the soonest deadline — instead of waiting for a fold that may never come.
+     *
      * @param {object} deps - resolution hooks.
      * @param {() => object | undefined} deps.sessionsOf - read the `sessions` service, per call.
      * @param {() => Map<string, {marked: boolean, at: number}>} deps.readStored - initial/persisted state.
      * @param {(entries: Map<string, {marked: boolean, at: number}>) => void} deps.writeStored - persistence sink.
-     * @returns {object} the store: `subscribe`, `getSnapshot`, `dispose`, `sync`.
+     * @param {() => number} [deps.now] - the clock; defaults to `Date.now`.
+     * @param {number} [deps.strikeTtl] - strike lifetime; defaults to {@link STRIKE_TTL}.
+     * @returns {object} the store: `subscribe`, `getSnapshot`, `dispose`, `sync`, `watch`, `refresh`.
      */
     function createMarkStore(deps) {
+      /**
+       * The clock strikes age against. Injectable so a test does not have to sit
+       * through a day; every read of the state takes it fresh, because a page
+       * lives long enough for the wall clock to matter.
+       */
+      const nowFn = typeof deps.now === 'function' ? deps.now : () => Date.now()
+      const strikeTtl = typeof deps.strikeTtl === 'number' && Number.isFinite(deps.strikeTtl)
+        ? deps.strikeTtl
+        : STRIKE_TTL
       /** Internal truth: route key → last decision and when it was made. */
       const entries = new Map(deps.readStored())
-      /** Visible subset the rows read: route key → true. */
+      /** Visible subset the rows read: route key → true, the LIVE marks only. */
       let visible = new Map()
       let snapshot = { marks: visible }
       const listeners = new Set()
@@ -1211,12 +1413,19 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       let attachedSessions
       let stopList
       let disposed = false
+      /** Timer for the soonest strike that is still being drawn. */
+      let expiryTimer = null
+
+      const publish = () => {
+        for (const listener of listeners) listener()
+      }
 
-      /** Rebuild the visible map; report whether the rendered set changed. */
+      /** Rebuild the visible map against the clock; report whether it changed. */
       const recompute = () => {
+        const now = nowFn()
         const next = new Map()
         for (const [key, entry] of entries) {
-          if (entry.marked) next.set(key, true)
+          if (markIsLive(entry, now, strikeTtl)) next.set(key, true)
         }
         if (sameMarks(visible, next)) return false
         visible = next
@@ -1224,12 +1433,56 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         return true
       }
 
-      recompute()
+      /**
+       * Arm the clock for the soonest live strike.
+       *
+       * A strike retiring is the one transition no event reports: the user
+       * simply never came back to this model. A page left open across the
+       * deadline therefore has to wake itself, or a stale line-through would sit
+       * on the row until some unrelated fold happened to recompute it.
+       */
+      const scheduleExpiry = () => {
+        if (expiryTimer !== null) {
+          clearTimeout(expiryTimer)
+          expiryTimer = null
+        }
+        if (disposed || typeof setTimeout !== 'function') return
+        const now = nowFn()
+        let earliest = Number.POSITIVE_INFINITY
+        for (const entry of entries.values()) {
+          if (!markIsLive(entry, now, strikeTtl)) continue
+          const deadline = entry.at + strikeTtl
+          if (deadline < earliest) earliest = deadline
+        }
+        if (!Number.isFinite(earliest)) return
+        const handle = setTimeout(() => {
+          expiryTimer = null
+          refresh()
+        }, Math.max(0, earliest - now))
+        // A day-long timer must never be the reason a process stays alive (a
+        // Node host, a test run): `unref` lets it fire while anything else is
+        // running without holding the loop. A browser handle is a number and has
+        // no `unref`, and there the page keeps its own clock.
+        if (typeof handle?.unref === 'function') handle.unref()
+        expiryTimer = handle
+      }
 
-      const publish = () => {
-        for (const listener of listeners) listener()
+      /**
+       * Re-read the clock and tell the seats if anything aged out.
+       * @returns {boolean} whether the rendered set changed.
+       */
+      const refresh = () => {
+        if (disposed) return false
+        const changed = recompute()
+        // Re-arm first: a strike that just aged out may leave a later one live.
+        scheduleExpiry()
+        if (changed) publish()
+        return changed
       }
 
+      recompute()
+      scheduleExpiry()
+
       /** Fold one batch of durable entries for one Session. */
       const absorb = (sessionId, windowEntries) => {
         let stored = false
@@ -1276,7 +1529,9 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           return
         }
         if (result.stored) deps.writeStored(entries)
-        if (result.changed && recompute()) publish()
+        // The clock — not the raw record — decides what the rows draw, and a new
+        // record moves the soonest deadline, so re-read both after any fold.
+        if (result.stored || result.changed) refresh()
       }
 
       /**
@@ -1360,6 +1615,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       return {
         /** The seat's `useSyncExternalStore` pair. */
         subscribe: listener => {
+          // A seat mounting IS the model list being displayed, so this is where a
+          // strike that aged out while nobody was looking gets retired — before
+          // React reads the snapshot it is about to render from.
+          refresh()
           listeners.add(listener)
           sync()
           return () => { listeners.delete(listener) }
@@ -1377,11 +1636,22 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           pinned.add(sessionId)
           sync()
           attachSession(sessionId)
+          refresh()
         },
+        /**
+         * Re-read the clock: retire any mark older than the strike lifetime and
+         * notify the seats that drew it. Call it whenever the list is displayed,
+         * because that is the moment the answer must be current.
+         */
+        refresh,
         /** Release every feed subscription. The marks themselves stay persisted. */
         dispose: () => {
           if (disposed) return
           disposed = true
+          if (expiryTimer !== null) {
+            clearTimeout(expiryTimer)
+            expiryTimer = null
+          }
           for (const stop of stops.values()) stop()
           stops.clear()
           routes.clear()
@@ -1501,6 +1771,129 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       subscribe: () => () => {},
       getSnapshot: () => EMPTY_INSUFFICIENT_SNAPSHOT,
       watch: () => {},
+      refresh: () => {},
+    }
+
+    /**
+     * How long the pointer must rest on a truncated model name before the
+     * marquee starts. Long enough that sweeping across the grid never starts a
+     * scroll, short enough to feel like a direct response (DEC-021).
+     */
+    const MARQUEE_DELAY = 500
+    /**
+     * One CSS pixel per 20ms — 50px/s. The trailing end of a long name scrolls
+     * at the same pace, so a 300px overflow still finishes in ~6s instead of
+     * crawling, and the speed reads as a considered crawl rather than a ticker.
+     */
+    const MARQUEE_PX_PER_SECOND = 50
+    /** Shortest pass, so a barely-truncated name does not blink past. */
+    const MARQUEE_MIN_MS = 900
+
+    /**
+     * Does this element actually clip its text?
+     *
+     * The measured element is the row's name WINDOW, a plain block-level flex
+     * item with `overflow: hidden; white-space: nowrap`, so `scrollWidth` is the
+     * full width of the name and `clientWidth` the visible part. A one-pixel
+     * slack keeps sub-pixel rounding from starting a marquee on a name that
+     * fits exactly.
+     * @param {Element | null | undefined} element - the name window.
+     * @returns {number} the clipped amount in px; 0 when nothing is cut off.
+     */
+    const nameClippedBy = element => {
+      if (element === null || element === undefined) return 0
+      const clientWidth = Number(element.clientWidth) || 0
+      if (clientWidth <= 0) return 0
+      const clipped = (Number(element.scrollWidth) || 0) - clientWidth
+      return clipped > 1 ? clipped : 0
+    }
+
+    /**
+     * The geometry of the single marquee pass (DEC-021).
+     *
+     * `shift` is how far the name travels for its LAST glyph to reach the
+     * right edge of the window — exactly the clipped amount, so nothing scrolls
+     * past the point of being readable. The pass is one-way and eased
+     * (ease-in-out), which is symmetric, so its AVERAGE velocity is still the
+     * pinned MARQUEE_PX_PER_SECOND: the duration is simply
+     * `shift / MARQUEE_PX_PER_SECOND`. Easing makes the ends soften around that
+     * average instead of changing it.
+     * @param {number} clipped - pixels of the name hidden to the right.
+     * @returns {{shift: number, duration: number}} geometry in px / ms.
+     */
+    const marqueePassGeometry = clipped => {
+      const shift = Number.isFinite(clipped) && clipped > 0 ? Math.ceil(clipped) : 0
+      if (shift === 0) return { shift: 0, duration: 0 }
+      const duration = Math.max(MARQUEE_MIN_MS, Math.round((shift / MARQUEE_PX_PER_SECOND) * 1000))
+      return { shift, duration }
+    }
+
+    /**
+     * Does the user ask the OS to reduce motion? The marquee is decorative, so
+     * it is skipped entirely under that preference — the ellipsis and the row
+     * tooltip already carry the full name.
+     * @returns {boolean} true when motion should be suppressed.
+     */
+    const prefersReducedMotion = () => {
+      try {
+        return typeof window !== 'undefined'
+          && typeof window.matchMedia === 'function'
+          && window.matchMedia('(prefers-reduced-motion: reduce)').matches === true
+      } catch {
+        return false
+      }
+    }
+
+    /**
+     * The sliding part of a row's primary text.
+     *
+     * The row wraps it in the clipped window, so the pass runs on the track
+     * alone: everything AFTER the window (the variant tail, the catalog badge,
+     * the pending spinner) is right-aligned and never pushed along.
+     * `shift`/`duration` arrive as inline values because they depend on this
+     * row's measurement.
+     * @param {object} props - `shift` (px), `duration` (ms), `children`.
+     * @returns {object} the track element.
+     */
+    const renderNameTrack = props => {
+      const { shift, duration, children } = props
+      const running = shift > 0
+      return h('span', {
+        className: 'dshmf-rowNameTrack dshmf-rowName',
+        'data-running': running ? 'true' : undefined,
+        style: running
+          ? {
+            '--dshmf-marquee-shift': `-${shift}px`,
+            '--dshmf-marquee-duration': `${duration}ms`,
+          }
+          : undefined,
+      }, children)
+    }
+
+    /**
+     * The sliding part of a group title (DEC-023).
+     *
+     * The band plays the role the row plays for a model name: it is the frame,
+     * and it never moves. The text inside is a clipped window holding a track,
+     * so a heading too long for its column (`ModelScope Token Plan`) runs the
+     * SAME one-pass eased marquee a truncated model name does, while the band's
+     * fill, frame, radius and elevation stay put.
+     * @param {object} props - `shift` (px), `duration` (ms), `children`.
+     * @returns {object} the track element.
+     */
+    const renderTitleTrack = props => {
+      const { shift, duration, children } = props
+      const running = shift > 0
+      return h('span', {
+        className: 'dshmf-groupTitleTrack',
+        'data-running': running ? 'true' : undefined,
+        style: running
+          ? {
+            '--dshmf-marquee-shift': `-${shift}px`,
+            '--dshmf-marquee-duration': `${duration}ms`,
+          }
+          : undefined,
+      }, children)
     }
 
     // ---------------------------------------------------------------------
@@ -1571,6 +1964,70 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       const confirmRef = useRef(null)
       const id = useId()
 
+      // ---- Model-name marquee (DEC-021)
+      // A name wider than its row is ellipsised ("DeepSeek Reasone…"). Resting
+      // the pointer on such a row for MARQUEE_DELAY starts the marquee; moving
+      // away stops it. Only one row can run at a time, and the sliding element
+      // is the name TRACK only, so right-aligned trailing content (the catalog
+      // badge — 限时免费, ×0.1 — and the pending spinner) never moves.
+      // A group title is the same shape one level up (DEC-023): the band is the
+      // frame and its text slides inside it, so a truncated heading runs the
+      // same pass. Rows and titles therefore share this ONE state machine and
+      // are told apart only by their key prefix.
+      const [marquee, setMarquee] = useState({ key: '', shift: 0, duration: 0 })
+      const marqueeTimer = useRef(null)
+      /** The row whose delay is still running; '' when nothing is armed. */
+      const marqueeArmed = useRef('')
+      const idleMarquee = { key: '', shift: 0, duration: 0 }
+      const clearMarqueeTimer = () => {
+        if (marqueeTimer.current !== null) {
+          clearTimeout(marqueeTimer.current)
+          marqueeTimer.current = null
+        }
+      }
+      /** Drop an armed delay (the pointer left before it fired). */
+      const disarmMarquee = () => {
+        clearMarqueeTimer()
+        marqueeArmed.current = ''
+      }
+      /**
+       * Pointer arrived on a marquee-able element. Leave any other one first,
+       * then arm the delay. The measurement happens when it fires — the element
+       * is laid out by then, and a name that fits never moves.
+       * @param {string} key - the row's route key or the title's block key (one runner at a time).
+       * @param {Element | null} element - the row (or band) the pointer entered.
+       * @param {string} [selector] - the clipped window inside it.
+       */
+      const enterRow = (key, element, selector = '.dshmf-rowNameWindow') => {
+        disarmMarquee()
+        marqueeArmed.current = key
+        // Leaving the previous row stops its pass immediately.
+        setMarquee(previous => (previous.key === '' ? previous : idleMarquee))
+        marqueeTimer.current = setTimeout(() => {
+          marqueeTimer.current = null
+          if (marqueeArmed.current !== key) return
+          marqueeArmed.current = ''
+          const nameWindow = typeof element?.querySelector === 'function'
+            ? element.querySelector(selector)
+            : null
+          if (prefersReducedMotion()) return
+          const geometry = marqueePassGeometry(nameClippedBy(nameWindow))
+          if (geometry.shift === 0) return
+          setMarquee({ key, shift: geometry.shift, duration: geometry.duration })
+        }, MARQUEE_DELAY)
+      }
+      /**
+       * Pointer left a row. An armed delay for THAT row is cancelled (so a
+       * quick sweep never starts anything), and a running pass is dropped.
+       * @param {string} key - the row the pointer left.
+       */
+      const leaveRow = key => {
+        if (marqueeArmed.current === key) disarmMarquee()
+        setMarquee(previous => (previous.key === key ? idleMarquee : previous))
+      }
+      // Unmount safety: a pending timer must not outlive the seat.
+      useEffect(() => () => { clearTimeout(marqueeTimer.current) }, [])
+
       // Standard props always carry these three hooks for a session-scope slot;
       // the fallbacks keep the component renderable (rather than throwing) in a
       // composition that omits one, and they are plain values so the hook order
@@ -1687,10 +2144,12 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         for (const family of families) {
           family.scored.sort((left, right) => left.score - right.score)
           // Under family grouping each row's primary text is its provider and
-          // the family name is NOT repeated (the heading already says it). Only
-          // when ONE provider offers several models in this family do the rows
-          // need a short distinguishing tail, so the same provider name is not
-          // printed twice with no way to tell the models apart.
+          // the family name is NOT repeated (the heading already says it). The
+          // heading is only half the picture though: it cannot say WHICH model
+          // the row stands for (`Qwen` holds 3.8-Flash-Next and 3.8-27B), nor
+          // carry the catalog's rate multiplier (`Deepseek-V4.1-Flash · x0.00`).
+          // Both move into a tail at the END of the row, drawn from the model
+          // name with the family heading and the provider's own label removed.
           const byProvider = new Map()
           for (const item of family.scored) {
             const list = byProvider.get(item.entry.providerId) ?? []
@@ -1698,17 +2157,21 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             byProvider.set(item.entry.providerId, list)
           }
           for (const list of byProvider.values()) {
-            if (list.length <= 1) continue
             const used = new Map()
             for (const item of list) {
-              // An empty variant is intentional: the plain/base model of this
-              // family carries no tag at all. Only a real collision (two rows
-              // with the same non-empty variant, or two rows both empty) needs
-              // a distinguishing fallback — the model id, which is unique.
-              const variant = rowVariantOf(item.entry.model, family.title)
+              // An empty tail is valid: a model whose name says nothing beyond
+              // the family and the provider draws no tail at all.
+              const variant = rowVariantOf(
+                item.entry.model,
+                family.title,
+                item.entry.providerLabel,
+              )
               item.entry.rowVariant = variant
               used.set(variant, (used.get(variant) ?? 0) + 1)
             }
+            // Two rows of one provider that still read alike (the same name
+            // under different ids) fall back to the unique model id, so no two
+            // rows in the grid are indistinguishable.
             if ([...used.values()].some(count => count > 1)) {
               for (const item of list) {
                 if (used.get(item.entry.rowVariant) > 1) {
@@ -2003,8 +2466,12 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         // yet: the row text is struck through until a later call for the same
         // model route returns anything else.
         const insufficientRoute = marks.marks.get(routeKeyOf(providerId, model.id)) === true
+        // The marquee runs one row at a time, keyed by the model route so a
+        // re-render cannot start the wrong row (DEC-021).
+        const routeKey = `${providerId}/${model.id}`
+        const running = marquee.key === routeKey
         return h('button', {
-          key: `${providerId}/${model.id}`,
+          key: routeKey,
           type: 'button',
           className: 'dshmf-row',
           'aria-pressed': selected,
@@ -2012,15 +2479,37 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
           title: rowTitle,
           disabled: busy,
           onClick: () => { chooseModel(providerId, model) },
+          // The pointer must REST for MARQUEE_DELAY before anything moves, so
+          // sweeping across the grid never triggers it. Measuring happens in
+          // the timeout, when the row is laid out and the panel is settled.
+          onMouseEnter: event => { enterRow(routeKey, event?.currentTarget) },
+          onMouseLeave: () => { leaveRow(routeKey) },
+          // Keyboard focus counts as "resting on the row" for the same reason
+          // the tooltip does: a focused row is one the user is looking at.
+          onFocus: event => { enterRow(routeKey, event?.currentTarget) },
+          onBlur: () => { leaveRow(routeKey) },
         },
           // `nameRuns` (xN multiplier markers) is applied to whatever the
           // primary text is: the model name under provider grouping, or the
-          // provider name under family grouping.
-          h('span', { className: 'dshmf-rowName' }, ...nameRuns(primary)),
+          // provider name under family grouping. Only the track (inside the
+          // clipped window) moves; the variant tail, the badge and the spinner
+          // are siblings AFTER the window and stay put on the right.
+          h('span', { className: 'dshmf-rowNameWindow' },
+            running
+              ? renderNameTrack({ shift: marquee.shift, duration: marquee.duration, children: nameRuns(primary) })
+              : h('span', { className: 'dshmf-rowNameTrack dshmf-rowName' }, ...nameRuns(primary)),
+          ),
+          // The model-specific tail sits at the END of the row, after the
+          // primary text: the heading already names the family, and the
+          // provider is the primary text, so what is LEFT is the型号 and the
+          // multiplier (`3.8-Flash-Next`, `V4.1-Flash · x0.01`). It runs
+          // through `nameRuns` too, so a multiplier in the tail keeps the
+          // same two-sizes-smaller treatment it gets inside a model name.
+          // It shrinks before the primary text and never wraps.
           showVariant ? h('span', {
             className: 'dshmf-rowProvider',
             title: rowVariant,
-          }, rowVariant) : null,
+          }, ...nameRuns(rowVariant)) : null,
           badge === null ? null : h('span', {
             className: 'dshmf-badge',
             'data-tone': badge.tone,
@@ -2034,12 +2523,34 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
         ? 'status.loading'
         : totalModels === 0 ? 'empty.models' : 'empty.search'
 
-      const renderBlock = block => (block.kind === 'title'
-        ? h('div', {
+      // A group title is a marquee-able band like a model row (DEC-023): the
+      // band itself is the frame and never moves, while its text sits in a
+      // clipped window around a track that slides on hover when the heading
+      // does not fit its column. Titles and rows share one state machine, keyed
+      // by `block.key` (`t:…`) versus a row's route key, so only one thing in
+      // the whole panel scrolls at a time. The band keeps its `title` tooltip
+      // for the hover case the OS tooltip covers.
+      const renderTitle = block => {
+        const running = marquee.key === block.key
+        return h('div', {
           className: 'dshmf-groupTitle',
           key: block.key,
           title: block.label,
-        }, block.label)
+          // A heading has no action of its own: these handlers only arm the
+          // marquee, so keyboard focus is deliberately NOT a trigger.
+          onMouseEnter: event => { enterRow(block.key, event?.currentTarget, '.dshmf-groupTitleWindow') },
+          onMouseLeave: () => { leaveRow(block.key) },
+        },
+          h('span', { className: 'dshmf-groupTitleWindow' },
+            running
+              ? renderTitleTrack({ shift: marquee.shift, duration: marquee.duration, children: block.label })
+              : h('span', { className: 'dshmf-groupTitleTrack' }, block.label),
+          ),
+        )
+      }
+
+      const renderBlock = block => (block.kind === 'title'
+        ? renderTitle(block)
         : renderRow(block.entry))
 
       // Each child is placed EXPLICITLY (`grid-column` below), never by
@@ -2146,6 +2657,10 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             }
             setSelectionFocus(false)
             triggerRef.current?.focus()
+            // Opening the panel IS showing the models: ask the store to re-read
+            // the clock first, so a strike that went stale while the panel was
+            // closed is gone from the rows this click draws (DEC-024).
+            if (typeof markFace.refresh === 'function') markFace.refresh()
             setOpen(true)
           },
         },
@@ -2346,14 +2861,20 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
             }, teamFailure),
 
             // ---- measurement probe (never painted). It mirrors a family-
-            // grouped row (provider primary + variant tag), the widest row
-            // shape, so the measured row height covers every mode. It carries
-            // no trailing tail: the selected row is a filled band now and the
-            // spinner is only drawn for a pending selection.
+            // grouped row (provider primary + model-specific tail) and a group
+            // title, the two shapes the grid can draw, so the measured row and
+            // head heights cover every mode. Both now use the window/track
+            // split (DEC-021, DEC-023), so the probe mirrors that too — a track
+            // inside a clipped window is what the grid actually sizes. It
+            // carries no badge and no spinner: the selected row is a filled band
+            // now and the spinner is only drawn for a pending selection.
             h('div', { className: 'dshmf-probe', 'aria-hidden': 'true' },
-              h('div', { ref: probeHeadRef, className: 'dshmf-groupTitle' }, 'X'),
+              h('div', { ref: probeHeadRef, className: 'dshmf-groupTitle' },
+                h('span', { className: 'dshmf-groupTitleWindow' },
+                  h('span', { className: 'dshmf-groupTitleTrack' }, 'X'))),
               h('div', { ref: probeRowRef, className: 'dshmf-row' },
-                h('span', { className: 'dshmf-rowName' }, 'X'),
+                h('span', { className: 'dshmf-rowNameWindow' },
+                  h('span', { className: 'dshmf-rowNameTrack dshmf-rowName' }, 'X')),
                 h('span', { className: 'dshmf-rowProvider' }, 'X'),
               ),
             ),
@@ -2458,7 +2979,7 @@ html[data-ds-dark-theme] .dshmf-footer { border-top-color: #6B7280; }
       // Pure layout and grouping derivations plus the component itself,
       // exposed for `node --test` so grouping, filtering and the column
       // algorithm are pinned without a browser. The shell never reads this key.
-      __test: { familyOf, familyRank, familyVariant: rowVariantOf, idVariantOf, matchScore, providerScore, searchTokens, buildUnits, columnHeight, packColumns, planColumns, readGrouping, writeGrouping, GROUPING_KEY, GROUPING_DEFAULT, isInsufficientBalance, decideMark, eventTimeOf, foldInsufficient, foldMarkEntry, routeOfHeader, routeKeyOf, MARKS_KEY, MARKS_TTL, parseMarks, serializeMarks, readMarks, writeMarks, createMarkStore },
+      __test: { marqueePassGeometry, nameClippedBy, MARQUEE_DELAY, MARQUEE_PX_PER_SECOND, MARQUEE_MIN_MS, familyOf, familyRank, familyVariant: rowVariantOf, idVariantOf, matchScore, providerScore, searchTokens, buildUnits, columnHeight, packColumns, planColumns, readGrouping, writeGrouping, GROUPING_KEY, GROUPING_DEFAULT, isInsufficientBalance, decideMark, eventTimeOf, foldInsufficient, foldMarkEntry, routeOfHeader, routeKeyOf, MARKS_KEY, MARKS_TTL, STRIKE_TTL, markIsLive, parseMarks, serializeMarks, readMarks, writeMarks, createMarkStore },
       __component: ModelFlatMap,
       __seat: Seat,
       apply(ctx) {

package/docs/DETAIL.md

@@ -47,16 +47,23 @@ and the agent teamwork switch are all visible at once.
   `acme-7b` are one `Acme`), and dictionary families are never split by
   generation. A provider prefix does not hide the brand (`codebuddy-hy3` →
   `HY3`).
-- **Family-grouped rows are provider-primary.** A family heading says what the
-  models *are*, so the family name is not repeated in a row. The row's primary
-  text is the provider name — the one thing a heading cannot tell you when a
-  family spans providers. The full model name and description stay in the row
-  tooltip. Only when one provider offers several models in the same family do
-  those rows carry a short secondary variant derived from the id tail (e.g.
-  `hy4free` → `free`, `hy3-x` → `x`); the plain base model carries no tag.
-  Colliding variants fall back to the unique model id. Under *By provider* the
-  heading already is the provider, so the primary text stays the model name and
-  no secondary tag is drawn.
+- **Family-grouped rows are provider-primary, with a model tail.** A family
+  heading says what the models *are*, so the family name is not repeated in a
+  row. The row's primary text is the provider name — the one thing a heading
+  cannot tell you when a family spans providers. The full model name and
+  description stay in the row tooltip. What the heading *and* the provider
+  cannot say — which model of the family this row is, and the catalog's rate
+  multiplier — is drawn as a quieter tail at the END of the row. The tail is
+  the model name with the family heading and the provider's own label removed,
+  so `Qwen3.8-Flash-Next` under `Qwen` reads `3.8-Flash-Next`, `Qwen3.8-27B`
+  reads `3.8-27B`, `Deepseek-V4.1-Flash · x0.00` under `DeepSeek` reads
+  `V4.1-Flash · x0.00`, and `豆包 2.1 Turbo` under provider `豆包(doubao)` reads
+  `2.1 Turbo`. Version numbers are KEPT (they are the型号 the heading lacks),
+  and a multiplier inside the tail is drawn two sizes smaller and bold, exactly
+  as it is inside a model name under *By provider*. Two rows of one provider
+  that still read alike fall back to the unique model id; a model whose name
+  adds nothing draws no tail. Under *By provider* the heading already is the
+  provider, so the primary text stays the model name and no tail is drawn.
 - **Adaptive columns.** The panel measures one group title and one model row,
   subtracts the fixed sections from the 320 px cap, and picks the smallest
   column count from 1 to 3 that fits. If even three columns overflow, it keeps
@@ -97,9 +104,10 @@ and the agent teamwork switch are all visible at once.
   translucent white chip so it stays legible on the blue fill.
 - **Out-of-balance models are struck through.** When a model call fails because
   the account has no usable balance, credit, or quota left, that model's row
-  text is drawn with a `line-through` decoration, and the strike stays until a
+  text is drawn with a `line-through` decoration. The strike stays until a
   later call for the same model returns something other than an
-  insufficient-balance failure. The row is not recoloured, so the strike reads
+  insufficient-balance failure, **or** until it has gone 24 hours without a new
+  attempt — whichever comes first. The row is not recoloured, so the strike reads
   the same on the selected row's blue band and in both themes, and it does not
   compete with the error strip's red. Only the row's text (the name and a
   family variant tag) is struck; the badge chip and the pending spinner are
@@ -137,6 +145,21 @@ 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.
+  - **How long it is drawn without one.** Every record keeps the wall-clock
+    time of the observation that made it, which is what separates "this model is
+    out of balance" from "this model has not been tried since that verdict". A
+    mark older than 24 hours is not drawn: an exhausted balance gets topped up
+    and a quota resets daily, so a strike nobody refreshed has stopped being
+    information. A retry restamps the record and restarts the window, so the
+    rule is "24 hours since the newest thing we learned about this route", not
+    "24 hours since the row was painted". Retiring a strike is the one transition
+    no event reports, so the store watches the clock itself: on every fold, when
+    a seat subscribes, when the panel is opened, and on a timer set for the
+    soonest deadline (that handle is `unref`'d, so a day-long wait never holds
+    the host process). The record SURVIVES its own expiry, as the watermark for
+    the route — which is why re-folding the very failure that made it, after a
+    reload or when a second Session's older history is walked, cannot put the
+    decoration back.
   - **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
@@ -147,8 +170,12 @@ and the agent teamwork switch are all visible at once.
   - **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.
+    silently when storage is unavailable. Two lifetimes apply to that record and
+    they are not the same one: a mark stops being DRAWN after 24 hours without a
+    new observation, while the record itself is kept for 7 days, because it is
+    also the watermark that keeps an older replayed failure from restamping the
+    route. So a reload of a day-old verdict restores the row as plain text, and
+    the fold that re-reads the failure that produced it changes nothing.
   - **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
@@ -182,7 +209,11 @@ Everything goes through public Client APIs:
   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.
+  repaints the panel while every other event stays quiet. The same store also
+  re-reads the clock on subscribe, on panel open and on a self-armed timer,
+  because a strike reaching its 24-hour age is a transition no feed will ever
+  report. A snapshot is replaced only when the set of drawn marks actually
+  changed, so those extra reads cannot churn the panel.
 - `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.
@@ -231,6 +262,25 @@ The band also carries a low-key frame: a hairline border
 group start clearly without boxing the group's rows — a group's rows may flow
 across columns, so only its label is framed (see DEC-003).
 
+### Long text: one-pass hover marquee
+
+A model name, or a group heading, that does not fit its column is ellipsised.
+Resting the pointer on it for 0.5 s starts a single, eased, leftward pass that
+stops when the last glyph reaches the window's right edge; leaving resets it
+immediately with no animation. The pass runs ONCE, is `ease-in-out` rather than
+`linear`, and honours `prefers-reduced-motion: reduce` by not running at all.
+
+Both a model row and a group title use the same structure, so only the text
+slides and the frame never does: a clipped **window** (`overflow: hidden` +
+`text-overflow: ellipsis`) wraps a **track** (`width: max-content`) that is
+allowed to be wider than the window. For a row the frame is the row itself, so
+the right-aligned tail, badge (`限时免费`, `x0.1`) and spinner never move; for a
+title the frame is the band, so its fill, frame, radius and elevation stay put.
+One state machine drives both — keyed by the row's route or the title's block
+key — so only one thing in the panel scrolls at a time. The travel distance is
+the measured overflow, and the duration is that distance divided by 50 px/s
+(see DEC-021, DEC-022, DEC-023).
+
 ## Limitations
 
 - The panel replaces the composer seat only; the `/model` popup is untouched.

package/icon.svg

@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Flat model picker">
   <title>Flat model picker</title>
-  <rect x="4" y="8" width="56" height="48" rx="10" fill="none" stroke="currentColor" stroke-width="3" opacity="0.85"/>
-  <rect x="11" y="15" width="20" height="5" rx="2.5" fill="currentColor" opacity="0.55"/>
-  <rect x="35" y="15" width="18" height="5" rx="2.5" fill="currentColor" opacity="0.25"/>
-  <rect x="11" y="25" width="20" height="5" rx="2.5" fill="currentColor" opacity="0.55"/>
-  <rect x="35" y="25" width="18" height="5" rx="2.5" fill="currentColor" opacity="0.25"/>
-  <rect x="11" y="35" width="20" height="5" rx="2.5" fill="currentColor" opacity="0.55"/>
-  <rect x="35" y="35" width="18" height="5" rx="2.5" fill="currentColor" opacity="0.25"/>
-  <rect x="11" y="45" width="42" height="4" rx="2" fill="currentColor" opacity="0.18"/>
+  <rect x="4" y="8" width="56" height="48" rx="10" fill="none" stroke="#3B82F6" stroke-width="3"/>
+  <rect x="11" y="15" width="20" height="5" rx="2.5" fill="#3B82F6"/>
+  <rect x="35" y="15" width="18" height="5" rx="2.5" fill="#60A5FA"/>
+  <rect x="11" y="25" width="20" height="5" rx="2.5" fill="#3B82F6"/>
+  <rect x="35" y="25" width="18" height="5" rx="2.5" fill="#60A5FA"/>
+  <rect x="11" y="35" width="20" height="5" rx="2.5" fill="#3B82F6"/>
+  <rect x="35" y="35" width="18" height="5" rx="2.5" fill="#60A5FA"/>
+  <rect x="11" y="45" width="42" height="4" rx="2" fill="#93C5FD"/>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-flatmap",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Flat, two-level-free model picker for the DSH composer: every model and reasoning level on one surface.",
   "type": "module",
   "exports": {
@@ -19,7 +19,9 @@
     "icon.svg"
   ],
   "dsh": {
-    "bundle": { "patch": "./cordis.patch.yml" },
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
     "client": {
       "platform": "web",
       "immediately": true