@oh-my-pi/pi-coding-agent 15.2.4 → 15.3.1

package/src/utils/clipboard.ts

@@ -1,8 +1,15 @@
 import { execSync } from "node:child_process";
 import type { ClipboardImage } from "@oh-my-pi/pi-natives";
 import * as native from "@oh-my-pi/pi-natives";
+import { logger } from "@oh-my-pi/pi-utils";
 
-const hasDisplay = process.platform !== "linux" || Boolean(process.env.DISPLAY || process.env.WAYLAND_DISPLAY);
+function hasDisplay(): boolean {
+	return process.platform !== "linux" || Boolean(process.env.DISPLAY || process.env.WAYLAND_DISPLAY);
+}
+
+function isWsl(): boolean {
+	return process.platform === "linux" && Boolean(process.env.WSL_DISTRO_NAME || process.env.WSL_INTEROP);
+}
 
 /**
  * Copy text to the system clipboard.
@@ -59,11 +66,72 @@ export async function copyToClipboard(text: string): Promise<void> {
 	}
 }
 
+// PowerShell one-liner that emits the clipboard image as base64-encoded PNG on
+// stdout, or nothing when the clipboard does not hold image data. Used as the
+// WSL bridge — arboard cannot read the Windows clipboard through WSLg.
+const POWERSHELL_IMAGE_SCRIPT = `
+$ErrorActionPreference = 'Stop'
+Add-Type -AssemblyName System.Windows.Forms
+Add-Type -AssemblyName System.Drawing
+$img = [System.Windows.Forms.Clipboard]::GetImage()
+if ($img -ne $null) {
+	$ms = New-Object System.IO.MemoryStream
+	$img.Save($ms, [System.Drawing.Imaging.ImageFormat]::Png)
+	[Console]::Out.Write([Convert]::ToBase64String($ms.ToArray()))
+}
+`;
+
+const POWERSHELL_TIMEOUT_MS = 8000;
+
+/**
+ * Read a clipboard image through the Windows host's PowerShell.
+ *
+ * WSLg exposes a Wayland socket but no native clipboard image transport, so
+ * `arboard` returns `ContentNotAvailable`. PowerShell, reached via WSL interop,
+ * can read the Windows clipboard directly and round-trip the bitmap as PNG.
+ *
+ * Returns null when no image is on the clipboard, the host PowerShell is
+ * missing, or the bridge times out.
+ */
+async function readImageViaPowerShell(): Promise<ClipboardImage | null> {
+	try {
+		const proc = Bun.spawn(["powershell.exe", "-NoProfile", "-NonInteractive", "-Command", POWERSHELL_IMAGE_SCRIPT], {
+			stdout: "pipe",
+			stderr: "ignore",
+			stdin: "ignore",
+		});
+		const timer = setTimeout(() => proc.kill(), POWERSHELL_TIMEOUT_MS);
+		let stdout = "";
+		try {
+			stdout = await new Response(proc.stdout).text();
+			await proc.exited;
+		} catch (err) {
+			// powershell.exe is a Windows process reached over WSL interop; if it
+			// doesn't reap cleanly, swallow the error so the dispatcher can fall
+			// through to the native bridge instead of throwing.
+			logger.warn("clipboard: powershell read failed", { error: String(err) });
+			return null;
+		} finally {
+			clearTimeout(timer);
+		}
+		if (proc.exitCode !== 0) return null;
+		const b64 = stdout.trim();
+		if (!b64) return null;
+		const bytes = Buffer.from(b64, "base64");
+		if (bytes.byteLength === 0) return null;
+		return { data: new Uint8Array(bytes), mimeType: "image/png" };
+	} catch {
+		return null;
+	}
+}
+
 /**
  * Read an image from the system clipboard.
  *
  * Returns null on Termux (no image clipboard support) or when no display
- * server is available (headless/SSH without forwarding).
+ * server is available (headless/SSH without forwarding). Under WSL the
+ * Windows clipboard is reached through `powershell.exe`, since WSLg's
+ * Wayland clipboard does not carry image payloads through to `arboard`.
  *
  * @returns PNG payload or null when no image is available.
  */
@@ -72,7 +140,15 @@ export async function readImageFromClipboard(): Promise<ClipboardImage | null> {
 		return null;
 	}
 
-	if (!hasDisplay) {
+	if (isWsl()) {
+		const image = await readImageViaPowerShell();
+		if (image) return image;
+		// Fall through: arboard may still succeed on a future WSLg release —
+		// but only when we actually have a display server. Headless WSL has
+		// no display, so arboard would reject anyway.
+	}
+
+	if (!hasDisplay()) {
 		return null;
 	}
 

package/src/utils/image-resize.ts

@@ -5,6 +5,7 @@ export interface ImageResizeOptions {
 	maxHeight?: number;
 	maxBytes?: number;
 	jpegQuality?: number;
+	excludeWebP?: boolean;
 }
 
 export interface ResizedImage {
@@ -22,7 +23,7 @@ export interface ResizedImage {
 // binding constraint once images are downsized to 1568px (Anthropic's internal threshold).
 const DEFAULT_MAX_BYTES = 500 * 1024;
 
-const DEFAULT_OPTIONS: Required<ImageResizeOptions> = {
+const DEFAULT_OPTIONS: Required<Omit<ImageResizeOptions, "excludeWebP">> = {
 	// Anthropic's "internal recommended size" — Claude internally caps images at
 	// 1568px on the longest edge before vision processing.
 	maxWidth: 1568,
@@ -31,6 +32,18 @@ const DEFAULT_OPTIONS: Required<ImageResizeOptions> = {
 	jpegQuality: 80,
 };
 
+/**
+ * Read `OMP_NO_WEBP` per-call so runtime toggles take effect.
+ * Only `"1"` and `"true"` (case-insensitive) enable exclusion — an empty string
+ * or `"0"` MUST be treated as disabled.
+ */
+function isWebPExcluded(): boolean {
+	const raw = Bun.env.OMP_NO_WEBP;
+	if (raw === undefined) return false;
+	const v = raw.toLowerCase();
+	return v === "1" || v === "true";
+}
+
 /** Pick the smallest of N encoded buffers. */
 function pickSmallest(...candidates: Array<{ buffer: Uint8Array; mimeType: string }>): {
 	buffer: Uint8Array;
@@ -49,16 +62,19 @@ Buffer.prototype.toBase64 = function (this: Buffer) {
  *
  * Strategy:
  *  1. Probe metadata. If already within all limits, return original.
- *  2. Resize to fit max dimensions and encode at high quality across PNG/JPEG/WebP — return smallest.
+ *  2. Resize to fit max dimensions and encode at high quality across PNG/JPEG (+ WebP) — return smallest.
  *  3. If still too large, walk a lossy JPEG/WebP quality ladder.
  *  4. If still too large, walk a dimension-scale ladder × quality ladder.
  *  5. If still too large, return the smallest variant produced.
  *
+ * Set OMP_NO_WEBP to exclude WebP from encoding (llama.cpp STB doesn't decode it).
+ *
  * Backed by `Bun.Image`: a chainable native pipeline that runs decode/transform/encode
  * off the JS thread when the terminal (`.bytes()`) is awaited.
  */
 export async function resizeImage(img: ImageContent, options?: ImageResizeOptions): Promise<ResizedImage> {
-	const opts = { ...DEFAULT_OPTIONS, ...options };
+	const excludeWebP = options?.excludeWebP ?? isWebPExcluded();
+	const opts = { ...DEFAULT_OPTIONS, ...options, excludeWebP };
 	const inputBuffer = Buffer.from(img.data, "base64");
 
 	try {
@@ -71,7 +87,12 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 		// still get JPEG-compressed.
 		const originalSize = inputBuffer.length;
 		const comfortableSize = opts.maxBytes / 4;
-		if (originalWidth <= opts.maxWidth && originalHeight <= opts.maxHeight && originalSize <= comfortableSize) {
+		if (
+			originalWidth <= opts.maxWidth &&
+			originalHeight <= opts.maxHeight &&
+			originalSize <= comfortableSize &&
+			!(opts.excludeWebP && sourceMime === "image/webp")
+		) {
 			return {
 				buffer: inputBuffer,
 				mimeType: sourceMime,
@@ -99,44 +120,65 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			targetHeight = opts.maxHeight;
 		}
 
-		// First-attempt encoder: try PNG, JPEG, and lossy WebP — return whichever is smallest.
-		// PNG wins for line art / few-color UI; JPEG and WebP win for photographic content;
-		// WebP usually beats JPEG by 25–35% at the same perceptual quality.
+		// First-attempt encoder: try PNG and JPEG (+ WebP if not excluded) — return smallest.
+		// PNG wins for line art / few-color UI; JPEG wins for photographic content;
+		// WebP usually beats JPEG by 25–35% but is disabled when OMP_NO_WEBP is set
+		// because many local inference backends (llama.cpp STB) don't decode it.
 		async function encodeSmallest(
 			width: number,
 			height: number,
 			quality: number,
 		): Promise<{ buffer: Uint8Array; mimeType: string }> {
-			const [pngBuffer, jpegBuffer, webpBuffer] = await Promise.all([
-				new Bun.Image(inputBuffer).resize(width, height).png().bytes(),
-				new Bun.Image(inputBuffer).resize(width, height).jpeg({ quality }).bytes(),
-				new Bun.Image(inputBuffer).resize(width, height).webp({ quality }).bytes(),
+			const candidates = await Promise.all([
+				new Bun.Image(inputBuffer)
+					.resize(width, height)
+					.png()
+					.bytes()
+					.then(b => ({ buffer: b, mimeType: "image/png" })),
+				new Bun.Image(inputBuffer)
+					.resize(width, height)
+					.jpeg({ quality })
+					.bytes()
+					.then(b => ({ buffer: b, mimeType: "image/jpeg" })),
+				...(opts.excludeWebP
+					? []
+					: [
+							new Bun.Image(inputBuffer)
+								.resize(width, height)
+								.webp({ quality })
+								.bytes()
+								.then(b => ({ buffer: b, mimeType: "image/webp" })),
+						]),
 			]);
-			return pickSmallest(
-				{ buffer: pngBuffer, mimeType: "image/png" },
-				{ buffer: jpegBuffer, mimeType: "image/jpeg" },
-				{ buffer: webpBuffer, mimeType: "image/webp" },
-			);
+			return pickSmallest(...candidates);
 		}
 
-		// Lossy-only encoder — used in quality/dimension fallback ladders where PNG can't shrink
-		// further (PNG quality is a no-op). Picks the smaller of JPEG vs lossy WebP at the
-		// requested quality.
+		// Lossy encoder for quality/dimension fallback ladders. PNG is excluded since
+		// it's lossless and doesn't respond to quality parameters. WebP is included
+		// unless OMP_NO_WEBP is set (llama.cpp STB incompatibility).
 		async function encodeLossy(
 			width: number,
 			height: number,
 			quality: number,
 		): Promise<{ buffer: Uint8Array; mimeType: string }> {
-			const [jpegBuffer, webpBuffer] = await Promise.all([
-				new Bun.Image(inputBuffer).resize(width, height).jpeg({ quality }).bytes(),
-				new Bun.Image(inputBuffer).resize(width, height).webp({ quality }).bytes(),
+			const candidates = await Promise.all([
+				new Bun.Image(inputBuffer)
+					.resize(width, height)
+					.jpeg({ quality })
+					.bytes()
+					.then(b => ({ buffer: b, mimeType: "image/jpeg" })),
+				...(opts.excludeWebP
+					? []
+					: [
+							new Bun.Image(inputBuffer)
+								.resize(width, height)
+								.webp({ quality })
+								.bytes()
+								.then(b => ({ buffer: b, mimeType: "image/webp" })),
+						]),
 			]);
-			return pickSmallest(
-				{ buffer: jpegBuffer, mimeType: "image/jpeg" },
-				{ buffer: webpBuffer, mimeType: "image/webp" },
-			);
+			return pickSmallest(...candidates);
 		}
-
 		// Quality ladder — more aggressive steps for tighter budgets
 		const qualitySteps = [70, 60, 50, 40];
 		const scaleSteps = [1.0, 0.75, 0.5, 0.35, 0.25];
@@ -145,7 +187,7 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 		let finalWidth = targetWidth;
 		let finalHeight = targetHeight;
 
-		// First attempt: resize to target, try PNG/JPEG/WebP, pick smallest
+		// First attempt: resize to target, try PNG/JPEG (+ WebP), pick smallest
 		best = await encodeSmallest(targetWidth, targetHeight, opts.jpegQuality);
 
 		if (best.buffer.length <= opts.maxBytes) {
@@ -163,7 +205,7 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			};
 		}
 
-		// Still too large — lossy ladder (JPEG vs WebP, smallest wins) with decreasing quality
+		// Still too large — lossy JPEG (+ WebP) ladder with decreasing quality
 		for (const quality of qualitySteps) {
 			best = await encodeLossy(targetWidth, targetHeight, quality);
 
@@ -226,7 +268,13 @@ export async function resizeImage(img: ImageContent, options?: ImageResizeOption
 			},
 		};
 	} catch {
-		// Failed to load image
+		// Bun.Image rejected the input — we cannot decode/re-encode it.
+		// When the caller demanded WebP exclusion AND the original is WebP,
+		// returning the original buffer would silently violate that contract,
+		// so surface an explicit error instead.
+		if (excludeWebP && (img.mimeType === "image/webp" || !img.mimeType)) {
+			throw new Error("resizeImage: failed to decode image and cannot honor excludeWebP for a WebP source");
+		}
 		return {
 			buffer: inputBuffer,
 			mimeType: img.mimeType,

package/dist/types/modes/components/status-line-segment-editor.d.ts

@@ -1,24 +0,0 @@
-/**
- * Status Line Segment Editor
- *
- * Interactive component for configuring status line segments.
- * - Three-column layout: Left | Right | Disabled
- * - Space: Toggle segment visibility (disabled ↔ left)
- * - Tab: Cycle segment between columns (left → right → disabled → left)
- * - Shift+J/K: Reorder segment within column
- * - Live preview shown in the actual status line above
- */
-import { Container } from "@oh-my-pi/pi-tui";
-import type { StatusLineSegmentId } from "../../config/settings-schema";
-export interface SegmentEditorCallbacks {
-    onSave: (leftSegments: StatusLineSegmentId[], rightSegments: StatusLineSegmentId[]) => void;
-    onCancel: () => void;
-    onPreview?: (leftSegments: StatusLineSegmentId[], rightSegments: StatusLineSegmentId[]) => void;
-}
-export declare class StatusLineSegmentEditorComponent extends Container {
-    #private;
-    private readonly callbacks;
-    constructor(currentLeft: StatusLineSegmentId[], currentRight: StatusLineSegmentId[], callbacks: SegmentEditorCallbacks);
-    handleInput(data: string): void;
-    render(width: number): string[];
-}

package/src/modes/components/status-line-segment-editor.ts

@@ -1,359 +0,0 @@
-/**
- * Status Line Segment Editor
- *
- * Interactive component for configuring status line segments.
- * - Three-column layout: Left | Right | Disabled
- * - Space: Toggle segment visibility (disabled ↔ left)
- * - Tab: Cycle segment between columns (left → right → disabled → left)
- * - Shift+J/K: Reorder segment within column
- * - Live preview shown in the actual status line above
- */
-import { Container, matchesKey, padding } from "@oh-my-pi/pi-tui";
-import type { StatusLineSegmentId } from "../../config/settings-schema";
-import { theme } from "../../modes/theme/theme";
-import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
-import { ALL_SEGMENT_IDS } from "./status-line/segments";
-
-// Segment display names and short descriptions
-const SEGMENT_INFO: Record<StatusLineSegmentId, { label: string; short: string }> = {
-	pi: { label: "Pi", short: "π icon" },
-	model: { label: "Model", short: "model name" },
-	mode: { label: "Mode", short: "plan/loop status" },
-	path: { label: "Path", short: "working dir" },
-	git: { label: "Git", short: "branch/status" },
-	pr: { label: "PR", short: "pull request" },
-	subagents: { label: "Agents", short: "subagent count" },
-	token_in: { label: "Tokens In", short: "input tokens" },
-	token_out: { label: "Tokens Out", short: "output tokens" },
-	token_total: { label: "Tokens", short: "total tokens" },
-	token_rate: { label: "Tokens/s", short: "output throughput" },
-	cost: { label: "Cost", short: "session cost" },
-	context_pct: { label: "Context %", short: "context usage" },
-	context_total: { label: "Context", short: "context window" },
-	time_spent: { label: "Elapsed", short: "session time" },
-	time: { label: "Clock", short: "current time" },
-	session: { label: "Session", short: "session ID" },
-	hostname: { label: "Host", short: "hostname" },
-	cache_read: { label: "Cache ↑", short: "cache read" },
-	cache_write: { label: "Cache ↓", short: "cache write" },
-	session_name: { label: "Session Name", short: "named session" },
-};
-
-type Column = "left" | "right" | "disabled";
-
-interface SegmentState {
-	id: StatusLineSegmentId;
-	column: Column;
-	order: number;
-}
-
-export interface SegmentEditorCallbacks {
-	onSave: (leftSegments: StatusLineSegmentId[], rightSegments: StatusLineSegmentId[]) => void;
-	onCancel: () => void;
-	onPreview?: (leftSegments: StatusLineSegmentId[], rightSegments: StatusLineSegmentId[]) => void;
-}
-
-export class StatusLineSegmentEditorComponent extends Container {
-	#segments: SegmentState[];
-	#selectedIndex: number = 0;
-	#focusColumn: "left" | "right" | "disabled" = "left";
-
-	constructor(
-		currentLeft: StatusLineSegmentId[],
-		currentRight: StatusLineSegmentId[],
-		private readonly callbacks: SegmentEditorCallbacks,
-	) {
-		super();
-
-		// Initialize segment states
-		this.#segments = [];
-		const usedIds = new Set<StatusLineSegmentId>();
-
-		// Add left segments in order
-		for (let i = 0; i < currentLeft.length; i++) {
-			const id = currentLeft[i];
-			this.#segments.push({ id, column: "left", order: i });
-			usedIds.add(id);
-		}
-
-		// Add right segments in order
-		for (let i = 0; i < currentRight.length; i++) {
-			const id = currentRight[i];
-			this.#segments.push({ id, column: "right", order: i });
-			usedIds.add(id);
-		}
-
-		// Add remaining segments as disabled
-		for (const id of ALL_SEGMENT_IDS) {
-			if (!usedIds.has(id)) {
-				this.#segments.push({ id, column: "disabled", order: 999 });
-			}
-		}
-
-		// Trigger initial preview
-		this.#triggerPreview();
-	}
-
-	#getSegmentsForColumn(column: Column): SegmentState[] {
-		return this.#segments.filter(s => s.column === column).sort((a, b) => a.order - b.order);
-	}
-
-	#getCurrentColumnSegments(): SegmentState[] {
-		return this.#getSegmentsForColumn(this.#focusColumn);
-	}
-
-	#triggerPreview(): void {
-		const left = this.#getSegmentsForColumn("left").map(s => s.id);
-		const right = this.#getSegmentsForColumn("right").map(s => s.id);
-		this.callbacks.onPreview?.(left, right);
-	}
-
-	handleInput(data: string): void {
-		const columnSegments = this.#getCurrentColumnSegments();
-
-		if (matchesKey(data, "up") || data === "k") {
-			// Move selection up within column, or jump to previous column
-			if (this.#selectedIndex > 0) {
-				this.#selectedIndex--;
-			} else {
-				// Jump to previous column
-				if (this.#focusColumn === "disabled") {
-					const rightSegs = this.#getSegmentsForColumn("right");
-					if (rightSegs.length > 0) {
-						this.#focusColumn = "right";
-						this.#selectedIndex = rightSegs.length - 1;
-					} else {
-						const leftSegs = this.#getSegmentsForColumn("left");
-						if (leftSegs.length > 0) {
-							this.#focusColumn = "left";
-							this.#selectedIndex = leftSegs.length - 1;
-						}
-					}
-				} else if (this.#focusColumn === "right") {
-					const leftSegs = this.#getSegmentsForColumn("left");
-					if (leftSegs.length > 0) {
-						this.#focusColumn = "left";
-						this.#selectedIndex = leftSegs.length - 1;
-					}
-				}
-			}
-		} else if (matchesKey(data, "down") || data === "j") {
-			// Move selection down within column, or jump to next column
-			if (this.#selectedIndex < columnSegments.length - 1) {
-				this.#selectedIndex++;
-			} else {
-				// Jump to next column
-				if (this.#focusColumn === "left") {
-					const rightSegs = this.#getSegmentsForColumn("right");
-					if (rightSegs.length > 0) {
-						this.#focusColumn = "right";
-						this.#selectedIndex = 0;
-					} else {
-						const disabledSegs = this.#getSegmentsForColumn("disabled");
-						if (disabledSegs.length > 0) {
-							this.#focusColumn = "disabled";
-							this.#selectedIndex = 0;
-						}
-					}
-				} else if (this.#focusColumn === "right") {
-					const disabledSegs = this.#getSegmentsForColumn("disabled");
-					if (disabledSegs.length > 0) {
-						this.#focusColumn = "disabled";
-						this.#selectedIndex = 0;
-					}
-				}
-			}
-		} else if (matchesKey(data, "tab")) {
-			// Cycle segment: left → right → disabled → left
-			const seg = columnSegments[this.#selectedIndex];
-			if (seg) {
-				const oldColumn = seg.column;
-				if (seg.column === "left") {
-					seg.column = "right";
-					seg.order = this.#getSegmentsForColumn("right").length;
-				} else if (seg.column === "right") {
-					seg.column = "disabled";
-					seg.order = 999;
-				} else {
-					seg.column = "left";
-					seg.order = this.#getSegmentsForColumn("left").length;
-				}
-				// Recompact orders in old column
-				this.#recompactColumn(oldColumn);
-				this.#triggerPreview();
-			}
-		} else if (matchesKey(data, "shift+tab")) {
-			// Reverse cycle: left ← right ← disabled ← left
-			const seg = columnSegments[this.#selectedIndex];
-			if (seg) {
-				const oldColumn = seg.column;
-				if (seg.column === "left") {
-					seg.column = "disabled";
-					seg.order = 999;
-				} else if (seg.column === "right") {
-					seg.column = "left";
-					seg.order = this.#getSegmentsForColumn("left").length;
-				} else {
-					seg.column = "right";
-					seg.order = this.#getSegmentsForColumn("right").length;
-				}
-				this.#recompactColumn(oldColumn);
-				this.#triggerPreview();
-			}
-		} else if (data === " ") {
-			// Quick toggle: disabled ↔ left
-			const seg = columnSegments[this.#selectedIndex];
-			if (seg) {
-				const oldColumn = seg.column;
-				if (seg.column === "disabled") {
-					seg.column = "left";
-					seg.order = this.#getSegmentsForColumn("left").length;
-				} else {
-					seg.column = "disabled";
-					seg.order = 999;
-				}
-				this.#recompactColumn(oldColumn);
-				this.#triggerPreview();
-			}
-		} else if (data === "K") {
-			// Move segment up in order (Shift+K)
-			const seg = columnSegments[this.#selectedIndex];
-			if (seg && seg.column !== "disabled" && this.#selectedIndex > 0) {
-				const prevSeg = columnSegments[this.#selectedIndex - 1];
-				const tempOrder = seg.order;
-				seg.order = prevSeg.order;
-				prevSeg.order = tempOrder;
-				this.#selectedIndex--;
-				this.#triggerPreview();
-			}
-		} else if (data === "J") {
-			// Move segment down in order (Shift+J)
-			const seg = columnSegments[this.#selectedIndex];
-			if (seg && seg.column !== "disabled" && this.#selectedIndex < columnSegments.length - 1) {
-				const nextSeg = columnSegments[this.#selectedIndex + 1];
-				const tempOrder = seg.order;
-				seg.order = nextSeg.order;
-				nextSeg.order = tempOrder;
-				this.#selectedIndex++;
-				this.#triggerPreview();
-			}
-		} else if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
-			const left = this.#getSegmentsForColumn("left").map(s => s.id);
-			const right = this.#getSegmentsForColumn("right").map(s => s.id);
-			this.callbacks.onSave(left, right);
-		} else if (matchesAppInterrupt(data)) {
-			this.callbacks.onCancel();
-		}
-	}
-
-	#recompactColumn(column: Column): void {
-		if (column === "disabled") return;
-		const segs = this.#getSegmentsForColumn(column);
-		for (let i = 0; i < segs.length; i++) {
-			segs[i].order = i;
-		}
-	}
-
-	render(width: number): string[] {
-		const lines: string[] = [];
-
-		// Title with live preview indicator
-		lines.push(theme.bold(theme.fg("accent", "Configure Status Line Segments")));
-		lines.push(theme.fg("dim", "Live preview shown in status line above"));
-		lines.push("");
-
-		// Key bindings
-		lines.push(
-			theme.fg("muted", "Space") +
-				" toggle  " +
-				theme.fg("muted", "Tab/S-Tab") +
-				" cycle column  " +
-				theme.fg("muted", "J/K") +
-				" reorder  " +
-				theme.fg("muted", "Enter") +
-				" save  " +
-				theme.fg("muted", "Esc") +
-				" cancel",
-		);
-		lines.push("");
-
-		// Get segments for each column
-		const leftSegs = this.#getSegmentsForColumn("left");
-		const rightSegs = this.#getSegmentsForColumn("right");
-		const disabledSegs = this.#getSegmentsForColumn("disabled");
-
-		// Calculate column widths
-		const colWidth = Math.max(18, Math.floor((width - 6) / 3));
-
-		// Column headers
-		const activeMarker = theme.nav.back;
-		const leftHeader =
-			this.#focusColumn === "left"
-				? theme.bold(theme.fg("accent", `${activeMarker} LEFT`))
-				: theme.fg("muted", "  LEFT");
-		const rightHeader =
-			this.#focusColumn === "right"
-				? theme.bold(theme.fg("accent", `${activeMarker} RIGHT`))
-				: theme.fg("muted", "  RIGHT");
-		const disabledHeader =
-			this.#focusColumn === "disabled"
-				? theme.bold(theme.fg("accent", `${activeMarker} AVAILABLE`))
-				: theme.fg("muted", "  AVAILABLE");
-
-		lines.push(`${leftHeader.padEnd(colWidth + 8)}${rightHeader.padEnd(colWidth + 8)}${disabledHeader}`);
-		lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, colWidth * 3 + 6))));
-
-		// Render rows
-		const maxRows = Math.max(leftSegs.length, rightSegs.length, disabledSegs.length, 1);
-
-		for (let row = 0; row < maxRows; row++) {
-			let line = "";
-
-			// Left column
-			line += this.#renderSegmentCell(leftSegs[row], "left", row, colWidth);
-
-			// Right column
-			line += this.#renderSegmentCell(rightSegs[row], "right", row, colWidth);
-
-			// Disabled column
-			line += this.#renderSegmentCell(disabledSegs[row], "disabled", row, colWidth);
-
-			lines.push(line);
-		}
-
-		// Summary line
-		lines.push("");
-		const leftCount = leftSegs.length;
-		const rightCount = rightSegs.length;
-		const summary = theme.fg(
-			"dim",
-			`${leftCount} left ${theme.sep.dot} ${rightCount} right ${theme.sep.dot} ${disabledSegs.length} available`,
-		);
-		lines.push(summary);
-
-		return lines;
-	}
-
-	#renderSegmentCell(seg: SegmentState | undefined, column: Column, row: number, colWidth: number): string {
-		if (!seg) {
-			return "".padEnd(colWidth + 2);
-		}
-
-		const isSelected = this.#focusColumn === column && this.#selectedIndex === row;
-		const info = SEGMENT_INFO[seg.id];
-		const label = info?.label ?? seg.id;
-
-		let text: string;
-		if (isSelected) {
-			text = theme.bg("selectedBg", theme.fg("text", ` ${label} `));
-		} else if (column === "disabled") {
-			text = theme.fg("dim", ` ${label}`);
-		} else {
-			text = theme.fg("text", ` ${label}`);
-		}
-
-		// Pad to column width (accounting for ANSI codes)
-		const padSize = colWidth - label.length - 1;
-		return text + padding(Math.max(0, padSize));
-	}
-}