@narumitw/pi-statusline 0.37.0 → 0.38.0

package/README.md

@@ -48,7 +48,8 @@ For the best result, use a terminal font that includes Powerline glyphs and emoj
 
 1. Install the extension and start Pi.
 2. Run `/statusline`.
-3. Choose an appearance or information level; changes apply immediately.
+3. Use the standard Main/Advanced navigation, then choose an appearance or information level;
+   specialized previews still apply changes immediately.
 
 ```text
 Appearance (tokyo-night)
@@ -90,8 +91,11 @@ reads or writes.
 | `/statusline status` | Show the effective settings and diagnostics |
 | `/statusline help` | Show command and schema guidance |
 
-The direct `settings`, `status`, and `help` routes remain for compatibility. RPC receives observable
-notifications instead of TUI-only controls. Unknown subcommands and trailing arguments are rejected.
+The direct `settings`, `status`, and `help` routes remain for compatibility. The root standard menu
+is TUI-only; Escape returns from Advanced or closes Main. RPC receives observable notifications
+instead of TUI-only controls. Unknown subcommands and trailing arguments are rejected. Palette and
+information previews, the width-aware layout editor, and the JSON editor remain specialized UI
+because they provide live preview/edit behavior rather than standard navigation.
 
 ## 📐 Runtime behavior
 
@@ -158,7 +162,7 @@ automatically; rename it to `pi-statusline.json`. If both files exist, `pi-statu
 | `density` | `compact`, `cozy` | Control horizontal padding |
 | `separator` | `none`, `dot`, `bar`, `powerline`, `round` | Separate adjacent segments in one color block |
 | `segments` | Ordered unique segment names and `line_break` | Control visibility, order, and rows |
-| `segmentText` | Per-segment `prefix` and `suffix` | Wrap Pi-owned dynamic values |
+| `segmentText` | Per-segment `prefix` and `suffix`; model truncation fields | Format Pi-owned dynamic values |
 | `extensionStatusIcons` | Raw status key or `namespace:*` to icon string | Customize extension status icons |
 
 All fields are optional in an existing document. Missing fields use defaults. Unknown fields produce a
@@ -174,6 +178,11 @@ A compact customization example:
   "separator": "dot",
   "segments": ["model", "thinking", "cwd", "branch", "context", "cache", "cost"],
   "segmentText": {
+    "model": {
+      "truncationLength": 40,
+      "truncationSymbol": "…",
+      "truncationDirection": "middle"
+    },
     "context": { "prefix": "ctx ", "suffix": "" }
   },
   "extensionStatusIcons": {
@@ -214,6 +223,37 @@ When `palettePreset` is `custom`, `palette` maps segment names to foreground/bac
 `segmentText` values must be single-line text without terminal control characters. Use `line_break`
 for another row rather than inserting a newline into a prefix or suffix.
 
+### Model truncation
+
+Long model IDs are truncated out of the box so the balanced footer can retain useful model context:
+
+```json
+{
+  "segmentText": {
+    "model": {
+      "truncationLength": 36,
+      "truncationSymbol": "…",
+      "truncationDirection": "start"
+    }
+  }
+}
+```
+
+`truncationLength` counts model grapheme clusters retained before the symbol. The built-in value is
+`36`; set it to `0` to display the complete ID. The direction names the removed portion:
+
+- `start` retains the suffix and is the default, which is useful for long llama.cpp paths and model
+  variants.
+- `middle` retains both ends.
+- `end` retains the prefix.
+
+Truncation runs after the built-in Claude/GPT shortening rules but before the configured model prefix
+and suffix. It changes display only—the provider model ID is untouched. Terminal control sequences
+in model IDs are removed at render time, and unsafe configured symbols are rejected. An empty
+`truncationSymbol` truncates without a marker. pi-statusline treats model IDs as opaque strings and
+does not parse paths, repositories, GGUF suffixes, or quantization names. At very narrow widths, the
+existing responsive priorities may still omit the model rather than overflow the terminal.
+
 ## 🧩 Advanced layout
 
 Open **Advanced → Custom layout** when the curated levels are not enough.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-statusline",
-	"version": "0.37.0",
+	"version": "0.38.0",
 	"description": "Pi extension that replaces the footer with an information-rich statusline.",
 	"type": "module",
 	"license": "MIT",
@@ -38,5 +38,8 @@
 		"type": "git",
 		"url": "https://github.com/narumiruna/pi-extensions",
 		"directory": "extensions/pi-statusline"
+	},
+	"dependencies": {
+		"@narumitw/pi-tui-kit": "<1"
 	}
 }

package/src/commands.ts

@@ -14,6 +14,7 @@ import {
 	truncateToWidth,
 	wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
+import { defineMenu, runMenu } from "@narumitw/pi-tui-kit";
 import {
 	INFORMATION_PROFILE_NAMES,
 	INFORMATION_PROFILES,
@@ -68,6 +69,7 @@ export interface StatuslineCommandOptions {
 	apply(loaded: LoadedStatuslineSettings, ctx: ExtensionCommandContext): void;
 	preview?(palettePreset: PalettePreset | undefined, ctx: ExtensionCommandContext): void;
 	save?: (settingsPath: string, rawDocument: string) => LoadedStatuslineSettings;
+	getMenuOwner?(): { signal: AbortSignal; isCurrent(): boolean };
 }
 
 export function registerStatuslineCommand(pi: ExtensionAPI, options: StatuslineCommandOptions) {
@@ -115,67 +117,100 @@ export function registerStatuslineCommand(pi: ExtensionAPI, options: StatuslineC
 
 async function showMainMenu(ctx: ExtensionCommandContext, options: StatuslineCommandOptions) {
 	if (ctx.mode !== "tui") {
-		if (ctx.hasUI) ctx.ui.notify("/statusline requires an interactive Pi UI.", "error");
+		if (ctx.hasUI) ctx.ui.notify("/statusline requires an interactive Pi UI in TUI mode.", "error");
 		return;
 	}
-	while (true) {
-		const config = options.getLoaded().config;
-		const appearanceItem = `Appearance (${config.palettePreset})`;
-		const informationItem = `Information (${inferInformationProfile(config.segments)})`;
-		const selection = await ctx.ui.select("pi-statusline", [
-			appearanceItem,
-			informationItem,
-			"Advanced",
-			"Status",
-			"Help",
-		]);
-		if (selection === appearanceItem) {
-			await choosePalettePreset(ctx, options);
-			return;
-		}
-		if (selection === informationItem) {
-			await chooseInformationProfile(ctx, options);
-			return;
-		}
-		switch (selection) {
-			case "Advanced":
-				if (await showAdvancedMenu(ctx, options)) continue;
-				return;
-			case "Status":
+	const fallbackController = new AbortController();
+	const owner = options.getMenuOwner?.() ?? {
+		signal: fallbackController.signal,
+		isCurrent: () => !fallbackController.signal.aborted,
+	};
+	type Screen = "main" | "advanced";
+	type Action = "appearance" | "information" | "layout" | "edit" | "status" | "help" | "back";
+	const menu = defineMenu<undefined, Screen, Action, ExtensionCommandContext>({
+		start: "main",
+		screens: {
+			main: () => {
+				const config = options.getLoaded().config;
+				return {
+					kind: "actions",
+					title: "pi-statusline",
+					items: [
+						{
+							id: "appearance",
+							label: `Appearance (${config.palettePreset})`,
+							action: "appearance",
+						},
+						{
+							id: "information",
+							label: `Information (${inferInformationProfile(config.segments)})`,
+							action: "information",
+						},
+						{ id: "advanced", label: "Advanced", to: "advanced" },
+						{ id: "status", label: "Status", action: "status" },
+						{ id: "help", label: "Help", action: "help" },
+					],
+					hint: "close",
+				};
+			},
+			advanced: () => {
+				const config = options.getLoaded().config;
+				const visibleSegmentCount = config.segments.filter(
+					(segment): segment is SegmentName => segment !== LINE_BREAK_SEGMENT_NAME,
+				).length;
+				return {
+					kind: "actions",
+					title: "pi-statusline — Advanced",
+					items: [
+						{
+							id: "layout",
+							label: `Custom layout (${visibleSegmentCount}/${SEGMENT_NAMES.length} shown)`,
+							action: "layout",
+						},
+						{ id: "edit", label: EDIT_SETTINGS_LABEL, action: "edit" },
+						{ id: "back", label: "Back", action: "back" },
+					],
+					hint: "back",
+				};
+			},
+		},
+		actions: {
+			appearance: async () => {
+				await choosePalettePreset(ctx, options);
+				return { kind: "close" };
+			},
+			information: async () => {
+				await chooseInformationProfile(ctx, options);
+				return { kind: "close" };
+			},
+			layout: async () => {
+				await chooseSegments(ctx, options);
+				return { kind: "close" };
+			},
+			edit: async () => {
+				await editSettings(ctx, options);
+				return { kind: "close" };
+			},
+			status: async () => {
 				showStatus(ctx, options);
-				return;
-			case "Help":
+				return { kind: "close" };
+			},
+			help: async () => {
 				showHelp(ctx, options.settingsPath);
-				return;
-			default:
-				return;
-		}
-	}
-}
-
-async function showAdvancedMenu(
-	ctx: ExtensionCommandContext,
-	options: StatuslineCommandOptions,
-): Promise<boolean> {
-	const config = options.getLoaded().config;
-	const visibleSegmentCount = config.segments.filter(
-		(segment): segment is SegmentName => segment !== LINE_BREAK_SEGMENT_NAME,
-	).length;
-	const layoutItem = `Custom layout (${visibleSegmentCount}/${SEGMENT_NAMES.length} shown)`;
-	const selection = await ctx.ui.select("pi-statusline — Advanced", [
-		layoutItem,
-		EDIT_SETTINGS_LABEL,
-		"Back",
-	]);
-	if (selection === layoutItem) {
-		await chooseSegments(ctx, options);
-		return false;
-	}
-	if (selection === EDIT_SETTINGS_LABEL) {
-		await editSettings(ctx, options);
-		return false;
+				return { kind: "close" };
+			},
+			back: async () => ({ kind: "back" }),
+		},
+	});
+	try {
+		await runMenu(ctx, menu, {
+			getState: () => undefined,
+			signal: owner.signal,
+			isCurrent: owner.isCurrent,
+		});
+	} finally {
+		fallbackController.abort(new DOMException("Statusline menu closed", "AbortError"));
 	}
-	return selection === "Back";
 }
 
 async function choosePalettePreset(
@@ -920,6 +955,7 @@ function showHelp(ctx: ExtensionCommandContext, settingsPath: string) {
 			"Press M for move mode, Alt+Up/Alt+Down for quick move, and B for a line break.",
 			"Line breaks (line_break) may repeat when separated by data segments, but cannot be consecutive.",
 			"segmentText supports prefix and suffix strings around Pi-owned dynamic values.",
+			"segmentText.model also supports truncationLength, truncationSymbol, and truncationDirection (start, middle, end).",
 		].join("\n"),
 		"info",
 	);

package/src/render.ts

@@ -20,6 +20,7 @@ import {
 	type RenderSegment,
 	type SegmentName,
 	type StatuslineConfig,
+	type TruncationDirection,
 } from "./types.js";
 import { type FooterUsageSummary, summarizeFooterUsage } from "./usage.js";
 
@@ -107,8 +108,16 @@ function buildSegment(
 			return segment(name, "π", config, "accent", "header", true);
 		case "provider":
 			return segment(name, ctx.model?.provider ?? "no-provider", config, "accent", "header");
-		case "model":
-			return segment(name, shortenModel(ctx.model?.id ?? "no-model"), config, "accent", "header");
+		case "model": {
+			const presentation = config.segmentText.model;
+			const model = truncateModel(
+				shortenModel(ctx.model?.id ?? "no-model"),
+				presentation.truncationLength,
+				presentation.truncationSymbol,
+				presentation.truncationDirection,
+			);
+			return segment(name, model, config, "accent", "header");
+		}
 		case "thinking":
 			return segment(
 				name,
@@ -303,6 +312,95 @@ function formatTime(): string {
 	return `${hours}:${minutes}`;
 }
 
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+export function truncateModel(
+	model: string,
+	length: number,
+	symbol: string,
+	direction: TruncationDirection,
+): string {
+	const safeModel = sanitizeModelDisplay(model);
+	if (length === 0) return safeModel;
+	const graphemes = [...graphemeSegmenter.segment(safeModel)].map(({ segment }) => segment);
+	if (graphemes.length <= length) return safeModel;
+	const safeSymbol = sanitizeModelDisplay(symbol);
+
+	switch (direction) {
+		case "start":
+			return `${safeSymbol}${graphemes.slice(-length).join("")}`;
+		case "middle": {
+			const headLength = Math.ceil(length / 2);
+			const tailLength = Math.floor(length / 2);
+			const tail = tailLength > 0 ? graphemes.slice(-tailLength).join("") : "";
+			return `${graphemes.slice(0, headLength).join("")}${safeSymbol}${tail}`;
+		}
+		case "end":
+			return `${graphemes.slice(0, length).join("")}${safeSymbol}`;
+	}
+}
+
+function sanitizeModelDisplay(value: string): string {
+	let result = "";
+	for (let index = 0; index < value.length; ) {
+		const codePoint = value.codePointAt(index) ?? 0;
+		const character = String.fromCodePoint(codePoint);
+		if (codePoint === 0x1b || codePoint === 0x9b || codePoint === 0x9d) {
+			index = skipTerminalEscape(value, index, codePoint);
+			continue;
+		}
+		if (
+			codePoint <= 0x1f ||
+			(codePoint >= 0x7f && codePoint <= 0x9f) ||
+			codePoint === 0x2028 ||
+			codePoint === 0x2029
+		) {
+			if (
+				codePoint === 0x09 ||
+				codePoint === 0x0a ||
+				codePoint === 0x0d ||
+				codePoint === 0x85 ||
+				codePoint === 0x2028 ||
+				codePoint === 0x2029
+			) {
+				result += " ";
+			}
+			index += character.length;
+			continue;
+		}
+		result += character;
+		index += character.length;
+	}
+	return result;
+}
+
+function skipTerminalEscape(value: string, start: number, codePoint: number): number {
+	let index = start + 1;
+	const next = value.charCodeAt(index);
+	const isOsc = codePoint === 0x9d || (codePoint === 0x1b && next === 0x5d);
+	if (isOsc) {
+		if (codePoint === 0x1b) index += 1;
+		while (index < value.length) {
+			const current = value.charCodeAt(index);
+			if (current === 0x07 || current === 0x9c) return index + 1;
+			if (current === 0x1b && value.charCodeAt(index + 1) === 0x5c) return index + 2;
+			index += 1;
+		}
+		return index;
+	}
+	const isCsi = codePoint === 0x9b || (codePoint === 0x1b && next === 0x5b);
+	if (isCsi) {
+		if (codePoint === 0x1b) index += 1;
+		while (index < value.length) {
+			const current = value.charCodeAt(index);
+			index += 1;
+			if (current >= 0x40 && current <= 0x7e) break;
+		}
+		return index;
+	}
+	return Math.min(value.length, start + (codePoint === 0x1b ? 2 : 1));
+}
+
 export function shortenModel(model: string): string {
 	return model
 		.replace(/^claude-/, "")

package/src/settings.ts

@@ -16,6 +16,7 @@ import {
 	type SegmentName,
 	type SegmentPalette,
 	type StatuslineConfig,
+	TRUNCATION_DIRECTIONS,
 } from "./types.js";
 
 export const SETTINGS_FILE_NAME = "pi-statusline.json";
@@ -60,7 +61,13 @@ export const DEFAULT_STATUSLINE_CONFIG: StatuslineConfig = {
 	segmentText: {
 		brand: { prefix: "", suffix: "" },
 		provider: { prefix: "🔌 ", suffix: "" },
-		model: { prefix: "🤖 ", suffix: "" },
+		model: {
+			prefix: "🤖 ",
+			suffix: "",
+			truncationLength: 36,
+			truncationSymbol: "…",
+			truncationDirection: "start",
+		},
 		thinking: { prefix: "🧠 ", suffix: "" },
 		cwd: { prefix: "📁 ", suffix: "" },
 		branch: { prefix: "🌿 ", suffix: "" },
@@ -203,32 +210,25 @@ export function normalizeStatuslineConfig(value: unknown): {
 					diagnostics.push(invalidDiagnostic(path, "Expected an object"));
 					continue;
 				}
+				const knownFields = new Set([
+					"prefix",
+					"suffix",
+					...(name === "model"
+						? ["truncationLength", "truncationSymbol", "truncationDirection"]
+						: []),
+				]);
 				for (const key of Object.keys(presentation)) {
-					if (key !== "prefix" && key !== "suffix") {
-						diagnostics.push(unknownDiagnostic(`${path}.${key}`));
-					}
+					if (!knownFields.has(key)) diagnostics.push(unknownDiagnostic(`${path}.${key}`));
 				}
 				for (const field of ["prefix", "suffix"] as const) {
 					const fieldValue = presentation[field];
 					if (fieldValue === undefined) continue;
-					if (typeof fieldValue !== "string") {
-						diagnostics.push(invalidDiagnostic(`${path}.${field}`, "Expected a string"));
-						continue;
-					}
-					if (/[\r\n\u2028\u2029]/u.test(fieldValue)) {
-						diagnostics.push(
-							invalidDiagnostic(`${path}.${field}`, "Line breaks are not allowed; use line_break"),
-						);
-						continue;
-					}
-					if (hasControlCharacter(fieldValue)) {
-						diagnostics.push(
-							invalidDiagnostic(`${path}.${field}`, "Control characters are not allowed"),
-						);
-						continue;
-					}
+					if (!isSafeSegmentText(fieldValue, `${path}.${field}`, diagnostics)) continue;
 					config.segmentText[name][field] = fieldValue;
 				}
+				if (name === "model") {
+					normalizeModelTruncation(presentation, config, diagnostics);
+				}
 			}
 		}
 	}
@@ -505,6 +505,65 @@ function normalizePalette(
 	config.palettePreset = "custom";
 }
 
+function normalizeModelTruncation(
+	presentation: Record<string, unknown>,
+	config: StatuslineConfig,
+	diagnostics: StatuslineConfigDiagnostic[],
+) {
+	const path = "segmentText.model";
+	const length = presentation.truncationLength;
+	if (length !== undefined) {
+		if (typeof length !== "number" || !Number.isInteger(length) || length < 0 || length > 1000) {
+			diagnostics.push(
+				invalidDiagnostic(`${path}.truncationLength`, "Expected an integer from 0 through 1000"),
+			);
+		} else config.segmentText.model.truncationLength = length;
+	}
+
+	const symbol = presentation.truncationSymbol;
+	if (symbol !== undefined && isSafeSegmentText(symbol, `${path}.truncationSymbol`, diagnostics)) {
+		config.segmentText.model.truncationSymbol = symbol;
+	}
+
+	const direction = presentation.truncationDirection;
+	if (direction !== undefined) {
+		if (
+			typeof direction !== "string" ||
+			!TRUNCATION_DIRECTIONS.includes(direction as (typeof TRUNCATION_DIRECTIONS)[number])
+		) {
+			diagnostics.push(
+				invalidDiagnostic(
+					`${path}.truncationDirection`,
+					`Expected one of: ${TRUNCATION_DIRECTIONS.join(", ")}`,
+				),
+			);
+		} else {
+			config.segmentText.model.truncationDirection =
+				direction as (typeof TRUNCATION_DIRECTIONS)[number];
+		}
+	}
+}
+
+function isSafeSegmentText(
+	value: unknown,
+	path: string,
+	diagnostics: StatuslineConfigDiagnostic[],
+): value is string {
+	if (typeof value !== "string") {
+		diagnostics.push(invalidDiagnostic(path, "Expected a string"));
+		return false;
+	}
+	if (/[\r\n\u2028\u2029]/u.test(value)) {
+		diagnostics.push(invalidDiagnostic(path, "Line breaks are not allowed; use line_break"));
+		return false;
+	}
+	if (hasControlCharacter(value)) {
+		diagnostics.push(invalidDiagnostic(path, "Control characters are not allowed"));
+		return false;
+	}
+	return true;
+}
+
 function normalizeEnum<
 	K extends "palettePreset" | "density" | "separator",
 	T extends StatuslineConfig[K],

package/src/statusline.ts

@@ -40,6 +40,7 @@ export default function statusline(pi: ExtensionAPI) {
 	};
 
 	let sessionGeneration = 0;
+	let menuController = new AbortController();
 	let gitStatusRequestId = 0;
 	let activeGitStatusTarget: { cwd: string; generation: number } | undefined;
 	let gitStatusRefreshInFlight = false;
@@ -114,6 +115,8 @@ export default function statusline(pi: ExtensionAPI) {
 
 	const installFooter = (ctx: ExtensionContext) => {
 		const generation = ++sessionGeneration;
+		menuController.abort(new DOMException("Statusline session context replaced", "AbortError"));
+		menuController = new AbortController();
 		const cwd = ctx.cwd;
 		activeSessionManager = ctx.sessionManager;
 		previewPalettePreset = undefined;
@@ -180,6 +183,13 @@ export default function statusline(pi: ExtensionAPI) {
 	registerStatuslineCommand(pi, {
 		settingsPath: configPath,
 		getLoaded: () => loaded ?? loadStatuslineSettings(configPath),
+		getMenuOwner: () => {
+			const generation = sessionGeneration;
+			return {
+				signal: menuController.signal,
+				isCurrent: () => generation === sessionGeneration && !menuController.signal.aborted,
+			};
+		},
 		apply(next, ctx) {
 			if (ctx.sessionManager !== activeSessionManager) return;
 			previewPalettePreset = undefined;
@@ -215,6 +225,7 @@ export default function statusline(pi: ExtensionAPI) {
 	pi.on("session_shutdown", (_event, ctx) => {
 		if (!ownsRuntime(ctx)) return;
 		sessionGeneration += 1;
+		menuController.abort(new DOMException("Statusline session shut down", "AbortError"));
 		activeSessionManager = undefined;
 		previewPalettePreset = undefined;
 		activeGitStatusTarget = undefined;

package/src/types.ts

@@ -40,6 +40,9 @@ export type Density = (typeof DENSITIES)[number];
 export const SEPARATOR_NAMES = ["none", "dot", "bar", "powerline", "round"] as const;
 export type SeparatorName = (typeof SEPARATOR_NAMES)[number];
 
+export const TRUNCATION_DIRECTIONS = ["start", "middle", "end"] as const;
+export type TruncationDirection = (typeof TRUNCATION_DIRECTIONS)[number];
+
 export type PowerlineBlockName = "header" | "directory" | "git" | "runtime" | "meter";
 
 export interface SegmentTextConfig {
@@ -47,6 +50,12 @@ export interface SegmentTextConfig {
 	suffix: string;
 }
 
+export interface ModelSegmentTextConfig extends SegmentTextConfig {
+	truncationLength: number;
+	truncationSymbol: string;
+	truncationDirection: TruncationDirection;
+}
+
 export interface SegmentPaletteColor {
 	fg?: string;
 	bg?: string;
@@ -60,7 +69,7 @@ export interface StatuslineConfig {
 	density: Density;
 	separator: SeparatorName;
 	segments: ConfigSegmentName[];
-	segmentText: Record<SegmentName, SegmentTextConfig>;
+	segmentText: Record<SegmentName, SegmentTextConfig> & { model: ModelSegmentTextConfig };
 	extensionStatusIcons: Record<string, string>;
 }