pi-btw 0.4.0 → 0.4.1

package/extensions/btw.ts

@@ -1001,6 +1001,9 @@ function notify(ctx: ExtensionContext | ExtensionCommandContext, message: string
   }
 }
 
+/** Fixed overlay rows outside the transcript viewport (must match render() structure). */
+const BTW_OVERLAY_CHROME_LINES = 9;
+
 function getOverlayTitle(mode: BtwThreadMode): string {
   return mode === "tangent" ? "BTW tangent" : "BTW";
 }
@@ -1085,6 +1088,9 @@ class BtwOverlayComponent extends Container implements Focusable {
 
     this.hintsText = new Text("", 1, 0);
 
+    // Enable SGR mouse reporting so wheel/touchpad events reach handleInput().
+    this.tui.terminal?.write?.("\x1b[?1000h\x1b[?1006h");
+
     const originalHandleInput = this.input.handleInput.bind(this.input);
     this.input.handleInput = (data: string) => {
       if (keybindings.matches(data, "app.clear")) {
@@ -1111,17 +1117,17 @@ class BtwOverlayComponent extends Container implements Focusable {
   private frameLine(content: string, innerWidth: number): string {
     const truncated = truncateToWidth(content, innerWidth, "");
     const padding = Math.max(0, innerWidth - visibleWidth(truncated));
-    return `${this.theme.fg("borderMuted", "│")}${truncated}${" ".repeat(padding)}${this.theme.fg("borderMuted", "│")}`;
+    return `${this.theme.fg("border", "│")}${truncated}${" ".repeat(padding)}${this.theme.fg("border", "│")}`;
   }
 
   private ruleLine(innerWidth: number): string {
-    return this.theme.fg("borderMuted", `├${"─".repeat(innerWidth)}┤`);
+    return this.theme.fg("border", `├${"─".repeat(innerWidth)}┤`);
   }
 
   private borderLine(innerWidth: number, edge: "top" | "bottom"): string {
     const left = edge === "top" ? "┌" : "└";
     const right = edge === "top" ? "┐" : "┘";
-    return this.theme.fg("borderMuted", `${left}${"─".repeat(innerWidth)}${right}`);
+    return this.theme.fg("border", `${left}${"─".repeat(innerWidth)}${right}`);
   }
 
   private wrapTranscript(innerWidth: number): string[] {
@@ -1141,22 +1147,53 @@ class BtwOverlayComponent extends Container implements Focusable {
     return Math.max(18, Math.min(32, Math.floor(terminalRows * 0.78)));
   }
 
+  private scrollTranscript(delta: number): void {
+    if (delta < 0) {
+      this.followTranscript = false;
+    }
+    this.transcriptScrollOffset = Math.max(0, this.transcriptScrollOffset + delta);
+    this.tui.requestRender();
+  }
+
+  dispose(): void {
+    this.tui.terminal?.write?.("\x1b[?1000l\x1b[?1006l");
+  }
+
+  private getMouseScrollDelta(data: string): number | null {
+    const match = data.match(/^\x1b\[<(\d+);\d+;\d+[Mm]$/);
+    if (!match) {
+      return null;
+    }
+
+    const button = Number(match[1]);
+    if ((button & 64) !== 64) {
+      return null;
+    }
+
+    return (button & 1) === 0 ? -3 : 3;
+  }
+
   handleInput(data: string): void {
     if (matchesBtwFocusShortcut(data)) {
       this.onUnfocusCallback();
       return;
     }
 
-    if (matchesKey(data, Key.pageUp)) {
-      this.followTranscript = false;
-      this.transcriptScrollOffset = Math.max(0, this.transcriptScrollOffset - Math.max(1, this.transcriptViewportHeight - 1));
-      this.tui.requestRender();
+    const mouseScrollDelta = this.getMouseScrollDelta(data);
+    if (mouseScrollDelta !== null) {
+      this.scrollTranscript(mouseScrollDelta);
+      return;
+    }
+
+    if (matchesKey(data, Key.pageUp) || matchesKey(data, Key.up)) {
+      const step = matchesKey(data, Key.pageUp) ? Math.max(1, this.transcriptViewportHeight - 1) : 1;
+      this.scrollTranscript(-step);
       return;
     }
 
-    if (matchesKey(data, Key.pageDown)) {
-      this.transcriptScrollOffset += Math.max(1, this.transcriptViewportHeight - 1);
-      this.tui.requestRender();
+    if (matchesKey(data, Key.pageDown) || matchesKey(data, Key.down)) {
+      const step = matchesKey(data, Key.pageDown) ? Math.max(1, this.transcriptViewportHeight - 1) : 1;
+      this.scrollTranscript(step);
       return;
     }
 
@@ -1172,19 +1209,25 @@ class BtwOverlayComponent extends Container implements Focusable {
     // the row stays geometrically stable while the overlay still owns keyboard input.
     this.input.focused = false;
     try {
-      const inputLine = this.input.render(targetWidth)[0] ?? "";
-      return `${this.theme.fg("borderMuted", "│")}${inputLine}${this.theme.fg("borderMuted", "│")}`;
+      const renderedInputLine = this.input.render(targetWidth)[0] ?? "";
+      const inputLine = truncateToWidth(renderedInputLine, targetWidth, "");
+      const padding = Math.max(0, targetWidth - visibleWidth(inputLine));
+      return `${this.theme.fg("border", "│")}${inputLine}${" ".repeat(padding)}${this.theme.fg("border", "│")}`;
     } finally {
       this.input.focused = previousFocused;
     }
   }
 
+  private fitRenderedLine(line: string, width: number): string {
+    return visibleWidth(line) > width ? truncateToWidth(line, width, "") : line;
+  }
+
   override render(width: number): string[] {
     const dialogWidth = Math.max(24, width);
     const innerWidth = Math.max(22, dialogWidth - 2);
     const transcriptLines = this.wrapTranscript(innerWidth);
     const dialogHeight = this.getDialogHeight();
-    const chromeHeight = 8;
+    const chromeHeight = BTW_OVERLAY_CHROME_LINES;
     const transcriptHeight = Math.max(6, dialogHeight - chromeHeight);
     this.transcriptViewportHeight = transcriptHeight;
 
@@ -1229,7 +1272,7 @@ class BtwOverlayComponent extends Container implements Focusable {
     lines.push(this.frameLine(this.theme.fg("dim", this.hintsTextValue.trim()), innerWidth));
     lines.push(this.borderLine(innerWidth, "bottom"));
 
-    return lines;
+    return lines.map((line) => this.fitRenderedLine(line, width));
   }
 
   setDraft(value: string): void {
@@ -1263,7 +1306,7 @@ class BtwOverlayComponent extends Container implements Focusable {
     const status = this.getStatus() ?? "Ready. Enter submits; Escape dismisses without clearing.";
     this.statusTextValue = status;
     this.statusText.setText(this.statusTextValue);
-    this.hintsTextValue = "Enter submit · Alt+/ toggle focus · Escape dismiss · PgUp/PgDn scroll";
+    this.hintsTextValue = "Scroll wheel ↑↓ PgUp/PgDn · Enter · Alt+/ focus · Esc";
     this.hintsText.setText(this.hintsTextValue);
     this.tui.requestRender();
   }
@@ -1655,6 +1698,7 @@ export default function (pi: ExtensionAPI) {
           };
           runtime.close = () => {
             overlayDraft = overlay.getDraft();
+            overlay.dispose();
             closeRuntime();
           };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-btw",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A pi extension for parallel side conversations with /btw",
   "type": "module",
   "license": "MIT",
@@ -42,9 +42,9 @@
     "image": "https://raw.githubusercontent.com/dbachelder/pi-btw/main/docs/btw-overlay.png"
   },
   "peerDependencies": {
-    "@earendil-works/pi-ai": "^0.74.0",
-    "@earendil-works/pi-coding-agent": "^0.74.0",
-    "@earendil-works/pi-tui": "^0.74.0"
+    "@earendil-works/pi-ai": ">=0.74.0 <1",
+    "@earendil-works/pi-coding-agent": ">=0.74.0 <1",
+    "@earendil-works/pi-tui": ">=0.74.0 <1"
   },
   "devDependencies": {
     "typescript": "^6.0.2",