@danypops/pi-papyrus 0.59.6 → 0.60.1

package/extension/src/artifact/artifact-browser.ts

@@ -1,9 +1,19 @@
 import { type Artifact, type BinderNode, type BinderTree, type OperationName, SEED_RELATIONS } from "@danypops/papyrus";
 import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
 import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { Container, Input, matchesKey, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import {
+	type Component,
+	Container,
+	type Focusable,
+	Input,
+	matchesKey,
+	Spacer,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
 import { callService } from "../service-client.ts";
 import { showArtifactDetailView } from "./artifact-detail-view.ts";
+import { ArtifactNavigationState } from "./artifact-navigation-state.ts";
 import type { StatusPresentation } from "./artifact-status-presentation.ts";
 import {
 	artifactBinderPath,
@@ -249,15 +259,15 @@ function renderPanel(
 	tree: BinderTree | undefined,
 	currentBinderId: string | undefined,
 ): Promise<BrowserPanelAction | undefined> {
-	return ctx.ui.custom<BrowserPanelAction | undefined>((tui, theme, _keybindings, done) => {
+	return ctx.ui.custom<BrowserPanelAction | undefined>((tui, theme, keybindings, done) => {
 		const input = new Input();
-		let searchActive = false;
 		let filtered = browserEntries(rows, tree, currentBinderId, "");
-		let selectedIndex = 0;
+		const navigation = new ArtifactNavigationState(filtered.length);
 
 		function applyFilter(): void {
-			filtered = browserEntries(rows, tree, currentBinderId, input.getValue());
-			selectedIndex = 0;
+			filtered = browserEntries(rows, tree, currentBinderId, navigation.query);
+			navigation.setItemCount(filtered.length);
+			navigation.first();
 		}
 
 		const header = {
@@ -265,15 +275,18 @@ function renderPanel(
 			render(width: number): string[] {
 				const path = tree ? ` · ${currentBinderPath(tree, currentBinderId)}` : "";
 				const title = theme.bold(`${config.title}${path}`);
-				const hint = searchActive
-					? rawKeyHint("esc", "clear")
-					: [
-							rawKeyHint("enter", "open/actions"),
-							...(tree ? [rawKeyHint("a", "actions"), rawKeyHint("←", "up"), rawKeyHint("n", "new Binder")] : []),
-							rawKeyHint("/", "filter"),
-							rawKeyHint("r", "refresh"),
-							rawKeyHint("esc", "close"),
-						].join(theme.fg("muted", " · "));
+				const hint =
+					navigation.mode === "filter"
+						? `${theme.fg("accent", "FILTER")} · ${rawKeyHint("enter", "keep")} · ${rawKeyHint("esc", "clear")}`
+						: [
+								theme.fg("accent", "NORMAL"),
+								rawKeyHint("j/k", "move"),
+								rawKeyHint("enter/l", "open/actions"),
+								...(tree ? [rawKeyHint("a", "actions"), rawKeyHint("h", "up"), rawKeyHint("n", "new Binder")] : []),
+								rawKeyHint("/", "filter"),
+								rawKeyHint("f", navigation.expanded ? "compact" : "expand"),
+								rawKeyHint("q", "close"),
+							].join(theme.fg("muted", " · "));
 				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(hint));
 				const summary = statusSummary(rows, config.statusOrder)
 					.map(({ status, count }) => {
@@ -293,20 +306,21 @@ function renderPanel(
 		const list = {
 			invalidate() {},
 			render(width: number): string[] {
-				const lines = searchActive ? [...input.render(width), ""] : [""];
+				const lines = navigation.mode === "filter" ? [...input.render(width), ""] : [""];
 				if (filtered.length === 0) return [...lines, theme.fg("muted", `  No ${tree ? "items" : `matching ${config.kind}s`}`)];
-				const start = Math.max(0, Math.min(selectedIndex - Math.floor(BROWSER_VISIBLE_ROWS / 2), filtered.length - BROWSER_VISIBLE_ROWS));
-				const end = Math.min(start + BROWSER_VISIBLE_ROWS, filtered.length);
+				const visibleRows = navigation.expanded ? Math.max(BROWSER_VISIBLE_ROWS, tui.terminal.rows - 10) : BROWSER_VISIBLE_ROWS;
+				const start = Math.max(0, Math.min(navigation.selectedIndex - Math.floor(visibleRows / 2), filtered.length - visibleRows));
+				const end = Math.min(start + visibleRows, filtered.length);
 				for (let index = start; index < end; index++) {
 					const entry = filtered[index]!;
-					const selected = index === selectedIndex;
+					const selected = index === navigation.selectedIndex;
 					const cursor = selected ? theme.fg("accent", "❯") : " ";
 					if (entry.type === "binder") {
 						const title = selected ? theme.bold(entry.node.binder.title) : entry.node.binder.title;
 						const details = [
 							entry.node.childIds.length > 0 ? `${entry.node.childIds.length} Binder${entry.node.childIds.length === 1 ? "" : "s"}` : "",
 							entry.node.effectiveLabels.length > 0 ? entry.node.effectiveLabels.join(", ") : "",
-							searchActive ? entry.node.path : "",
+							navigation.mode === "filter" ? entry.node.path : "",
 						].filter(Boolean);
 						lines.push(
 							truncateToWidth(
@@ -325,7 +339,7 @@ function renderPanel(
 					const details = [
 						config.rowMeta(row, theme),
 						inherited.length > 0 ? `inherits ${inherited.join(", ")}` : "",
-						tree && searchActive ? artifactBinderPath(row, tree) : "",
+						tree && navigation.mode === "filter" ? artifactBinderPath(row, tree) : "",
 					].filter(Boolean);
 					lines.push(
 						truncateToWidth(
@@ -335,7 +349,7 @@ function renderPanel(
 						),
 					);
 				}
-				lines.push(theme.fg("muted", `  ${selectedIndex + 1}/${filtered.length} item${filtered.length === 1 ? "" : "s"}`));
+				lines.push(theme.fg("muted", `  ${navigation.selectedIndex + 1}/${filtered.length} item${filtered.length === 1 ? "" : "s"}`));
 				return lines;
 			},
 		};
@@ -350,29 +364,73 @@ function renderPanel(
 		container.addChild(new Spacer(1));
 		container.addChild(new DynamicBorder());
 
+		let focused = false;
 		return {
+			get focused(): boolean {
+				return focused;
+			},
+			set focused(value: boolean) {
+				focused = value;
+				input.focused = value && navigation.mode === "filter";
+			},
 			render: (width: number) => container.render(width),
 			invalidate: () => container.invalidate(),
 			handleInput(data: string) {
-				if (searchActive) {
+				if (navigation.mode === "filter") {
 					if (matchesKey(data, "escape")) {
-						searchActive = false;
+						navigation.leaveFilter(true);
+						input.setValue(navigation.query);
+						input.focused = false;
 						applyFilter();
-					} else if (matchesKey(data, "enter")) searchActive = false;
-					else {
+					} else if (matchesKey(data, "enter")) {
+						navigation.leaveFilter();
+						input.focused = false;
+					} else {
 						input.handleInput(data);
+						navigation.setQuery(input.getValue());
 						applyFilter();
 					}
 					tui.requestRender();
 					return;
 				}
-				if (matchesKey(data, "up")) selectedIndex = (selectedIndex - 1 + filtered.length) % Math.max(filtered.length, 1);
-				else if (matchesKey(data, "down")) selectedIndex = (selectedIndex + 1) % Math.max(filtered.length, 1);
-				else if (data === "/") searchActive = true;
+
+				const selectedEntry = () => filtered[navigation.selectedIndex];
+				const openSelected = (): void => {
+					const entry = selectedEntry();
+					if (entry?.type === "binder") done({ type: "navigate", binderId: entry.node.binder.id });
+					else if (entry?.type === "artifact") done({ type: "artifact", row: entry.row });
+				};
+				if (keybindings.matches?.(data, "tui.select.up") === true || matchesKey(data, "up") || data === "k") navigation.move(-1);
+				else if (keybindings.matches?.(data, "tui.select.down") === true || matchesKey(data, "down") || data === "j") navigation.move(1);
+				else if (keybindings.matches?.(data, "tui.select.pageUp") === true || matchesKey(data, "pageUp") || matchesKey(data, "ctrl+u"))
+					navigation.movePage(
+						-1,
+						Math.max(
+							1,
+							Math.floor((navigation.expanded ? Math.max(BROWSER_VISIBLE_ROWS, tui.terminal.rows - 10) : BROWSER_VISIBLE_ROWS) / 2),
+						),
+					);
+				else if (keybindings.matches?.(data, "tui.select.pageDown") === true || matchesKey(data, "pageDown") || matchesKey(data, "ctrl+d"))
+					navigation.movePage(
+						1,
+						Math.max(
+							1,
+							Math.floor((navigation.expanded ? Math.max(BROWSER_VISIBLE_ROWS, tui.terminal.rows - 10) : BROWSER_VISIBLE_ROWS) / 2),
+						),
+					);
+				else if (data === "g") navigation.first();
+				else if (data === "G") navigation.last();
+				else if (data === "/") {
+					navigation.enterFilter();
+					input.focused = focused;
+				} else if (data === "f") navigation.toggleExpanded();
 				else if (tree && data === "n") {
 					done({ type: "create-binder" });
 					return;
-				} else if (tree && (matchesKey(data, "left") || data === "\x7f")) {
+				} else if (
+					tree &&
+					(keybindings.matches?.(data, "tui.editor.cursorLeft") === true || matchesKey(data, "left") || data === "h" || data === "\x7f")
+				) {
 					const parentId = currentBinderId ? tree.nodes.find((node) => node.binder.id === currentBinderId)?.parentId : undefined;
 					done({ type: "navigate", ...(parentId ? { binderId: parentId } : {}) });
 					return;
@@ -380,21 +438,24 @@ function renderPanel(
 					done({ type: "refresh" });
 					return;
 				} else if (tree && data === "a") {
-					const entry = filtered[selectedIndex];
+					const entry = selectedEntry();
 					if (entry?.type === "binder") done({ type: "binder-action", node: entry.node });
 					else if (entry?.type === "artifact") done({ type: "artifact", row: entry.row });
 					return;
-				} else if (matchesKey(data, "enter")) {
-					const entry = filtered[selectedIndex];
-					if (entry?.type === "binder") done({ type: "navigate", binderId: entry.node.binder.id });
-					else if (entry?.type === "artifact") done({ type: "artifact", row: entry.row });
+				} else if (keybindings.matches?.(data, "tui.select.confirm") === true || matchesKey(data, "enter") || data === "l") {
+					openSelected();
 					return;
-				} else if (matchesKey(data, "escape")) {
+				} else if (
+					keybindings.matches?.(data, "tui.select.cancel") === true ||
+					matchesKey(data, "escape") ||
+					matchesKey(data, "ctrl+c") ||
+					data === "q"
+				) {
 					done(undefined);
 					return;
 				} else return;
 				tui.requestRender();
 			},
-		};
+		} satisfies Component & Focusable;
 	});
 }

package/extension/src/artifact/artifact-detail-view.ts

@@ -24,11 +24,14 @@ interface ArtifactDetailLine {
 
 class ArtifactDetailViewport {
 	private offsetX = 0;
-	private offsetY = 0;
+	private compactOffsetY = 0;
+	private expandedOffsetY = 0;
+	private expandedOffsetInitialized = false;
 	private renderedWidth = 0;
 	private lines: ArtifactDetailLine[] = [];
-	private readonly visibleLines: number;
+	private readonly compactVisibleLines: number;
 	private readonly content: ArtifactDetailContent;
+	private expanded = false;
 
 	constructor(
 		private readonly tui: TUI,
@@ -36,8 +39,9 @@ class ArtifactDetailViewport {
 		artifact: Artifact,
 		relationshipLines: string[],
 		private readonly close: () => void,
+		private readonly matchesBinding: (data: string, binding: "up" | "down" | "pageUp" | "pageDown" | "cancel") => boolean,
 	) {
-		this.visibleLines = Math.max(
+		this.compactVisibleLines = Math.max(
 			ARTIFACT_DETAIL_MIN_VISIBLE_LINES,
 			Math.min(ARTIFACT_DETAIL_MAX_VISIBLE_LINES, tui.terminal.rows - ARTIFACT_DETAIL_RESERVED_ROWS),
 		);
@@ -53,14 +57,16 @@ class ArtifactDetailViewport {
 		this.buildLines(contentWidth);
 		const wideWidth = this.content.relationships.reduce((maximum, line) => Math.max(maximum, visibleWidth(line)), 0);
 		this.offsetX = Math.min(this.offsetX, Math.max(0, wideWidth - contentWidth));
-		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
-		const end = Math.min(this.lines.length, this.offsetY + this.visibleLines);
+		const visibleLines = this.visibleLineCount();
+		const offsetY = Math.min(this.activeOffsetY(), Math.max(0, this.lines.length - visibleLines));
+		const end = Math.min(this.lines.length, offsetY + visibleLines);
 		const theme = this.activeTheme();
 		const border = theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
 		const footer = [
 			wideWidth > contentWidth ? `←/→ relationships · column ${this.offsetX + 1}/${wideWidth}` : "",
-			this.lines.length > this.visibleLines ? `↑/↓ scroll · ${this.offsetY + 1}-${end}/${this.lines.length}` : "",
-			"Esc back",
+			this.lines.length > visibleLines ? `j/k scroll · ${offsetY + 1}-${end}/${this.lines.length}` : "",
+			`f ${this.expanded ? "compact" : "expand"}`,
+			"q/Esc back",
 		]
 			.filter(Boolean)
 			.join(" · ");
@@ -69,7 +75,7 @@ class ArtifactDetailViewport {
 			truncateToWidth(theme.fg("accent", theme.bold("Artifact details")), width, ""),
 			border,
 			...this.lines
-				.slice(this.offsetY, end)
+				.slice(offsetY, end)
 				.map((line) =>
 					line.wide ? ` ${sliceByColumn(line.text, this.offsetX, contentWidth, true)}` : truncateToWidth(` ${line.text}`, width, ""),
 				),
@@ -79,18 +85,48 @@ class ArtifactDetailViewport {
 	}
 
 	handleInput(data: string): void {
-		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+		if (this.matchesBinding(data, "cancel") || data === "q") {
 			this.close();
 			return;
 		}
-		if (matchesKey(data, "up")) this.offsetY = Math.max(0, this.offsetY - 1);
-		else if (matchesKey(data, "down")) this.offsetY = Math.min(Math.max(0, this.lines.length - this.visibleLines), this.offsetY + 1);
-		else if (matchesKey(data, "left")) this.offsetX = Math.max(0, this.offsetX - ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS);
-		else if (matchesKey(data, "right")) this.offsetX += ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS;
-		else return;
+		const visibleLines = this.visibleLineCount();
+		const offsetY = Math.min(this.activeOffsetY(), Math.max(0, this.lines.length - visibleLines));
+		if (this.matchesBinding(data, "up") || data === "k") this.setActiveOffsetY(Math.max(0, offsetY - 1));
+		else if (this.matchesBinding(data, "down") || data === "j")
+			this.setActiveOffsetY(Math.min(Math.max(0, this.lines.length - visibleLines), offsetY + 1));
+		else if (this.matchesBinding(data, "pageUp") || matchesKey(data, "ctrl+u"))
+			this.setActiveOffsetY(Math.max(0, offsetY - Math.max(1, Math.floor(visibleLines / 2))));
+		else if (this.matchesBinding(data, "pageDown") || matchesKey(data, "ctrl+d"))
+			this.setActiveOffsetY(Math.min(Math.max(0, this.lines.length - visibleLines), offsetY + Math.max(1, Math.floor(visibleLines / 2))));
+		else if (matchesKey(data, "left") || data === "h") this.offsetX = Math.max(0, this.offsetX - ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS);
+		else if (matchesKey(data, "right") || data === "l") this.offsetX += ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS;
+		else if (data === "g") this.setActiveOffsetY(0);
+		else if (data === "G") this.setActiveOffsetY(Math.max(0, this.lines.length - visibleLines));
+		else if (data === "f") {
+			if (!this.expanded && !this.expandedOffsetInitialized) {
+				this.expandedOffsetY = this.compactOffsetY;
+				this.expandedOffsetInitialized = true;
+			}
+			this.expanded = !this.expanded;
+		} else return;
 		this.tui.requestRender();
 	}
 
+	private activeOffsetY(): number {
+		return this.expanded ? this.expandedOffsetY : this.compactOffsetY;
+	}
+
+	private setActiveOffsetY(offsetY: number): void {
+		if (this.expanded) this.expandedOffsetY = offsetY;
+		else this.compactOffsetY = offsetY;
+	}
+
+	private visibleLineCount(): number {
+		return this.expanded
+			? Math.max(this.compactVisibleLines, this.tui.terminal.rows - ARTIFACT_DETAIL_RESERVED_ROWS)
+			: this.compactVisibleLines;
+	}
+
 	private buildLines(width: number): void {
 		if (this.renderedWidth === width) return;
 		this.renderedWidth = width;
@@ -137,7 +173,6 @@ class ArtifactDetailViewport {
 					]
 				: [];
 		this.lines = [...identity, ...body, ...labelsAndMetadataWithLeadingBlank, ...relationships];
-		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
 	}
 }
 
@@ -153,6 +188,20 @@ export async function showArtifactDetailView(
 		return;
 	}
 	await ctx.ui.custom<void>(
-		(tui, theme, _keybindings, done) => new ArtifactDetailViewport(tui, () => ctx.ui.theme ?? theme, artifact, relationshipLines, done),
+		(tui, theme, keybindings, done) =>
+			new ArtifactDetailViewport(
+				tui,
+				() => ctx.ui.theme ?? theme,
+				artifact,
+				relationshipLines,
+				done,
+				(data, binding) => {
+					if (binding === "up") return keybindings.matches?.(data, "tui.select.up") === true || matchesKey(data, "up");
+					if (binding === "down") return keybindings.matches?.(data, "tui.select.down") === true || matchesKey(data, "down");
+					if (binding === "pageUp") return keybindings.matches?.(data, "tui.select.pageUp") === true || matchesKey(data, "pageUp");
+					if (binding === "pageDown") return keybindings.matches?.(data, "tui.select.pageDown") === true || matchesKey(data, "pageDown");
+					return keybindings.matches?.(data, "tui.select.cancel") === true || matchesKey(data, "escape") || matchesKey(data, "ctrl+c");
+				},
+			),
 	);
 }

package/extension/src/artifact/artifact-navigation-state.ts

@@ -0,0 +1,54 @@
+export type ArtifactNavigationMode = "normal" | "filter";
+
+/** Owns bounded selection, mode, and viewport-expansion state for artifact UIs. */
+export class ArtifactNavigationState {
+	selectedIndex = 0;
+	mode: ArtifactNavigationMode = "normal";
+	query = "";
+	expanded = false;
+
+	constructor(private itemCount: number) {
+		this.setItemCount(itemCount);
+	}
+
+	setItemCount(itemCount: number): void {
+		this.itemCount = Math.max(0, itemCount);
+		this.selectedIndex = this.itemCount === 0 ? 0 : Math.min(this.selectedIndex, this.itemCount - 1);
+	}
+
+	move(delta: number): void {
+		if (this.itemCount === 0) return;
+		this.selectedIndex = (this.selectedIndex + delta + this.itemCount) % this.itemCount;
+	}
+
+	movePage(direction: -1 | 1, pageSize: number): void {
+		if (this.itemCount === 0) return;
+		const distance = Math.max(1, Math.floor(pageSize));
+		this.selectedIndex = Math.max(0, Math.min(this.itemCount - 1, this.selectedIndex + direction * distance));
+	}
+
+	first(): void {
+		this.selectedIndex = 0;
+	}
+
+	last(): void {
+		this.selectedIndex = Math.max(0, this.itemCount - 1);
+	}
+
+	enterFilter(): void {
+		this.mode = "filter";
+	}
+
+	setQuery(query: string): void {
+		this.query = query;
+	}
+
+	leaveFilter(clearQuery = false): void {
+		this.mode = "normal";
+		if (clearQuery) this.query = "";
+	}
+
+	toggleExpanded(): void {
+		this.expanded = !this.expanded;
+	}
+}

package/extension/src/discuss/discussion-detail-view.ts

@@ -45,10 +45,13 @@ export function discussionRoundCountOf(discussion: Artifact): number {
 }
 
 class DiscussionTranscriptViewport {
-	private offsetY = 0;
+	private compactOffsetY = 0;
+	private expandedOffsetY = 0;
+	private expandedOffsetInitialized = false;
 	private renderedWidth = 0;
 	private lines: TranscriptLine[] = [];
-	private readonly visibleLines: number;
+	private readonly compactVisibleLines: number;
+	private expanded = false;
 
 	constructor(
 		private readonly tui: TUI,
@@ -56,8 +59,9 @@ class DiscussionTranscriptViewport {
 		private readonly discussion: Artifact,
 		private readonly rounds: DiscussionRound[],
 		private readonly close: () => void,
+		private readonly matchesBinding: (data: string, binding: "up" | "down" | "pageUp" | "pageDown" | "cancel") => boolean,
 	) {
-		this.visibleLines = Math.max(
+		this.compactVisibleLines = Math.max(
 			ARTIFACT_DETAIL_MIN_VISIBLE_LINES,
 			Math.min(ARTIFACT_DETAIL_MAX_VISIBLE_LINES, tui.terminal.rows - ARTIFACT_DETAIL_RESERVED_ROWS),
 		);
@@ -70,37 +74,69 @@ class DiscussionTranscriptViewport {
 	render(width: number): string[] {
 		const contentWidth = Math.max(1, width - 2);
 		this.buildLines(contentWidth);
-		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
-		const end = Math.min(this.lines.length, this.offsetY + this.visibleLines);
+		const visibleLines = this.visibleLineCount();
+		const offsetY = Math.min(this.activeOffsetY(), Math.max(0, this.lines.length - visibleLines));
+		const end = Math.min(this.lines.length, offsetY + visibleLines);
 		const theme = this.activeTheme();
 		const border = theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
-		const footer = [this.lines.length > this.visibleLines ? `↑/↓ scroll · ${this.offsetY + 1}-${end}/${this.lines.length}` : "", "Esc back"]
+		const footer = [
+			this.lines.length > visibleLines ? `j/k scroll · ${offsetY + 1}-${end}/${this.lines.length}` : "",
+			`f ${this.expanded ? "compact" : "expand"}`,
+			"q/Esc back",
+		]
 			.filter(Boolean)
 			.join(" · ");
 		return [
 			border,
 			truncateToWidth(theme.fg("accent", theme.bold("Discussion transcript")), width, ""),
 			border,
-			...this.lines.slice(this.offsetY, end).map((line) => truncateToWidth(` ${line.text}`, width, "")),
+			...this.lines.slice(offsetY, end).map((line) => truncateToWidth(` ${line.text}`, width, "")),
 			truncateToWidth(theme.fg("dim", footer), width, ""),
 			border,
 		];
 	}
 
 	handleInput(data: string): void {
-		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+		if (this.matchesBinding(data, "cancel") || data === "q") {
 			this.close();
 			return;
 		}
-		if (matchesKey(data, "up")) this.offsetY = Math.max(0, this.offsetY - 1);
-		else if (matchesKey(data, "down")) this.offsetY = Math.min(Math.max(0, this.lines.length - this.visibleLines), this.offsetY + 1);
-		else if (matchesKey(data, "pageDown"))
-			this.offsetY = Math.min(Math.max(0, this.lines.length - this.visibleLines), this.offsetY + this.visibleLines);
-		else if (matchesKey(data, "pageUp")) this.offsetY = Math.max(0, this.offsetY - this.visibleLines);
-		else return;
+		const visibleLines = this.visibleLineCount();
+		const offsetY = Math.min(this.activeOffsetY(), Math.max(0, this.lines.length - visibleLines));
+		if (this.matchesBinding(data, "up") || data === "k") this.setActiveOffsetY(Math.max(0, offsetY - 1));
+		else if (this.matchesBinding(data, "down") || data === "j")
+			this.setActiveOffsetY(Math.min(Math.max(0, this.lines.length - visibleLines), offsetY + 1));
+		else if (this.matchesBinding(data, "pageDown") || matchesKey(data, "ctrl+d"))
+			this.setActiveOffsetY(Math.min(Math.max(0, this.lines.length - visibleLines), offsetY + Math.max(1, Math.floor(visibleLines / 2))));
+		else if (this.matchesBinding(data, "pageUp") || matchesKey(data, "ctrl+u"))
+			this.setActiveOffsetY(Math.max(0, offsetY - Math.max(1, Math.floor(visibleLines / 2))));
+		else if (data === "g") this.setActiveOffsetY(0);
+		else if (data === "G") this.setActiveOffsetY(Math.max(0, this.lines.length - visibleLines));
+		else if (data === "f") {
+			if (!this.expanded && !this.expandedOffsetInitialized) {
+				this.expandedOffsetY = this.compactOffsetY;
+				this.expandedOffsetInitialized = true;
+			}
+			this.expanded = !this.expanded;
+		} else return;
 		this.tui.requestRender();
 	}
 
+	private activeOffsetY(): number {
+		return this.expanded ? this.expandedOffsetY : this.compactOffsetY;
+	}
+
+	private setActiveOffsetY(offsetY: number): void {
+		if (this.expanded) this.expandedOffsetY = offsetY;
+		else this.compactOffsetY = offsetY;
+	}
+
+	private visibleLineCount(): number {
+		return this.expanded
+			? Math.max(this.compactVisibleLines, this.tui.terminal.rows - ARTIFACT_DETAIL_RESERVED_ROWS)
+			: this.compactVisibleLines;
+	}
+
 	private buildLines(width: number): void {
 		if (this.renderedWidth === width) return;
 		this.renderedWidth = width;
@@ -171,7 +207,6 @@ class DiscussionTranscriptViewport {
 			];
 		});
 		this.lines = [...header, ...(transcript.length > 0 ? transcript : [{ text: theme.fg("muted", "No rounds recorded.") }])];
-		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
 	}
 }
 
@@ -186,6 +221,20 @@ export async function showDiscussionDetailView(
 		return;
 	}
 	await ctx.ui.custom<void>(
-		(tui, theme, _keybindings, done) => new DiscussionTranscriptViewport(tui, () => ctx.ui.theme ?? theme, discussion, rounds, done),
+		(tui, theme, keybindings, done) =>
+			new DiscussionTranscriptViewport(
+				tui,
+				() => ctx.ui.theme ?? theme,
+				discussion,
+				rounds,
+				done,
+				(data, binding) => {
+					if (binding === "up") return keybindings.matches?.(data, "tui.select.up") === true || matchesKey(data, "up");
+					if (binding === "down") return keybindings.matches?.(data, "tui.select.down") === true || matchesKey(data, "down");
+					if (binding === "pageUp") return keybindings.matches?.(data, "tui.select.pageUp") === true || matchesKey(data, "pageUp");
+					if (binding === "pageDown") return keybindings.matches?.(data, "tui.select.pageDown") === true || matchesKey(data, "pageDown");
+					return keybindings.matches?.(data, "tui.select.cancel") === true || matchesKey(data, "escape") || matchesKey(data, "ctrl+c");
+				},
+			),
 	);
 }

package/extension/src/index.ts

@@ -64,6 +64,37 @@ import {
 } from "./tool-rendering/render-model.ts";
 import { registerNotesVehicle } from "./tools/vehicle-notes-client.ts";
 
+/**
+ * Context enrichment is useful, but it sits before provider dispatch and therefore gets a much
+ * smaller deadline than an explicit daemon-backed tool call. A failed daemon probe may continue
+ * settling in the background; this deadline only guarantees the user's prompt is released.
+ */
+export const PAPYRUS_CONTEXT_INJECTION_DEADLINE_MS = 500;
+
+function withContextInjectionDeadline<T>(work: Promise<T>): Promise<T> {
+	let timer: ReturnType<typeof setTimeout>;
+	const deadline = new Promise<never>((_resolve, reject) => {
+		timer = setTimeout(
+			() => reject(new Error(`Papyrus context injection exceeded ${PAPYRUS_CONTEXT_INJECTION_DEADLINE_MS}ms`)),
+			PAPYRUS_CONTEXT_INJECTION_DEADLINE_MS,
+		);
+		timer.unref?.();
+	});
+	return Promise.race([work, deadline]).finally(() => clearTimeout(timer));
+}
+
+type InjectableRule = Pick<Artifact, "id" | "title" | "body" | "extra">;
+type InjectablePlaybook = Pick<Artifact, "title" | "extra">;
+
+interface ContextInjectionSnapshot {
+	projectRoot: string;
+	sessionId: string;
+	rules: InjectableRule[];
+	playbooks: InjectablePlaybook[];
+	taskSummary: string | null;
+	taskGraph: TaskGraph;
+}
+
 function text(value: string, details: unknown = {}) {
 	const modelContent = createModelContent(value);
 	return { content: [{ type: "text" as const, text: modelContent.text }], details };
@@ -477,6 +508,9 @@ export default function (pi: ExtensionAPI) {
 	let contextInjectionSequence = 0;
 	const contextInjectionProducerId = randomUUID();
 	let previousContextInjectionFingerprint: string | undefined;
+	// A single project/session-scoped snapshot bounds memory while preserving the latest complete
+	// context across transient daemon restarts and client/daemon version skew.
+	let latestContextInjection: ContextInjectionSnapshot | undefined;
 	let logTurnSequence = 0;
 	// Papyrus's own Context Hub contribution (rules/tasks/Pi's own skill catalog, bundled into one segment --
 	// see context/context-hub-contribution.ts) re-emits every turn alongside the existing injection
@@ -969,40 +1003,64 @@ export default function (pi: ExtensionAPI) {
 		let result: { systemPrompt: string } | undefined;
 		try {
 			const sessionId = ctx.sessionManager.getSessionId();
-			const activationContext = buildActivationContext(ctx.cwd, event.prompt, event.systemPromptOptions.selectedTools);
-			const [rules, playbooks, summary, taskGraph] = await Promise.all([
-				callService<Record<string, unknown>, Array<Pick<Artifact, "id" | "title" | "body" | "extra">>>("rules.injectable", {
-					project_root: ctx.cwd,
-					session_id: sessionId,
-					activation_context: activationContext,
-				}),
-				callService<Record<string, unknown>, Array<Pick<Artifact, "title" | "extra">>>("playbooks.list", {
-					status: "active",
-					project_root: ctx.cwd,
-					applicable: true,
-					activated: true,
-					full: true,
-					activation_context: activationContext,
-					session_id: sessionId,
-					limit: PLAYBOOK_BRIDGE_MAX_PLAYBOOKS,
-				}),
-				callService<Record<string, unknown>, string | null>("tasks.context", {
-					project_root: ctx.cwd,
-					session_id: sessionId,
-					verbosity: "summary",
-				}),
-				callService<Record<string, unknown>, TaskGraph>("tasks.graph", { project_root: ctx.cwd, session_id: sessionId }),
-			]);
+			let snapshot =
+				latestContextInjection?.projectRoot === ctx.cwd && latestContextInjection.sessionId === sessionId
+					? latestContextInjection
+					: undefined;
+			try {
+				const activationContext = buildActivationContext(ctx.cwd, event.prompt, event.systemPromptOptions.selectedTools);
+				// Pi awaits before_agent_start before it can dispatch the provider request. These are
+				// opportunistic lifecycle reads, so use the no-retry client rather than spending the
+				// explicit-tool client's ~5s daemon-restart backoff on every incompatible/unavailable
+				// daemon. The outer deadline also bounds a connected daemon that stops responding.
+				const [rules, playbooks, taskSummary, taskGraph] = await withContextInjectionDeadline(
+					Promise.all([
+						callServicePassive<Record<string, unknown>, InjectableRule[]>("rules.injectable", {
+							project_root: ctx.cwd,
+							session_id: sessionId,
+							activation_context: activationContext,
+						}),
+						callServicePassive<Record<string, unknown>, InjectablePlaybook[]>("playbooks.list", {
+							status: "active",
+							project_root: ctx.cwd,
+							applicable: true,
+							activated: true,
+							full: true,
+							activation_context: activationContext,
+							session_id: sessionId,
+							limit: PLAYBOOK_BRIDGE_MAX_PLAYBOOKS,
+						}),
+						callServicePassive<Record<string, unknown>, string | null>("tasks.context", {
+							project_root: ctx.cwd,
+							session_id: sessionId,
+							verbosity: "summary",
+						}),
+						callServicePassive<Record<string, unknown>, TaskGraph>("tasks.graph", {
+							project_root: ctx.cwd,
+							session_id: sessionId,
+						}),
+					]),
+				);
+				snapshot = { projectRoot: ctx.cwd, sessionId, rules, playbooks, taskSummary, taskGraph };
+			} catch {
+				// Preserve the latest complete snapshot for this project/session. Cold-start failures
+				// still skip injection, but a transient restart cannot erase previously valid context.
+				if (!snapshot) return undefined;
+			}
+			const { rules, playbooks, taskSummary, taskGraph } = snapshot;
 			const injection = buildContextInjection({
 				basePrompt: event.systemPrompt ?? "",
 				rules,
 				playbooks,
-				taskSummary: summary,
+				taskSummary,
 				observedAt: Date.now(),
 				sequence: ++contextInjectionSequence,
 				producerId: contextInjectionProducerId,
 				previousFingerprint: previousContextInjectionFingerprint,
 			});
+			const taskItems = buildTaskItemTree(taskGraph);
+			// Cache only a complete snapshot that both prompt and graph projection accepted.
+			latestContextInjection = snapshot;
 			previousContextInjectionFingerprint = injection.observation.fingerprint;
 			pi.events.emit(PAPYRUS_CONTEXT_INJECTION_CHANNEL, injection.observation);
 			if (injection.prompt !== (event.systemPrompt ?? "")) result = { systemPrompt: injection.prompt };
@@ -1015,7 +1073,7 @@ export default function (pi: ExtensionAPI) {
 					observedAt: Date.now(),
 					sequence: ++contextHubContributionSequence,
 					producerName: PAPYRUS_CONTEXT_HUB_PRODUCER_NAME,
-					segment: papyrusContextSegment(ruleBudget, buildTaskItemTree(taskGraph), skills, playbookBudget),
+					segment: papyrusContextSegment(ruleBudget, taskItems, skills, playbookBudget),
 				});
 			} catch {
 				// Malformed/unreachable daemon data for this turn's contribution -- drop it silently.

package/extension/src/task/task-detail-view.ts

@@ -27,11 +27,14 @@ interface DetailLine {
 
 class TaskDetailViewport {
 	private offsetX = 0;
-	private offsetY = 0;
+	private compactOffsetY = 0;
+	private expandedOffsetY = 0;
+	private expandedOffsetInitialized = false;
 	private renderedWidth = 0;
 	private detailLines: DetailLine[] = [];
-	private readonly visibleLines: number;
+	private readonly compactVisibleLines: number;
 	private readonly content: TaskDetailContent;
+	private expanded = false;
 	private readonly status: Artifact["status"];
 
 	constructor(
@@ -41,8 +44,9 @@ class TaskDetailViewport {
 		private readonly graphLines: string[],
 		history: TaskEvent[],
 		private readonly close: () => void,
+		private readonly matchesBinding: (data: string, binding: "up" | "down" | "pageUp" | "pageDown" | "cancel") => boolean,
 	) {
-		this.visibleLines = Math.max(
+		this.compactVisibleLines = Math.max(
 			TASK_DETAIL_MIN_VISIBLE_LINES,
 			Math.min(TASK_DETAIL_MAX_VISIBLE_LINES, tui.terminal.rows - TASK_DETAIL_RESERVED_ROWS),
 		);
@@ -59,14 +63,16 @@ class TaskDetailViewport {
 		this.buildLines(contentWidth);
 		const graphWidth = this.graphLines.reduce((maximum, line) => Math.max(maximum, visibleWidth(line)), 0);
 		this.offsetX = Math.min(this.offsetX, Math.max(0, graphWidth - contentWidth));
-		this.offsetY = Math.min(this.offsetY, Math.max(0, this.detailLines.length - this.visibleLines));
-		const end = Math.min(this.detailLines.length, this.offsetY + this.visibleLines);
+		const visibleLines = this.visibleLineCount();
+		const offsetY = Math.min(this.activeOffsetY(), Math.max(0, this.detailLines.length - visibleLines));
+		const end = Math.min(this.detailLines.length, offsetY + visibleLines);
 		const theme = this.activeTheme();
 		const border = theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
 		const footer = [
 			graphWidth > contentWidth ? `←/→ graph · column ${this.offsetX + 1}/${graphWidth}` : "",
-			this.detailLines.length > this.visibleLines ? `↑/↓ scroll · ${this.offsetY + 1}-${end}/${this.detailLines.length}` : "",
-			"Esc back",
+			this.detailLines.length > visibleLines ? `j/k scroll · ${offsetY + 1}-${end}/${this.detailLines.length}` : "",
+			`f ${this.expanded ? "compact" : "expand"}`,
+			"q/Esc back",
 		]
 			.filter(Boolean)
 			.join(" · ");
@@ -75,7 +81,7 @@ class TaskDetailViewport {
 			truncateToWidth(theme.fg("accent", theme.bold("Task details")), width, ""),
 			border,
 			...this.detailLines
-				.slice(this.offsetY, end)
+				.slice(offsetY, end)
 				.map((line) =>
 					line.graph ? ` ${sliceByColumn(line.text, this.offsetX, contentWidth, true)}` : truncateToWidth(` ${line.text}`, width, ""),
 				),
@@ -85,18 +91,50 @@ class TaskDetailViewport {
 	}
 
 	handleInput(data: string): void {
-		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+		if (this.matchesBinding(data, "cancel") || data === "q") {
 			this.close();
 			return;
 		}
-		if (matchesKey(data, "up")) this.offsetY = Math.max(0, this.offsetY - 1);
-		else if (matchesKey(data, "down")) this.offsetY = Math.min(Math.max(0, this.detailLines.length - this.visibleLines), this.offsetY + 1);
-		else if (matchesKey(data, "left")) this.offsetX = Math.max(0, this.offsetX - TASK_DETAIL_HORIZONTAL_PAN_COLUMNS);
-		else if (matchesKey(data, "right")) this.offsetX += TASK_DETAIL_HORIZONTAL_PAN_COLUMNS;
-		else return;
+		const visibleLines = this.visibleLineCount();
+		const offsetY = Math.min(this.activeOffsetY(), Math.max(0, this.detailLines.length - visibleLines));
+		if (this.matchesBinding(data, "up") || data === "k") this.setActiveOffsetY(Math.max(0, offsetY - 1));
+		else if (this.matchesBinding(data, "down") || data === "j")
+			this.setActiveOffsetY(Math.min(Math.max(0, this.detailLines.length - visibleLines), offsetY + 1));
+		else if (this.matchesBinding(data, "pageUp") || matchesKey(data, "ctrl+u"))
+			this.setActiveOffsetY(Math.max(0, offsetY - Math.max(1, Math.floor(visibleLines / 2))));
+		else if (this.matchesBinding(data, "pageDown") || matchesKey(data, "ctrl+d"))
+			this.setActiveOffsetY(
+				Math.min(Math.max(0, this.detailLines.length - visibleLines), offsetY + Math.max(1, Math.floor(visibleLines / 2))),
+			);
+		else if (matchesKey(data, "left") || data === "h") this.offsetX = Math.max(0, this.offsetX - TASK_DETAIL_HORIZONTAL_PAN_COLUMNS);
+		else if (matchesKey(data, "right") || data === "l") this.offsetX += TASK_DETAIL_HORIZONTAL_PAN_COLUMNS;
+		else if (data === "g") this.setActiveOffsetY(0);
+		else if (data === "G") this.setActiveOffsetY(Math.max(0, this.detailLines.length - visibleLines));
+		else if (data === "f") {
+			if (!this.expanded && !this.expandedOffsetInitialized) {
+				this.expandedOffsetY = this.compactOffsetY;
+				this.expandedOffsetInitialized = true;
+			}
+			this.expanded = !this.expanded;
+		} else return;
 		this.tui.requestRender();
 	}
 
+	private activeOffsetY(): number {
+		return this.expanded ? this.expandedOffsetY : this.compactOffsetY;
+	}
+
+	private setActiveOffsetY(offsetY: number): void {
+		if (this.expanded) this.expandedOffsetY = offsetY;
+		else this.compactOffsetY = offsetY;
+	}
+
+	private visibleLineCount(): number {
+		return this.expanded
+			? Math.max(this.compactVisibleLines, this.tui.terminal.rows - TASK_DETAIL_RESERVED_ROWS)
+			: this.compactVisibleLines;
+	}
+
 	private buildLines(width: number): void {
 		if (this.renderedWidth === width) return;
 		this.renderedWidth = width;
@@ -146,7 +184,6 @@ class TaskDetailViewport {
 			...relationshipHeader,
 			...this.graphLines.map((text) => ({ text: theme.fg("text", text), graph: true })),
 		];
-		this.offsetY = Math.min(this.offsetY, Math.max(0, this.detailLines.length - this.visibleLines));
 	}
 }
 
@@ -164,6 +201,21 @@ export async function showTaskDetails(
 		return;
 	}
 	await ctx.ui.custom<void>(
-		(tui, theme, _keybindings, done) => new TaskDetailViewport(tui, () => ctx.ui.theme ?? theme, task, relationshipGraph, history, done),
+		(tui, theme, keybindings, done) =>
+			new TaskDetailViewport(
+				tui,
+				() => ctx.ui.theme ?? theme,
+				task,
+				relationshipGraph,
+				history,
+				done,
+				(data, binding) => {
+					if (binding === "up") return keybindings.matches?.(data, "tui.select.up") === true || matchesKey(data, "up");
+					if (binding === "down") return keybindings.matches?.(data, "tui.select.down") === true || matchesKey(data, "down");
+					if (binding === "pageUp") return keybindings.matches?.(data, "tui.select.pageUp") === true || matchesKey(data, "pageUp");
+					if (binding === "pageDown") return keybindings.matches?.(data, "tui.select.pageDown") === true || matchesKey(data, "pageDown");
+					return keybindings.matches?.(data, "tui.select.cancel") === true || matchesKey(data, "escape") || matchesKey(data, "ctrl+c");
+				},
+			),
 	);
 }

package/extension/src/task/tasks.ts

@@ -5,7 +5,17 @@
  */
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { Container, Input, matchesKey, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import {
+	type Component,
+	Container,
+	type Focusable,
+	Input,
+	matchesKey,
+	Spacer,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+import { ArtifactNavigationState } from "../artifact/artifact-navigation-state.ts";
 import {
 	artifactBinderPath,
 	artifactSearchText,
@@ -430,7 +440,7 @@ function renderPanel(
 	binders: BinderTree,
 	currentBinderId: string | undefined,
 ): Promise<PanelAction | undefined> {
-	return ctx.ui.custom<PanelAction | undefined>((tui, theme, _kb, done) => {
+	return ctx.ui.custom<PanelAction | undefined>((tui, theme, keybindings, done) => {
 		const rows = graph.nodes.map((node) => node.task);
 		const searchInput = new Input();
 		const allHierarchy = buildTaskHierarchy(graph);
@@ -442,13 +452,12 @@ function renderPanel(
 		];
 		const taskById = new Map(rows.map((task) => [task.id, task]));
 		const executionById = new Map(projectTaskExecution(graph).nodes.map((node) => [node.id, node]));
-		let searchActive = false;
 		let filtered = currentEntries();
-		let selectedIndex = 0;
-		const maxVisible = 20;
+		const navigation = new ArtifactNavigationState(filtered.length);
+		const compactVisible = 20;
 
 		function applyFilter(): void {
-			const query = searchInput.getValue().trim().toLowerCase();
+			const query = navigation.query.trim().toLowerCase();
 			filtered = query
 				? [
 						...binders.nodes
@@ -463,7 +472,8 @@ function renderPanel(
 						return leftPath.localeCompare(rightPath);
 					})
 				: currentEntries();
-			selectedIndex = 0;
+			navigation.setItemCount(filtered.length);
+			navigation.first();
 		}
 
 		function statusLine(): string {
@@ -483,20 +493,23 @@ function renderPanel(
 			invalidate() {},
 			render(width: number): string[] {
 				const title = theme.bold(`Tasks · ${graph.scope?.label ?? "scope unavailable"} · ${currentBinderPath(binders, currentBinderId)}`);
-				const hint = searchActive
-					? rawKeyHint("esc", "clear")
-					: [
-							rawKeyHint("↑/↓", "navigate"),
-							rawKeyHint("enter", "open/actions"),
-							rawKeyHint("a", "actions"),
-							rawKeyHint("←", "up"),
-							rawKeyHint("n", "new Binder"),
-							rawKeyHint("/", "filter"),
-							rawKeyHint("g", "graph"),
-							rawKeyHint("s", "scope"),
-							rawKeyHint("r", "refresh"),
-							rawKeyHint("esc", "close"),
-						].join(theme.fg("muted", " · "));
+				const hint =
+					navigation.mode === "filter"
+						? `${theme.fg("accent", "FILTER")} · ${rawKeyHint("enter", "keep")} · ${rawKeyHint("esc", "clear")}`
+						: [
+								theme.fg("accent", "NORMAL"),
+								rawKeyHint("j/k", "navigate"),
+								rawKeyHint("enter/l", "open/actions"),
+								rawKeyHint("a", "actions"),
+								rawKeyHint("h", "up"),
+								rawKeyHint("n", "new Binder"),
+								rawKeyHint("/", "filter"),
+								rawKeyHint("v", "graph"),
+								rawKeyHint("s", "scope"),
+								rawKeyHint("f", navigation.expanded ? "compact" : "expand"),
+								rawKeyHint("r", "refresh"),
+								rawKeyHint("q", "close"),
+							].join(theme.fg("muted", " · "));
 				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(hint));
 				const line1 = truncateToWidth(`${title}${" ".repeat(spacing)}${hint}`, width, "");
 				const line2 = truncateToWidth(theme.fg("muted", statusLine()), width, "");
@@ -508,17 +521,18 @@ function renderPanel(
 			invalidate() {},
 			render(width: number): string[] {
 				const lines: string[] = [];
-				if (searchActive) lines.push(...searchInput.render(width));
+				if (navigation.mode === "filter") lines.push(...searchInput.render(width));
 				lines.push("");
 				if (filtered.length === 0) {
 					lines.push(theme.fg("muted", "  No tasks or Binders here"));
 					return lines;
 				}
-				const start = Math.max(0, Math.min(selectedIndex - Math.floor(maxVisible / 2), filtered.length - maxVisible));
-				const end = Math.min(start + maxVisible, filtered.length);
+				const visibleRows = navigation.expanded ? Math.max(compactVisible, tui.terminal.rows - 10) : compactVisible;
+				const start = Math.max(0, Math.min(navigation.selectedIndex - Math.floor(visibleRows / 2), filtered.length - visibleRows));
+				const end = Math.min(start + visibleRows, filtered.length);
 				for (let i = start; i < end; i++) {
 					const panelEntry = filtered[i]!;
-					const selected = i === selectedIndex;
+					const selected = i === navigation.selectedIndex;
 					const cursor = selected ? theme.fg("accent", "❯") : " ";
 					if (panelEntry.type === "binder") {
 						const title = selected ? theme.bold(panelEntry.node.binder.title) : panelEntry.node.binder.title;
@@ -527,7 +541,7 @@ function renderPanel(
 								? `${panelEntry.node.childIds.length} Binder${panelEntry.node.childIds.length === 1 ? "" : "s"}`
 								: "",
 							panelEntry.node.effectiveLabels.length > 0 ? panelEntry.node.effectiveLabels.join(", ") : "",
-							searchActive ? panelEntry.node.path : "",
+							navigation.mode === "filter" ? panelEntry.node.path : "",
 						].filter(Boolean);
 						lines.push(
 							truncateToWidth(
@@ -579,13 +593,13 @@ function renderPanel(
 					if (row.labels.length > 0) relationParts.push(row.labels.join(", "));
 					const inheritedLabels = inheritedLabelsFor(row.id, binders);
 					if (inheritedLabels.length > 0) relationParts.push(`inherits ${inheritedLabels.join(", ")}`);
-					if (searchActive) relationParts.push(artifactBinderPath(row, binders));
+					if (navigation.mode === "filter") relationParts.push(artifactBinderPath(row, binders));
 					const relationText = relationParts.length > 0 ? theme.fg("dim", ` · ${relationParts.join(" · ")}`) : "";
 					lines.push(truncateToWidth(`${cursor}${focus} ${node} ${glyphStyled} ${title}${relationText}`, width, ""));
 				}
 				const hasScroll = start > 0 || end < filtered.length;
 				lines.push(
-					theme.fg("muted", `  ${hasScroll ? `${selectedIndex + 1}/${filtered.length} · ` : ""}↑/↓ navigate · Enter open/actions`),
+					theme.fg("muted", `  ${hasScroll ? `${navigation.selectedIndex + 1}/${filtered.length} · ` : ""}j/k navigate · Enter/l open`),
 				);
 				return lines;
 			},
@@ -601,34 +615,72 @@ function renderPanel(
 		container.addChild(new Spacer(1));
 		container.addChild(new DynamicBorder());
 
+		let focused = false;
 		return {
+			get focused(): boolean {
+				return focused;
+			},
+			set focused(value: boolean) {
+				focused = value;
+				searchInput.focused = value && navigation.mode === "filter";
+			},
 			render: (width: number) => container.render(width),
 			invalidate: () => container.invalidate(),
 			handleInput(data: string) {
-				if (searchActive) {
+				if (navigation.mode === "filter") {
 					if (matchesKey(data, "escape")) {
-						searchActive = false;
+						navigation.leaveFilter(true);
+						searchInput.setValue(navigation.query);
+						searchInput.focused = false;
 						applyFilter();
 					} else if (matchesKey(data, "enter")) {
-						searchActive = false;
+						navigation.leaveFilter();
+						searchInput.focused = false;
 					} else {
 						searchInput.handleInput(data);
+						navigation.setQuery(searchInput.getValue());
 						applyFilter();
 					}
 					tui.requestRender();
 					return;
 				}
-				if (matchesKey(data, "up")) selectedIndex = (selectedIndex - 1 + filtered.length) % Math.max(filtered.length, 1);
-				else if (matchesKey(data, "down")) selectedIndex = (selectedIndex + 1) % Math.max(filtered.length, 1);
-				else if (data === "/") searchActive = true;
+				const selectedEntry = () => filtered[navigation.selectedIndex];
+				const openSelected = (): void => {
+					const entry = selectedEntry();
+					if (entry?.type === "binder") done({ type: "navigate", binderId: entry.node.binder.id });
+					else if (entry?.type === "task") done({ type: "action", row: entry.entry.task });
+				};
+				if (keybindings.matches?.(data, "tui.select.up") === true || matchesKey(data, "up") || data === "k") navigation.move(-1);
+				else if (keybindings.matches?.(data, "tui.select.down") === true || matchesKey(data, "down") || data === "j") navigation.move(1);
+				else if (keybindings.matches?.(data, "tui.select.pageUp") === true || matchesKey(data, "pageUp") || matchesKey(data, "ctrl+u"))
+					navigation.movePage(
+						-1,
+						Math.max(1, Math.floor((navigation.expanded ? Math.max(compactVisible, tui.terminal.rows - 10) : compactVisible) / 2)),
+					);
+				else if (keybindings.matches?.(data, "tui.select.pageDown") === true || matchesKey(data, "pageDown") || matchesKey(data, "ctrl+d"))
+					navigation.movePage(
+						1,
+						Math.max(1, Math.floor((navigation.expanded ? Math.max(compactVisible, tui.terminal.rows - 10) : compactVisible) / 2)),
+					);
+				else if (data === "g") navigation.first();
+				else if (data === "G") navigation.last();
+				else if (data === "/") {
+					navigation.enterFilter();
+					searchInput.focused = focused;
+				} else if (data === "f") navigation.toggleExpanded();
 				else if (data === "n") {
 					done({ type: "create-binder" });
 					return;
-				} else if (matchesKey(data, "left") || data === "\x7f") {
+				} else if (
+					keybindings.matches?.(data, "tui.editor.cursorLeft") === true ||
+					matchesKey(data, "left") ||
+					data === "h" ||
+					data === "\x7f"
+				) {
 					const parentId = currentBinderId ? binders.nodes.find((node) => node.binder.id === currentBinderId)?.parentId : undefined;
 					done({ type: "navigate", ...(parentId ? { binderId: parentId } : {}) });
 					return;
-				} else if (data === "g") {
+				} else if (data === "v") {
 					done({ type: "graph" });
 					return;
 				} else if (data === "s") {
@@ -638,21 +690,24 @@ function renderPanel(
 					done({ type: "refresh" });
 					return;
 				} else if (data === "a") {
-					const panelEntry = filtered[selectedIndex];
-					if (panelEntry?.type === "binder") done({ type: "binder-action", binder: panelEntry.node });
-					else if (panelEntry?.type === "task") done({ type: "action", row: panelEntry.entry.task });
+					const entry = selectedEntry();
+					if (entry?.type === "binder") done({ type: "binder-action", binder: entry.node });
+					else if (entry?.type === "task") done({ type: "action", row: entry.entry.task });
 					return;
-				} else if (matchesKey(data, "enter")) {
-					const panelEntry = filtered[selectedIndex];
-					if (panelEntry?.type === "binder") done({ type: "navigate", binderId: panelEntry.node.binder.id });
-					else if (panelEntry?.type === "task") done({ type: "action", row: panelEntry.entry.task });
+				} else if (keybindings.matches?.(data, "tui.select.confirm") === true || matchesKey(data, "enter") || data === "l") {
+					openSelected();
 					return;
-				} else if (matchesKey(data, "escape")) {
+				} else if (
+					keybindings.matches?.(data, "tui.select.cancel") === true ||
+					matchesKey(data, "escape") ||
+					matchesKey(data, "ctrl+c") ||
+					data === "q"
+				) {
 					done(undefined);
 					return;
 				} else return;
 				tui.requestRender();
 			},
-		};
+		} satisfies Component & Focusable;
 	});
 }

package/extension/src/tool-rendering/render-model/semantic-text.ts

@@ -1,3 +1,4 @@
+import { stripVTControlCharacters } from "node:util";
 import { TOOL_DETAILS_BODY_MAX_CHARACTERS } from "@danypops/papyrus";
 import { boundedText, PAPYRUS_TOOL_DETAILS_SCHEMA, type ResultCompleteness, type ToolDetailsBase } from "./shared.ts";
 
@@ -8,8 +9,15 @@ export interface SemanticTextToolDetails extends ToolDetailsBase {
 	completeness: ResultCompleteness;
 }
 
+/** Preserves diagnostic text while removing terminal commands and normalizing line breaks and tabs. */
+export function plainTerminalText(text: string): string {
+	return stripVTControlCharacters(text)
+		.replace(/\r\n?/g, "\n")
+		.replace(/\p{Cc}/gu, (character) => (character === "\n" ? "\n" : character === "\t" ? "    " : ""));
+}
+
 export function createSemanticTextDetails(operation: string, text: string): SemanticTextToolDetails {
-	const bounded = boundedText(text, TOOL_DETAILS_BODY_MAX_CHARACTERS);
+	const bounded = boundedText(plainTerminalText(text), TOOL_DETAILS_BODY_MAX_CHARACTERS);
 	return {
 		schemaVersion: PAPYRUS_TOOL_DETAILS_SCHEMA,
 		kind: "semantic-text",

package/extension/src/tool-rendering/semantic-text.ts

@@ -0,0 +1,38 @@
+import { TOOL_COLLAPSED_ROW_LIMIT } from "@danypops/papyrus";
+import { expandHint } from "@danypops/vehicle-client-pi/expand-hint";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, Text, truncateToWidth } from "@earendil-works/pi-tui";
+import { createSemanticTextDetails, type SemanticTextToolDetails } from "./render-model/semantic-text.ts";
+
+const MAX_EXPANDED_TEXT_ROWS = 200;
+
+/** Renders diagnostic text with host-owned styles and bounded collapsed or expanded rows. */
+export class SemanticTextCard implements Component {
+	private readonly details: SemanticTextToolDetails;
+
+	constructor(
+		details: SemanticTextToolDetails,
+		private readonly theme: Theme,
+		private readonly expanded: boolean,
+	) {
+		const normalized = createSemanticTextDetails(details.operation, details.text);
+		this.details = { ...normalized, completeness: details.completeness.truncated ? details.completeness : normalized.completeness };
+	}
+
+	render(width: number): string[] {
+		if (width < 1) return [];
+		const lines = new Text(this.details.text, 0, 0).render(width);
+		const limit = this.expanded ? MAX_EXPANDED_TEXT_ROWS : TOOL_COLLAPSED_ROW_LIMIT;
+		const visible = lines.slice(0, limit).map((line) => truncateToWidth(this.theme.fg("toolOutput", line), width));
+		const omitted = lines.length - visible.length;
+		if (omitted > 0) {
+			const hint = this.expanded ? `${omitted} more lines omitted · display limit` : `${omitted} more lines · ${expandHint()}`;
+			visible.push(truncateToWidth(this.theme.fg("dim", hint), width));
+		} else if (this.details.completeness.truncated) {
+			visible.push(truncateToWidth(this.theme.fg("dim", "Output truncated"), width));
+		}
+		return visible;
+	}
+
+	invalidate(): void {}
+}

package/extension/src/tools/renderers/batch.ts

@@ -0,0 +1,20 @@
+import { BATCH_MAX_ITEMS } from "@danypops/papyrus";
+
+/** Summarizes validated batch outcomes without copying nested results or error payloads. */
+export function batchOutcomeSummary(output: unknown): string | undefined {
+	if (typeof output !== "object" || output === null || !("results" in output)) return undefined;
+	const results = output.results;
+	if (!Array.isArray(results) || results.length === 0 || results.length > BATCH_MAX_ITEMS) return undefined;
+	const statuses: boolean[] = [];
+	for (const item of results) {
+		if (typeof item !== "object" || item === null) return undefined;
+		if (item.ok === true && "result" in item) statuses.push(true);
+		else if (item.ok === false && typeof item.error === "string") statuses.push(false);
+		else return undefined;
+	}
+	const succeeded = statuses.filter(Boolean).length;
+	return [
+		`Batch: ${succeeded} succeeded, ${statuses.length - succeeded} failed`,
+		...statuses.map((ok, index) => `${index + 1}: ${ok ? "succeeded" : "failed"}`),
+	].join("\n");
+}

package/extension/src/tools/renderers/index.ts

@@ -40,7 +40,9 @@ import {
 	type PapyrusToolDetails,
 	parsePapyrusToolDetails,
 } from "../../tool-rendering/render-model.ts";
+import { SemanticTextCard } from "../../tool-rendering/semantic-text.ts";
 import { recordRenderDiagnostic, shapeFingerprint } from "../render-diagnostics.ts";
+import { batchOutcomeSummary } from "./batch.ts";
 import {
 	isDiscussionAndRounds,
 	isDiscussionListOutput,
@@ -133,6 +135,9 @@ export function papyrusVehicleRenderers(descriptor: VehicleOperationDescriptor):
 				if (isTaskCompletion(output)) {
 					return renderTaskCompletion(output, theme, options.expanded);
 				}
+				if (isSemanticTextOutput(output)) {
+					return new SemanticTextCard(createSemanticTextDetails(descriptor.name, semanticText(output)), theme, options.expanded);
+				}
 				recordRenderDiagnostic({ event: "render-result-fell-through-to-generic", operation: descriptor.name });
 			}
 			return renderVehicleResult(descriptor, result, options, theme, context);
@@ -150,6 +155,11 @@ export function papyrusVehicleRenderers(descriptor: VehicleOperationDescriptor):
  * instead of silently persisting and rendering raw JSON.
  */
 function projectPapyrusPresentation(descriptor: VehicleOperationDescriptor, output: unknown): PapyrusToolDetails {
+	if (descriptor.name === "batch.execute") {
+		const summary = batchOutcomeSummary(output);
+		if (summary !== undefined) return createSemanticTextDetails(descriptor.name, summary);
+		throw new Error(`${descriptor.name} produced no legal presentation variant`);
+	}
 	if (isArtifactArray(output)) return createArtifactListDetails(descriptor.name, output);
 	if (isArtifact(output)) return createArtifactDetails(descriptor.name, output);
 	if (isTaskFocus(output)) return createArtifactDetails(descriptor.name, output.artifact, focusAnnotation(output));
@@ -211,7 +221,7 @@ function renderFromPapyrusPresentation(
 		case "preview":
 			return new Text(theme.fg("toolOutput", presentation.content), 0, 0);
 		case "semantic-text":
-			return new Text(theme.fg("toolOutput", presentation.text), 0, 0);
+			return new SemanticTextCard(presentation, theme, expanded);
 		case "transition":
 		case "graph":
 		case "gate-run":

package/extension/src/tools/vehicle-notes-client.ts

@@ -58,6 +58,10 @@ export const PAPYRUS_VEHICLE_PERMISSIONS = [
 	"artifact:write",
 	"binders:read",
 	"binders:write",
+	"projects:read",
+	"projects:write",
+	"scope_groups:read",
+	"scope_groups:write",
 ] as const;
 
 /** Task Focus's own internal write needs a real, per-session secret -- see below. Every other tasks.* operation reads session_id purely for read-scoping and needs no secret. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danypops/pi-papyrus",
-  "version": "0.59.6",
+  "version": "0.60.1",
   "description": "Pi host extension for Papyrus: native tools, TUI panels, and context injection over the daemon-backed graph store",
   "license": "MIT",
   "type": "module",