dsh-tacit 0.2.3 → 0.4.0

package/client/client.js

@@ -50,6 +50,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'status.autoOn': '自动学习已开启 · 今日 {today}/{budget}',
       'status.autoOff': '自动学习已关闭 — 仅在你点击「分析」时学习。',
       'status.autoHint': '混乱的轮次（重试、工具错误、压缩）以及你纠正智能体的下一条消息会被自动分析，无需点击。',
+      'status.trendCorrections': '你纠正智能体：{a} → {b}',
       'status.trendMessy': '混乱轮次：{a} → {b}',
       'status.trendTokens': '每轮 tokens：{a} → {b}',
       'status.trendHint': '（最早 {n} 轮 vs 最近 {n} 轮，真实数据）',
@@ -64,7 +65,12 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'settings.learnGood': '也从混乱之后的顺利提示词中学习',
       'bootstrap.btn': '从我最近 20 轮中学习',
       'bootstrap.running': '学习中… {done}/{total}',
-      'bootstrap.hint': '约 $0.02–0.05，一次性。已顺利完成的提示词会被跳过。',
+      'bootstrap.runningUsd': '学习中… {done}/{total} · {usd}',
+      'bootstrap.hint': '分析你最近完成的轮次：提示词至少 8 个字符、不是单纯的「继续」类消息（「继续」「好的」…）、且还没有报告——最多 20 条。',
+      'bootstrap.estimateDoc': '使用 deepseek-v4-flash 约 $0.02–0.05，一次性。',
+      'bootstrap.preview': '有 {eligible} 轮符合条件 · 按目录价约 {usd}',
+      'bootstrap.previewMeasured': '（根据你最近 {samples} 次分析的实测数据）',
+      'bootstrap.previewDoc': '（文档估算——还没有足够的实测分析）',
       'steer.enrich': '发送前补充学到的上下文（实验性，每次发送一次小调用）',
       'steer.title': '智能体被告知的关于你的信息',
       'steer.desc': '这些指令会注入每个新会话的系统提示词，让智能体替你补上你通常没说的内容。',
@@ -75,6 +81,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'steer.remove': '删除',
       'steer.preview': '实际注入的文本',
       'steer.distilled': '自动提炼',
+      'steer.queued': '等待试用',
       'steer.trial': '试用 {n}/{total}',
       'steer.active': '已生效',
       'steer.retired': '已淘汰 · {reason}',
@@ -132,6 +139,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'preview.improved': '改进后',
       'preview.rationale': '改动说明',
       'preview.pending': '正在分析草稿…',
+      'preview.unchanged': '草稿已经完整，无需修改。',
       'preview.apply': '应用改进',
       'preview.cancel': '取消',
       'feedback.title': '这次改进有帮助吗？',
@@ -142,6 +150,133 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'feedback.noted': '已记录，谢谢！',
       'panel.styleRules': '已学习的风格规则',
       'panel.styleRulesEmpty': '还没有学习到风格规则——应用改进后给出 👎 反馈（附一句话原因），累计 3 次即可提炼出规则。',
+      'card.overview': '概览',
+      'card.usage': '用量',
+      'card.pricing': '价格',
+      'card.learning': '学习',
+      'card.guidance': '智能体指令',
+      'card.improve': '改进与反馈',
+      'card.history': '分析历史',
+      'card.privacy': '数据与隐私',
+      'card.expand': '展开这一节',
+      'card.collapse': '收起这一节',
+      'overview.model': '模型：{model}',
+      'usage.empty': '还没有计费调用——用量从 {since} 开始记录。',
+      'usage.today': '今日',
+      'usage.month': '本月',
+      'usage.last30': '最近 30 天',
+      'usage.since': '自 {day} 起',
+      'usage.calls': '计费调用（30 天）',
+      'usage.avgAnalysis': '单次分析中位成本',
+      'usage.cachedRate': '输入缓存命中率（30 天）',
+      'usage.unpriced': '无价目调用（30 天）',
+      'usage.unpricedShort': '{n} 次无价目',
+      'usage.priceUnavailable': '无价目',
+      'usage.chartLabel': '每日花费，最近 {n} 天',
+      'usage.chartSummary': '最近 {n} 天：合计 {total}；最高 {day} {max}',
+      'usage.barTitle': '{day} · {usd} · {calls} 次调用',
+      'usage.series7': '7 天',
+      'usage.series30': '30 天',
+      'usage.breakdown': '按操作分类（最近 30 天）',
+      'usage.filters': '筛选',
+      'usage.loading': '正在载入这次运行的调用明细…',
+      'usage.page': '第 {page} / {pages} 页',
+      'usage.prev': '上一页',
+      'usage.next': '下一页',
+      'usage.label': '真实用量 · 按目录价计算',
+      'usage.col.time': '时间',
+      'usage.col.op': '操作',
+      'usage.col.scope': '范围',
+      'usage.scopeAll': '全部会话',
+      'usage.col.model': '模型',
+      'usage.col.status': '状态',
+      'usage.col.calls': '计费调用',
+      'usage.col.tokens': 'Tokens',
+      'usage.col.cost': '花费',
+      'filter.range': '时间范围',
+      'filter.type': '操作',
+      'filter.status': '状态',
+      'filter.model': '模型',
+      'filter.workspace': '工作区',
+      'filter.session': '会话 ID',
+      'filter.all': '全部',
+      'range.today': '今日',
+      'range.7d': '最近 7 天',
+      'range.30d': '最近 30 天',
+      'range.month': '本月',
+      'range.all': '全部保留期',
+      'runtype.bootstrap': '引导批量',
+      'runtype.analysis': '分析',
+      'runtype.analysis-batch': '批量分析',
+      'runtype.improve': '改进',
+      'runtype.directive-distillation': '指令提炼',
+      'runtype.style-distillation': '风格提炼',
+      'runtype.prompt-enrichment': '提示词补充',
+      'op.analysis': '分析',
+      'op.analysis-repair': '分析修复',
+      'op.directive-distillation': '指令提炼',
+      'op.style-distillation': '风格提炼',
+      'op.improve': '改进',
+      'op.improve-repair': '改进修复',
+      'op.enrichment': '上下文补充',
+      'status.success': '成功',
+      'status.partial': '部分成功',
+      'status.failed': '失败',
+      'status.ok': '成功',
+      'status.unmetered': '未计量',
+      'status.running': '进行中',
+      'attempt.effort': '推理强度 {effort}',
+      'attempt.finish': '结束 {finish} {code}',
+      'attempt.source': '{source} · {tier}',
+      'attempt.duration': '{ms} 毫秒',
+      'warn.daily': '今日 {spent} / 每日上限 {limit}（{pct}%）',
+      'warn.monthly': '本月 {spent} / 每月上限 {limit}（{pct}%）',
+      'improve.explain': '「改进」会在你发送前重写草稿。给某次重写点 👎 并写一句原因，Tacit 会从中提炼出持久的风格规则。',
+      'privacy.stored': '分析报告、指令和风格规则只保存在本机的 Tacit 数据目录里。一条用量记录只包含：时间、操作、会话 ID、轮次编号、工作区名称、模型、服务商、token 计数与目录价——绝不包含你的提示词或模型回复的内容。清除操作只会删除 Tacit 自己的文件。',
+      'privacy.retention': '详细用量记录保留天数',
+      'privacy.warnDaily': '每日花费提醒阈值（美元）',
+      'privacy.warnMonthly': '每月花费提醒阈值（美元）',
+      'privacy.warnHint': '填 0 表示关闭提醒。达到阈值的 80% 时开始提醒，超过阈值后标记为已超出。',
+      'privacy.clearUsage': '清除用量记录',
+      'privacy.apply': '应用',
+      'privacy.applyTo': '{action}：{field}',
+      'confirm.reportsTitle': '清除所有分析报告？',
+      'confirm.reportsBody': '这会删除 Tacit 为所有会话写下的全部分析报告。指令、风格规则和用量记录会保留。此操作无法撤销。',
+      'confirm.usageTitle': '清除用量记录？',
+      'confirm.usageBody': '这会删除 Tacit 的用量账本——每一次记录的调用、它的 token 计数和目录价——并重新开始计量窗口。分析报告和指令会保留。此操作无法撤销。',
+      'confirm.cancel': '取消',
+      'confirm.clear': '清除',
+      'pricing.summary': '{model} {tier} {rates} / 100 万 · {source}（{asOf}）',
+      'pricing.rateTable': '每 100 万 tokens 的目录价',
+      'pricing.model': '模型',
+      'pricing.tier': '时段',
+      'pricing.cacheHit': '缓存命中输入',
+      'pricing.cacheMiss': '输入',
+      'pricing.output': '输出',
+      'pricing.reasoning': '推理',
+      'pricing.reasoningSameAsOutput': '按输出计费',
+      'pricing.peak': '高峰',
+      'pricing.offPeak': '非高峰',
+      'pricing.tierNow': '当前时段：{tier}',
+      'pricing.schedule': '高峰时段为 UTC 01:00–04:00 与 06:00–10:00，其余时间均为非高峰；时段按调用开始的时刻判定。',
+      'pricing.weekendRule': '自 2026-08-22 16:00 UTC 起，北京日历的周末（UTC+8 的周六与周日）全天按非高峰计费。',
+      'pricing.source': '价目来源',
+      'pricing.sourceBundled': '内置价目表',
+      'pricing.sourceCostMeter': 'cost-meter 服务',
+      'pricing.refreshedAt': '刷新于 {time}',
+      'pricing.never': '从未刷新',
+      'pricing.formula': '费用 =（输入 × 输入价 + 缓存命中输入 × 缓存价 + 输出 × 输出价）÷ 1,000,000',
+      'pricing.accuracy': '目录价；以服务商账单为准',
+      'pricing.refresh': '刷新价目',
+      'pricing.refreshing': '刷新中…',
+      'pricing.error': '无法读取价目来源：{error}',
+      'notice.bootstrap': '引导完成 · 已分析 {analyzed} 条 · 跳过 {skipped} 条 · {calls} 次计费调用 · {tokens} tokens · 目录价 {usd}',
+      'notice.analyze': '已分析 #{turn} · {calls} 次调用 · {tokens} tokens · {usd}',
+      'notice.improve': '已改进草稿 · {calls} 次调用 · {tokens} tokens · {usd}',
+      'notice.batch': '已分析 {analyzed}/{requested} 条 · {calls} 次调用 · {tokens} tokens · {usd}',
+      'notice.usageCleared': '用量记录已清除 · 删除 {n} 天的记录 · 计量窗口重新开始',
+      'notice.pricingRefreshed': '价目已刷新 · {source}（{asOf}）',
+      'notice.unpriced': ' · {n} 次无价目',
       'err.bad-request': '请求无效。',
       'err.bad-json': '请求体无效。',
       'err.no-session': '当前会话不可用（可能尚未在本进程恢复）。',
@@ -149,6 +284,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'err.busy': '该轮次的分析已在运行中。',
       'err.no-llm': '无法访问模型服务。',
       'err.no-api-key': 'DeepSeek API Key 缺失或无效（请在 设置 → 模型 中配置）。',
+      'err.no-credit': '模型服务商余额或配额已耗尽。',
       'err.rate-limited': '请求被限流，请稍后重试。',
       'err.timeout': '模型调用超时，请重试。',
       'err.empty-response': '模型没有返回内容，请重试。',
@@ -164,6 +300,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'status.autoOn': 'Auto-learning on · {today}/{budget} today',
       'status.autoOff': 'Auto-learning off — Tacit only learns when you click Analyze.',
       'status.autoHint': 'Messy turns (retries, tool errors, compactions) and turns you correct in your next message are analyzed automatically — no clicks.',
+      'status.trendCorrections': 'You corrected the agent: {a} → {b}',
       'status.trendMessy': 'Messy turns: {a} → {b}',
       'status.trendTokens': 'Tokens/turn: {a} → {b}',
       'status.trendHint': '(first {n} turns vs. latest {n}, measured)',
@@ -178,7 +315,12 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'settings.learnGood': 'Also learn from a clean prompt right after a messy turn',
       'bootstrap.btn': 'Learn from my last 20 turns',
       'bootstrap.running': 'Learning… {done}/{total}',
-      'bootstrap.hint': '≈ $0.02–0.05, one time. Skips prompts that already went fine on their own.',
+      'bootstrap.runningUsd': 'Learning… {done}/{total} · {usd}',
+      'bootstrap.hint': 'Analyzes your newest finished turns whose prompt is at least 8 characters, is not a bare continuation (“continue”, “ok”…), and has no report yet — up to 20.',
+      'bootstrap.estimateDoc': '≈ $0.02–0.05 with deepseek-v4-flash, one time',
+      'bootstrap.preview': '{eligible} turn(s) eligible · ≈{usd} at list price',
+      'bootstrap.previewMeasured': '(measured from your last {samples} analyses)',
+      'bootstrap.previewDoc': '(documented estimate — not enough measured analyses yet)',
       'steer.enrich': 'Add learned context before each send (experimental — one small call per send)',
       'steer.title': 'What the agent is told about you',
       'steer.desc': 'These directives ride every new session\'s system prompt so the agent fills in what you usually leave unsaid.',
@@ -189,6 +331,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'steer.remove': 'Remove',
       'steer.preview': 'Exact text injected',
       'steer.distilled': 'distilled',
+      'steer.queued': 'waiting for trial',
       'steer.trial': 'trial {n}/{total}',
       'steer.active': 'active',
       'steer.retired': 'retired · {reason}',
@@ -246,6 +389,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'preview.improved': 'Improved',
       'preview.rationale': 'What changed',
       'preview.pending': 'Analyzing your draft…',
+      'preview.unchanged': 'Your draft is already complete — nothing to change.',
       'preview.apply': 'Apply improvement',
       'preview.cancel': 'Cancel',
       'feedback.title': 'Was this better?',
@@ -256,6 +400,133 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'feedback.noted': 'Noted — thanks!',
       'panel.styleRules': 'Learned style rules',
       'panel.styleRulesEmpty': 'No style rules yet — apply an improvement and rate it 👎 with a one-line reason; after 3, Tacit distills durable rules from them.',
+      'card.overview': 'Overview',
+      'card.usage': 'Usage',
+      'card.pricing': 'Pricing',
+      'card.learning': 'Learning',
+      'card.guidance': 'Agent guidance',
+      'card.improve': 'Improve & feedback',
+      'card.history': 'Analysis history',
+      'card.privacy': 'Data & privacy',
+      'card.expand': 'Expand this section',
+      'card.collapse': 'Collapse this section',
+      'overview.model': 'Model: {model}',
+      'usage.empty': 'No billed calls yet — usage has been tracked since {since}.',
+      'usage.today': 'Today',
+      'usage.month': 'This month',
+      'usage.last30': 'Last 30 days',
+      'usage.since': 'Since {day}',
+      'usage.calls': 'Billed calls (30 d)',
+      'usage.avgAnalysis': 'Median cost per analysis',
+      'usage.cachedRate': 'Cached input rate (30 d)',
+      'usage.unpriced': 'Unpriced calls (30 d)',
+      'usage.unpricedShort': '{n} unpriced',
+      'usage.priceUnavailable': 'No price',
+      'usage.chartLabel': 'Daily spend, last {n} days',
+      'usage.chartSummary': 'Last {n} days: total {total}; highest {day} {max}',
+      'usage.barTitle': '{day} · {usd} · {calls} calls',
+      'usage.series7': '7 d',
+      'usage.series30': '30 d',
+      'usage.breakdown': 'By operation (last 30 days)',
+      'usage.filters': 'Filters',
+      'usage.loading': 'Loading this run\u2019s calls…',
+      'usage.page': 'Page {page} of {pages}',
+      'usage.prev': 'Previous',
+      'usage.next': 'Next',
+      'usage.label': 'Measured usage · list-price cost',
+      'usage.col.time': 'Time',
+      'usage.col.op': 'Operation',
+      'usage.col.scope': 'Scope',
+      'usage.scopeAll': 'all sessions',
+      'usage.col.model': 'Model',
+      'usage.col.status': 'Status',
+      'usage.col.calls': 'Billed calls',
+      'usage.col.tokens': 'Tokens',
+      'usage.col.cost': 'Cost',
+      'filter.range': 'Range',
+      'filter.type': 'Operation',
+      'filter.status': 'Status',
+      'filter.model': 'Model',
+      'filter.workspace': 'Workspace',
+      'filter.session': 'Session id',
+      'filter.all': 'All',
+      'range.today': 'Today',
+      'range.7d': 'Last 7 days',
+      'range.30d': 'Last 30 days',
+      'range.month': 'This month',
+      'range.all': 'Everything retained',
+      'runtype.bootstrap': 'Bootstrap batch',
+      'runtype.analysis': 'Analysis',
+      'runtype.analysis-batch': 'Analysis batch',
+      'runtype.improve': 'Improve',
+      'runtype.directive-distillation': 'Directive distillation',
+      'runtype.style-distillation': 'Style distillation',
+      'runtype.prompt-enrichment': 'Prompt enrichment',
+      'op.analysis': 'analysis',
+      'op.analysis-repair': 'analysis repair',
+      'op.directive-distillation': 'directive distillation',
+      'op.style-distillation': 'style distillation',
+      'op.improve': 'improve',
+      'op.improve-repair': 'improve repair',
+      'op.enrichment': 'enrichment',
+      'status.success': 'success',
+      'status.partial': 'partial',
+      'status.failed': 'failed',
+      'status.ok': 'ok',
+      'status.unmetered': 'unmetered',
+      'status.running': 'running',
+      'attempt.effort': 'effort {effort}',
+      'attempt.finish': 'finish {finish} {code}',
+      'attempt.source': '{source} · {tier}',
+      'attempt.duration': '{ms} ms',
+      'warn.daily': 'Today {spent} of the {limit} daily cap ({pct}%)',
+      'warn.monthly': 'This month {spent} of the {limit} monthly cap ({pct}%)',
+      'improve.explain': 'Improve rewrites your draft before you send it. Rate a rewrite 👎 with a one-line reason and Tacit distills a durable style rule from it.',
+      'privacy.stored': 'Analysis reports, directives and style rules are stored on this machine only, in Tacit’s own data directory. A usage record holds the time, the operation, the session id, the turn number, the workspace name, the model, the provider, token counts and the list price — never your prompt or the response text. Clearing only ever removes Tacit’s own files.',
+      'privacy.retention': 'Keep detailed usage history (days)',
+      'privacy.warnDaily': 'Warn above this daily spend (USD)',
+      'privacy.warnMonthly': 'Warn above this monthly spend (USD)',
+      'privacy.warnHint': '0 turns the warning off. Tacit warns at 80 % of the amount and marks it exceeded above it.',
+      'privacy.clearUsage': 'Clear usage history',
+      'privacy.apply': 'Apply',
+      'privacy.applyTo': '{action}: {field}',
+      'confirm.reportsTitle': 'Clear all analysis reports?',
+      'confirm.reportsBody': 'This deletes every analysis report Tacit has written, for every session. Your directives, style rules and usage history are kept. This cannot be undone.',
+      'confirm.usageTitle': 'Clear usage history?',
+      'confirm.usageBody': 'This deletes Tacit’s usage ledger — every recorded call, its token counts and its list price — and restarts the tracking window. Your analysis reports and directives are kept. This cannot be undone.',
+      'confirm.cancel': 'Cancel',
+      'confirm.clear': 'Clear',
+      'pricing.summary': '{model} {tier} {rates} per 1M · {source} ({asOf})',
+      'pricing.rateTable': 'List price per 1M tokens',
+      'pricing.model': 'Model',
+      'pricing.tier': 'Tier',
+      'pricing.cacheHit': 'Cached input',
+      'pricing.cacheMiss': 'Input',
+      'pricing.output': 'Output',
+      'pricing.reasoning': 'Reasoning',
+      'pricing.reasoningSameAsOutput': 'billed as output',
+      'pricing.peak': 'peak',
+      'pricing.offPeak': 'off-peak',
+      'pricing.tierNow': 'Right now: {tier}',
+      'pricing.schedule': 'Peak is 01:00–04:00 and 06:00–10:00 UTC; every other hour is off-peak. The tier is decided when a call starts.',
+      'pricing.weekendRule': 'Beijing-calendar weekends (Saturday and Sunday in UTC+8) are off-peak all day, from 2026-08-22 16:00 UTC.',
+      'pricing.source': 'Price source',
+      'pricing.sourceBundled': 'bundled table',
+      'pricing.sourceCostMeter': 'cost-meter service',
+      'pricing.refreshedAt': 'refreshed {time}',
+      'pricing.never': 'never refreshed',
+      'pricing.formula': 'Cost = (input × input rate + cached input × cached rate + output × output rate) ÷ 1,000,000',
+      'pricing.accuracy': 'List price; your provider invoice is the billing authority',
+      'pricing.refresh': 'Refresh prices',
+      'pricing.refreshing': 'Refreshing…',
+      'pricing.error': 'Could not read the price source: {error}',
+      'notice.bootstrap': 'Bootstrap complete · {analyzed} analyzed · {skipped} skipped · {calls} billed calls · {tokens} tokens · {usd} list price',
+      'notice.analyze': 'Analyzed #{turn} · {calls} call(s) · {tokens} tokens · {usd}',
+      'notice.improve': 'Improved your draft · {calls} call(s) · {tokens} tokens · {usd}',
+      'notice.batch': 'Analyzed {analyzed} of {requested} · {calls} calls · {tokens} tokens · {usd}',
+      'notice.usageCleared': 'Usage history cleared · {n} day file(s) removed · tracking restarts now',
+      'notice.pricingRefreshed': 'Prices refreshed · {source} ({asOf})',
+      'notice.unpriced': ' · {n} unpriced',
       'err.bad-request': 'Invalid request.',
       'err.bad-json': 'Invalid request body.',
       'err.no-session': 'The session is not available (it may not be restored in this process).',
@@ -263,6 +534,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       'err.busy': 'An analysis for this turn is already running.',
       'err.no-llm': 'The model service is unavailable.',
       'err.no-api-key': 'The DeepSeek API key is missing or invalid (configure it in Settings → Models).',
+      'err.no-credit': 'Your provider balance or quota is exhausted.',
       'err.rate-limited': 'The request was rate-limited; try again shortly.',
       'err.timeout': 'The model call timed out; please retry.',
       'err.empty-response': 'The model returned no content; please retry.',
@@ -372,6 +644,29 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       trend: null, // measured early-vs-recent trend
       bootstrap: null, // {running, done, total}
       coached: [], // cross-session coached-prompt entries
+      // Which Settings cards are expanded. Open state lives here (not in React
+      // state) so it survives re-renders and is seedable from the SSR suite.
+      sections: {
+        overview: true,
+        usage: true,
+        pricing: false,
+        learning: false,
+        guidance: false,
+        improve: false,
+        history: false,
+        privacy: false,
+      },
+      notice: null, // {text} — a short-lived result line, cleared after 5s
+      // A destructive action waiting on its confirmation dialog:
+      // null | {kind:'reports'|'usage'}.
+      confirm: null,
+      preview: null, // the last /bootstrap-preview envelope
+      usage: null, // the last /usage envelope
+      usageFilters: { range: '30d', type: '', status: '', model: '', workspace: '', sessionId: '', page: 1, pageSize: 20 },
+      usageRuns: {}, // runId → the full run (attempts included), fetched on first expand
+      usageExpanded: new Set(), // runIds whose attempt rows are open
+      usageSeries: '30', // '7' | '30' — which sparkline the strip shows
+      pricingRefreshing: false, // a /pricing-refresh call is in flight
       initStarted: false,
       initDone: false,
       error: null,
@@ -382,6 +677,215 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       for (const listener of rootStore.listeners) listener()
     }
 
+    /** Expand/collapse one Settings card; unknown ids are ignored. */
+    function toggleSection(id) {
+      const key = String(id)
+      if (rootStore.sections === null || typeof rootStore.sections !== 'object'
+        || typeof rootStore.sections[key] !== 'boolean') return
+      rootStore.sections[key] = !rootStore.sections[key]
+      notifyRoot()
+    }
+
+    let noticeTimer = null
+
+    /**
+     * Show one result line (e.g. "Bootstrap complete · 7 analyzed"). It clears
+     * itself after 5s; the timer is skipped where there is no scheduler (SSR).
+     */
+    function setRootNotice(text) {
+      rootStore.notice = typeof text === 'string' && text.length > 0 ? { text } : null
+      notifyRoot()
+      if (typeof setTimeout !== 'function' || rootStore.notice === null) return
+      if (noticeTimer !== null && typeof clearTimeout === 'function') clearTimeout(noticeTimer)
+      noticeTimer = setTimeout(() => {
+        noticeTimer = null
+        rootStore.notice = null
+        notifyRoot()
+      }, 5000)
+      unrefTimer(noticeTimer)
+    }
+
+    /**
+     * Node hands back a Timeout object that keeps the process alive; the
+     * browser hands back a number. Unref'ing where it exists means a test that
+     * merely touches one of these paths can never hold the runner open.
+     */
+    function unrefTimer(handle) {
+      if (handle !== null && typeof handle === 'object' && typeof handle.unref === 'function') handle.unref()
+    }
+
+    /**
+     * The bound translator, captured once when the plugin applies.
+     *
+     * A notice states what a call actually cost, so it is written where those
+     * figures land — inside the store actions. Those run far from any `kit`
+     * (a click in the conversation tab, a poll), and there is exactly one
+     * translator per plugin instance, so it is held here rather than threaded
+     * through every call site.
+     */
+    let translate = null
+
+    function setTranslator(fn) {
+      translate = typeof fn === 'function' ? fn : null
+    }
+
+    /**
+     * A result line with the run's measured figures: billed calls, total
+     * tokens and list-price cost. A run that priced nothing says so instead of
+     * claiming `$0.0000`, and the count of unpriced calls rides as a suffix —
+     * an unmetered call has no price, not a price of zero.
+     */
+    function runNotice(t, key, vars, run) {
+      const source = run !== null && typeof run === 'object' ? run : {}
+      const count = (value) => (typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : 0)
+      const totals = {
+        // `attempts` rides along so a run whose every call went unmetered
+        // reads as an unknown cost rather than a free one.
+        attempts: count(source.attempts),
+        billedCalls: count(source.billedCalls),
+        unpricedCalls: count(source.unpricedCalls),
+        usdKnown: count(source.usdKnown),
+      }
+      const text = t(key, {
+        ...(vars === null || typeof vars !== 'object' ? {} : vars),
+        calls: fmtTokens(totals.billedCalls),
+        tokens: fmtTokens(tokensTotal(source.tokens)),
+        usd: usageSpend({ t }, totals),
+      })
+      return totals.unpricedCalls > 0 ? text + t('notice.unpriced', { n: String(totals.unpricedCalls) }) : text
+    }
+
+    /**
+     * Record a run's result line on a session store, where the conversation
+     * tab's live region reads it. It stays on that store: a tab action has no
+     * business announcing itself on the Settings page.
+     */
+    function setStoreNotice(store, key, vars, run) {
+      if (translate === null || store === null || typeof store !== 'object') return
+      store.notice = { code: key, text: runNotice(translate, key, vars, run) }
+    }
+
+    // ── Usage ledger (the Settings → Usage card) ───────────────────────────
+
+    /** The filter payload for `/usage`: defaults always, empty strings never. */
+    function usageQuery() {
+      const filters = rootStore.usageFilters !== null && typeof rootStore.usageFilters === 'object' ? rootStore.usageFilters : {}
+      const query = {
+        range: typeof filters.range === 'string' && filters.range.length > 0 ? filters.range : '30d',
+        page: typeof filters.page === 'number' && filters.page > 0 ? Math.floor(filters.page) : 1,
+        pageSize: typeof filters.pageSize === 'number' && filters.pageSize > 0 ? Math.floor(filters.pageSize) : 20,
+      }
+      for (const key of ['type', 'status', 'model', 'workspace', 'sessionId']) {
+        const value = filters[key]
+        if (typeof value === 'string' && value.length > 0) query[key] = value
+      }
+      return query
+    }
+
+    /** Read the whole cost panel in one call; a failure keeps the last envelope. */
+    async function fetchUsage() {
+      try {
+        const result = await api('/usage', usageQuery())
+        if (result !== null && typeof result === 'object' && result.ok === true) rootStore.usage = result
+      } catch {
+        // A stale panel beats a blank one; the next poll tries again.
+      }
+      notifyRoot()
+    }
+
+    /** Narrow the runs list. Any change but an explicit page jump goes back to page 1. */
+    function setUsageFilter(patch) {
+      if (patch === null || typeof patch !== 'object') return
+      const next = { ...rootStore.usageFilters, ...patch }
+      if (patch.page === undefined) next.page = 1
+      rootStore.usageFilters = next
+      notifyRoot()
+      fetchUsage()
+    }
+
+    /** Open/close one run's attempt rows, fetching its detail the first time. */
+    async function toggleUsageRun(runId) {
+      const key = String(runId)
+      if (key.length === 0) return
+      if (rootStore.usageExpanded.has(key)) {
+        rootStore.usageExpanded.delete(key)
+        notifyRoot()
+        return
+      }
+      rootStore.usageExpanded.add(key)
+      notifyRoot()
+      if (rootStore.usageRuns[key] !== undefined) return
+      try {
+        const result = await api('/usage-run', { runId: key })
+        if (result !== null && typeof result === 'object' && result.ok === true
+          && result.run !== null && typeof result.run === 'object') {
+          rootStore.usageRuns[key] = result.run
+        }
+      } catch {
+        // The row keeps its loading line; closing and reopening retries.
+      }
+      notifyRoot()
+    }
+
+    /**
+     * Re-read the prices from the cost-meter service. The card renders the
+     * rates the `/usage` envelope carries, so the refreshed table only shows
+     * once that envelope has been re-fetched.
+     */
+    async function refreshPricing(t) {
+      if (rootStore.pricingRefreshing) return
+      rootStore.pricingRefreshing = true
+      rootStore.error = null
+      notifyRoot()
+      try {
+        const result = await api('/pricing-refresh', {})
+        if (result !== null && typeof result === 'object' && result.ok === true) {
+          const pricing = result.pricing !== null && typeof result.pricing === 'object' ? result.pricing : {}
+          if (typeof t === 'function') {
+            setRootNotice(t('notice.pricingRefreshed', {
+              source: t(pricing.source === 'costMeter' ? 'pricing.sourceCostMeter' : 'pricing.sourceBundled'),
+              asOf: typeof pricing.asOf === 'string' && pricing.asOf.length > 0 ? pricing.asOf : '—',
+            }))
+          }
+        } else {
+          rootStore.error = { code: result !== null && typeof result === 'object' && typeof result.code === 'string' ? result.code : 'call-failed', detail: '' }
+        }
+      } catch (error) {
+        rootStore.error = errorOf(error)
+      } finally {
+        rootStore.pricingRefreshing = false
+      }
+      await fetchUsage()
+    }
+
+    /** Which sparkline the bar strip shows; anything unknown means 30 days. */
+    function setUsageSeries(value) {
+      rootStore.usageSeries = value === '7' ? '7' : '30'
+      notifyRoot()
+    }
+
+    /** One shared 10s poll, reference-counted so remounts never stack timers. */
+    let usageTimer = null
+    let usageMounts = 0
+
+    function startUsagePolling() {
+      usageMounts += 1
+      if (usageTimer !== null || typeof setInterval !== 'function') return
+      usageTimer = setInterval(() => {
+        // A hidden tab costs nothing: the next visible tick catches up.
+        if (typeof document !== 'undefined' && document !== null && document.hidden === true) return
+        fetchUsage()
+      }, 10000)
+      unrefTimer(usageTimer)
+    }
+
+    function stopUsagePolling() {
+      usageMounts = usageMounts > 0 ? usageMounts - 1 : 0
+      if (usageMounts > 0 || usageTimer === null) return
+      if (typeof clearInterval === 'function') clearInterval(usageTimer)
+      usageTimer = null
+    }
+
     function useRootVersion() {
       const [version, setVersion] = useState(0)
       useEffect(() => {
@@ -420,6 +924,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
         rootStore.error = errorOf(error)
         rootStore.initDone = true
       }
+      fetchUsage()
       notifyRoot()
     }
 
@@ -438,6 +943,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       } catch {
         // Stale view beats a broken panel.
       }
+      fetchUsage()
       notifyRoot()
     }
 
@@ -456,6 +962,8 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       } catch (error) {
         rootStore.error = errorOf(error)
       }
+      // The warning thresholds live in the config, so the bars may have moved.
+      fetchUsage()
       notifyRoot()
     }
 
@@ -471,6 +979,78 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       } catch (error) {
         rootStore.error = errorOf(error)
       }
+      fetchUsage()
+      // Turns without a report are eligible again, so a preview that last read
+      // `eligible: 0` would otherwise keep the Bootstrap button disabled.
+      await fetchBootstrapPreview()
+      notifyRoot()
+    }
+
+    /**
+     * Delete the usage ledger and restart the tracking window. The runs the
+     * panel had expanded are dropped with it — their ids no longer exist.
+     */
+    async function clearUsageHistory() {
+      rootStore.error = null
+      try {
+        const result = await api('/usage-clear', {})
+        if (result !== null && typeof result === 'object' && result.ok) {
+          rootStore.usageRuns = {}
+          rootStore.usageExpanded = new Set()
+          rootStore.usageFilters = { ...rootStore.usageFilters, page: 1 }
+          if (translate !== null) setRootNotice(translate('notice.usageCleared', { n: fmtTokens(usageNum(result.removed)) }))
+        } else {
+          rootStore.error = { code: result !== null && typeof result === 'object' && typeof result.code === 'string' ? result.code : 'bad-request', detail: '' }
+        }
+      } catch (error) {
+        rootStore.error = errorOf(error)
+      }
+      await fetchUsage()
+      // The measured basis of the bootstrap estimate came from the ledger this
+      // just deleted; re-price it rather than quoting figures that are gone.
+      await fetchBootstrapPreview()
+      notifyRoot()
+    }
+
+    /**
+     * Ask before deleting. The two clears are the only irreversible actions in
+     * the panel, so neither fires straight off a click: the kind is parked here
+     * and the dialog does the asking.
+     */
+    function openConfirm(kind) {
+      if (kind !== 'reports' && kind !== 'usage') return
+      // Captured before the dialog steals focus, so closing it can hand focus
+      // back to the button that opened it.
+      captureConfirmOpener()
+      rootStore.confirm = { kind }
+      notifyRoot()
+    }
+
+    function closeConfirm() {
+      rootStore.confirm = null
+      notifyRoot()
+    }
+
+    /** Run the parked destructive action, whichever it is, and close the dialog. */
+    async function confirmAction() {
+      const kind = rootStore.confirm !== null && typeof rootStore.confirm === 'object' ? rootStore.confirm.kind : null
+      rootStore.confirm = null
+      notifyRoot()
+      if (kind === 'reports') await clearAllRoot()
+      else if (kind === 'usage') await clearUsageHistory()
+    }
+
+    /**
+     * "What would Bootstrap do, and what would it cost?" — read-only, no model
+     * call. A failure leaves `preview` alone: the documented estimate stands in.
+     */
+    async function fetchBootstrapPreview() {
+      try {
+        const result = await api('/bootstrap-preview', { limit: 20 })
+        if (result !== null && typeof result === 'object' && result.ok === true) rootStore.preview = result
+      } catch {
+        // One missing hint line; the next mount tries again.
+      }
       notifyRoot()
     }
 
@@ -517,10 +1097,12 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       notify(store)
     }
 
-    async function bootstrapAll() {
+    /** `t` is the caller's bound translator, used only for the result notice. */
+    async function bootstrapAll(t) {
       if (rootStore.bootstrap !== null && typeof rootStore.bootstrap === 'object' && rootStore.bootstrap.running) return
       rootStore.bootstrap = { running: true, done: 0, total: 0 }
       rootStore.error = null
+      rootStore.notice = null
       notifyRoot()
       pollBootstrap((state) => {
         if (state !== null && typeof state === 'object' && state.bootstrap !== null && typeof state.bootstrap === 'object') rootStore.bootstrap = state.bootstrap
@@ -528,7 +1110,14 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       })
       try {
         const result = await api('/bootstrap', { limit: 20 })
-        if (!(result !== null && typeof result === 'object' && result.ok)) {
+        if (result !== null && typeof result === 'object' && result.ok) {
+          if (typeof t === 'function') {
+            setRootNotice(runNotice(t, 'notice.bootstrap', {
+              analyzed: String(typeof result.analyzed === 'number' ? result.analyzed : 0),
+              skipped: String(typeof result.skipped === 'number' ? result.skipped : 0),
+            }, result.run))
+          }
+        } else {
           rootStore.error = { code: result !== null && typeof result === 'object' && typeof result.code === 'string' ? result.code : 'call-failed', detail: '' }
         }
       } catch (error) {
@@ -536,7 +1125,13 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       }
       rootStore.initStarted = false
       rootStore.initDone = false
+      // `initRootStore` refetches the ledger itself, so there is no `fetchUsage`
+      // here: a second call would only duplicate the one the batch already
+      // makes worth issuing.
       await initRootStore()
+      // Fewer turns are eligible now, and the ledger has fresh measurements to
+      // price the next batch from.
+      await fetchBootstrapPreview()
     }
 
     async function editDirectives(payload) {
@@ -552,6 +1147,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       } catch (error) {
         rootStore.error = errorOf(error)
       }
+      fetchUsage()
       notifyRoot()
     }
 
@@ -583,12 +1179,15 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       store.inFlight[String(turn)] = true
       store.expanded.add(turn)
       store.error = null
+      store.notice = null
       notify(store)
       api('/analyze', { sessionId: store.sessionId, turn })
         .then((result) => {
           if (result !== null && typeof result === 'object' && result.ok && result.report !== null && typeof result.report === 'object') {
             store.reports[String(turn)] = result.report
             store.error = null
+            // What that one analysis cost, from the envelope's own run record.
+            setStoreNotice(store, 'notice.analyze', { turn: String(turn) }, result.run)
           } else {
             store.error = {
               code: result !== null && typeof result === 'object' && typeof result.code === 'string' ? result.code : 'call-failed',
@@ -608,54 +1207,68 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
         })
     }
 
-    /** Run one /analyze call and settle when it finishes (batch building block). */
-    function analyzeTurnAsync(store, turn) {
-      return new Promise((resolve) => {
-        store.inFlight[String(turn)] = true
-        notify(store)
-        api('/analyze', { sessionId: store.sessionId, turn })
-          .then((result) => {
-            if (result !== null && typeof result === 'object' && result.ok && result.report !== null && typeof result.report === 'object') {
-              store.reports[String(turn)] = result.report
-              store.selection.delete(turn)
-              store.expanded.add(turn)
-              store.error = null
-            } else {
-              store.error = {
-                code: result !== null && typeof result === 'object' && typeof result.code === 'string' ? result.code : 'call-failed',
-                detail: result !== null && typeof result === 'object' && typeof result.detail === 'string' ? result.detail : '',
-              }
-            }
-            if (result !== null && typeof result === 'object' && result.profile !== null && typeof result.profile === 'object') {
-              store.profile = result.profile
-            }
-          })
-          .catch((error) => {
-            store.error = errorOf(error)
-          })
-          .finally(() => {
-            delete store.inFlight[String(turn)]
-            notify(store)
-            resolve()
-          })
-      })
-    }
-
-    /** Coach every ticked prompt sequentially (the user-chosen 20). */
+    /**
+     * Coach every ticked prompt in ONE `/analyze-batch` call.
+     *
+     * The host runs the whole selection under a single ledger run, so the tab
+     * reports one price for the batch instead of N separate analyses — and the
+     * turns settle together rather than one row at a time.
+     */
     async function coachSelected(store) {
       if (store.batchRunning) return
       const turns = [...store.selection].sort((a, b) => a - b)
       if (turns.length === 0) return
       store.batchRunning = true
       store.error = null
+      store.notice = null
+      // Every ticked row shows its spinner for the whole call: the batch has no
+      // per-turn progress to report.
+      for (const turn of turns) store.inFlight[String(turn)] = true
       notify(store)
-      for (const turn of turns) {
-        if (store.inFlight[String(turn)]) continue
-        await analyzeTurnAsync(store, turn)
+      try {
+        const result = await api('/analyze-batch', { sessionId: store.sessionId, turns })
+        if (result !== null && typeof result === 'object' && result.ok) {
+          const results = Array.isArray(result.results) ? result.results : []
+          let analyzed = 0
+          let failure = null
+          for (const entry of results) {
+            if (entry === null || typeof entry !== 'object') continue
+            const turn = typeof entry.turn === 'number' ? entry.turn : null
+            if (entry.ok === true && entry.report !== null && typeof entry.report === 'object') {
+              if (turn !== null) {
+                store.reports[String(turn)] = entry.report
+                store.expanded.add(turn)
+              }
+              analyzed += 1
+              continue
+            }
+            // `busy` means an analysis of that turn was already running — a
+            // race with the auto-analyzer, not a failure of this batch.
+            const code = typeof entry.code === 'string' && entry.code.length > 0 ? entry.code : 'call-failed'
+            if (failure === null && code !== 'busy') failure = { code, detail: '' }
+          }
+          if (failure !== null) store.error = failure
+          if (result.profile !== null && typeof result.profile === 'object') store.profile = result.profile
+          // What the whole batch cost, from the run the host closed for it.
+          setStoreNotice(store, 'notice.batch', { analyzed: String(analyzed), requested: String(turns.length) }, result.run)
+        } else {
+          store.error = {
+            code: result !== null && typeof result === 'object' && typeof result.code === 'string' ? result.code : 'call-failed',
+            detail: result !== null && typeof result === 'object' && typeof result.detail === 'string' ? result.detail : '',
+          }
+        }
+      } catch (error) {
+        store.error = errorOf(error)
       }
+      for (const turn of turns) delete store.inFlight[String(turn)]
+      store.selection.clear()
       store.batchRunning = false
       store.selecting = false
       notify(store)
+      // The batch just spent money, and analyzed turns stop being eligible for
+      // a bootstrap; the Settings page should say both.
+      fetchUsage()
+      fetchBootstrapPreview()
     }
 
     function toggleSelecting(store) {
@@ -673,11 +1286,13 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
     function improveDraft(store, draft) {
       if (store.preview.open || typeof draft !== 'string' || draft.trim().length === 0) return
       store.preview = { open: true, pending: true, original: draft, data: null, error: null }
+      store.notice = null
       notify(store)
       api('/improve', { sessionId: store.sessionId, draft })
         .then((result) => {
           if (result !== null && typeof result === 'object' && result.ok && typeof result.improved === 'string' && result.improved.trim().length > 0) {
             store.preview = { ...store.preview, pending: false, data: result }
+            setStoreNotice(store, 'notice.improve', {}, result.run)
           } else {
             store.preview = {
               ...store.preview,
@@ -887,6 +1502,193 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       }
     }
 
+    // ── Usage formatting & narrowing (money is formatted ONLY here) ─────────
+
+    /**
+     * List-price money, always four decimals — a coach analysis costs a few
+     * hundredths of a cent, and two decimals would round every honest figure
+     * to `$0.00`. A positive amount too small to show at four decimals reads
+     * `< $0.0001` rather than a zero it is not.
+     */
+    function fmtUsd(n) {
+      const value = Number(n)
+      if (!Number.isFinite(value)) return '—'
+      if (value > 0 && value < 0.0001) return '< $0.0001'
+      if (value < 0) return '-$' + Math.abs(value).toFixed(4)
+      return '$' + value.toFixed(4)
+    }
+
+    /**
+     * A published rate, per 1M tokens. Rates are quoted, not measured, so they
+     * read as they are quoted: three decimals at most and no trailing zeros —
+     * `$0.007`, `$0.22`, `$1.32`. `fmtUsd`'s four fixed decimals belong to
+     * spend, where every hundredth of a cent is a real figure.
+     */
+    function fmtRate(n) {
+      // Strict about the type: `Number(null)` is 0, and a rate nobody quoted
+      // must not print as a free one.
+      if (typeof n !== 'number' || !Number.isFinite(n) || n < 0) return '—'
+      const trimmed = n.toFixed(3).replace(/\.?0+$/, '')
+      if (n > 0 && Number(trimmed) === 0) return '< $0.001'
+      return '$' + trimmed
+    }
+
+    /**
+     * Spend for one bucket of calls. A bucket that billed calls but priced
+     * none of them says so — `$0.0000` would claim the calls were free, and an
+     * unmetered call is never `$0.00`. Same for a bucket that made calls and
+     * billed none of them: every call came back without usage, so its cost is
+     * unknown, not zero. A genuinely idle bucket (no attempts) stays `$0.0000`.
+     */
+    function usageSpend(kit, totals) {
+      const attempts = usageNum(totals.attempts)
+      const billed = usageNum(totals.billedCalls)
+      if (billed > 0 && usageNum(totals.unpricedCalls) >= billed) return kit.t('usage.priceUnavailable')
+      if (attempts > 0 && billed === 0) return kit.t('usage.priceUnavailable')
+      return fmtUsd(totals.usdKnown)
+    }
+
+    /** Thousands-separated token counts, grouped here so no locale data is needed. */
+    function fmtTokens(n) {
+      const value = Number(n)
+      if (!Number.isFinite(value)) return '—'
+      const grouped = String(Math.round(Math.abs(value))).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      return (value < 0 ? '-' : '') + grouped
+    }
+
+    /** A `YYYY-MM-DD` day, from either a day key (passed through) or an epoch ms. */
+    function fmtDay(day) {
+      if (typeof day === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(day)) return day
+      const value = Number(day)
+      if (!Number.isFinite(value) || value <= 0) return '—'
+      const date = new Date(value)
+      if (Number.isNaN(date.getTime())) return '—'
+      const pad = (part) => String(part).padStart(2, '0')
+      return String(date.getFullYear()) + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate())
+    }
+
+    /** A 0..1 ratio as a whole percentage; `null`/non-finite stays an em dash. */
+    function fmtPct(x) {
+      const value = Number(x)
+      if (!Number.isFinite(value)) return '—'
+      return String(Math.round(value * 100)) + '%'
+    }
+
+    /**
+     * Billed tokens in one bucket set: uncached input + output + cache reads +
+     * cache writes. `reasoningTokens` is a subset of `outputTokens`, so adding
+     * it would count every reasoning token twice.
+     */
+    function tokensTotal(buckets) {
+      if (buckets === null || typeof buckets !== 'object') return 0
+      const num = (value) => (typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : 0)
+      return num(buckets.inputTokens) + num(buckets.outputTokens) + num(buckets.cacheReadTokens) + num(buckets.cacheWriteTokens)
+    }
+
+    function usageNum(value) {
+      return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : 0
+    }
+
+    function usageTokens(value) {
+      const source = value !== null && typeof value === 'object' ? value : {}
+      return {
+        inputTokens: usageNum(source.inputTokens),
+        outputTokens: usageNum(source.outputTokens),
+        cacheReadTokens: usageNum(source.cacheReadTokens),
+        cacheWriteTokens: usageNum(source.cacheWriteTokens),
+        reasoningTokens: usageNum(source.reasoningTokens),
+      }
+    }
+
+    /** One period card, zero-filled; the two derived figures stay nullable. */
+    function usagePeriod(value) {
+      const source = value !== null && typeof value === 'object' ? value : {}
+      return {
+        attempts: usageNum(source.attempts),
+        billedCalls: usageNum(source.billedCalls),
+        unmeteredCalls: usageNum(source.unmeteredCalls),
+        unpricedCalls: usageNum(source.unpricedCalls),
+        tokens: usageTokens(source.tokens),
+        usdKnown: usageNum(source.usdKnown),
+        avgAnalysisUsd: typeof source.avgAnalysisUsd === 'number' && Number.isFinite(source.avgAnalysisUsd) ? source.avgAnalysisUsd : null,
+        cachedInputRate: typeof source.cachedInputRate === 'number' && Number.isFinite(source.cachedInputRate) ? source.cachedInputRate : null,
+      }
+    }
+
+    function usageBuckets(value) {
+      const out = {}
+      if (value === null || typeof value !== 'object') return out
+      for (const [key, totals] of Object.entries(value)) out[key] = usagePeriod(totals)
+      return out
+    }
+
+    function usageSeries(value) {
+      if (!Array.isArray(value)) return []
+      return value
+        .filter((point) => point !== null && typeof point === 'object' && typeof point.day === 'string')
+        .map((point) => ({ day: point.day, usdKnown: usageNum(point.usdKnown), billedCalls: usageNum(point.billedCalls) }))
+    }
+
+    function usageWarning(value) {
+      const source = value !== null && typeof value === 'object' ? value : {}
+      const level = source.level === 'warn' || source.level === 'exceeded' ? source.level : 'none'
+      return { limit: usageNum(source.limit), spent: usageNum(source.spent), level }
+    }
+
+    function usageRunItem(value) {
+      const source = value !== null && typeof value === 'object' ? value : {}
+      const text = (key) => (typeof source[key] === 'string' ? source[key] : '')
+      return {
+        runId: text('runId'),
+        type: text('type'),
+        status: text('status'),
+        attempts: usageNum(source.attempts),
+        billedCalls: usageNum(source.billedCalls),
+        unmeteredCalls: usageNum(source.unmeteredCalls),
+        unpricedCalls: usageNum(source.unpricedCalls),
+        tokens: usageTokens(source.tokens),
+        usdKnown: usageNum(source.usdKnown),
+        trigger: text('trigger'),
+        startedAt: usageNum(source.startedAt),
+        endedAt: usageNum(source.endedAt),
+        sessionId: text('sessionId'),
+        turn: typeof source.turn === 'number' ? source.turn : null,
+        workspace: text('workspace'),
+        model: text('model'),
+        provider: text('provider'),
+      }
+    }
+
+    /**
+     * The `/usage` envelope, narrowed. `null` for anything that is not a
+     * successful report, so the card can render its empty state instead of
+     * reaching into `undefined`.
+     */
+    function usageOf(value) {
+      if (value === null || typeof value !== 'object' || value.ok !== true) return null
+      const runs = value.runs !== null && typeof value.runs === 'object' ? value.runs : {}
+      const warnings = value.warnings !== null && typeof value.warnings === 'object' ? value.warnings : {}
+      return {
+        trackingSince: usageNum(value.trackingSince),
+        pricing: value.pricing !== null && typeof value.pricing === 'object' ? value.pricing : {},
+        today: usagePeriod(value.today),
+        month: usagePeriod(value.month),
+        last7: usagePeriod(value.last7),
+        last30: usagePeriod(value.last30),
+        lifetime: usagePeriod(value.lifetime),
+        byType: usageBuckets(value.byType),
+        byModel: usageBuckets(value.byModel),
+        series7: usageSeries(value.series7),
+        series30: usageSeries(value.series30),
+        warnings: { daily: usageWarning(warnings.daily), monthly: usageWarning(warnings.monthly) },
+        runs: {
+          items: (Array.isArray(runs.items) ? runs.items : []).map(usageRunItem),
+          page: usageNum(runs.page) > 0 ? Math.floor(usageNum(runs.page)) : 1,
+          pageSize: usageNum(runs.pageSize) > 0 ? Math.floor(usageNum(runs.pageSize)) : 20,
+          total: usageNum(runs.total),
+        },
+      }
+    }
     // ── Components ─────────────────────────────────────────────────────────
 
     function makeKit(t) {
@@ -894,20 +1696,46 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
     }
 
     /** "Learned from N prompts · Auto-learning on · x/y today" status card. */
-    /** "Learn from my last 20 turns" — spinner label while a bootstrap runs. */
-    function BootstrapButton(kit, { bootstrap, onClick }) {
+    /**
+     * "Learn from my last 20 turns" — while a bootstrap runs the label counts
+     * the turns and what the batch has cost so far.
+     *
+     * The service ships `usdKnown: 0` from the first tick, so the money is
+     * gated on a billed call, not on the field being present: before that the
+     * label carries no figure at all, and a batch whose billed calls all came
+     * back unpriced says so through `usageSpend` rather than claiming `$0.0000`.
+     */
+    function BootstrapButton(kit, { bootstrap, onClick, disabled }) {
       const { t } = kit
       const running = bootstrap !== null && bootstrap !== undefined && typeof bootstrap === 'object' && bootstrap.running === true
+      const progress = running
+        ? {
+          done: String(typeof bootstrap.done === 'number' ? bootstrap.done : 0),
+          total: String(typeof bootstrap.total === 'number' ? bootstrap.total : 0),
+        }
+        : null
+      const billed = running ? usageNum(bootstrap.billedCalls) : 0
+      const label = () => {
+        if (!running) return t('bootstrap.btn')
+        if (billed === 0) return t('bootstrap.running', progress)
+        return t('bootstrap.runningUsd', {
+          ...progress,
+          usd: usageSpend(kit, {
+            billedCalls: billed,
+            unpricedCalls: usageNum(bootstrap.unpricedCalls),
+            usdKnown: usageNum(bootstrap.usdKnown),
+          }),
+        })
+      }
       return h('span', { className: 'tacit-bootstrap' },
         h('button', {
           type: 'button',
           className: 'tacit-btn tacit-btn-sm',
-          disabled: running,
+          // Also disabled when the caller knows there is nothing eligible left.
+          disabled: running || disabled === true,
           title: t('bootstrap.hint'),
           onClick,
-        }, running
-          ? t('bootstrap.running', { done: String(typeof bootstrap.done === 'number' ? bootstrap.done : 0), total: String(typeof bootstrap.total === 'number' ? bootstrap.total : 0) })
-          : t('bootstrap.btn')))
+        }, label()))
     }
 
     function pct(value) {
@@ -931,6 +1759,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
         h('div', { className: 'tacit-progress-text' }, autoOn ? t('status.autoHint') : t('status.autoOff')),
         hasTrend
           ? h('div', { className: 'tacit-trend' },
+            h('span', { className: 'tacit-chip' }, t('status.trendCorrections', { a: pct(trend.early.correctionRate), b: pct(trend.recent.correctionRate) })),
             h('span', { className: 'tacit-chip' }, t('status.trendMessy', { a: pct(trend.early.messyRate), b: pct(trend.recent.messyRate) })),
             h('span', { className: 'tacit-chip' }, t('status.trendTokens', { a: fmt(trend.early.tokensPerTurn), b: fmt(trend.recent.tokensPerTurn) })),
             h('span', { className: 'tacit-progress-text' }, t('status.trendHint', { n: String(trend.window) })))
@@ -1204,6 +2033,14 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
           error !== null && typeof error === 'object'
             ? h('div', { className: 'tacit-error' }, t('err.' + String(error.code), { detail: String(error.detail || '') }))
             : null,
+          // Analyze and Improve report what they cost here. Always mounted and
+          // empty when idle: a live region that appears together with its text
+          // is missed by screen readers. The settings clear notice carries a
+          // code and a count instead of text, and stays this panel's business.
+          h('div', { className: 'tacit-settings-notice', role: 'status' },
+            store.notice !== null && typeof store.notice === 'object' && typeof store.notice.text === 'string'
+              ? store.notice.text
+              : ''),
           turns.length === 0
             ? h('div', { className: 'tacit-empty' }, t('empty'))
             : h('div', null,
@@ -1264,6 +2101,13 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
         const preview = store.preview
         const onApply = () => applyImproved(store, props.inputActions)
         const onCancel = () => closePreview(store)
+        const improvedText = preview.data !== null && typeof preview.data === 'object' && typeof preview.data.improved === 'string'
+          ? preview.data.improved
+          : ''
+        // The model returns a finished draft verbatim (its fixed point): show
+        // that instead of two identical columns, and offer no Apply so a no-op
+        // rewrite never counts as applied.
+        const unchanged = !preview.pending && preview.error === null && improvedText.trim() === preview.original.trim()
 
         return h('div', { className: 'tacit-modal-backdrop' },
           h('div', { className: 'tacit-modal-card' },
@@ -1276,20 +2120,24 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
                 ? h('div', { className: 'tacit-error' },
                   t('err.' + String(preview.error.code), { detail: String(preview.error.detail || '') }))
                 : h('div', null,
-                  h('div', { className: 'tacit-modal-cols' },
-                    h('div', { className: 'tacit-modal-col' },
-                      h('div', { className: 'tacit-modal-col-title' }, t('preview.original')),
-                      h('pre', { className: 'tacit-pre' }, preview.original)),
-                    h('div', { className: 'tacit-modal-col' },
-                      h('div', { className: 'tacit-modal-col-title' }, t('preview.improved')),
-                      h('pre', { className: 'tacit-pre' }, preview.data !== null && typeof preview.data.improved === 'string' ? preview.data.improved : ''))),
+                  unchanged
+                    ? h('div', { className: 'tacit-modal-unchanged' }, t('preview.unchanged'))
+                    : h('div', { className: 'tacit-modal-cols' },
+                      h('div', { className: 'tacit-modal-col' },
+                        h('div', { className: 'tacit-modal-col-title' }, t('preview.original')),
+                        h('pre', { className: 'tacit-pre' }, preview.original)),
+                      h('div', { className: 'tacit-modal-col' },
+                        h('div', { className: 'tacit-modal-col-title' }, t('preview.improved')),
+                        h('pre', { className: 'tacit-pre' }, improvedText))),
                   preview.data !== null && typeof preview.data === 'object' && typeof preview.data.rationale === 'string' && preview.data.rationale.length > 0
                     ? h('div', { className: 'tacit-modal-rationale' },
                       h('div', { className: 'tacit-modal-col-title' }, t('preview.rationale')),
                       h('div', { className: 'tacit-modal-rationale-text' }, preview.data.rationale))
                     : null,
                   h('div', { className: 'tacit-modal-actions' },
-                    h('button', { type: 'button', className: 'tacit-btn tacit-btn-primary', onClick: onApply }, t('preview.apply')),
+                    unchanged
+                      ? null
+                      : h('button', { type: 'button', className: 'tacit-btn tacit-btn-primary', onClick: onApply }, t('preview.apply')),
                     h('button', { type: 'button', className: 'tacit-btn', onClick: onCancel }, t('preview.cancel'))))))
       }
     }
@@ -1364,6 +2212,126 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       }
     }
 
+    // ── Collapsible section card (Settings → Tacit) ────────────────────────
+
+    /**
+     * One accessible collapsible card.
+     *
+     * A `<details>` would be shorter, but its open state lives in the DOM: the
+     * store could not drive it and the SSR suite could not seed it. So this is
+     * the button/`aria-expanded`/`aria-controls` pattern instead, with the body
+     * always in the DOM and only the `hidden` attribute toggled — the content
+     * stays findable (browser find-in-page aside) and nothing remounts.
+     */
+    function SectionCard(kit, { id, title, summary, count, open, onToggle, children }) {
+      const { t } = kit
+      const key = String(id)
+      const isOpen = open === true
+      const bodyId = 'tacit-card-' + key + '-body'
+      const label = isOpen ? t('card.collapse') : t('card.expand')
+      const kids = Array.isArray(children) ? children : (children === undefined || children === null ? [] : [children])
+      return h('div', { className: 'tacit-card' },
+        h('button', {
+          type: 'button',
+          className: 'tacit-card-head',
+          id: 'tacit-card-' + key + '-head',
+          'aria-expanded': isOpen,
+          'aria-controls': bodyId,
+          onClick: onToggle,
+        },
+        h('span', { className: 'tacit-card-title' }, title),
+        typeof summary === 'string' && summary.length > 0
+          ? h('span', { className: 'tacit-card-summary' }, summary)
+          : null,
+        count !== undefined && count !== null
+          ? h('span', { className: 'tacit-card-count' }, String(count))
+          : null,
+        h('span', { className: 'tacit-card-chevron', 'aria-label': label, title: label }, isOpen ? '▾' : '▸')),
+        h('div', { className: 'tacit-card-body', id: bodyId, hidden: !isOpen }, ...kids))
+    }
+
+    // ── Confirm dialog (destructive actions) ───────────────────────────────
+
+    /**
+     * What had focus when a destructive action was requested.
+     *
+     * It is captured by the store action that opens the dialog rather than by
+     * the dialog itself: React focuses the `autoFocus`ed Cancel button while it
+     * commits, so by the time an effect runs the opener is already gone.
+     */
+    let confirmOpener = null
+
+    /**
+     * The two focus stops of the dialog, addressed by id rather than by ref:
+     * refs would add hooks to a component whose hook count must not move.
+     */
+    const CONFIRM_CANCEL_ID = 'tacit-confirm-cancel'
+    const CONFIRM_ACCEPT_ID = 'tacit-confirm-accept'
+
+    function captureConfirmOpener() {
+      confirmOpener = typeof document !== 'undefined' && document !== null ? document.activeElement : null
+    }
+
+    /**
+     * One small modal confirmation, rendered unconditionally by its owner (and
+     * `null` when closed) so React's hook count never changes between renders.
+     * Hook-free but for the focus restore, which is the one thing it cannot do
+     * with markup alone.
+     *
+     * Cancel comes first and takes focus: the safe answer is the one a keyboard
+     * or screen-reader user reaches without looking.
+     */
+    function ConfirmDialog(kit, { open, title, body, confirmLabel, onConfirm, onCancel }) {
+      const { t } = kit
+      const isOpen = open === true
+      useEffect(() => {
+        if (!isOpen || typeof document === 'undefined') return undefined
+        const opener = confirmOpener
+        return () => {
+          if (opener !== null && typeof opener.focus === 'function') opener.focus()
+        }
+      }, [isOpen])
+      if (!isOpen) return null
+      const cancel = typeof onCancel === 'function' ? onCancel : () => {}
+      return h('div', {
+        className: 'tacit-modal-backdrop',
+        onClick: cancel,
+        // Escape and Tab are both handled here: a keydown from either button
+        // bubbles to the backdrop. With exactly two stops in the dialog,
+        // forward and backward tabbing both land on the other button, so
+        // `shiftKey` needs no branch of its own.
+        onKeyDown: (event) => {
+          if (event.key === 'Escape') {
+            // Stopped here: the host's Settings modal also closes on Escape, and
+            // cancelling a confirm must not take the whole settings page with it.
+            if (typeof event.stopPropagation === 'function') event.stopPropagation()
+            cancel()
+            return
+          }
+          if (event.key !== 'Tab' || typeof document === 'undefined' || document === null) return
+          const cancelButton = document.getElementById(CONFIRM_CANCEL_ID)
+          const acceptButton = document.getElementById(CONFIRM_ACCEPT_ID)
+          if (cancelButton === null || acceptButton === null) return
+          const next = document.activeElement === acceptButton ? cancelButton : acceptButton
+          event.preventDefault()
+          if (typeof next.focus === 'function') next.focus()
+        },
+      },
+      h('div', {
+        className: 'tacit-modal-card',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-labelledby': 'tacit-confirm-title',
+        // A click on the card is not a click on the backdrop.
+        onClick: (event) => event.stopPropagation(),
+      },
+      h('h3', { className: 'tacit-modal-title', id: 'tacit-confirm-title' }, title),
+      h('p', { className: 'tacit-confirm-body' }, body),
+      h('div', { className: 'tacit-confirm-actions' },
+        h('button', { type: 'button', id: CONFIRM_CANCEL_ID, className: 'tacit-btn', autoFocus: true, onClick: cancel }, t('confirm.cancel')),
+        h('button', { type: 'button', id: CONFIRM_ACCEPT_ID, className: 'tacit-btn tacit-btn-danger', onClick: onConfirm }, confirmLabel))))
+    }
+
     // ── Global panel (Settings → Tacit section) ────────────────────────────
 
     function DirectivesEditor(kit) {
@@ -1424,14 +2392,16 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
                 typeof entry.workspace === 'string' && entry.workspace.length > 0
                   ? h('span', { className: 'tacit-chip tacit-chip-scope', title: entry.workspace }, t('steer.workspace', { name: labelOf(entry.workspace) }))
                   : null,
-                entry.status === 'candidate'
-                  ? h('span', { className: 'tacit-chip tacit-chip-trial' }, t('steer.trial', {
-                    n: String(entry.trial !== null && typeof entry.trial === 'object' && typeof entry.trial.turns === 'number' ? entry.trial.turns : 0),
-                    total: String(config !== null && typeof config.directiveTrialTurns === 'number' ? config.directiveTrialTurns : 10),
-                  }))
-                  : entry.status === 'retired'
-                    ? h('span', { className: 'tacit-chip tacit-chip-warn' }, t('steer.retired', { reason: String(entry.retiredReason || '') }))
-                    : h('span', { className: 'tacit-chip tacit-chip-ok' }, t('steer.active')),
+                entry.status === 'queued'
+                  ? h('span', { className: 'tacit-chip tacit-chip-muted' }, t('steer.queued'))
+                  : entry.status === 'candidate'
+                    ? h('span', { className: 'tacit-chip tacit-chip-trial' }, t('steer.trial', {
+                      n: String(entry.trial !== null && typeof entry.trial === 'object' && typeof entry.trial.turns === 'number' ? entry.trial.turns : 0),
+                      total: String(config !== null && typeof config.directiveTrialTurns === 'number' ? config.directiveTrialTurns : 10),
+                    }))
+                    : entry.status === 'retired'
+                      ? h('span', { className: 'tacit-chip tacit-chip-warn' }, t('steer.retired', { reason: String(entry.retiredReason || '') }))
+                      : h('span', { className: 'tacit-chip tacit-chip-ok' }, t('steer.active')),
                 h('button', { type: 'button', className: 'tacit-btn tacit-btn-sm', onClick: () => editDirectives({ action: 'remove', id: entry.id }) }, t('steer.remove'))))),
           h('div', { className: 'tacit-settings-row' },
             h('input', {
@@ -1465,6 +2435,26 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       }
     }
 
+    /** Days offered by the retention select; the host clamps to 7–365 anyway. */
+    const RETENTION_DAYS = [7, 14, 30, 90, 180, 365]
+
+    /**
+     * The `/bootstrap-preview` envelope, narrowed. `null` for anything that is
+     * not a successful preview, so the Overview card falls back to the
+     * documented estimate rather than pricing an envelope it cannot read.
+     */
+    function previewOf(value) {
+      if (value === null || typeof value !== 'object' || value.ok !== true) return null
+      if (typeof value.eligible !== 'number' || !Number.isFinite(value.eligible)) return null
+      const estimate = value.estimate !== null && typeof value.estimate === 'object' ? value.estimate : {}
+      return {
+        eligible: Math.max(0, Math.floor(value.eligible)),
+        usd: typeof estimate.usd === 'number' && Number.isFinite(estimate.usd) ? estimate.usd : null,
+        basis: estimate.basis === 'measured' ? 'measured' : 'doc',
+        samples: typeof estimate.samples === 'number' && Number.isFinite(estimate.samples) ? Math.max(0, Math.floor(estimate.samples)) : 0,
+      }
+    }
+
     function CoachPanel(kit) {
       const { t, fmtTime } = kit
       const DirectivesEditorView = DirectivesEditor(kit)
@@ -1481,6 +2471,12 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
         const [auto, setAuto] = useState(config !== null && config.autoAnalyze !== false)
         const [learnGood, setLearnGood] = useState(config !== null && config.learnFromGood !== false)
         const [live, setLive] = useState(config !== null && config.liveSuggestions !== false)
+        // The two USD thresholds follow the budget field's text-state + Apply
+        // pattern: money is typed a character at a time, and clamping mid-typing
+        // fights the user. `0` is a real value here (the warning off), so the
+        // fallback is `??`, never `||`.
+        const [dailyText, setDailyText] = useState(config !== null && typeof config.costWarnDailyUsd === 'number' ? String(config.costWarnDailyUsd) : '0')
+        const [monthlyText, setMonthlyText] = useState(config !== null && typeof config.costWarnMonthlyUsd === 'number' ? String(config.costWarnMonthlyUsd) : '0')
 
         useEffect(() => {
           if (config !== null) {
@@ -1489,6 +2485,8 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
             if (typeof config.autoAnalyze === 'boolean') setAuto(config.autoAnalyze)
             if (typeof config.learnFromGood === 'boolean') setLearnGood(config.learnFromGood)
             if (typeof config.liveSuggestions === 'boolean') setLive(config.liveSuggestions)
+            if (typeof config.costWarnDailyUsd === 'number') setDailyText(String(config.costWarnDailyUsd))
+            if (typeof config.costWarnMonthlyUsd === 'number') setMonthlyText(String(config.costWarnMonthlyUsd))
           }
         }, [config])
 
@@ -1516,6 +2514,17 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
           setLive(next)
           updateRootConfig({ liveSuggestions: next })
         }
+        /** One USD threshold: never negative, `0` = off, no rounding to whole dollars. */
+        const applyWarn = (key, text, setText) => {
+          const typed = String(text).trim()
+          // An empty field means "off". Anything that is not a number at all is
+          // a typo: silently writing 0 would turn a warning off behind the
+          // user's back, so the entry is left alone instead.
+          if (typed.length > 0 && !Number.isFinite(Number(typed))) return
+          const value = Math.max(0, typed.length === 0 ? 0 : Number(typed))
+          setText(String(value))
+          updateRootConfig({ [key]: value })
+        }
 
         const coached = Array.isArray(rootStore.coached) ? rootStore.coached : []
         const error = rootStore.error
@@ -1526,13 +2535,98 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
           ? rootStore.profile.directives.filter((entry) => entry !== null && typeof entry === 'object' && typeof entry.id === 'string' && typeof entry.text === 'string')
           : []
 
+        const sections = rootStore.sections !== null && typeof rootStore.sections === 'object' ? rootStore.sections : {}
+        const notice = rootStore.notice !== null && typeof rootStore.notice === 'object' && typeof rootStore.notice.text === 'string'
+          ? rootStore.notice
+          : null
+        // Rates ride the /usage envelope, so the Pricing card reads them there
+        // rather than calling a route of its own on every render.
+        const usageReport = usageOf(rootStore.usage)
+        const usagePricing = usageReport === null ? null : usageReport.pricing
+        const preview = previewOf(rootStore.preview)
+        const confirm = rootStore.confirm !== null && typeof rootStore.confirm === 'object' && rootStore.confirm.kind === 'usage'
+          ? 'usage'
+          : (rootStore.confirm !== null && typeof rootStore.confirm === 'object' && rootStore.confirm.kind === 'reports' ? 'reports' : null)
+        const retention = config !== null && typeof config.costHistoryDays === 'number' && Number.isFinite(config.costHistoryDays) && config.costHistoryDays > 0
+          ? config.costHistoryDays
+          : 30
+        // A value set by hand in the YAML need not be one of the offered days.
+        // It gets an option of its own, in place, rather than being displayed
+        // as a neighbour it is not.
+        const retentionDays = RETENTION_DAYS.includes(retention)
+          ? RETENTION_DAYS
+          : [...RETENTION_DAYS, retention].sort((a, b) => a - b)
+        /** Every card is titled by `card.<id>` and driven by `rootStore.sections`. */
+        const card = (id, children, extra) => SectionCard(kit, {
+          id,
+          title: t('card.' + id),
+          open: sections[id] === true,
+          onToggle: () => toggleSection(id),
+          children,
+          ...(extra !== undefined ? extra : {}),
+        })
+
         return h('div', { className: 'tacit-panel' },
-          StatusCard(kit, { config, profile, auto: rootStore.auto, trend: rootStore.trend }),
-          h('div', { className: 'tacit-settings-row' },
-            BootstrapButton(kit, { bootstrap: rootStore.bootstrap, onClick: () => bootstrapAll() }),
-            h('span', { className: 'tacit-panel-hint' }, t('bootstrap.hint'))),
-          h('div', { className: 'tacit-settings' },
-            h('div', { className: 'tacit-settings-title' }, t('settings.title')),
+          error !== null && typeof error === 'object'
+            ? h('div', { className: 'tacit-error' }, t('err.' + String(error.code), { detail: String(error.detail || '') }))
+            : null,
+          // Above the cards, and always mounted: a live region that appears
+          // together with its text is missed by screen readers, and one nested
+          // in the Overview body would be silent while that card is collapsed.
+          h('div', { className: 'tacit-settings-notice', role: 'status' }, notice === null ? '' : notice.text),
+          card('overview', [
+            StatusCard(kit, { config, profile, auto: rootStore.auto, trend: rootStore.trend }),
+            config !== null && typeof config.model === 'string' && config.model.length > 0
+              ? h('div', { className: 'tacit-settings-row' },
+                h('span', { className: 'tacit-chip' }, t('overview.model', { model: config.model })))
+              : null,
+            h('div', { className: 'tacit-settings-row' },
+              BootstrapButton(kit, {
+                bootstrap: rootStore.bootstrap,
+                // Only a loaded preview may disable the button: before one
+                // lands, "0 eligible" is an absence of data, not a fact.
+                disabled: preview !== null && preview.eligible === 0,
+                onClick: () => bootstrapAll(t),
+              }),
+              h('span', { className: 'tacit-panel-hint' }, t('bootstrap.hint'))),
+            // What the run would actually cost, priced from the ledger once it
+            // holds enough analyses; until the preview lands, the documented
+            // figure stands in.
+            preview === null
+              ? h('p', { className: 'tacit-panel-hint' }, t('bootstrap.estimateDoc'))
+              : h('p', { className: 'tacit-panel-hint' },
+                // An estimate the host could not price says so; `fmtUsd(null)`
+                // would read `$0.0000` and claim the run is free.
+                t('bootstrap.preview', {
+                  eligible: String(preview.eligible),
+                  usd: preview.usd === null ? t('usage.priceUnavailable') : fmtUsd(preview.usd),
+                }),
+                ' ',
+                preview.basis === 'measured'
+                  ? t('bootstrap.previewMeasured', { samples: String(preview.samples) })
+                  : t('bootstrap.previewDoc')),
+          ]),
+          card('usage', [
+            UsageCard(kit, {
+              usage: rootStore.usage,
+              config,
+              filters: rootStore.usageFilters,
+              series: rootStore.usageSeries,
+              expanded: rootStore.usageExpanded,
+              runs: rootStore.usageRuns,
+              onFilter: (patch) => setUsageFilter(patch),
+              onToggleRun: (runId) => toggleUsageRun(runId),
+              onSeries: (value) => setUsageSeries(value),
+            }),
+          ]),
+          card('pricing', [
+            PricingCard(kit, {
+              pricing: usagePricing,
+              refreshing: rootStore.pricingRefreshing === true,
+              onRefresh: () => refreshPricing(t),
+            }),
+          ], { summary: pricingSummary(kit, usagePricing) }),
+          card('learning', [
             h('div', { className: 'tacit-settings-row' },
               h('label', { className: 'tacit-settings-label' }, t('settings.model')),
               h('select', {
@@ -1558,39 +2652,107 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
                 onChange: (event) => setBudgetText(event.target.value),
               }),
               h('button', { type: 'button', className: 'tacit-btn tacit-btn-sm', onClick: applyBudget }, t('settings.apply'))),
+          ]),
+          card('guidance', [
+            h(DirectivesEditorView, {
+              workspaces: rootStore.workspaces, config, directives, steering: rootStore.steering }),
+          ]),
+          card('improve', [
             h('div', { className: 'tacit-settings-row' },
               h('label', { className: 'tacit-settings-label' }, t('settings.live')),
               h('input', { type: 'checkbox', checked: live, onChange: toggleLive })),
+            h('div', { className: 'tacit-panel-section' },
+              h('div', { className: 'tacit-report-title' }, t('panel.styleRules')),
+              styleRules.length === 0
+                ? h('div', { className: 'tacit-empty' }, t('panel.styleRulesEmpty'))
+                : h('div', { className: 'tacit-rules-list' },
+                  styleRules.map((entry, index) => h('div', { key: 'rule-' + index, className: 'tacit-rule' }, String(entry.rule))))),
+            h('p', { className: 'tacit-panel-hint' }, t('improve.explain')),
+          ]),
+          card('history', [
+            h('div', { className: 'tacit-panel-section' },
+              h('div', { className: 'tacit-report-title' }, t('panel.coached')),
+              coached.length === 0
+                ? h('div', { className: 'tacit-empty' }, t('panel.coachedEmpty'))
+                : h('div', { className: 'tacit-coached-list' },
+                  coached.map((entry, index) => h('div', { key: 'c' + index, className: 'tacit-coached-row' },
+                    h('div', { className: 'tacit-coached-meta' },
+                      h('span', { className: 'tacit-coached-turn' }, (typeof entry.sessionLabel === 'string' && entry.sessionLabel.length > 0 ? entry.sessionLabel + ' · ' : '') + '# ' + String(entry.turn)),
+                      h('span', { className: 'tacit-coached-time' }, fmtTime(entry.time)),
+                      h('span', { className: 'tacit-chip tacit-coached-trigger' }, t('trigger.' + (entry.trigger === 'auto' || entry.trigger === 'correction' || entry.trigger === 'bootstrap' ? entry.trigger : 'manual')))),
+                    typeof entry.promptExcerpt === 'string' && entry.promptExcerpt.length > 0
+                      ? h('div', { className: 'tacit-coached-excerpt' }, entry.promptExcerpt)
+                      : null,
+                    typeof entry.improvedPrompt === 'string' && entry.improvedPrompt.length > 0
+                      ? h('div', { className: 'tacit-coached-improved' }, entry.improvedPrompt.slice(0, 240) + (entry.improvedPrompt.length > 240 ? '…' : ''))
+                      : null)))),
+            h('p', { className: 'tacit-panel-hint' }, t('panel.hint')),
+          ], { count: coached.length }),
+          card('privacy', [
+            h('p', { className: 'tacit-panel-hint' }, t('privacy.stored')),
             h('div', { className: 'tacit-settings-row' },
-              h('button', { type: 'button', className: 'tacit-btn tacit-btn-sm', onClick: () => clearAllRoot() }, t('settings.clear')))),
-          error !== null && typeof error === 'object'
-            ? h('div', { className: 'tacit-error' }, t('err.' + String(error.code), { detail: String(error.detail || '') }))
-            : null,
-          h(DirectivesEditorView, {
-            workspaces: rootStore.workspaces, config, directives, steering: rootStore.steering }),
-          h('div', { className: 'tacit-panel-section' },
-            h('div', { className: 'tacit-report-title' }, t('panel.styleRules')),
-            styleRules.length === 0
-              ? h('div', { className: 'tacit-empty' }, t('panel.styleRulesEmpty'))
-              : h('div', { className: 'tacit-rules-list' },
-                styleRules.map((entry, index) => h('div', { key: 'rule-' + index, className: 'tacit-rule' }, String(entry.rule))))),
-          h('div', { className: 'tacit-panel-section' },
-            h('div', { className: 'tacit-report-title' }, t('panel.coached')),
-            coached.length === 0
-              ? h('div', { className: 'tacit-empty' }, t('panel.coachedEmpty'))
-              : h('div', { className: 'tacit-coached-list' },
-                coached.map((entry, index) => h('div', { key: 'c' + index, className: 'tacit-coached-row' },
-                  h('div', { className: 'tacit-coached-meta' },
-                    h('span', { className: 'tacit-coached-turn' }, (typeof entry.sessionLabel === 'string' && entry.sessionLabel.length > 0 ? entry.sessionLabel + ' · ' : '') + '# ' + String(entry.turn)),
-                    h('span', { className: 'tacit-coached-time' }, fmtTime(entry.time)),
-                    h('span', { className: 'tacit-chip tacit-coached-trigger' }, t('trigger.' + (entry.trigger === 'auto' || entry.trigger === 'correction' || entry.trigger === 'bootstrap' ? entry.trigger : 'manual')))),
-                  typeof entry.promptExcerpt === 'string' && entry.promptExcerpt.length > 0
-                    ? h('div', { className: 'tacit-coached-excerpt' }, entry.promptExcerpt)
-                    : null,
-                  typeof entry.improvedPrompt === 'string' && entry.improvedPrompt.length > 0
-                    ? h('div', { className: 'tacit-coached-improved' }, entry.improvedPrompt.slice(0, 240) + (entry.improvedPrompt.length > 240 ? '…' : ''))
-                    : null)))),
-          h('div', { className: 'tacit-panel-hint' }, t('panel.hint')))
+              h('label', { className: 'tacit-settings-label', htmlFor: 'tacit-retention' }, t('privacy.retention')),
+              h('select', {
+                id: 'tacit-retention',
+                className: 'tacit-select',
+                value: String(retention),
+                onChange: (event) => updateRootConfig({ costHistoryDays: Number(event.target.value) }),
+              },
+              ...retentionDays.map((days) => h('option', { key: days, value: String(days) }, String(days))))),
+            h('div', { className: 'tacit-settings-row' },
+              h('label', { className: 'tacit-settings-label', htmlFor: 'tacit-warn-daily' }, t('privacy.warnDaily')),
+              h('input', {
+                id: 'tacit-warn-daily',
+                className: 'tacit-input',
+                type: 'number',
+                min: 0,
+                step: '0.01',
+                value: dailyText,
+                onChange: (event) => setDailyText(event.target.value),
+              }),
+              h('button', {
+                type: 'button',
+                className: 'tacit-btn tacit-btn-sm',
+                // Two identically labelled buttons in one card: the accessible
+                // name has to say which threshold each one applies.
+                'aria-label': t('privacy.applyTo', { action: t('privacy.apply'), field: t('privacy.warnDaily') }),
+                onClick: () => applyWarn('costWarnDailyUsd', dailyText, setDailyText),
+              }, t('privacy.apply'))),
+            h('div', { className: 'tacit-settings-row' },
+              h('label', { className: 'tacit-settings-label', htmlFor: 'tacit-warn-monthly' }, t('privacy.warnMonthly')),
+              h('input', {
+                id: 'tacit-warn-monthly',
+                className: 'tacit-input',
+                type: 'number',
+                min: 0,
+                step: '0.01',
+                value: monthlyText,
+                onChange: (event) => setMonthlyText(event.target.value),
+              }),
+              h('button', {
+                type: 'button',
+                className: 'tacit-btn tacit-btn-sm',
+                // Two identically labelled buttons in one card: the accessible
+                // name has to say which threshold each one applies.
+                'aria-label': t('privacy.applyTo', { action: t('privacy.apply'), field: t('privacy.warnMonthly') }),
+                onClick: () => applyWarn('costWarnMonthlyUsd', monthlyText, setMonthlyText),
+              }, t('privacy.apply'))),
+            h('p', { className: 'tacit-panel-hint' }, t('privacy.warnHint')),
+            // Both clears are irreversible, so both go through the dialog.
+            h('div', { className: 'tacit-settings-row' },
+              h('button', { type: 'button', className: 'tacit-btn tacit-btn-sm', onClick: () => openConfirm('reports') }, t('settings.clear')),
+              h('button', { type: 'button', className: 'tacit-btn tacit-btn-sm', onClick: () => openConfirm('usage') }, t('privacy.clearUsage'))),
+          ]),
+          // Always rendered (null while closed) so its one effect keeps this
+          // component's hook count stable.
+          ConfirmDialog(kit, {
+            open: confirm !== null,
+            title: t(confirm === 'usage' ? 'confirm.usageTitle' : 'confirm.reportsTitle'),
+            body: t(confirm === 'usage' ? 'confirm.usageBody' : 'confirm.reportsBody'),
+            confirmLabel: t('confirm.clear'),
+            onConfirm: () => confirmAction(),
+            onCancel: () => closeConfirm(),
+          }))
       }
     }
 
@@ -1602,6 +2764,11 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
           initRootStore()
           // Fresh read so freshly distilled style rules appear on open.
           refreshRootState()
+          // What a bootstrap would cost right now, priced from the ledger.
+          fetchBootstrapPreview()
+          // One shared 10s /usage poll while any Tacit settings page is mounted.
+          startUsagePolling()
+          return stopUsagePolling
         }, [])
         return h('div', { className: 'tacit-root' },
           h('div', { className: 'tacit-head' }, h('div', { className: 'tacit-head-title' }, t('panel.title'))),
@@ -1609,6 +2776,463 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       }
     }
 
+    // ── Usage dashboard (Settings → Usage card) ────────────────────────────
+
+    /** Every run type and op the ledger can tag, in the order the filters list them. */
+    const USAGE_RUN_TYPES = ['bootstrap', 'analysis', 'analysis-batch', 'improve', 'directive-distillation', 'style-distillation', 'prompt-enrichment']
+    const USAGE_RANGES = ['today', '7d', '30d', 'month', 'all']
+    const USAGE_STATUSES = ['running', 'success', 'partial', 'failed']
+    const USAGE_COLUMNS = ['time', 'op', 'scope', 'model', 'status', 'calls', 'tokens', 'cost']
+
+    /** One label/value tile; `note` is the small "n unpriced" line under the value. */
+    function UsageTile(key, label, value, note) {
+      return h('div', { key, className: 'tacit-tile' },
+        h('span', { className: 'tacit-tile-label' }, label),
+        h('span', { className: 'tacit-tile-value' }, value),
+        typeof note === 'string' && note.length > 0 ? h('span', { className: 'tacit-tile-note' }, note) : null)
+    }
+
+    /** Money tile: the period's spend plus its unpriced-call footnote. */
+    function SpendTile(kit, id, label, totals) {
+      const note = totals.unpricedCalls > 0 ? kit.t('usage.unpricedShort', { n: String(totals.unpricedCalls) }) : ''
+      return UsageTile(id, label, usageSpend(kit, totals), note)
+    }
+
+    /**
+     * Daily spend as a bar per day. `role="img"` with one `<title>` per rect
+     * carries the detail to a pointer; the visually hidden paragraph under it
+     * carries the same shape to a screen reader, which cannot read the bars.
+     */
+    function BarStrip(kit, { series, which, onSeries }) {
+      const { t } = kit
+      const days = Array.isArray(series) ? series : []
+      const count = days.length
+      let max = 0
+      let total = 0
+      let peak = null
+      for (const point of days) {
+        if (point.usdKnown > max) max = point.usdKnown
+        total += point.usdKnown
+        if (peak === null || point.usdKnown > peak.usdKnown) peak = point
+      }
+      const bars = days.map((point, index) => {
+        // A day with any spend at all keeps a visible 1px stub.
+        const height = point.usdKnown > 0 && max > 0 ? Math.max(1, Math.round((point.usdKnown / max) * 46)) : 0
+        return h('rect', {
+          key: point.day,
+          className: 'tacit-bar',
+          x: String(index * 10 + 1),
+          y: String(48 - height),
+          width: '8',
+          height: String(height),
+        }, h('title', null, t('usage.barTitle', {
+          day: fmtDay(point.day),
+          usd: fmtUsd(point.usdKnown),
+          calls: String(point.billedCalls),
+        })))
+      })
+      const summary = t('usage.chartSummary', {
+        n: String(count),
+        total: fmtUsd(total),
+        day: peak === null ? '—' : fmtDay(peak.day),
+        max: peak === null ? '—' : fmtUsd(peak.usdKnown),
+      })
+      const seriesButton = (value, label) => h('button', {
+        key: value,
+        type: 'button',
+        className: 'tacit-btn tacit-btn-sm',
+        'aria-pressed': which === value,
+        onClick: () => onSeries(value),
+      }, label)
+      return h('div', { className: 'tacit-usage-chart' },
+        h('svg', {
+          className: 'tacit-bars',
+          role: 'img',
+          'aria-label': t('usage.chartLabel', { n: String(count) }),
+          viewBox: '0 0 ' + String(count * 10) + ' 48',
+          preserveAspectRatio: 'none',
+        }, bars),
+        h('p', { className: 'tacit-visually-hidden' }, summary),
+        h('div', { className: 'tacit-series-toggle' },
+          seriesButton('7', t('usage.series7')),
+          seriesButton('30', t('usage.series30'))))
+    }
+
+    /** Spend per operation, costliest first, each row ending in a share bar. */
+    function UsageBreakdown(kit, { byType }) {
+      const { t } = kit
+      const rows = Object.entries(byType).sort((a, b) => b[1].usdKnown - a[1].usdKnown)
+      if (rows.length === 0) return null
+      const top = rows[0][1].usdKnown
+      return h('div', { className: 'tacit-usage-breakdown' },
+        h('div', { className: 'tacit-report-title' }, t('usage.breakdown')),
+        rows.map(([type, totals]) => {
+          const share = top > 0 ? Math.round((totals.usdKnown / top) * 100) : 0
+          return h('div', { key: type, className: 'tacit-breakdown-row' },
+            h('span', { className: 'tacit-breakdown-name' }, t('runtype.' + type)),
+            h('span', { className: 'tacit-breakdown-calls' }, fmtTokens(totals.billedCalls)),
+            h('span', { className: 'tacit-breakdown-tokens' }, fmtTokens(tokensTotal(totals.tokens))),
+            h('span', { className: 'tacit-breakdown-usd' }, usageSpend(kit, totals)),
+            h('div', { className: 'tacit-share-track' },
+              h('div', { className: 'tacit-share', style: { width: String(share) + '%' } })))
+        }))
+    }
+
+    /** One budget bar; nothing at all when that threshold is switched off (`limit` 0). */
+    function WarnBar(kit, { id, warning }) {
+      const { t } = kit
+      if (!(warning.limit > 0)) return null
+      const pct = Math.round((warning.spent / warning.limit) * 100)
+      const label = t('warn.' + id, { spent: fmtUsd(warning.spent), limit: fmtUsd(warning.limit), pct: String(pct) })
+      return h('div', {
+        key: id,
+        className: 'tacit-warn-bar tacit-warn-' + warning.level,
+        role: 'progressbar',
+        'aria-valuemin': 0,
+        'aria-valuemax': warning.limit,
+        // An overspend is real, but `aria-valuenow` past `aria-valuemax` is not a
+        // valid range: the bar pins at the cap and the true figure rides valuetext.
+        'aria-valuenow': Math.min(warning.spent, warning.limit),
+        'aria-valuetext': fmtUsd(warning.spent),
+        'aria-label': label,
+      },
+      h('span', { className: 'tacit-warn-label' }, label),
+      h('div', { className: 'tacit-warn-track' },
+        h('div', { className: 'tacit-warn-fill', style: { width: String(Math.min(100, pct)) + '%' } })))
+    }
+
+    /** Range/type/status/model selects plus the two free-text scopes. */
+    function UsageFilters(kit, { filters, models, onFilter }) {
+      const { t } = kit
+      const select = (name, value, options) => h('label', { className: 'tacit-filter' },
+        h('span', { className: 'tacit-filter-label' }, t('filter.' + name)),
+        h('select', {
+          className: 'tacit-select',
+          value,
+          onChange: (event) => onFilter({ [name]: event.target.value }),
+        }, options.map((option) => h('option', { key: option.value, value: option.value }, option.label))))
+      // A text scope applies on Enter or on leaving the field — not per keystroke,
+      // which would fire a /usage call for every character typed. `name` is the
+      // dictionary key, `field` the store/wire key: the session scope is labelled
+      // `filter.session` but filtered on `sessionId`, which is what the server reads.
+      const text = (name, field, value) => h('label', { className: 'tacit-filter' },
+        h('span', { className: 'tacit-filter-label' }, t('filter.' + name)),
+        h('input', {
+          className: 'tacit-input',
+          type: 'text',
+          key: field + '-' + value,
+          defaultValue: value,
+          onBlur: (event) => {
+            if (event.target.value !== value) onFilter({ [field]: event.target.value.trim() })
+          },
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') onFilter({ [field]: event.target.value.trim() })
+          },
+        }))
+      const all = { value: '', label: t('filter.all') }
+      return h('div', { className: 'tacit-usage-filters' },
+        h('div', { className: 'tacit-report-title' }, t('usage.filters')),
+        h('div', { className: 'tacit-filter-row' },
+          select('range', filters.range, USAGE_RANGES.map((value) => ({ value, label: t('range.' + value) }))),
+          select('type', filters.type, [all, ...USAGE_RUN_TYPES.map((value) => ({ value, label: t('runtype.' + value) }))]),
+          select('status', filters.status, [all, ...USAGE_STATUSES.map((value) => ({ value, label: t('status.' + value) }))]),
+          select('model', filters.model, [all, ...models.map((value) => ({ value, label: value }))]),
+          text('workspace', 'workspace', filters.workspace),
+          text('session', 'sessionId', filters.sessionId)))
+    }
+
+    /** The five token buckets of one attempt, in the order the adapter reports them. */
+    function attemptTokens(usage) {
+      if (usage === null || typeof usage !== 'object') return '—'
+      return 'in ' + fmtTokens(usage.inputTokens)
+        + ' · out ' + fmtTokens(usage.outputTokens)
+        + ' · cacheRead ' + fmtTokens(usage.cacheReadTokens)
+        + ' · cacheWrite ' + fmtTokens(usage.cacheWriteTokens)
+        + ' · reasoning ' + fmtTokens(usage.reasoningTokens)
+    }
+
+    /** One `run()` of the coach model: what it was, how it ended, what it cost. */
+    function AttemptRow(kit, attempt) {
+      const { t } = kit
+      const priced = attempt.priced !== null && typeof attempt.priced === 'object' ? attempt.priced : null
+      const finish = String(attempt.finish || '')
+      const code = String(attempt.code || '')
+      return h('div', { key: String(attempt.id), className: 'tacit-attempt' },
+        h('span', { className: 'tacit-chip' }, t('op.' + String(attempt.op))),
+        typeof attempt.reasoningEffort === 'string' && attempt.reasoningEffort.length > 0
+          ? h('span', { className: 'tacit-attempt-meta' }, t('attempt.effort', { effort: attempt.reasoningEffort }))
+          : null,
+        h('span', { className: 'tacit-chip tacit-status-' + String(attempt.status) }, t('status.' + String(attempt.status))),
+        h('span', { className: 'tacit-attempt-meta' }, t('attempt.finish', { finish, code })),
+        h('span', { className: 'tacit-attempt-meta' }, priced === null
+          ? t('usage.priceUnavailable')
+          : t('attempt.source', { source: String(priced.source), tier: String(priced.tier) })),
+        h('span', { className: 'tacit-attempt-tokens' }, attemptTokens(attempt.usage)),
+        h('span', { className: 'tacit-attempt-meta' }, t('attempt.duration', { ms: fmtTokens(attempt.durationMs) })),
+        h('span', { className: 'tacit-attempt-usd' }, priced === null ? t('usage.priceUnavailable') : fmtUsd(priced.usd)))
+    }
+
+    /** The expanded detail row of one run: its attempts, or the loading line. */
+    function AttemptsRow(kit, { runId, run }) {
+      const { t } = kit
+      const attempts = run !== null && run !== undefined && typeof run === 'object' && Array.isArray(run.attempts)
+        ? run.attempts.filter((attempt) => attempt !== null && typeof attempt === 'object')
+        : null
+      return h('div', { className: 'tacit-usage-attempts', id: 'tacit-run-' + runId, role: 'row' },
+        h('div', { className: 'tacit-usage-cell tacit-usage-attempts-cell', role: 'cell', 'aria-colspan': USAGE_COLUMNS.length },
+          attempts === null
+            ? h('p', { className: 'tacit-panel-hint' }, t('usage.loading'))
+            : attempts.map((attempt) => AttemptRow(kit, attempt))))
+    }
+
+    /** One run row; the first cell is the disclosure button for its attempts. */
+    function RunRow(kit, { item, open, onToggleRun }) {
+      const { t, fmtTime } = kit
+      // A bootstrap run carries no workspace because it covers every session,
+      // which is worth saying; any other run type missing the field is simply
+      // a row with nothing to scope by.
+      const unscoped = item.type === 'bootstrap' ? t('usage.scopeAll') : '—'
+      const scope = item.workspace.length > 0 && item.turn !== null
+        ? item.workspace + ' · #' + String(item.turn)
+        : (item.workspace.length > 0 ? item.workspace : (item.turn !== null ? '#' + String(item.turn) : unscoped))
+      const cell = (key, child) => h('span', { key, className: 'tacit-usage-cell', role: 'cell' }, child)
+      return h('div', { className: 'tacit-usage-row', role: 'row' },
+        cell('time', h('button', {
+          type: 'button',
+          className: 'tacit-btn tacit-btn-sm tacit-run-toggle',
+          'aria-expanded': open,
+          'aria-controls': 'tacit-run-' + item.runId,
+          onClick: () => onToggleRun(item.runId),
+        }, (open ? '▾ ' : '▸ ') + fmtTime(item.startedAt))),
+        cell('op', t('runtype.' + item.type)),
+        cell('scope', scope),
+        cell('model', item.model.length > 0 ? item.model : '—'),
+        cell('status', h('span', { className: 'tacit-chip tacit-status-' + item.status }, t('status.' + item.status))),
+        cell('calls', fmtTokens(item.billedCalls)),
+        cell('tokens', fmtTokens(tokensTotal(item.tokens))),
+        cell('cost', usageSpend(kit, item)))
+    }
+
+    /** The runs table plus its pager. */
+    function UsageRuns(kit, { runs, expanded, runDetails, onToggleRun, onFilter }) {
+      const { t } = kit
+      const pages = Math.max(1, Math.ceil(runs.total / Math.max(1, runs.pageSize)))
+      const page = Math.min(Math.max(1, runs.page), pages)
+      return h('div', { className: 'tacit-usage-runs' },
+        h('div', { className: 'tacit-usage-table', role: 'table', 'aria-label': t('card.usage') },
+          h('div', { className: 'tacit-usage-row tacit-usage-head', role: 'row' },
+            USAGE_COLUMNS.map((column) => h('span', {
+              key: column,
+              className: 'tacit-usage-cell',
+              role: 'columnheader',
+            }, t('usage.col.' + column)))),
+          runs.items.map((item) => {
+            const open = expanded.has(item.runId)
+            return h(React.Fragment, { key: item.runId },
+              RunRow(kit, { item, open, onToggleRun }),
+              open ? AttemptsRow(kit, { runId: item.runId, run: runDetails[item.runId] }) : null)
+          })),
+        h('div', { className: 'tacit-pager' },
+          h('button', {
+            type: 'button',
+            className: 'tacit-btn tacit-btn-sm',
+            disabled: page <= 1,
+            onClick: () => onFilter({ page: page - 1 }),
+          }, t('usage.prev')),
+          h('span', { className: 'tacit-pager-label' }, t('usage.page', { page: String(page), pages: String(pages) })),
+          h('button', {
+            type: 'button',
+            className: 'tacit-btn tacit-btn-sm',
+            disabled: page >= pages,
+            onClick: () => onFilter({ page: page + 1 }),
+          }, t('usage.next'))))
+    }
+
+    /**
+     * The whole Usage card. A plain renderer, not a component: it is called
+     * from `CoachPanelView`'s render, so it must never own hooks — every bit
+     * of its state lives in `rootStore` and arrives as a prop.
+     */
+    function UsageCard(kit, props) {
+      const { t } = kit
+      const usage = usageOf(props.usage)
+      const since = fmtDay(usage === null ? 0 : usage.trackingSince)
+      if (usage === null || usage.lifetime.billedCalls === 0) {
+        return h('div', { className: 'tacit-usage' },
+          h('p', { className: 'tacit-panel-hint' }, t('usage.empty', { since })))
+      }
+      const filters = props.filters !== null && typeof props.filters === 'object' ? props.filters : {}
+      const value = (key) => (typeof filters[key] === 'string' ? filters[key] : '')
+      const expanded = props.expanded instanceof Set ? props.expanded : new Set()
+      const runDetails = props.runs !== null && typeof props.runs === 'object' ? props.runs : {}
+      const which = props.series === '7' ? '7' : '30'
+      const last30 = usage.last30
+      return h('div', { className: 'tacit-usage' },
+        h('p', { className: 'tacit-panel-hint' }, t('usage.label')),
+        h('div', { className: 'tacit-tiles' },
+          SpendTile(kit, 'today', t('usage.today'), usage.today),
+          SpendTile(kit, 'month', t('usage.month'), usage.month),
+          SpendTile(kit, 'last30', t('usage.last30'), last30),
+          SpendTile(kit, 'lifetime', t('usage.since', { day: since }), usage.lifetime)),
+        h('div', { className: 'tacit-tiles' },
+          UsageTile('calls', t('usage.calls'), fmtTokens(last30.billedCalls)),
+          UsageTile('avg', t('usage.avgAnalysis'), last30.avgAnalysisUsd === null
+            ? t('usage.priceUnavailable')
+            : fmtUsd(last30.avgAnalysisUsd)),
+          UsageTile('cached', t('usage.cachedRate'), fmtPct(last30.cachedInputRate)),
+          UsageTile('unpriced', t('usage.unpriced'), fmtTokens(last30.unpricedCalls))),
+        BarStrip(kit, { series: which === '7' ? usage.series7 : usage.series30, which, onSeries: props.onSeries }),
+        UsageBreakdown(kit, { byType: usage.byType }),
+        WarnBar(kit, { id: 'daily', warning: usage.warnings.daily }),
+        WarnBar(kit, { id: 'monthly', warning: usage.warnings.monthly }),
+        UsageFilters(kit, {
+          filters: {
+            range: value('range').length > 0 ? value('range') : '30d',
+            type: value('type'),
+            status: value('status'),
+            model: value('model'),
+            workspace: value('workspace'),
+            sessionId: value('sessionId'),
+          },
+          models: Object.keys(usage.byModel).sort(),
+          onFilter: props.onFilter,
+        }),
+        UsageRuns(kit, {
+          runs: usage.runs,
+          expanded,
+          runDetails,
+          onToggleRun: props.onToggleRun,
+          onFilter: props.onFilter,
+        }))
+    }
+
+    // ── Pricing card (Settings → Pricing) ──────────────────────────────────
+
+    /** The two tiers and the three quoted rates, in the order the table lists them. */
+    const PRICING_TIERS = ['offPeak', 'peak']
+    const PRICING_COLUMNS = ['model', 'tier', 'cacheHit', 'cacheMiss', 'output', 'reasoning']
+
+    /**
+     * The `usage.pricing` block, narrowed. Rates are copied per model and tier
+     * so a missing or malformed triple renders an em dash instead of a number
+     * the provider never quoted.
+     */
+    function pricingOf(value) {
+      const source = value !== null && typeof value === 'object' ? value : {}
+      const text = (key) => (typeof source[key] === 'string' ? source[key] : '')
+      const rates = source.rates !== null && typeof source.rates === 'object' ? source.rates : {}
+      const models = {}
+      for (const [model, tiers] of Object.entries(rates)) {
+        if (tiers === null || typeof tiers !== 'object') continue
+        const entry = {}
+        for (const tier of PRICING_TIERS) {
+          const triple = tiers[tier] !== null && typeof tiers[tier] === 'object' ? tiers[tier] : {}
+          const rate = (value) => (typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : undefined)
+          entry[tier] = { cacheHit: rate(triple.cacheHit), cacheMiss: rate(triple.cacheMiss), output: rate(triple.output) }
+        }
+        models[model] = entry
+      }
+      return {
+        source: source.source === 'costMeter' ? 'costMeter' : 'bundled',
+        asOf: text('asOf'),
+        refreshedAt: typeof source.refreshedAt === 'number' && source.refreshedAt > 0 ? source.refreshedAt : 0,
+        tierNow: source.tierNow === 'peak' ? 'peak' : 'offPeak',
+        error: text('error'),
+        models,
+      }
+    }
+
+    /** `deepseek-v4-flash` → `flash`, for the one-line header summary. */
+    function shortModel(model) {
+      const parts = String(model).split('-').filter((part) => part.length > 0)
+      return parts.length > 0 ? parts[parts.length - 1] : String(model)
+    }
+
+    /** Which price source this table came from, as a phrase. */
+    function pricingSourceLabel(kit, priced) {
+      return kit.t(priced.source === 'costMeter' ? 'pricing.sourceCostMeter' : 'pricing.sourceBundled')
+    }
+
+    /**
+     * The line the collapsed card shows in its header: the flash model — the
+     * default coach model — at the tier in force right now, so the headline
+     * figure is the one a call started this minute would actually be billed at.
+     */
+    function pricingSummary(kit, pricing) {
+      const { t } = kit
+      const priced = pricingOf(pricing)
+      const models = Object.keys(priced.models).sort()
+      const model = models.find((name) => name.endsWith('flash'))
+      const pick = model !== undefined ? model : models[0]
+      if (pick === undefined) return ''
+      const triple = priced.models[pick][priced.tierNow]
+      return t('pricing.summary', {
+        model: shortModel(pick),
+        tier: t('pricing.' + priced.tierNow),
+        rates: fmtRate(triple.cacheHit) + ' / ' + fmtRate(triple.cacheMiss) + ' / ' + fmtRate(triple.output),
+        source: pricingSourceLabel(kit, priced),
+        asOf: priced.asOf.length > 0 ? priced.asOf : '—',
+      })
+    }
+
+    /** One model at one tier. Reasoning is prose: it is billed as output, never quoted apart. */
+    function PricingRow(kit, model, tier, triple) {
+      const { t } = kit
+      const cell = (key, child) => h('span', { key, className: 'tacit-pricing-cell', role: 'cell' }, child)
+      return h('div', { key: model + '-' + tier, className: 'tacit-pricing-row', role: 'row' },
+        h('span', { className: 'tacit-pricing-cell tacit-pricing-model', role: 'rowheader' }, model),
+        cell('tier', t('pricing.' + tier)),
+        cell('cacheHit', fmtRate(triple.cacheHit)),
+        cell('cacheMiss', fmtRate(triple.cacheMiss)),
+        cell('output', fmtRate(triple.output)),
+        cell('reasoning', t('pricing.reasoningSameAsOutput')))
+    }
+
+    /**
+     * The Pricing card body. Like `UsageCard` a plain renderer, not a
+     * component: it owns no hooks and no state. It renders whether or not its
+     * card is open, because the `SectionCard` around it hides a collapsed body
+     * rather than unmounting it, which is what keeps find-in-page working over
+     * the rate table.
+     */
+    function PricingCard(kit, { pricing, onRefresh, refreshing }) {
+      const { t, fmtTime } = kit
+      const priced = pricingOf(pricing)
+      const models = Object.keys(priced.models).sort()
+      const when = priced.refreshedAt > 0
+        ? t('pricing.refreshedAt', { time: fmtDay(priced.refreshedAt) + ' ' + fmtTime(priced.refreshedAt) })
+        : t('pricing.never')
+      const asOf = priced.asOf.length > 0 ? priced.asOf : '—'
+      return h('div', { className: 'tacit-pricing' },
+        h('div', { className: 'tacit-report-title', id: 'tacit-pricing-title' }, t('pricing.rateTable')),
+        models.length === 0
+          ? h('p', { className: 'tacit-panel-hint' }, t('usage.priceUnavailable'))
+          : h('div', { className: 'tacit-pricing-table', role: 'table', 'aria-labelledby': 'tacit-pricing-title' },
+            h('div', { className: 'tacit-pricing-row tacit-pricing-head', role: 'row' },
+              PRICING_COLUMNS.map((column) => h('span', {
+                key: column,
+                className: 'tacit-pricing-cell',
+                role: 'columnheader',
+              }, t('pricing.' + column)))),
+            models.map((model) => PRICING_TIERS.map((tier) => PricingRow(kit, model, tier, priced.models[model][tier])))),
+        h('p', { className: 'tacit-panel-hint' }, t('pricing.tierNow', { tier: t('pricing.' + priced.tierNow) })),
+        h('p', { className: 'tacit-panel-hint' }, t('pricing.schedule')),
+        h('p', { className: 'tacit-panel-hint' }, t('pricing.weekendRule')),
+        h('p', { className: 'tacit-panel-hint' },
+          t('pricing.source') + ': ' + pricingSourceLabel(kit, priced) + ' (' + asOf + ') · ' + when),
+        priced.error.length > 0
+          ? h('p', { className: 'tacit-pricing-error' }, t('pricing.error', { error: priced.error }))
+          : null,
+        h('p', { className: 'tacit-panel-hint' }, t('pricing.formula')),
+        h('p', { className: 'tacit-panel-hint' }, t('pricing.accuracy')),
+        h('div', { className: 'tacit-settings-row' },
+          h('button', {
+            type: 'button',
+            className: 'tacit-btn tacit-btn-sm tacit-pricing-refresh',
+            disabled: refreshing === true,
+            onClick: onRefresh,
+          }, refreshing === true ? t('pricing.refreshing') : t('pricing.refresh'))))
+    }
     // ── CSS (injected once) ────────────────────────────────────────────────
 
     const css = '.tacit-root{box-sizing:border-box;height:100%;color:var(--dsw-alias-label-primary);padding:16px 20px 32px;font-size:13px;overflow-y:auto}'
@@ -1619,6 +3243,7 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       + '.tacit-btn{font:inherit;font-size:12px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:6px;cursor:pointer;padding:4px 10px}.tacit-btn:hover{border-color:var(--dsw-alias-label-primary)}.tacit-btn:disabled{opacity:.55;cursor:default}'
       + '.tacit-btn-primary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:transparent}.tacit-btn-primary:hover{border-color:transparent;filter:brightness(1.1)}'
       + '.tacit-btn-sm{padding:2px 8px;font-size:11px}'
+      + '.tacit-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent)}.tacit-btn-danger:hover{border-color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent)}'
       + '.tacit-row{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:10px 12px;margin-bottom:10px}'
       + '.tacit-row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}.tacit-row-heading{display:flex;align-items:baseline;gap:8px;font-weight:600}.tacit-row-turn{font-size:13px}.tacit-row-time{color:var(--dsw-alias-label-secondary);font-size:11px;font-weight:400}.tacit-row-live{color:var(--dsw-alias-state-success-primary);font-size:11px;font-weight:600}'
       + '.tacit-row-chips{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}.tacit-chip{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-secondary);border-radius:4px;padding:1px 7px;font-size:11px}.tacit-chip-warn{color:var(--dsw-alias-state-warn-primary)}'
@@ -1640,6 +3265,10 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       + '.tacit-settings{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:10px 12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}'
       + '.tacit-settings-title{font-size:12px;font-weight:600}.tacit-settings-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tacit-settings-label{font-size:12px;color:var(--dsw-alias-label-secondary);min-width:150px}'
       + '.tacit-settings-notice{font-size:11px;color:var(--dsw-alias-state-success-primary)}'
+      // The idle live region has to stay mounted to announce, but as an empty
+      // flex item it still claims one of the panel's 10px gaps; -5px a side
+      // gives that back.
+      + '.tacit-panel>.tacit-settings-notice:empty{margin-block:-5px}'
       + '.tacit-select,.tacit-input{font:inherit;font-size:12px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:6px;padding:3px 8px}.tacit-input{width:90px}'
       + '.tacit-improve-btn{font:inherit;font-size:13px;font-weight:500;line-height:20px;color:var(--dsw-alias-label-secondary);background:transparent;border:0;border-radius:24px;cursor:pointer;height:28px;padding:0 8px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}.tacit-improve-btn:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}'
       + '.tacit-check{width:14px;height:14px;accent-color:var(--dsw-alias-brand-primary);flex:none;margin:2px 4px 0 0}'
@@ -1653,12 +3282,15 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       + ''
       + '.tacit-modal-backdrop{z-index:200;background:#00000073;display:flex;justify-content:center;align-items:center;position:fixed;inset:0}'
       + '.tacit-modal-card{box-sizing:border-box;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);width:min(760px,100vw - 48px);max-height:min(84vh,800px);box-shadow:var(--dsw-shadow-lv3,0 12px 32px #0006);color:var(--dsw-alias-label-primary);border-radius:12px;padding:16px 18px 18px;font-size:13px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}'
-      + '.tacit-modal-head{display:flex;align-items:baseline;gap:8px}.tacit-modal-title{font-size:14px;font-weight:600;margin-right:auto}.tacit-modal-close{color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:0;border-radius:6px;padding:2px 8px;font-family:inherit;font-size:18px;line-height:1}.tacit-modal-close:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}'
+      + '.tacit-modal-head{display:flex;align-items:baseline;gap:8px}.tacit-modal-title{font-size:14px;font-weight:600;margin:0 auto 0 0}.tacit-modal-close{color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:0;border-radius:6px;padding:2px 8px;font-family:inherit;font-size:18px;line-height:1}.tacit-modal-close:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}'
       + '.tacit-modal-pending{color:var(--dsw-alias-label-secondary);padding:16px 0;text-align:center}'
+      + '.tacit-modal-unchanged{color:var(--dsw-alias-label-primary);padding:16px 0;text-align:center}'
       + '.tacit-modal-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tacit-modal-col{border:1px solid var(--dsw-alias-border-l1);border-radius:8px;background:var(--dsw-alias-bg-layer-2);padding:8px 10px;min-width:0;max-height:300px;overflow-y:auto}'
       + '.tacit-modal-col-title{font-size:11px;font-weight:600;color:var(--dsw-alias-label-secondary);margin-bottom:6px}'
       + '.tacit-modal-rationale-text{font-size:12px;color:var(--dsw-alias-label-primary);line-height:1.6}.tacit-modal-savings{color:var(--dsw-alias-state-success-primary);font-size:12px;font-weight:600}'
       + '.tacit-modal-actions{display:flex;gap:8px;justify-content:flex-end}'
+      + '.tacit-confirm-body{margin:0;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-primary)}'
+      + '.tacit-confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}'
       + '.tacit-feedback{display:flex;justify-content:center;align-items:center;margin:0 2px 8px;font-size:12px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:6px 10px;gap:8px;transition:opacity .35s ease}.tacit-feedback-fading{opacity:0}'
       + '.tacit-feedback-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tacit-feedback-title{color:var(--dsw-alias-label-secondary)}'
       + '.tacit-feedback-vote{font:inherit;font-size:14px;line-height:1;cursor:pointer;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:999px;padding:3px 8px}.tacit-feedback-vote:hover{border-color:var(--dsw-alias-brand-primary)}.tacit-feedback-vote-active{border-color:var(--dsw-alias-state-warn-primary);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent)}'
@@ -1668,6 +3300,46 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
       + '.tacit-chip-trial{color:var(--dsw-alias-brand-primary)}.tacit-chip-ok{color:var(--dsw-alias-state-success-primary)}.tacit-chip-scope{color:var(--dsw-alias-brand-primary)}.tacit-select{max-width:11rem}'
       + '.tacit-directive{display:flex;align-items:center;gap:8px}.tacit-directive-text{flex:1;min-width:0}.tacit-directive-off .tacit-directive-text{opacity:.5;text-decoration:line-through}.tacit-directive-input{width:min(420px,100%);flex:1}.tacit-preview summary{cursor:pointer;font-size:11px;color:var(--dsw-alias-label-secondary)}.tacit-preview pre{margin-top:6px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:6px;padding:8px 10px}'
       + '.tacit-rules-list{display:flex;flex-direction:column;gap:6px}.tacit-rule{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-left:3px solid var(--dsw-alias-brand-primary);border-radius:6px;padding:6px 10px;font-size:12px;line-height:1.55;color:var(--dsw-alias-label-primary);white-space:pre-wrap;word-break:break-word}'
+      + '.tacit-card{border:1px solid var(--dsw-alias-border-l1);border-radius:8px;background:var(--dsw-alias-bg-layer-1)}'
+      + '.tacit-card-head{width:100%;display:flex;align-items:center;gap:8px;text-align:left;padding:10px 12px;background:none;border:0;cursor:pointer;font:inherit;color:inherit}'
+      + '.tacit-card-head:focus-visible{outline:2px solid var(--dsw-alias-brand-primary)}'
+      + '.tacit-card-title{font-size:13px;font-weight:600}.tacit-card-summary{font-size:11px;color:var(--dsw-alias-label-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}'
+      + '.tacit-card-count{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-secondary);border-radius:4px;padding:1px 7px;font-size:11px;font-variant-numeric:tabular-nums}'
+      + '.tacit-card-chevron{margin-left:auto;color:var(--dsw-alias-label-secondary);font-size:11px}'
+      + '.tacit-card-body{padding:0 12px 12px}'
+      + '.tacit-usage{display:flex;flex-direction:column;gap:10px}'
+      + '.tacit-tiles{display:flex;flex-wrap:wrap;gap:8px}'
+      + '.tacit-tile{flex:1 1 140px;display:flex;flex-direction:column;gap:2px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:8px 10px;min-width:0}'
+      + '.tacit-tile-label{font-size:11px;color:var(--dsw-alias-label-secondary)}.tacit-tile-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.tacit-tile-note{font-size:10px;color:var(--dsw-alias-state-warn-primary)}'
+      + '.tacit-usage-chart{display:flex;flex-direction:column;gap:6px}.tacit-bars{width:100%;height:48px}.tacit-bar{fill:var(--dsw-alias-brand-primary)}'
+      + '.tacit-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}'
+      + '.tacit-series-toggle{display:flex;gap:6px}.tacit-series-toggle button[aria-pressed=true]{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}'
+      + '.tacit-usage-breakdown{display:flex;flex-direction:column;gap:4px}'
+      + '.tacit-breakdown-row{display:grid;grid-template-columns:minmax(0,1.6fr) 4rem 5rem 5rem minmax(60px,1fr);align-items:center;gap:6px;font-size:12px;font-variant-numeric:tabular-nums}'
+      + '.tacit-breakdown-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tacit-breakdown-calls,.tacit-breakdown-tokens,.tacit-breakdown-usd{text-align:right;color:var(--dsw-alias-label-secondary)}'
+      + '.tacit-share-track{background:var(--dsw-alias-bg-layer-2);border-radius:3px;height:6px;overflow:hidden}.tacit-share{background:var(--dsw-alias-brand-primary);border-radius:3px;height:6px}'
+      + '.tacit-warn-bar{display:flex;flex-direction:column;gap:4px;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:6px 10px;font-size:11px}'
+      + '.tacit-warn-label{color:var(--dsw-alias-label-secondary)}.tacit-warn-track{background:var(--dsw-alias-bg-layer-2);border-radius:3px;height:6px;overflow:hidden}.tacit-warn-fill{background:var(--dsw-alias-label-secondary);border-radius:3px;height:6px}'
+      + '.tacit-warn-warn{border-color:var(--dsw-alias-state-warn-primary)}.tacit-warn-warn .tacit-warn-label{color:var(--dsw-alias-state-warn-primary)}.tacit-warn-warn .tacit-warn-fill{background:var(--dsw-alias-state-warn-primary)}'
+      + '.tacit-warn-exceeded{border-color:var(--dsw-alias-state-error-primary)}.tacit-warn-exceeded .tacit-warn-label{color:var(--dsw-alias-state-error-primary)}.tacit-warn-exceeded .tacit-warn-fill{background:var(--dsw-alias-state-error-primary)}'
+      + '.tacit-usage-filters{display:flex;flex-direction:column;gap:6px}.tacit-filter-row{display:flex;flex-wrap:wrap;gap:8px}.tacit-filter{display:flex;flex-direction:column;gap:2px;min-width:0}.tacit-filter-label{font-size:10px;color:var(--dsw-alias-label-secondary)}'
+      + '.tacit-usage-runs{display:flex;flex-direction:column;gap:6px}'
+      + '.tacit-usage-table{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;overflow:hidden}'
+      + '.tacit-usage-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(90px,1.2fr) minmax(80px,1.2fr) minmax(90px,1.2fr) 5rem 4rem 5rem 5rem;gap:6px;align-items:center;padding:5px 8px;border-top:1px solid var(--dsw-alias-border-l1);font-size:11px;font-variant-numeric:tabular-nums}'
+      + '.tacit-usage-table>.tacit-usage-row:first-child{border-top:0}.tacit-usage-head{color:var(--dsw-alias-label-secondary);font-weight:600;background:var(--dsw-alias-bg-layer-2)}'
+      + '.tacit-usage-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}'
+      + '.tacit-run-toggle{width:100%;text-align:left}'
+      + '.tacit-usage-attempts{border-top:1px dashed var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);padding:6px 8px}.tacit-usage-attempts-cell{display:flex;flex-direction:column;gap:4px}'
+      + '.tacit-attempt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;color:var(--dsw-alias-label-primary)}.tacit-attempt-meta,.tacit-attempt-tokens{color:var(--dsw-alias-label-secondary)}.tacit-attempt-usd{margin-left:auto;font-variant-numeric:tabular-nums}'
+      + '.tacit-status-success,.tacit-status-ok{color:var(--dsw-alias-state-success-primary)}.tacit-status-partial,.tacit-status-unmetered{color:var(--dsw-alias-state-warn-primary)}.tacit-status-failed{color:var(--dsw-alias-state-error-primary)}.tacit-status-running{color:var(--dsw-alias-label-secondary)}'
+      + '.tacit-pager{display:flex;align-items:center;gap:8px}.tacit-pager-label{font-size:11px;color:var(--dsw-alias-label-secondary)}'
+      + '.tacit-pricing{display:flex;flex-direction:column;gap:8px}'
+      + '.tacit-pricing-table{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;overflow:hidden}'
+      + '.tacit-pricing-row{display:grid;grid-template-columns:minmax(120px,1.6fr) 6rem repeat(3,5rem) minmax(90px,1fr);gap:6px;align-items:center;padding:5px 8px;border-top:1px solid var(--dsw-alias-border-l1);font-size:11px;font-variant-numeric:tabular-nums}'
+      + '.tacit-pricing-table>.tacit-pricing-row:first-child{border-top:0}.tacit-pricing-head{color:var(--dsw-alias-label-secondary);font-weight:600;background:var(--dsw-alias-bg-layer-2)}'
+      + '.tacit-pricing-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tacit-pricing-model{font-weight:600}'
+      + '.tacit-pricing-error{font-size:11px;color:var(--dsw-alias-state-warn-primary);line-height:1.5}'
+      + '@media (max-width:640px){.tacit-settings-label{min-width:0;flex-basis:100%}.tacit-modal-cols{grid-template-columns:1fr}.tacit-usage-row{display:flex;flex-direction:column}.tacit-usage-cell{white-space:normal}.tacit-pricing-row{display:flex;flex-direction:column}.tacit-pricing-cell{white-space:normal}.tacit-tile{flex-basis:45%}.tacit-breakdown-row{grid-template-columns:minmax(0,1fr) 4rem 5rem}}'
 
     function injectCss() {
       const tagId = 'dsh-tacit/styles.css'
@@ -1685,6 +3357,9 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
     function apply(ctx) {
       ctx.effect(() => ctx.locale.register(NS, { zh: DICT_ZH, en: DICT_EN }), 'dsh-tacit: dictionaries')
       const t = ctx.locale.bind(NS)
+      // Store actions write result notices themselves — they hold the measured
+      // figures — so the one bound translator is handed to them here.
+      setTranslator(t)
       const kit = makeKit(t)
       injectCss()
 
@@ -1752,6 +3427,25 @@ if (typeof window === 'undefined' || window.__ModuleLoader__ === undefined || ty
         closeFeedback,
         fadeFeedback,
         rootStore,
+        toggleSection,
+        setRootNotice,
+        fetchUsage,
+        setUsageFilter,
+        toggleUsageRun,
+        startUsagePolling,
+        stopUsagePolling,
+        setUsageSeries,
+        refreshPricing,
+        openConfirm,
+        closeConfirm,
+        fetchBootstrapPreview,
+        clearAllRoot,
+        clearUsageHistory,
+        runNotice,
+        fmtRate,
+        ConfirmDialog,
+        UsageCard,
+        PricingCard,
       },
     }
   },