@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/status-line/context-usage.ts

@@ -5,7 +5,14 @@ import type { Tool as AiTool, Model } from "@oh-my-pi/pi-ai";
 import { renderToolExamples } from "@oh-my-pi/pi-ai/dialect";
 import { toolWireSchema } from "@oh-my-pi/pi-ai/utils/schema";
 import { formatNumber } from "@oh-my-pi/pi-utils";
-import type { Theme } from "../theme";
+import type { Theme, ThemeColor } from "../theme";
+import { Container } from "../tui";
+import { Text } from "../components/text";
+import { Spacer } from "../components/spacer";
+import { DynamicBorder } from "../chrome/dynamic-border";
+import type { TspSpan, TspText } from "@oh-my-pi/pi-wire";
+import type { DescribeContext, NativeNode } from "../native/node";
+import { card, col, node, row, span, text } from "../native/describe";
 
 interface ContextSkill {
 	readonly name: string;
@@ -92,6 +99,8 @@ export interface ContextBreakdown {
 	usedTokens: number;
 	autoCompactBufferTokens: number;
 	freeTokens: number;
+	/** Where auto-compaction fires, in tokens; undefined when compaction is off. */
+	thresholdTokens?: number;
 	/** Estimated snapcompact wire savings; set when requested and a snapcompact.* setting is enabled. */
 	snapcompact?: ContextSavingsEstimate;
 }
@@ -459,10 +468,12 @@ export function computeContextBreakdown(session: ContextUsageSession, options: C
 	];
 
 	let autoCompactBufferTokens = 0;
+	let thresholdTokens: number | undefined;
 	if (contextWindow > 0) {
 		const compactionSettings = options.compaction;
 		if (compactionSettings.enabled && compactionSettings.strategy !== "off") {
 			const threshold = resolveThresholdTokens(contextWindow, compactionSettings);
+			if (threshold > 0 && threshold <= contextWindow) thresholdTokens = threshold;
 			autoCompactBufferTokens = Math.max(0, contextWindow - threshold);
 		} else {
 			autoCompactBufferTokens = 0;
@@ -483,6 +494,7 @@ export function computeContextBreakdown(session: ContextUsageSession, options: C
 		usedTokens,
 		autoCompactBufferTokens,
 		freeTokens,
+		thresholdTokens,
 		snapcompact: options.snapcompact,
 	};
 }
@@ -566,63 +578,91 @@ function percentString(part: number, whole: number, fractionDigits = 1): string
 	return `${pct.toFixed(fractionDigits)}%`;
 }
 
-function buildLegendLines(breakdown: ContextBreakdown, theme: Theme): string[] {
-	const lines: string[] = [];
+/** One styled run of a legend line: bold (`strong`), a theme color, or plain. */
+interface LegendPart {
+	t: string;
+	s?: ThemeColor | "strong";
+}
+
+/** Legend lines as styled runs, shared by the ANSI panel and the native description. */
+function buildLegendParts(breakdown: ContextBreakdown): LegendPart[][] {
+	const lines: LegendPart[][] = [];
 	const { model, contextWindow, categories, usedTokens, autoCompactBufferTokens, freeTokens } = breakdown;
 
 	const modelName = model?.name ?? model?.id ?? "no model";
 	const modelId = model?.id ?? "unknown";
 	const windowLabel = formatNumber(contextWindow).toLowerCase();
 
-	lines.push(theme.bold(`${modelName}`) + theme.fg("dim", ` (${windowLabel} context)`));
-	lines.push(theme.fg("muted", `${modelId}[${windowLabel}]`));
-	lines.push(
-		`${theme.bold(formatNumber(usedTokens))}${theme.fg("dim", `/${windowLabel} tokens`)}` +
-			theme.fg("muted", ` (${percentString(usedTokens, contextWindow)})`),
-	);
-	lines.push("");
-	lines.push(theme.fg("muted", "Estimated usage by category"));
+	lines.push([
+		{ t: `${modelName}`, s: "strong" },
+		{ t: ` (${windowLabel} context)`, s: "dim" },
+	]);
+	lines.push([{ t: `${modelId}[${windowLabel}]`, s: "muted" }]);
+	lines.push([
+		{ t: formatNumber(usedTokens), s: "strong" },
+		{ t: `/${windowLabel} tokens`, s: "dim" },
+		{ t: ` (${percentString(usedTokens, contextWindow)})`, s: "muted" },
+	]);
+	lines.push([]);
+	lines.push([{ t: "Estimated usage by category", s: "muted" }]);
 
 	for (const category of categories) {
-		const dot = theme.fg(category.color, category.glyph);
-		const label = category.label;
-		const tokens = formatNumber(category.tokens);
 		const pct = percentString(category.tokens, contextWindow);
-		lines.push(`${dot} ${label}: ${theme.bold(tokens)} ${theme.fg("dim", `tokens (${pct})`)}`);
+		lines.push([
+			{ t: category.glyph, s: category.color },
+			{ t: ` ${category.label}: ` },
+			{ t: formatNumber(category.tokens), s: "strong" },
+			{ t: " " },
+			{ t: `tokens (${pct})`, s: "dim" },
+		]);
 	}
 
-	const freeDot = theme.fg("dim", CELL_FREE);
-	lines.push(
-		`${freeDot} Free space: ${theme.bold(formatNumber(freeTokens))} ${theme.fg("dim", `(${percentString(freeTokens, contextWindow)})`)}`,
-	);
+	lines.push([
+		{ t: CELL_FREE, s: "dim" },
+		{ t: " Free space: " },
+		{ t: formatNumber(freeTokens), s: "strong" },
+		{ t: " " },
+		{ t: `(${percentString(freeTokens, contextWindow)})`, s: "dim" },
+	]);
 
 	if (autoCompactBufferTokens > 0) {
-		const bufferDot = theme.fg("warning", CELL_BUFFER);
-		lines.push(
-			`${bufferDot} Autocompact buffer: ${theme.bold(formatNumber(autoCompactBufferTokens))} ${theme.fg(
-				"dim",
-				`tokens (${percentString(autoCompactBufferTokens, contextWindow)})`,
-			)}`,
-		);
+		lines.push([
+			{ t: CELL_BUFFER, s: "warning" },
+			{ t: " Autocompact buffer: " },
+			{ t: formatNumber(autoCompactBufferTokens), s: "strong" },
+			{ t: " " },
+			{ t: `tokens (${percentString(autoCompactBufferTokens, contextWindow)})`, s: "dim" },
+		]);
 	}
 
+	const snap = buildSnapcompactParts(breakdown);
+	if (snap.length > 0) lines.push([], ...snap);
+	return lines;
+}
+
+/** Snapcompact savings lines of the legend; empty when no snapcompact setting is on. */
+function buildSnapcompactParts(breakdown: ContextBreakdown): LegendPart[][] {
+	const lines: LegendPart[][] = [];
+	const { usedTokens } = breakdown;
 	const snap = breakdown.snapcompact;
 	if (snap) {
-		lines.push("");
 		if (!snap.visionCapable) {
-			lines.push(theme.fg("muted", "Snapcompact: inactive (model has no image input)"));
+			lines.push([{ t: "Snapcompact: inactive (model has no image input)", s: "muted" }]);
 		} else {
-			lines.push(theme.fg("muted", "Snapcompact (estimated wire savings)"));
+			lines.push([{ t: "Snapcompact (estimated wire savings)", s: "muted" }]);
 			if (snap.systemPrompt) {
 				const sp = snap.systemPrompt;
+				const scope = sp.scope === "agents-md" ? "AGENTS.md" : "all";
 				if (sp.applied) {
-					lines.push(
-						`  System prompt (${sp.scope === "agents-md" ? "AGENTS.md" : "all"}): saves ${theme.bold(`~${formatNumber(sp.savedTokens)}`)} ` +
-							theme.fg(
-								"dim",
-								`(${formatNumber(sp.textTokens)} text → ${sp.frames} frame${sp.frames === 1 ? "" : "s"} ≈ ${formatNumber(sp.imageTokens)})`,
-							),
-					);
+					lines.push([
+						{ t: `  System prompt (${scope}): saves ` },
+						{ t: `~${formatNumber(sp.savedTokens)}`, s: "strong" },
+						{ t: " " },
+						{
+							t: `(${formatNumber(sp.textTokens)} text → ${sp.frames} frame${sp.frames === 1 ? "" : "s"} ≈ ${formatNumber(sp.imageTokens)})`,
+							s: "dim",
+						},
+					]);
 				} else {
 					const reason =
 						sp.reason === "budget"
@@ -630,29 +670,32 @@ function buildLegendLines(breakdown: ContextBreakdown, theme: Theme): string[] {
 							: sp.reason === "empty"
 								? "nothing to image"
 								: "frames would not save tokens";
-					lines.push(
-						`  System prompt (${sp.scope === "agents-md" ? "AGENTS.md" : "all"}): ${theme.fg("dim", `stays text (${reason})`)}`,
-					);
+					lines.push([{ t: `  System prompt (${scope}): ` }, { t: `stays text (${reason})`, s: "dim" }]);
 				}
 			}
 			if (snap.toolResults) {
 				const tr = snap.toolResults;
 				if (tr.swapped > 0) {
-					lines.push(
-						`  Tool results: saves ${theme.bold(`~${formatNumber(tr.savedTokens)}`)} ` +
-							theme.fg(
-								"dim",
-								`(${tr.swapped}/${tr.total} imaged, ${formatNumber(tr.textTokens)} text → ${tr.frames} frames ≈ ${formatNumber(tr.imageTokens)})`,
-							),
-					);
+					lines.push([
+						{ t: "  Tool results: saves " },
+						{ t: `~${formatNumber(tr.savedTokens)}`, s: "strong" },
+						{ t: " " },
+						{
+							t: `(${tr.swapped}/${tr.total} imaged, ${formatNumber(tr.textTokens)} text → ${tr.frames} frames ≈ ${formatNumber(tr.imageTokens)})`,
+							s: "dim",
+						},
+					]);
 				} else {
-					lines.push(`  Tool results: ${theme.fg("dim", `none imaged (${tr.total} in history)`)}`);
+					lines.push([{ t: "  Tool results: " }, { t: `none imaged (${tr.total} in history)`, s: "dim" }]);
 				}
 			}
 			if (snap.savedTokens > 0) {
-				lines.push(
-					`  Next request: ${theme.bold(`~${formatNumber(Math.max(0, usedTokens - snap.savedTokens))}`)} ${theme.fg("dim", "tokens on the wire")}`,
-				);
+				lines.push([
+					{ t: "  Next request: " },
+					{ t: `~${formatNumber(Math.max(0, usedTokens - snap.savedTokens))}`, s: "strong" },
+					{ t: " " },
+					{ t: "tokens on the wire", s: "dim" },
+				]);
 			}
 		}
 	}
@@ -660,6 +703,192 @@ function buildLegendLines(breakdown: ContextBreakdown, theme: Theme): string[] {
 	return lines;
 }
 
+function buildLegendLines(breakdown: ContextBreakdown, theme: Theme): string[] {
+	return buildLegendParts(breakdown).map(line => {
+		let out = "";
+		for (const part of line) {
+			out += part.s === "strong" ? theme.bold(part.t) : part.s ? theme.fg(part.s, part.t) : part.t;
+		}
+		return out;
+	});
+}
+
+/** Stacked meter parts in grid order: the categories, free space as the empty track, then the hatched buffer. */
+function contextMeterParts(
+	breakdown: ContextBreakdown,
+): { value: number; token?: string; label?: string; hatch?: boolean }[] {
+	const window = breakdown.contextWindow;
+	const parts: { value: number; token?: string; label?: string; hatch?: boolean }[] = breakdown.categories
+		.filter(category => category.tokens > 0)
+		.map(category => ({
+			value: category.tokens / window,
+			token: category.color,
+			label: `${category.label} · ${formatNumber(category.tokens)} tokens (${percentString(category.tokens, window)})`,
+		}));
+	parts.push({
+		value: breakdown.freeTokens / window,
+		token: "track",
+		label: `Free space · ${formatNumber(breakdown.freeTokens)} tokens (${percentString(breakdown.freeTokens, window)})`,
+	});
+	if (breakdown.autoCompactBufferTokens > 0) {
+		parts.push({
+			value: breakdown.autoCompactBufferTokens / window,
+			token: "warning",
+			hatch: true,
+			label: `Autocompact buffer · ${formatNumber(breakdown.autoCompactBufferTokens)} tokens (${percentString(breakdown.autoCompactBufferTokens, window)})`,
+		});
+	}
+	return parts;
+}
+
+/**
+ * The `/context` frame for terminals that draw `meter`: a blocks meter
+ * beside a legend `kv` (swatch · label → tokens · %), then a full-width bar
+ * of the same parts marked where auto-compaction fires, then the snapcompact
+ * estimate when one is on. The head names the model and window once.
+ */
+function describeContextFrame(breakdown: ContextBreakdown): NativeNode {
+	const { contextWindow: window, usedTokens, freeTokens, autoCompactBufferTokens, thresholdTokens } = breakdown;
+	const parts = contextMeterParts(breakdown);
+	const used = Math.min(1, usedTokens / window);
+	const swatch = (token: string, glyph = "■"): TspSpan => span(glyph, token);
+	const figure = (tokens: number): TspText => [
+		span(formatNumber(tokens)),
+		span(`  ${percentString(tokens, window)}`, "dim"),
+	];
+	const items: { k: TspText; v: TspText }[] = [
+		{
+			k: [span("Used", "strong")],
+			v: [
+				span(`${formatNumber(usedTokens)} / ${formatNumber(window).toLowerCase()}`),
+				span(`  ${percentString(usedTokens, window)}`, "dim"),
+			],
+		},
+	];
+	for (const category of breakdown.categories) {
+		items.push({ k: [swatch(category.color), span(` ${category.label}`)], v: figure(category.tokens) });
+	}
+	items.push({ k: [swatch("dim", "□"), span(" Free space")], v: figure(freeTokens) });
+	if (autoCompactBufferTokens > 0) {
+		items.push({ k: [swatch("warning", "▨"), span(" Autocompact buffer")], v: figure(autoCompactBufferTokens) });
+	}
+	const marks =
+		thresholdTokens !== undefined
+			? [
+					{
+						at: thresholdTokens / window,
+						tone: "warning" as const,
+						title: `Auto-compaction at ${percentString(thresholdTokens, window, 0)} (${formatNumber(thresholdTokens)} tokens)`,
+					},
+				]
+			: undefined;
+	const children = [
+		node(
+			"row",
+			{ role: "omp.context.body" },
+			[
+				node("meter", { value: used, style: "blocks", size: "lg", parts, aria: "Context usage by category" }),
+				node("kv", { items, layout: "grid", role: "omp.context.legend" }),
+			],
+			"body",
+		),
+		node(
+			"meter",
+			{ value: used, style: "bar", size: "lg", parts, ...(marks ? { marks } : {}), grow: 1 },
+			undefined,
+			"bar",
+		),
+	];
+	const snap = buildSnapcompactParts(breakdown);
+	if (snap.length > 0) {
+		children.push(
+			node(
+				"section",
+				{},
+				snap.map((line, index) => node("text", { spans: line, wrap: "word" }, undefined, `snap-${index}`)),
+				"snapcompact",
+			),
+		);
+	}
+	const modelName = breakdown.model?.name ?? breakdown.model?.id ?? "no model";
+	return card(
+		{
+			role: "omp.context",
+			head: [
+				span("Context", "strong"),
+				span(` · ${modelName}`, "muted"),
+				span(` · ${formatNumber(window).toLowerCase()}`, "dim"),
+			],
+		},
+		children,
+	);
+}
+
+/**
+ * Native context-usage panel for terminals without `meter`: the cell grid as
+ * unwrapped styled rows beside the legend. The terminal places the legend
+ * beside the grid, or below it when narrow.
+ */
+export function describeContextUsage(breakdown: ContextBreakdown): NativeNode {
+	if (breakdown.contextWindow <= 0) {
+		return text([{ t: "Context usage is unavailable: no model is selected for this session.", s: "muted" }]);
+	}
+	const cells = planCells(breakdown);
+	const grid: NativeNode[] = [];
+	for (let gridRow = 0; gridRow < GRID_ROWS; gridRow++) {
+		const spans: TspSpan[] = [];
+		for (let gridCol = 0; gridCol < GRID_COLS; gridCol++) {
+			const cell = cells[gridRow * GRID_COLS + gridCol]!;
+			spans.push({ t: gridCol === 0 ? cell.glyph : ` ${cell.glyph}`, s: cell.color });
+		}
+		grid.push(node("text", { spans, wrap: "none" }, undefined, `row-${gridRow}`));
+	}
+	const legend = buildLegendParts(breakdown).map((line, index) =>
+		node("text", { spans: line.length > 0 ? line : [{ t: " " }] }, undefined, `legend-${index}`),
+	);
+	return row([col(grid), col(legend)], {
+		gap: "lg",
+		wrap: true,
+		role: "omp.context.usage",
+	});
+}
+
+/**
+ * The `/context` transcript block: ANSI renders the titled cell grid between
+ * rules; natively it is one frame, drawn with `meter`s where the terminal
+ * has them and as the glyph grid otherwise.
+ */
+export class ContextUsageView extends Container {
+	readonly #breakdown: ContextBreakdown;
+	#native: { meter: boolean; node: NativeNode } | undefined;
+
+	constructor(breakdown: ContextBreakdown, theme: Theme) {
+		super();
+		this.#breakdown = breakdown;
+		this.addChild(new DynamicBorder());
+		this.addChild(new Text(theme.bold(theme.fg("accent", "Context Usage")), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(renderContextUsage(breakdown, theme), 1, 0));
+		this.addChild(new DynamicBorder());
+	}
+
+	override describe(cx: DescribeContext): NativeNode {
+		const meter = cx.supports("meter");
+		if (this.#native?.meter === meter) return this.#native.node;
+		const breakdown = this.#breakdown;
+		const described =
+			breakdown.contextWindow <= 0
+				? describeContextUsage(breakdown)
+				: meter
+					? describeContextFrame(breakdown)
+					: card({ role: "omp.context", head: [span("Context usage", "strong")] }, [
+							describeContextUsage(breakdown),
+						]);
+		this.#native = { meter, node: described };
+		return described;
+	}
+}
+
 /**
  * Render a colorful context-usage panel as ANSI text. Output is a series of
  * lines pairing the grid (left) with the legend (right).

package/src/status-line/footer.ts

@@ -9,7 +9,15 @@ import { shortenPath } from "../render/render-utils";
 import { sanitizeStatusText } from "../chrome/shared";
 import { formatMetric } from "../components/metric";
 import { formatBillingSummary } from "./metrics";
-import { formatContextUsage, getContextUsageLevel, getContextUsageThemeColor } from "../chrome/context-thresholds";
+import {
+	formatContextUsage,
+	getContextUsageLevel,
+	getContextUsageThemeColor,
+	getContextUsageTone,
+} from "../chrome/context-thresholds";
+import type { TspProps, TspSpan } from "@oh-my-pi/pi-wire";
+import type { NativeNode } from "../native/node";
+import { col, node, span } from "../native/describe";
 
 /**
  * Footer component that shows pwd, token stats, and context usage
@@ -23,6 +31,7 @@ export class FooterComponent implements Component {
 	#disposed = false;
 	#autoCompactEnabled: boolean = true;
 	#extensionStatuses: Map<string, string> = new Map();
+	#nativeMemo: { node: NativeNode; fingerprint: string } | undefined;
 
 	constructor(
 		private readonly session: FooterSession,
@@ -159,6 +168,90 @@ export class FooterComponent implements Component {
 		return this.#cachedBranch;
 	}
 
+	/**
+	 * Native footer: a `status` bar (path and branch, usage counters, billing
+	 * and context on the left, model on the right) plus the extension statuses.
+	 * Rebuilt per call from cheap session reads; the node identity holds while
+	 * the description is unchanged.
+	 */
+	describe(): NativeNode {
+		const state = this.session.state;
+		let input = 0;
+		let output = 0;
+		let cacheRead = 0;
+		let cacheWrite = 0;
+		let cost = 0;
+		let premiumRequests = 0;
+		for (const entry of this.session.sessionManager.getEntries()) {
+			if (entry.type === "message" && entry.message?.role === "assistant") {
+				input += entry.message.usage.input;
+				output += entry.message.usage.output;
+				cacheRead += entry.message.usage.cacheRead;
+				cacheWrite += entry.message.usage.cacheWrite;
+				cost += entry.message.usage.cost.total;
+				premiumRequests += entry.message.usage.premiumRequests ?? 0;
+			}
+		}
+		const segs: NativeNode[] = [];
+		const seg = (key: string, props: TspProps<"seg">): void => {
+			segs.push(node("seg", { role: `omp.footer.${key}`, ...props }, undefined, key));
+		};
+		const pathSpans: TspSpan[] = [span(shortenPath(getProjectDir()), "path dim")];
+		const branch = this.#getCurrentBranch();
+		if (branch) pathSpans.push(span(` (${branch})`, "dim"));
+		seg("path", { side: "left", priority: 6, icon: "folder", spans: pathSpans });
+		const counters: [string, string, number][] = [
+			["input", "↑", input],
+			["output", "↓", output],
+			["cache-read", "R", cacheRead],
+			["cache-write", "W", cacheWrite],
+		];
+		for (const [key, glyph, amount] of counters) {
+			if (amount) seg(key, { side: "left", priority: 1, spans: [span(`${glyph}${formatNumber(amount)}`, "dim")] });
+		}
+		const usingSubscription = state.model ? this.session.modelRegistry.isUsingOAuth(state.model) : false;
+		const billing = formatBillingSummary({ cost, usingSubscription, premiumRequests, fractionDigits: 3 }, theme);
+		if (billing) seg("cost", { side: "left", priority: 3, spans: [span(billing, "dim")] });
+		const contextUsage = this.session.getContextUsage();
+		const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
+		const contextPercent = contextWindow > 0 ? (contextUsage?.percent ?? 0) : null;
+		const level =
+			contextUsage && contextPercent !== null ? getContextUsageLevel(contextPercent, contextWindow) : "normal";
+		const contextSpans: TspSpan[] = [
+			span(
+				formatContextUsage(contextPercent, contextWindow, contextUsage?.tokens ?? 0),
+				getContextUsageThemeColor(level),
+			),
+		];
+		if (this.#autoCompactEnabled && theme.icon.auto) contextSpans.push(span(` ${theme.icon.auto}`, "dim"));
+		const contextProps: TspProps<"seg"> = { side: "left", priority: 4, icon: "context", spans: contextSpans };
+		const tone = getContextUsageTone(level);
+		if (tone) contextProps.tone = tone;
+		seg("context", contextProps);
+		let model = state.model?.id || "no-model";
+		if (state.model?.thinking) {
+			const level = this.session.isAutoThinking
+				? (this.session.autoResolvedThinkingLevel() ?? `${theme.thinking.autoPending} auto`)
+				: (state.thinkingLevel ?? ThinkingLevel.Off);
+			model += ` • ${level}`;
+		}
+		seg("model", { side: "right", priority: 5, icon: "model", spans: [span(model, "dim")] });
+		const bar = node("status", { role: "omp.footer" }, segs, "bar");
+		const children: NativeNode[] = [bar];
+		if (this.#extensionStatuses.size > 0) {
+			const statuses = Array.from(this.#extensionStatuses.entries())
+				.sort(([a], [b]) => a.localeCompare(b))
+				.map(([, value]) => sanitizeStatusText(value))
+				.join(" ");
+			children.push(node("text", { text: statuses, wrap: "none", role: "omp.footer.extensions" }, undefined, "ext"));
+		}
+		const built = children.length === 1 ? bar : col(children, { role: "omp.footer.panel" });
+		const fingerprint = JSON.stringify(built);
+		if (this.#nativeMemo?.fingerprint === fingerprint) return this.#nativeMemo.node;
+		this.#nativeMemo = { node: built, fingerprint };
+		return built;
+	}
+
 	render(width: number): readonly string[] {
 		const state = this.session.state;
 

package/src/status-line/metrics.ts

@@ -1,6 +1,8 @@
-import { formatNumber } from "@oh-my-pi/pi-utils";
+import { formatNumber, normalizePremiumRequests } from "@oh-my-pi/pi-utils";
 import type { Theme } from "../theme";
 
+export { normalizePremiumRequests } from "@oh-my-pi/pi-utils";
+
 /** Inputs whose differences are intentionally preserved between current status segments and the legacy footer. */
 export interface BillingSummaryOptions {
 	readonly cost: number;
@@ -14,11 +16,6 @@ export interface BillingSummaryOptions {
 	};
 }
 
-/** Round premium-request counters without losing legitimate fractional requests. */
-export function normalizePremiumRequests(value: number): number {
-	return Math.round((value + Number.EPSILON) * 100) / 100;
-}
-
 function formatSpend(amount: number, usingSubscription: boolean, fractionDigits: number, uiTheme: Theme): string {
 	const formatted = amount.toFixed(fractionDigits);
 	if (!usingSubscription) return `$${formatted}`;