osdy-pi 0.1.8 → 0.1.9

package/README.md

@@ -95,7 +95,7 @@ Osdy Pi includes a small command group:
 - `sound setup` opens the guided global sound-setup wizard for audio notifications.
 - `working-tree on|off|toggle|status` controls the persistent git working-tree summary widget.
 - `working-tree position top|bottom` moves the summary widget above or below the editor.
-- `diff` opens a wizard-style in-app diff viewer to inspect the current per-file diff without leaving Pi.
+- `diff` opens a floating centered diff window to inspect the current per-file diff without leaving Pi.
 - `osdy-theme` is the default OsdyTheme header with pink, cyan, and purple styling, plus the mascot glow on the right edge.
 - `classic` keeps the previous classic header shape with the shared mascot.
 - `/osdy-pi-osdy-theme` and `/osdy-pi-classic` are direct aliases.
@@ -125,15 +125,15 @@ Use these commands to control it:
 /osdy-pi diff
 ```
 
-The `/osdy-pi diff` viewer now behaves like a simple wizard and opens with a wider centered modal by default:
+The `/osdy-pi diff` viewer now opens in the most viable floating-window form for Osdy Pi: a centered floating dialog with a selector step and a patch step.
 
-1. select a changed file in a centered modal
-2. open its patch in a second centered view
+1. select a changed file in the floating window
+2. open its patch in the same centered floating window
 3. return with `esc` / `backspace` or close with `q`
 
 Controls:
 
-- selector: `↑` / `↓` or `j` / `k`, then `enter` or `→`
+- selector: type to filter, `↑` / `↓` or `j` / `k`, then `enter` or `→`
 - patch view: `PgUp` / `PgDn`
 - back: `esc` / `backspace` or `←`
 - close: `q`

package/extensions/osdy-pi/diff-panel.ts

@@ -12,7 +12,6 @@ import {
 	type TUI,
 } from "@earendil-works/pi-tui";
 import { truncateMiddle } from "./format.js";
-import { centerVisible } from "./utils.js";
 import type {
 	SimpleTheme,
 	WorkingTreeFileSummary,
@@ -153,6 +152,7 @@ class WorkingTreeDiffPanel implements Component {
 	private selectedIndex = 0;
 	private scrollOffset = 0;
 	private mode: "select" | "view" = "select";
+	private searchTerm = "";
 
 	constructor(
 		private readonly tui: TUI,
@@ -161,24 +161,46 @@ class WorkingTreeDiffPanel implements Component {
 		private readonly close: () => void,
 	) {}
 
+	private get filteredFiles(): DiffFileView[] {
+		const query = this.searchTerm.trim().toLowerCase();
+		if (!query) return this.files;
+		return this.files.filter((entry) =>
+			entry.file.path.toLowerCase().includes(query),
+		);
+	}
+
 	private get selected(): DiffFileView | undefined {
-		return this.files[this.selectedIndex];
+		return this.filteredFiles[this.selectedIndex];
+	}
+
+	private clampSelection(): void {
+		const files = this.filteredFiles;
+		this.selectedIndex = Math.max(
+			0,
+			Math.min(Math.max(0, files.length - 1), this.selectedIndex),
+		);
 	}
 
 	private moveSelection(delta: number): void {
-		if (this.files.length === 0) return;
+		const files = this.filteredFiles;
+		if (files.length === 0) return;
 		this.selectedIndex = Math.max(
 			0,
-			Math.min(this.files.length - 1, this.selectedIndex + delta),
+			Math.min(files.length - 1, this.selectedIndex + delta),
 		);
 		this.scrollOffset = 0;
 		this.tui.requestRender();
 	}
 
+	private updateSearch(next: string): void {
+		this.searchTerm = next;
+		this.selectedIndex = 0;
+		this.scrollOffset = 0;
+		this.tui.requestRender();
+	}
+
 	private renderModal(width: number, title: string, lines: string[]): string[] {
-		const modalWidth = Math.max(56, Math.min(width - 6, 112));
-		const modalLines = borderBox(this.theme, modalWidth, title, lines);
-		return ["", ...modalLines.map((line) => centerVisible(line, width)), ""];
+		return borderBox(this.theme, width, title, lines);
 	}
 
 	handleInput(data: string): void {
@@ -188,9 +210,19 @@ class WorkingTreeDiffPanel implements Component {
 		}
 		if (this.mode === "select") {
 			if (matchesKey(data, "escape")) {
+				if (this.searchTerm.length > 0) {
+					this.updateSearch("");
+					return;
+				}
 				this.close();
 				return;
 			}
+			if (matchesKey(data, "backspace")) {
+				if (this.searchTerm.length > 0) {
+					this.updateSearch(this.searchTerm.slice(0, -1));
+					return;
+				}
+			}
 			if (matchesKey(data, "up") || matchesKey(data, "k")) {
 				this.moveSelection(-1);
 				return;
@@ -205,9 +237,15 @@ class WorkingTreeDiffPanel implements Component {
 				matchesKey(data, "right") ||
 				matchesKey(data, "l")
 			) {
+				if (this.filteredFiles.length === 0) return;
 				this.mode = "view";
 				this.scrollOffset = 0;
 				this.tui.requestRender();
+				return;
+			}
+			if (data.length === 1 && data >= " " && data !== "\u007f") {
+				this.updateSearch(`${this.searchTerm}${data}`);
+				return;
 			}
 			return;
 		}
@@ -233,20 +271,25 @@ class WorkingTreeDiffPanel implements Component {
 	}
 
 	render(width: number): string[] {
+		this.clampSelection();
+		const filteredFiles = this.filteredFiles;
 		const selected = this.selected;
-		if (this.files.length === 0 || !selected) {
+		if (this.files.length === 0) {
 			return this.renderModal(width, "Osdy Pi Diff", [
 				this.theme.fg("muted", "q or esc to close"),
 				this.theme.fg("warning", "No tracked changes available."),
 			]);
 		}
 		if (this.mode === "select") {
-			const innerWidth = Math.max(20, Math.min(width - 10, 80));
+			const innerWidth = Math.max(20, width - 4);
 			const listStart = Math.max(
 				0,
-				Math.min(this.selectedIndex - 4, this.files.length - 10),
+				Math.min(
+					this.selectedIndex - 4,
+					Math.max(0, filteredFiles.length - 10),
+				),
 			);
-			const listEntries = this.files.slice(listStart, listStart + 10);
+			const listEntries = filteredFiles.slice(listStart, listStart + 10);
 			const listLines = listEntries.map((entry, index) => {
 				const fileIndex = listStart + index;
 				const isSelected = fileIndex === this.selectedIndex;
@@ -264,13 +307,22 @@ class WorkingTreeDiffPanel implements Component {
 			return this.renderModal(width, "Osdy Pi Diff · Select file", [
 				this.theme.fg(
 					"muted",
-					"↑↓ or j/k move · enter/right open · esc/q close",
+					"Type to filter · ↑↓ move · enter/right open · esc clear/close",
 				),
+				`${this.theme.fg("accent", "Search:")} ${this.theme.fg("toolOutput", this.searchTerm || "")}${this.searchTerm.length === 0 ? this.theme.fg("muted", "(all files)") : ""}`,
 				this.theme.fg(
 					"mdLink",
-					`Files ${this.selectedIndex + 1}/${this.files.length}`,
+					`Files ${filteredFiles.length === 0 ? 0 : this.selectedIndex + 1}/${filteredFiles.length} · total ${this.files.length}`,
 				),
-				...listLines,
+				...(listLines.length > 0
+					? listLines
+					: [this.theme.fg("warning", "No files match the current search.")]),
+			]);
+		}
+		if (!selected) {
+			return this.renderModal(width, "Osdy Pi Diff", [
+				this.theme.fg("muted", "esc to go back"),
+				this.theme.fg("warning", "No file selected."),
 			]);
 		}
 		const patchLines =
@@ -315,5 +367,15 @@ export async function showWorkingTreeDiffPanel(
 	await ctx.ui.custom<void>(
 		(tui, theme, _keybindings, done) =>
 			new WorkingTreeDiffPanel(tui, theme, files, () => done()),
+		{
+			overlay: true,
+			overlayOptions: {
+				anchor: "center",
+				width: 112,
+				minWidth: 56,
+				maxHeight: "88%",
+				margin: 1,
+			},
+		},
 	);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "osdy-pi",
-	"version": "0.1.8",
+	"version": "0.1.9",
 	"description": "Osdy Pi package: themes, header, and custom editor for Pi.",
 	"license": "MIT",
 	"type": "module",