@oh-my-pi/pi-tui 18.14.1 → 18.14.2

package/src/apps/ps-top.ts

@@ -17,7 +17,7 @@ import { type Component, TUI } from "../tui";
 import type { TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
 import { col, compact, elapsed, keyed, node, row, span, stableKey, text } from "../native/describe";
 import type { NativeNode, NativeUiEvent } from "../native/node";
-import { actionBar, actionButton } from "../native/overlay";
+import { actionBar, actionButton, iconButton, segmentedTabs } from "../native/overlay";
 import { Memo } from "../native/memo";
 import { truncateToWidth } from "../utils";
 import { formatDuration } from "@oh-my-pi/pi-utils";
@@ -410,13 +410,7 @@ export class PsTopComponent implements Component {
 			);
 		} else {
 			left.push(
-				node("icon", {
-					name: "back",
-					role: "omp.app.ibtn",
-					title: "Back  esc",
-					aria: "Back",
-					actions: { click: "back" },
-				}),
+				iconButton("back", "back", "Back  esc", { aria: "Back" }),
 				text(
 					this.#view === "logs" ? `Logs · ${entry?.row.snapshot.name ?? "?"}` : (entry?.row.snapshot.name ?? "?"),
 					{
@@ -432,8 +426,7 @@ export class PsTopComponent implements Component {
 		const right: NativeNode[] = [];
 		if (this.#view === "table") {
 			right.push(
-				node(
-					"tabs",
+				segmentedTabs(
 					{
 						items: [
 							{
@@ -448,7 +441,6 @@ export class PsTopComponent implements Component {
 						active: this.#all ? "all" : "current",
 						role: "omp.app.seg",
 					},
-					undefined,
 					"scope",
 				),
 			);
@@ -468,7 +460,7 @@ export class PsTopComponent implements Component {
 						align: "center",
 						role: "omp.app.fresh",
 					}),
-			node("icon", { name: "x", role: "omp.app.ibtn", title: "Quit  q", aria: "Quit", actions: { click: "quit" } }),
+			iconButton("x", "quit", "Quit  q", { aria: "Quit" }),
 		);
 		return keyed(
 			row(

package/src/charts/chart-plan.ts

@@ -1523,10 +1523,6 @@ export function buildChart(table: TableAnalysis, plan: ChartPlan): ChartSpec | u
 	// its rows are in different units.
 	if (arrows.length === 1 && plan.kind !== "paired" && plan.kind !== "range" && !plan.transpose)
 		return buildChart(table, { ...plan, kind: arrows[0]!.mixed ? "change" : "paired", series: [arrows[0]!.index] });
-	// A dumbbell of two measures beside their ratio (`pi-walker | Go | Speedup`): the ratio restates the gap the
-	// dumbbell draws (on a log axis its length), so the pair draws alone.
-	const pair = plan.kind === "paired" && !plan.transpose ? ratioPair(table, columns) : undefined;
-	if (pair) return buildChart(table, { ...plan, series: pair.map(column => column.index) });
 	// Unitless before/after values spanning decades are rows of different quantities, and rows of very different
 	// sizes beside a baseline column share no readable axis; their factors do (`3.95M → 190k` is 21× less).
 	// Intervals keep their values: a range chart prints the factor between a pair's midpoints beside both.
@@ -2810,31 +2806,6 @@ function againstBaseline(
 	return [baseline, ...columns.filter(column => column !== baseline)];
 }
 
-/** Relative slack within which a ratio column restates the ratio of two others (`4.1×` for 75.3 / 18.2). */
-const RATIO_SLACK = 0.05;
-
-/**
- * Of three plotted columns, the two same-unit measures when the third is their ratio (`Speedup`
- * `4.1×`, a `ratio` column) matching `a ÷ b` or `b ÷ a` within {@link RATIO_SLACK}
- * in every row holding all three, two rows at least; else `undefined`.
- */
-function ratioPair(table: TableAnalysis, columns: readonly TableColumn[]): [TableColumn, TableColumn] | undefined {
-	if (columns.length !== 3) return undefined;
-	const ratio = columns.find(column => column.dim === "ratio");
-	const rest = columns.filter(column => column !== ratio);
-	const [a, b] = rest;
-	if (!ratio || !a || !b || a.dim !== b.dim || a.unit !== b.unit || a.dim === "ratio") return undefined;
-	const near = (value: number, target: number) => Math.abs(value - target) <= RATIO_SLACK * target;
-	let matched = 0;
-	for (const row of table.rows) {
-		const [x, y, r] = [a.cells[row], b.cells[row], ratio.cells[row]];
-		if (!isNumber(x) || !isNumber(y) || !isNumber(r) || x.value <= 0 || y.value <= 0) continue;
-		if (!near(r.value, x.value / y.value) && !near(r.value, y.value / x.value)) return undefined;
-		matched++;
-	}
-	return matched >= 2 ? [a, b] : undefined;
-}
-
 /**
  * Measure columns pairing a before condition with another over the same
  * metric (`Baseline Turns` → `Iter1 Turns`, `Baseline Tokens In` → `Iter1

package/src/charts/table-data.ts

@@ -108,8 +108,10 @@ export interface TableColumn {
 	/**
 	 * Index of the measure column this one restates, read from the values: a
 	 * proportional copy (`pass` 33/38 beside `pass%` 87%, `Samples` beside `% of
-	 * Total`, `Leverage vs $200` beside the cost) or a running total of it
-	 * (`Offset` summing `Verts`). Such a column is never a measure of its own.
+	 * Total`, `Leverage vs $200` beside the cost), a running total of it
+	 * (`Offset` summing `Verts`), or its ratio to another column of its unit
+	 * (`ratio` 0.997 for `Python (ms)` ÷ `C++ (ms)`, `Speedup` 4.1×: the
+	 * numerator's index). Such a column is never a measure of its own.
 	 */
 	readonly restates?: number;
 }
@@ -906,10 +908,11 @@ function plainValue(column: TableColumn, row: number): NumberCell | undefined {
 
 /**
  * Columns restating another column's values: `y = k·x` within the written
- * precision over three or more rows where `x` varies, or a running total
- * (`Offset` stepping by `Verts`). Of a proportional pair the first column
- * stays, unless the second is a share summing to 100% beside counts or the
- * table bolded more of its cells (`**87%**` beside `33/38`).
+ * precision over three or more rows where `x` varies, a running total
+ * (`Offset` stepping by `Verts`), or the ratio of two others ({@link quotient}).
+ * Of a proportional pair the first column stays, unless the second is a share
+ * summing to 100% beside counts or the table bolded more of its cells
+ * (`**87%**` beside `33/38`).
  */
 function restatedColumns(measures: readonly TableColumn[], rows: readonly number[]): Map<number, number> {
 	const restated = new Map<number, number>();
@@ -931,9 +934,55 @@ function restatedColumns(measures: readonly TableColumn[], rows: readonly number
 		const source = measures.find(other => other !== column && runningTotal(column, other, rows));
 		if (source) restated.set(column.index, source.index);
 	}
+	const kept = measures.filter(column => !restated.has(column.index));
+	for (const ratio of kept) {
+		if (restated.has(ratio.index)) continue;
+		const terms = kept.filter(column => column !== ratio && !restated.has(column.index));
+		const over = terms
+			.flatMap(a => terms.map(b => [a, b] as const))
+			.find(([a, b]) => a !== b && quotient(ratio, a, b, rows));
+		if (over) restated.set(ratio.index, over[0].index);
+	}
 	return restated;
 }
 
+/** Most relative rounding a row's quotient may carry to count toward proving it (`2×` beside its terms proves little). */
+const LOOSE_QUOTIENT = 0.05;
+
+/**
+ * `ratio = a ÷ b` in every row holding all three, `a` and `b` in one unit
+ * (`Python (ms)` ÷ `old C++ (ms)` = `0.997`; `Go` ÷ `pi-walker` = `4.1×`),
+ * within the precision each figure is written to, over three or more rows
+ * pinned to {@link LOOSE_QUOTIENT}. Percent columns are left alone: a part's
+ * share of a whole (`Share` = `Tokens` ÷ `Total`) is a measure the table states.
+ *
+ * Bare numbers all read as counts, and of three columns related so each is
+ * the others' quotient or product (`C++ = Python ÷ ratio` holds too), the
+ * ratio is the one that varies less from row to row than both its terms:
+ * workloads of different sizes move both timings, not their ratio. Where none
+ * does, none is taken for the ratio.
+ */
+function quotient(ratio: TableColumn, a: TableColumn, b: TableColumn, rows: readonly number[]): boolean {
+	if ((ratio.dim !== "count" && ratio.dim !== "ratio") || a.dim !== b.dim || a.unit !== b.unit) return false;
+	let tight = 0;
+	const matched: (readonly [number, number, number])[] = [];
+	for (const row of rows) {
+		const [r, x, y] = [plainValue(ratio, row), plainValue(a, row), plainValue(b, row)];
+		if (!r || !x || !y) continue;
+		if (x.value <= 0 || y.value <= 0 || r.value <= 0) return false;
+		const exact = x.value / y.value;
+		const slack = writtenSlack(r) + exact * (writtenSlack(x) / x.value + writtenSlack(y) / y.value) + 1e-9 * exact;
+		if (Math.abs(r.value - exact) > slack) return false;
+		if (slack <= LOOSE_QUOTIENT * exact) tight++;
+		matched.push([r.value, x.value, y.value]);
+	}
+	if (tight < 3) return false;
+	if (ratio.dim !== a.dim) return true;
+	const spread = (at: 0 | 1 | 2) =>
+		Math.max(...matched.map(values => values[at])) / Math.min(...matched.map(values => values[at]));
+	return spread(0) < spread(1) && spread(0) < spread(2);
+}
+
 /** How many of `rows` the table bolded in `column`. */
 function emphasized(column: TableColumn, rows: readonly number[]): number {
 	return rows.filter(row => column.cells[row]?.emphasis).length;

package/src/chat/transcript-render-helpers.ts

@@ -137,9 +137,9 @@ export function buildLaunchCompletionBlock(message: CustomOrHookMessage): ToolAc
 }
 
 /**
- * Render a live IRC traffic custom message (`irc:incoming` / `irc:autoreply` /
- * `irc:relay`) as a transcript card. `getExpanded` supplies the live
- * expanded-state getter for the cached card.
+ * Render an IRC coordination custom message (`irc:incoming` / `irc:autoreply` /
+ * `irc:relay` / `irc:workpool`) as a tool-activity card. `getExpanded` supplies
+ * the live expanded-state getter for the cached card.
  */
 export function buildIrcMessageCard(message: CustomOrHookMessage, getExpanded: () => boolean): Component {
 	const details = (
@@ -161,19 +161,21 @@ export function buildIrcMessageCard(message: CustomOrHookMessage, getExpanded: (
 				: message.customType === "irc:workpool"
 					? ("workpool" as const)
 					: ("relay" as const);
-	return createIrcMessageCard(
-		{
-			kind,
-			from: details?.from,
-			to: details?.to,
-			body: kind === "incoming" ? details?.message : details?.body,
-			replyTo: details?.replyTo,
-			timestamp: message.timestamp,
-			pool: details?.pool,
-			mode: details?.mode,
-		},
-		getExpanded,
-		theme,
+	return new ToolActivityContainer(
+		createIrcMessageCard(
+			{
+				kind,
+				from: details?.from,
+				to: details?.to,
+				body: kind === "incoming" ? details?.message : details?.body,
+				replyTo: details?.replyTo,
+				timestamp: message.timestamp,
+				pool: details?.pool,
+				mode: details?.mode,
+			},
+			getExpanded,
+			theme,
+		),
 	);
 }
 

package/src/native/backend.ts

@@ -48,7 +48,7 @@ import { encodeTspJson, encodeTspMessage, type TspHello, TspReader, splitTspMess
 import type { DescribeContext, NativeChild, NativeNode, NativeSurface, NativeUiEvent } from "./node";
 import { NARROW_SHEET_COLS } from "./overlay";
 import { nativeComponentId, Reconciler } from "./reconcile";
-import { setNativeRendering } from "./state";
+import { setNativeButtons, setNativeRendering } from "./state";
 
 /** A visible TUI overlay, bottom to top. */
 export interface NativeOverlay {
@@ -199,9 +199,10 @@ function sameSet(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
  * Kinds newer than some Tern builds that answer `TERM_PROGRAM=tern`: used only
  * once the real `hello` lists them, so the optimistic start never emits a node
  * an older terminal cannot draw (`media`: files Tern loads by path; `json`:
- * raw JSON values Tern draws as its own tree).
+ * raw JSON values Tern draws as its own tree; `button`: omp's buttons, which
+ * older builds get as role-styled rows).
  */
-const UNASSUMED_KINDS: Partial<Record<TspKind, true>> = { media: true, json: true };
+const UNASSUMED_KINDS: Partial<Record<TspKind, true>> = { media: true, json: true, button: true };
 
 /**
  * The reply a v1 terminal is assumed to give before its real `hello` arrives
@@ -380,6 +381,7 @@ export class NativeBackend {
 		this.#close(this.#inline, keep);
 		this.#inline.doc?.close();
 		setNativeRendering(false);
+		setNativeButtons(false);
 		this.#useNerdSymbols(false);
 		this.#clearStallTimer();
 		// Replies no longer reach the backend: forget the queries outright.
@@ -539,6 +541,8 @@ export class NativeBackend {
 		this.#limit = hello.apc !== undefined && hello.apc > 0 ? hello.apc : TSP_DEFAULT_APC_LIMIT;
 		this.#credits = hello.credits !== undefined && hello.credits > 0 ? hello.credits : TSP_DEFAULT_CREDITS;
 		this.#cx = new NativeContext(hello, hello.cols ?? this.#cx.cols);
+		// A changed vocabulary re-describes every component (`confirm`).
+		setNativeButtons(this.#cx.supports("button"));
 		this.#sawResize = false;
 	}
 

package/src/native/describe.ts

@@ -132,10 +132,15 @@ export function elapsed(age: number, stopped?: boolean): NativeNode {
 }
 
 /**
- * Keycap for one key id (`"ctrl+o"` → keys `["ctrl", "o"]`); the terminal
- * draws platform glyphs. A literal `+` key survives (`"+"`, `"ctrl++"`).
+ * The key names of one key id (`"ctrl+o"` → `["ctrl", "o"]`), as `kbd` and
+ * `button` `keys` take them. A literal `+` key survives (`"+"`, `"ctrl++"`).
  */
-export function kbd(key: string, nodeKey?: string): NativeNode {
+export function keyNames(key: string): string[] {
 	const keys = key === "+" ? ["+"] : key.endsWith("++") ? [...key.slice(0, -2).split("+"), "+"] : key.split("+");
-	return node("kbd", { keys: keys.filter(part => part.length > 0) }, undefined, nodeKey);
+	return keys.filter(part => part.length > 0);
+}
+
+/** Keycap for one key id ({@link keyNames}); the terminal draws platform glyphs. */
+export function kbd(key: string, nodeKey?: string): NativeNode {
+	return node("kbd", { keys: keyNames(key) }, undefined, nodeKey);
 }

package/src/native/overlay.ts

@@ -1,6 +1,6 @@
 /**
- * Overlay chrome for `describe()`: root cards, key-hint footers, selectable
- * lists and annotation callouts.
+ * Overlay chrome for `describe()`: root cards, key-hint footers, buttons and
+ * segmented controls, selectable lists and annotation callouts.
  *
  * The overlay frame itself (glass, ring, placement) is the terminal's: the
  * engine wraps every overlay-stack component in an `overlay` node. An overlay
@@ -9,8 +9,9 @@
 import type { TspProps, TspSpan, TspText } from "@oh-my-pi/pi-wire";
 import { formatTooltipKey, type KeyName } from "../key-hint-format";
 import { getKeybindings, type Keybinding } from "../keybindings";
-import { card, kbd, list, node, row, span, text } from "./describe";
+import { card, kbd, keyNames, list, node, row, span, text } from "./describe";
 import type { NativeChild, NativeNode } from "./node";
+import { nativeButtons } from "./state";
 
 /** Below this many columns a centered sheet fills the pane instead of floating with margins. */
 export const NARROW_SHEET_COLS = 100;
@@ -96,29 +97,68 @@ export interface ActionButtonOptions {
 	readonly title?: string;
 	/** Target of an `open` action (URL or `file://` path). */
 	readonly href?: string;
+	/** Why the action can't run now: the button dims and a click sends nothing. */
+	readonly disabled?: string;
+	/** The button's work is running: a spinner leads the label. */
+	readonly busy?: boolean;
+	/** Icon beside the label (before it on a `button` node, after it on a row). */
+	readonly icon?: string;
 }
 
 /**
  * A native button (role `omp.btn`): a label plus an optional keycap. A click
  * sends `act` back as an `action` event (or runs a terminal-local `open`/`copy`),
  * which the component routes to the same code path as the key.
+ *
+ * A terminal that draws the `button` kind ({@link nativeButtons}) gets one
+ * (tone `accent` → variant `primary`, `error` → `danger`, `disabled` with its
+ * reason as the tooltip); older ones get the row their stylesheets draw by
+ * role. Both keep the role and tone the omp sheets' context rules key on; a
+ * disabled button's tone is `muted`.
  */
 export function actionButton(label: string, act: string, options: ActionButtonOptions = {}): NativeNode {
-	const children: NativeChild[] = [text(label)];
-	if (options.keys) children.push(kbd(options.keys));
+	const { keys, href, disabled, busy, icon } = options;
+	const title = options.title ?? (keys ? `${label}  ${formatTooltipKey(keys)}` : label);
+	const tone = disabled === undefined ? options.tone : "muted";
+	const key = options.key ?? act;
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{
+				role: "omp.btn",
+				text: label,
+				actions: { click: act },
+				title,
+				...(keys ? { keys: keyNames(keys) } : {}),
+				...(icon ? { icon } : {}),
+				...(tone === "accent" ? { variant: "primary" } : tone === "error" ? { variant: "danger" } : {}),
+				...(tone ? { tone } : {}),
+				...(disabled !== undefined ? { disabled: disabled || true } : {}),
+				...(busy ? { busy } : {}),
+				...(href ? { href } : {}),
+			},
+			undefined,
+			key,
+		);
+	}
+	const children: NativeChild[] = [];
+	if (busy) children.push(node("spinner", { style: "dots" }));
+	children.push(text(label));
+	if (icon) children.push(node("icon", { name: icon }, undefined, "icon"));
+	if (keys) children.push(kbd(keys));
 	return node(
 		"row",
 		{
 			role: "omp.btn",
 			gap: "xs",
 			align: "center",
-			actions: { click: act },
-			title: options.title ?? (options.keys ? `${label}  ${formatTooltipKey(options.keys)}` : label),
-			...(options.tone ? { tone: options.tone } : {}),
-			...(options.href ? { href: options.href } : {}),
+			...(disabled === undefined ? { actions: { click: act } } : {}),
+			title,
+			...(tone ? { tone } : {}),
+			...(href ? { href } : {}),
 		},
 		children,
-		options.key ?? act,
+		key,
 	);
 }
 
@@ -127,12 +167,80 @@ export function actionButton(label: string, act: string, options: ActionButtonOp
  * `act` (default `close`), which the component routes to its Esc path.
  */
 export function escCloseButton(act = "close", key = "esc-close"): NativeNode {
-	return node(
-		"row",
-		{ role: "omp.btn", align: "center", actions: { click: act }, title: `Close  ${formatTooltipKey("escape")}` },
-		[kbd("escape")],
-		key,
-	);
+	const title = `Close  ${formatTooltipKey("escape")}`;
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{ role: "omp.btn", keys: ["escape"], actions: { click: act }, title, aria: "Close" },
+			undefined,
+			key,
+		);
+	}
+	return node("row", { role: "omp.btn", align: "center", actions: { click: act }, title }, [kbd("escape")], key);
+}
+
+/** Options of an {@link iconButton}. */
+export interface IconButtonOptions {
+	/** Sibling identity key; unkeyed buttons take their position. */
+	readonly key?: string;
+	/** Accessible name; defaults to the title. */
+	readonly aria?: string;
+	/** A toggle that is on (role `omp.app.ibtn.set`). */
+	readonly on?: boolean;
+}
+
+/**
+ * A quiet icon-only button (role `omp.app.ibtn`, the kit's icon button) for an
+ * app head or toolbar: a `button` node where the terminal draws one
+ * ({@link nativeButtons}), else an `icon` with a click action.
+ */
+export function iconButton(name: string, act: string, title: string, options: IconButtonOptions = {}): NativeNode {
+	const role = options.on ? "omp.app.ibtn.set" : "omp.app.ibtn";
+	const aria = options.aria ?? title;
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{
+				role,
+				variant: "quiet",
+				icon: name,
+				title,
+				aria,
+				actions: { click: act },
+				...(options.on ? { on: true } : {}),
+			},
+			undefined,
+			options.key,
+		);
+	}
+	return node("icon", { name, role, title, aria, actions: { click: act } }, undefined, options.key);
+}
+
+/**
+ * A quiet text button (role `omp.app.qbtn`, the kit's quiet button) for a
+ * section head or toolbar, keyed by its action: a small quiet `button` where
+ * the terminal draws one ({@link nativeButtons}), else a row.
+ */
+export function quietButton(label: string, act: string, title: string): NativeNode {
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{ role: "omp.app.qbtn", variant: "quiet", size: "sm", text: label, actions: { click: act }, title },
+			undefined,
+			act,
+		);
+	}
+	return node("row", { role: "omp.app.qbtn", actions: { click: act }, title }, [text(label)], act);
+}
+
+/**
+ * A segmented control: `tabs` drawn as a well with a raised thumb on the
+ * active tab. A terminal that draws the `button` kind ({@link nativeButtons})
+ * draws `variant: "segmented"` too; older ones restyle the tabs by role
+ * (`omp.app.seg`) or parent.
+ */
+export function segmentedTabs(p: TspProps<"tabs">, key: string): NativeNode {
+	return node("tabs", nativeButtons() ? { ...p, variant: "segmented" } : p, undefined, key);
 }
 
 /** A row of {@link actionButton}s (role `omp.actions`); `null` entries become the spacer that end-aligns what follows. */

package/src/native/state.ts

@@ -1,10 +1,11 @@
 /**
- * Process-wide flag: a Tern Surface Protocol backend is rendering.
+ * Process-wide native rendering state, set only by the native backend.
  *
- * Components that animate by re-rendering on a timer (spinners, shimmer,
- * thinking frames, countdowns) check it and skip scheduling, because the
- * terminal clocks motion from the described nodes. Set only by the native
- * backend when a surface opens and cleared when it closes.
+ * Whether a Tern Surface Protocol backend is rendering: components that
+ * animate by re-rendering on a timer (spinners, shimmer, thinking frames,
+ * countdowns) check it and skip scheduling, because the terminal clocks
+ * motion from the described nodes. Set when a surface opens and cleared when
+ * it closes.
  */
 let active = false;
 const listeners = new Set<(on: boolean) => void>();
@@ -21,6 +22,25 @@ export function setNativeRendering(on: boolean): void {
 	for (const listener of listeners) listener(on);
 }
 
+/**
+ * Whether the live terminal draws the `button` kind (its `hello` lists it),
+ * and with it `tabs` `variant: "segmented"`. The button builders
+ * (`native/overlay.ts`) read it; older Terns get the `row` buttons they style
+ * by role. Set only by the native backend from the `hello` it adopts; false
+ * while no surface is live.
+ */
+let buttons = false;
+
+/** Whether omp's buttons go out as `button` nodes (see {@link setNativeButtons}). */
+export function nativeButtons(): boolean {
+	return buttons;
+}
+
+/** Called by the native backend when it adopts a `hello` reply and when it stops. */
+export function setNativeButtons(on: boolean): void {
+	buttons = on;
+}
+
 /** Call `listener` whenever native rendering starts or stops; returns the unsubscribe. */
 export function onNativeRenderingChange(listener: (on: boolean) => void): () => void {
 	listeners.add(listener);

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

@@ -23,7 +23,7 @@ import type { Component } from "../../tui";
 import { col, keyed, node, span, text } from "../../native/describe";
 import { Memo } from "../../native/memo";
 import type { DescribeContext, NativeNode, NativeScroll, NativeUiEvent } from "../../native/node";
-import { actionBar, actionButton } from "../../native/overlay";
+import { actionBar, actionButton, iconButton } from "../../native/overlay";
 import { CLOSE_ACTION, type PickerEvent, picker, pickerAction, pickerEvent } from "../../native/picker";
 import { type KeyId, matchesKey } from "../../keys";
 import { parseSgrMouse } from "../../mouse";
@@ -711,13 +711,12 @@ export class ExtensionDashboard implements Component {
 					text(DASHBOARD_TITLE, { role: "omp.app.title" }),
 					text([span(query ? `${shown} of ${total}` : `${total} extensions`, "muted")], { truncate: "end" }),
 				]),
-				node("icon", {
-					name: "x",
-					role: "omp.app.ibtn",
-					title: `Close  ${formatTooltipKey(boundKeys("app.interrupt", ["escape"])[0] ?? "escape")}`,
-					aria: "Close",
-					actions: { click: "close" },
-				}),
+				iconButton(
+					"x",
+					"close",
+					`Close  ${formatTooltipKey(boundKeys("app.interrupt", ["escape"])[0] ?? "escape")}`,
+					{ aria: "Close" },
+				),
 			],
 			"head",
 		);

package/src/overlays/login-dialog.ts

@@ -468,18 +468,7 @@ export class LoginDialogComponent extends OverlayPanel {
 			[
 				node("icon", { name: "link" }, undefined, "icon"),
 				keyed(shown, "url"),
-				node(
-					"row",
-					{
-						role: "omp.btn",
-						align: "center",
-						actions: { click: "copy" },
-						href: url,
-						title: "Copy the sign-in link",
-					},
-					[text("Copy")],
-					"copyLink",
-				),
+				actionButton("Copy", "copy", { key: "copyLink", href: url, title: "Copy the sign-in link" }),
 			],
 			"link",
 		);
@@ -487,20 +476,13 @@ export class LoginDialogComponent extends OverlayPanel {
 
 	/** Open sign-in page (Tern opens the link itself): the primary action while nothing waits for an answer. */
 	#describeOpen(url: string, primary: boolean): NativeNode {
-		return node(
-			"row",
-			{
-				role: "omp.btn",
-				gap: "xs",
-				align: "center",
-				actions: { click: "open" },
-				href: url,
-				title: `Open ${urlPlace(url)} in your browser`,
-				...(primary ? { tone: "accent" as const } : {}),
-			},
-			[text("Open sign-in page"), node("icon", { name: "open" }, undefined, "icon")],
-			"openLink",
-		);
+		return actionButton("Open sign-in page", "open", {
+			key: "openLink",
+			href: url,
+			title: `Open ${urlPlace(url)} in your browser`,
+			icon: "open",
+			tone: primary ? "accent" : undefined,
+		});
 	}
 
 	/** The stage running now: a spinner and what it waits for. */