@danypops/pi-jittor 0.2.1 → 0.3.0

package/extension/src/{usage.ts → observability/usage.ts}

@@ -16,8 +16,9 @@ import {
 } from "@danypops/jittor";
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import type { UsageBudgetControl } from "./settings.ts";
-import type { JittorPanelClient } from "./tui.ts";
+import { HistoryChart, type HistoryChartTheme, ProgressBar, type TextMeasure } from "malevich-tui-components";
+import type { UsageBudgetControl } from "../settings.ts";
+import type { JittorPanelClient } from "./status.ts";
 
 type UsageAction = "period-prev" | "period-next" | "view-next" | "refresh" | "close";
 type UsageColor =
@@ -60,10 +61,9 @@ export interface UsageTheme {
  * perceptual separation between adjacent categories.
  *
  * Terminal foreground color is a single channel with a hard ceiling on how many hues stay mutually
- * distinguishable (most qualitative-palette guidance caps around 8–12). Once the hue palette is
- * exhausted, seriesStyle adds bold as a second, independent visual channel before any exact
- * color+weight combination repeats — a standard visualization technique (encode extra categories
- * on an additional channel rather than silently reusing an indistinguishable color).
+ * distinguishable (most qualitative-palette guidance caps around 8–12). seriesStyle derives both a
+ * hue and optional bold weight from stable identity bits, using a second visual channel to reduce
+ * collisions without allowing ranking or render order to change a model's appearance.
  */
 const SERIES_HUES: UsageColor[] = [
 	"accent",
@@ -77,15 +77,23 @@ const SERIES_HUES: UsageColor[] = [
 	"syntaxOperator",
 ];
 
-/** Returns a style function for the Nth series: cycles hue, then adds bold once the palette wraps. */
-function seriesStyle(index: number, theme: UsageTheme): (text: string) => string {
-	const hue = SERIES_HUES[index % SERIES_HUES.length]!;
-	const useBold = Math.floor(index / SERIES_HUES.length) % 2 === 1;
+/**
+ * Stable FNV-1a identity hash. Series ordering changes with totals and selected period, so assigning
+ * colors by array index makes a model change color whenever another model overtakes it. Deriving
+ * both visual channels from its provider/model key keeps that identity fixed across token and cost
+ * graphics, period switches, refreshes, and extension restarts.
+ */
+function seriesStyle(identity: string, theme: UsageTheme): (text: string) => string {
+	let hash = 0x811c9dc5;
+	for (let index = 0; index < identity.length; index += 1) {
+		hash ^= identity.charCodeAt(index);
+		hash = Math.imul(hash, 0x01000193) >>> 0;
+	}
+	const hue = SERIES_HUES[hash % SERIES_HUES.length]!;
+	const useBold = Math.floor(hash / SERIES_HUES.length) % 2 === 1;
 	return (text: string) => (useBold ? theme.bold(theme.fg(hue, text)) : theme.fg(hue, text));
 }
 
-const PARTIAL_BLOCKS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
-
 function compact(value: number): string {
 	if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(value >= 10_000_000_000 ? 0 : 1)}B`;
 	if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1)}M`;
@@ -93,58 +101,6 @@ function compact(value: number): string {
 	return String(Math.round(value));
 }
 
-interface RenderableSeries {
-	key: string;
-	provider: string;
-	model: string;
-	total: number;
-}
-interface RenderableBucket {
-	start: number;
-	end: number;
-	total: number;
-	series: Record<string, number>;
-}
-interface RenderableChart {
-	period: UsagePeriod;
-	start: number;
-	end: number;
-	buckets: RenderableBucket[];
-	series: RenderableSeries[];
-	total: number;
-	truncated: boolean;
-}
-
-function mergeBuckets(buckets: RenderableBucket[], maximum: number): RenderableBucket[] {
-	if (buckets.length <= maximum) return buckets;
-	const result: RenderableBucket[] = [];
-	for (let index = 0; index < maximum; index += 1) {
-		const from = Math.floor((index * buckets.length) / maximum);
-		const to = Math.max(from + 1, Math.floor(((index + 1) * buckets.length) / maximum));
-		const selected = buckets.slice(from, to);
-		const series: Record<string, number> = {};
-		for (const bucket of selected) {
-			for (const [key, value] of Object.entries(bucket.series)) series[key] = (series[key] ?? 0) + value;
-		}
-		result.push({
-			start: selected[0]!.start,
-			end: selected[selected.length - 1]!.end,
-			total: selected.reduce((sum, bucket) => sum + bucket.total, 0),
-			series,
-		});
-	}
-	return result;
-}
-
-function seriesAt(bucket: RenderableBucket, chart: RenderableChart, valueHeight: number): number {
-	let cumulative = 0;
-	for (let index = 0; index < chart.series.length; index += 1) {
-		cumulative += bucket.series[chart.series[index]!.key] ?? 0;
-		if (valueHeight <= cumulative) return index;
-	}
-	return Math.max(0, chart.series.length - 1);
-}
-
 /** Compact USD formatter: full cents below $1k, then the same k/M suffix convention as compact(). */
 function formatUsd(value: number): string {
 	const magnitude = Math.abs(value);
@@ -160,18 +116,6 @@ function formatPeriodPoint(value: number, period: UsagePeriod): string {
 	return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
-function axisLabels(start: number, end: number, period: UsagePeriod, width: number): string {
-	const labels = [formatPeriodPoint(start, period), formatPeriodPoint(start + (end - start) / 2, period), formatPeriodPoint(end, period)];
-	const positions = [0, Math.max(0, Math.floor((width - labels[1]!.length) / 2)), Math.max(0, width - labels[2]!.length)];
-	const characters = Array.from({ length: width }, () => " ");
-	for (let labelIndex = 0; labelIndex < labels.length; labelIndex += 1) {
-		for (let index = 0; index < labels[labelIndex]!.length && positions[labelIndex]! + index < width; index += 1) {
-			characters[positions[labelIndex]! + index] = labels[labelIndex]![index]!;
-		}
-	}
-	return characters.join("");
-}
-
 function displayIdentity(value: string): string {
 	return value
 		.replace(/[\r\n\t]/g, " ")
@@ -184,110 +128,76 @@ function plainTheme(): UsageTheme {
 	return { fg: (_color, text) => text, bold: (text) => text };
 }
 
+const hostTextMeasure: TextMeasure = { visibleWidth, truncateToWidth };
+
+function chartTheme(theme: UsageTheme, seriesIdentities: string[]): HistoryChartTheme {
+	return {
+		title: theme.bold,
+		subtitle: (text) => text,
+		axis: (text) => theme.fg("borderMuted", text),
+		warningLine: (text) => theme.fg("warning", text),
+		errorLine: (text) => theme.fg("error", text),
+		muted: (text) => theme.fg("muted", text),
+		series: (index) => seriesStyle(seriesIdentities[index] ?? `series:${index}`, theme),
+	};
+}
+
 interface ChartRenderOptions {
 	title: string;
 	formatValue: (value: number) => string;
-	/** Appended after the observed/budget amount, e.g. " tokens"; empty when formatValue already carries a unit prefix like "$". */
 	unitSuffix: string;
 	subtitle?: string;
 	budget?: number;
 	noDataText: string;
 }
 
-/** Shared cumulative bar-chart renderer behind renderUsageGraph and renderCostGraph. */
-function renderChart(chart: RenderableChart, width: number, theme: UsageTheme, options: ChartRenderOptions): string[] {
-	const { formatValue, unitSuffix } = options;
-	const safeWidth = Math.max(20, width);
-	const chartColumns = Math.max(1, Math.floor((safeWidth - USAGE_Y_AXIS_WIDTH - 1) / 2));
-	const increments = mergeBuckets(chart.buckets, chartColumns);
-	const runningSeries: Record<string, number> = {};
-	let runningTotal = 0;
-	const buckets = increments.map((bucket) => {
-		runningTotal += bucket.total;
-		for (const [key, value] of Object.entries(bucket.series)) runningSeries[key] = (runningSeries[key] ?? 0) + value;
-		return { ...bucket, total: runningTotal, series: { ...runningSeries } };
+/** Adapts Jittor's domain graph to Malevich's reusable cumulative HistoryChart and budget ProgressBar. */
+function renderChart(
+	chart: { period: UsagePeriod; buckets: UsageGraph["buckets"]; series: UsageGraph["series"]; total: number; truncated: boolean },
+	width: number,
+	theme: UsageTheme,
+	options: ChartRenderOptions,
+): string[] {
+	const component = new HistoryChart({
+		title: options.title,
+		buckets: chart.buckets,
+		series: chart.series.map((series) => ({
+			key: series.key,
+			label: `${displayIdentity(series.provider)}/${displayIdentity(series.model)}`,
+		})),
+		formatValue: options.formatValue,
+		unitSuffix: options.unitSuffix,
+		...(options.subtitle ? { subtitle: options.subtitle } : {}),
+		...(options.budget !== undefined ? { budget: options.budget } : {}),
+		noDataText: options.noDataText,
+		truncated: chart.truncated,
+		formatAxisLabel: (value) => formatPeriodPoint(value, chart.period),
+		theme: chartTheme(
+			theme,
+			chart.series.map((series) => series.key),
+		),
+		measure: hostTextMeasure,
+		height: USAGE_CHART_HEIGHT,
+		yAxisWidth: USAGE_Y_AXIS_WIDTH,
+		maxSeriesShown: USAGE_RENDER_MAX_SERIES,
 	});
-	const barStep = buckets.length * 2 <= safeWidth - USAGE_Y_AXIS_WIDTH ? 2 : 1;
-	const plotWidth = buckets.length * barStep;
-	const budget = typeof options.budget === "number" && Number.isFinite(options.budget) && options.budget > 0 ? options.budget : undefined;
-	const maximum = Math.max(chart.total, budget ?? 0);
-	const observed = chart.truncated ? `at least ${formatValue(chart.total)}` : formatValue(chart.total);
-	const budgetState =
-		budget === undefined
-			? `${observed}${unitSuffix} · budget not configured${chart.truncated ? " · query limit reached" : ""}`
-			: chart.total > budget
-				? `${observed}${unitSuffix} / ${formatValue(budget)} budget · OVER BUDGET by ${chart.truncated ? "at least " : ""}${formatValue(chart.total - budget)}`
-				: chart.truncated
-					? `${observed}${unitSuffix} / ${formatValue(budget)} budget · state unknown · query limit reached`
-					: `${observed}${unitSuffix} / ${formatValue(budget)} budget · ${formatValue(budget - chart.total)} remaining`;
-	const lines = [
-		truncateToWidth(theme.bold(options.title), safeWidth, ""),
-		truncateToWidth(budgetState, safeWidth, "…"),
-		...(options.subtitle ? [truncateToWidth(options.subtitle, safeWidth, "…")] : []),
-		"",
-	];
-	if (maximum === 0) {
-		lines.push(theme.fg("dim", options.noDataText));
-		return lines.map((line) => truncateToWidth(line, safeWidth, "…"));
-	}
-
-	for (let row = 0; row < USAGE_CHART_HEIGHT; row += 1) {
-		const fromBottom = USAGE_CHART_HEIGHT - row - 1;
-		const lower = (maximum * fromBottom) / USAGE_CHART_HEIGHT;
-		const upper = (maximum * (fromBottom + 1)) / USAGE_CHART_HEIGHT;
-		const thresholdRow = budget !== undefined && budget > lower && budget <= upper;
-		const label = thresholdRow
-			? formatValue(budget)
-			: row === 0
-				? formatValue(maximum)
-				: row === Math.floor(USAGE_CHART_HEIGHT / 2)
-					? formatValue(maximum / 2)
-					: "";
-		if (thresholdRow) {
-			const color = chart.total > budget ? "error" : "warning";
-			lines.push(`${label.padStart(USAGE_Y_AXIS_WIDTH - 2)} ${theme.fg("borderMuted", "│")}${theme.fg(color, "┄".repeat(plotWidth))}`);
-			continue;
-		}
-		let plot = "";
-		for (const bucket of buckets) {
-			const scaled = (bucket.total / maximum) * USAGE_CHART_HEIGHT;
-			const occupancy = Math.max(0, Math.min(1, scaled - fromBottom));
-			if (occupancy <= 0) {
-				plot += " ".repeat(barStep);
-				continue;
-			}
-			const block = PARTIAL_BLOCKS[Math.max(0, Math.ceil(occupancy * PARTIAL_BLOCKS.length) - 1)]!;
-			const valueHeight = Math.min(bucket.total, (maximum * (fromBottom + Math.min(occupancy, 0.5))) / USAGE_CHART_HEIGHT);
-			plot += seriesStyle(seriesAt(bucket, chart, valueHeight), theme)(block) + (barStep === 2 ? " " : "");
-		}
-		lines.push(`${label.padStart(USAGE_Y_AXIS_WIDTH - 2)} ${theme.fg("borderMuted", "│")}${plot}`);
-	}
-	lines.push(`${"0".padStart(USAGE_Y_AXIS_WIDTH - 2)} ${theme.fg("borderMuted", `└${"─".repeat(plotWidth)}`)}`);
-	lines.push(`${" ".repeat(USAGE_Y_AXIS_WIDTH)}${axisLabels(chart.start, chart.end, chart.period, plotWidth)}`);
-	lines.push("");
-	const displayedSeries = chart.series.slice(0, USAGE_RENDER_MAX_SERIES);
-	for (let index = 0; index < displayedSeries.length; index += 1) {
-		const series = displayedSeries[index]!;
-		const bullet = seriesStyle(index, theme)("■");
-		lines.push(
-			truncateToWidth(
-				`${bullet} ${displayIdentity(series.provider)}/${displayIdentity(series.model)}  ${formatValue(series.total)}`,
-				safeWidth,
-				"…",
-			),
-		);
-	}
-	if (chart.series.length > displayedSeries.length)
-		lines.push(truncateToWidth(theme.fg("muted", `… ${chart.series.length - displayedSeries.length} more series omitted`), safeWidth, "…"));
-	return lines.map((line) => (visibleWidth(line) <= safeWidth ? line : truncateToWidth(line, safeWidth, "…")));
+	const lines = component.render(width);
+	if (options.budget === undefined || !Number.isFinite(options.budget) || options.budget <= 0 || chart.total === 0) return lines;
+	const meter = new ProgressBar({
+		value: chart.total,
+		max: options.budget,
+		label: "Budget",
+		style: chart.total > options.budget ? (text) => theme.fg("error", text) : (text) => theme.fg("accent", text),
+		measure: hostTextMeasure,
+	});
+	lines.splice(options.subtitle ? 3 : 2, 0, ...meter.render(Math.max(20, width)));
+	return lines;
 }
 
 export function renderUsageGraph(chart: UsageGraph, width: number, theme: UsageTheme, tokenBudget?: number): string[] {
 	return renderChart(
 		{
 			period: chart.period,
-			start: chart.start,
-			end: chart.end,
 			buckets: chart.buckets,
 			series: chart.series,
 			total: chart.totalTokens,
@@ -310,8 +220,6 @@ export function renderCostGraph(chart: CostGraph, width: number, theme: UsageThe
 	return renderChart(
 		{
 			period: chart.period,
-			start: chart.start,
-			end: chart.end,
 			buckets: chart.buckets,
 			series: chart.series,
 			total: chart.totalUsd,

package/extension/src/{benchmark-tui.ts → optimization/model-selection-panel.ts}

@@ -14,8 +14,9 @@ import {
 	type UtilityComponentName,
 } from "@danypops/jittor";
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-import { matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
-import { sessionSecretField } from "./session-identity.ts";
+import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { BorderedSelectPanel, Table, type TextMeasure } from "malevich-tui-components";
+import { sessionSecretField } from "../session-identity.ts";
 
 export interface BenchmarkPanelClient {
 	call(operation: string, input: unknown): Promise<any>;
@@ -36,18 +37,25 @@ function componentText(item: RankedModel): string {
 		.join(" · ");
 }
 
-function candidateLines(item: RankedModel, index: number, currentIdentity: string): string[] {
-	const current = item.identity.startsWith(`${currentIdentity}:`);
-	const localSamples = item.components.find((component) => component.name === "reliability")?.evidenceCount ?? 0;
-	const provenance = item.provenance
-		.slice(0, BENCHMARK_TUI_MAX_PROVENANCE_PER_CANDIDATE)
-		.map((source) => `${source.sourceId}@${source.revision} ${source.freshness}`)
-		.join(" · ");
-	return [
-		` ${index + 1}. ${item.identity}${index === 0 ? "  recommended" : ""}${current ? "  current" : ""}`,
-		`    utility ${item.utility === null ? "?" : item.utility.toFixed(3)} · confidence ${(item.confidence * 100).toFixed(0)}% · ${componentText(item)}`,
-		`    local n=${localSamples}${provenance ? ` · ${provenance}` : " · no external provenance"}`,
-	];
+const hostTextMeasure: TextMeasure = { visibleWidth, truncateToWidth };
+
+function benchmarkRows(shown: RankedModel[], currentIdentity: string): Record<string, string>[] {
+	return shown.flatMap((item, index) => {
+		const current = item.identity.startsWith(`${currentIdentity}:`);
+		const localSamples = item.components.find((component) => component.name === "reliability")?.evidenceCount ?? 0;
+		const provenance = item.provenance
+			.slice(0, BENCHMARK_TUI_MAX_PROVENANCE_PER_CANDIDATE)
+			.map((source) => `${source.sourceId}@${source.revision} ${source.freshness}`)
+			.join(" · ");
+		return [
+			{ rank: `${index + 1}.`, detail: `${item.identity}${index === 0 ? "  recommended" : ""}${current ? "  current" : ""}` },
+			{
+				rank: "",
+				detail: `utility ${item.utility === null ? "?" : item.utility.toFixed(3)} · confidence ${(item.confidence * 100).toFixed(0)}% · ${componentText(item)}`,
+			},
+			{ rank: "", detail: `local n=${localSamples}${provenance ? ` · ${provenance}` : " · no external provenance"}` },
+		];
+	});
 }
 
 export function renderBenchmarkView(result: ModelRankingResult, currentIdentity: string, width: number, theme: BenchmarkTheme): string[] {
@@ -61,21 +69,45 @@ export function renderBenchmarkView(result: ModelRankingResult, currentIdentity:
 			: recommended && currentIndex === 0
 				? "Current model is the top recommendation."
 				: "Current model is outside the ranked candidates.";
-	const lines = [
-		theme.fg("borderMuted", "─".repeat(safeWidth)),
-		theme.bold("Jittor Benchmark Recommendations"),
-		result.scopeAuthority === "exact-session"
-			? "Scope: exact session"
-			: "Scope: available models · ADVISORY (exact session scope unavailable)",
-		`Domain: ${result.domain} · Type: ${result.type} · evidence ${result.completeness}`,
-		reason,
-		...shown.flatMap((item, index) => candidateLines(item, index, currentIdentity)),
-		...(result.ranked.length > shown.length ? [` … ${result.ranked.length - shown.length} more candidates omitted`] : []),
-		...(result.scopeWarning ? [result.scopeWarning] : []),
-		theme.fg("dim", "r refresh · Esc close"),
-		theme.fg("borderMuted", "─".repeat(safeWidth)),
-	];
-	return lines.map((line) => truncateToWidth(line, safeWidth, "…"));
+	const table = new Table({
+		columns: [
+			{ header: "#", key: "rank", width: 4 },
+			{ header: "Candidate / evidence", key: "detail" },
+		],
+		rows: benchmarkRows(shown, currentIdentity),
+		headerStyle: theme.bold,
+		measure: hostTextMeasure,
+	});
+	const content = {
+		invalidate: () => table.invalidate(),
+		render: (availableWidth: number): string[] => [
+			truncateToWidth(
+				result.scopeAuthority === "exact-session"
+					? "Scope: exact session"
+					: "Scope: available models · ADVISORY (exact session scope unavailable)",
+				availableWidth,
+				"…",
+			),
+			truncateToWidth(`Domain: ${result.domain} · Type: ${result.type} · evidence ${result.completeness}`, availableWidth, "…"),
+			truncateToWidth(reason, availableWidth, "…"),
+			...table.render(availableWidth),
+			...(result.ranked.length > shown.length
+				? [truncateToWidth(`… ${result.ranked.length - shown.length} more candidates omitted`, availableWidth, "…")]
+				: []),
+			...(result.scopeWarning ? [truncateToWidth(result.scopeWarning, availableWidth, "…")] : []),
+		],
+	};
+	return new BorderedSelectPanel({
+		title: "Jittor Benchmark Recommendations",
+		list: content,
+		helpText: "r refresh · Esc close",
+		theme: {
+			border: (text) => theme.fg("borderMuted", text),
+			title: theme.bold,
+			help: (text) => theme.fg("dim", text),
+		},
+		measure: hostTextMeasure,
+	}).render(safeWidth);
 }
 
 export async function showBenchmarkPanel(

package/extension/src/{capabilities/codex-recovery.ts → optimization/recovery/codex.ts}

@@ -12,8 +12,8 @@ import {
 	MILLISECONDS_PER_SECOND,
 } from "@danypops/jittor";
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import type { CodexRecoveryControl } from "../settings.ts";
-import { headerValue } from "./http-headers.ts";
+import { headerValue } from "../../observability/http-headers.ts";
+import type { CodexRecoveryControl } from "../../settings.ts";
 
 export interface CodexRecoveryRuntime {
 	now(): number;

package/extension/src/service-client.ts

@@ -10,11 +10,58 @@ function defaultConnector(): Promise<JittorClient> {
 let connector: JittorConnector = defaultConnector;
 let retrying: RetryingClient<JittorClient> = createRetryingClient(() => connector(), { label: "Jittor" });
 
+/**
+ * Exhaustive transport-retry policy. New daemon operations cannot compile until their mutability
+ * is classified: only reads may be transparently invoked twice after a connection-shaped error.
+ */
+const OPERATION_RETRY_MODE = {
+	"metrics.record": "once",
+	"metrics.record_batch": "once",
+	"metrics.query": "retry",
+	"metrics.distinct_scopes": "retry",
+	"metrics.usage_series": "retry",
+	"metrics.cost_by_task": "retry",
+	"metrics.prune": "once",
+	"benchmark.refresh": "once",
+	"benchmark.status": "retry",
+	"benchmark.query": "retry",
+	"catalog.refresh": "once",
+	"catalog.status": "retry",
+	"catalog.query": "retry",
+	"usage.import": "once",
+	"usage.import_status": "retry",
+	"usage.import_cancel": "once",
+	"export.status": "retry",
+	"export.flush": "once",
+	"session.register": "once",
+	"session.release": "once",
+	"models.rank": "once",
+	"context.assess": "retry",
+	"context.delta": "retry",
+	"context.snapshot": "once",
+	"compaction.estimate": "retry",
+	"service.checkpoint": "once",
+	"telemetry.poll": "retry",
+	"router.status": "retry",
+	"router.decide": "retry",
+	"router.pause": "once",
+	"router.resume": "once",
+	"router.override": "once",
+	"router.clear_override": "once",
+	"router.current_route": "once",
+	"router.available_routes": "once",
+} as const satisfies Record<OperationName, "retry" | "once">;
+
+export function operationRetryMode(operation: OperationName): "retry" | "once" {
+	return OPERATION_RETRY_MODE[operation];
+}
+
 export async function callJittor<Name extends OperationName>(
 	operation: Name,
 	input: OperationInputs[Name],
 ): Promise<OperationOutputs[Name]> {
-	return retrying.call((client) => client.call(operation, input));
+	const invoke = (client: JittorClient) => client.call(operation, input);
+	return operationRetryMode(operation) === "retry" ? retrying.call(invoke) : retrying.callOnce(invoke);
 }
 
 export function setJittorClientConnectorForTests(value: JittorConnector): void {

package/extension/src/settings-tui.ts

@@ -1,6 +1,7 @@
 import { USAGE_PERIODS, type UsagePeriod } from "@danypops/jittor";
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { BorderedSelectPanel, Menu, type MenuTheme, type TextMeasure } from "malevich-tui-components";
 import type { CodexRecoveryControl, EnforcementControl, UsageBudgetControl } from "./settings.ts";
 
 export interface SettingsSnapshot {
@@ -56,16 +57,53 @@ export function settingsSnapshot(
 	};
 }
 
+const hostTextMeasure: TextMeasure = { visibleWidth, truncateToWidth };
+
+function menuTheme(theme: SettingsTheme): MenuTheme {
+	return {
+		border: () => "",
+		selected: (text) => theme.fg("accent", text),
+		normal: (text) => text,
+		dim: (text) => theme.fg("dim", text),
+		title: theme.bold,
+	};
+}
+
+function createSettingsPanel(
+	snapshot: SettingsSnapshot,
+	theme: SettingsTheme,
+	onAction: (action: SettingsAction) => void,
+	selected = 0,
+): BorderedSelectPanel {
+	const menu = new Menu({
+		items: SETTINGS_KEYS.map((key) => ({ label: rowText(key, snapshot, theme), action: () => onAction({ kind: "activate", key }) })),
+		theme: menuTheme(theme),
+		onClose: () => onAction({ kind: "close" }),
+		measure: hostTextMeasure,
+		matchesKey: (data, key) => {
+			if (key === "enter") return matchesKey(data, "enter") || matchesKey(data, "space");
+			if (key === "escape") return matchesKey(data, "escape") || matchesKey(data, "ctrl+c");
+			if (key === "up") return matchesKey(data, "up");
+			if (key === "down") return matchesKey(data, "down");
+			return false;
+		},
+	});
+	for (let index = 0; index < selected; index += 1) menu.handleInput("\x1b[B");
+	return new BorderedSelectPanel({
+		title: "Jittor Settings",
+		list: menu,
+		helpText: "Token budgets are user values; provider quotas remain separate. · ↑/↓ select · Enter edit · Esc close",
+		theme: {
+			border: (text) => theme.fg("borderMuted", text),
+			title: theme.bold,
+			help: (text) => theme.fg("dim", text),
+		},
+		measure: hostTextMeasure,
+	});
+}
+
 export function renderSettingsView(snapshot: SettingsSnapshot, selected: number, width: number, theme: SettingsTheme): string[] {
-	const safeWidth = Math.max(20, width);
-	const lines = [theme.bold("Jittor Settings"), theme.fg("dim", "Token budgets are user values; provider quotas remain separate."), ""];
-	for (let index = 0; index < SETTINGS_KEYS.length; index += 1) {
-		const selectedRow = index === selected;
-		const prefix = selectedRow ? theme.fg("accent", "› ") : "  ";
-		lines.push(`${prefix}${rowText(SETTINGS_KEYS[index]!, snapshot, theme)}`);
-	}
-	lines.push("", theme.fg("dim", "↑/↓ select · Enter edit · Esc close"));
-	return lines.map((line) => (visibleWidth(line) <= safeWidth ? line : truncateToWidth(line, safeWidth, "…")));
+	return createSettingsPanel(snapshot, theme, () => undefined, Math.max(0, selected)).render(Math.max(20, width));
 }
 
 function plainTheme(): SettingsTheme {
@@ -79,7 +117,7 @@ async function editBudget(ctx: ExtensionCommandContext, budgets: UsageBudgetCont
 	if (input === undefined) return;
 	const normalized = input.trim().toLowerCase();
 	if (normalized === "off" || normalized === "clear") {
-		budgets.setUsageTokenBudget(period, undefined);
+		await budgets.setUsageTokenBudget(period, undefined);
 		ctx.ui.notify(`${label} token budget cleared.`, "info");
 		return;
 	}
@@ -88,7 +126,7 @@ async function editBudget(ctx: ExtensionCommandContext, budgets: UsageBudgetCont
 		ctx.ui.notify("Enter a positive token count, or `off` to clear this threshold.", "warning");
 		return;
 	}
-	budgets.setUsageTokenBudget(period, tokens);
+	await budgets.setUsageTokenBudget(period, tokens);
 	ctx.ui.notify(`${label} token budget set to ${tokens.toLocaleString()} tokens.`, "info");
 }
 
@@ -104,33 +142,20 @@ export async function showSettingsPanel(
 	},
 ): Promise<void> {
 	if (ctx.mode !== "tui") {
-		ctx.ui.notify(
-			renderSettingsView(settingsSnapshot(enforcement, recovery, budgets), -1, 100, plainTheme())
-				.slice(0, -2)
-				.join("\n"),
-			"info",
-		);
+		const snapshot = settingsSnapshot(enforcement, recovery, budgets);
+		ctx.ui.notify(["Jittor Settings", ...SETTINGS_KEYS.map((key) => rowText(key, snapshot, plainTheme()))].join("\n"), "info");
 		return;
 	}
 	for (;;) {
 		const snapshot = settingsSnapshot(enforcement, recovery, budgets);
 		const action = await ctx.ui.custom<SettingsAction>((tui, theme, _keybindings, done) => {
-			let selected = 0;
+			const panel = createSettingsPanel(snapshot, theme, done);
 			return {
-				invalidate() {},
-				render(width: number): string[] {
-					return renderSettingsView(snapshot, selected, width, theme);
-				},
-				handleInput(data: string): void {
-					if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c") || data === "q") done({ kind: "close" });
-					else if (matchesKey(data, "up")) {
-						selected = (selected - 1 + SETTINGS_KEYS.length) % SETTINGS_KEYS.length;
-						tui.requestRender();
-					} else if (matchesKey(data, "down")) {
-						selected = (selected + 1) % SETTINGS_KEYS.length;
-						tui.requestRender();
-					} else if (matchesKey(data, "return") || matchesKey(data, "enter") || matchesKey(data, "space"))
-						done({ kind: "activate", key: SETTINGS_KEYS[selected]! });
+				invalidate: () => panel.invalidate(),
+				render: (width) => panel.render(width),
+				handleInput(data: string) {
+					panel.handleInput(data);
+					tui.requestRender();
 				},
 			};
 		});