@ebony-vinyl/dsh-our-free-model 2.8.2 → 2.8.4

package/README.md

@@ -39,11 +39,11 @@
 ## 交流群
 
 <div align="center">
-  <img src="docs/images/qq-group-386179533.png" alt="ai技术交流学习群入群二维码（群号：386179533）" width="300">
+  <img src="docs/images/qq-group-891170115.png" alt="OFM技术交流群17入群二维码（群号：891170115）" width="300">
   <br>
-  <b>QQ 群：386179533（ai技术交流学习群）</b>
+  <b>QQ 群：891170115（OFM技术交流群17）</b>
   <br>
-  扫码或搜索群号加入群聊，一起交流插件使用心得、反馈问题与分享玩法。
+  扫码加入群聊，一起交流插件使用心得、反馈问题与分享玩法。
 </div>
 
 ---
@@ -131,7 +131,7 @@ EAC、客户端与订阅、资源库、API 接入、设置与**插件中心**）
 > `dsh-our-free-model-<版本>.tgz` 同源、同版本。只想走 npm 时可以装它：
 >
 > ```
-> dsh plugin --profile web add @ebony-vinyl/dsh-our-free-model@2.8.2
+> dsh plugin --profile web add @ebony-vinyl/dsh-our-free-model@2.8.4
 > ```
 >
 > 注意它的包名带 scope，因此挂载条目是 `@ebony-vinyl/dsh-our-free-model`，与下文
@@ -163,7 +163,7 @@ PROFILE_UPGRADE_REQUIRED: offline dependency migration is not yet available
 以真实目录手工安装时，使用可信源码打出的本地 tarball：
 
 1. 创建 `<DSH_HOME>/profiles/<profile>/vendor/`，在审核过的本仓库目录运行 `npm pack --ignore-scripts --pack-destination "<DSH_HOME>/profiles/<profile>/vendor"`，或将本仓库正式发布的同版本 tarball 放入该目录。本地打包不执行 npm 发布。
-2. 在 profile 的 `package.json` 的 dependencies 中加入 `"dsh-our-free-model": "file:./vendor/dsh-our-free-model-2.8.2.tgz"`。文件名版本跟随仓库 `package.json`，不要改成同名 npm 注册表版本；再通过宿主的安装流程解析依赖。
+2. 在 profile 的 `package.json` 的 dependencies 中加入 `"dsh-our-free-model": "file:./vendor/dsh-our-free-model-2.8.4.tgz"`。文件名版本跟随仓库 `package.json`，不要改成同名 npm 注册表版本；再通过宿主的安装流程解析依赖。
 3. 在 dsh.profile.bundles 末尾追加 `"dsh-our-free-model"`。
 
 包管理器拥有这份安装的字节时，同时将 bundle config 或插件 `settings.json` 的 `distribution` 设为 `managed`，由包管理器统一更新；应用内升级、公告 feed 与热重载会停用，模型功能保留。以后更新时替换可信 tarball 并同步依赖路径，避免包管理器按旧锁文件恢复旧版本。
@@ -777,6 +777,13 @@ MIT，见 LICENSE。
 本项目为独立插件，与任何模型提供方无隶属、认可或赞助关系。使用该插件访问免费额度受各提供方
 自身条款约束；在超出个人机器的场景中部署前，请先确认这些条款。
 
+## 致谢
+
+感谢 [Jet（iJetLi）](https://gitee.com/iJetLi) 的渠道包（`vendor/channel-pack/`，MIT）——
+十个内置账号渠道的登录、账号池与本地网关都出自这里，许可证与出处见该目录下的 LICENSE 与 NOTICE.md；
+也感谢 [opencode2api](https://github.com/jasonxu114514/opencode2api)（`src/o2a/`，GPL-3.0）——
+免费车道的请求整形移植自它，逐文件对照表见 `src/o2a/SYNC.md`。
+
 ## Star 趋势
 
 图表由 Star History 自动更新，无需手动提交图片。受服务缓存（当前为 24 小时）和 GitHub 图片缓存影响，显示可能延迟，并非秒级实时；点击图表可查看在线趋势。

package/client.js

@@ -80,6 +80,20 @@ window.__ModuleLoader__.load({
         'tag.context': '上下文',
         'tag.output': '最长输出',
         'tag.latency': '首字',
+        'perf.more': '详情',
+        'perf.less': '收起',
+        'perf.rate': '状态',
+        'perf.rateTitle': '成功率排除业务拒绝，统计包含当前尚未结束的小时。',
+        'perf.barsTitle': '近期成功率采样；灰色条表示暂无数据。',
+        'perf.latency': '延迟',
+        'perf.speed': '吞吐',
+        'perf.windowNote': '最近 {h} 小时的性能指标，来自本站统计。',
+        'perf.latencyTrend': '延迟趋势（最近 24 小时）',
+        'perf.latencySub': '平均 Token 延迟',
+        'perf.rateTrend': '可用率（最近 24 小时）',
+        'perf.rateSub': '成功率排除业务拒绝，统计包含当前尚未结束的小时。',
+        'perf.loading': '正在读取性能数据…',
+        'perf.noSeries': '本站暂无该模型的逐小时数据。',
         'tag.eacChannel': 'EAC 渠道 · 协付',
         'tag.new': 'NEW',
         'tag.newTitle': '新上线的模型，经 EAC 渠道转发自 OpenCode 免费车道。',
@@ -669,11 +683,11 @@ window.__ModuleLoader__.load({
         'chan.auto.off': '今日尚未签到',
         'chan.auto.last': '上次结果：{result}',
         'nav.tab.aggregate': '聚合渠道',
-        'nav.tab.workspace': '模型工作台',
+        'nav.tab.workspace': '模型工作台（magpie）',
         'engine.start': '打开工作台',
         'engine.starting': '正在启动工作台…',
         'engine.failed': '工作台启动失败',
-        'engine.title': '模型工作台',
+        'engine.title': '模型工作台（magpie）',
         'engine.refresh': '刷新模型',
         'engine.expand': '展开工作台',
         'engine.close': '收起工作台',
@@ -955,6 +969,20 @@ window.__ModuleLoader__.load({
         'tag.context': 'Context',
         'tag.output': 'Max output',
         'tag.latency': 'First token',
+        'perf.more': 'Details',
+        'perf.less': 'Hide',
+        'perf.rate': 'Status',
+        'perf.rateTitle': 'Success rate excludes business rejections; the current unfinished hour is included.',
+        'perf.barsTitle': 'Recent success-rate samples; a grey tick means no data.',
+        'perf.latency': 'Latency',
+        'perf.speed': 'Throughput',
+        'perf.windowNote': 'Performance over the last {h} hours, from this site\u2019s own metrics.',
+        'perf.latencyTrend': 'Latency trend (last 24h)',
+        'perf.latencySub': 'Average token latency',
+        'perf.rateTrend': 'Availability (last 24h)',
+        'perf.rateSub': 'Success rate excludes business rejections; the current unfinished hour is included.',
+        'perf.loading': 'Reading performance data\u2026',
+        'perf.noSeries': 'This site has no hourly data for this model.',
         'tag.eacChannel': 'EAC lane · co-paid',
         'tag.new': 'NEW',
         'tag.newTitle': 'Just added: relayed to the EAC lane from OpenCode’s free tier.',
@@ -1544,11 +1572,11 @@ window.__ModuleLoader__.load({
         'chan.auto.off': 'Not checked in today',
         'chan.auto.last': 'Last result: {result}',
         'nav.tab.aggregate': 'Aggregate',
-        'nav.tab.workspace': 'Model workspace',
+        'nav.tab.workspace': 'Model workspace (magpie)',
         'engine.start': 'Open workspace',
         'engine.starting': 'Starting workspace…',
         'engine.failed': 'Workspace could not start',
-        'engine.title': 'Model workspace',
+        'engine.title': 'Model workspace (magpie)',
         'engine.refresh': 'Refresh models',
         'engine.expand': 'Expand workspace',
         'engine.close': 'Collapse workspace',
@@ -1839,12 +1867,12 @@ window.__ModuleLoader__.load({
 .ofm_sechead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--dsw-alias-border-l1)}
 .ofm_sec_title{font-size:14px;font-weight:680;letter-spacing:-.2px}
 .ofm_sec_hint{font-size:11.5px;color:var(--dsw-alias-label-tertiary);margin-left:auto}
-.ofm_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:10px}
+.ofm_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:10px;align-items:start}
 /* ══ 卡片（双层 bezel：hairline 边框 + 顶部内高光 + 柔和外阴影） ═══════ */
 .ofm_card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 13px;border-radius:13px;border:1px solid var(--dsw-alias-border-l2);background:color-mix(in srgb,var(--dsw-alias-bg-layer-3) 80%,transparent);box-shadow:inset 0 1px 0 rgb(255 255 255 / 6%),0 1px 2px color-mix(in srgb,var(--dsw-alias-state-business-primary) 7%,transparent),0 3px 10px color-mix(in srgb,var(--dsw-alias-state-business-primary) 4%,transparent);transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .24s ease,border-color .18s ease}
 .ofm_card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--dsw-alias-state-business-primary) 66%,var(--dsw-alias-border-l2));box-shadow:inset 0 1px 0 rgb(255 255 255 / 9%),0 16px 34px color-mix(in srgb,var(--dsw-alias-state-business-primary) 12%,transparent)}
 .ofm_card.dim{opacity:.68}
-.ofm_cardhead{display:flex;align-items:center;gap:8px}
+.ofm_cardhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .ofm_cardname{font-size:13.5px;font-weight:650;letter-spacing:-.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ofm_badge{margin-left:auto;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-secondary);background:color-mix(in srgb,var(--dsw-alias-bg-layer-1) 60%,transparent);white-space:nowrap}
 .ofm_badge.available{color:var(--dsw-alias-state-success-primary);border-color:color-mix(in srgb,var(--dsw-alias-state-success-primary) 45%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 10%,transparent)}
@@ -1863,6 +1891,54 @@ window.__ModuleLoader__.load({
 .ofm_card.pinned:hover{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 62%,var(--dsw-alias-border-l2))}
 .ofm_metrics{display:flex;gap:12px;font-size:11px;color:var(--dsw-alias-label-tertiary);flex-wrap:wrap}
 .ofm_metrics b{color:var(--dsw-alias-label-secondary);font-weight:600;font-variant-numeric:tabular-nums}
+/* ══ 性能条（复刻站点模型广场：成功率柱 + 延迟 + 吞吐 + 详情） ═════════ */
+/* The site's strip is designed for a 317px card; the roster's grid is 252px.
+   Two rows here rather than one: the three metrics keep the site's own gaps and
+   type sizes, and the 详情 button drops beneath them instead of crushing the
+   numbers it sits beside. */
+/* The strip has to survive the roster's 252px card, where three metric columns
+   plus a button cannot share one line: the numbers would either spill past the
+   border or collapse to "1…". So it wraps into two clean rows — the status
+   column (label + 24-tick bar) with the 详情 button on the first, latency and
+   throughput side by side on the second. At the site's own 317px and wider the
+   status column and both figures still fit one line, and the wrap never fires. */
+.ofm_perf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:100%;min-width:0;padding-top:8px;border-top:1px solid var(--dsw-alias-border-l1)}
+.ofm_perfstats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;flex:1 1 auto;min-width:0;margin:0;font-size:12px;font-variant-numeric:tabular-nums}
+.ofm_perfcol{min-width:0}
+/* The status column always owns its row, so the bar is never cut in half. */
+.ofm_perfcol.status{width:96px;flex:0 0 100%}
+/* The two figures then share the next row, each with room for a full reading
+   (a value like 119.1t/s needs about 48px). */
+.ofm_perfcol.value{flex:1 1 60px;min-width:52px}
+.ofm_perflabel{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary);white-space:nowrap;min-width:0}
+.ofm_perfnum{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-secondary)}
+.ofm_perflabel .ofm_perfnum{font-size:11px}
+/* A figure that still does not fit is clipped, never allowed to run past the
+   card's edge: an ellipsis reads as "too narrow here", a number hanging outside
+   the border reads as a broken layout. */
+.ofm_perfnum.wide{display:block;margin-top:4px;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dsw-alias-label-primary)}
+.ofm_perfbars{display:flex;align-items:center;gap:1px;height:12px;width:96px;max-width:100%;margin:4px 0 0;overflow:hidden}
+/* Each tick keeps the site's 3px at full width and shrinks proportionally when
+   the column is narrower — the bar must never widen the card it sits in. */
+.ofm_perfbar{flex:0 1 3px;min-width:0;height:100%;border-radius:2px;background:var(--dsw-alias-border-l1)}
+.ofm_perfbar.good{background:#34d399}
+.ofm_perfbar.fair{background:#f59e0b}
+.ofm_perfbar.poor{background:#ef4444}
+.ofm_perfbar.none{background:color-mix(in srgb,var(--dsw-alias-border-l1) 70%,transparent)}
+.ofm_perfmore{display:inline-flex;align-items:center;gap:4px;flex:none;height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--dsw-alias-border-l1);background:transparent;font:inherit;font-size:12px;font-weight:500;color:var(--dsw-alias-label-primary);cursor:pointer;transition:background .15s ease,border-color .15s ease;margin-left:auto}
+.ofm_perfmore:hover{background:color-mix(in srgb,var(--dsw-alias-bg-layer-1) 70%,transparent);border-color:var(--dsw-alias-border-l2)}
+.ofm_perfchev{font-size:9px;color:var(--dsw-alias-label-tertiary);line-height:1}
+.ofm_perfnote{flex-basis:100%;margin:0;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+/* ══ 趋势图（详情展开：延迟趋势 + 可用率，站点同款） ═══════════════════ */
+.ofm_charts{flex-basis:100%;display:flex;flex-direction:column;gap:12px;margin-top:2px}
+.ofm_chartblock{display:flex;flex-direction:column;gap:4px}
+.ofm_charthead{display:flex;flex-direction:column;gap:1px}
+.ofm_charttitle{font-size:11.5px;font-weight:600;color:var(--dsw-alias-label-secondary)}
+.ofm_chartsub{font-size:10.5px;color:var(--dsw-alias-label-tertiary)}
+.ofm_chart{width:100%;height:auto;display:block;overflow:visible}
+.ofm_chartgrid{stroke:var(--dsw-alias-border-l1);stroke-width:.6}
+.ofm_chartaxis{font-size:6.4px;fill:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
+.ofm_chartdot{stroke:#fff;stroke-width:.6}
 .ofm_note{font-size:11px;color:var(--dsw-alias-label-tertiary);line-height:1.5}
 /* ══ 面板 ══════════════════════════════════════════════════════════════ */
 .ofm_panel{padding:16px;border-radius:16px;border:1px solid var(--dsw-alias-border-l2);background:color-mix(in srgb,var(--dsw-alias-bg-layer-2) 82%,transparent);box-shadow:inset 0 1px 0 rgb(255 255 255 / 5%),0 2px 6px rgb(0 0 0 / 4%);display:flex;flex-direction:column;gap:12px}
@@ -3466,7 +3542,8 @@ window.__ModuleLoader__.load({
 
     // ── model roster ──────────────────────────────────────────────────────────
     function ModelCard(props) {
-      const { model: m, t, onBench, bench, locked, eacLogin, onVisibility, busy } = props
+      const { model: m, t, onBench, bench, locked, eacLogin, onVisibility, busy, perf } = props
+      const [perfOpen, setPerfOpen] = useState(false)
       const listed = m.availabilitySource === 'listing'
       const manual = m.availabilitySource === 'manual'
       const stateKey = `state.${m.availability}`
@@ -3487,14 +3564,20 @@ window.__ModuleLoader__.load({
         ? m.efforts.map(levelName).join(' / ')
         : undefined
       return h('article', { className: 'ofm_card' + (dim ? ' dim' : '') + (m.pinned === true ? ' pinned' : '') },
+        // Two rows, not one: the chips row carries the channel tag and the
+        // badges, and the model name gets a full-width row of its own. They
+        // used to share one flex line, where the name was the only child that
+        // could shrink — so a card with EAC + NEW + 爆 + a status badge left it
+        // about seven pixels and the name rendered as "EA…". A name is the one
+        // thing on the card that must never be the thing that gives way.
         h('div', { className: 'ofm_cardhead' },
           m.channel === 'eac' ? h('span', { className: 'ofm_chantag', title: t('tag.eacChannel') }, 'EAC') : null,
           m.channel === 'eac' && locked === true ? h('span', { className: 'ofm_chantag', title: t('eac.lockedTitle') }, '🔒') : null,
           m.channel === 'kilo' ? h('span', { className: 'ofm_chantag', title: t('tag.kiloChannel') }, 'Kilo') : null,
-          h('span', { className: 'ofm_cardname', title: m.name }, m.name),
           m.isNew === true ? h('span', { className: 'ofm_newtag', title: t('tag.newTitle') }, t('tag.new')) : null,
           m.hot === true ? h('span', { className: 'ofm_hottag', title: t('tag.hotTitle') }, t('tag.hot')) : null,
           h('span', { className: 'ofm_badge ' + (listed ? 'unknown' : m.availability), title: listed ? t('hint.listed') : undefined }, listed ? t('state.listed') : t(stateKey))),
+        h('div', { className: 'ofm_cardname', title: m.name }, m.name),
         h('div', { className: 'ofm_id', title: m.id }, m.label ?? m.id),
         h('div', { className: 'ofm_tags' },
           m.hiddenByUser === true ? h('span', { className: 'ofm_tag' }, t('visibility.hidden')) : null,
@@ -3524,6 +3607,39 @@ window.__ModuleLoader__.load({
                 m.ttftMs === undefined || m.ttftMs === 0 ? null : h('span', null, t('tag.latency'), ' ', h('b', null, Math.round(m.ttftMs)), ' ms'),
                 h('span', null, manual ? t('pref.measuredAt') : t('pref.probedAt'), ' ', h('b', null, ago(m.probedAt, t.locale)))),
         m.canDisableThinking === false ? h('p', { className: 'ofm_note' }, t('hint.sharedBudget')) : null,
+        perf === undefined || perf.settling === true ? null : h(Fragment, null,
+          // The site's own performance strip, reproduced: a 24-tick success bar
+          // under its rate, then latency and throughput, then 详情. The bar is
+          // the whole point — it shows the shape of the day, not just its
+          // average, so a model that was fine this morning and is failing now
+          // cannot hide behind a healthy-looking mean.
+          h('div', { className: 'ofm_perf' },
+            h('dl', { className: 'ofm_perfstats' },
+              h('div', { className: 'ofm_perfcol status' },
+                h('dt', { className: 'ofm_perflabel', title: t('perf.rateTitle') },
+                  h('span', null, t('perf.rate')),
+                  h('span', { className: 'ofm_perfnum' }, `${perf.rate.toFixed(2)}%`)),
+                h('dd', { className: 'ofm_perfbars', title: t('perf.barsTitle'), role: 'img',
+                  'aria-label': t('perf.barsTitle') },
+                  (perf.ticks ?? []).map((tick, i) => h('span', {
+                    key: i, className: 'ofm_perfbar ' + perfTone(tick),
+                  })))),
+              h('div', { className: 'ofm_perfcol value' },
+                h('dt', { className: 'ofm_perflabel' }, t('perf.latency')),
+                h('dd', { className: 'ofm_perfnum wide' }, formatLatency(perf.latencyMs))),
+              h('div', { className: 'ofm_perfcol value' },
+                h('dt', { className: 'ofm_perflabel' }, t('perf.speed')),
+                h('dd', { className: 'ofm_perfnum wide' }, formatSpeed(perf.speed)))),
+            h('button', {
+              type: 'button', className: 'ofm_perfmore', 'aria-expanded': perfOpen ? 'true' : 'false',
+              onClick: () => setPerfOpen(open => !open),
+            }, perfOpen ? t('perf.less') : t('perf.more'), h('span', { className: 'ofm_perfchev' }, perfOpen ? '▴' : '▾')),
+            // The window the figures describe. Without it a reader has to guess
+            // whether "92%" is this hour or the whole day — and the bar's shape
+            // is only meaningful once you know how far back it reaches.
+            h('p', { className: 'ofm_perfnote' },
+              t('perf.windowNote').replace('{h}', String(perf.windowHours ?? 24)))),
+          perfOpen ? h(PerfCharts, { modelId: m.id, t }) : null),
         onVisibility === undefined ? null : h('div', { className: 'ofm_sec' },
           h(Switch, { checked: m.hiddenByUser !== true, label: t('visibility.showModel'),
             disabled: busy || m.hiddenByGroup === true, onChange: () => onVisibility(m) }),
@@ -3533,6 +3649,191 @@ window.__ModuleLoader__.load({
           bench?.result === undefined ? null : h('span', { className: 'ofm_note' }, bench.result)))
     }
 
+    /**
+     * The site's own per-model performance figures, for the roster's capsules.
+     *
+     * One read per roster mount, keyed by catalog id. It is best-effort by
+     * design: a failure leaves the map empty and every card renders exactly as
+     * it did before this feature — a card must never fail to draw because a
+     * metrics endpoint was slow. The server hop exists because the site's
+     * endpoint sends no CORS headers (see index.js `/perf`).
+     */
+    function usePerfFigures() {
+      const [figures, setFigures] = useState({})
+      useEffect(() => {
+        let alive = true
+        api('/perf').then(payload => {
+          if (!alive) return
+          const models = payload?.models
+          setFigures(models !== null && typeof models === 'object' ? models : {})
+        }).catch(() => { /* no figures: every card renders without a capsule */ })
+        return () => { alive = false }
+      }, [])
+      return figures
+    }
+
+    /**
+     * The panel 详情 opens: the site's two trend charts.
+     *
+     * Latency over time (blue) and availability over time (green, with the
+     * sub-band samples marked red). Both read one hourly series; when the site
+     * has none, a single line says so rather than an empty box.
+     */
+    function PerfCharts(props) {
+      const { modelId, t } = props
+      const { status, series } = usePerfSeries(modelId, true)
+      if (status === 'loading') return h('p', { className: 'ofm_perfnote' }, t('perf.loading'))
+      if (series === null) return h('p', { className: 'ofm_perfnote' }, t('perf.noSeries'))
+      return h('div', { className: 'ofm_charts' },
+        h('div', { className: 'ofm_chartblock' },
+          h('div', { className: 'ofm_charthead' },
+            h('span', { className: 'ofm_charttitle' }, t('perf.latencyTrend')),
+            h('span', { className: 'ofm_chartsub' }, t('perf.latencySub'))),
+          h(PerfTrendChart, {
+            points: series, pick: point => point.latencyMs, min: 0, unit: ' ms',
+            color: '#2563eb', t, label: t('perf.latencyTrend'),
+          })),
+        h('div', { className: 'ofm_chartblock' },
+          h('div', { className: 'ofm_charthead' },
+            h('span', { className: 'ofm_charttitle' }, t('perf.rateTrend')),
+            h('span', { className: 'ofm_chartsub' }, t('perf.rateSub'))),
+          h(PerfTrendChart, {
+            points: series, pick: point => point.rate, min: 0, max: 100, unit: '%',
+            color: '#10b981', t, label: t('perf.rateTrend'),
+            // The site marks a sub-band sample in the error colour; a dip is
+            // the whole reason this chart exists beside the average.
+            tone: point => (point.rate !== null && point.rate < 90 ? '#ef4444' : '#10b981'),
+          })))
+    }
+
+    /**
+     * One model's hourly series, fetched when its 详情 is opened.
+     *
+     * Lazy on purpose: the roster shows twelve strips, and the charts behind
+     * them would cost twelve extra requests to draw something nobody has asked
+     * to see. `enabled` is false until the card expands.
+     */
+    function usePerfSeries(modelId, enabled) {
+      const [state, setState] = useState({ status: 'idle', series: null })
+      useEffect(() => {
+        if (enabled !== true || typeof modelId !== 'string' || modelId === '') return undefined
+        let alive = true
+        setState({ status: 'loading', series: null })
+        api(`/perf/series?model=${encodeURIComponent(modelId)}`, { timeout: 12000 }).then(payload => {
+          if (!alive) return
+          const series = Array.isArray(payload?.series) ? payload.series : null
+          setState({ status: series === null ? 'none' : 'ready', series })
+        }).catch(() => { if (alive) setState({ status: 'none', series: null }) })
+        return () => { alive = false }
+      }, [modelId, enabled])
+      return state
+    }
+
+    /**
+     * The site's two trend charts, drawn as SVG.
+     *
+     * The site renders them to a canvas; SVG is used here so the lines stay
+     * crisp at any density and the theme's own text colours apply. The shape
+     * matches: 60px of Y-axis labels, horizontal gridlines, a line with a dot
+     * per sample, and hour labels along the bottom. The availability chart
+     * marks the samples that fell below the healthy band in the error colour,
+     * which is how the site shows an incident at a glance.
+     */
+    function PerfTrendChart(props) {
+      const { points, pick, min, max, unit, color, t, tone } = props
+      const W = 300
+      const H = 116
+      const pad = { left: 34, right: 6, top: 8, bottom: 18 }
+      const rows = points.filter(point => pick(point) !== null && pick(point) !== undefined)
+      if (rows.length < 2) return h('p', { className: 'ofm_perfnote' }, t('perf.noSeries'))
+      const lo = min === undefined ? 0 : min
+      const hi = max === undefined ? Math.max(...rows.map(pick)) : max
+      // Five gridlines on a round ladder, the way the site labels its axis
+      // (0 / 60k / 120k / 180k / 240k / 300k) — not the raw peak, which would
+      // print 20303 and 60908. The line scales to the same top the axis shows,
+      // so a point never floats above its own gridline.
+      const top = max === undefined ? niceCeil(hi) : hi
+      const span = top - lo || 1
+      const x = i => pad.left + (i / (rows.length - 1)) * (W - pad.left - pad.right)
+      const y = v => pad.top + (1 - (v - lo) / span) * (H - pad.top - pad.bottom)
+      const path = rows.map((point, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)},${y(pick(point)).toFixed(1)}`).join(' ')
+      const ticks = Array.from({ length: 5 }, (_, i) => lo + (span * i) / 4)
+      const tickLabel = value => unit === '%'
+        ? `${Math.round(value)}%`
+        : value >= 1000 ? `${Math.round(value / 1000)}k ms` : `${Math.round(value)} ms`
+      const hourLabel = ts => {
+        const d = new Date(ts * 1000)
+        return `${String(d.getHours()).padStart(2, '0')}:00`
+      }
+      return h('svg', { className: 'ofm_chart', viewBox: `0 0 ${W} ${H}`, role: 'img',
+        'aria-label': props.label },
+        ticks.map((tick, i) => h('g', { key: i },
+          h('line', { x1: pad.left, x2: W - pad.right, y1: y(tick), y2: y(tick),
+            className: 'ofm_chartgrid', strokeDasharray: i === 0 ? undefined : '3 3' }),
+          h('text', { x: pad.left - 5, y: y(tick) + 3, className: 'ofm_chartaxis', textAnchor: 'end' },
+            tickLabel(tick)))),
+        h('path', { d: path, fill: 'none', stroke: color, strokeWidth: 1.6,
+          strokeLinejoin: 'round', strokeLinecap: 'round' }),
+        rows.map((point, i) => h('circle', {
+          key: i, cx: x(i), cy: y(pick(point)), r: 1.9,
+          fill: tone === undefined ? color : tone(point),
+          className: 'ofm_chartdot',
+        })),
+        // Four hour labels across the window, as the site spaces them.
+        [0, Math.floor(rows.length / 3), Math.floor((rows.length * 2) / 3), rows.length - 1].map((idx, i) => h('text', {
+          key: `x${i}`, x: x(idx), y: H - 5, className: 'ofm_chartaxis',
+          textAnchor: i === 0 ? 'start' : i === 3 ? 'end' : 'middle',
+        }, hourLabel(rows[idx].ts))))
+    }
+
+    /**
+     * One bar's colour, using the site's own thresholds.
+     *
+     * The model square colours each hourly tick emerald at 99 and above, amber
+     * from 90, red below — and grey for an hour with no sample. Copying those
+     * cut-offs is the point: the same day must look the same in both places.
+     */
+    function perfTone(rate) {
+      if (rate === null || rate === undefined) return 'none'
+      const n = Number(rate)
+      if (!Number.isFinite(n)) return 'none'
+      if (n >= 99) return 'good'
+      if (n >= 90) return 'fair'
+      return 'poor'
+    }
+
+    /**
+     * The next round number at or above `value`, for an axis top.
+     *
+     * 60908 → 70000, 300000 → 300000, 96 → 100. One significant-figure step
+     * above the data, so the top gridline is always a number a reader can hold
+     * in their head rather than the exact peak of the sample.
+     */
+    function niceCeil(value) {
+      const n = Number(value)
+      if (!Number.isFinite(n) || n <= 0) return 1
+      const magnitude = 10 ** Math.floor(Math.log10(n))
+      for (const step of [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]) {
+        const candidate = step * magnitude
+        if (candidate >= n) return candidate
+      }
+      return 10 * magnitude
+    }
+
+    /** The strip's latency figure, in the site's own spelling (`144.96s`). */
+    function formatLatency(ms) {
+      const n = Number(ms)
+      if (!Number.isFinite(n) || n < 0) return '—'
+      return `${(n / 1000).toFixed(2)}s`
+    }
+
+    /** The strip's throughput figure, in the site's own spelling (`55.9t/s`). */
+    function formatSpeed(tps) {
+      const n = Number(tps)
+      if (!Number.isFinite(n) || n < 0) return '—'
+      return `${n.toFixed(1)}t/s`
+    }
+
     function isFreePoolModel(model) {
       return !model.channel || model.channel === 'anonymous' || model.channel === 'kilo' || model.channel === 'extension'
     }
@@ -3559,6 +3860,7 @@ window.__ModuleLoader__.load({
 
     function Roster(props) {
       const { summary, t, onBench, benches = {}, auth, eacLogin, only, onApply, busy } = props
+      const perfFigures = usePerfFigures()
       // 免费页与水位采用相同范围：匿名免费模型和 Kilo；其他付费来源留在各自页面。
       const roster = only === undefined ? summary.catalog
         : only === 'eac' ? summary.catalog.filter(m => m.channel === 'eac')
@@ -3584,6 +3886,7 @@ window.__ModuleLoader__.load({
           h('div', { className: 'ofm_grid' }, list.map(m => h(ModelCard, {
             key: m.id, model: m, t, onBench, locked: m.channel === 'eac' && locked, eacLogin,
             onVisibility: toggleModel, busy,
+            perf: perfFigures[m.id],
             bench: { running: benches[m.id]?.running === true, ...benches[m.id]?.result === undefined ? {} : { result: benches[m.id].result } },
           }))))
       // The lane closed at the gate is the one "no EAC models" case the page can
@@ -8362,6 +8665,36 @@ window.__ModuleLoader__.load({
       } catch { return 'en' }
     }
 
+    /**
+     * Decide whether this page announces the last hot reload.
+     *
+     * The server acknowledgement is authoritative because it survives a new
+     * origin: another port, another hostname, or the desktop shell's random
+     * port all have an empty localStorage. The cache only suppresses a repeat
+     * toast in the same origin; an unconfirmed server acknowledgement must
+     * still be retried if its previous write failed or has not landed yet.
+     */
+    function reloadNoticePlan(meta, cached) {
+      const at = Number(meta?.reloadedAt ?? 0)
+      if (!Number.isFinite(at) || at <= 0) return { at: 0, show: false }
+      const seen = Number(meta?.reloadNoticeSeen ?? 0)
+      if (seen === at) return { at, show: false }
+      if (cached !== undefined && cached !== null && String(at) === String(cached)) return { at, show: false }
+      return { at, show: true }
+    }
+
+    /** Show the toast at most once, and retry any missing server acknowledgement. */
+    async function announceReloadNotice(meta, cached, { show, ack, remember }) {
+      const plan = reloadNoticePlan(meta, cached)
+      if (plan.at <= 0) return { ...plan, shown: false }
+      remember(plan.at)
+      if (plan.show) show(plan)
+      if (Number(meta?.reloadNoticeSeen ?? 0) !== plan.at) {
+        try { await ack(plan.at) } catch { /* retry on the next check without repeating the toast */ }
+      }
+      return { ...plan, shown: plan.show }
+    }
+
     function apply(ctx) {
       const t = ctx.locale.bind(NS)
       ctx.effect(() => ctx.locale.register(NS, { zh: DICT.zh, en: DICT.en }), 'our-free-model: dictionaries')
@@ -8485,23 +8818,23 @@ window.__ModuleLoader__.load({
       }, 'our-free-model: push subscription')
 
       // A hot reload or in-app upgrade swaps this bundle while the page stays
-      // open. The only durable marker across that swap is localStorage, so the
-      // successor announces what happened exactly once.
+      // open. The server records the acknowledgement, so the successor
+      // announces what happened exactly once across every origin.
       ctx.effect(() => {
         void (async () => {
           try {
             const meta = await api('/meta')
-            const at = Number(meta?.reloadedAt ?? 0)
-            if (at <= 0) return
-            let seen = ''
-            try { seen = window.localStorage?.getItem('ofm.reloadedAt') ?? '' } catch { /* storage unavailable */ }
-            if (String(at) === seen) return
-            try { window.localStorage?.setItem('ofm.reloadedAt', String(at)) } catch { /* ignore */ }
-            showToast({
-              title: meta.version !== '' ? `Our Free Model ${meta.version}` : 'Our Free Model',
-              body: t('reload.done').replace('{n}', String(meta.reloadCount ?? 0)),
-              actions: [{ label: t('reload.refresh'), onClick: () => { try { window.location.reload() } catch { /* top-level navigation refused */ } } }],
-              holdMs: 12000,
+            let cached = ''
+            try { cached = window.localStorage?.getItem('ofm.reloadedAt') ?? '' } catch { /* storage unavailable */ }
+            await announceReloadNotice(meta, cached, {
+              show: () => showToast({
+                title: meta.version !== '' ? `Our Free Model ${meta.version}` : 'Our Free Model',
+                body: t('reload.done').replace('{n}', String(meta.reloadCount ?? 0)),
+                actions: [{ label: t('reload.refresh'), onClick: () => { try { window.location.reload() } catch { /* top-level navigation refused */ } } }],
+                holdMs: 12000,
+              }),
+              ack: at => post('/reload-notice/ack', { at }),
+              remember: at => { try { window.localStorage?.setItem('ofm.reloadedAt', String(at)) } catch { /* ignore */ } },
             })
           } catch { /* backend absent */ }
         })()
@@ -8563,7 +8896,7 @@ window.__ModuleLoader__.load({
     exports.inject = inject
     exports.name = 'our-free-model'
     // Headless test seams use the same stub React as scripts/client-lint.mjs.
-    exports.__test = { parseSafeHtml, safeUrl, sanitizeStyle, htmlToDom, buildHeatCells, Heatmap, ChannelsPage, UpgradePanel, useEacLogin, EacAuth, PicksPage, RecoCard, DICT, useChannelRpc, Shell, SubscriptionsPage, Disclaimer, CSS }
+    exports.__test = { parseSafeHtml, safeUrl, sanitizeStyle, htmlToDom, buildHeatCells, Heatmap, ChannelsPage, UpgradePanel, useEacLogin, EacAuth, PicksPage, RecoCard, DICT, useChannelRpc, Shell, SubscriptionsPage, Disclaimer, CSS, reloadNoticePlan, announceReloadNotice }
     return module.exports
   },
 })