pi-cc-extensions 0.8.21 → 0.8.22

package/extensions/claude-code-style.ts

@@ -29,12 +29,6 @@ import {
 	wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
-import {
-	bottomDialogBounds,
-	isDialogCloseClick,
-	renderDialogHeader,
-	renderDialogTopBorder,
-} from "./closable-dialog.ts";
 import { homedir } from "node:os";
 import { join } from "node:path";
 
@@ -1992,8 +1986,6 @@ async function showCcstylePanel(ctx: any, compactStyle: CompactStyleHooks): Prom
 		];
 
 		let activeSection = 0;
-		let lastWidth = 0;
-		let lastHeight = 0;
 		const settingsTheme = getSettingsListTheme();
 		const lists = sections.map(
 			(section) =>
@@ -2030,15 +2022,8 @@ async function showCcstylePanel(ctx: any, compactStyle: CompactStyleHooks): Prom
 				while (listBody.length > 0 && listBody[listBody.length - 1] === "") listBody.pop();
 
 				// Frame: top rule · tabs · mid rule · settings · mid rule · footer · bottom rule
-				const lines = [
-					renderDialogTopBorder(safeWidth, (text) => theme.fg("border", text)),
-					renderDialogHeader(
-						" CC Style",
-						safeWidth,
-						(text) => theme.fg("border", text),
-						(text) => theme.fg("toolTitle", text),
-						(text) => theme.fg("muted", text),
-					),
+				return [
+					rule,
 					renderSectionTabBar(theme, sections, activeSection, safeWidth),
 					rule,
 					...listBody,
@@ -2052,22 +2037,11 @@ async function showCcstylePanel(ctx: any, compactStyle: CompactStyleHooks): Prom
 					),
 					rule,
 				];
-				lastWidth = safeWidth;
-				lastHeight = lines.length;
-				return lines;
 			},
 			invalidate() {
 				for (const list of lists) list.invalidate();
 			},
 			handleInput(data: string) {
-				if (
-					!excludeSubmenuOpen &&
-					tui.terminal &&
-					isDialogCloseClick(data, bottomDialogBounds(tui.terminal, lastWidth, lastHeight))
-				) {
-					done();
-					return;
-				}
 				if (!excludeSubmenuOpen && isForwardTabKey(data)) {
 					switchSection(1);
 					tui.requestRender();
@@ -2118,15 +2092,22 @@ function toolCallArgument(args: any): { key: string; value: string } | undefined
 		: undefined;
 }
 
-function tailToWidth(text: string, width: number): string {
+export function middleTruncateToWidth(text: string, width: number): string {
 	if (visibleWidth(text) <= width) return text;
 	if (width <= 1) return "…";
-	let tail = "";
-	for (const char of Array.from(text).reverse()) {
-		if (visibleWidth(`…${char}${tail}`) > width) break;
-		tail = char + tail;
+	const chars = Array.from(text);
+	const leftWidth = Math.ceil((width - 1) / 2);
+	let left = "";
+	let right = "";
+	for (const char of chars) {
+		if (visibleWidth(left + char) > leftWidth) break;
+		left += char;
+	}
+	for (const char of chars.reverse()) {
+		if (visibleWidth(left + "…" + char + right) > width) break;
+		right = char + right;
 	}
-	return `…${tail}`;
+	return `${left}…${right}`;
 }
 
 export function shouldRenderRichDiff(
@@ -2170,11 +2151,7 @@ function createCcstyleTool(
 			return {
 				render(width: number) {
 					const argumentWidth = Math.max(1, width - visibleWidth(`${rawIcon} ${label}()`));
-					const shown = argument
-						? argument.key === "path"
-							? tailToWidth(argument.value, argumentWidth)
-							: truncateToWidth(argument.value, argumentWidth, "…")
-						: undefined;
+					const shown = argument ? middleTruncateToWidth(argument.value, argumentWidth) : undefined;
 					const call = shown === undefined ? label : `${label}(${shown})`;
 					// Leave one cell unused so the host shell never performs a second,
 					// unthemed truncation after this renderer has applied toolTitle.

package/extensions/context.ts

@@ -10,12 +10,6 @@ import {
 	visibleWidth,
 	wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
-import {
-	centeredDialogBounds,
-	isDialogCloseClick,
-	renderDialogHeader,
-	renderDialogTopBorder,
-} from "./closable-dialog.ts";
 
 export type ContextPart = {
 	label: string;
@@ -71,8 +65,6 @@ export async function showTextPreview(
 			let scrollOffset = 0;
 			let pageSize = 1;
 			let totalLines = 1;
-			let lastWidth = 0;
-			let lastHeight = 0;
 			const wrappedContent = createWrappedTextCache(content);
 
 			const scrollTo = (nextOffset: number): void => {
@@ -85,10 +77,6 @@ export async function showTextPreview(
 					wrappedContent.invalidate();
 				},
 				handleInput(data: string) {
-					if (isDialogCloseClick(data, centeredDialogBounds(tui.terminal, lastWidth, lastHeight))) {
-						done(undefined);
-						return;
-					}
 					if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
 						done(undefined);
 						return;
@@ -150,24 +138,15 @@ export async function showTextPreview(
 					const end = Math.min(totalLines, scrollOffset + pageSize);
 					const status = `${start}-${end} / ${totalLines} lines · ↑↓ PgUp/PgDn Home/End · Esc close`;
 
-					const lines = [
-						renderDialogTopBorder(width, border),
-						renderDialogHeader(
-							` ${title}`,
-							width,
-							border,
-							(text) => theme.bold(theme.fg("accent", text)),
-							(text) => theme.fg("muted", text),
-						),
+					return [
+						border(`╭${"─".repeat(inner)}╮`),
+						`${border("│")}${padLine(` ${theme.bold(theme.fg("accent", title))}`)}${border("│")}`,
 						`${border("├")}${border("─".repeat(inner))}${border("┤")}`,
 						...bodyRows,
 						`${border("├")}${border("─".repeat(inner))}${border("┤")}`,
 						`${border("│")}${padLine(theme.fg("dim", ` ${status}`))}${border("│")}`,
 						border(`╰${"─".repeat(inner)}╯`),
 					];
-					lastWidth = width;
-					lastHeight = lines.length;
-					return lines;
 				},
 			};
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-cc-extensions",
-	"version": "0.8.21",
+	"version": "0.8.22",
 	"description": "A Pi productivity suite with Claude Code-style UI, structured questionnaires, context inspection, and agent/session references",
 	"type": "module",
 	"keywords": [

package/extensions/closable-dialog.ts

@@ -1,57 +0,0 @@
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-
-export type DialogBounds = { left: number; top: number; width: number };
-
-export function renderDialogTopBorder(width: number, color: (text: string) => string): string {
-	const safeWidth = Math.max(4, Math.floor(width));
-	return color(`╭${"─".repeat(safeWidth - 2)}╮`);
-}
-
-/** Render title and a larger [ × ] target on the row below the top border. */
-export function renderDialogHeader(
-	title: string,
-	width: number,
-	color: (text: string) => string,
-	titleColor: (text: string) => string,
-	closeColor: (text: string) => string,
-): string {
-	const safeWidth = Math.max(8, Math.floor(width));
-	const innerWidth = safeWidth - 2;
-	const button = "[ × ]";
-	const titleWidth = Math.max(0, innerWidth - visibleWidth(button) - 2);
-	const shownTitle = truncateToWidth(title, titleWidth, "…");
-	const gap = " ".repeat(Math.max(1, innerWidth - visibleWidth(shownTitle) - visibleWidth(button)));
-	return `${color("│")}${titleColor(shownTitle)}${gap}${closeColor(button)}${color("│")}`;
-}
-
-/** Match a left-button press anywhere on the [ × ] target. */
-export function isDialogCloseClick(data: string, bounds: DialogBounds): boolean {
-	const match = data.match(/^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/);
-	if (!match || match[4] !== "M") return false;
-	const code = Number(match[1]);
-	if ((code & 3) !== 0 || (code & 32) !== 0) return false;
-	const col = Number(match[2]);
-	const firstButtonCol = bounds.left + bounds.width - 7;
-	const lastButtonCol = bounds.left + bounds.width - 3;
-	return col >= firstButtonCol && col <= lastButtonCol && Number(match[3]) === bounds.top + 1;
-}
-
-export function centeredDialogBounds(
-	terminal: { columns: number; rows: number },
-	width: number,
-	height: number,
-): DialogBounds {
-	return {
-		left: Math.floor((terminal.columns - width) / 2) + 1,
-		top: Math.floor((terminal.rows - height) / 2) + 1,
-		width,
-	};
-}
-
-export function bottomDialogBounds(
-	terminal: { rows: number },
-	width: number,
-	height: number,
-): DialogBounds {
-	return { left: 1, top: Math.max(1, terminal.rows - height + 1), width };
-}