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

package/src/overlays/hook-selector.ts

@@ -30,7 +30,15 @@ import { editorKey, editorKeys } from "../chrome/keybinding-hints";
 import { formatKeyHint } from "../app-keybindings";
 import { OverlayPanel } from "../chrome/overlay-box";
 import { renderSegmentTrack } from "../chrome/segment-track";
+import { Input } from "../components/input";
 import { MenuSelection, getMenuWindow } from "../components/menu-selection";
+import type { KeyName } from "../key-hint-format";
+import { node, span } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionHint, hintsRow, overlayCard } from "../native/overlay";
+import { plainText } from "../native/spans";
+import { CLOSE_ACTION, dockedPicker, PICKER_KEY, pickerAction, pickerEvent, pickerQuery } from "../native/picker";
+import type { TspPickerItem } from "@oh-my-pi/pi-wire";
 
 /** One segment of a {@link HookSelectorSlider} — a label and an optional
  *  detail line (e.g. the resolved model name) shown beneath the track while
@@ -161,9 +169,27 @@ class OutlinedList extends Container {
  *  disabled-index lookups survive fuzzy filtering and reordering. */
 type FilteredOption = { option: HookSelectorOption; index: number };
 
+/** Plain text of an extension-supplied inline-markdown string: markers rendered away, no ANSI. */
+function plainInline(source: string, mdTheme: MarkdownTheme): string {
+	return plainText(renderInlineMarkdown(source, mdTheme));
+}
+
+const ENTER_KEYS: readonly KeyName[] = ["enter"];
+
+interface HookSelectorNativeMemo {
+	items: readonly FilteredOption[];
+	selected: string | undefined;
+	query: string;
+	slider: number;
+	countdown: NativeNode | undefined;
+	node: NativeNode;
+}
+
 export class HookSelectorComponent extends OverlayPanel {
 	#options: HookSelectorOption[];
 	#menu: MenuSelection<FilteredOption>;
+	/** The type-to-search field; its value drives `#menu`'s query. */
+	#search = Object.assign(new Input(), { prompt: "" });
 	#disabledIndices: Set<number>;
 	#selectionMarker: "radio" | "checkbox" | undefined;
 	#checkedIndices: Set<number>;
@@ -183,6 +209,24 @@ export class HookSelectorComponent extends OverlayPanel {
 	#sliderIndex: number = 0;
 	#sliderComponent: Text | undefined;
 	#lastRenderWidth: number | undefined;
+	readonly #detailLines: readonly string[];
+	readonly #helpText: string | undefined;
+	/** Described option rows by original index; `marker` is the radio state baked into the label. */
+	readonly #nativeItems = new Map<number, { marker: boolean; node: NativeNode }>();
+	/** Title/detail/hint nodes, fixed for the dialog's lifetime. */
+	#nativeStatic: { title: string; detail: NativeNode | undefined; hints: NativeNode } | undefined;
+	#nativeMemo: HookSelectorNativeMemo | undefined;
+	/** Every option as a picker row, by original index (built once; filtering only changes `order`). */
+	#pickerItems: readonly TspPickerItem[] | undefined;
+	#pickerMemo:
+		| {
+				items: readonly FilteredOption[];
+				selected: string | undefined;
+				query: string;
+				cursor: number;
+				node: NativeNode;
+		  }
+		| undefined;
 	constructor(
 		title: string,
 		options: HookSelectorOptionInput[],
@@ -190,7 +234,7 @@ export class HookSelectorComponent extends OverlayPanel {
 		onCancel: () => void,
 		opts?: HookSelectorOptions,
 	) {
-		super(title.split(/\r?\n/, 1)[0] ?? "");
+		super(title.split(/\r?\n/, 1)[0] ?? "", "omp.overlay.hook-select");
 
 		this.#options = options.map(normalizeHookSelectorOption);
 		this.#disabledIndices = new Set(
@@ -218,6 +262,8 @@ export class HookSelectorComponent extends OverlayPanel {
 		this.#onSelectCallback = onSelect;
 		this.#onCancelCallback = onCancel;
 		this.#baseTitle = this.title;
+		this.#detailLines = title.split(/\r?\n/).slice(1);
+		this.#helpText = opts?.helpText;
 		this.#onLeftCallback = opts?.onLeft;
 		this.#onRightCallback = opts?.onRight;
 		this.#onExternalEditorCallback = opts?.onExternalEditor;
@@ -536,31 +582,30 @@ export class HookSelectorComponent extends OverlayPanel {
 			this.#menu.query.trim() && total !== this.#options.length
 				? `${selectedCount}/${total} of ${this.#options.length}`
 				: `${selectedCount}/${total}`;
-		const suffix = this.#menu.query.trim() ? `  Search: ${this.#menu.query}` : "  Type to search";
-		return theme.fg("dim", `  (${count})${suffix}`);
+		if (!this.#menu.query.trim()) return theme.fg("dim", `  (${count})  Type to search`);
+		const field = this.#search.render(visibleWidth(this.#search.getValue()) + 1)[0] ?? "";
+		return `${theme.fg("dim", `  (${count})  Search: `)}${field}`;
 	}
 
-	#setSearchQuery(query: string): void {
-		this.#menu.setQuery(query, false);
+	/** Applies the search field's value to the filter. */
+	#syncSearchQuery(): void {
+		this.#menu.setQuery(this.#search.getValue(), false);
 		this.#updateList();
 	}
 
+	/** Feeds keys the selector does not bind to the search field. Backspace on an empty query and a leading space bubble. */
 	#handleSearchInput(keyData: string): boolean {
 		if (!this.#isSearchEnabled()) return false;
-
-		if (matchesKey(keyData, "backspace")) {
-			if (this.#menu.query.length === 0) return false;
-			const chars = [...this.#menu.query];
-			chars.pop();
-			this.#setSearchQuery(chars.join(""));
-			return true;
+		const before = this.#search.getValue();
+		if (before.length === 0) {
+			if (matchesKey(keyData, "backspace")) return false;
+			const printableText = extractPrintableText(keyData);
+			if (printableText !== undefined && printableText.trim().length === 0) return false;
 		}
-
-		const printableText = extractPrintableText(keyData);
-		if (printableText === undefined) return false;
-		if (this.#menu.query.length === 0 && printableText.trim().length === 0) return false;
-
-		this.#setSearchQuery(this.#menu.query + printableText);
+		const cursorBefore = this.#search.getCursor();
+		if (!this.#search.handleInput(keyData)) return false;
+		if (this.#search.getValue() !== before) this.#syncSearchQuery();
+		else if (this.#search.getCursor() !== cursorBefore) this.#updateList();
 		return true;
 	}
 
@@ -596,10 +641,6 @@ export class HookSelectorComponent extends OverlayPanel {
 			return;
 		}
 
-		if (this.#handleSearchInput(keyData)) {
-			return;
-		}
-
 		if (matchesSelectUp(keyData) || (!this.#isSearchEnabled() && matchesKey(keyData, "k"))) {
 			this.#moveSelection(-1);
 		} else if (matchesSelectDown(keyData) || (!this.#isSearchEnabled() && matchesKey(keyData, "j"))) {
@@ -621,6 +662,8 @@ export class HookSelectorComponent extends OverlayPanel {
 			else this.#onRightCallback?.();
 		} else if (this.#onExternalEditorCallback && matchesAppExternalEditor(keyData)) {
 			this.#onExternalEditorCallback();
+		} else {
+			this.#handleSearchInput(keyData);
 		}
 	}
 
@@ -636,4 +679,250 @@ export class HookSelectorComponent extends OverlayPanel {
 	override dispose(): void {
 		this.#countdown?.dispose();
 	}
+
+	/** The options as a `picker md` sheet: every option by original index, filtering sends only `order`. */
+	#describePicker(): NativeNode {
+		const items = this.#menu.visibleItems;
+		const selected = this.#menu.selectedKey;
+		const query = this.#menu.query;
+		const cursor = this.#search.getCursor();
+		const memo = this.#pickerMemo;
+		if (
+			memo &&
+			memo.items === items &&
+			memo.selected === selected &&
+			memo.query === query &&
+			memo.cursor === cursor
+		) {
+			return memo.node;
+		}
+		const mdTheme = getMarkdownTheme();
+		const fixed = this.#describeStatic(mdTheme);
+		this.#pickerItems ??= this.#options.map((option, index) => ({
+			id: String(index),
+			label: plainInline(option.label, mdTheme),
+			...(option.description ? { detail: plainInline(option.description, mdTheme) } : {}),
+			...(this.#isDisabled(index) ? { disabled: true as const } : {}),
+		}));
+		const checkbox = this.#selectionMarker === "checkbox";
+		const result = dockedPicker({
+			title: fixed.title,
+			...(this.#detailLines.length > 0 ? { subtitle: plainText(this.#detailLines.join(" ")) } : {}),
+			noun: "options",
+			size: "md",
+			layout: "rows",
+			preview: "none",
+			...pickerQuery(this.#isSearchEnabled() || query.length > 0 ? this.#search : null),
+			items: this.#pickerItems,
+			...(query.length > 0 ? { order: items.map(filtered => String(filtered.index)) } : {}),
+			selected: selected ?? null,
+			...(checkbox ? { current: [...this.#checkedIndices].map(String) } : {}),
+			total: this.#options.length,
+			empty: "No matching options",
+			actions: [pickerAction("confirm", "Select", "enter", { primary: true }), CLOSE_ACTION],
+		});
+		this.#pickerMemo = { items, selected, query, cursor, node: result };
+		return result;
+	}
+
+	/**
+	 * A plain option list is a picker sheet. Otherwise a card headed by the
+	 * title (plus the countdown `elapsed` when a timeout runs), the extra title
+	 * lines, the slider as `tabs`, the options as a `list` keyed by original
+	 * option index, the search query while typing, and the key hints.
+	 */
+	override describe(cx: DescribeContext): NativeNode {
+		if (cx.supports("picker") && !this.#slider && !this.#countdown) return this.#describePicker();
+		const items = this.#menu.visibleItems;
+		const selected = this.#menu.selectedKey;
+		const query = this.#menu.query;
+		const countdown = this.#countdown?.describe();
+		const memo = this.#nativeMemo;
+		if (
+			memo &&
+			memo.items === items &&
+			memo.selected === selected &&
+			memo.query === query &&
+			memo.slider === this.#sliderIndex &&
+			memo.countdown === countdown
+		) {
+			return memo.node;
+		}
+
+		const mdTheme = getMarkdownTheme();
+		const fixed = this.#describeStatic(mdTheme);
+		const children: NativeChild[] = [];
+		if (countdown) {
+			children.push(
+				node("row", { gap: "sm", align: "baseline" }, [node("text", { text: fixed.title }), countdown], "head"),
+			);
+		}
+		if (fixed.detail) children.push(fixed.detail);
+		if (this.#slider) children.push(...this.#describeSlider(this.#slider));
+
+		const selectedItem = this.#menu.selectedItem;
+		const rows: NativeNode[] = [];
+		for (const filtered of items) {
+			rows.push(this.#describeOption(filtered, filtered === selectedItem, mdTheme));
+		}
+		children.push(
+			node(
+				"list",
+				{
+					selected: selectedItem && !this.#menu.isDisabled(selectedItem) ? (selected ?? null) : null,
+					filter: query.trim() || undefined,
+					empty: "No matching options",
+					max: { lines: this.#maxVisible },
+				},
+				rows,
+				"list",
+			),
+		);
+		if (query) {
+			children.push(
+				node("text", { spans: [span("Search: ", "dim"), span(query)], wrap: "none" }, undefined, "search"),
+			);
+		}
+		children.push(fixed.hints);
+
+		const root = overlayCard(this.nativeRole, countdown ? undefined : fixed.title, children);
+		this.#nativeMemo = { items, selected, query, slider: this.#sliderIndex, countdown, node: root };
+		return root;
+	}
+
+	/** Pointer pick of an option does what highlighting it and pressing Enter does; a tab pick moves the slider. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		const ev = pickerEvent(event, PICKER_KEY);
+		if (ev?.kind === "action") {
+			this.#resetCountdown();
+			if (ev.act === "close" || ev.act === "cancel") this.#onCancelCallback();
+			else if (ev.act === "clear") {
+				this.#search.setValue("");
+				this.#syncSearchQuery();
+			} else if (ev.act === "confirm") {
+				const selected = this.#menu.selectedItem;
+				if (selected && !this.#menu.isDisabled(selected)) this.#onSelectCallback(selected.option.label);
+			}
+			return;
+		}
+		if (ev?.kind === "select") {
+			const index = this.#menu.visibleItems.findIndex(filtered => String(filtered.index) === ev.item);
+			const target = this.#menu.visibleItems[index];
+			if (!target || this.#menu.isDisabled(target)) return;
+			this.#resetCountdown();
+			this.#menu.setSelectedIndex(index);
+			this.#updateList();
+			return;
+		}
+		if (event.type !== "select" && event.type !== "activate") return;
+		if (event.key === "slider") {
+			const target = Number(event.item);
+			if (!Number.isInteger(target)) return;
+			this.#resetCountdown();
+			this.#moveSlider(target - this.#sliderIndex);
+			return;
+		}
+		if (event.key !== "list" && ev?.kind !== "activate") return;
+		const index = this.#menu.visibleItems.findIndex(filtered => String(filtered.index) === event.item);
+		const target = this.#menu.visibleItems[index];
+		if (!target || this.#menu.isDisabled(target)) return;
+		this.#resetCountdown();
+		this.#menu.setSelectedIndex(index);
+		this.#updateList();
+		this.#onSelectCallback(target.option.label);
+	}
+
+	#resetCountdown(): void {
+		if (!this.#countdown) return;
+		this.#countdown.reset();
+		this.#onTimeoutResetCallback?.();
+	}
+
+	#describeStatic(mdTheme: MarkdownTheme): { title: string; detail: NativeNode | undefined; hints: NativeNode } {
+		if (this.#nativeStatic) return this.#nativeStatic;
+		const detail =
+			this.#detailLines.length > 0
+				? node(
+						"text",
+						{ spans: [span(plainText(this.#detailLines.join("\n")), "accent")], wrap: "word" },
+						undefined,
+						"detail",
+					)
+				: undefined;
+		const hints =
+			this.#helpText !== undefined
+				? node("text", { spans: [span(plainText(this.#helpText), "dim")], wrap: "word" }, undefined, "hints")
+				: hintsRow([
+						actionHint(["tui.select.up", "tui.select.down"], "navigate"),
+						{ keys: ENTER_KEYS, label: "select" },
+						actionHint("tui.select.cancel", "cancel"),
+					]);
+		this.#nativeStatic = { title: plainInline(this.#baseTitle, mdTheme), detail, hints };
+		return this.#nativeStatic;
+	}
+
+	/** Caption, a `tabs` strip of the segments (active = slider index), and the active segment's detail. */
+	#describeSlider(slider: HookSelectorSlider): NativeNode[] {
+		const out: NativeNode[] = [];
+		if (slider.caption) {
+			out.push(node("text", { spans: [span(plainText(slider.caption), "dim")] }, undefined, "slider-caption"));
+		}
+		out.push(
+			node(
+				"tabs",
+				{
+					items: slider.segments.map((segment, i) => ({ id: String(i), label: plainText(segment.label) })),
+					active: String(this.#sliderIndex),
+				},
+				undefined,
+				"slider",
+			),
+		);
+		const detail = slider.segments[this.#sliderIndex]?.detail;
+		if (detail) {
+			out.push(
+				node(
+					"text",
+					{ spans: [span("↳ ", "dim"), span(plainText(detail), "muted")], wrap: "word" },
+					undefined,
+					"slider-detail",
+				),
+			);
+		}
+		return out;
+	}
+
+	/** One option `item`; radio rows re-describe only when their filled state flips. */
+	#describeOption(filtered: FilteredOption, isSelected: boolean, mdTheme: MarkdownTheme): NativeNode {
+		const { option, index } = filtered;
+		const radio = this.#selectionMarker === "radio" && index < this.#markableCount;
+		const marker = radio && isSelected;
+		const cached = this.#nativeItems.get(index);
+		if (cached && cached.marker === marker) return cached.node;
+
+		const disabled = this.#isDisabled(index);
+		const label = plainInline(option.label, mdTheme);
+		let glyph: string | undefined;
+		let glyphColor = "dim";
+		if (radio) {
+			glyph = marker ? theme.radio.selected : theme.radio.unselected;
+			if (marker && !disabled) glyphColor = "accent";
+		} else if (this.#selectionMarker === "checkbox" && index < this.#markableCount) {
+			const checked = this.#checkedIndices.has(index);
+			glyph = checked ? theme.checkbox.checked : theme.checkbox.unchecked;
+			if (checked && !disabled) glyphColor = "success";
+		}
+		const described = node(
+			"item",
+			{
+				label: glyph ? [span(`${glyph} `, glyphColor), span(label)] : [span(label)],
+				detail: option.description ? [span(plainInline(option.description, mdTheme), "muted")] : undefined,
+				disabled: disabled || undefined,
+			},
+			undefined,
+			String(index),
+		);
+		this.#nativeItems.set(index, { marker, node: described });
+		return described;
+	}
 }

package/src/overlays/hub-frame.ts

@@ -4,6 +4,11 @@ import { Stack } from "../components/layout/stack";
 import { matchesKey } from "../keys";
 import { theme } from "../theme/theme";
 import { truncateToWidth, visibleWidth } from "../utils";
+import type { TspText } from "@oh-my-pi/pi-wire";
+import { node, span, text } from "../native/describe";
+import type { NativeChild, NativeNode } from "../native/node";
+import { overlayCard } from "../native/overlay";
+import { plainText } from "../native/spans";
 
 /** A scope row shared by fullscreen hubs, with hub-specific kinds and metadata. */
 export interface SidebarEntry<TKind extends string> {
@@ -55,6 +60,81 @@ export function moveStripSelection(strip: StripState<StripChip<unknown>>, data:
 	return false;
 }
 
+/**
+ * Native sidebar: a `list` whose `item`s are keyed by entry id (the `item` of
+ * `select`/`activate` events), separators as `rule`s. Scrolling and clipping
+ * are the terminal's; `style` supplies icon, annotation and muting.
+ */
+export function describeHubSidebar<TEntry extends SidebarEntry<string>>(
+	entries: readonly TEntry[],
+	selectedId: string,
+	style: (entry: TEntry, index: number) => Pick<SidebarStyle, "icon" | "annotation" | "muted">,
+	key = "sidebar",
+): NativeNode {
+	const items: NativeNode[] = [];
+	for (let i = 0; i < entries.length; i++) {
+		const entry = entries[i]!;
+		if (entry.kind === "separator") {
+			items.push(node("rule", undefined, undefined, entry.id));
+			continue;
+		}
+		const decoration = style(entry, i);
+		items.push(
+			node(
+				"item",
+				{
+					label: decoration.icon
+						? [
+								span(`${plainText(decoration.icon)} `, "muted"),
+								span(entry.label, decoration.muted ? "dim" : undefined),
+							]
+						: [span(entry.label, decoration.muted ? "dim" : undefined)],
+					value: decoration.annotation ? plainText(decoration.annotation) : undefined,
+				},
+				undefined,
+				entry.id,
+			),
+		);
+	}
+	return node("list", { selected: selectedId }, items, key);
+}
+
+/**
+ * Native footer chip strip: a `tabs` node whose tab ids are the chip indices
+ * (`select` events carry the index as `item`), with an optional prefix label.
+ */
+export function describeHubChips(strip: StripState<StripChip<unknown>>, prefix?: TspText, key = "chips"): NativeNode {
+	const tabs = node(
+		"tabs",
+		{
+			items: strip.chips.map((chip, index) => ({ id: String(index), label: chip.label })),
+			active: String(strip.index),
+		},
+		undefined,
+		"tabs",
+	);
+	const children: NativeChild[] = prefix === undefined ? [tabs] : [text(prefix), tabs];
+	return node("row", { gap: "sm", align: "center" }, children, key);
+}
+
+/**
+ * Native fullscreen hub: a root card titled `title` over a sidebar/body row and
+ * a footer. The split geometry, ring and dividers are the terminal's.
+ */
+export function describeHubFrame(
+	role: string,
+	title: TspText,
+	sidebar: NativeChild,
+	body: NativeChild,
+	footer: NativeChild,
+): NativeNode {
+	return overlayCard(role, title, [
+		node("row", { gap: "md", align: "start", grow: 1 }, [sidebar, body], "split"),
+		node("rule", undefined, undefined, "divider"),
+		footer,
+	]);
+}
+
 /** Persistent fullscreen split frame, sidebar viewport, and footer chip renderer. */
 export class HubFrame {
 	/** Current sidebar viewport offset, shared with the hub's navigation. */

package/src/overlays/jobs-panel.ts

@@ -0,0 +1,112 @@
+/**
+ * `/jobs` output: the async background jobs of a session. ANSI keeps the
+ * caller's text report; natively it is one frame whose rows are `agent`
+ * nodes for task jobs and a status dot, the label and a live `elapsed` for
+ * the others (running first, recent below a hairline).
+ */
+import type { TspAgentProps, TspSpan } from "@oh-my-pi/pi-wire";
+import { type Component, Container } from "../tui";
+import { card, elapsed, node, span, text } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
+
+/** One async job as the session snapshots it. */
+export interface JobsPanelJob {
+	readonly id: string;
+	readonly type: string;
+	readonly status: "running" | "completed" | "failed" | "cancelled";
+	readonly label: string;
+	readonly startTime: number;
+	readonly endTime?: number;
+	/** Registry id of the subagent a task job runs. */
+	readonly agentId?: string;
+}
+
+/** Running and recently settled jobs. */
+export interface JobsPanelSnapshot {
+	readonly running: readonly JobsPanelJob[];
+	readonly recent: readonly JobsPanelJob[];
+}
+
+const AGENT_STATUS: Record<JobsPanelJob["status"], TspAgentProps["status"]> = {
+	running: "running",
+	completed: "done",
+	failed: "failed",
+	cancelled: "aborted",
+};
+
+const DOT: Record<JobsPanelJob["status"], TspSpan> = {
+	running: { t: "●", s: "accent", fx: "pulse" },
+	completed: { t: "●", s: "success" },
+	failed: { t: "●", s: "error" },
+	cancelled: { t: "●", s: "dim" },
+};
+
+/** The `/jobs` block: `ansi` renders in the terminal, the snapshot describes the native frame. */
+export class JobsPanel extends Container {
+	readonly #snapshot: JobsPanelSnapshot;
+	readonly #nowMs: number;
+	#native: { agent: boolean; node: NativeNode } | undefined;
+
+	constructor(snapshot: JobsPanelSnapshot, nowMs: number, ansi: readonly Component[]) {
+		super();
+		this.#snapshot = snapshot;
+		this.#nowMs = nowMs;
+		for (const child of ansi) this.addChild(child);
+	}
+
+	override describe(cx: DescribeContext): NativeNode {
+		const agent = cx.supports("agent");
+		if (this.#native?.agent === agent) return this.#native.node;
+		const { running, recent } = this.#snapshot;
+		const children: NativeChild[] = [];
+		if (running.length === 0 && recent.length === 0) {
+			children.push(node("text", { text: "No background jobs", role: "omp.jobs.empty" }, undefined, "empty"));
+		}
+		for (const job of running) children.push(this.#describeJob(job, agent));
+		if (recent.length > 0) {
+			children.push(
+				node(
+					"section",
+					{ head: [span("Recent", "muted")] },
+					recent.map(job => this.#describeJob(job, agent)),
+					"recent",
+				),
+			);
+		}
+		const head: TspSpan[] = [span("Background jobs", "strong")];
+		if (running.length > 0) head.push(span(` · ${running.length} running`, "muted"));
+		const described = card({ role: "omp.jobs", head }, children);
+		this.#native = { agent, node: described };
+		return described;
+	}
+
+	#describeJob(job: JobsPanelJob, agent: boolean): NativeNode {
+		const settled = job.status !== "running";
+		const age = Math.max(0, (job.endTime ?? this.#nowMs) - job.startTime);
+		if (agent && job.type === "task") {
+			return node(
+				"agent",
+				{
+					name: job.agentId ?? job.id,
+					agent: "task",
+					task: job.label,
+					status: AGENT_STATUS[job.status],
+					stats: settled ? { took: age } : { age },
+				},
+				undefined,
+				job.id,
+			);
+		}
+		return node(
+			"row",
+			{ role: "omp.jobs.row", gap: "sm", align: "center", title: `${job.id} · ${job.type} · ${job.status}` },
+			[
+				text([DOT[job.status]], { aria: job.status }),
+				text([span(job.label)], { truncate: "end", grow: 1 }),
+				text([span(job.type, "dim")]),
+				elapsed(age, settled),
+			],
+			job.id,
+		);
+	}
+}