The stats bar: context + cost beneath the composer, per-turn detail

One quiet row beneath the composer/question shell (not flush to the
screen bottom; static height, outside the morphing shell):

- LEFT: context window + session cost, clickable → per-turn detail
  popover (context, total, unpriced count, one row per turn with
  model/steps/cost). All folds from core/prices.ts — sessionCost,
  contextWindow, turnCost — no cost math in components.
- RIGHT: model + "Thinking —" — a placeholder slot for the coming
  model/thinking-level CONTROL (later work with its contract changes);
  display-only today, model read from the last turn's usage,
  pretty-printed (Glm 5.3 Flash).
- Data: the record's turns log, seeded on mount, refreshed when the
  local stream settles, kept fresh by the existing record re-syncs.
  No turns yet → "—" everywhere; unpriceable turns never fold into a
  fake $0 (the doctrine).
- formatUsd/formatTokens moved to components/usage-format.ts (shared
  with the activity dock); prettyModel joins them, pure + tested.
This commit is contained in:
amosblomqvist
2026-09-11 03:15:55 +03:00
parent e22f0bddb4
commit df58bb87f2
6 changed files with 240 additions and 15 deletions
+28
View File
@@ -0,0 +1,28 @@
/**
* Money/token presentation helpers (wave-4 observability UI) — shared by the
* activity dock and the stats bar. Pure; exported for tests.
*/
/** USD for cent-scale money: >= $1 keeps two decimals, smaller keeps four. */
export function formatUsd(c: number): string {
return c >= 1 ? `$${c.toFixed(2)}` : `$${c.toFixed(4)}`;
}
/** 38000 → "38k", 1234567 → "1.2M" — trimmed, never "38.0k". */
export function formatTokens(n: number): string {
if (n >= 1e6) return `${+(n / 1e6).toFixed(1)}M`;
if (n >= 1e3) return `${+(n / 1e3).toFixed(1)}k`;
return String(n);
}
/**
* "z-ai/glm-5.3-flash" → "Glm 5.3 Flash" — vendor prefix dropped, dashes to
* spaces, capitalized; a trailing all-digit segment (OpenRouter's date
* suffix, "qwen3.8-max-0902") is dropped. Quiet-chip friendly.
*/
export function prettyModel(id: string): string {
const short = id.includes("/") ? id.slice(id.lastIndexOf("/") + 1) : id;
const parts = short.split("-");
const trimmed = /^\d+$/.test(parts[parts.length - 1] ?? "") ? parts.slice(0, -1) : parts;
return trimmed.map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
}