@oh-my-pi/pi-tui 18.11.1 → 18.11.2

package/src/charts/chart-svg.ts

@@ -2,9 +2,11 @@
  * Draws a {@link ChartSpec} as a standalone SVG document colored only with
  * figure tokens — `var(--fg)`, `var(--muted)`, `var(--border)`,
  * `var(--accent)`, `var(--surface)`, `var(--c1)`…`var(--c6)` — on a
- * transparent background — the token vocabulary of assistant ```svg figures —
- * so the host resolves them against the live theme (`prepareSvg`) for both
- * the rasterized terminal image and the native TSP blob.
+ * transparent background — the token vocabulary of assistant ```svg figures:
+ * the host resolves them against the live theme (`prepareSvg`) for the
+ * rasterized terminal image, and a TSP terminal draws the chart as an ```svg
+ * figure in the palette it shows. The root carries {@link chartAlt} as its
+ * `aria-label`.
  *
  * Styled after Apple's charts and Tern's UI: a UI sans (Geist where Tern
  * provides it), muted labels, hairline gridlines that recede behind the
@@ -236,15 +238,8 @@ interface Tier {
 	readonly high: number;
 }
 
-/** A drawn chart: the SVG document and its size in user units. */
-export interface ChartSvg {
-	readonly svg: string;
-	readonly width: number;
-	readonly height: number;
-}
-
-/** The SVG document for `spec`. */
-export function renderChartSvg(spec: ChartSpec): ChartSvg {
+/** The SVG document for `spec`, labeled for screen readers with {@link chartAlt}. */
+export function renderChartSvg(spec: ChartSpec): string {
 	const layer = drawChart(spec);
 	const header = drawHeader(spec, layer);
 	const head = matrixHead(spec);
@@ -268,8 +263,8 @@ export function renderChartSvg(spec: ChartSpec): ChartSvg {
 		height += 20;
 	}
 	height = Math.ceil(height + PAD);
-	const svg = [
-		`<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH}" height="${height}" viewBox="0 0 ${WIDTH} ${height}" font-family="${FONT}" font-size="${LABEL_SIZE}">`,
+	return [
+		`<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH}" height="${height}" viewBox="0 0 ${WIDTH} ${height}" role="img" aria-label="${escapeXml(chartAlt(spec))}" font-family="${FONT}" font-size="${LABEL_SIZE}">`,
 		layer.body.includes(`url(#${INK_MASK})`) ? INK_DEFS : "",
 		`<g transform="translate(0 ${PAD})">${header.body}</g>`,
 		head.body && `<g transform="translate(0 ${num(PAD + header.height)})">${head.body}</g>`,
@@ -278,11 +273,10 @@ export function renderChartSvg(spec: ChartSpec): ChartSvg {
 		caption,
 		"</svg>",
 	].join("");
-	return { svg, width: WIDTH, height };
 }
 
-/** One-line description of the chart, for screen readers and terminals that show the alt text. */
-export function chartAlt(spec: ChartSpec): string {
+/** One-line description of the chart, for screen readers. */
+function chartAlt(spec: ChartSpec): string {
 	const joint =
 		spec.kind === "stacked" ? " + " : spec.kind === "slope" ? " → " : spec.kind === "butterfly" ? " vs " : ", ";
 	const names = spec.series.map(entry => entry.name).join(joint);
@@ -4432,6 +4426,13 @@ function token(name: string): string {
 	return `var(--${name})`;
 }
 
+/** `raw` safe as XML text or a double-quoted attribute value. */
+function escapeXml(raw: string): string {
+	return raw.replace(/[&<>"]/g, char =>
+		char === "&" ? "&amp;" : char === "<" ? "&lt;" : char === ">" ? "&gt;" : "&quot;",
+	);
+}
+
 function num(value: number): string {
 	return Number(value.toFixed(1)).toString();
 }
@@ -4469,10 +4470,6 @@ function text(x: number, y: number, content: string | readonly TextRun[], style:
 		style.weight ? `font-weight="${style.weight}"` : "",
 		style.italic ? `font-style="italic"` : "",
 	].filter(Boolean);
-	const escape = (raw: string) =>
-		raw.replace(/[&<>"]/g, char =>
-			char === "&" ? "&amp;" : char === "<" ? "&lt;" : char === ">" ? "&gt;" : "&quot;",
-		);
 	const body = runs
 		.filter(run => run.content)
 		.map(run => {
@@ -4480,7 +4477,7 @@ function text(x: number, y: number, content: string | readonly TextRun[], style:
 				run.fill ? ` fill="${token(run.fill)}"` : "",
 				run.weight ? ` font-weight="${run.weight}"` : "",
 			].join("");
-			return own ? `<tspan${own}>${escape(run.content)}</tspan>` : escape(run.content);
+			return own ? `<tspan${own}>${escapeXml(run.content)}</tspan>` : escapeXml(run.content);
 		})
 		.join("");
 	return `<text ${attrs.join(" ")}>${body}</text>`;

package/src/chat/assistant-message.ts

@@ -39,7 +39,7 @@ import { formatTurnUsage, type TurnUsageSummary } from "../overlays/usage-row";
 import { FigureMarkdown } from "./figure-markdown";
 import { svgFigureRendering } from "./svg-figure";
 import { hasSvgFence } from "./svg-source";
-import { describeTableChart, hasChartTable, lookupTableChart, splitTableCharts } from "./table-chart";
+import { chartFence, hasChartTable, lookupTableChart, splitTableCharts } from "./table-chart";
 
 /**
  * Max wrapped rows of a turn-ending provider error rendered inline in the
@@ -919,7 +919,7 @@ export class AssistantMessageComponent extends Container {
 						children.push(markdown(`t${index}`, `t${index}`, linked(source, streaming), streaming));
 						continue;
 					}
-					// A chart follows its table as an SVG image node; the prose splits around it.
+					// A chart follows its table as an ```svg figure the terminal colors; the prose splits around it.
 					const segments = splitTableCharts(source, streaming);
 					segments.forEach((segment, part) => {
 						const slot = part === 0 ? `t${index}` : `t${index}.${part}`;
@@ -930,7 +930,7 @@ export class AssistantMessageComponent extends Container {
 						}
 						const chart = lookupTableChart(segment.table);
 						if (chart instanceof Promise) this.#awaitChart(chart);
-						else if (chart) children.push(describeTableChart(chart, slot));
+						else if (chart) children.push(markdown(slot, slot, chartFence(chart), false));
 					});
 				} else if (content.type === "thinking") {
 					const display = resolveThinkingDisplay(content, this.#proseOnlyThinking);

package/src/chat/table-chart.ts

@@ -5,24 +5,19 @@
  * and draws that chart — locally under `always`, through the host's
  * model-backed {@link TableChartPlanner} under `smart` for the tables
  * {@link shouldJudge} picks — and caches it per table source. {@link TableChartFigure} shows it
- * as a rasterized terminal image; {@link describeTableChart} hands a TSP
- * terminal the SVG itself. Both resolve the figure tokens against the live
- * theme, so a chart follows theme switches like the prose around it.
+ * as a terminal image rasterized in omp's theme; {@link chartFence} hands a
+ * TSP terminal the SVG as an ```svg fence, which it draws in the palette it
+ * shows. Either way a chart follows theme switches like the prose around it.
  */
 import { logger } from "@oh-my-pi/pi-utils";
 import type { Token, Tokens } from "@oh-my-pi/pi-utils/marked";
 import { type ChartPlan, buildChart, planChart, shouldJudge, worthCharting } from "../charts/chart-plan";
-import { chartAlt, renderChartSvg } from "../charts/chart-svg";
+import { renderChartSvg } from "../charts/chart-svg";
 import { analyzeTable, type TableAnalysis } from "../charts/table-data";
 import type { ImageBudget } from "../components/image";
 import { lexDocument } from "../components/markdown";
-import { keyed } from "../native/describe";
-import { nativeImageNode } from "../native/blobs";
-import type { NativeNode } from "../native/node";
-import { getThemeEpoch } from "../theme";
 import type { Component } from "../tui";
-import { SvgFigure, svgFigurePalette } from "./svg-figure";
-import { prepareSvg } from "./svg-source";
+import { SvgFigure } from "./svg-figure";
 
 /**
  * `smart`: a model refines the local guess where meaning decides (kind,
@@ -47,18 +42,11 @@ export interface TableChartRequest {
  */
 export type TableChartPlanner = (request: TableChartRequest) => Promise<ChartPlan | null>;
 
-/** A drawn chart, ready to resolve against the theme. */
-export interface TableChart {
-	/** SVG colored with figure tokens (`var(--accent)`, …). */
-	readonly svg: string;
-	readonly alt: string;
-	/** Size in SVG user units. */
-	readonly width: number;
-	readonly height: number;
-}
-
-/** The chart under a table: drawn, none, or a smart pick on its way (the promise settles once the cache holds it). */
-export type ChartLookup = TableChart | null | Promise<void>;
+/**
+ * The chart under a table: its SVG, colored with figure tokens (`var(--accent)`, …)
+ * still to resolve; none; or a smart pick on its way (the promise settles once the cache holds it).
+ */
+export type ChartLookup = string | null | Promise<void>;
 
 /** One run of a Markdown block: prose (ending at a charted table), or the chart drawn after that table. */
 export type ChartSegment =
@@ -67,8 +55,6 @@ export type ChartSegment =
 
 /** Tables cached per source; a long session keeps its recent charts without growing without bound. */
 const CACHE_LIMIT = 256;
-/** SVG user units per terminal column (16 per row on 1:2 cells), sizing native images. */
-const UNITS_PER_COLUMN = 8;
 /** A GFM delimiter row (`|---|:--:|`), the cheap test before lexing a block. */
 const DELIMITER_ROW = /^ {0,3}\|?[ \t]*:?-+:?[ \t]*\|/m;
 
@@ -78,20 +64,14 @@ interface ChartEntry {
 	readonly guess: ChartPlan | undefined;
 	/** The host's planner picks this table's chart. */
 	readonly smart: boolean;
-	/** `undefined` until drawn (or judged chartless). */
-	chart?: TableChart | null;
+	/** The chart's SVG; `undefined` until drawn (or judged chartless). */
+	chart?: string | null;
 	pending?: Promise<void>;
 }
 
 let chartMode: TableChartMode = "off";
 let chartPlanner: TableChartPlanner | undefined;
 const charts = new Map<string, ChartEntry>();
-/** The theme-resolved image node owning a chart's native bytes. */
-const kNativeImage = Symbol("tableChart.nativeImage");
-
-interface NativeTagged extends TableChart {
-	[kNativeImage]?: { epoch: number; image: NativeNode };
-}
 
 /** Set how tables become charts (the host's `tui.autoGraph`) and its `smart` planner; the host rebuilds the transcript after. */
 export function setTableCharts(mode: TableChartMode, planner?: TableChartPlanner): void {
@@ -188,34 +168,21 @@ function chartEntry(table: Tokens.Table): ChartEntry {
  * Draw `plan`. A guess must also pass {@link worthCharting}; a model's pick
  * already judged the chart worth drawing.
  */
-function drawChart(analysis: TableAnalysis, plan: ChartPlan, guessed = false): TableChart | null {
+function drawChart(analysis: TableAnalysis, plan: ChartPlan, guessed = false): string | null {
 	const spec = buildChart(analysis, plan);
 	if (!spec || (guessed && !worthCharting(spec))) return null;
-	return { ...renderChartSvg(spec), alt: chartAlt(spec) };
+	return renderChartSvg(spec);
 }
 
 /**
- * A native `image` node drawing `chart` from its SVG — no raster — resolved
- * against the active theme; rebuilt when the theme changes.
+ * Chart `svg` as a Markdown ```svg fence, for a TSP terminal's `md` node. Its
+ * figure tokens stay unresolved: the terminal draws the fence as a figure in
+ * the palette it shows the prose in, so the chart cannot fall out of step with
+ * the page when omp's own idea of the appearance does, and a theme switch
+ * recolors it without a resend.
  */
-export function describeTableChart(chart: TableChart, key: string): NativeNode {
-	const epoch = getThemeEpoch();
-	const tagged: NativeTagged = chart;
-	let entry = tagged[kNativeImage];
-	if (entry?.epoch !== epoch) {
-		const svg = prepareSvg(chart.svg, svgFigurePalette());
-		entry = {
-			epoch,
-			image: nativeImageNode(new TextEncoder().encode(svg), "image/svg+xml", {
-				alt: chart.alt,
-				w: chart.width,
-				h: chart.height,
-				max: { w: `${Math.round(chart.width / UNITS_PER_COLUMN)}ch` },
-			}),
-		};
-		tagged[kNativeImage] = entry;
-	}
-	return keyed(entry.image, key);
+export function chartFence(svg: string): string {
+	return `\`\`\`svg\n${svg}\n\`\`\``;
 }
 
 export interface TableChartFigureOptions {
@@ -235,8 +202,8 @@ export class TableChartFigure implements Component {
 	readonly #options: TableChartFigureOptions;
 	readonly #figure: SvgFigure;
 	#table: Tokens.Table | undefined;
-	/** `undefined` while not looked up or waiting for a pick. */
-	#chart: TableChart | null | undefined;
+	/** The chart's SVG; `undefined` while not looked up or waiting for a pick. */
+	#chart: string | null | undefined;
 	#waiting = false;
 	#disposed = false;
 
@@ -289,6 +256,6 @@ export class TableChartFigure implements Component {
 			return;
 		}
 		this.#chart = found;
-		if (found) this.#figure.update(found.svg, true);
+		if (found) this.#figure.update(found, true);
 	}
 }

package/src/chrome/transcript-container.ts

@@ -412,6 +412,16 @@ export class TranscriptContainer extends Container {
 		return this.#entries.map(entry => entry.emitted);
 	}
 
+	/** Whether any block is still streaming or otherwise unfinalized. */
+	hasActiveBlock(): boolean {
+		this.#syncEntries();
+		this.#settleFinalized();
+		for (let index = this.#frontier; index < this.#entries.length; index++) {
+			if (this.#entries[index]!.state === "active") return true;
+		}
+		return false;
+	}
+
 	/** Whether visible active capacity and live-block memory permit another admission. */
 	canAdmit(rows: number): boolean {
 		const active = this.#entries.filter(entry => entry.state === "active").length;

package/src/components/settings-list.ts

@@ -4,6 +4,7 @@ import { fuzzyFilter } from "../fuzzy";
 import { getKeybindings } from "../keybindings";
 import { extractPrintableText } from "../keys";
 import type { MouseRoutable, SgrMouseEvent } from "../mouse";
+import { slugify } from "@oh-my-pi/pi-utils";
 import type { TspPrefsControl, TspPrefsRow, TspPrefsSection, TspProps, TspSpan } from "@oh-my-pi/pi-wire";
 import { col, node, span } from "../native/describe";
 import { sameItems, sameProps } from "../native/memo";
@@ -78,10 +79,7 @@ export interface PrefsSectionRef {
 
 /** The section id for a section title (`"Status Line"` → `"status-line"`). */
 export function prefsSectionId(title: string): string {
-	return title
-		.toLowerCase()
-		.replace(/[^a-z0-9]+/g, "-")
-		.replace(/^-|-$/g, "");
+	return slugify(title);
 }
 
 /** A setting as a native settings row, given its typed control; `undefined` for headings. */

package/src/overlays/agent-hub-projection.ts

@@ -4,6 +4,10 @@ import type { ObservableSession } from "./session-observer-registry";
 
 export type AgentMetrics = AgentMetricsSummary;
 
+export interface AgentCostSnapshot {
+	cost: number | undefined;
+}
+
 export interface AggregateMetrics extends AgentMetrics {
 	reportedAgents: number;
 	/** Rows whose duration is an observer-measured active runtime. */
@@ -203,15 +207,28 @@ export function hubFallbackStatsSession<TRecord extends AgentRecordLike>(
 	return session && typeof session.getSessionStats === "function" ? session : undefined;
 }
 
-function withDirectCost(metrics: AgentMetrics | undefined, cost: number | undefined): AgentMetrics | undefined {
+/**
+ * Shared row policy for the Agent Hub and the status-line cost total.
+ * Non-cost metrics come from live progress, then persisted history, then the retained
+ * snapshot (parked rows only), then the live session. Cost always overlays the cumulative
+ * direct-session bill: live, then `history.directCost` (written at park), then retained.
+ * Persisted `history.metrics.cost` is a leaf-scoped snapshot, so it never wins.
+ */
+function projectRowMetrics<TMetrics extends AgentCostSnapshot>(
+	ref: AgentRecordLike,
+	observed: ObservableSession | undefined,
+	live: TMetrics | undefined,
+	retained: TMetrics | undefined,
+	hasLiveSession: boolean,
+): TMetrics | AgentMetrics | undefined {
+	const cost = live?.cost ?? ref.history?.directCost ?? retained?.cost;
+	const metrics = observed?.progress
+		? progressMetrics(observed)
+		: (ref.history?.metrics ?? (!hasLiveSession ? retained : undefined) ?? live);
 	return metrics && cost !== undefined ? { ...metrics, cost } : metrics;
 }
 
-/**
- * Preserve progress/history for non-cost metrics, overlaying cumulative direct-session cost.
- * Persisted `history.metrics.cost` is a leaf-scoped snapshot, so it never overrides live
- * progress; only the cumulative direct-cost sources do.
- */
+/** Full Agent Hub row metrics; see {@link projectRowMetrics} for source precedence. */
 export function hubRowMetrics<TRecord extends AgentRecordLike>(
 	ref: TRecord,
 	observed: ObservableSession | undefined,
@@ -220,12 +237,46 @@ export function hubRowMetrics<TRecord extends AgentRecordLike>(
 	const session = hubFallbackStatsSession(ref, observed);
 	const liveEntry = session ? sessionMetrics.get(session) : undefined;
 	const retainedEntry = sessionMetrics.get(ref);
-	const historyMetrics = ref.history?.metrics;
-	const cost = liveEntry?.metrics?.cost ?? ref.history?.directCost ?? retainedEntry?.metrics?.cost;
-	if (observed?.progress) return withDirectCost(progressMetrics(observed), cost);
-	if (historyMetrics) return withDirectCost(historyMetrics, cost);
-	if (!session && retainedEntry?.metrics) return withDirectCost(retainedEntry.metrics, cost);
-	return withDirectCost(liveEntry?.metrics, cost);
+	return projectRowMetrics(ref, observed, liveEntry?.metrics, retainedEntry?.metrics, session !== undefined);
+}
+
+/** Cost-only projection for frequent status updates; full roster metrics keep their own cache. */
+export function aggregateCost<TRecord extends AgentRecordLike>(args: {
+	rows: readonly TRecord[];
+	observedById: ReadonlyMap<string, ObservableSession>;
+	sessionCosts: WeakMap<object, AgentCostSnapshot>;
+}): number {
+	let total = 0;
+	const countedSessions = new Set<NonNullable<AgentRecordLike["session"]>>();
+	for (const ref of args.rows) {
+		const observed = args.observedById.get(ref.id);
+		const session = hubFallbackStatsSession(ref, observed);
+		let cached = session ? args.sessionCosts.get(session) : undefined;
+		if (session) {
+			const directCost = readSessionDirectCost(session);
+			if (directCost !== undefined) {
+				cached = { cost: directCost };
+				args.sessionCosts.set(session, cached);
+			} else if (!cached || !fallbackReadCurrent(cached, session)) {
+				const stamp = fallbackReadStamp(session);
+				cached = { cost: readSessionMetrics(session, undefined)?.cost };
+				if (stamp) fallbackReadStamps.set(cached, stamp);
+				args.sessionCosts.set(session, cached);
+			}
+			if (cached?.cost !== undefined) args.sessionCosts.set(ref, cached);
+		}
+		const cost = projectRowMetrics(
+			ref,
+			observed,
+			cached?.cost !== undefined ? cached : undefined,
+			args.sessionCosts.get(ref),
+			session !== undefined,
+		)?.cost;
+		if (cost === undefined || (session && countedSessions.has(session))) continue;
+		if (session) countedSessions.add(session);
+		total += finiteMetric(cost);
+	}
+	return total;
 }
 
 export function aggregateMetrics<TRecord extends AgentRecordLike>(args: {

package/src/overlays/btw-history-panel.ts

@@ -369,8 +369,9 @@ export class BtwHistoryPanel implements Component, Focusable {
 	}
 	handleInput(data: string): void {
 		if (this.#composer) {
-			// The input owns every key, including panel shortcuts and pasted text.
-			this.#composer.input.handleInput(data);
+			// The input owns every key it handles, including panel shortcuts and
+			// pasted text; the line keys it ignores still scroll the answer above.
+			if (!this.#composer.input.handleInput(data)) this.#scrollDetail(data);
 			this.#options.requestRender();
 			return;
 		}
@@ -417,31 +418,37 @@ export class BtwHistoryPanel implements Component, Focusable {
 			else if (matchesKey(data, "home")) this.#select(0);
 			else if (matchesKey(data, "end")) this.#select(this.#records.length - 1);
 			else return;
-		} else {
-			const by: TspScrollBy | undefined = matchesSelectUp(data)
-				? "line-up"
-				: matchesSelectDown(data)
-					? "line-down"
-					: matchesSelectPageUp(data)
-						? "page-up"
-						: matchesSelectPageDown(data)
-							? "page-down"
-							: matchesKey(data, "home")
-								? "start"
-								: matchesKey(data, "end")
-									? "end"
-									: undefined;
-			if (by === "line-up") this.#detail.scroll(-1);
-			else if (by === "line-down") this.#detail.scroll(1);
-			else if (by === "page-up") this.#detail.page(-1);
-			else if (by === "page-down") this.#detail.page(1);
-			else if (!this.#detail.handleScrollKey(data)) return;
-			if (by) this.#scroll = { by, n: (this.#scroll?.n ?? 0) + 1 };
-			this.#followLatest = matchesKey(data, "end");
+		} else if (!this.#scrollDetail(data)) {
+			return;
 		}
 		this.#options.requestRender();
 	}
 
+	/** Apply an answer-pane scroll key; a scroll stops following the newest row unless it is End. */
+	#scrollDetail(data: string): boolean {
+		const by: TspScrollBy | undefined = matchesSelectUp(data)
+			? "line-up"
+			: matchesSelectDown(data)
+				? "line-down"
+				: matchesSelectPageUp(data)
+					? "page-up"
+					: matchesSelectPageDown(data)
+						? "page-down"
+						: matchesKey(data, "home")
+							? "start"
+							: matchesKey(data, "end")
+								? "end"
+								: undefined;
+		if (by === "line-up") this.#detail.scroll(-1);
+		else if (by === "line-down") this.#detail.scroll(1);
+		else if (by === "page-up") this.#detail.page(-1);
+		else if (by === "page-down") this.#detail.page(1);
+		else if (!this.#detail.handleScrollKey(data)) return false;
+		if (by) this.#scroll = { by, n: (this.#scroll?.n ?? 0) + 1 };
+		this.#followLatest = matchesKey(data, "end");
+		return true;
+	}
+
 	/** A large glass sheet (the list beside the reader), palette-sized while there is nothing to list. */
 	get nativeOverlay(): NonNullable<Component["nativeOverlay"]> {
 		return this.#records.length > 0 ? SHEET : EMPTY_SHEET;

package/src/overlays/extensions/extension-list.ts

@@ -7,7 +7,6 @@
  */
 import type { TspPickerGroup, TspPickerItem, TspProps, TspSpan, TspTone } from "@oh-my-pi/pi-wire";
 import type { Component } from "../../tui";
-import { formatKeyHint } from "../../app-keybindings";
 import { node, span, stableKey } from "../../native/describe";
 import type { NativeNode } from "../../native/node";
 import { pickerFuzzyHits, pickerQuery } from "../../native/picker";
@@ -499,11 +498,10 @@ export class ExtensionList implements Component {
 					]
 				: undefined,
 			facts: { kind: this.#getKindLabel(ext.kind) },
-			disabled: effectivelyDisabled
-				? masterDisabled
-					? "Provider disabled"
-					: `Disabled · ${formatKeyHint("space")} to enable`
-				: undefined,
+			// Only a disabled provider makes the row inert. An extension switched
+			// off by its own toggle must stay activatable, or the click/dblclick
+			// that turned it off could never turn it back on.
+			disabled: masterDisabled ? "Provider disabled" : undefined,
 		};
 	}
 

package/src/overlays/settings-selector.ts

@@ -1101,6 +1101,9 @@ export class SettingsSelectorComponent implements Component {
 				const open = list.openSubmenu;
 				if (open?.id === id && open.component instanceof MultiSelectSubmenu) {
 					open.component.setValues(value);
+					// The native page applies a chip toggle without closing its
+					// editor, so the row and its tab badge only update here.
+					this.#refreshItems();
 					return;
 				}
 				const next = [...value];