[xinspark]

What

Adds a Model share card to the settings section, between the yearly heatmap and the By model table: one stacked band of the total tokens per model — the four largest named, every remaining model merged into a single grey other segment — with the hovered/focused segment's name and percentage in the caption underneath (the largest segment when nothing is hovered).

[============================][=========]
deepseek-flash                    88.1%

Why

The table already answers "how many tokens per model", but the split is only visible by reading down the share column and adding it up mentally. One band answers "which model dominates, and by how much" at a glance — deepseek-flash 88.1% is one line instead of four table rows.

How it is wired

• Placement: StatsDashboard renders h(ModelShareCard, { rows: data.byModel, currency }) right after HeatmapCard. No host change, no new endpoint, no new dependency — it consumes the byModel rows usage/query already returns ({ key, totalTokens, inputTokens, outputTokens, cost }).
• Pure derivation: modelShares(rows, limit) folds those rows into segments (key, label, tokens, input, output, cost, ratio, color): top N by totalTokens, every remaining row aggregated into one __other__ segment. total === 0 renders nothing, same as HeatmapCard on empty days; rows without tokens are dropped and junk rows cannot throw.
• Tooltip: follows the HeatmapCard idiom exactly — local { key, left, top } state from getBoundingClientRect(), position: fixed, the shared .tsd-tooltip at translate(-50%, -110%). No new tooltip mechanism.
• Colour: only tokens this file already uses. The theme ships four categorical hues (--dsw-static-deepseek-500, --dsw-static-green-500, --dsw-static-deepseek-300, --dsw-alias-state-warn-primary); --dsw-alias-border-l3 (grey) marks other. That scarcity is why the band names four models rather than, say, eight.
• A11y: each segment is role="button", tabIndex: 0, with an aria-label of "name, percentage"; hover and focus drive the same tooltip; the band is role="group" labelled by shareHint, which states the top-4 / other rule; focus gets the same 2px --dsw-alias-state-business-primary outline used elsewhere in this file.
• i18n: modelShare / shareHint / shareOther added to both the ZH and EN dictionaries.

Verification

• npm run build → lib/client/index.js (223,104 bytes, id derived as before); node --check clean.
• npm test → 77/77 pass (the existing suite).
• The client half has no test harness upstream — tests/*.test.js covers src/host/* and the build script only — so the aggregation was checked out of tree: the two pure helpers were read out of src/client/index.js and evaluated in plain node, 21 assertions (top-4 + merge, ratio sum = 1, other-segment aggregation, zero/absent/junk rows, custom limit, name shortening). Happy to promote that to tests/client-model-share.test.js if you want a gate in the repo — it would need the same "treat the source as text" trick scripts/build-client.js already uses, since the single-file body is not importable.
• Not rendered inside a running harness from this branch: installing it next to my own fork collides on the fiber id (usage) and the slot id (token-stats), so I did not. The card is a port of the one my fork already ships in the same theme — say the word and I will attach a screenshot (or a recording of the hover/focus behaviour).

One file, +172/-0, no build or manifest changes.

[xinspark]

Superseded by #4, which reworks this card and merged as 6c326bb.

This PR's approach was dropped (it put the share bar in a separate block and relied on a native title tooltip that covered the neighbouring card). The shipped version is a normal .tsd-cards item: pill bar plus an 11px caption, a fixed tooltip per segment, and colours taken only from theme families that actually exist (--dsw-static-deepseek/green/amber/red) -- the two --color-* tokens used here do not exist in DSH, which is why segments rendered grey and white.

Kept closed as a record; no code from this branch should be merged.