@oh-my-pi/pi-coding-agent 15.9.0 → 15.9.3

package/src/modes/components/plugin-settings.ts

@@ -2,8 +2,9 @@
  * Plugin settings UI components.
  *
  * Provides a hierarchical settings interface:
- * - Plugin list (shows all installed plugins)
- *   - Plugin detail (enable/disable, features, config)
+ * - Plugin list (npm plugins + marketplace plugins)
+ *   - npm plugin detail (enable/disable, features, config)
+ *   - Marketplace plugin detail (enable/disable + read-only metadata)
  *     - Feature toggles
  *     - Config value editor
  */
@@ -17,9 +18,20 @@ import {
 	Spacer,
 	Text,
 } from "@oh-my-pi/pi-tui";
+import { logger } from "@oh-my-pi/pi-utils";
+import { clearPluginRootsAndCaches, resolveOrDefaultProjectRegistryPath } from "../../discovery/helpers";
 import { PluginManager } from "../../extensibility/plugins/manager";
+import type { InstalledPluginSummary } from "../../extensibility/plugins/marketplace";
+import {
+	getInstalledPluginsRegistryPath,
+	getMarketplacesCacheDir,
+	getMarketplacesRegistryPath,
+	getPluginsCacheDir,
+	MarketplaceManager,
+} from "../../extensibility/plugins/marketplace";
 import type { InstalledPlugin, PluginSettingSchema } from "../../extensibility/plugins/types";
 import { getSelectListTheme, getSettingsListTheme, theme } from "../../modes/theme/theme";
+import { shortenPath } from "../../tools/render-utils";
 import { DynamicBorder } from "./dynamic-border";
 
 /**
@@ -41,20 +53,53 @@ export function handleInputOrEscape(
 // Plugin List Component
 // =============================================================================
 
+/**
+ * One row in the unified plugin list. npm and marketplace plugins live in
+ * separate registries with different shapes, so a tagged union keeps both
+ * paths type-safe end-to-end (list rendering, value lookup, detail callback).
+ */
+export type PluginListEntry =
+	| { kind: "npm"; plugin: InstalledPlugin }
+	| { kind: "marketplace"; plugin: InstalledPluginSummary };
+
 export interface PluginListCallbacks {
-	onPluginSelect: (plugin: InstalledPlugin) => void;
+	onNpmSelect: (plugin: InstalledPlugin) => void;
+	onMarketplaceSelect: (plugin: InstalledPluginSummary) => void;
 	onCancel: () => void;
 }
 
 /**
- * Shows list of installed plugins with enable/disable status.
- * Selecting a plugin opens its detail view.
+ * True when the marketplace summary's first entry is not explicitly disabled.
+ * Mirrors the `/plugins list` convention: a missing `enabled` flag means enabled.
+ */
+function marketplaceEnabled(summary: InstalledPluginSummary): boolean {
+	return summary.entries[0]?.enabled !== false;
+}
+
+/**
+ * Stable SelectList value for a list entry. Combined with `findEntryByValue`
+ * this keeps lookup correct even when the same plugin id exists in both user
+ * and project scope (one of which is `shadowedBy: "project"`).
+ */
+function entryValue(entry: PluginListEntry): string {
+	if (entry.kind === "npm") return `npm:${entry.plugin.name}`;
+	return `mkt:${entry.plugin.scope}:${entry.plugin.id}`;
+}
+
+function findEntryByValue(entries: ReadonlyArray<PluginListEntry>, value: string): PluginListEntry | undefined {
+	return entries.find(e => entryValue(e) === value);
+}
+
+/**
+ * Shows installed plugins from both registries (npm + marketplace) with
+ * enable/disable status, scope tag, and shadow indicator. Selecting an entry
+ * fans out to the kind-specific detail callback.
  */
 export class PluginListComponent extends Container {
 	readonly #selectList: SelectList;
 
 	constructor(
-		private readonly plugins: InstalledPlugin[],
+		private readonly entries: ReadonlyArray<PluginListEntry>,
 		callbacks: PluginListCallbacks,
 	) {
 		super();
@@ -64,53 +109,87 @@ export class PluginListComponent extends Container {
 		this.addChild(new Text(theme.bold(theme.fg("accent", "  Plugins")), 0, 0));
 		this.addChild(new Spacer(1));
 
-		if (plugins.length === 0) {
+		if (entries.length === 0) {
 			this.addChild(new Text(theme.fg("muted", "  No plugins installed"), 0, 0));
 			this.addChild(new Spacer(1));
-			this.addChild(new Text(theme.fg("dim", "  Install with: omp plugin install <package>"), 0, 0));
+			this.addChild(new Text(theme.fg("dim", "  Install npm plugins:        omp plugin install <package>"), 0, 0));
+			this.addChild(
+				new Text(theme.fg("dim", "  Install marketplace plugins: omp plugin install <name>@<marketplace>"), 0, 0),
+			);
 			this.addChild(new Spacer(1));
 			this.addChild(new DynamicBorder());
 
-			// Create empty list that just handles escape
+			// Empty list still handles Escape so the user can leave the panel.
 			this.#selectList = new SelectList([], 1, getSelectListTheme());
 			this.#selectList.onCancel = callbacks.onCancel;
 			return;
 		}
 
-		const items: SelectItem[] = plugins.map(p => {
+		const items: SelectItem[] = entries.map(entry => this.#renderItem(entry));
+
+		// Marketplace plugin ids (`name@marketplace`) routinely run past the
+		// SelectList default primary column (32 chars). Widen the bound so the
+		// id remains readable; the description gets whatever width is left.
+		this.#selectList = new SelectList(items, Math.min(items.length, 8), getSelectListTheme(), {
+			minPrimaryColumnWidth: 24,
+			maxPrimaryColumnWidth: 64,
+		});
+
+		this.#selectList.onSelect = item => {
+			const found = findEntryByValue(this.entries, item.value);
+			if (!found) return;
+			if (found.kind === "npm") callbacks.onNpmSelect(found.plugin);
+			else callbacks.onMarketplaceSelect(found.plugin);
+		};
+
+		this.#selectList.onCancel = callbacks.onCancel;
+
+		this.addChild(this.#selectList);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", "  Enter to configure · Esc to go back"), 0, 0));
+		this.addChild(new DynamicBorder());
+	}
+
+	#renderItem(entry: PluginListEntry): SelectItem {
+		const kindBadge = theme.fg("dim", entry.kind === "npm" ? "[npm]" : "[marketplace]");
+
+		if (entry.kind === "npm") {
+			const p = entry.plugin;
 			const status = p.enabled
 				? theme.fg("success", theme.status.enabled)
 				: theme.fg("muted", theme.status.disabled);
 			const featureCount = p.manifest.features ? Object.keys(p.manifest.features).length : 0;
 			const enabledCount = p.enabledFeatures?.length ?? featureCount;
 
-			let details = `v${p.version}`;
+			let details = `${kindBadge} ${theme.sep.dot} v${p.version}`;
 			if (featureCount > 0) {
 				details += ` ${theme.sep.dot} ${enabledCount}/${featureCount} features`;
 			}
 
 			return {
-				value: p.name,
+				value: entryValue(entry),
 				label: `${status} ${p.name}`,
 				description: details,
 			};
-		});
-
-		this.#selectList = new SelectList(items, Math.min(items.length, 8), getSelectListTheme());
+		}
 
-		this.#selectList.onSelect = item => {
-			const plugin = this.plugins.find(p => p.name === item.value);
-			if (plugin) {
-				callbacks.onPluginSelect(plugin);
-			}
-		};
+		const summary = entry.plugin;
+		const enabled = marketplaceEnabled(summary);
+		const status = enabled ? theme.fg("success", theme.status.enabled) : theme.fg("muted", theme.status.disabled);
+		const scopeTag = theme.fg("dim", `[${summary.scope}]`);
+		const shadowMarker = summary.shadowedBy ? ` ${theme.fg("warning", theme.status.shadowed)}` : "";
+		const version = summary.entries[0]?.version ?? "?";
 
-		this.#selectList.onCancel = callbacks.onCancel;
+		let details = `${kindBadge} ${scopeTag} ${theme.sep.dot} v${version}`;
+		if (summary.shadowedBy) {
+			details += ` ${theme.sep.dot} shadowed by ${summary.shadowedBy}`;
+		}
 
-		this.addChild(this.#selectList);
-		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("dim", "  Enter to configure · Esc to go back"), 0, 0));
-		this.addChild(new DynamicBorder());
+		return {
+			value: entryValue(entry),
+			label: `${status} ${summary.id}${shadowMarker}`,
+			description: details,
+		};
 	}
 
 	handleInput(data: string): void {
@@ -296,6 +375,98 @@ export class PluginDetailComponent extends Container {
 	}
 }
 
+// =============================================================================
+// Marketplace Plugin Detail Component
+// =============================================================================
+
+export interface MarketplacePluginDetailCallbacks {
+	onEnabledChange: (enabled: boolean) => void;
+	onBack: () => void;
+}
+
+/**
+ * Detail view for a marketplace plugin. Marketplace plugins do not declare
+ * features or settings, so the panel exposes a single enable/disable toggle
+ * plus the read-only metadata from the installed-plugins registry.
+ */
+export class MarketplacePluginDetailComponent extends Container {
+	#settingsList: SettingsList;
+
+	constructor(
+		private plugin: InstalledPluginSummary,
+		private readonly callbacks: MarketplacePluginDetailCallbacks,
+	) {
+		super();
+
+		const entry = plugin.entries[0];
+		const enabled = marketplaceEnabled(plugin);
+
+		// Header
+		this.addChild(new DynamicBorder());
+		this.addChild(new Text(theme.bold(theme.fg("accent", `  ${plugin.id}`)), 0, 0));
+
+		const subtitleParts = [`[${plugin.scope}]`];
+		if (plugin.shadowedBy) subtitleParts.push(`${theme.status.shadowed} shadowed by ${plugin.shadowedBy}`);
+		this.addChild(new Text(theme.fg("muted", `  ${subtitleParts.join(" ")}`), 0, 0));
+		this.addChild(new Spacer(1));
+
+		const items: SettingItem[] = [
+			{
+				id: "__enabled__",
+				label: "Enabled",
+				description: "Enable or disable this marketplace plugin",
+				currentValue: enabled ? "true" : "false",
+				values: ["true", "false"],
+			},
+		];
+
+		this.#settingsList = new SettingsList(
+			items,
+			items.length,
+			getSettingsListTheme(),
+			(id, newValue) => {
+				if (id === "__enabled__") {
+					const next = newValue === "true";
+					this.callbacks.onEnabledChange(next);
+					this.plugin = {
+						...this.plugin,
+						entries: this.plugin.entries.map(e => ({ ...e, enabled: next })),
+					};
+				}
+			},
+			this.callbacks.onBack,
+		);
+
+		this.addChild(this.#settingsList);
+		this.addChild(new Spacer(1));
+
+		// Read-only metadata. SettingsList rejects items without `values`/`submenu`,
+		// so we render the metadata as plain text rows beneath the toggle.
+		this.addChild(new Text(theme.fg("dim", `  version       ${entry?.version ?? "(unknown)"}`), 0, 0));
+		this.addChild(new Text(theme.fg("dim", `  scope         ${plugin.scope}`), 0, 0));
+		this.addChild(
+			new Text(
+				theme.fg("dim", `  install path  ${entry?.installPath ? shortenPath(entry.installPath) : "(unknown)"}`),
+				0,
+				0,
+			),
+		);
+		this.addChild(new Text(theme.fg("dim", `  installed at  ${entry?.installedAt ?? "(unknown)"}`), 0, 0));
+		this.addChild(new Text(theme.fg("dim", `  last updated  ${entry?.lastUpdated ?? "(unknown)"}`), 0, 0));
+		if (entry?.gitCommitSha) {
+			this.addChild(new Text(theme.fg("dim", `  git sha       ${entry.gitCommitSha}`), 0, 0));
+		}
+
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("dim", "  Enter to toggle · Esc to go back"), 0, 0));
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(data: string): void {
+		this.#settingsList.handleInput(data);
+	}
+}
+
 // =============================================================================
 // Config Submenus
 // =============================================================================
@@ -408,7 +579,7 @@ class ConfigInputSubmenu extends Container {
 
 export interface PluginSettingsCallbacks {
 	onClose: () => void;
-	onPluginChanged: () => void;
+	onPluginChanged: () => void | Promise<void>;
 }
 
 /** Component with handleInput method */
@@ -421,31 +592,66 @@ interface InputHandler {
  * Manages navigation between plugin list and plugin detail views.
  */
 export class PluginSettingsComponent extends Container {
+	#cwd: string;
 	#manager: PluginManager;
 	#viewComponent: (Container & InputHandler) | null = null;
 	// biome-ignore lint/correctness/noUnusedPrivateClassMembers: state tracking for view management
-	#currentView: "list" | "detail" = "list";
+	#currentView: "list" | "npm-detail" | "marketplace-detail" = "list";
 	// biome-ignore lint/correctness/noUnusedPrivateClassMembers: state tracking for view management
 	#currentPlugin: InstalledPlugin | null = null;
+	// biome-ignore lint/correctness/noUnusedPrivateClassMembers: state tracking for view management
+	#currentMarketplacePlugin: InstalledPluginSummary | null = null;
 
 	constructor(
 		cwd: string,
 		private readonly callbacks: PluginSettingsCallbacks,
 	) {
 		super();
+		this.#cwd = cwd;
 		this.#manager = new PluginManager(cwd);
 		this.#showPluginList();
 	}
 
+	async #buildMarketplaceManager(): Promise<MarketplaceManager> {
+		return new MarketplaceManager({
+			marketplacesRegistryPath: getMarketplacesRegistryPath(),
+			installedRegistryPath: getInstalledPluginsRegistryPath(),
+			projectInstalledRegistryPath: await resolveOrDefaultProjectRegistryPath(this.#cwd),
+			marketplacesCacheDir: getMarketplacesCacheDir(),
+			pluginsCacheDir: getPluginsCacheDir(),
+			clearPluginRootsCache: clearPluginRootsAndCaches,
+		});
+	}
+
 	async #showPluginList(): Promise<void> {
 		this.#currentView = "list";
 		this.#currentPlugin = null;
+		this.#currentMarketplacePlugin = null;
 		this.clear();
 
-		const plugins = await this.#manager.list();
-
-		this.#viewComponent = new PluginListComponent(plugins, {
-			onPluginSelect: plugin => this.#showPluginDetail(plugin),
+		// Surface marketplace failures without taking the npm path down with it —
+		// the registry can fail to load (corrupt JSON, missing project root) and
+		// the user still benefits from seeing their npm plugins.
+		const [npmPlugins, marketplacePlugins] = await Promise.all([
+			this.#manager.list(),
+			this.#buildMarketplaceManager()
+				.then(mgr => mgr.listInstalledPlugins())
+				.catch(err => {
+					logger.error("Settings → Plugins: failed to list marketplace plugins", {
+						error: err instanceof Error ? err.message : String(err),
+					});
+					return [] as InstalledPluginSummary[];
+				}),
+		]);
+
+		const entries: PluginListEntry[] = [
+			...npmPlugins.map(plugin => ({ kind: "npm" as const, plugin })),
+			...marketplacePlugins.map(plugin => ({ kind: "marketplace" as const, plugin })),
+		];
+
+		this.#viewComponent = new PluginListComponent(entries, {
+			onNpmSelect: plugin => this.#showPluginDetail(plugin),
+			onMarketplaceSelect: plugin => this.#showMarketplaceDetail(plugin),
 			onCancel: () => this.callbacks.onClose(),
 		});
 
@@ -453,14 +659,15 @@ export class PluginSettingsComponent extends Container {
 	}
 
 	#showPluginDetail(plugin: InstalledPlugin): void {
-		this.#currentView = "detail";
+		this.#currentView = "npm-detail";
 		this.#currentPlugin = plugin;
+		this.#currentMarketplacePlugin = null;
 		this.clear();
 
 		this.#viewComponent = new PluginDetailComponent(plugin, this.#manager, {
 			onEnabledChange: async enabled => {
 				await this.#manager.setEnabled(plugin.name, enabled);
-				this.callbacks.onPluginChanged();
+				await this.callbacks.onPluginChanged();
 			},
 			onFeatureChange: async (feature, enabled) => {
 				const current = new Set((await this.#manager.getEnabledFeatures(plugin.name)) ?? []);
@@ -470,11 +677,38 @@ export class PluginSettingsComponent extends Container {
 					current.delete(feature);
 				}
 				await this.#manager.setEnabledFeatures(plugin.name, [...current]);
-				this.callbacks.onPluginChanged();
+				await this.callbacks.onPluginChanged();
 			},
 			onConfigChange: async (key, value) => {
 				await this.#manager.setPluginSetting(plugin.name, key, value);
-				this.callbacks.onPluginChanged();
+				await this.callbacks.onPluginChanged();
+			},
+			onBack: () => this.#showPluginList(),
+		});
+
+		this.addChild(this.#viewComponent);
+	}
+
+	#showMarketplaceDetail(plugin: InstalledPluginSummary): void {
+		this.#currentView = "marketplace-detail";
+		this.#currentPlugin = null;
+		this.#currentMarketplacePlugin = plugin;
+		this.clear();
+
+		this.#viewComponent = new MarketplacePluginDetailComponent(plugin, {
+			onEnabledChange: async enabled => {
+				try {
+					const mgr = await this.#buildMarketplaceManager();
+					await mgr.setPluginEnabled(plugin.id, enabled, plugin.scope);
+					await this.callbacks.onPluginChanged();
+				} catch (err) {
+					logger.error("Settings → Plugins: failed to toggle marketplace plugin", {
+						pluginId: plugin.id,
+						scope: plugin.scope,
+						enabled,
+						error: err instanceof Error ? err.message : String(err),
+					});
+				}
 			},
 			onBack: () => this.#showPluginList(),
 		});

package/src/modes/components/session-selector.ts

@@ -51,10 +51,10 @@ export type SessionHistoryMatcher = (query: string) => string[];
  *
  * - `fuzzy` is the ordered fuzzy-filter result over session metadata (best first).
  * - `historyIds` are session IDs whose recorded prompts matched the query,
- *   ordered by history relevance (best first); duplicates are tolerated.
+ *   ordered by prompt-history rank (typically newest matching prompt first); duplicates are tolerated.
  *
  * Ranking: sessions matched by **both** signals lead (keeping fuzzy order), then
- * fuzzy-only matches, then history-only matches (by history order). A fuzzy match
+ * fuzzy-only matches, then history-only matches (by prompt-history order). A fuzzy match
  * is never dropped, and history matches not present in `allSessions` (e.g. deleted
  * or out-of-scope sessions) are ignored since they cannot be resumed from here.
  */
@@ -95,7 +95,9 @@ class SessionList implements Component {
 	onCancel?: () => void;
 	onExit: () => void = () => {};
 	onToggleScope?: () => void;
-	#maxVisible: number = 5; // Max sessions visible (each session is 3 lines: msg + metadata + blank)
+	// Snapshot of the live terminal-row getter; the visible window is derived
+	// from it per render so the picker fits the viewport (and adapts to resize).
+	readonly #getTerminalRows: () => number;
 
 	onDeleteRequest?: (session: SessionInfo) => void;
 
@@ -103,7 +105,13 @@ class SessionList implements Component {
 	#showCwd: boolean;
 	readonly #historyMatcher?: SessionHistoryMatcher;
 
-	constructor(sessions: SessionInfo[], showCwd = false, historyMatcher?: SessionHistoryMatcher) {
+	constructor(
+		sessions: SessionInfo[],
+		showCwd = false,
+		historyMatcher?: SessionHistoryMatcher,
+		getTerminalRows: () => number = () => 24,
+	) {
+		this.#getTerminalRows = getTerminalRows;
 		this.#allSessions = sessions;
 		this.#showCwd = showCwd;
 		this.#historyMatcher = historyMatcher;
@@ -119,6 +127,25 @@ class SessionList implements Component {
 		};
 	}
 
+	/**
+	 * Number of sessions to show at once, sized so the whole picker fits the
+	 * current viewport instead of pushing its header/search off the top.
+	 *
+	 * Budget = rows − chrome − reserve, divided by the worst-case per-session
+	 * height. Chrome (12) is the surrounding spacers/borders/header (7) plus the
+	 * list's search line, blank, scroll indicator, blank, and hint (5). A titled
+	 * session is the tallest item at 4 lines (title + preview + metadata +
+	 * blank); budgeting for that guarantees no overflow even when every visible
+	 * entry has a title. The reserve covers below-editor hook widgets / cursor.
+	 */
+	#visibleCount(): number {
+		const CHROME = 12;
+		const PER_SESSION = 4;
+		const RESERVE = 1;
+		const budget = this.#getTerminalRows() - CHROME - RESERVE;
+		return Math.max(2, Math.floor(budget / PER_SESSION));
+	}
+
 	/** Replace the visible dataset, e.g. when toggling folder/all-projects scope. */
 	setSessions(sessions: SessionInfo[], showCwd: boolean): void {
 		this.#allSessions = sessions;
@@ -210,17 +237,16 @@ class SessionList implements Component {
 			return date.toLocaleDateString();
 		};
 
-		// Calculate visible range with scrolling
+		// Calculate visible range with scrolling. The window is sized to the
+		// current viewport so the picker never overflows past the top.
+		const maxVisible = this.#visibleCount();
 		const startIndex = Math.max(
 			0,
-			Math.min(
-				this.#selectedIndex - Math.floor(this.#maxVisible / 2),
-				this.#filteredSessions.length - this.#maxVisible,
-			),
+			Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), this.#filteredSessions.length - maxVisible),
 		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, this.#filteredSessions.length);
+		const endIndex = Math.min(startIndex + maxVisible, this.#filteredSessions.length);
 
-		// Render visible sessions (2-3 lines per session + blank line)
+		// Render visible sessions (3 lines, or 4 when a title adds a preview line).
 		for (let i = startIndex; i < endIndex; i++) {
 			const session = this.#filteredSessions[i];
 			const isSelected = i === this.#selectedIndex;
@@ -311,12 +337,12 @@ class SessionList implements Component {
 		}
 		// Page up - jump up by maxVisible items
 		if (matchesKey(keyData, "pageUp")) {
-			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.#maxVisible);
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.#visibleCount());
 			return;
 		}
 		// Page down - jump down by maxVisible items
 		if (matchesKey(keyData, "pageDown")) {
-			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + this.#maxVisible);
+			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + this.#visibleCount());
 			return;
 		}
 		// Enter
@@ -359,6 +385,11 @@ export interface SessionSelectorOptions {
 	allSessions?: SessionInfo[];
 	/** Open directly in all-projects scope (e.g. the current folder has no sessions). */
 	startInAllScope?: boolean;
+	/**
+	 * Reads the live terminal height so the visible window fits the viewport.
+	 * Omitted only in tests; defaults to a conservative 24 rows.
+	 */
+	getTerminalRows?: () => number;
 }
 
 /**
@@ -405,7 +436,7 @@ export class SessionSelectorComponent extends Container {
 		this.addChild(new Spacer(1));
 		this.addChild(this.#messageContainer);
 		// Create session list
-		this.#sessionList = new SessionList(initialSessions, startAll, options.historyMatcher);
+		this.#sessionList = new SessionList(initialSessions, startAll, options.historyMatcher, options.getTerminalRows);
 		this.#sessionList.onSelect = onSelect;
 		this.#sessionList.onCancel = onCancel;
 		this.#sessionList.onExit = onExit;

package/src/modes/components/settings-selector.ts

@@ -208,7 +208,7 @@ export interface SettingsCallbacks {
 	/** Get current rendered status line for inline preview */
 	getStatusLinePreview?: () => string;
 	/** Called when plugins change */
-	onPluginsChanged?: () => void;
+	onPluginsChanged?: () => void | Promise<void>;
 	/** Called when settings panel is closed */
 	onCancel: () => void;
 }

package/src/modes/components/tips.txt

@@ -11,4 +11,8 @@ Say `orchestrate` in your message to drive a multi-phase task with parallel suba
 Say `workflow` in your message to drive the task with parallel subagents in eval — watch it glow as you type
 Log in to several accounts of the same provider — `/login` again — and omp load-balances across them automatically
 Run `omp auth-broker serve` once and every machine pulls live tokens over the wire — refresh keys never leave the host; `omp auth-gateway` fronts it as a drop-in proxy any OpenAI-compatible client can hit
-Press alt+p (or /switch) to switch provider, and ctrl+p to cycle role models smol -> slow -> etc
+Press alt+p (or /switch) to switch provider, and ctrl+p to cycle role models smol -> slow -> etc
+Press ctrl+r to search your prompt history and reuse a past message
+`/force read` pins the next turn to one specific tool when the model keeps reaching for the wrong one
+`/copy code` grabs the last code block to your clipboard — `/copy cmd` grabs the last shell/python command
+`/shake` rips heavy tool results out of context to reclaim tokens without a full /compact — `/shake images` drops just images

package/src/modes/components/transcript-container.ts

@@ -1,4 +1,4 @@
-import { type Component, Container, TERMINAL } from "@oh-my-pi/pi-tui";
+import { type Component, Container, type NativeScrollbackLiveRegion, TERMINAL } from "@oh-my-pi/pi-tui";
 
 const kSnapshot = Symbol("transcript.frozenRender");
 
@@ -34,10 +34,19 @@ interface SnapshotCarrier {
  * and any drift reconciles safely. On terminals that can rebuild history this
  * freezing is unnecessary, so it renders every block live for full fidelity.
  */
-export class TranscriptContainer extends Container {
+export class TranscriptContainer extends Container implements NativeScrollbackLiveRegion {
 	// Bumped to invalidate every block's snapshot at once; a snapshot is only
 	// honored when its stored generation still matches.
 	#generation = 0;
+	// The block that was bottom-most (live) on the previous render. When the live
+	// position moves past it, its snapshot was last refreshed mid-stream and may
+	// predate content that finalized in the same coalesced frame that appended the
+	// block now below it — so it must recompute once on the live→frozen transition.
+	#prevLiveChild: Component | undefined;
+	// Local line index where the current bottom-most block begins in the most
+	// recent render. TUI extends the native-scrollback pinned region from this
+	// point through the live block and the root chrome rendered below it.
+	#nativeScrollbackLiveRegionStart: number | undefined;
 
 	override invalidate(): void {
 		// A theme/global invalidation forces a full recompute on the rebuild that
@@ -51,6 +60,10 @@ export class TranscriptContainer extends Container {
 		super.clear();
 	}
 
+	getNativeScrollbackLiveRegionStart(): number | undefined {
+		return this.#nativeScrollbackLiveRegionStart;
+	}
+
 	/**
 	 * Retire all frozen snapshots so the next render reflects each block's current
 	 * state. Call at reconciliation checkpoints (prompt submit) where the whole
@@ -63,26 +76,42 @@ export class TranscriptContainer extends Container {
 
 	override render(width: number): string[] {
 		width = Math.max(1, width);
+		this.#nativeScrollbackLiveRegionStart = undefined;
 		if (!TERMINAL.eagerEraseScrollbackRisk) return super.render(width);
 
 		const lines: string[] = [];
 		const liveIndex = this.children.length - 1;
+		const liveChild = this.children[liveIndex];
+		const prevLiveChild = this.#prevLiveChild;
+		this.#prevLiveChild = liveChild;
 		for (let i = 0; i < this.children.length; i++) {
 			const child = this.children[i]! as Component & SnapshotCarrier;
-			if (i !== liveIndex) {
+			if (child === liveChild) {
+				this.#nativeScrollbackLiveRegionStart = lines.length;
+			} else {
 				const snapshot = child[kSnapshot];
 				// Replay the block's last render from while it was live. A stale
 				// generation (post-thaw) or width mismatch (resize in flight, an
 				// explicit rebuild that reconciles history anyway) recomputes instead.
-				if (snapshot && snapshot.generation === this.#generation && snapshot.width === width) {
+				// The block that was live on the previous render is also recomputed
+				// here: TUI render coalescing can advance its content (final streamed
+				// tokens) in the very frame that appends the block now below it, so its
+				// cached snapshot predates that final content. Recomputing on the
+				// transition seals the block at its true final state, not a mid-stream one.
+				if (
+					child !== prevLiveChild &&
+					snapshot &&
+					snapshot.generation === this.#generation &&
+					snapshot.width === width
+				) {
 					lines.push(...snapshot.lines);
 					continue;
 				}
 			}
 			const rendered = child.render(width);
 			// Cache every block's latest render. While a block is live this keeps its
-			// snapshot current; the frame it stops being live the cache already holds
-			// its final live render, so nothing recomputes underneath it.
+			// snapshot current; on the frame it stops being live the recompute above
+			// refreshes it to the final state before it freezes.
 			child[kSnapshot] = { width, lines: rendered, generation: this.#generation };
 			lines.push(...rendered);
 		}