@linxiraos/pi-tui 1.3.1 → 1.4.0

package/src/overlays/session-selector.ts

@@ -29,6 +29,19 @@ import {
 import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
 import { hintsRow, type NativeHint, overlayCard } from "../native/overlay";
 import { plainText } from "../native/spans";
+import { tuiText, tuiTextFmt } from "../i18n";
+import {
+	buildResumePickerModel,
+	nextResumeScope,
+	type ResumeDirectoryLike,
+	type ResumePickerModel,
+	type ResumeScopeInputLike,
+	type ResumeScopeKindLike,
+	type ResumeSourceLike,
+	resumeConversationContext,
+	resumeConversationPreview,
+	resumeScopeLabel,
+} from "./resume-picker";
 import { theme } from "../theme/theme";
 import { contentRowWidth } from "../chrome/selector-helpers";
 import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
@@ -52,6 +65,20 @@ export interface SessionSelectorEntry {
 }
 import { shortenPath } from "../render/render-utils";
 import { HookSelectorComponent } from "./hook-selector";
+import { ResumeTreeComponent, type ResumeTreeSource } from "./resume-tree";
+
+export type {
+	ResumeConversationLike,
+	ResumeDirectoryLike,
+	ResumeProjectLike,
+	ResumeQueryLike,
+	ResumeScopeInputLike,
+	ResumeScopeKindLike,
+	ResumeSourceLike,
+	ResumeViewLike,
+	ResumeViewRowLike,
+	ResumeWorkspaceLike,
+} from "./resume-picker";
 import { bottomBorder, OverlayPanel, row, topBorder } from "../chrome/overlay-box";
 import { MenuSelection, getMenuWindow } from "../components/menu-selection";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
@@ -563,6 +590,12 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		| undefined;
 	/** Bumped when the session set itself changes (scope switch, delete): the picker catalogue's memo key. */
 	#datasetVersion = 0;
+	/**
+	 * Resume-model mode: the component owns the visible order (built from the
+	 * resume view), so this list only mirrors it and search filtering happens
+	 * in the model instead of here.
+	 */
+	#resumeDriven = false;
 	/** 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. */
@@ -643,6 +676,26 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		this.#selectCurrentSession();
 	}
 
+	/**
+	 * Resume-model mode: the given sessions are already the model's ordered,
+	 * filtered view, so mirror them and keep the selection when it survives.
+	 */
+	syncSessions(sessions: readonly T[], preferredPath?: string | null): void {
+		this.#resumeDriven = true;
+		if (this.#menu.visibleItems === sessions && (preferredPath == null || this.#menu.selectedKey === preferredPath)) {
+			return;
+		}
+		const selected = preferredPath ?? this.#menu.selectedKey;
+		const keep = selected && sessions.some(session => session.path === selected) ? selected : sessions[0]?.path;
+		this.#menu.setItems(sessions, keep);
+	}
+
+	/** Search query changed while resume-driven: the model rebuilds the rows, not this list. */
+	#resumeQueryChanged(): void {
+		this.#itemsVersion++;
+		this.onRequestRender?.();
+	}
+
 	#filterSessions(query: string): void {
 		this.#scanGeneration++;
 		this.#itemsVersion++;
@@ -799,9 +852,16 @@ 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);
+		if (index !== -1) {
+			this.#datasetVersion++;
+			this.#allSessions.splice(index, 1);
+		}
+		if (this.#resumeDriven) {
+			// The host owns the resume view; the picker hides the path itself.
+			const remain = this.#menu.visibleItems.filter(session => session.path !== sessionPath);
+			this.#menu.setItems(remain, remain[0]?.path);
+			return;
+		}
 		// Re-filter to update the composed result set
 		this.#filterSessions(this.#searchInput.getValue());
 		// Adjust selection if we deleted the last item or beyond
@@ -856,6 +916,10 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 	/** Empty the search query (the empty state's "Clear search"). */
 	clearSearch(): void {
 		this.#searchInput.setValue("");
+		if (this.#resumeDriven) {
+			this.#resumeQueryChanged();
+			return;
+		}
 		this.#filterSessions("");
 	}
 
@@ -1130,17 +1194,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		lines.push(""); // Blank line after search
 
 		if (this.#menu.visibleItems.length === 0) {
-			if (this.#showCwd) {
-				lines.push(truncateToWidth(theme.fg("muted", "No sessions found"), width));
-			} else {
-				// "Current folder" scope - hint to try "all"
-				lines.push(
-					truncateToWidth(
-						theme.fg("muted", `No sessions in current folder. Press ${formatKeyHint("tab")} to view all.`),
-						width,
-					),
-				);
-			}
+			lines.push(truncateToWidth(theme.fg("muted", "No sessions found"), width));
 			return lines;
 		}
 
@@ -1325,7 +1379,8 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		}
 		// Pass everything else to search input
 		this.#searchInput.handleInput(keyData);
-		this.#filterSessions(this.#searchInput.getValue());
+		if (this.#resumeDriven) this.#resumeQueryChanged();
+		else this.#filterSessions(this.#searchInput.getValue());
 	}
 }
 
@@ -1336,6 +1391,17 @@ export interface SessionSelectorOptions<T extends SessionSelectorEntry = Session
 	loadAllSessions?: () => Promise<T[]>;
 	/** Preloaded all-projects list; cached so the first Tab toggle is instant. */
 	allSessions?: T[];
+	/**
+	 * The host's resume model (project → workspace → conversation) and its
+	 * pure view builder. When set, the native `picker` describes the resume
+	 * tree instead of the flat day-grouped list; the ANSI path is unchanged.
+	 */
+	resumeSource?: ResumeSourceLike;
+	/**
+	 * What delete does to the session file: an in-session picker moves it to
+	 * the trash, `--resume` deletes it permanently. Wording only.
+	 */
+	deleteMode?: "trash" | "permanent";
 	/** Picker heading; defaults to "Resume Session". */
 	title?: string;
 	/** Primary action label; defaults to "Resume" (ANSI footer defaults to "select"). */
@@ -1373,10 +1439,53 @@ export interface SessionSelectorOptions<T extends SessionSelectorEntry = Session
 }
 
 /**
- * Component that renders a session selector with optional confirmation dialog
+ * One footer line: key hints left, mouse hints right. Hints drop from the end
+ * of the key list first, then the mouse list truncates, so the line always
+ * fits the panel's inner width.
  */
+function composeFooter(width: number, keys: readonly string[], mouse: readonly string[]): string {
+	const contentWidth = Math.max(1, width - 4);
+	const rightText = mouse.join(` ${theme.sep.dot} `);
+	const right = theme.fg("dim", `[${rightText}]`);
+	const rightWidth = visibleWidth(right);
+	const kept = [...keys];
+	const leftText = () => theme.fg("muted", `[${kept.join(` ${theme.sep.dot} `)}]`);
+	const gap = 2;
+	while (kept.length > 0 && visibleWidth(leftText()) + gap + rightWidth > contentWidth) kept.pop();
+	const left = kept.length > 0 ? leftText() : "";
+	if (!left)
+		return truncateToWidth(
+			rightWidth > contentWidth ? right : `${" ".repeat(Math.max(0, contentWidth - rightWidth))}${right}`,
+			contentWidth,
+		);
+	const room = contentWidth - visibleWidth(left) - gap;
+	if (room < rightWidth) {
+		const truncated = truncateToWidth(right, Math.max(0, room));
+		return truncateToWidth(left + " ".repeat(gap) + truncated, contentWidth);
+	}
+	return left + " ".repeat(contentWidth - visibleWidth(left) - rightWidth) + right;
+}
+
+/** Component that renders a session selector with optional confirmation dialog. */
 export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSelectorEntry> extends OverlayPanel {
 	#sessionList: SessionList<T>;
+	/**
+	 * ANSI three-level resume tree. Mounted lazily on the first ANSI frame: the
+	 * native picker owns its own event model, so mounting the tree up front
+	 * would swallow the raw keys the native path never sends through here.
+	 */
+	#resumeTree: ResumeTreeComponent | undefined;
+	#resumeHandlers:
+		| {
+				onSelect: (session: T) => void;
+				onCancel: () => void;
+				onExit: () => void;
+		  }
+		| undefined;
+	#resumeTreeSource: ResumeTreeSource | undefined;
+	/** True once the terminal answered with native `picker` support. */
+	#nativePicker = false;
+	readonly #getTerminalRowsOption: (() => number) | undefined;
 	#confirmationDialog: HookSelectorComponent | null = null;
 	// Hosts whichever of `#sessionList` / `#confirmationDialog` is live this
 	// frame. The delete dialog REPLACES the list in this slot rather than being
@@ -1414,6 +1523,43 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	/** The native picker shows `#message`'s error until the next key or pointer event. */
 	#pickerErrorOpen = false;
 	readonly #standalone: boolean;
+	/** The host's resume model; absent keeps the flat day-grouped picker. */
+	readonly #resumeSource?: ResumeSourceLike;
+	/** The live session's path, used to resolve unfixed resume scopes and mark `current`. */
+	readonly #getCurrentSessionPath: () => string | undefined;
+	/** Delete wording: in-session moves to the trash, `--resume` deletes permanently. */
+	readonly #deleteMode: "trash" | "permanent";
+	/** The active resume scope (workspace → project → all); expanded keys pin the current group. */
+	#resumeScope: ResumeScopeInputLike;
+	/** Conversations deleted in this view; the directory is host-owned and not rebuilt here. */
+	readonly #resumeHidden = new Set<string>();
+	#resumeModelMemo:
+		| {
+				source: ResumeSourceLike;
+				directory: ResumeDirectoryLike | null;
+				query: string;
+				scopeKey: string;
+				currentPath: string | undefined;
+				hidden: number;
+				showCwd: boolean;
+				model: ResumePickerModel | undefined;
+		  }
+		| undefined;
+	#resumeSessionsMemo: { model: ResumePickerModel; sessions: readonly T[] } | undefined;
+	#resumeLoadingMemo:
+		| { source: ResumeSourceLike; error: string | undefined; query: string; cursor: number; node: NativeNode }
+		| undefined;
+	#resumePickerMemo:
+		| {
+				model: ResumePickerModel;
+				preview: readonly NativeChild[];
+				choice: DeleteChoice<T> | null;
+				errorOpen: boolean;
+				message: SessionPickerMessage | undefined;
+				selected: string | null;
+				node: NativeNode;
+		  }
+		| undefined;
 	/** A caller's heading for the picker head; the default `/resume` picker has none (the search names it). */
 	readonly #pickerTitle: string | undefined;
 	/** The open delete confirmation's two answers, for the picker's confirm strip. */
@@ -1452,7 +1598,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		onExit: () => void,
 		options: SessionSelectorOptions<T> = {},
 	) {
-		super(options.title ?? "Resume Session");
+		super(options.title ?? tuiText("ssTitleResume", "Resume Session"));
 
 		this.#messageContainer = new Container();
 		this.#onDelete = options.onDelete;
@@ -1464,10 +1610,16 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		this.#globalSessions = options.allSessions ?? null;
 		this.#getTerminalRows = options.getTerminalRows ?? (() => 24);
 		this.#fillHeight = options.fillHeight ?? false;
-		this.#title = options.title ?? "Resume Session";
+		this.#title = options.title ?? tuiText("ssTitleResume", "Resume Session");
 		this.#actionLabel = options.actionLabel ?? "Resume";
 		this.#pickerTitle = options.title;
 		this.#standalone = options.standalone ?? false;
+		this.#resumeSource = options.resumeSource;
+		this.#resumeScope = options.resumeSource?.initialScope ?? "workspace";
+		this.#deleteMode = options.deleteMode ?? options.resumeSource?.deleteMode ?? "permanent";
+		const currentSessionPath = options.currentSessionPath;
+		this.#getCurrentSessionPath =
+			typeof currentSessionPath === "function" ? currentSessionPath : () => currentSessionPath;
 		this.#scopeLabel = options.scopeLabel;
 		this.title = this.#headerLabel();
 		// One spacer of breathing room; OverlayPanel supplies the two outer
@@ -1500,7 +1652,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 			onExit();
 		};
 		this.#sessionList.onRequestRender = () => this.#onRequestRender?.();
-		if (this.#onDelete) {
+		if (this.#onDelete || this.#resumeSource?.deleteConversation) {
 			this.#sessionList.onDeleteRequest = (session: T) => {
 				this.#showDeleteConfirmation(session);
 			};
@@ -1510,14 +1662,58 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 				void this.#toggleScope();
 			};
 		}
+		this.#resumeHandlers = { onSelect, onCancel, onExit };
+		this.#resumeTreeSource = (
+			options as SessionSelectorOptions<T> & { resumeSource?: ResumeTreeSource }
+		).resumeSource;
+		this.#getTerminalRowsOption = options.getTerminalRows;
+		// The resume picker's Tab cycles the three-way scope; it replaces the
+		// folder/all toggle so the keys and the segmented control agree.
+		if (this.#resumeSource) this.#sessionList.onToggleScope = () => this.#cycleResumeScope();
 		this.#contentSlot = new Container();
 		this.#contentSlot.addChild(this.#sessionList);
 		this.addChild(this.#contentSlot);
+		this.#mountResumeTree();
+	}
+
+	/**
+	 * Swap the flat list for the ANSI three-level tree on the first frame that
+	 * reports no native `picker` support. Native terminals keep the flat list and
+	 * drive the resume model through `#describePicker`, so the tree never sees
+	 * their keys.
+	 */
+	#mountResumeTree(): void {
+		if (this.#resumeTree || !this.#resumeTreeSource || !this.#resumeHandlers || !this.#contentSlot) return;
+		const handlers = this.#resumeHandlers;
+		this.#resumeTree = new ResumeTreeComponent({
+			source: this.#resumeTreeSource,
+			getTerminalRows: this.#getTerminalRowsOption,
+			onSelect: conversation => {
+				this.#sessionList.dispose();
+				handlers.onSelect(conversation.session as unknown as T);
+			},
+			onCancel: () => {
+				this.#sessionList.dispose();
+				handlers.onCancel();
+			},
+			onExit: () => {
+				this.#sessionList.dispose();
+				handlers.onExit();
+			},
+		});
+		this.#resumeTree.onRequestRender = () => this.#onRequestRender?.();
+		this.#contentSlot.clear();
+		this.#contentSlot.addChild(this.#resumeTree);
+		this.title = this.#title;
 	}
 
 	#headerLabel(): string {
 		if (this.#scopeLabel === false) return this.#title;
-		const scopeLabel = this.#scopeLabel ?? (this.#scope === "all" ? "all projects" : "current folder");
+		const scopeLabel =
+			this.#scopeLabel ??
+			(this.#scope === "all"
+				? tuiText("resumeScopeAll", "all projects")
+				: tuiText("resumeScopeWorkspace", "this workspace"));
 		return `${this.#title} (${scopeLabel})`;
 	}
 
@@ -1534,8 +1730,9 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 				if (!this.#loadAllSessions) return;
 				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…" };
+				const loading = tuiText("resumeLoading", "Loading conversations…");
+				this.#messageContainer.addChild(new Text(theme.fg("muted", loading), 0, 0));
+				this.#message = { kind: "loading", text: loading };
 				this.#onRequestRender?.();
 				try {
 					global = await this.#loadAllSessions();
@@ -1562,6 +1759,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 
 	setOnRequestRender(callback: () => void): void {
 		this.#onRequestRender = callback;
+		if (this.#resumeTree) this.#resumeTree.onRequestRender = callback;
 	}
 	/** Ignore input after selection while the host resumes the session. */
 	lockInput(): void {
@@ -1579,10 +1777,25 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	 */
 	override dispose(): void {
 		this.#sessionList.dispose();
+		this.#resumeTree?.dispose();
 		clearTimeout(this.#previewTimer);
 		super.dispose();
 	}
 
+	/** True when some deleter is wired (the host callback or the resume source). */
+	#canDelete(): boolean {
+		return this.#onDelete !== undefined || this.#resumeSource?.deleteConversation !== undefined;
+	}
+
+	/** Delete through the host callback, else the resume source's conversation entry. */
+	#deleteSession(session: T): Promise<boolean> {
+		if (this.#onDelete) return this.#onDelete(session);
+		const source = this.#resumeSource;
+		if (!source?.deleteConversation || !source.directory) return Promise.resolve(false);
+		const context = resumeConversationContext(source.directory, session.path);
+		return Promise.resolve(context ? source.deleteConversation(context.conversation) : false);
+	}
+
 	#clearError(): void {
 		this.#messageContainer.clear();
 		this.#message = undefined;
@@ -1609,11 +1822,12 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 			this.#onRequestRender?.();
 		};
 		const answer = async (option: string) => {
-			if (option === "Yes" && this.#onDelete) {
+			if (option === "Yes" && this.#canDelete()) {
 				this.#clearError();
 				try {
-					const deleted = await this.#onDelete(session);
+					const deleted = await this.#deleteSession(session);
 					if (deleted) {
+						this.#resumeHidden.add(session.path);
 						this.#sessionList.removeSession(session.path);
 						this.#folderSessions = this.#folderSessions.filter(s => s.path !== session.path);
 						if (this.#globalSessions) {
@@ -1677,13 +1891,35 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 
 	/** Blank · keybinding hint · bottom border. Rendered by {@link render}. */
 	#footerLines(width: number): string[] {
-		const scopeHint = this.#scope === "all" ? "current folder" : "all projects";
-		// Keys mirror SessionList#handleInput; cancel is `app.interrupt` (raw Escape when unbound).
 		const cancel = interruptKey();
-		const hint = theme.fg(
-			"muted",
-			`[${this.#onDelete ? `${formatKeyHints(["delete", "backspace"])} delete · ` : ""}${formatKeyHint("enter")} select · ${formatKeyHint("tab")} ${scopeHint} · ${cancel} cancel]`,
-		);
+		const hint = this.#resumeTree
+			? composeFooter(
+					width,
+					[
+						...(this.#resumeTree.scope === "workspace"
+							? []
+							: [`^f ${tuiText("resumeFooterPaths", "full paths")}`]),
+						`${formatKeyHint("enter")} resume`,
+						`^r ${tuiText("resumeMenuRename", "rename")}`,
+						`${formatKeyHint("delete")} delete`,
+						`${formatKeyHint("tab")} ${tuiText("resumeFooterScope", "scope")}`,
+						`/ ${tuiText("resumeFooterSearch", "search")}`,
+						`r ${tuiText("resumeFooterRefresh", "refresh")}`,
+						`p/P ${tuiText("resumeFooterPin", "pin")}`,
+						`m ${tuiText("resumeFooterMenu", "menu")}`,
+						`${cancel} ${tuiText("resumeFooterClose", "clear/close")}`,
+					],
+					[
+						tuiText("resumeFooterClick", "click select"),
+						tuiText("resumeFooterDoubleClick", "dbl-click resume"),
+						tuiText("resumeFooterWheel", "wheel"),
+						`⋯ ${tuiText("resumeFooterMenu", "menu")}`,
+					],
+				)
+			: theme.fg(
+					"muted",
+					`[${this.#onDelete ? `${formatKeyHints(["delete", "backspace"])} delete · ` : ""}${formatKeyHint("enter")} select · ${formatKeyHint("tab")} ${this.#scope === "all" ? tuiText("resumeScopeWorkspace", "this workspace") : tuiText("resumeScopeAll", "all projects")} · ${cancel} cancel]`,
+				);
 		return [row("", width), row(hint, width), row("", width), bottomBorder(width)];
 	}
 
@@ -1704,7 +1940,14 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	 * path — and the key-hint footer.
 	 */
 	override describe(cx: DescribeContext): NativeNode {
-		if (cx.supports("picker")) return this.#describePicker();
+		if (cx.supports("picker")) {
+			// The native picker owns its own event model; raw keys must keep going
+			// to the list even though the ANSI tree is constructed.
+			this.#nativePicker = true;
+			return this.#describePicker();
+		}
+		this.#nativePicker = false;
+		this.#mountResumeTree();
 		const list = this.#sessionList.describeList();
 		const memo = this.#nativeMemo;
 		if (
@@ -1752,6 +1995,283 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		return result;
 	}
 
+	/**
+	 * Resume-model sheet: the model's project/workspace sections (or its
+	 * workspace sections in project scope), three-way scope tabs with counts,
+	 * conversation cards with turns/branch/model facts, the resume-tree
+	 * preview and the same action bar the ANSI footer carries (resume, delete,
+	 * pin, refresh, scope, close).
+	 */
+	#describeResumePicker(): NativeNode {
+		const source = this.#resumeSource!;
+		const list = this.#sessionList;
+		const model = this.#resumeModel();
+		if (!model) return this.#describeResumeLoading(source);
+		list.syncSessions(this.#resumeSessions(model), list.selectedSession?.path ?? model.selected);
+		const selected = list.selectedSession?.path ?? null;
+		const preview = this.#previewFor(list.selectedSession, session => {
+			const context = source.directory ? resumeConversationContext(source.directory, session.path) : undefined;
+			return context ? resumeConversationPreview(context.conversation, context.project, context.workspace) : [];
+		});
+		const message = this.#message;
+		const errorOpen = this.#pickerErrorOpen && message?.kind === "error";
+		const choice = this.#deleteChoice;
+		const memo = this.#resumePickerMemo;
+		if (
+			memo?.model === model &&
+			memo.preview === preview &&
+			memo.choice === choice &&
+			memo.errorOpen === errorOpen &&
+			memo.message === message &&
+			memo.selected === selected
+		) {
+			return memo.node;
+		}
+		const loading = message?.kind === "loading";
+		const kind = model.view.scope.kind;
+		const selectedConversation =
+			selected && source.directory ? resumeConversationContext(source.directory, selected) : undefined;
+		const actions = [pickerAction("resume", this.#actionLabel, "enter", { primary: true })];
+		if (this.#canDelete()) {
+			actions.push(
+				pickerAction(
+					"delete",
+					this.#deleteMode === "trash"
+						? tuiText("resumeDeleteTrash", "Move to trash")
+						: tuiText("resumeDeletePermanent", "Delete"),
+					"backspace",
+				),
+			);
+		}
+		if (source.pinConversation && selectedConversation) {
+			actions.push(
+				pickerAction(
+					"pin",
+					selectedConversation.conversation.pinned
+						? tuiText("resumeUnpinAction", "Unpin")
+						: tuiText("resumePinAction", "Pin"),
+					"p",
+				),
+			);
+		}
+		if (source.refresh) actions.push(pickerAction("refresh", tuiText("resumeRefreshAction", "Refresh"), "r"));
+		if (list.onToggleScope) actions.push(pickerAction("scope", resumeScopeLabel(nextResumeScope(kind)), "tab"));
+		actions.push(
+			pickerAction("close", "Close", boundKeys("app.interrupt", ["escape"])[0] ?? "escape", { end: true }),
+		);
+		const banner =
+			!loading && !errorOpen && model.hidden > 0
+				? tuiTextFmt("resumeHiddenByFilterFmt", "%d conversations hidden by filter", model.hidden)
+				: undefined;
+		const title = this.#pickerTitle;
+		const folder = this.#scopeLabel === false ? undefined : (this.#scopeLabel ?? path.basename(getProjectDir()));
+		const result = picker(
+			{
+				...(title ? { title, ...(folder ? { subtitle: folder } : {}) } : {}),
+				icon: "history",
+				noun: "conversations",
+				size: this.#standalone ? "screen" : "lg",
+				layout: "cards",
+				preview: "side",
+				query: list.searchInput.getValue(),
+				cursor: list.searchInput.getCursor(),
+				placeholder: model.placeholder,
+				tabs: model.tabs,
+				tab: kind,
+				columns: [
+					{ id: "when", format: "time" },
+					{ id: "turns", format: "num" },
+					{ id: "branch", format: "dim", priority: 1 },
+					{ id: "model", format: "dim", priority: 2 },
+				],
+				items: model.items,
+				order: model.order,
+				...(model.hits ? { hits: model.hits } : {}),
+				selected,
+				current: model.current,
+				total: model.total,
+				actions,
+				state: loading ? "loading" : errorOpen ? "error" : "ready",
+				...((loading || errorOpen) && message ? { message: message.text } : banner ? { message: banner } : {}),
+				empty: model.empty,
+				confirm: choice
+					? {
+							text:
+								this.#deleteMode === "trash"
+									? tuiTextFmt("resumeDeleteTrashFmt", "Move “%s” to trash?", sessionLabel(choice.session))
+									: tuiTextFmt(
+											"resumeDeletePermanentFmt",
+											"Permanently delete “%s”?",
+											sessionLabel(choice.session),
+										),
+							act: "delete-confirm",
+							label:
+								this.#deleteMode === "trash"
+									? tuiText("resumeDeleteTrash", "Move to trash")
+									: tuiText("resumeDeletePermanent", "Delete"),
+						}
+					: null,
+			},
+			preview,
+		);
+		this.#resumePickerMemo = { model, preview, choice, errorOpen, message, selected, node: result };
+		return result;
+	}
+
+	/** Skeleton sheet while the host's directory scan is still running (or failed). */
+	#describeResumeLoading(source: ResumeSourceLike): NativeNode {
+		const list = this.#sessionList;
+		const error = this.#message?.kind === "error" ? this.#message.text : source.loadError?.();
+		const query = list.searchInput.getValue();
+		const cursor = list.searchInput.getCursor();
+		const memo = this.#resumeLoadingMemo;
+		if (memo?.source === source && memo.error === error && memo.query === query && memo.cursor === cursor) {
+			return memo.node;
+		}
+		const title = this.#pickerTitle;
+		const node = picker({
+			...(title ? { title } : {}),
+			icon: "history",
+			noun: "conversations",
+			size: this.#standalone ? "screen" : "lg",
+			layout: "cards",
+			preview: "none",
+			query,
+			cursor,
+			items: [],
+			order: [],
+			selected: null,
+			actions: [
+				pickerAction("close", "Close", boundKeys("app.interrupt", ["escape"])[0] ?? "escape", { end: true }),
+			],
+			state: error ? "error" : "loading",
+			message: error ?? tuiText("resumeLoading", "Loading conversations…"),
+		});
+		this.#resumeLoadingMemo = { source, error, query, cursor, node };
+		return node;
+	}
+
+	/** The memoized resume model for the active scope, query and directory snapshot. */
+	#resumeModel(): ResumePickerModel | undefined {
+		const source = this.#resumeSource!;
+		const query = this.#sessionList.searchInput.getValue();
+		const currentPath = this.#getCurrentSessionPath();
+		const scope = this.#resumeScope;
+		const scopeKey =
+			typeof scope === "string" ? scope : `${scope.kind}:${scope.projectKey ?? ""}:${scope.workspaceKey ?? ""}`;
+		const kind = typeof scope === "string" ? scope : scope.kind;
+		const showCwd = kind !== "workspace";
+		const cached = this.#resumeModelMemo;
+		if (
+			cached?.source === source &&
+			cached.directory === source.directory &&
+			cached.query === query &&
+			cached.scopeKey === scopeKey &&
+			cached.currentPath === currentPath &&
+			cached.hidden === this.#resumeHidden.size &&
+			cached.showCwd === showCwd
+		) {
+			return cached.model;
+		}
+		const model = buildResumePickerModel(source, {
+			scope,
+			query,
+			currentSessionPath: currentPath,
+			hidden: this.#resumeHidden,
+			showCwd,
+			preferredPath: this.#sessionList.selectedSession?.path,
+		});
+		this.#resumeModelMemo = {
+			source,
+			directory: source.directory,
+			query,
+			scopeKey,
+			currentPath,
+			hidden: this.#resumeHidden.size,
+			showCwd,
+			model,
+		};
+		return model;
+	}
+
+	/** The view's sessions as list entries; rebuilt only when the view itself changes. */
+	#resumeSessions(model: ResumePickerModel): readonly T[] {
+		const memo = this.#resumeSessionsMemo;
+		if (memo?.model === model) return memo.sessions;
+		const sessions = (model.view.conversations ?? []).map(row => row.conversation.session as unknown as T);
+		this.#resumeSessionsMemo = { model, sessions };
+		return sessions;
+	}
+
+	#invalidateResume(): void {
+		this.#resumeModelMemo = undefined;
+		this.#resumeSessionsMemo = undefined;
+		this.#resumePickerMemo = undefined;
+	}
+
+	/** Pin/unpin the selected conversation, then re-read the directory. */
+	#toggleResumePin(): void {
+		const source = this.#resumeSource;
+		const pin = source?.pinConversation;
+		const path = this.#sessionList.selectedSession?.path;
+		if (!source || !pin || !path || !source.directory) return;
+		const context = resumeConversationContext(source.directory, path);
+		if (!context) return;
+		void (async () => {
+			await pin.call(source, context.conversation, !context.conversation.pinned);
+			await source.refresh?.();
+			this.#invalidateResume();
+			this.#onRequestRender?.();
+		})().catch((error: unknown) => {
+			this.#showError(error instanceof Error ? error.message : String(error));
+			this.#onRequestRender?.();
+		});
+	}
+
+	/** Re-scan the directory, showing the loading line meanwhile. */
+	#refreshResume(): void {
+		const source = this.#resumeSource;
+		const refresh = source?.refresh;
+		if (!source || !refresh) return;
+		this.#message = { kind: "loading", text: tuiText("resumeLoading", "Loading conversations…") };
+		this.#invalidateResume();
+		this.#onRequestRender?.();
+		void (async () => {
+			await refresh.call(source);
+			if (this.#message?.kind === "loading") this.#message = undefined;
+			this.#invalidateResume();
+			this.#onRequestRender?.();
+		})().catch((error: unknown) => {
+			this.#showError(error instanceof Error ? error.message : String(error));
+			this.#onRequestRender?.();
+		});
+	}
+
+	/** Tab / the scope button: workspace → project → all → workspace. */
+	#cycleResumeScope(): void {
+		const current = this.#resumeModel()?.view.scope;
+		this.#setResumeScope(
+			nextResumeScope(
+				current?.kind ?? (typeof this.#resumeScope === "string" ? this.#resumeScope : this.#resumeScope.kind),
+			),
+		);
+	}
+
+	/** Switch the three-way scope, pinning the group the current scope resolved to. */
+	#setResumeScope(kind: ResumeScopeKindLike): void {
+		const current = this.#resumeModel()?.view.scope;
+		if (kind === "all") this.#resumeScope = "all";
+		else if (kind === "project") {
+			this.#resumeScope = current?.projectKey ? { kind, projectKey: current.projectKey } : kind;
+		} else {
+			this.#resumeScope =
+				current?.kind === "workspace" && current.workspaceKey ? { kind, workspaceKey: current.workspaceKey } : kind;
+		}
+		void this.#resumeSource?.persistScope?.(kind);
+		this.#invalidateResume();
+		this.#onRequestRender?.();
+	}
+
 	/**
 	 * `lg` cards sheet (`screen` for the standalone app): sessions grouped by
 	 * day (ranked flat while searching), the selected session's preview, the
@@ -1760,6 +2280,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	 * Untitled unless the caller named it; the placeholder says the scope.
 	 */
 	#describePicker(): NativeNode {
+		if (this.#resumeSource) return this.#describeResumePicker();
 		const list = this.#sessionList;
 		const view = list.pickerView();
 		const preview = this.#previewFor(list.selectedSession);
@@ -1840,7 +2361,14 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	 * selection, then only after the selection has rested
 	 * {@link PREVIEW_SETTLE_MS} (the old preview stays meanwhile).
 	 */
-	#previewFor(target: T | undefined): readonly NativeChild[] {
+	#previewFor(
+		target: T | undefined,
+		build: (session: T) => readonly NativeChild[] = session =>
+			sessionPreview(
+				session,
+				session.parentSessionPath ? this.#sessionList.parentLabel(session.parentSessionPath) : undefined,
+			),
+	): readonly NativeChild[] {
 		const shown = this.#preview;
 		if (shown && shown.session === target) return shown.nodes;
 		if (shown && target !== this.#previewSettled) {
@@ -1855,12 +2383,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 			}
 			return shown.nodes;
 		}
-		const nodes = target
-			? sessionPreview(
-					target,
-					target.parentSessionPath ? this.#sessionList.parentLabel(target.parentSessionPath) : undefined,
-				)
-			: [];
+		const nodes = target ? build(target) : [];
 		this.#preview = { session: target, nodes };
 		return nodes;
 	}
@@ -1882,12 +2405,16 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		}
 		if (ev.act === "delete-confirm") choice?.confirm();
 		else if (ev.act === "cancel") choice?.cancel();
-		else if (ev.act === "close") {
+		else if (ev.act === "tab") {
+			if (this.#resumeSource && ev.value) this.#setResumeScope(ev.value as ResumeScopeKindLike);
+		} 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 === "pin") this.#toggleResumePin();
+		else if (ev.act === "refresh") this.#refreshResume();
 		else if (ev.act === "scope") {
 			list.onToggleScope?.();
 		} else if (ev.act === "clear") list.clearSearch();
@@ -1919,6 +2446,8 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		}
 		if (this.#confirmationDialog) {
 			this.#confirmationDialog.handleInput(keyData);
+		} else if (this.#resumeTree && !this.#nativePicker) {
+			this.#resumeTree.handleInput(keyData);
 		} else {
 			this.#sessionList.handleInput(keyData);
 		}
@@ -1932,6 +2461,12 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	 */
 	#handleMouse(data: string): void {
 		if (this.#confirmationDialog) return;
+		if (this.#resumeTree) {
+			// The panel paints the tree inside `│ ` … ` │`; rows start at
+			// #listLineOffset and the first content column is 2.
+			this.#resumeTree.handleMouse(data, { row: this.#listLineOffset, col: 2 });
+			return;
+		}
 		routeSgrMouseInput(data, event => {
 			if (event.wheel !== null) {
 				this.#sessionList.handleWheel(event.wheel);
@@ -1947,4 +2482,9 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	getSessionList(): SessionList<T> {
 		return this.#sessionList;
 	}
+
+	/** The ANSI resume tree when the host supplied a resume source. */
+	getResumeTree(): ResumeTreeComponent | undefined {
+		return this.#resumeTree;
+	}
 }