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

package/src/overlays/session-selector.ts

@@ -13,7 +13,22 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "../index";
-import { formatBytes } from "@oh-my-pi/pi-utils";
+import * as path from "node:path";
+import { formatBytes, getProjectDir } from "@oh-my-pi/pi-utils";
+import type { TspPickerGroup, TspPickerItem, TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
+import { compact, kv, md, node, span } from "../native/describe";
+import {
+	picker,
+	pickerAction,
+	pickerAge,
+	pickerDate,
+	type PickerEvent,
+	pickerEvent,
+	pickerHits,
+} from "../native/picker";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { hintsRow, type NativeHint, overlayCard } from "../native/overlay";
+import { plainText } from "../native/spans";
 import { theme } from "../theme/theme";
 import { contentRowWidth } from "../chrome/selector-helpers";
 import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
@@ -27,6 +42,7 @@ export interface SessionSelectorEntry {
 	cwd: string;
 	title?: string;
 	modified: Date;
+	created?: Date;
 	size: number;
 	firstMessage: string;
 	allMessagesText: string;
@@ -39,7 +55,7 @@ import { HookSelectorComponent } from "./hook-selector";
 import { bottomBorder, OverlayPanel, row, topBorder } from "../chrome/overlay-box";
 import { MenuSelection, getMenuWindow } from "../components/menu-selection";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
-import { interruptKey } from "../chrome/keybinding-hints";
+import { boundKeys, interruptKey } from "../chrome/keybinding-hints";
 
 /**
  * Themed glyph + colored label for a session's lifecycle status, or `undefined`
@@ -64,6 +80,181 @@ function formatSessionStatus(status: SessionSelectorStatus | undefined): string
 	}
 }
 
+/** Lifecycle status as one theme-colored span (native picker), mirroring {@link formatSessionStatus}. */
+function sessionStatusSpan(status: SessionSelectorStatus | undefined): TspSpan | undefined {
+	switch (status) {
+		case "complete":
+			return span("done", "success");
+		case "interrupted":
+			return span("interrupted", "warning");
+		case "aborted":
+			return span("aborted", "muted");
+		case "error":
+			return span("error", "error");
+		case "pending":
+			return span("pending", "accent");
+		default:
+			return undefined;
+	}
+}
+
+/** Status dot tone of a session row in the native picker; none when the status is unknown. */
+function sessionStatusTone(status: SessionSelectorStatus | undefined): TspTone | undefined {
+	switch (status) {
+		case "complete":
+			return "success";
+		case "interrupted":
+			return "warning";
+		case "aborted":
+		case "error":
+			return "error";
+		case "pending":
+			return "pending";
+		default:
+			return undefined;
+	}
+}
+
+/** The name a session goes by: its title, else its first message on one line, else its id. */
+function sessionLabel(session: SessionSelectorEntry): string {
+	const title = session.title ? plainText(session.title).trim() : "";
+	return title || plainText(session.firstMessage).replace(/\s+/g, " ").trim() || session.id;
+}
+
+/** Longest prompt or answer excerpt the native preview shows. */
+const PREVIEW_EXCERPT_CHARS = 1200;
+/** The preview follows the selection once it rests this long (holding ↓ doesn't flood the wire). */
+const PREVIEW_SETTLE_MS = 60;
+const DAY_MS = 86_400_000;
+const PINNED_GROUP = { id: "pinned", label: "Pinned" };
+
+/** Day group of a session's last modification, relative to local midnight today. */
+function sessionDayGroup(modified: Date, startOfToday: number): { id: string; label: string } {
+	const at = modified.getTime();
+	if (at >= startOfToday) return { id: "today", label: "Today" };
+	if (at >= startOfToday - DAY_MS) return { id: "yesterday", label: "Yesterday" };
+	if (at >= startOfToday - 6 * DAY_MS) return { id: "week", label: "This week" };
+	return { id: "earlier", label: "Earlier" };
+}
+
+/** A cwd as dim-prefix / strong-tail path spans. */
+function cwdSpans(cwd: string): TspSpan[] {
+	const short = shortenPath(cwd);
+	const cut = short.lastIndexOf("/") + 1;
+	return cut > 0 && cut < short.length
+		? [span(short.slice(0, cut), "path dim"), span(short.slice(cut), "path")]
+		: [span(short, "path")];
+}
+
+/**
+ * The native preview of a session: its title, a fact grid, and the
+ * conversation's first prompt (user tint) plus the tail of the rest as an
+ * excerpt of the latest answer, both clipped to {@link PREVIEW_EXCERPT_CHARS}.
+ */
+function sessionPreview(session: SessionSelectorEntry, forkedFrom: string | undefined): NativeChild[] {
+	const status = sessionStatusSpan(session.status);
+	const created = session.created && !Number.isNaN(session.created.getTime()) ? session.created : undefined;
+	const first = session.firstMessage.trim();
+	const rest = session.allMessagesText.startsWith(session.firstMessage)
+		? session.allMessagesText.slice(session.firstMessage.length).trim()
+		: "";
+	const conversation = compact([
+		first.length > 0 &&
+			md(first.length > PREVIEW_EXCERPT_CHARS ? `${first.slice(0, PREVIEW_EXCERPT_CHARS)}…` : first, {
+				tone: "user",
+			}),
+		rest.length > 0 && md(rest.length > PREVIEW_EXCERPT_CHARS ? `…${rest.slice(-PREVIEW_EXCERPT_CHARS)}` : rest),
+	]);
+	return compact([
+		node("text", { text: sessionLabel(session), role: "omp.picker.title" }),
+		kv([
+			["Folder", session.cwd ? cwdSpans(session.cwd) : undefined],
+			["Created", created && pickerDate(created)],
+			["Modified", pickerDate(session.modified)],
+			["Size", formatBytes(session.size)],
+			["Status", status && [status]],
+			["Forked from", forkedFrom],
+		]),
+		conversation.length > 0 && node("section", { head: "Conversation" }, conversation),
+	]);
+}
+
+/** Relative age of a session's last modification (`"3 hours ago"`), falling back to the date after a week. */
+function formatSessionDate(date: Date): string {
+	const diffMs = Date.now() - date.getTime();
+	const diffMins = Math.floor(diffMs / 60000);
+	const diffHours = Math.floor(diffMs / 3600000);
+	const diffDays = Math.floor(diffMs / 86400000);
+
+	if (diffMins < 1) return "just now";
+	if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
+	if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
+	if (diffDays === 1) return "1 day ago";
+	if (diffDays < 7) return `${diffDays} days ago`;
+
+	return date.toLocaleDateString();
+}
+
+/** A cached native session item and the inputs it was built from. */
+interface SessionItemMemo {
+	node: NativeNode;
+	date: string;
+	pinned: boolean;
+	current: boolean;
+	showCwd: boolean;
+}
+
+/** Cached native item node on the session entry, rebuilt when its inputs change. */
+const kNativeItem = Symbol("session.nativeItem");
+
+interface NativeSessionInfo extends SessionSelectorEntry {
+	[kNativeItem]?: SessionItemMemo;
+}
+
+/** The session picker's catalogue: one item per session in scope, and the inputs it was built from. */
+interface SessionCatalogue {
+	version: number;
+	showCwd: boolean;
+	currentPath: string | undefined;
+	pinnedIds: ReadonlySet<string>;
+	minute: number;
+	items: readonly TspPickerItem[];
+	byPath: ReadonlyMap<string, TspPickerItem>;
+}
+
+/** The session list's part of the picker props, plus the memo keys it was built from. */
+interface SessionPickerView {
+	items: readonly TspPickerItem[];
+	itemsAdd?: readonly TspPickerItem[];
+	version: number;
+	query: string;
+	/** Search caret (UTF-16 offset into `query`). */
+	cursor: number;
+	order: readonly (string | TspPickerGroup)[];
+	hits?: Readonly<Record<string, readonly (readonly [number, number])[]>>;
+	selected: string | null;
+	current: readonly string[];
+	total: number;
+}
+
+/** An open delete confirmation: the session and the dialog's two answers. */
+interface DeleteChoice<T extends SessionSelectorEntry> {
+	session: T;
+	confirm(): void;
+	cancel(): void;
+}
+
+/** Transient status line above the list: scope loading or an error. */
+interface SessionPickerMessage {
+	kind: "loading" | "error";
+	text: string;
+}
+
+const SCOPE_TABS: readonly { id: "folder" | "all"; label: string }[] = [
+	{ id: "folder", label: "Current folder" },
+	{ id: "all", label: "All projects" },
+];
+
 /** Returns the IDs of sessions whose recorded prompts match a query, best first. */
 export type SessionHistoryMatcher = (query: string) => string[];
 
@@ -352,6 +543,22 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 	#hadFilterQuery = false;
 	/** Last query passed to {@link #filterSessions}; same-query refilter keeps the index. */
 	#lastFilterQuery = "";
+	/** Bumped whenever the visible session set may have changed (native memo key). */
+	#itemsVersion = 0;
+	#itemsNative:
+		| { version: number; showCwd: boolean; currentPath: string | undefined; items: NativeNode[] }
+		| undefined;
+	#listNative:
+		| { items: readonly NativeNode[]; selected: string | undefined; query: string; node: NativeNode }
+		| undefined;
+	/** Bumped when the session set itself changes (scope switch, delete): the picker catalogue's memo key. */
+	#datasetVersion = 0;
+	/** The picker catalogue (every session in scope), rebuilt only when the set, markers or minute change. */
+	#pickerCatalogue: SessionCatalogue | undefined;
+	/** Paths upserted through `itemsAdd` (history badges) since the catalogue was last sent. */
+	#pickerPatched = new Set<string>();
+	#pickerPatch: { catalogue: readonly TspPickerItem[]; flagged: string; add: readonly TspPickerItem[] } | undefined;
+	#pickerView: SessionPickerView | undefined;
 
 	constructor(
 		sessions: T[],
@@ -417,6 +624,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 
 	/** Replace the visible dataset, e.g. when toggling folder/all-projects scope. */
 	setSessions(sessions: T[], showCwd: boolean, pinnedIds?: ReadonlySet<string>): void {
+		this.#datasetVersion++;
 		this.#allSessions = sessions;
 		this.#showCwd = showCwd;
 		if (pinnedIds !== undefined) this.#pinnedIds = pinnedIds;
@@ -427,6 +635,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 
 	#filterSessions(query: string): void {
 		this.#scanGeneration++;
+		this.#itemsVersion++;
 		if (this.#scanTimer !== undefined) {
 			clearTimeout(this.#scanTimer);
 			this.#scanTimer = undefined;
@@ -511,6 +720,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 	 * prompt-history hits, literal matches (recency), and fuzzy-only hits (score).
 	 */
 	#composeFiltered(): void {
+		this.#itemsVersion++;
 		this.#fuzzyRanked.sort(compareFuzzyRank);
 		const base: T[] = [];
 		for (const match of this.#literalRanked) base.push(match.session);
@@ -570,6 +780,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 	removeSession(sessionPath: string): void {
 		const index = this.#allSessions.findIndex(s => s.path === sessionPath);
 		if (index === -1) return;
+		this.#datasetVersion++;
 		this.#allSessions.splice(index, 1);
 		// Re-filter to update the composed result set
 		this.#filterSessions(this.#searchInput.getValue());
@@ -599,6 +810,293 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		this.onSelect?.(session);
 	}
 
+	/** Native click on a session item: the same outcome as a mouse click (select + resume). */
+	confirmSession(path: string): void {
+		const index = this.#menu.visibleItems.findIndex(s => s.path === path);
+		if (index >= 0) this.selectAndConfirm(index);
+	}
+
+	/** Native row click: move the selection there, as the arrow keys would. */
+	selectSession(path: string): void {
+		if (this.#menu.setSelectedKey(path)) this.#selectionMoved = true;
+	}
+
+	/** Enter: resume the selected session. */
+	resumeSelected(): void {
+		const selected = this.#menu.selectedItem;
+		if (selected) this.onSelect?.(selected);
+	}
+
+	/** Delete / Backspace on an empty query: ask the parent to confirm deleting the selected session. */
+	requestDelete(): void {
+		const selected = this.#menu.selectedItem;
+		if (selected) this.onDeleteRequest?.(selected);
+	}
+
+	/** Empty the search query (the empty state's "Clear search"). */
+	clearSearch(): void {
+		this.#searchInput.setValue("");
+		this.#filterSessions("");
+	}
+
+	get selectedSession(): T | undefined {
+		return this.#menu.selectedItem;
+	}
+
+	/** Label of the session at `sessionPath` in this listing, else its file name. */
+	parentLabel(sessionPath: string): string {
+		const parent = this.#allSessions.find(s => s.path === sessionPath);
+		return parent ? sessionLabel(parent) : path.basename(sessionPath, ".jsonl");
+	}
+
+	/**
+	 * The session list's picker data. `items` is the whole scope and keeps its
+	 * identity while typing (rebuilt when the set, pins, the live session or
+	 * the minute change); a query changes only `order`, `hits` and
+	 * `selected`, plus `itemsAdd` upserts for prompt-history badges. Without
+	 * a query `order` groups pinned sessions, then by day (Today, Yesterday,
+	 * This week, Earlier); with one it is the flat ranking.
+	 */
+	pickerView(): SessionPickerView {
+		const catalogue = this.#catalogue();
+		const query = this.#searchInput.getValue();
+		const cursor = this.#searchInput.getCursor();
+		const selected = this.#menu.selectedKey ?? null;
+		const flagged = this.#historyFlagged();
+		const itemsAdd = this.#historyPatch(catalogue.items, catalogue.byPath, flagged);
+		const view = this.#pickerView;
+		if (
+			view?.items === catalogue.items &&
+			view.version === this.#itemsVersion &&
+			view.query === query &&
+			view.cursor === cursor &&
+			view.selected === selected &&
+			view.itemsAdd === itemsAdd
+		) {
+			return view;
+		}
+		const visible = this.#menu.visibleItems;
+		const tokens = tokenizeSessionQuery(query);
+		const order: (string | TspPickerGroup)[] = [];
+		let hits: Record<string, (readonly [number, number])[]> | undefined;
+		if (tokens.length === 0) {
+			const now = new Date();
+			const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+			// Pins lead the listing (`sortPinnedFirst`), so they get their own group ahead of the days.
+			const groups = visible.map(session =>
+				this.#pinnedIds.has(session.id) ? PINNED_GROUP : sessionDayGroup(session.modified, startOfToday),
+			);
+			for (let i = 0; i < visible.length; i++) {
+				const group = groups[i]!;
+				if (i === 0 || groups[i - 1]!.id !== group.id) {
+					let count = 1;
+					while (i + count < visible.length && groups[i + count]!.id === group.id) count++;
+					order.push({ group: `${group.id}-${i}`, label: group.label, count });
+				}
+				order.push(visible[i]!.path);
+			}
+		} else {
+			for (const session of visible) {
+				order.push(session.path);
+				const label = catalogue.byPath.get(session.path)?.label;
+				if (typeof label !== "string") continue;
+				const ranges = pickerHits(label, tokens);
+				if (ranges.length > 0) (hits ??= {})[session.path] = ranges;
+			}
+		}
+		const next: SessionPickerView = {
+			items: catalogue.items,
+			...(itemsAdd.length > 0 ? { itemsAdd } : {}),
+			version: this.#itemsVersion,
+			query,
+			cursor,
+			order,
+			...(hits ? { hits } : {}),
+			selected,
+			current: catalogue.currentPath !== undefined ? [catalogue.currentPath] : [],
+			total: this.#allSessions.length,
+		};
+		this.#pickerView = next;
+		return next;
+	}
+
+	#catalogue(): SessionCatalogue {
+		const currentPath = this.#getCurrentSessionPath();
+		const minute = Math.floor(Date.now() / 60_000);
+		const cached = this.#pickerCatalogue;
+		if (
+			cached?.version === this.#datasetVersion &&
+			cached.showCwd === this.#showCwd &&
+			cached.currentPath === currentPath &&
+			cached.pinnedIds === this.#pinnedIds &&
+			cached.minute === minute
+		) {
+			return cached;
+		}
+		const now = Date.now();
+		const byPath = new Map<string, TspPickerItem>();
+		const items = this.#allSessions.map(session => {
+			const item = this.#pickerItem(session, currentPath, now);
+			byPath.set(session.path, item);
+			return item;
+		});
+		this.#pickerPatched.clear();
+		const catalogue: SessionCatalogue = {
+			version: this.#datasetVersion,
+			showCwd: this.#showCwd,
+			currentPath,
+			pinnedIds: this.#pinnedIds,
+			minute,
+			items,
+			byPath,
+		};
+		this.#pickerCatalogue = catalogue;
+		return catalogue;
+	}
+
+	#pickerItem(session: T, currentPath: string | undefined, now: number): TspPickerItem {
+		const message = plainText(session.firstMessage).replace(/\s+/g, " ").trim();
+		const title = session.title ? plainText(session.title).trim() : "";
+		const badges: { text: string; tone?: TspTone; title?: string }[] = [];
+		if (session.parentSessionPath) {
+			badges.push({ text: "fork", title: `Forked from “${this.parentLabel(session.parentSessionPath)}”` });
+		}
+		if (session.path === currentPath) badges.push({ text: "current", tone: "accent" });
+		const when = pickerDate(session.modified);
+		const detail = this.#showCwd ? (session.cwd ? cwdSpans(session.cwd) : undefined) : title ? message : undefined;
+		const dot = sessionStatusTone(session.status);
+		return {
+			id: session.path,
+			label: title || message || session.id,
+			...(detail ? { detail } : {}),
+			facts: { when: pickerAge(session.modified, now), size: formatBytes(session.size) },
+			...(dot ? { dot } : {}),
+			...(this.#pinnedIds.has(session.id) ? { icon: "pin" } : {}),
+			...(badges.length > 0 ? { badges } : {}),
+			title: this.#showCwd && message ? `${message}\n${when}` : when,
+		};
+	}
+
+	/** Paths of the visible sessions the prompt-history merge surfaced for the current query. */
+	#historyFlagged(): string {
+		if (this.#historyIds.length === 0 || tokenizeSessionQuery(this.#searchInput.getValue()).length === 0) return "";
+		const ids = new Set(this.#historyIds);
+		const paths: string[] = [];
+		for (const session of this.#menu.visibleItems) if (ids.has(session.id)) paths.push(session.path);
+		return paths.join("\n");
+	}
+
+	/**
+	 * `itemsAdd` for the history badges: every session flagged now gets the
+	 * badge, and every one flagged since the catalogue was sent but not now
+	 * gets its plain item back (upserts stick until `items` is replaced).
+	 */
+	#historyPatch(
+		catalogue: readonly TspPickerItem[],
+		byPath: ReadonlyMap<string, TspPickerItem>,
+		flagged: string,
+	): readonly TspPickerItem[] {
+		const memo = this.#pickerPatch;
+		if (memo?.catalogue === catalogue && memo.flagged === flagged) return memo.add;
+		const now = new Set(flagged ? flagged.split("\n") : []);
+		for (const key of now) this.#pickerPatched.add(key);
+		const add: TspPickerItem[] = [];
+		for (const key of this.#pickerPatched) {
+			const base = byPath.get(key);
+			if (!base) continue;
+			add.push(
+				now.has(key)
+					? { ...base, badges: [...(base.badges ?? []), { text: "history", title: "Matched in prompt history" }] }
+					: base,
+			);
+		}
+		this.#pickerPatch = { catalogue, flagged, add };
+		return add;
+	}
+
+	get searchInput(): Input {
+		return this.#searchInput;
+	}
+
+	/**
+	 * The session list as a native `list` keyed `"list"`, items keyed by
+	 * session path. The terminal owns scrolling and virtualization; item nodes
+	 * are cached per session and the list node while nothing visible changed.
+	 */
+	describeList(): NativeNode {
+		const currentPath = this.#getCurrentSessionPath();
+		let items = this.#itemsNative;
+		if (
+			items?.version !== this.#itemsVersion ||
+			items.showCwd !== this.#showCwd ||
+			items.currentPath !== currentPath
+		) {
+			items = {
+				version: this.#itemsVersion,
+				showCwd: this.#showCwd,
+				currentPath,
+				items: this.#menu.visibleItems.map(session => this.#describeSession(session, currentPath)),
+			};
+			this.#itemsNative = items;
+		}
+		const selected = this.#menu.selectedKey;
+		const query = this.#searchInput.getValue();
+		const memo = this.#listNative;
+		if (memo?.items === items.items && memo.selected === selected && memo.query === query) return memo.node;
+		const empty: TspText = this.#showCwd
+			? [span("No sessions found", "muted")]
+			: [span("No sessions in current folder. Press ", "muted"), span("tab", "key"), span(" to view all.", "muted")];
+		const list = node(
+			"list",
+			{ selected: selected ?? null, filter: query.trim() || undefined, empty, virtual: true },
+			items.items,
+			"list",
+		);
+		this.#listNative = { items: items.items, selected, query, node: list };
+		return list;
+	}
+
+	#describeSession(session: T, currentPath: string | undefined): NativeNode {
+		const date = formatSessionDate(session.modified);
+		const pinned = this.#pinnedIds.has(session.id);
+		const current = currentPath !== undefined && session.path === currentPath;
+		const tagged = session as NativeSessionInfo;
+		const cached = tagged[kNativeItem];
+		if (
+			cached?.date === date &&
+			cached.pinned === pinned &&
+			cached.current === current &&
+			cached.showCwd === this.#showCwd
+		) {
+			return cached.node;
+		}
+		const message = plainText(session.firstMessage).replace(/\s+/g, " ").trim();
+		const detail: TspSpan[] = [];
+		const push = (part: TspSpan): void => {
+			if (detail.length > 0) detail.push(span(` ${theme.sep.dot} `, "dim"));
+			detail.push(part);
+		};
+		if (session.title && message) push(span(message, "dim"));
+		if (current) push(span("current", "accent"));
+		const status = sessionStatusSpan(session.status);
+		if (status) push(status);
+		if (session.parentSessionPath) push(span("fork", "dim"));
+		if (this.#showCwd && session.cwd) push(span(shortenPath(session.cwd), "path"));
+		const item = node(
+			"item",
+			{
+				label: (session.title && plainText(session.title)) || message || session.id,
+				detail: detail.length > 0 ? detail : undefined,
+				value: [span(`${date} ${theme.sep.dot} ${formatBytes(session.size)}`, "dim")],
+				icon: pinned ? "pin" : undefined,
+			},
+			undefined,
+			session.path,
+		);
+		tagged[kNativeItem] = { node: item, date, pinned, current, showCwd: this.#showCwd };
+		return item;
+	}
+
 	invalidate(): void {
 		// No cached state to invalidate currently
 	}
@@ -626,23 +1124,6 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 			return lines;
 		}
 
-		// Format dates
-		const formatDate = (date: Date): string => {
-			const now = new Date();
-			const diffMs = now.getTime() - date.getTime();
-			const diffMins = Math.floor(diffMs / 60000);
-			const diffHours = Math.floor(diffMs / 3600000);
-			const diffDays = Math.floor(diffMs / 86400000);
-
-			if (diffMins < 1) return "just now";
-			if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
-			if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
-			if (diffDays === 1) return "1 day ago";
-			if (diffDays < 7) return `${diffDays} days ago`;
-
-			return date.toLocaleDateString();
-		};
-
 		// Window the list around the selection by actual line height (3 lines
 		// per session, 4 when a title adds a preview line) until the viewport
 		// budget is spent, so short sessions never strand blank rows a
@@ -706,7 +1187,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 			// wrapping the whole line.
 			const dim = (s: string) => theme.fg("dim", s);
 			const dot = dim(theme.sep.dot);
-			const modified = formatDate(session.modified);
+			const modified = formatSessionDate(session.modified);
 			let metadata = `  ${dim(modified)} ${dot} ${dim(formatBytes(session.size))}`;
 			if (currentPath !== undefined && session.path === currentPath) {
 				metadata += ` ${dot} ${theme.fg("accent", "current")}`;
@@ -763,10 +1244,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 			matchesKey(keyData, "delete") ||
 			(matchesKey(keyData, "backspace") && this.#searchInput.getValue().length === 0)
 		) {
-			const selected = this.#menu.selectedItem;
-			if (selected && this.onDeleteRequest) {
-				this.onDeleteRequest(selected);
-			}
+			this.requestDelete();
 			return;
 		}
 		// Up arrow
@@ -795,10 +1273,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		}
 		// Enter
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selected = this.#menu.selectedItem;
-			if (selected && this.onSelect) {
-				this.onSelect(selected);
-			}
+			this.resumeSelected();
 			return;
 		}
 		// Escape - cancel
@@ -853,6 +1328,12 @@ export interface SessionSelectorOptions<T extends SessionSelectorEntry = Session
 	pinnedIds?: ReadonlySet<string>;
 	/** Path of the live session, or a getter so detach/newSession stays accurate. */
 	currentSessionPath?: string | (() => string | undefined);
+	/**
+	 * The picker is the whole program (`omp --resume`): the native picker
+	 * fills the screen surface (`size:"screen"`) instead of floating as a
+	 * sheet over the transcript.
+	 */
+	standalone?: boolean;
 }
 
 /**
@@ -890,6 +1371,40 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	readonly #fillHeight: boolean;
 	readonly #title: string;
 	readonly #scopeLabel: string | false | undefined;
+	/** What `#messageContainer` shows, for the native description. */
+	#message: SessionPickerMessage | undefined;
+	/** The native picker shows `#message`'s error until the next key or pointer event. */
+	#pickerErrorOpen = false;
+	readonly #standalone: boolean;
+	readonly #pickerTitle: string;
+	/** The open delete confirmation's two answers, for the picker's confirm strip. */
+	#deleteChoice: DeleteChoice<T> | null = null;
+	/** The preview pane's content and the session it shows; follows the selection once it settles. */
+	#preview: { session: T | undefined; nodes: readonly NativeChild[] } | undefined;
+	#previewPending: T | undefined;
+	#previewSettled: T | undefined;
+	#previewTimer: NodeJS.Timeout | undefined;
+	#pickerMemo:
+		| {
+				view: SessionPickerView;
+				preview: readonly NativeChild[];
+				scope: "folder" | "all";
+				message: SessionPickerMessage | undefined;
+				errorOpen: boolean;
+				choice: DeleteChoice<T> | null;
+				node: NativeNode;
+		  }
+		| undefined;
+	#nativeMemo:
+		| {
+				title: string;
+				scope: "folder" | "all";
+				message: SessionPickerMessage | undefined;
+				dialog: HookSelectorComponent | null;
+				list: NativeNode;
+				node: NativeNode;
+		  }
+		| undefined;
 
 	constructor(
 		sessions: T[],
@@ -908,6 +1423,8 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		this.#getTerminalRows = options.getTerminalRows ?? (() => 24);
 		this.#fillHeight = options.fillHeight ?? false;
 		this.#title = options.title ?? "Resume Session";
+		this.#pickerTitle = options.title ?? "Resume session";
+		this.#standalone = options.standalone ?? false;
 		this.#scopeLabel = options.scopeLabel;
 		this.title = this.#headerLabel();
 		// One spacer of breathing room; OverlayPanel supplies the two outer
@@ -973,6 +1490,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 				this.#toggling = true;
 				this.#messageContainer.clear();
 				this.#messageContainer.addChild(new Text(theme.fg("muted", "Loading all projects…"), 0, 0));
+				this.#message = { kind: "loading", text: "Loading all projects…" };
 				this.#onRequestRender?.();
 				try {
 					global = await this.#loadAllSessions();
@@ -984,6 +1502,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 				}
 				this.#globalSessions = global;
 				this.#messageContainer.clear();
+				this.#message = undefined;
 				this.#toggling = false;
 			}
 			this.#scope = "all";
@@ -1015,15 +1534,19 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	 */
 	override dispose(): void {
 		this.#sessionList.dispose();
+		clearTimeout(this.#previewTimer);
 		super.dispose();
 	}
 
 	#clearError(): void {
 		this.#messageContainer.clear();
+		this.#message = undefined;
 	}
 
 	#showError(message: string): void {
 		this.#messageContainer.clear();
+		this.#message = { kind: "error", text: `Error: ${plainText(message)}` };
+		this.#pickerErrorOpen = true;
 		this.#messageContainer.addChild(new Text(theme.fg("error", `Error: ${replaceTabs(message)}`), 0, 0));
 		this.#messageContainer.addChild(new Spacer(1));
 	}
@@ -1032,6 +1555,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		const displayName = session.title || session.firstMessage.slice(0, 40) || session.id;
 		const closeDialog = () => {
 			this.#confirmationDialog = null;
+			this.#deleteChoice = null;
 			// Restore the SessionList into the content slot so the picker is back
 			// to its normal layout on the very next render — the same frame the
 			// dialog disappears.
@@ -1039,29 +1563,39 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 			this.#contentSlot.addChild(this.#sessionList);
 			this.#onRequestRender?.();
 		};
-		this.#confirmationDialog = new HookSelectorComponent(
-			`Delete session?\n${displayName}`,
-			["Yes", "No"],
-			async (option: string) => {
-				if (option === "Yes" && this.#onDelete) {
-					this.#clearError();
-					try {
-						const deleted = await this.#onDelete(session);
-						if (deleted) {
-							this.#sessionList.removeSession(session.path);
-							this.#folderSessions = this.#folderSessions.filter(s => s.path !== session.path);
-							if (this.#globalSessions) {
-								this.#globalSessions = this.#globalSessions.filter(s => s.path !== session.path);
-							}
+		const answer = async (option: string) => {
+			if (option === "Yes" && this.#onDelete) {
+				this.#clearError();
+				try {
+					const deleted = await this.#onDelete(session);
+					if (deleted) {
+						this.#sessionList.removeSession(session.path);
+						this.#folderSessions = this.#folderSessions.filter(s => s.path !== session.path);
+						if (this.#globalSessions) {
+							this.#globalSessions = this.#globalSessions.filter(s => s.path !== session.path);
 						}
-					} catch (err) {
-						this.#showError(err instanceof Error ? err.message : String(err));
 					}
+				} catch (err) {
+					this.#showError(err instanceof Error ? err.message : String(err));
 				}
-				closeDialog();
-			},
+			}
+			closeDialog();
+		};
+		this.#confirmationDialog = new HookSelectorComponent(
+			`Delete session?\n${displayName}`,
+			["Yes", "No"],
+			answer,
 			closeDialog,
 		);
+		this.#deleteChoice = {
+			session,
+			confirm: () => {
+				// The strip goes at once; the dialog stays until the delete settles, as after Enter on "Yes".
+				this.#deleteChoice = null;
+				void answer("Yes");
+			},
+			cancel: closeDialog,
+		};
 		// Swap the SessionList out of the content slot and mount the dialog in its
 		// place: the dialog competes only with the SessionList's rendered budget,
 		// never the SessionList AND the picker chrome, so the picker frame stays
@@ -1108,8 +1642,235 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		return [row("", width), row(hint, width), row("", width), bottomBorder(width)];
 	}
 
+	/** Scope tabs replace the "(current folder)" title suffix when the scope can toggle. */
+	#hasScopeTabs(): boolean {
+		return this.#scopeLabel === undefined && this.#sessionList.onToggleScope !== undefined;
+	}
+
+	/** Over the transcript the picker is its own sheet (`layer`); the standalone app fills the screen surface. */
+	nativeSheet(cx: DescribeContext): boolean {
+		return cx.supports("picker") && !this.#standalone;
+	}
+
+	/**
+	 * With the `picker` kind: the data-first session picker (§4.7). Otherwise
+	 * scope `tabs`, loading/error message, then the search `input` and session
+	 * `list` — or the delete-confirmation dialog in their place, as on the ANSI
+	 * path — and the key-hint footer.
+	 */
+	override describe(cx: DescribeContext): NativeNode {
+		if (cx.supports("picker")) return this.#describePicker();
+		const list = this.#sessionList.describeList();
+		const memo = this.#nativeMemo;
+		if (
+			memo?.title === this.title &&
+			memo.scope === this.#scope &&
+			memo.message === this.#message &&
+			memo.dialog === this.#confirmationDialog &&
+			memo.list === list
+		) {
+			return memo.node;
+		}
+		const tabs = this.#hasScopeTabs();
+		const children: NativeChild[] = [];
+		if (tabs) children.push(node("tabs", { items: SCOPE_TABS, active: this.#scope }, undefined, "scope"));
+		const message = this.#message;
+		if (message?.kind === "loading") {
+			children.push(node("spinner", { label: [span(message.text, "muted")] }, undefined, "message"));
+		} else if (message) {
+			children.push(node("text", { spans: [span(message.text, "error")] }, undefined, "message"));
+		}
+		if (this.#confirmationDialog) {
+			children.push(this.#confirmationDialog);
+		} else {
+			children.push(this.#sessionList.searchInput, list);
+		}
+		const hints: (NativeHint | undefined)[] = [
+			{ keys: ["delete", "backspace"], label: "delete" },
+			{ keys: ["enter"], label: "select" },
+		];
+		if (this.#sessionList.onToggleScope) {
+			hints.push({ keys: ["tab"], label: this.#scope === "all" ? "current folder" : "all projects" });
+		}
+		hints.push({ keys: [boundKeys("app.interrupt", ["escape"])[0] ?? "escape"], label: "cancel" });
+		const result = overlayCard("omp.overlay.sessions", tabs ? this.#title : this.title, [
+			...children,
+			hintsRow(hints),
+		]);
+		this.#nativeMemo = {
+			title: this.title,
+			scope: this.#scope,
+			message,
+			dialog: this.#confirmationDialog,
+			list,
+			node: result,
+		};
+		return result;
+	}
+
+	/**
+	 * `lg` cards sheet (`screen` for the standalone app): This folder / All
+	 * projects tabs, sessions grouped by day (ranked flat while searching),
+	 * the selected session's preview, the delete confirm strip, and the
+	 * actions of the keys Enter, Delete/Backspace, Tab and Esc.
+	 */
+	#describePicker(): NativeNode {
+		const list = this.#sessionList;
+		const view = list.pickerView();
+		const preview = this.#previewFor(list.selectedSession);
+		const message = this.#message;
+		const errorOpen = this.#pickerErrorOpen && message?.kind === "error";
+		const choice = this.#deleteChoice;
+		const memo = this.#pickerMemo;
+		if (
+			memo?.view === view &&
+			memo.preview === preview &&
+			memo.scope === this.#scope &&
+			memo.message === message &&
+			memo.errorOpen === errorOpen &&
+			memo.choice === choice
+		) {
+			return memo.node;
+		}
+		const loading = message?.kind === "loading";
+		const toggle = list.onToggleScope !== undefined;
+		const actions = [pickerAction("resume", "Resume", "enter", { primary: true })];
+		if (this.#onDelete) actions.push(pickerAction("delete", "Delete", "backspace"));
+		if (toggle) {
+			actions.push(pickerAction("scope", this.#scope === "all" ? "This folder" : "All projects", "tab"));
+		}
+		actions.push(
+			pickerAction("close", "Close", boundKeys("app.interrupt", ["escape"])[0] ?? "escape", { end: true }),
+		);
+		const subtitle = this.#scopeLabel === false ? undefined : (this.#scopeLabel ?? path.basename(getProjectDir()));
+		const result = picker(
+			{
+				title: this.#pickerTitle,
+				...(subtitle ? { subtitle } : {}),
+				icon: "history",
+				noun: "sessions",
+				size: this.#standalone ? "screen" : "lg",
+				layout: "cards",
+				preview: "side",
+				query: view.query,
+				cursor: view.cursor,
+				placeholder: "Search sessions…",
+				...(this.#hasScopeTabs()
+					? {
+							tabs: [
+								{ id: "folder", label: "This folder" },
+								{ id: "all", label: "All projects" },
+							],
+							tab: loading ? "all" : this.#scope,
+						}
+					: {}),
+				columns: [
+					{ id: "when", format: "time" },
+					{ id: "size", format: "dim" },
+				],
+				items: view.items,
+				...(view.itemsAdd ? { itemsAdd: view.itemsAdd } : {}),
+				order: view.order,
+				...(view.hits ? { hits: view.hits } : {}),
+				selected: view.selected,
+				current: view.current,
+				total: view.total,
+				actions,
+				state: loading ? "loading" : errorOpen ? "error" : "ready",
+				...(loading || errorOpen ? { message: message!.text } : {}),
+				empty: this.#scope === "all" || !toggle ? "No sessions yet" : "No sessions in this folder yet",
+				confirm: choice
+					? {
+							text: `Delete “${sessionLabel(choice.session)}”? This removes the session file.`,
+							act: "delete-confirm",
+							label: "Delete",
+						}
+					: null,
+			},
+			preview,
+		);
+		this.#pickerMemo = { view, preview, scope: this.#scope, message, errorOpen, choice, node: result };
+		return result;
+	}
+
+	/**
+	 * The preview children for `target`: built at once for the first
+	 * selection, then only after the selection has rested
+	 * {@link PREVIEW_SETTLE_MS} (the old preview stays meanwhile).
+	 */
+	#previewFor(target: T | undefined): readonly NativeChild[] {
+		const shown = this.#preview;
+		if (shown && shown.session === target) return shown.nodes;
+		if (shown && target !== this.#previewSettled) {
+			if (this.#previewPending !== target || this.#previewTimer === undefined) {
+				clearTimeout(this.#previewTimer);
+				this.#previewPending = target;
+				this.#previewTimer = setTimeout(() => {
+					this.#previewTimer = undefined;
+					this.#previewSettled = this.#previewPending;
+					this.#onRequestRender?.();
+				}, PREVIEW_SETTLE_MS);
+			}
+			return shown.nodes;
+		}
+		const nodes = target
+			? sessionPreview(
+					target,
+					target.parentSessionPath ? this.#sessionList.parentLabel(target.parentSessionPath) : undefined,
+				)
+			: [];
+		this.#preview = { session: target, nodes };
+		return nodes;
+	}
+
+	/**
+	 * Picker pointer events run the keys' paths: a row click selects (arrows),
+	 * a second click or `Resume` resumes (Enter), `Delete` asks (Delete), the
+	 * tab or `All projects` toggles scope (Tab), `Close` cancels (Esc), and
+	 * the confirm strip answers the delete dialog (Yes / Esc).
+	 */
+	#handlePickerEvent(ev: PickerEvent): void {
+		const list = this.#sessionList;
+		const choice = this.#deleteChoice;
+		if (ev.kind !== "action") {
+			if (choice) return;
+			if (ev.kind === "select") list.selectSession(ev.item);
+			else list.confirmSession(ev.item);
+			return;
+		}
+		if (ev.act === "delete-confirm") choice?.confirm();
+		else if (ev.act === "cancel") choice?.cancel();
+		else if (ev.act === "close") {
+			if (choice) choice.cancel();
+			else list.onCancel?.();
+		} else if (choice) return;
+		else if (ev.act === "resume") list.resumeSelected();
+		else if (ev.act === "delete") list.requestDelete();
+		else if (ev.act === "scope" || (ev.act === "tab" && ev.value !== undefined && ev.value !== this.#scope)) {
+			list.onToggleScope?.();
+		} else if (ev.act === "clear") list.clearSearch();
+	}
+
+	/** Picker events (root keypath); fallback: scope tab → toggle scope, click on a session → resume it, exactly like a mouse click. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (this.#inputLocked) return;
+		const ev = pickerEvent(event);
+		if (ev) {
+			this.#pickerErrorOpen = false;
+			this.#handlePickerEvent(ev);
+			return;
+		}
+		if (event.type !== "select" && event.type !== "activate") return;
+		if (event.key === "scope") {
+			if (event.type === "select" && event.item !== this.#scope) void this.#toggleScope();
+			return;
+		}
+		if (event.key === "list" && !this.#confirmationDialog) this.#sessionList.confirmSession(event.item);
+	}
+
 	handleInput(keyData: string): void {
 		if (this.#inputLocked) return;
+		this.#pickerErrorOpen = false;
 		if (keyData.startsWith("\x1b[<")) {
 			this.#handleMouse(keyData);
 			return;