pi-agent-extensions 0.4.0 → 0.4.2

package/extensions/btw/index.ts

@@ -29,10 +29,8 @@ import {
 } from "@mariozechner/pi-coding-agent";
 import {
   type Component,
-  Container,
   Key,
   matchesKey,
-  Text,
   wrapTextWithAnsi,
   visibleWidth,
   type TUI,
@@ -48,8 +46,8 @@ import {
 
 
 /**
- * Overlay component that displays the BTW answer.
- * Supports scrolling for long answers.
+ * Overlay component that displays the BTW question and answer.
+ * The full page scrolls together so large input and output remain usable.
  */
 class BtwOverlay implements Component {
   private tui: TUI;
@@ -60,6 +58,7 @@ class BtwOverlay implements Component {
   private scrollOffset = 0;
   private cachedWidth?: number;
   private cachedLines?: string[];
+  private maxScrollOffset = 0;
 
   constructor(
     tui: TUI,
@@ -76,7 +75,6 @@ class BtwOverlay implements Component {
   }
 
   handleInput(data: string): void {
-    // Dismiss overlay
     if (
       matchesKey(data, Key.escape) ||
       matchesKey(data, Key.ctrl("c")) ||
@@ -87,7 +85,8 @@ class BtwOverlay implements Component {
       return;
     }
 
-    // Scroll
+    const pageStep = Math.max(4, (this.tui.height ?? 24) - 8);
+
     if (matchesKey(data, Key.up) || data === "k") {
       if (this.scrollOffset > 0) {
         this.scrollOffset--;
@@ -97,21 +96,21 @@ class BtwOverlay implements Component {
       return;
     }
     if (matchesKey(data, Key.down) || data === "j") {
-      this.scrollOffset++;
-      this.invalidate();
-      this.tui.requestRender();
+      if (this.scrollOffset < this.maxScrollOffset) {
+        this.scrollOffset++;
+        this.invalidate();
+        this.tui.requestRender();
+      }
       return;
     }
-
-    // Page up/down
     if (matchesKey(data, Key.pageUp)) {
-      this.scrollOffset = Math.max(0, this.scrollOffset - 10);
+      this.scrollOffset = Math.max(0, this.scrollOffset - pageStep);
       this.invalidate();
       this.tui.requestRender();
       return;
     }
     if (matchesKey(data, Key.pageDown)) {
-      this.scrollOffset += 10;
+      this.scrollOffset = Math.min(this.maxScrollOffset, this.scrollOffset + pageStep);
       this.invalidate();
       this.tui.requestRender();
       return;
@@ -129,13 +128,24 @@ class BtwOverlay implements Component {
     }
 
     const theme = this.theme;
-    const boxWidth = Math.min(width - 2, 120);
-    const contentWidth = boxWidth - 6; // padding on each side
+    const boxWidth = Math.min(width - 2, 144);
+    const contentWidth = Math.max(24, boxWidth - 8);
 
     const horizontalLine = (count: number) => "─".repeat(count);
+    const meter = (value: number, total: number, size: number) => {
+      if (total <= 0) return "░".repeat(size);
+      const filled = Math.max(1, Math.min(size, Math.round((value / total) * size)));
+      return "█".repeat(filled) + "░".repeat(Math.max(0, size - filled));
+    };
+
+    const fitInline = (text: string, targetWidth: number): string => {
+      if (targetWidth <= 0) return "";
+      const wrapped = wrapTextWithAnsi(text, targetWidth);
+      return wrapped[0] ?? "";
+    };
 
     const boxLine = (content: string, leftPad: number = 2): string => {
-      const paddedContent = " ".repeat(leftPad) + content;
+      const paddedContent = " ".repeat(leftPad) + fitInline(content, Math.max(0, boxWidth - leftPad - 3));
       const contentLen = visibleWidth(paddedContent);
       const rightPad = Math.max(0, boxWidth - contentLen - 2);
       return theme.fg("border", "│") + paddedContent + " ".repeat(rightPad) + theme.fg("border", "│");
@@ -150,73 +160,69 @@ class BtwOverlay implements Component {
       return line + " ".repeat(Math.max(0, width - len));
     };
 
-    const lines: string[] = [];
-
-    // Top border
-    lines.push(padToWidth(theme.fg("accent", "╭" + horizontalLine(boxWidth - 2) + "╮")));
-
-    // Title
-    const title = theme.fg("accent", theme.bold("btw"));
-    lines.push(padToWidth(boxLine(title)));
-
-    // Separator
-    lines.push(padToWidth(theme.fg("accent", "├" + horizontalLine(boxWidth - 2) + "┤")));
-
-    // Question
-    const questionLabel = theme.fg("muted", "Q: ") + theme.fg("text", this.question);
-    const wrappedQuestion = wrapTextWithAnsi(questionLabel, contentWidth);
-    for (const line of wrappedQuestion) {
-      lines.push(padToWidth(boxLine(line)));
-    }
+    const sectionTitle = (label: string, meta: string) => {
+      const text = `${theme.fg("accent", theme.bold(label))}${theme.fg("muted", ` · ${meta}`)}`;
+      return boxLine(text, 2);
+    };
 
-    lines.push(padToWidth(emptyBoxLine()));
+    const pushWrappedSection = (
+      bodyLines: string[],
+      label: string,
+      meta: string,
+      text: string,
+      prefix: string,
+    ) => {
+      bodyLines.push(sectionTitle(label, meta));
+      bodyLines.push(emptyBoxLine());
+      for (const paragraph of text.split("\n")) {
+        if (paragraph.trim() === "") {
+          bodyLines.push(boxLine("", 2));
+          continue;
+        }
+        const wrapped = wrapTextWithAnsi(paragraph, Math.max(12, contentWidth - visibleWidth(prefix)));
+        for (const line of wrapped) {
+          bodyLines.push(boxLine(`${prefix}${line}`, 2));
+        }
+      }
+    };
 
-    // Separator between question and answer
-    lines.push(padToWidth(theme.fg("border", "├" + horizontalLine(boxWidth - 2) + "┤")));
-    lines.push(padToWidth(emptyBoxLine()));
+    const questionWords = this.question.trim().split(/\s+/).filter(Boolean).length;
+    const answerParagraphs = this.answer.split("\n").filter((line) => line.trim() !== "").length;
 
-    // Answer — wrap and apply scroll
-    const answerLines: string[] = [];
-    for (const paragraph of this.answer.split("\n")) {
-      if (paragraph.trim() === "") {
-        answerLines.push("");
-      } else {
-        const wrapped = wrapTextWithAnsi(paragraph, contentWidth);
-        answerLines.push(...wrapped);
-      }
-    }
+    const bodyLines: string[] = [];
+    pushWrappedSection(bodyLines, "Question", `${questionWords} words`, this.question, theme.fg("muted", "› "));
+    bodyLines.push(emptyBoxLine());
+    bodyLines.push(boxLine(theme.fg("border", horizontalLine(Math.max(10, contentWidth - 6))), 3));
+    bodyLines.push(emptyBoxLine());
+    pushWrappedSection(bodyLines, "Answer", `${answerParagraphs} paragraphs`, this.answer, "");
 
-    // Clamp scroll offset
     const termHeight = this.tui.height ?? 24;
-    const headerLines = lines.length;
-    const footerLines = 3; // separator + hint + bottom border
-    const maxVisibleAnswerLines = Math.max(1, termHeight - headerLines - footerLines - 2);
-
-    if (this.scrollOffset > Math.max(0, answerLines.length - maxVisibleAnswerLines)) {
-      this.scrollOffset = Math.max(0, answerLines.length - maxVisibleAnswerLines);
+    const fixedLines = 7;
+    const maxVisibleBodyLines = Math.max(4, termHeight - fixedLines);
+    this.maxScrollOffset = Math.max(0, bodyLines.length - maxVisibleBodyLines);
+    if (this.scrollOffset > this.maxScrollOffset) {
+      this.scrollOffset = this.maxScrollOffset;
     }
 
-    const visibleAnswerLines = answerLines.slice(
+    const visibleBodyLines = bodyLines.slice(
       this.scrollOffset,
-      this.scrollOffset + maxVisibleAnswerLines,
+      this.scrollOffset + maxVisibleBodyLines,
     );
 
-    for (const line of visibleAnswerLines) {
-      lines.push(padToWidth(boxLine(line)));
-    }
-
-    // Scroll indicator
-    if (answerLines.length > maxVisibleAnswerLines) {
-      const scrollInfo = theme.fg("dim", `[${this.scrollOffset + 1}-${Math.min(this.scrollOffset + maxVisibleAnswerLines, answerLines.length)}/${answerLines.length}]`);
-      lines.push(padToWidth(boxLine(scrollInfo)));
-    }
-
-    lines.push(padToWidth(emptyBoxLine()));
+    const scrollCurrent = Math.min(bodyLines.length, this.scrollOffset + maxVisibleBodyLines);
+    const scrollInfo = this.maxScrollOffset > 0
+      ? `${this.scrollOffset + 1}-${scrollCurrent}/${bodyLines.length}`
+      : "full";
+    const progress = meter(scrollCurrent, Math.max(bodyLines.length, 1), 10);
 
-    // Footer
+    const lines: string[] = [];
+    lines.push(padToWidth(theme.fg("accent", "╭" + horizontalLine(boxWidth - 2) + "╮")));
+    lines.push(padToWidth(boxLine(`${theme.fg("accent", theme.bold("BTW"))}${theme.fg("muted", " · side question")}`, 2)));
+    lines.push(padToWidth(boxLine(theme.fg("dim", "An editorial-style reading pane for long prompts and answers."), 2)));
     lines.push(padToWidth(theme.fg("accent", "├" + horizontalLine(boxWidth - 2) + "┤")));
-    const hint = theme.fg("dim", "Esc/Space/q to dismiss · ↑↓/j/k scroll · PgUp/PgDn");
-    lines.push(padToWidth(boxLine(hint)));
+    lines.push(...visibleBodyLines.map(padToWidth));
+    lines.push(padToWidth(theme.fg("accent", "├" + horizontalLine(boxWidth - 2) + "┤")));
+    lines.push(padToWidth(boxLine(`${theme.fg("accent", progress)} ${theme.fg("muted", scrollInfo)}${theme.fg("dim", "  ·  Esc dismiss  ·  ↑↓ / j k  ·  PgUp PgDn")}`, 2)));
     lines.push(padToWidth(theme.fg("accent", "╰" + horizontalLine(boxWidth - 2) + "╯")));
 
     this.cachedWidth = width;
@@ -348,6 +354,14 @@ async function runBtwCommand(
   // Step 2: Show the answer in an overlay
   await ctx.ui.custom<void>((tui, theme, _kb, done) => {
     return new BtwOverlay(tui, theme, question, answerResult, done);
+  }, {
+    overlay: true,
+    overlayOptions: {
+      anchor: "center",
+      width: "92%",
+      maxHeight: "92%",
+      margin: { top: 1, bottom: 1, left: 1, right: 1 },
+    },
   });
 
   // Nothing persisted — fully ephemeral

package/extensions/powerline-footer/index.ts

@@ -1,5 +1,5 @@
-import type { ExtensionAPI, ExtensionContext, ContextUsage, ReadonlyFooterDataProvider } from "@mariozechner/pi-coding-agent";
-import { type Component, type Theme, type TUI, visibleWidth } from "@mariozechner/pi-tui";
+import type { ExtensionAPI, ExtensionContext, ReadonlyFooterDataProvider } from "@mariozechner/pi-coding-agent";
+import { type Component, type Theme, type TUI, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import * as child_process from "child_process";
 
 class PowerlineFooter implements Component {
@@ -9,6 +9,14 @@ class PowerlineFooter implements Component {
 	private ctx: ExtensionContext;
 	private interval?: ReturnType<typeof setInterval>;
 	private sessionStartTime: number;
+	private disposed = false;
+	private cwd: string;
+	private lastRenderedLine = "";
+	private lastShortDir: string;
+	private lastModelShort = "unknown";
+	private lastContextInfo = "";
+	private lastCostInfo = "";
+	private lastSessionName = "";
 
 	// Cached git state (updated async every 10s)
 	private gitStatusExtras: string = "";
@@ -19,33 +27,40 @@ class PowerlineFooter implements Component {
 		this.footerData = footerData;
 		this.ctx = ctx;
 		this.sessionStartTime = Date.now();
+		this.cwd = ctx.cwd;
+		this.lastShortDir = this.formatShortDir(this.cwd);
 
 		this.fetchAsyncData();
 
 		this.interval = setInterval(() => {
+			if (this.disposed) return;
 			this.fetchAsyncData();
 			this.tui.requestRender();
 		}, 10000);
 	}
 
 	dispose() {
+		this.disposed = true;
 		if (this.interval) {
 			clearInterval(this.interval);
+			this.interval = undefined;
 		}
 	}
 
 	private fetchAsyncData() {
-		const cwd = this.ctx.cwd;
+		if (this.disposed) return;
+		const cwd = this.cwd;
 		const branch = this.footerData.getGitBranch();
 
 		if (branch) {
 			child_process.exec("git --no-optional-locks status --porcelain", { encoding: "utf8", cwd }, (err, stdout) => {
-				if (err) return;
+				if (this.disposed || err) return;
 				const staged = (stdout.match(/^[AMDRC]/gm) || []).length;
 				const unstaged = (stdout.match(/^.[MD]/gm) || []).length;
 				const untracked = (stdout.match(/^\?\?/gm) || []).length;
 
 				child_process.exec("git --no-optional-locks rev-list --count --left-right @{u}...HEAD", { encoding: "utf8", cwd }, (err2, revListOut) => {
+					if (this.disposed) return;
 					let ahead = 0;
 					let behind = 0;
 					if (!err2 && revListOut && revListOut.includes("\t")) {
@@ -72,6 +87,93 @@ class PowerlineFooter implements Component {
 	invalidate() {}
 	handleInput(_data: string) {}
 
+	private formatShortDir(cwd: string): string {
+		const homeDir = process.env.HOME || process.env.USERPROFILE || "";
+		let shortDir = cwd;
+		if (homeDir && shortDir.startsWith(homeDir)) {
+			shortDir = "~" + shortDir.slice(homeDir.length);
+		}
+		const parts = shortDir.split("/");
+		if (parts.length > 4) {
+			shortDir = parts.slice(parts.length - 4).join("/");
+		}
+		return shortDir;
+	}
+
+	private getShortDir(): string {
+		try {
+			this.lastShortDir = this.formatShortDir(this.ctx.cwd);
+		} catch {}
+		return this.lastShortDir;
+	}
+
+	private getModelShort(): string {
+		try {
+			const model = this.ctx.model;
+			this.lastModelShort = model?.name || model?.id || "unknown";
+		} catch {}
+		return this.lastModelShort;
+	}
+
+	private getContextDetails(reset: string, green: string, yellow: string, red: string, peach: string, dim: string) {
+		try {
+			const model = this.ctx.model;
+			const contextUsage = this.ctx.getContextUsage();
+			let contextInfo = "";
+			let costInfo = "";
+
+			if (contextUsage) {
+				const used = contextUsage.tokens;
+				const total = contextUsage.contextWindow;
+				const pct = contextUsage.percent;
+				if (used !== null && pct !== null) {
+					const remaining = 100 - pct;
+
+					let ctxColor = green;
+					if (remaining < 20) {
+						ctxColor = red;
+					} else if (remaining < 50) {
+						ctxColor = yellow;
+					}
+
+					const pctDisplay = pct % 1 === 0 ? pct.toFixed(0) : pct.toFixed(1);
+					contextInfo = `${ctxColor}${this.formatTokens(used)}/${this.formatTokens(total)} (${pctDisplay}%)${reset}`;
+				} else {
+					contextInfo = `${green}?/${this.formatTokens(total)}${reset}`;
+				}
+			}
+
+			let totalCost = 0;
+			for (const entry of this.ctx.sessionManager.getEntries()) {
+				if (entry.type !== "message" || entry.message.role !== "assistant") continue;
+				totalCost += entry.message.usage?.cost?.total ?? 0;
+			}
+			const usingSubscription = model ? this.ctx.modelRegistry.isUsingOAuth(model) : false;
+			if (totalCost > 0 || usingSubscription) {
+				const formattedCost = `$${totalCost.toFixed(3)}${usingSubscription ? " (sub)" : ""}`;
+				costInfo = ` ${dim}|${reset} ${peach}${formattedCost}${reset}`;
+			}
+
+			this.lastContextInfo = contextInfo;
+			this.lastCostInfo = costInfo;
+		} catch {}
+
+		return { contextInfo: this.lastContextInfo, costInfo: this.lastCostInfo };
+	}
+
+	private getSessionName(): string {
+		try {
+			this.lastSessionName = this.ctx.sessionManager.getSessionName() ?? "";
+		} catch {}
+		return this.lastSessionName;
+	}
+
+	private fitToWidth(line: string, width: number): string {
+		if (width <= 0) return "";
+		if (visibleWidth(line) <= width) return line;
+		return truncateToWidth(line, width, "...");
+	}
+
 	private formatTokens(num: number): string {
 		if (num >= 1_000_000) {
 			return (num / 1_000_000).toFixed(1) + "M";
@@ -95,19 +197,11 @@ class PowerlineFooter implements Component {
 		const PEACH = "\x1b[38;5;216m";
 		const OVERLAY2 = "\x1b[38;5;103m";
 
-		// --- Directory ---
-		const cwd = this.ctx.cwd;
-		const homeDir = process.env.HOME || process.env.USERPROFILE || "";
-		let shortDir = cwd;
-		if (homeDir && shortDir.startsWith(homeDir)) {
-			shortDir = "~" + shortDir.slice(homeDir.length);
-		}
-		const parts = shortDir.split("/");
-		if (parts.length > 4) {
-			shortDir = parts.slice(parts.length - 4).join("/");
+		if (this.disposed) {
+			return [this.fitToWidth(this.lastRenderedLine || "", width)];
 		}
 
-		// --- Git ---
+		const shortDir = this.getShortDir();
 		let gitInfo = "";
 		const branch = this.footerData.getGitBranch();
 		if (branch) {
@@ -117,46 +211,9 @@ class PowerlineFooter implements Component {
 			}
 		}
 
-		// --- Model ---
-		const model = this.ctx.model;
-		const modelShort = model?.name || model?.id || "unknown";
-
-		// --- Context usage ---
-		const contextUsage = this.ctx.getContextUsage();
-		let contextInfo = "";
-		let costInfo = "";
-
-		if (contextUsage) {
-			const used = contextUsage.tokens;
-			const total = contextUsage.contextWindow;
-			const pct = contextUsage.percent;
-			const remaining = 100 - pct;
-
-			let ctxColor = GREEN;
-			if (remaining < 20) {
-				ctxColor = RED;
-			} else if (remaining < 50) {
-				ctxColor = YELLOW;
-			}
-
-			contextInfo = `${ctxColor}${this.formatTokens(used)}/${this.formatTokens(total)} (${pct}%)${RESET}`;
+		const modelShort = this.getModelShort();
+		const { contextInfo, costInfo } = this.getContextDetails(RESET, GREEN, YELLOW, RED, PEACH, DIM);
 
-			// Cost estimation from model pricing
-			if (model?.cost && contextUsage.usageTokens > 0) {
-				// Rough estimate: treat usageTokens as input, trailingTokens as recent output
-				const inputTokens = contextUsage.usageTokens;
-				const outputTokens = contextUsage.trailingTokens;
-				const cost =
-					(inputTokens * model.cost.input) / 1_000_000 +
-					(outputTokens * model.cost.output) / 1_000_000;
-
-				if (cost > 0.001) {
-					costInfo = ` ${DIM}|${RESET} ${PEACH}$${cost.toFixed(2)}${RESET}`;
-				}
-			}
-		}
-
-		// --- Session duration ---
 		let durationInfo = "";
 		const durationMs = Date.now() - this.sessionStartTime;
 		if (durationMs > 0) {
@@ -174,7 +231,6 @@ class PowerlineFooter implements Component {
 			durationInfo = ` ${DIM}|${RESET} ${OVERLAY2}${durFmt}${RESET}`;
 		}
 
-		// --- Python env ---
 		let envInfo = "";
 		if (process.env.CONDA_DEFAULT_ENV) {
 			envInfo = ` ${SKY}(${process.env.CONDA_DEFAULT_ENV})${RESET}`;
@@ -183,16 +239,31 @@ class PowerlineFooter implements Component {
 			envInfo = ` ${SKY}(${venvName})${RESET}`;
 		}
 
-		// --- Time ---
 		const date = new Date();
 		const currentTime = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
-
-		// --- Session name ---
-		const sessionName = this.ctx.sessionManager.getSessionName();
+		const sessionName = this.getSessionName();
 		const sessionInfo = sessionName ? `${MAUVE}[${sessionName}]${RESET} ` : "";
 
-		// --- Extension statuses ---
-		let statusInfo = "";
+		const left = `${sessionInfo}${BOLD}${BLUE} ${shortDir}${RESET}${gitInfo}`;
+		const right = `${OVERLAY2}${modelShort}${RESET} ${contextInfo}${costInfo}${durationInfo}${envInfo} ${DIM}${currentTime}${RESET}`;
+		const leftWidth = visibleWidth(left);
+		const rightWidth = visibleWidth(right);
+		const minPadding = 1;
+		let line = "";
+
+		if (leftWidth + minPadding + rightWidth <= width) {
+			line = left + " ".repeat(width - leftWidth - rightWidth) + right;
+		} else {
+			const availableForLeft = Math.max(0, width - rightWidth - minPadding);
+			if (availableForLeft > 0) {
+				const truncatedLeft = this.fitToWidth(left, availableForLeft);
+				const truncatedLeftWidth = visibleWidth(truncatedLeft);
+				line = truncatedLeft + " ".repeat(Math.max(minPadding, width - truncatedLeftWidth - rightWidth)) + right;
+			} else {
+				line = this.fitToWidth(right, width);
+			}
+		}
+
 		const statuses = this.footerData.getExtensionStatuses();
 		if (statuses.size > 0) {
 			const parts: string[] = [];
@@ -200,13 +271,13 @@ class PowerlineFooter implements Component {
 				if (text) parts.push(text);
 			}
 			if (parts.length > 0) {
-				statusInfo = ` ${DIM}|${RESET} ${parts.join(" ")}`;
+				line = this.fitToWidth(`${line} ${DIM}|${RESET} ${parts.join(" ")}`, width);
 			}
 		}
 
-		const line = `${sessionInfo}${BOLD}${BLUE} ${shortDir}${RESET}${gitInfo} ${DIM}|${RESET} ${OVERLAY2}${modelShort}${RESET} ${contextInfo}${costInfo}${durationInfo}${envInfo}${statusInfo} ${DIM}${currentTime}${RESET}`;
-
-		return [line];
+		const fittedLine = this.fitToWidth(line, width);
+		this.lastRenderedLine = fittedLine;
+		return [fittedLine];
 	}
 }
 

package/extensions/whimsical/index.ts

@@ -491,7 +491,7 @@ export default function whimsicalExtension(pi: ExtensionAPI) {
 
   pi.on("turn_start", async (_event, ctx) => {
     await ensureStateLoaded();
-    if (!state.enabled) return;
+    if (!state.enabled || !ctx.hasUI) return;
 
     stopActiveTicker();
 
@@ -517,6 +517,11 @@ export default function whimsicalExtension(pi: ExtensionAPI) {
     }, SPINNER_FRAME_INTERVAL_MS);
   });
 
+  pi.on("session_shutdown", async (_event, ctx) => {
+    stopActiveTicker();
+    if (ctx.hasUI) ctx.ui.setWorkingMessage();
+  });
+
   // Keep running until the next turn_start replaces cadence.
   pi.on("turn_end", async () => {
     // no-op by design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-agent-extensions",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Collection of extensions for pi coding agent",
   "type": "module",
   "repository": {