Merge pull request #77 from narumiruna/feat/pi-btw-scrollable-answer

feat(btw): add scrollable answer view

Author: narumiruna

extensions/pi-btw/README.md

@@ -9,7 +9,7 @@ Use it when you want to ask a temporary question, inspect context, or get a shor
 ## ✨ Features
 
 - Adds a `/btw <question>` command to Pi.
-- Answers side questions in a temporary UI.
+- Answers side questions in a temporary, scrollable UI.
 - Uses the current session branch as context.
 - Does not append the side question or answer to the main conversation.
 - Works as an independently installable npm Pi extension package.
@@ -46,6 +46,11 @@ Examples:
 /btw is this API name idiomatic?
 ```
 
+Long answers open in a pager-style view. Use `↑`/`↓` or `k`/`j` to scroll by line,
+`PgUp`/`PgDn`, `Shift+Space`/`Space`, or `Ctrl+B`/`Ctrl+F` to scroll by page,
+`Ctrl+U`/`Ctrl+D` to scroll by half page, and `Home`/`End` to jump. Close with
+`q`, `Esc`, `Enter`, or `Ctrl+C`.
+
 ## 🧠 Why use pi-btw?
 
 Normal assistant messages become part of the main Pi conversation and can distract the coding agent from the task. `pi-btw` creates a lightweight side channel for context-aware questions, making it useful for pair programming, debugging, code review, and repository exploration.

extensions/pi-btw/src/btw.ts

@@ -5,10 +5,22 @@ import {
 	getMarkdownTheme,
 	type ExtensionAPI,
 	type ExtensionCommandContext,
+	type Theme,
 } from "@mariozechner/pi-coding-agent";
-import { Container, Markdown, matchesKey, Text } from "@mariozechner/pi-tui";
+import {
+	Key,
+	Markdown,
+	matchesKey,
+	truncateToWidth,
+	visibleWidth,
+	type Component,
+	type TUI,
+} from "@mariozechner/pi-tui";
 
 const MAX_CONTEXT_CHARS = 40_000;
+const ANSWER_CHROME_LINES = 4;
+// Pi renders a spacer above the custom editor and a two-line built-in footer below it.
+const ANSWER_RESERVED_APP_LINES = 3;
 const SYSTEM_PROMPT = `You answer quick side questions for a coding-agent user.
 
 Use the provided conversation context only as background. Answer the user's side question directly and concisely. Do not claim to have changed files, run tools, or affected the main task. If the context is insufficient, say what is unknown and give the best next step.`;
@@ -120,29 +132,161 @@ async function askSideQuestion(
 }
 
 async function showAnswer(question: string, answer: string, ctx: ExtensionCommandContext) {
-	await ctx.ui.custom((_tui, theme, _keybindings, done) => {
-		const container = new Container();
-		const border = new DynamicBorder((text: string) => theme.fg("warning", text));
-		const markdownTheme = getMarkdownTheme();
-
-		container.addChild(border);
-		container.addChild(new Text(theme.fg("warning", theme.bold(`/btw ${question}`)), 1, 0));
-		container.addChild(new Markdown(answer, 1, 1, markdownTheme));
-		container.addChild(new Text(theme.fg("dim", "Press Enter, Space, or Esc to close"), 1, 1));
-		container.addChild(border);
-
-		return {
-			render: (width: number) => container.render(width),
-			invalidate: () => container.invalidate(),
-			handleInput: (data: string) => {
-				if (matchesKey(data, "enter") || matchesKey(data, "space") || matchesKey(data, "escape")) {
-					done(undefined);
-				}
-			},
-		};
+	await ctx.ui.custom((tui, theme, _keybindings, done) => {
+		return new BtwAnswerPager(tui, theme, question, answer, () => done(undefined));
 	});
 }
 
+class BtwAnswerPager implements Component {
+	private readonly tui: TUI;
+	private readonly theme: Theme;
+	private readonly title: string;
+	private readonly onClose: () => void;
+	private readonly topBorder: DynamicBorder;
+	private readonly bottomBorder: DynamicBorder;
+	private readonly markdown: Markdown;
+	private scrollOffset = 0;
+	private lastContentLineCount = 0;
+	private lastViewportHeight = 1;
+
+	constructor(tui: TUI, theme: Theme, question: string, answer: string, onClose: () => void) {
+		this.tui = tui;
+		this.theme = theme;
+		this.title = sanitizeSingleLine(`/btw ${question}`);
+		this.onClose = onClose;
+		const borderColor = (text: string) => this.theme.fg("warning", text);
+		this.topBorder = new DynamicBorder(borderColor);
+		this.bottomBorder = new DynamicBorder(borderColor);
+		this.markdown = new Markdown(answer, 1, 1, getMarkdownTheme());
+	}
+
+	render(width: number): string[] {
+		const viewportHeight = this.getViewportHeight();
+		const contentLines = this.markdown.render(width);
+		this.lastContentLineCount = contentLines.length;
+		this.lastViewportHeight = viewportHeight;
+		this.clampScrollOffset();
+
+		const visibleContent = contentLines.slice(
+			this.scrollOffset,
+			this.scrollOffset + viewportHeight,
+		);
+
+		return [
+			...this.topBorder.render(width),
+			this.renderTitle(width),
+			...visibleContent,
+			this.renderFooter(width),
+			...this.bottomBorder.render(width),
+		];
+	}
+
+	handleInput(data: string): void {
+		if (this.matchesCloseKey(data)) {
+			this.onClose();
+			return;
+		}
+
+		if (matchesKey(data, Key.up) || matchesKey(data, "k")) {
+			this.scrollBy(-1);
+		} else if (matchesKey(data, Key.down) || matchesKey(data, "j")) {
+			this.scrollBy(1);
+		} else if (
+			matchesKey(data, Key.pageUp) ||
+			matchesKey(data, Key.shift(Key.space)) ||
+			matchesKey(data, Key.ctrl("b"))
+		) {
+			this.scrollBy(-this.lastViewportHeight);
+		} else if (
+			matchesKey(data, Key.pageDown) ||
+			matchesKey(data, Key.space) ||
+			matchesKey(data, Key.ctrl("f"))
+		) {
+			this.scrollBy(this.lastViewportHeight);
+		} else if (matchesKey(data, Key.ctrl("u"))) {
+			this.scrollBy(-this.getHalfPageHeight());
+		} else if (matchesKey(data, Key.ctrl("d"))) {
+			this.scrollBy(this.getHalfPageHeight());
+		} else if (matchesKey(data, Key.home)) {
+			this.scrollOffset = 0;
+		} else if (matchesKey(data, Key.end)) {
+			this.scrollOffset = this.getMaxScrollOffset();
+		}
+	}
+
+	invalidate(): void {
+		this.topBorder.invalidate();
+		this.bottomBorder.invalidate();
+		this.markdown.invalidate();
+	}
+
+	private matchesCloseKey(data: string): boolean {
+		return (
+			matchesKey(data, "q") ||
+			matchesKey(data, Key.escape) ||
+			matchesKey(data, Key.enter) ||
+			matchesKey(data, Key.return) ||
+			matchesKey(data, Key.ctrl("c"))
+		);
+	}
+
+	private renderTitle(width: number): string {
+		return truncateToWidth(this.theme.fg("warning", this.theme.bold(this.title)), width);
+	}
+
+	private renderFooter(width: number): string {
+		const progress = this.formatProgress();
+		const hints = "↑↓/j/k scroll • PgUp/PgDn page • Home/End jump • q/Esc close";
+		const progressWidth = visibleWidth(progress);
+		const footer =
+			progressWidth + 3 >= width
+				? truncateToWidth(progress, width)
+				: `${truncateToWidth(hints, width - progressWidth - 3)} • ${progress}`;
+		return this.theme.fg("dim", footer);
+	}
+
+	private formatProgress(): string {
+		const total = this.lastContentLineCount;
+		if (total === 0) return "100% 0-0/0";
+
+		const maxScroll = this.getMaxScrollOffset();
+		const percent = maxScroll === 0 ? 100 : Math.round((this.scrollOffset / maxScroll) * 100);
+		const firstLine = this.scrollOffset + 1;
+		const lastLine = Math.min(total, this.scrollOffset + this.lastViewportHeight);
+
+		return `${percent}% ${firstLine}-${lastLine}/${total}`;
+	}
+
+	private scrollBy(delta: number): void {
+		this.scrollOffset += delta;
+		this.clampScrollOffset();
+	}
+
+	private clampScrollOffset(): void {
+		this.scrollOffset = Math.max(0, Math.min(this.scrollOffset, this.getMaxScrollOffset()));
+	}
+
+	private getMaxScrollOffset(): number {
+		return Math.max(0, this.lastContentLineCount - this.lastViewportHeight);
+	}
+
+	private getViewportHeight(): number {
+		return Math.max(1, this.tui.terminal.rows - ANSWER_CHROME_LINES - ANSWER_RESERVED_APP_LINES);
+	}
+
+	private getHalfPageHeight(): number {
+		return Math.max(1, Math.ceil(this.lastViewportHeight / 2));
+	}
+}
+
+function sanitizeSingleLine(text: string) {
+	return text
+		.replace(/[\r\n\t]/g, " ")
+		.replace(/[\u0000-\u001f\u007f-\u009f]/g, "")
+		.replace(/ +/g, " ")
+		.trim();
+}
+
 function buildUserPrompt(question: string, conversationContext: string) {
 	return [
 		"Answer this side question without modifying the main conversation.",
@@ -170,9 +314,10 @@ function buildConversationContext(entries: readonly SessionEntry[]) {
 		if (contentLines.length === 0) continue;
 
 		const label = role === "user" ? "User" : "Assistant";
-		const status = entry.message.stopReason && entry.message.stopReason !== "stop"
-			? ` (${entry.message.stopReason})`
-			: "";
+		const status =
+			entry.message.stopReason && entry.message.stopReason !== "stop"
+				? ` (${entry.message.stopReason})`
+				: "";
 		sections.push(`${label}${status}: ${contentLines.join("\n")}`);
 	}