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

package/src/overlays/jobs-panel.ts

@@ -1,13 +1,18 @@
 /**
- * `/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).
+ * The async background jobs of a session, twice: {@link JobsPanel} is the
+ * `/jobs` transcript block (ANSI keeps the caller's text report; natively one
+ * frame), {@link JobsSheet} the dismissable sheet the native jobs pill opens.
+ * Both draw task jobs as `agent` nodes and the others as a status dot, the
+ * label and a live `elapsed` (running first, recent in their own section).
  */
 import type { TspAgentProps, TspSpan } from "@oh-my-pi/pi-wire";
+import { formatDuration } from "@oh-my-pi/pi-utils";
 import { type Component, Container } from "../tui";
-import { card, elapsed, node, span, text } from "../native/describe";
-import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
+import { matchesSelectCancel } from "../keybinding-matchers";
+import { truncateToWidth } from "../utils";
+import { card, col, elapsed, node, span, text } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionBar, actionButton } from "../native/overlay";
 
 /** One async job as the session snapshots it. */
 export interface JobsPanelJob {
@@ -57,56 +62,134 @@ export class JobsPanel extends Container {
 	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);
+		const running = this.#snapshot.running.length;
+		if (running > 0) head.push(span(` · ${running} running`, "muted"));
+		const described = card({ role: "omp.jobs", head }, describeJobs(this.#snapshot, this.#nowMs, agent));
 		this.#native = { agent, node: described };
 		return described;
 	}
+}
+
+/**
+ * The jobs pill's sheet: a centred `md` glass sheet titled Background jobs
+ * that re-reads the session's jobs on every frame, so rows start, settle and
+ * move to Recent while it is open. Esc or Close dismisses it; nothing enters
+ * the transcript.
+ */
+export class JobsSheet implements Component {
+	readonly nativeOverlay = {
+		role: "omp.overlay.jobs",
+		size: "md",
+		anchor: "center",
+		head: "Background jobs",
+	} as const;
+	readonly #load: () => JobsPanelSnapshot;
+	readonly #onClose: () => void;
+	#native: { key: string; node: NativeNode } | undefined;
+
+	/** `load` returns the current jobs; it runs once per frame. */
+	constructor(load: () => JobsPanelSnapshot, onClose: () => void) {
+		this.#load = load;
+		this.#onClose = onClose;
+	}
+
+	describe(cx: DescribeContext): NativeNode {
+		const agent = cx.supports("agent");
+		const snapshot = this.#load();
+		// Elapsed nodes tick on their own; only a job starting, settling or leaving redraws.
+		const key = `${agent}|${jobsKey(snapshot.running)}|${jobsKey(snapshot.recent)}`;
+		if (this.#native?.key === key) return this.#native.node;
+		const close = actionButton("Close", "close", { keys: "escape" });
+		const described = col([...describeJobs(snapshot, Date.now(), agent), actionBar([null, close])], {
+			gap: "md",
+		});
+		this.#native = { key, node: described };
+		return described;
+	}
+
+	/** Rows for a terminal without the native surface: status, label, type and age per job. */
+	render(width: number): readonly string[] {
+		const { running, recent } = this.#load();
+		const now = Date.now();
+		const line = (job: JobsPanelJob): string => {
+			const age = formatDuration(Math.max(0, (job.endTime ?? now) - job.startTime));
+			return truncateToWidth(` ${job.status}  ${job.label}  ${job.type} ${age}`, width);
+		};
+		const lines = [truncateToWidth(` Background jobs · ${running.length} running`, width)];
+		if (running.length === 0 && recent.length === 0) lines.push(" No background jobs");
+		lines.push(...running.map(line));
+		if (recent.length > 0) lines.push(" Recent", ...recent.map(line));
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#native = undefined;
+	}
+
+	handleInput(data: string): void {
+		if (matchesSelectCancel(data)) this.#onClose();
+	}
+
+	/** Close runs what Esc runs. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "action" && event.act === "close") this.#onClose();
+	}
+}
+
+/** Identity of a job list as drawn: ids and statuses in order. */
+function jobsKey(jobs: readonly JobsPanelJob[]): string {
+	return jobs.map(job => `${job.id}:${job.status}`).join(",");
+}
+
+/** The body both views share: running rows, then a Recent section; an empty note when there are none. */
+function describeJobs(snapshot: JobsPanelSnapshot, nowMs: number, agent: boolean): NativeChild[] {
+	const { running, recent } = 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(describeJob(job, nowMs, agent));
+	if (recent.length > 0) {
+		children.push(
+			node(
+				"section",
+				{ head: [span("Recent", "muted")] },
+				recent.map(job => describeJob(job, nowMs, agent)),
+				"recent",
+			),
+		);
+	}
+	return children;
+}
 
-	#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,
-			);
-		}
+/** A task job as an `agent` node when the terminal draws them, else a dot row. */
+function describeJob(job: JobsPanelJob, nowMs: number, agent: boolean): NativeNode {
+	const settled = job.status !== "running";
+	const age = Math.max(0, (job.endTime ?? nowMs) - job.startTime);
+	if (agent && job.type === "task") {
 		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),
-			],
+			"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,
+	);
 }

package/src/overlays/model-browser.ts

@@ -10,8 +10,8 @@
 import { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import type { Model } from "@oh-my-pi/pi-ai";
 import { buildModel } from "@oh-my-pi/pi-catalog/build";
-import { modelsAreEqual } from "@oh-my-pi/pi-catalog/models";
-import type { ModelKind } from "@oh-my-pi/pi-catalog/types";
+import { getModelPricingStatus, modelsAreEqual } from "@oh-my-pi/pi-catalog/models";
+import type { ModelKind, ModelPricingStatus } from "@oh-my-pi/pi-catalog/types";
 import type { Component } from "../tui";
 import { fuzzyRank } from "../fuzzy";
 import { Input } from "../components/input";
@@ -619,10 +619,23 @@ function roleChipSpans(role: string, assignment: RoleAssignment, settings: Model
 	return spans;
 }
 
-/** Both token legs at zero cost — the condition {@link formatCostPair} renders as `free`. */
+/**
+ * The non-rate pricing state a catalog rule declared for a zero-rate row
+ * (`pricing-status`), or `undefined` when the row publishes rates or declares
+ * nothing. Undeclared zero-rate rows keep the `free` convention below.
+ */
+function declaredPricingStatus(model: Model): Exclude<ModelPricingStatus, "fixed"> | undefined {
+	if (model.pricingStatus === undefined) return undefined;
+	const status = getModelPricingStatus(model);
+	return status === "fixed" ? undefined : status;
+}
+/** No token price and no subscription-credit charge (unless a pricing state is declared). */
 function isFreeModel(model: Model): boolean {
+	const declared = declaredPricingStatus(model);
+	if (declared !== undefined) return declared === "free";
 	const cost = model.cost;
-	return !cost || (cost.input === 0 && cost.output === 0);
+	const credits = model.factoryDroidCredits;
+	return (!cost || (cost.input === 0 && cost.output === 0)) && (credits === undefined || credits === 0);
 }
 
 /** One per-million price leg: `3`, `0.25`, `12.5`; `?` when unknown. */
@@ -635,10 +648,37 @@ function formatCostLeg(n: number): string {
 	return s.includes(".") ? s.replace(/\.?0+$/, "") : s;
 }
 
-/** `$in/out` per-million cost pair; `free` when both legs are zero. */
+/**
+ * Adds Factory Droid's `N×` base Standard Credits rate to a dollar price,
+ * replacing the price when the model has no dollar reference. Neither the
+ * reference price nor the base credit rate includes live promotions.
+ */
+function withCreditBadge(model: Model, price: string): string {
+	const credits = model.factoryDroidCredits;
+	if (credits === undefined) return price;
+	const badge = `${formatCostLeg(credits)}×`;
+	return model.cost.input !== 0 || model.cost.output !== 0 ? `${price} ${badge}` : badge;
+}
+
+const PRICING_STATUS_LABELS: Record<Exclude<ModelPricingStatus, "fixed">, { short: string; detail: string }> = {
+	free: { short: "free", detail: "free" },
+	included: { short: "included", detail: "included" },
+	variable: { short: "varies", detail: "price varies" },
+	unknown: { short: "unknown", detail: "pricing unknown" },
+};
+
+/** `$in/out` per-million cost pair with any credit badge; `free` when nothing is charged; a declared pricing state otherwise. */
 function formatCostPair(model: Model): string {
+	const declared = declaredPricingStatus(model);
+	if (declared !== undefined) return PRICING_STATUS_LABELS[declared].short;
 	if (isFreeModel(model)) return "free";
-	return `$${formatCostLeg(model.cost.input)}/${formatCostLeg(model.cost.output)}`;
+	return withCreditBadge(model, `$${formatCostLeg(model.cost.input)}/${formatCostLeg(model.cost.output)}`);
+}
+
+/** Detail-pane price fact: `$3/15 per M`, or the declared pricing state in words. */
+function formatCostDetail(model: Model): string {
+	const declared = declaredPricingStatus(model);
+	return declared !== undefined ? PRICING_STATUS_LABELS[declared].detail : `${formatCostPair(model)} per M`;
 }
 
 /** Fact columns of a model picker (Stencil `NATIVE_REDESIGN.md` §4.7); the lowest priority hides first. */
@@ -649,18 +689,22 @@ export const MODEL_PICKER_COLUMNS: readonly TspPickerColumn[] = [
 	{ id: "price", head: "$/M", format: "price", priority: 3 },
 ];
 
-/** `$3·15` price fact of a picker row (`free` at zero cost). */
+/** `$3·15` price fact of a picker row; `free` at zero cost; a declared pricing state otherwise. */
 function pickerPrice(model: Model): string {
+	const declared = declaredPricingStatus(model);
+	if (declared !== undefined) return PRICING_STATUS_LABELS[declared].short;
 	if (isFreeModel(model)) return "free";
-	return `$${formatCostLeg(model.cost.input)}·${formatCostLeg(model.cost.output)}`;
+	return withCreditBadge(model, `$${formatCostLeg(model.cost.input)}·${formatCostLeg(model.cost.output)}`);
 }
 
 /** `$2 in · $10 out · $0.2 cache` for a model preview. */
 function previewPrice(model: Model): string {
+	const declared = declaredPricingStatus(model);
+	if (declared !== undefined) return PRICING_STATUS_LABELS[declared].detail;
 	const cost = model.cost;
 	const parts = [`$${formatCostLeg(cost.input)} in`, `$${formatCostLeg(cost.output)} out`];
 	if (cost.cacheRead > 0) parts.push(`$${formatCostLeg(cost.cacheRead)} cache`);
-	return parts.join(" · ");
+	return withCreditBadge(model, parts.join(" · "));
 }
 
 /** The omp theme token of a thinking level's dot (`thinkingHigh`); none for inherit and auto. */
@@ -1301,7 +1345,7 @@ export class ModelBrowser implements Component {
 		if (model.isRecommended) facts.push("recommended");
 		if (model.contextWindow) facts.push(`${formatNumber(model.contextWindow).toLowerCase()} ctx`);
 		if (model.maxTokens) facts.push(`${formatNumber(model.maxTokens).toLowerCase()} out`);
-		facts.push(`${formatCostPair(model)} per M`);
+		facts.push(formatCostDetail(model));
 		if (model.reasoning) facts.push("reasoning");
 		if (model.input.includes("image")) facts.push("vision");
 		const intelligence = formatIntelligence(model);
@@ -1564,7 +1608,7 @@ export class ModelBrowser implements Component {
 			const facts: string[] = [];
 			if (model.contextWindow) facts.push(`${formatNumber(model.contextWindow).toLowerCase()} ctx`);
 			if (model.maxTokens) facts.push(`${formatNumber(model.maxTokens).toLowerCase()} out`);
-			facts.push(`${formatCostPair(model)} per M`);
+			facts.push(formatCostDetail(model));
 			if (model.reasoning) facts.push("reasoning");
 			if (model.input.includes("image")) facts.push("vision");
 			const intelligence = formatIntelligence(model);
@@ -1881,7 +1925,7 @@ export class ModelBrowser implements Component {
 			const facts: { k: TspText; v: TspText }[] = [];
 			if (ctx > 0) facts.push({ k: "ctx", v: formatNumber(ctx).toLowerCase() });
 			if (out > 0) facts.push({ k: "out", v: formatNumber(out).toLowerCase() });
-			facts.push({ k: "price", v: isFreeModel(model) ? "free" : `${formatCostPair(model)} per M` });
+			facts.push({ k: "price", v: isFreeModel(model) ? "free" : formatCostDetail(model) });
 			facts.push({ k: "reasoning", v: model.reasoning ? "yes" : "no" });
 			const children: NativeChild[] = [node("kv", { items: facts, layout: "inline" })];
 			const chips: NativeChild[] = [];

package/src/overlays/model-hub.ts

@@ -152,6 +152,8 @@ export interface ModelHubCallbacks {
 	onFallbackChainChange?: (role: string, chain: string[]) => void;
 	/** Locked provider activation: forward to the /login flow. */
 	onLoginRequest?: (providerId: string) => void;
+	/** Save the current role assignments and default thinking level as a named model preset. */
+	onSavePreset?: (name: string) => void;
 	/** Persist a new quick-switch cycle order (the ctrl+p role cycle). */
 	onCycleOrderChange?: (order: string[]) => void;
 	onCancel: () => void;
@@ -204,13 +206,14 @@ type StripState =
 			initialThinkingLevel?: ConfiguredThinkingLevel;
 	  })
 	| {
-			/** Footer text input naming a new custom role. */
-			kind: "roleName";
+			/** Footer text input naming a new role, or saving a model preset. */
+			kind: "name";
+			purpose: "role" | "preset";
 			input: Input;
 	  };
 
 /** A Roles-view command; keys and the picker's action bar both run {@link ModelHubComponent}'s `#runRolesAction`. */
-type RolesAction = "pick" | "clear" | "fallback" | "cycle" | "earlier" | "later" | "new" | "thinking";
+type RolesAction = "pick" | "clear" | "fallback" | "cycle" | "earlier" | "later" | "new" | "thinking" | "save";
 
 /** Printable keys of the Roles view and the command each runs. */
 const ROLES_ACTION_KEYS: Record<string, RolesAction> = {
@@ -221,6 +224,7 @@ const ROLES_ACTION_KEYS: Record<string, RolesAction> = {
 	"]": "later",
 	n: "new",
 	t: "thinking",
+	s: "save",
 };
 
 /** Picker fact columns of the Roles view. */
@@ -1429,7 +1433,7 @@ export class ModelHubComponent implements Component {
 
 	#activateStripChip(): void {
 		const strip = this.#strip;
-		if (!strip || strip.kind === "roleName") return;
+		if (!strip || strip.kind === "name") return;
 		const chip = strip.chips[strip.index];
 		if (!chip) return;
 		switch (chip.action) {
@@ -1654,15 +1658,26 @@ export class ModelHubComponent implements Component {
 		this.#refreshAfterMutation();
 	}
 
-	/** Open the footer name input that creates a new custom role. */
-	#openRoleNameStrip(): void {
-		this.#strip = { kind: "roleName", input: new Input() };
+	/** Open the footer name input: a new custom role, or saving the current setup as a model preset. */
+	#openNameStrip(purpose: "role" | "preset"): void {
+		this.#strip = { kind: "name", purpose, input: new Input() };
+	}
+
+	/** Validate and commit the name strip: a new role jumps into assigning it, a preset name saves it. */
+	#submitNameStrip(): void {
+		const strip = this.#strip;
+		if (strip?.kind !== "name") return;
+		if (strip.purpose === "preset") {
+			this.#submitPresetName();
+			return;
+		}
+		this.#submitRoleName();
 	}
 
 	/** Validate and commit the new-role name: jump straight into assigning it. */
 	#submitRoleName(): void {
 		const strip = this.#strip;
-		if (strip?.kind !== "roleName") return;
+		if (strip?.kind !== "name" || strip.purpose !== "role") return;
 		const name = strip.input.getValue().trim();
 		if (!/^[a-zA-Z][\w-]*$/.test(name)) return;
 		if (this.#visibleRoleIds().includes(name)) return;
@@ -1671,6 +1686,18 @@ export class ModelHubComponent implements Component {
 		this.#startAssign(name);
 	}
 
+	/** Validate and commit the preset name: save the current setup under it (overwrites). */
+	#submitPresetName(): void {
+		const strip = this.#strip;
+		if (strip?.kind !== "name" || strip.purpose !== "preset") return;
+		const name = strip.input.getValue().trim();
+		if (!/^[a-zA-Z][\w-]*$/.test(name)) return;
+		this.#strip = null;
+		this.#frame.chipRanges = [];
+		this.#callbacks.onSavePreset?.(name);
+		this.#refreshAfterMutation();
+	}
+
 	// ═══════════════════════════════════════════════════════════════════════
 	// Input
 	// ═══════════════════════════════════════════════════════════════════════
@@ -1841,9 +1868,9 @@ export class ModelHubComponent implements Component {
 			this.#closeStrip();
 			return;
 		}
-		if (strip.kind === "roleName") {
+		if (strip.kind === "name") {
 			if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
-				this.#submitRoleName();
+				this.#submitNameStrip();
 				return;
 			}
 			strip.input.handleInput(data);
@@ -1895,7 +1922,7 @@ export class ModelHubComponent implements Component {
 				this.#startAssignFallbackKey();
 				return;
 			case "newRole":
-				this.#openRoleNameStrip();
+				this.#openNameStrip("role");
 				return;
 			case "separator":
 				return;
@@ -2001,7 +2028,10 @@ export class ModelHubComponent implements Component {
 				return;
 			}
 			case "new":
-				this.#openRoleNameStrip();
+				this.#openNameStrip("role");
+				return;
+			case "save":
+				if (this.#callbacks.onSavePreset) this.#openNameStrip("preset");
 				return;
 			case "thinking":
 				if (role) {
@@ -2036,7 +2066,7 @@ export class ModelHubComponent implements Component {
 		// Footer strip chips (columns stay in frame coordinates).
 		if (footerColumn !== undefined && this.#strip) {
 			const strip = this.#strip;
-			if (event.leftClick && strip.kind !== "roleName" && this.#frame.selectChipAt(strip, footerColumn)) {
+			if (event.leftClick && strip.kind !== "name" && this.#frame.selectChipAt(strip, footerColumn)) {
 				this.#activateStripChip();
 			}
 			return true;
@@ -2472,7 +2502,10 @@ export class ModelHubComponent implements Component {
 		const altLeftRight = formatKeyHints(["alt+left", "alt+right"]);
 		const strip = this.#strip;
 		if (strip) {
-			if (strip.kind === "roleName") {
+			if (strip.kind === "name") {
+				if (strip.purpose === "preset") {
+					return `${enter} save preset · ${cancel} cancel`;
+				}
 				return `${enter} create + pick model · ${cancel} cancel`;
 			}
 			if (strip.kind === "role") return `${leftRight} choose · ${enter} assign/clear · ${cancel} cancel`;
@@ -2517,7 +2550,8 @@ export class ModelHubComponent implements Component {
 			// open — an assigned role whose model has thinking levels to offer.
 			const editable = row?.kind === "role" && this.#roleThinkingTarget(row.role) !== undefined;
 			const thinking = editable ? ` · ${formatKeyHint("t")} thinking` : "";
-			return `${upDown} rows · ${enter} pick · ${formatKeyHint("f")} fallback · ${formatKeyHint("x")} clear${thinking} · ${formatKeyHint("c")} cycle · [/] reorder · ${formatKeyHint("n")} new`;
+			const savePreset = this.#callbacks.onSavePreset ? ` · ${formatKeyHint("s")} save preset` : "";
+			return `${upDown} rows · ${enter} pick · ${formatKeyHint("f")} fallback · ${formatKeyHint("x")} clear${thinking} · ${formatKeyHint("c")} cycle · [/] reorder · ${formatKeyHint("n")} new${savePreset}`;
 		}
 		if (entry.kind === "provider" && entry.locked) {
 			return entry.oauth
@@ -2541,9 +2575,11 @@ export class ModelHubComponent implements Component {
 	}
 
 	#renderStrip(width: number, strip: StripState): string {
-		if (strip.kind === "roleName") {
-			const label = theme.fg("accent", "New role name:");
-			const inputWidth = Math.max(8, Math.min(32, width - visibleWidth("New role name:") - 24));
+		if (strip.kind === "name") {
+			const preset = strip.purpose === "preset";
+			const labelText = preset ? "Preset name:" : "New role name:";
+			const label = theme.fg("accent", labelText);
+			const inputWidth = Math.max(8, Math.min(32, width - visibleWidth(labelText) - 24));
 			const inputLine = strip.input.render(inputWidth)[0] ?? "";
 			return truncateToWidth(`${label} ${inputLine} ${theme.fg("dim", "(letters, digits, - and _)")}`, width);
 		}
@@ -2668,7 +2704,7 @@ export class ModelHubComponent implements Component {
 					// A chip click picks and applies it, like the footer mouse path.
 					const strip = this.#strip;
 					const index = Number(event.item);
-					if (!strip || strip.kind === "roleName" || !Number.isInteger(index) || !strip.chips[index]) return;
+					if (!strip || strip.kind === "name" || !Number.isInteger(index) || !strip.chips[index]) return;
 					strip.index = index;
 					this.#activateStripChip();
 					break;
@@ -3184,8 +3220,13 @@ export class ModelHubComponent implements Component {
 		if (this.#assignmentPending) return [CLOSE_ACTION];
 		if (strip) {
 			const apply =
-				strip.kind === "roleName"
-					? pickerAction("roleName", "Create role", "enter", { primary: true })
+				strip.kind === "name"
+					? pickerAction(
+							strip.purpose === "preset" ? "presetName" : "roleName",
+							strip.purpose === "preset" ? "Save preset" : "Create role",
+							"enter",
+							{ primary: true },
+						)
 					: pickerAction(
 							"stripApply",
 							strip.kind === "thinking" ? "Apply" : strip.kind === "scope" ? "Save to scope" : "Assign / clear",
@@ -3220,6 +3261,7 @@ export class ModelHubComponent implements Component {
 						this.#roleThinkingTarget(row.role) ? roleAction("thinking", "Thinking", "t") : undefined,
 						roleAction("cycle", this.#cycleOrder().includes(row.role) ? "Leave cycle" : "Add to cycle", "c"),
 						roleAction("new", "New role", "n"),
+						this.#callbacks.onSavePreset ? roleAction("save", "Save preset", "s") : undefined,
 					);
 					break;
 				}
@@ -3266,9 +3308,13 @@ export class ModelHubComponent implements Component {
 
 	/** The open strip as the picker's chip strip (role assignment, save scope, thinking level, new role name). */
 	#pickerStrip(strip: StripState): NonNullable<TspPickerProps["strip"]> {
-		if (strip.kind === "roleName") {
+		if (strip.kind === "name") {
 			return {
-				label: [span("New role name ", "muted"), span(strip.input.getValue(), "mono"), span("▏", "accent")],
+				label: [
+					span(strip.purpose === "preset" ? "Preset name " : "New role name ", "muted"),
+					span(strip.input.getValue(), "mono"),
+					span("▏", "accent"),
+				],
 				items: [],
 			};
 		}
@@ -3562,7 +3608,7 @@ export class ModelHubComponent implements Component {
 			case "strip": {
 				const strip = this.#strip;
 				const index = Number(value);
-				if (!strip || strip.kind === "roleName" || !Number.isInteger(index) || !strip.chips[index]) return;
+				if (!strip || strip.kind === "name" || !Number.isInteger(index) || !strip.chips[index]) return;
 				strip.index = index;
 				this.#activateStripChip();
 				return;
@@ -3573,6 +3619,9 @@ export class ModelHubComponent implements Component {
 			case "roleName":
 				this.#submitRoleName();
 				return;
+			case "presetName":
+				this.#submitPresetName();
+				return;
 			case "cancel":
 				if (this.#strip) this.#closeStrip();
 				return;
@@ -3622,16 +3671,17 @@ export class ModelHubComponent implements Component {
 	#describeStrip(): NativeNode | undefined {
 		const strip = this.#strip;
 		if (!strip) return undefined;
-		if (strip.kind === "roleName") {
+		if (strip.kind === "name") {
+			const preset = strip.purpose === "preset";
 			return node(
 				"row",
 				{ gap: "sm", align: "center" },
 				[
-					text([span("New role name:", "accent")]),
+					text([span(preset ? "Preset name:" : "New role name:", "accent")]),
 					col([strip.input], { grow: 1 }),
 					text([span("(letters, digits, - and _)", "dim")]),
 				],
-				"roleName",
+				preset ? "presetName" : "roleName",
 			);
 		}
 		let prefix: TspSpan[];
@@ -3674,8 +3724,10 @@ export class ModelHubComponent implements Component {
 		const strip = this.#strip;
 		if (strip) {
 			switch (strip.kind) {
-				case "roleName":
-					return [keys("create + pick model", "enter"), cancel("cancel")];
+				case "name":
+					return strip.purpose === "preset"
+						? [keys("save preset", "enter"), cancel("cancel")]
+						: [keys("create + pick model", "enter"), cancel("cancel")];
 				case "role":
 					return [keys("choose", "left", "right"), keys("assign/clear", "enter"), cancel("cancel")];
 				case "scope":
@@ -3741,6 +3793,7 @@ export class ModelHubComponent implements Component {
 				keys("cycle", "c"),
 				reorder,
 				keys("new", "n"),
+				this.#callbacks.onSavePreset ? keys("save preset", "s") : undefined,
 			];
 		}
 		if (entry.kind === "provider" && entry.locked) {