@narumitw/pi-jupyter 0.1.0 → 0.1.4

package/README.md

@@ -11,6 +11,7 @@ The preview is a static text rendering of notebook cells and selected text outpu
 - Watches the selected notebook on disk and refreshes after external saves.
 - Displays markdown cells, code cells, execution counts, common text outputs/errors, and inline image outputs when the terminal supports images.
 - Non-capturing by default, so you can keep typing in Pi while the panel stays visible.
+- Mouse-resizable right-side panel: drag the preview's left border to change its width.
 - Focus mode for scrolling the preview.
 
 ## Install
@@ -18,30 +19,37 @@ The preview is a static text rendering of notebook cells and selected text outpu
 Install from npm globally:
 
 ```bash
-pi install npm:pi-jupyter
+pi install npm:@narumitw/pi-jupyter
 ```
 
 Or pin a version:
 
 ```bash
-pi install npm:pi-jupyter@0.1.0
+pi install npm:@narumitw/pi-jupyter@0.1.3
 ```
 
 Install for the current project only:
 
 ```bash
-pi install npm:pi-jupyter -l
+pi install npm:@narumitw/pi-jupyter -l
 ```
 
-Install from GitHub/tag:
+Install from GitHub/tag instead of npm:
 
 ```bash
-pi install git:github.com/narumiruna/pi-jupyter@v0.1.0
+pi install git:github.com/narumiruna/pi-jupyter@v0.1.3
+```
+
+If you previously installed the unscoped package, remove it before installing the scoped package:
+
+```bash
+pi remove npm:pi-jupyter
+pi install npm:@narumitw/pi-jupyter
 ```
 
 ## Local development install
 
-Use one source at a time. If `npm:pi-jupyter` is installed globally and this repo is also installed locally with `-l`, Pi will load both and report shortcut conflicts.
+Use one source at a time. If `npm:@narumitw/pi-jupyter` is installed globally and this repo is also installed locally with `-l`, Pi will load both and report shortcut conflicts.
 
 For temporary local testing, prefer:
 
@@ -55,13 +63,16 @@ For a persistent project-local install:
 pi install . -l
 ```
 
-If you also have the npm package installed globally, remove one of them before starting Pi:
+If you also have an npm package installed globally, remove one source before starting Pi:
 
 ```bash
 # Keep the npm package; remove the project-local package from this repo
 pi remove . -l
 
 # Or keep the local package; remove the global npm package
+pi remove npm:@narumitw/pi-jupyter
+
+# If you installed the older unscoped package, remove that too
 pi remove npm:pi-jupyter
 ```
 
@@ -74,12 +85,25 @@ just format
 pre-commit install
 ```
 
-Publish to npm. This runs `biome check .` first via the `justfile`, then `npm publish`:
+Publish to npm. This runs `biome check .` first via the `justfile`, then `npm publish --access public`:
 
 ```bash
+npm login
 just publish
 ```
 
+If npm requires two-factor authentication, pass the one-time password:
+
+```bash
+just publish 123456
+```
+
+After publishing succeeds, this install command will work:
+
+```bash
+pi install npm:@narumitw/pi-jupyter
+```
+
 Preview the npm package without publishing:
 
 ```bash
@@ -100,6 +124,7 @@ just publish-dry-run
 - `Shift+F8` — focus preview for scrolling.
 - `Ctrl+Alt+J` / `Ctrl+Alt+K` — scroll preview down/up without focusing it.
 - `Ctrl+Alt+D` / `Ctrl+Alt+U` — page down/up without focusing it.
+- Drag the preview panel's left border with the mouse to resize it.
 - In focused preview: `↑`, `↓`, `PgUp`, `PgDn`, `Home` or `j`, `k`, `u`, `d`, `g` scroll; `Esc` or `F8` returns focus to the editor.
 
 ## Notes
@@ -107,6 +132,7 @@ just publish-dry-run
 PNG outputs are rendered as truecolor ANSI thumbnails, so matplotlib-style `image/png` output is visible in Ghostty even inside the right-side overlay. Other image formats use `@mariozechner/pi-tui` terminal image support when available, otherwise they fall back to an image placeholder.
 
 The panel auto-hides on narrow terminals (`< 90` columns). Resize wider if it does not appear.
+Mouse resizing uses standard terminal mouse reporting; if your terminal reserves mouse drag for selection, use Shift-drag (or your terminal's selection modifier) to select text instead.
 
 If shortcuts conflict with Pi/editor keybindings, use the slash commands:
 

package/extensions/index.ts

@@ -3,11 +3,15 @@ import { readdir, readFile, stat } from "node:fs/promises";
 import { basename, relative, resolve } from "node:path";
 import { inflateSync } from "node:zlib";
 import type { ExtensionAPI, ExtensionCommandContext, ExtensionContext } from "@mariozechner/pi-coding-agent";
-import type { Component, OverlayHandle, TUI } from "@mariozechner/pi-tui";
+import type { Component, OverlayHandle, OverlayOptions, TUI } from "@mariozechner/pi-tui";
 import { Image, Key, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@mariozechner/pi-tui";
 
 const PANEL_ID = "jupyter-preview";
 const NOTEBOOK_EXT = ".ipynb";
+const DEFAULT_PANEL_WIDTH_PERCENT = 42;
+const MIN_PANEL_WIDTH = 42;
+const MIN_EDITOR_WIDTH = 24;
+const RIGHT_MARGIN = 1;
 
 type NotebookCell = {
 	cell_type?: string;
@@ -39,6 +43,8 @@ type PreviewState = {
 	lastMtime?: Date;
 	lastError?: string;
 	model?: Notebook;
+	panelWidth?: number;
+	resizing?: boolean;
 };
 
 export default function jupyterPreview(pi: ExtensionAPI) {
@@ -53,6 +59,7 @@ export default function jupyterPreview(pi: ExtensionAPI) {
 	let overlayHandle: OverlayHandle | undefined;
 	let closeOverlay: (() => void) | undefined;
 	let requestRender: (() => void) | undefined;
+	let removeMouseResize: (() => void) | undefined;
 
 	async function setNotebookPath(rawPath: string, ctx: ExtensionContext): Promise<void> {
 		const path = resolveNotebookPath(rawPath, ctx.cwd);
@@ -90,6 +97,16 @@ export default function jupyterPreview(pi: ExtensionAPI) {
 			return;
 		}
 
+		const overlayOptions: OverlayOptions = {
+			anchor: "right-center",
+			width: state.panelWidth ?? `${DEFAULT_PANEL_WIDTH_PERCENT}%`,
+			minWidth: MIN_PANEL_WIDTH,
+			maxHeight: "96%",
+			margin: { right: RIGHT_MARGIN },
+			nonCapturing: true,
+			visible: (termWidth) => termWidth >= 90,
+		};
+
 		void ctx.ui
 			.custom<void>(
 				(tui, theme, _keybindings, done) => {
@@ -99,36 +116,33 @@ export default function jupyterPreview(pi: ExtensionAPI) {
 						tui.requestRender();
 					});
 					requestRender = () => tui.requestRender();
+					removeMouseResize = installMouseResize(tui, state, overlayOptions, () => tui.requestRender());
 					closeOverlay = () => {
 						state.visible = false;
 						state.focused = false;
+						state.resizing = false;
 						done(undefined);
 					};
 					return panel;
 				},
 				{
 					overlay: true,
-					overlayOptions: {
-						anchor: "right-center",
-						width: "42%",
-						minWidth: 42,
-						maxHeight: "96%",
-						margin: { right: 1 },
-						nonCapturing: true,
-						visible: (termWidth) => termWidth >= 90,
-					},
+					overlayOptions,
 					onHandle: (handle) => {
 						overlayHandle = handle;
 					},
 				},
 			)
 			.finally(() => {
+				removeMouseResize?.();
+				removeMouseResize = undefined;
 				overlayHandle = undefined;
 				panel = undefined;
 				closeOverlay = undefined;
 				requestRender = undefined;
 				state.visible = false;
 				state.focused = false;
+				state.resizing = false;
 				ctx.ui.setStatus(PANEL_ID, undefined);
 			});
 
@@ -138,6 +152,7 @@ export default function jupyterPreview(pi: ExtensionAPI) {
 	function hidePanel(ctx?: ExtensionContext): void {
 		state.visible = false;
 		state.focused = false;
+		state.resizing = false;
 		ctx?.ui.setStatus(PANEL_ID, undefined);
 		closeOverlay?.();
 		overlayHandle?.hide();
@@ -310,6 +325,85 @@ export default function jupyterPreview(pi: ExtensionAPI) {
 	});
 }
 
+type MouseEvent = {
+	button: number;
+	x: number;
+	y: number;
+	released: boolean;
+};
+
+function installMouseResize(
+	tui: TUI,
+	state: PreviewState,
+	overlayOptions: OverlayOptions,
+	requestRender: () => void,
+): () => void {
+	const terminal = tui.terminal;
+	const enableMouse = "\x1b[?1000h\x1b[?1002h\x1b[?1006h";
+	const disableMouse = "\x1b[?1006l\x1b[?1002l\x1b[?1000l";
+	terminal.write(enableMouse);
+
+	const removeListener = tui.addInputListener((data) => {
+		const event = parseSgrMouseEvent(data);
+		if (!event) return undefined;
+
+		const isPrimaryButton = (event.button & 3) === 0;
+		const isMotion = (event.button & 32) !== 0;
+		const handleX = getPanelLeftBorderX(terminal.columns, state);
+
+		if (event.released) {
+			state.resizing = false;
+			requestRender();
+			return { consume: true };
+		}
+
+		if (!state.resizing && isPrimaryButton && Math.abs(event.x - handleX) <= 1) {
+			state.resizing = true;
+		}
+
+		if (state.resizing && isPrimaryButton && (isMotion || event.x !== handleX)) {
+			const nextWidth = clampPanelWidth(terminal.columns - RIGHT_MARGIN - (event.x - 1), terminal.columns);
+			state.panelWidth = nextWidth;
+			overlayOptions.width = nextWidth;
+			requestRender();
+		}
+
+		return { consume: true };
+	});
+
+	return () => {
+		state.resizing = false;
+		removeListener();
+		terminal.write(disableMouse);
+	};
+}
+
+function parseSgrMouseEvent(data: string): MouseEvent | undefined {
+	const prefix = `${String.fromCharCode(27)}[<`;
+	if (!data.startsWith(prefix)) return undefined;
+	const suffix = data.at(-1);
+	if (suffix !== "M" && suffix !== "m") return undefined;
+	const parts = data.slice(prefix.length, -1).split(";");
+	if (parts.length !== 3) return undefined;
+	const [button, x, y] = parts.map((part) => Number.parseInt(part, 10));
+	if (![button, x, y].every(Number.isFinite)) return undefined;
+	return { button, x, y, released: suffix === "m" };
+}
+
+function getPanelLeftBorderX(termWidth: number, state: PreviewState): number {
+	const width = clampPanelWidth(
+		state.panelWidth ?? Math.floor((termWidth * DEFAULT_PANEL_WIDTH_PERCENT) / 100),
+		termWidth,
+	);
+	const zeroBasedCol = termWidth - RIGHT_MARGIN - width;
+	return zeroBasedCol + 1;
+}
+
+function clampPanelWidth(width: number, termWidth: number): number {
+	const maxWidth = Math.max(MIN_PANEL_WIDTH, termWidth - RIGHT_MARGIN - MIN_EDITOR_WIDTH);
+	return Math.max(MIN_PANEL_WIDTH, Math.min(maxWidth, Math.round(width)));
+}
+
 class NotebookPreviewPanel implements Component {
 	constructor(
 		private tui: TUI,
@@ -350,7 +444,7 @@ class NotebookPreviewPanel implements Component {
 		const pathLabel = this.state.path
 			? relative(this.state.cwd, this.state.path) || basename(this.state.path)
 			: "no notebook";
-		const title = `${this.state.focused ? "● " : ""}Jupyter Preview`;
+		const title = `${this.state.resizing ? "↔ " : this.state.focused ? "● " : ""}Jupyter Preview`;
 		const lines: string[] = [border(`╭${"─".repeat(inner)}╮`), pad(` ${accent(title)} ${dim(pathLabel)}`)];
 		lines.push(border("├") + border("─".repeat(inner)) + border("┤"));
 
@@ -368,9 +462,11 @@ class NotebookPreviewPanel implements Component {
 		}
 
 		lines.push(border("├") + border("─".repeat(inner)) + border("┤"));
-		const footer = this.state.focused
-			? " ↑↓ PgUp/PgDn or j/k/u/d scroll • Esc/F8 return"
-			: " Ctrl+Alt+j/k scroll • Ctrl+Alt+d/u page • Shift+F8 focus";
+		const footer = this.state.resizing
+			? " Drag to resize width"
+			: this.state.focused
+				? " ↑↓ PgUp/PgDn or j/k/u/d scroll • Esc/F8 return"
+				: " Drag left border resize • Ctrl+Alt+j/k scroll • Shift+F8 focus";
 		lines.push(pad(dim(footer)));
 		lines.push(border(`╰${"─".repeat(inner)}╯`));
 		return lines;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@narumitw/pi-jupyter",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "description": "Pi extension: right-side Jupyter notebook preview while editing .ipynb files.",
   "type": "module",
   "keywords": [