diff --git a/.agents/notes/implemented/feature/2026-09-09-usage-share-image.md b/.agents/notes/implemented/feature/2026-09-09-usage-share-image.md
new file mode 100644
index 000000000..780c15c26
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-09-usage-share-image.md
@@ -0,0 +1,202 @@
+# Replace the usage ticket card with a fixed-format usage report
+
+Status: implemented
+Translation: current
+
+[中文](2026-09-09-usage-share-image.zh.md)
+
+## Abstract
+
+The previous usage share card was a hand-drawn canvas "cinema ticket": 1446 lines
+of bespoke rendering with foil palettes, a VHS filter, an isometric skyline, a
+WebM encoder, and its own webfont loader, shipped dark behind `SHOW_SHARE_CARD =
+false`. Its failure was a product one rather than a technical one — it treated a
+recurring, comparable record as a novelty object, so no two cards looked alike and
+none read at feed thumbnail size. It is deleted and replaced by a fixed-format
+React card that reuses the session share card's capture pipeline, theme pinning,
+and backdrop presets while inverting its configuration model: the session card is
+an editor with nine appearance knobs because its content has no fixed shape, and
+the usage card is a generator with five because its content does. The main
+unresolved limit is visual: no automated screenshot acceptance was run, so the
+layout is verified by Storybook and typecheck only.
+
+## Decision
+
+**The period is the screen's range, not a private one.** An earlier draft gave the
+dialog its own period selector (30 days / past year / all time). That would have
+let the card's headline disagree with the KPI tile the user pressed Share from,
+and "all time" could only have been served by numbers the 53-week calendar cannot
+support. Instead the card takes the range the Usage screen is already showing, and
+its hero number is that range's own timeline total. Hourly ranges count intervals
+and day-denominated ranges count days across the same four headline cells — the
+same split the on-screen summary already makes, now computed once in
+`usage-share-stats.ts` so the page and the image cannot drift apart.
+
+**The graphic follows the range — a reversal.** The first decision here was that
+the heatmap is always the past 53 weeks with the range lit inside it, on the
+grounds that swapping the block per range doubles the layout surface and destroys
+comparability. That reasoning still holds for the day-denominated ranges, and they
+keep the lit-window calendar. It did not survive contact with the short ranges: a
+24h card drew a year with **one cell lit**, which is not a comparable record, it is
+a wasted band.
+
+The Usage screen already speaks three visual languages — an hour skyline for 24h, a
+day-by-hour dot grid for 7d, the calendar for the longer windows — so the card now
+makes the same split rather than inventing a fourth. Comparability is preserved
+where it means something: two 30-day cards still line up, and two 24h cards still
+line up, because a card is only ever compared against the same range. The layout
+surface is contained by giving the graphic one fixed box (`GRAPHIC_H`) that every
+kind fits, so the card's height does not depend on its range.
+
+That box also settled the week grid's labels. Seven days of hour buckets touch
+eight calendar days whenever the window does not start at midnight, so a per-row
+label has to disambiguate the repeated weekday — but eight rows in a 58px box leave
+7px each, which holds no size on the card's own type scale. The first attempt
+reached for an off-scale 8px and produced exactly the squeezed left column the
+scale exists to prevent. The rows now carry no label at all: they run oldest to
+newest, the grid shares the same left edge as every other band, and the headline
+already names the span.
+
+**Privacy defaults follow the data, not the gesture.** Sharing activity does not
+imply sharing spend, so tokens are the default and naming cost as the measure is a
+deliberate act. Cost began as a switch that appended a USD figure beside the token
+headline; making it the card's *measure* instead is both better product and a
+tighter default, because the two units now substitute rather than accumulate — a
+cost card cannot leak a token count alongside the spend. Everything follows the
+choice: headline, cells, the heatmap's own intensity scale, and both splits, all
+derived once with the metric threaded through `usage-share-stats.ts`.
+
+Cost had to learn the card's numeric language to fit it. Tokens were compact
+everywhere (`1.3B`, `42M`) while money was written out in full, and a string that
+grows with its value does not belong in a fixed layout: measured in the 16:9 card,
+the gap between the headline and the stat cells fell from 208px at `1.3B` to 119px
+at `$5,297.05`, 10px at `$123,456,789.01`, and **−18px** — an overlap — at ten
+figures. The first fix compacted from a thousand up, which
+bounded the width but threw away the thing a cost card is usually chosen to show:
+`$5.3K` hides the digits that are the point. `formatUsdCompact` now shortens in two
+stages — cents go above a thousand, the figure itself only past a billion — so
+`$5,297` and `$1,234,568` survive whole. Measured again on the 16:9 card, the worst
+surviving case (`$999,999,999`) leaves a 59px gap where the old formatting
+overlapped by 18px.
+
+Width is per slot, not per card. Preserving digits in the headline pushed the
+problem into the stat cells, which have a quarter of its width and rendered
+`$42,040…` — an ellipsis on a number is a wrong number, worse than a rounded one,
+and `truncate` had been quietly producing it. `formatUsdTight` always compacts
+above a thousand and serves the cells and the legend, while the headline keeps
+`formatUsdCompact`.
+
+The same screenshot exposed an API trap: `metric` was a card prop separate from
+the `stats` it described, so a caller could pair one metric's figures with the
+other's unit — which is exactly what a Storybook control did, rendering 1.26
+billion tokens as `$1.3B`. The metric now lives inside `UsageShareStats`, stamped
+by the function that derives it, and the card reads it from there. Member identification is a second opt-in, is offered only when the range
+has more than one contributor, and carries display name and avatar only — the
+timeline also holds emails, and `computeUsageShareMemberSlices` never reads them.
+A test asserts no email reaches the slices.
+
+**Density is a correctness property here, not a taste one.** The first layout
+distributed its five blocks evenly over the portrait's height and left large voids
+— which is what a fixed-format card degenerates into when the content is specified
+before the canvas. The fix added information rather than padding: month ticks on
+the heatmap (a year of texture with no time scale cannot answer "when"), a fourth
+headline cell, absolute dates beside the range's name, and absolute token counts
+beside each split percentage.
+
+**The space beside the headline stays empty.** Six attempts went into filling it.
+Five were the brand mark: an outline stroked from `lody.svg` (a different jellyfish
+than the product icon, so one card carried two), a low-opacity ghost of
+`lody-icon.png` (read as a second logo parked in a corner), a full-height silhouette
+(a shadow behind the heatmap and the legend, the densest bands), a top-cropped one
+(the bell sliced flat into a smudge under the range chip), and a right-bleeding one
+that finally looked deliberate but was still decoration. The sixth put the range's
+own bucket profile there, which was at least content — and it was still one graphic
+too many next to a card that already carries a year heatmap and a model split.
+
+The conclusion is the record here: that space is empty by choice. Whitespace beside
+a headline is a normal thing for a poster to have, and every attempt to fill it
+either repeated a band below or invented something to occupy the reader.
+
+**The card declares its own type and spacing scale.** Built element by element it
+accumulated ten font sizes (10, 10.5, 11, 11.5, 13, 15px …) whose half-pixel steps
+carry no hierarchy, and the portrait band was padded `px-7` against a `px-6`
+footer, so the workspace name never lined up with the number above it. An exported
+image has no hover state or tooltip to recover a hierarchy that blurred sizes lose,
+and two cards a month apart must set the same words identically — so `TEXT` names
+five roles and every text node picks one, `PAD_X` is the single horizontal padding
+for every band including the footer, and all spacing sits on a 4px grid. Vertical
+rhythm is the one permitted divergence, because only the height budget differs
+between 4:5 and 16:9; it lives in one `RHYTHM` record of two rows rather than
+scattered per element. Both formats are asserted to have zero content overflow.
+
+**Two formats, no more.** Portrait 576×720 and wide 704×396 (1152×1440 / 1408×792
+at the pipeline's 2x scale) cover the feed and the inline-preview destinations.
+The card is exactly these pixels *including any backdrop* — which is the trap the
+first sizing fell into: a framed card is 48px shorter than an unframed one, the
+layout had been tuned against the unframed story, and the framed default overflowed
+its footer by 23px while flex quietly ate the bottom padding instead of reporting
+it. Only the headline band may flex now; every other band is `shrink-0`, so a
+layout that does not fit fails visibly rather than silently compressing.
+
+**The footer is a sign-off, and it was measurably thinner than it looked.** Read
+against the session card it seemed to be missing things; measured against it, the
+usage footer was already identical to that card's `row` variant — 57px, a 33px
+mark — and carried one field more, the workspace name. What it was being compared
+to was the `stacked` variant at 154px, which a 720px card cannot spend 21% of its
+height on and a 396px one cannot fit at all. So the portrait footer takes the
+middle: the session card's identity-plus-sub structure (workspace, then `lody.ai`
+under it) with a full-size code, 73px, paid for out of the headline band's slack
+rather than out of any information band. It deliberately omits that card's EXIF
+parameter line, which here would only repeat the bands above. The wide format
+keeps the single row.
+
+The session card's `canvas` footer turned out to be worth taking as well, and it is
+the only placement that *gives* the card height rather than taking it: the in-card
+band disappears and the sign-off prints on backdrop pixels that were empty frame.
+It is a sixth knob on a card whose whole argument is few knobs, which is affordable
+because it is a placement rather than a style, and because it degrades honestly —
+with no backdrop there is nothing to print on, so it falls back to the in-card
+footer exactly as the session card does. The other variants were measured and left:
+`stacked` does not fit, `row` is what the wide format already is, `minimal` drops
+the workspace name and the code, and `exif` would repeat the bands above.
+
+**One capture pipeline for both cards.** `lib/chat-share-image-export.ts` became
+`lib/share-image-export.ts` with `copyShareImage` / `exportShareImage(element,
+title, fallback)`; `components/chat-share-theme-scope.ts` became
+`components/share-theme-scope.ts`. Duplicating ~100 lines of snapdom, font
+readiness, and Electron bridge handling into a second module was the alternative
+and was rejected. The filename fallback became a required argument so the chat
+surface keeps `lody-conversation` while usage gets `lody-usage`.
+
+The share entry sits beside the range selector in `StatsSettingsView` behind an
+opt-in `shareCard` prop, and the dialog is lazy-loaded, so the public landing demo
+that reuses the same view neither offers an action it cannot perform nor pulls
+snapdom and qrcode into its bundle.
+
+## Alternatives not taken
+
+Keeping the ticket renderer behind its flag and restyling it was possible; canvas
+was rejected because it re-implements theming, i18n, RTL, and text layout that the
+DOM path gets from the design system, and because the exported card cannot then be
+covered by Storybook.
+
+Mobile (`MobileStatsSettings`) does not get the entry in this change. It renders
+its own layout and would share through `@capacitor/share` rather than a dialog with
+a save button, which is a different interaction, not a smaller one.
+
+## Evidence and limits
+
+[The draft specification](../../../../specs/usage-share-image.md) owns the intended
+behavior. `tests/usage-share-stats.test.ts` covers window-scoped streaks and
+averages, the interval/day trio switch, the all-time lighting rule, the
+no-timeline fallback, slice ranking and remainder folding, and the email
+exclusion, all on synthetic fixtures with fixed timestamps.
+`tests/share-image-export.test.ts` (renamed with its module) continues to cover
+browser download cleanup, native save cancellation and failure, and invalid
+capture results; it mocks rasterization and establishes no pixel fidelity.
+`UsageShareCard.stories.tsx` covers both formats, both subjects, the hourly range,
+the cost opt-in, and the bare card; every state was rendered and inspected in
+Storybook, and the wide layout was rebuilt after its first version overflowed its
+footer. `pnpm --filter @lody/components exec tsgo
+--noEmit` passes. No automated screenshot or visual acceptance was run, and the
+card has not been exercised against a live workspace.
diff --git a/.agents/notes/implemented/feature/2026-09-09-usage-share-image.zh.md b/.agents/notes/implemented/feature/2026-09-09-usage-share-image.zh.md
new file mode 100644
index 000000000..181fc6f1d
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-09-usage-share-image.zh.md
@@ -0,0 +1,149 @@
+# 用固定版式的用量报告替换电影票卡片
+
+Status: implemented
+Translation: current
+
+[English](2026-09-09-usage-share-image.md)
+
+## 摘要
+
+此前的用量分享卡片是一张手绘 canvas 的「电影票」：1446 行自定义渲染，带烫金色板、
+VHS 滤镜、等距天际线、WebM 编码器和自己的网页字体加载器，并且一直以
+`SHOW_SHARE_CARD = false` 处于关闭状态。它的失败是产品层面的而非技术层面的——它把一个
+周期性、可比较的记录做成了新奇玩具，于是没有两张卡片长得一样，也没有一张在信息流缩略图
+尺寸下读得清。现在它被删除，替换为一张固定版式的 React 卡片：复用会话分享卡片的截图管线、
+主题钉定与背景预设，但把配置模型反了过来——会话卡片是一个有九个外观旋钮的编辑器，因为
+它的内容没有固定形状；用量卡片是一个只有五个旋钮的生成器，因为它的内容有。目前主要的
+未决限制在视觉侧：没有运行自动截图验收，版面仅通过 Storybook 和类型检查确认。
+
+## 决策
+
+**区间取自页面，而不是对话框自己的。** 早先的草案给对话框一个独立的周期选择器
+（30 天 / 过去一年 / 全部）。那会让卡片的主数字与用户按下分享时看着的 KPI 卡片对不上，
+而「全部」也只能靠 53 周日历无法支撑的数字来兑现。改为：卡片采用用量页面当前展示的区间，
+主数字就是该区间时间线自己的总量。同样的四个标题格，小时粒度的区间数区间，按天计的
+区间数天——与页面上的摘要本来就在做的区分一致，现在统一收敛到 `usage-share-stats.ts`
+计算一次，页面与图片不会各说各话。
+
+**图形跟随区间——这是一次推翻。** 这里最初的决定是「热力图恒为过去 53 周，被分享的
+区间在其中点亮」，理由是按区间替换会让版面面积翻倍、并摧毁可比性。这个理由对按天计的
+区间依然成立，它们保留了「点亮窗口的年度日历」。但它没能经受住短区间的检验：24h 的卡片
+画出来是一整年里**只有一个格子亮着**——那不是可比的记录，那是一条被浪费的信息带。
+
+用量页面本来就有三套视觉语言——24h 的小时天际线、7d 的天×小时点阵、更长窗口的年度
+日历——所以卡片改为沿用同一套划分，而不是另造第四种。可比性在真正有意义的地方被保住了：
+两张 30 天的卡仍然对得上，两张 24h 的卡也仍然对得上，因为一张卡永远只会和**同一个区间**
+的卡相比。版面面积则由「图形只有一个固定盒子（`GRAPHIC_H`）、三种图形都塞进去」来约束，
+所以卡片高度不随区间变化。
+
+这个盒子同时也决定了周网格的行标签。7×24 小时只要不从零点开始就会跨 8 个日历日，
+于是行标签必须消解重复的星期几——但 8 行塞进 58px 的盒子，每行只剩 7px，卡片自己的
+字号标尺里没有任何一档装得下。第一次尝试伸手去拿了标尺外的 8px，结果正是那条标尺本来
+就要防止的、挤成一团的左侧列。现在行上不放任何标签：它们从旧到新排列，网格与其他每一条
+信息带共用同一个左边缘，而跨度主数字那里已经写明了。
+
+**隐私默认值跟随数据，而不是跟随动作。** 分享活跃度并不蕴含分享花费，所以默认口径是
+token，把成本选为度量是一个明确的动作。成本最初是一个「在 token 主数字旁附加一个美元
+数字」的开关；改成让它成为卡片的**度量**，既是更好的产品，也是更紧的默认值——两种单位
+现在是**替换**而非叠加，成本卡不可能在花费旁边泄漏出 token 数。所有东西都跟着这个选择走：
+主数字、四个格、热力图自身的强度标尺、以及两种占比，全部由 `usage-share-stats.ts` 一次
+派生并把度量贯穿下去。
+
+成本必须学会卡片的数字语言才装得下。token 处处都是紧凑写法（`1.3B`、`42M`），而金额却是
+完整格式——一个长度随数值增长的字符串不属于固定版式。在 16:9 卡上量过：主数字到统计格的
+间距从 `1.3B` 的 208px，降到 `$5,297.05` 的 119px、`$123,456,789.01` 的 10px，到十位数时
+变成 **−18px**，也就是重叠。第一版修法是从一千起就紧凑，宽度是压住了，
+却把「选成本口径通常就是为了展示数额」这件事一起扔掉了——`$5.3K` 恰恰藏起了那些位数。
+`formatUsdCompact` 现在分两级缩短：**一千以上去掉分位，十亿以上才压缩数字本身**，于是
+`$5,297`、`$1,234,568` 都完整保留。重新量过 16:9 卡：最坏的完整情形（`$999,999,999`）
+仍留有 59px 间距，而旧写法在这个量级已经重叠了 18px。
+
+宽度是**每个槽位**的事，不是整张卡的事。在主数字里保住位数，等于把问题推给了统计格——
+它只有主数字四分之一的宽度，于是渲染出 `$42,040…`。数字上的省略号是**错误的数字**，
+比四舍五入更糟，而 `truncate` 一直在悄悄制造它。`formatUsdTight` 从一千起一律压缩，
+服务统计格和图例；主数字仍用 `formatUsdCompact`。
+
+同一张截图还暴露了一个 API 陷阱：`metric` 原本是与它所描述的 `stats` 相互独立的卡片属性，
+调用方可以把一种度量的数字配上另一种度量的单位——Storybook 的控件正好做到了这件事，
+把 12.6 亿个 token 渲染成了 `$1.3B`。现在度量存放在 `UsageShareStats` 内部，由派生它的
+函数盖章，卡片从那里读取。成员身份是第二个显式选项，只有当区间里不止一位贡献者时
+才提供，并且只携带显示名与头像——时间线里同时存着邮箱，而
+`computeUsageShareMemberSlices` 从不读取它。有一条测试断言没有邮箱进入切片。
+
+**在这里密度是正确性问题，不是审美问题。** 第一版把五个信息块沿竖版高度均匀铺开，
+留下大片空洞——当内容先于画布被确定时，固定版式就会退化成这样。修法是加信息而不是加
+留白：热力图上的月份刻度（一年的纹理若没有时间轴，就回答不了"什么时候"）、第四个
+标题格、区间名旁边的绝对日期，以及每条占比旁边的绝对 token 数。
+
+**主数字旁边那块空，就让它空着。** 为了填它一共试了六版。前五版都是品牌标记：从
+`lody.svg` 描出的轮廓（那不是产品图标，于是同一张卡上有两只不同的水母）、`lody-icon.png`
+的低不透明度淡化（读作角落里的第二个 logo）、贯穿全高的剪影（热力图和图例这两块最密的
+带背后压上投影）、用上边缘裁切的剪影（伞盖被切平，成了压在区间胶囊底下的污渍），以及
+只从右边出血的那版——它终于看起来是有意为之，但仍然是装饰。第六版放的是区间自己的
+bucket 形状，那至少是内容；可对于一张已经有年度热力图和模型占比的卡片来说，它仍然是
+多出来的一张图。
+
+结论就是这条记录本身：那块空是**选择**，不是遗漏。主数字旁边有留白对海报来说再正常不过，
+而每一次试图填满它，结果要么重复了下面某一条带，要么凭空造了点东西来占住读者的注意力。
+
+**卡片自带一套字号与间距标尺。** 逐个元素堆出来的版本积累了十种字号
+（10、10.5、11、11.5、13、15px……），半像素的差别根本承载不了层级；竖版信息带用
+`px-7` 而页脚用 `px-6`，工作区名称从来就没和上面的数字对齐过。导出的图片没有悬停也
+没有 tooltip 去补回被模糊掉的层级，而相隔一个月的两张卡必须把同样的词排成同样的样子
+——于是 `TEXT` 只命名五个角色，每个文本节点从中挑一个；`PAD_X` 是包括页脚在内所有
+信息带唯一的水平内边距；所有间距落在 4px 栅格上。纵向节奏是唯一允许的分歧，因为两种
+画幅只有高度预算不同，它收在一条两行的 `RHYTHM` 记录里，而不是散落在各个元素上。
+两种画幅都断言了内容零溢出。
+
+**两种画幅，不再多。** 竖版 576×720 与横版 704×396（在管线的 2 倍缩放下为 1152×1440 /
+1408×792）覆盖信息流与内联预览两类去处。卡片**连同背景**恰好就是这些像素——第一版
+定尺寸时正是栽在这里：带背景的卡片比不带背景的矮 48px，而版面是照着无背景的 story 调的，
+于是默认带背景的竖版把页脚顶穿了 23px，flex 却悄悄吃掉底部内边距而不是报出来。现在只有
+主数字那一带可以伸缩，其余每一带都是 `shrink-0`，装不下就会显式暴露而不是被压扁。
+
+**页脚是签名，而不是状态栏；而且它「看起来薄」和「量出来薄」是两回事。** 和会话卡放
+在一起看，它像是少了很多东西；但量下来，用量卡的页脚和会话卡的 `row` 变体完全一致——
+57px、33px 的标记——而且还多带一个字段（工作区名）。被拿来比较的其实是 `stacked` 变体，
+高 154px：一张 720px 的卡拿不出 21% 的高度给它，396px 的横版更是根本放不下。于是竖版
+页脚取中间值：沿用会话卡「身份 + 副行」的结构（工作区名，下面是 `lody.ai`）配一个足尺
+二维码，73px，这点高度从主数字带的富余里出，不动任何一条信息带。它刻意不要那张卡的
+EXIF 参数行——在这里它只会重复上面已有的数字。横版保持单行。
+
+会话卡的 `canvas` 页脚也值得拿过来，而且它是唯一一个**给**卡片腾出高度而不是占用高度的
+放法：卡内那条带整个消失，签名印在本来就空着的背景边距上。这是一张「以少旋钮为论点」的
+卡片上的第六个旋钮，之所以还付得起，是因为它是**位置**而非样式，而且降级方式是诚实的
+——没有背景就没有可印的地方，于是回落到卡内页脚，和会话卡的行为完全一致。其余变体都量
+过后放弃：`stacked` 装不下，`row` 就是横版现在的样子，`minimal` 会丢掉工作区名和二维码，
+`exif` 则只会重复上面几条带。
+
+**两张卡片共用一条截图管线。** `lib/chat-share-image-export.ts` 改名为
+`lib/share-image-export.ts`，导出 `copyShareImage` / `exportShareImage(element, title,
+fallback)`；`components/chat-share-theme-scope.ts` 改名为
+`components/share-theme-scope.ts`。备选方案是把约 100 行 snapdom、字体就绪与 Electron
+桥接处理复制进第二个模块，已否决。文件名兜底改为必填参数，因此会话侧保留
+`lody-conversation`，用量侧得到 `lody-usage`。
+
+分享入口位于 `StatsSettingsView` 区间选择器旁，由可选的 `shareCard` 属性开启，对话框
+按需懒加载；因此复用同一视图的公开落地页演示既不会展示一个它无法执行的动作，也不会把
+snapdom 和 qrcode 拉进它的产物。
+
+## 未采纳的方案
+
+保留电影票渲染器并重新配色是可行的；canvas 被否决，是因为它重新实现了设计系统在 DOM
+路径上白给的主题、i18n、RTL 与文本排版，并且导出的卡片无法被 Storybook 覆盖。
+
+本次改动不为移动端（`MobileStatsSettings`）加入该入口。它渲染自己的版面，且会通过
+`@capacitor/share` 分享而不是一个带保存按钮的对话框，那是另一种交互，而非同一交互的
+缩小版。
+
+## 证据与限制
+
+[规格草案](../../../../specs/usage-share-image.md)承载意图行为。
+`tests/usage-share-stats.test.ts` 覆盖按窗口统计的连续与均值、区间/天三元组的切换、
+全部时间的点亮规则、无时间线时的回退、切片排序与尾部折叠，以及邮箱排除，全部基于
+时间戳固定的合成数据。`tests/share-image-export.test.ts`（随模块一同改名）继续覆盖
+浏览器下载清理、原生保存的取消与失败，以及无效的截图结果；它 mock 了栅格化，不能证明
+像素保真。`UsageShareCard.stories.tsx` 覆盖两种画幅、两种主体、小时粒度区间、花费开关
+以及无背景卡片；每种状态都在 Storybook 中渲染并逐一检查过，横版在第一版溢出到
+页脚之后被重排。`pnpm --filter @lody/components exec tsgo --noEmit` 通过。没有运行
+自动截图或视觉验收，卡片也未在真实工作区数据上验证过。
diff --git a/locales/en.json b/locales/en.json
index 43d0186d0..18629627f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -3255,13 +3255,44 @@
"workspace.usage.activeMembers": "Active members",
"workspace.usage.modelsUsed": "Models used",
"workspace.usage.topModel": "Top model",
+ "workspace.usage.shareImage.action": "Share usage card",
+ "workspace.usage.shareImage.dialogTitle": "Share usage card",
+ "workspace.usage.shareImage.dialogDescription": "PNG image of this range's usage",
+ "workspace.usage.shareImage.aspect": "Format",
+ "workspace.usage.shareImage.aspectPortrait": "Portrait (4:5)",
+ "workspace.usage.shareImage.aspectWide": "Wide (16:9)",
+ "workspace.usage.shareImage.subject": "Card",
+ "workspace.usage.shareImage.subjectPersonal": "Workspace",
+ "workspace.usage.shareImage.subjectTeam": "Workspace and members",
+ "workspace.usage.shareImage.subjectTeamHint": "The card will show member names and avatars with their share of this range.",
+ "workspace.usage.shareImage.theme": "Theme",
+ "workspace.usage.shareImage.themeApp": "Follow app",
+ "workspace.usage.shareImage.themeLight": "Light",
+ "workspace.usage.shareImage.themeDark": "Dark",
+ "workspace.usage.shareImage.backdrop": "Background",
+ "workspace.usage.shareImage.backdropNone": "None",
+ "workspace.usage.shareImage.content": "Content",
+ "workspace.usage.shareImage.showQr": "QR code",
+ "workspace.usage.shareImage.copyImage": "Copy image",
+ "workspace.usage.shareImage.copied": "Image copied to clipboard",
+ "workspace.usage.shareImage.exportPng": "Export PNG",
+ "workspace.usage.shareImage.metric": "Measure",
+ "workspace.usage.shareImage.metricCostHint": "The whole card is denominated in USD: the headline, the cells, the graphic and the split.",
+ "workspace.usage.shareImage.footer": "Sign-off",
+ "workspace.usage.shareImage.footerCard": "Inside the card",
+ "workspace.usage.shareImage.footerCanvas": "On the background",
+ "workspace.usage.shareImage.exportFailed": "Could not complete the image action. Please try again.",
+ "workspace.usage.shareImage.calendarCaption": "Past 53 weeks",
+ "workspace.usage.shareImage.hoursCaption": "Hour of day",
+ "workspace.usage.shareImage.weekCaption": "Day by hour",
+ "workspace.usage.shareImage.windowLit": "{{range}} highlighted",
+ "workspace.usage.shareImage.unknownMember": "Unknown member",
"workspace.usage.skyline.activeDays": "Active days",
"workspace.usage.skyline.activeIntervals": "Active intervals",
"workspace.usage.skyline.averagePerInterval": "Average per interval",
"workspace.usage.skyline.ascii": "ASCII skyline",
"workspace.usage.skyline.asciiCopied": "ASCII skyline copied",
"workspace.usage.skyline.asciiPreview": "ASCII loading preview",
- "workspace.usage.skyline.cardFailed": "Could not create usage share card",
"workspace.usage.skyline.clickForDetails": "Click for details",
"workspace.usage.skyline.clickHint": "Click a day to open its breakdown",
"workspace.usage.skyline.copyAscii": "Copy ASCII skyline",
@@ -3273,7 +3304,6 @@
"workspace.usage.skyline.dayDetail": "Day detail",
"workspace.usage.skyline.downloadAscii": "Download ASCII skyline",
"workspace.usage.skyline.downloadBinaryStl": "Download binary STL (.stl)",
- "workspace.usage.skyline.downloadCard": "Share usage card",
"workspace.usage.skyline.downloadStl": "Download STL skyline",
"workspace.usage.skyline.future": "Future",
"workspace.usage.skyline.heatmap": "Usage heatmap",
@@ -3288,12 +3318,10 @@
"workspace.usage.skyline.peakDay": "Peak day",
"workspace.usage.skyline.peakInterval": "Peak interval",
"workspace.usage.skyline.peakShare": "{{percent}}% of peak day",
- "workspace.usage.skyline.shareCard": "Share usage card",
"workspace.usage.skyline.stlMetalPreview": "Binary STL metal surface preview",
"workspace.usage.skyline.subtitle": "Last 53 weeks of daily usage",
"workspace.usage.skyline.title": "Usage skyline",
"workspace.usage.skyline.total": "Total",
- "workspace.usage.skyline.view": "Usage visualization",
"workspace.usage.skyline.windowSubtitle": "Last 30 days, lit inside the last 53 weeks",
"workspace.usage.skyline.webSearches": "{{count}} web searches",
"workspace.usage.skyline.webSearches_one": "{{count}} web search",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 8417d0186..f7ec60a67 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -3255,13 +3255,44 @@
"workspace.usage.activeMembers": "活跃成员",
"workspace.usage.modelsUsed": "使用模型",
"workspace.usage.topModel": "主要模型",
+ "workspace.usage.shareImage.action": "分享用量卡片",
+ "workspace.usage.shareImage.dialogTitle": "分享用量卡片",
+ "workspace.usage.shareImage.dialogDescription": "当前区间用量的 PNG 图片",
+ "workspace.usage.shareImage.aspect": "画幅",
+ "workspace.usage.shareImage.aspectPortrait": "竖版 (4:5)",
+ "workspace.usage.shareImage.aspectWide": "横版 (16:9)",
+ "workspace.usage.shareImage.subject": "卡片主体",
+ "workspace.usage.shareImage.subjectPersonal": "工作区",
+ "workspace.usage.shareImage.subjectTeam": "工作区与成员",
+ "workspace.usage.shareImage.subjectTeamHint": "卡片会展示成员的名称、头像及其在本区间的用量占比。",
+ "workspace.usage.shareImage.theme": "主题",
+ "workspace.usage.shareImage.themeApp": "跟随应用",
+ "workspace.usage.shareImage.themeLight": "浅色",
+ "workspace.usage.shareImage.themeDark": "深色",
+ "workspace.usage.shareImage.backdrop": "背景",
+ "workspace.usage.shareImage.backdropNone": "无",
+ "workspace.usage.shareImage.content": "内容",
+ "workspace.usage.shareImage.showQr": "二维码",
+ "workspace.usage.shareImage.copyImage": "复制图片",
+ "workspace.usage.shareImage.copied": "图片已复制到剪贴板",
+ "workspace.usage.shareImage.exportPng": "导出 PNG",
+ "workspace.usage.shareImage.metric": "度量",
+ "workspace.usage.shareImage.metricCostHint": "整张卡片以美元计价：主数字、四个格、图形和占比都跟着换算。",
+ "workspace.usage.shareImage.footer": "签名位置",
+ "workspace.usage.shareImage.footerCard": "卡片内",
+ "workspace.usage.shareImage.footerCanvas": "背景上",
+ "workspace.usage.shareImage.exportFailed": "图片操作未能完成，请重试。",
+ "workspace.usage.shareImage.calendarCaption": "过去 53 周",
+ "workspace.usage.shareImage.hoursCaption": "按小时",
+ "workspace.usage.shareImage.weekCaption": "按天 × 小时",
+ "workspace.usage.shareImage.windowLit": "高亮：{{range}}",
+ "workspace.usage.shareImage.unknownMember": "未知成员",
"workspace.usage.skyline.activeDays": "活跃天数",
"workspace.usage.skyline.activeIntervals": "活跃时段",
"workspace.usage.skyline.averagePerInterval": "每段平均",
"workspace.usage.skyline.ascii": "ASCII 天际线",
"workspace.usage.skyline.asciiCopied": "已复制 ASCII 天际线",
"workspace.usage.skyline.asciiPreview": "ASCII 加载预览",
- "workspace.usage.skyline.cardFailed": "无法生成用量分享卡",
"workspace.usage.skyline.clickForDetails": "点击查看明细",
"workspace.usage.skyline.clickHint": "点击某一天查看当日明细",
"workspace.usage.skyline.copyAscii": "复制 ASCII 天际线",
@@ -3273,7 +3304,6 @@
"workspace.usage.skyline.dayDetail": "当日明细",
"workspace.usage.skyline.downloadAscii": "下载 ASCII 天际线",
"workspace.usage.skyline.downloadBinaryStl": "下载二进制 STL (.stl)",
- "workspace.usage.skyline.downloadCard": "分享用量卡片",
"workspace.usage.skyline.downloadStl": "下载 STL 天际线",
"workspace.usage.skyline.future": "未来",
"workspace.usage.skyline.heatmap": "用量热力图",
@@ -3288,12 +3318,10 @@
"workspace.usage.skyline.peakDay": "峰值日期",
"workspace.usage.skyline.peakInterval": "峰值时段",
"workspace.usage.skyline.peakShare": "为峰值日的 {{percent}}%",
- "workspace.usage.skyline.shareCard": "分享用量卡片",
"workspace.usage.skyline.stlMetalPreview": "二进制 STL 金属表面预览",
"workspace.usage.skyline.subtitle": "最近 53 周的每日用量",
"workspace.usage.skyline.title": "用量天际线",
"workspace.usage.skyline.total": "总计",
- "workspace.usage.skyline.view": "用量可视化",
"workspace.usage.skyline.windowSubtitle": "最近 30 天，在最近 53 周中高亮",
"workspace.usage.skyline.webSearches": "{{count}} 次联网搜索",
"workspace.usage.skyline.webSearches_one": "{{count}} 次联网搜索",
diff --git a/packages/components/package.json b/packages/components/package.json
index 9023024de..56c68141f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -83,7 +83,6 @@
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@floating-ui/react": "^0.27.4",
- "@fontsource/bitcount-grid-double": "^5.3.0",
"@fontsource/inter": "^5.2.8",
"@fontsource/jetbrains-mono": "^5.2.8",
"@hookform/resolvers": "^5.1.1",
diff --git a/packages/components/src/components/chat-share-card.tsx b/packages/components/src/components/chat-share-card.tsx
index 35503d2bb..f5e814f02 100644
--- a/packages/components/src/components/chat-share-card.tsx
+++ b/packages/components/src/components/chat-share-card.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import QRCode from 'qrcode';
import { cn } from '@/lib/utils';
import { MarkdownRenderer } from '@/components/ai-gui/markdown-renderer';
-import { ensureChatShareThemeScopes } from '@/components/chat-share-theme-scope';
+import { ensureShareThemeScopes } from '@/components/share-theme-scope';
import lodyLogo from '@/assets/lody-icon.png';
export interface ChatShareCardMessage {
@@ -42,7 +42,7 @@ export interface ChatShareCardProps {
* Pins the card to one of the bundled Lody palettes (lody-light / vesper)
* instead of following the app theme — the exported image should look the
* way the user picked, not the way the app happens to be themed right now.
- * Scoped variables come from `ensureChatShareThemeScopes`; `.light-scope`
+ * Scoped variables come from `ensureShareThemeScopes`; `.light-scope`
* also opts out of any ancestor `.dark`.
*/
theme?: 'light' | 'dark';
@@ -237,7 +237,7 @@ export function ChatShareCard({
const framed = backdrop !== 'none';
// Injects the scoped theme rules before first paint; idempotent no-op after.
- ensureChatShareThemeScopes();
+ ensureShareThemeScopes();
const themeScopeClass =
theme === 'light' ? 'light-scope' : theme === 'dark' ? 'dark-scope' : undefined;
diff --git a/packages/components/src/components/sessions/chat-share-image-dialog.tsx b/packages/components/src/components/sessions/chat-share-image-dialog.tsx
index 8854488f8..7e9f77c16 100644
--- a/packages/components/src/components/sessions/chat-share-image-dialog.tsx
+++ b/packages/components/src/components/sessions/chat-share-image-dialog.tsx
@@ -9,7 +9,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Label } from '@/ui/label';
import { Input } from '@/ui/input';
import { Button } from '@/ui/button';
-import { copyChatShareImage, exportChatShareImage } from '@/lib/chat-share-image-export';
+import { copyShareImage, exportShareImage } from '@/lib/share-image-export';
import { Switch } from '@/ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
import {
@@ -162,7 +162,7 @@ export function ChatShareImageDialog({
setOperation('export');
setExportError(false);
try {
- await exportChatShareImage(exportRef.current, session?.title);
+ await exportShareImage(exportRef.current, session?.title, 'lody-conversation');
} catch {
setExportError(true);
} finally {
@@ -180,7 +180,7 @@ export function ChatShareImageDialog({
setExportError(false);
setCopied(false);
try {
- await copyChatShareImage(exportRef.current);
+ await copyShareImage(exportRef.current);
setCopied(true);
} catch {
setExportError(true);
diff --git a/packages/components/src/components/settings/AGENTS.md b/packages/components/src/components/settings/AGENTS.md
index 3b7ec04f6..808b1e924 100644
--- a/packages/components/src/components/settings/AGENTS.md
+++ b/packages/components/src/components/settings/AGENTS.md
@@ -30,6 +30,31 @@ rolls back — is in the root [AGENTS.md](../../../../../AGENTS.md).
use the default interface font so they remain readable.
- The Codex reset forecast chip in the provider row must not fetch on mount and must
pass `nestedInDialog` for its dialog: [../codex-reset/AGENTS.md](../codex-reset/AGENTS.md).
+- The usage share card is a fixed-format report, not a second `ChatShareCard`: its two
+ aspects are exact pixel sizes, its period is the page's selected range, and its
+ headline is that range's timeline total, so page and image cannot disagree. Derive
+ every number through `usage-share-stats.ts`, which stamps the metric onto the stats
+ it derives — never pass a metric beside them — so the headline, cells, graphic
+ shading and both splits always read one unit. Money is formatted per slot:
+ `formatUsdCompact` for the headline, `formatUsdTight` for cells and legend rows;
+ never let `truncate` decide, because an ellipsis on a number is a wrong number. Tokens and member
+ anonymity are the defaults; cost substitutes for tokens rather than joining them,
+ and member slices carry display name and avatar only — never an email. Both share cards use the one capture pipeline in `lib/share-image-export.ts`
+ and the one theme pinning in `components/share-theme-scope.ts`; do not fork either.
+ `StatsSettingsView` keeps the entry behind the opt-in `shareCard` prop with a lazy
+ dialog, because the public landing reuses that view. Typography and spacing come
+ from the card's own `TEXT`, `PAD_X`, and `RHYTHM` constants — never a fresh
+ `text-[…]` or an off-grid padding. `PAD_X` binds the footer too, so every band
+ shares one left edge. `ASPECT_SIZE` is the whole exported image including the
+ backdrop, so a framed card is 48px shorter — size the layout against the framed
+ case, and keep every band but the headline `shrink-0` so a card that does not fit
+ overflows visibly instead of eating its own padding. The graphic follows the range —
+ hour skyline, day-by-hour grid, or the 53-week calendar, matching the Usage
+ screen — and every kind must fit the one `GRAPHIC_H` box so card height never
+ depends on range. The space beside the
+ headline number is empty by choice: six attempts to fill it (five brand-mark
+ treatments, one range chart) each either repeated a band below or read as
+ decoration. Leave it alone.
## Agent Roles
diff --git a/packages/components/src/components/settings/stats-setting-pure.tsx b/packages/components/src/components/settings/stats-setting-pure.tsx
index 2d87ecb9a..6b3870472 100644
--- a/packages/components/src/components/settings/stats-setting-pure.tsx
+++ b/packages/components/src/components/settings/stats-setting-pure.tsx
@@ -1,7 +1,9 @@
-import { lazy, Suspense, useMemo, type ReactNode } from 'react';
+import { lazy, Suspense, useMemo, useState, type ReactNode } from 'react';
import NumberFlow from '@number-flow/react';
import { useTranslation } from 'react-i18next';
-import { Coins, DollarSign } from 'lucide-react';
+import { Coins, DollarSign, Share2 } from 'lucide-react';
+import { Button } from '@/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
import { formatCompactNumber, formatUsdAmount } from '@/lib/format-compact-number';
import { toIntlLocaleOrEn } from '@/lib/intl-locale';
import { cn } from '@/lib/utils';
@@ -50,6 +52,11 @@ export type StatsSettingsViewProps = {
* so large totals ($23,740) fit the tile without clipping.
*/
costFractionDigits?: number;
+ /**
+ * Opt-in share entry. Off by default so the public landing demo neither shows
+ * an action it cannot perform nor pulls the capture pipeline into its bundle.
+ */
+ shareCard?: boolean;
};
const RANGE_ORDER: SettingsUsageRange[] = ['day', 'week', 'month', 'total'];
@@ -62,6 +69,12 @@ const UsageCalendarVisualization = lazy(async () => {
return { default: module.UsageCalendarVisualization };
});
+// snapdom + qrcode are only needed once someone opens the share dialog.
+const UsageShareImageDialog = lazy(async () => {
+ const module = await import('./usage-share-image-dialog');
+ return { default: module.UsageShareImageDialog };
+});
+
export function formatTokens(value: number, locale?: string | null): string {
return new Intl.NumberFormat(locale ?? 'en').format(Math.round(value));
}
@@ -191,8 +204,10 @@ export function StatsSettingsView({
tintModelSeriesLabel,
tintMemberSeriesLabel,
costFractionDigits = 2,
+ shareCard = false,
}: StatsSettingsViewProps) {
const { t, i18n } = useTranslation();
+ const [shareOpen, setShareOpen] = useState(false);
const locale = toIntlLocaleOrEn(i18n.resolvedLanguage ?? i18n.language);
const windowCaption = t(`workspace.usage.window.${range}.long`);
const costDigits = Math.max(0, Math.min(2, costFractionDigits));
@@ -211,9 +226,39 @@ export function StatsSettingsView({
- ) : null}
- {isSharePreviewLoading ? (
- 
+ Lody
+
+ {rangeLabel}
+
+ 
+ ) : null}
+ 
- {phase === 'ejecting' && 
-