@eiei114/pi-sub-bar 1.5.1

package/src/ui/settings-list.ts

@@ -0,0 +1,304 @@
+import type { Component, SettingItem, SettingsListTheme } from "@mariozechner/pi-tui";
+import {
+	Input,
+	fuzzyFilter,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@mariozechner/pi-tui";
+import { getSettingsKeybindings } from "./keybindings.js";
+
+export interface SettingsListOptions {
+	enableSearch?: boolean;
+}
+
+export const CUSTOM_OPTION = "__custom__";
+export const CUSTOM_LABEL = "custom";
+
+export type { SettingItem, SettingsListTheme };
+
+export class SettingsList implements Component {
+	private items: SettingItem[];
+	private filteredItems: SettingItem[];
+	private theme: SettingsListTheme;
+	private selectedIndex = 0;
+	private maxVisible: number;
+	private onChange: (id: string, newValue: string) => void;
+	private onCancel: () => void;
+	private searchInput?: Input;
+	private searchEnabled: boolean;
+	private submenuComponent: Component | null = null;
+	private submenuItemIndex: number | null = null;
+
+	constructor(
+		items: SettingItem[],
+		maxVisible: number,
+		theme: SettingsListTheme,
+		onChange: (id: string, newValue: string) => void,
+		onCancel: () => void,
+		options: SettingsListOptions = {},
+	) {
+		this.items = items;
+		this.filteredItems = items;
+		this.maxVisible = maxVisible;
+		this.theme = theme;
+		this.onChange = onChange;
+		this.onCancel = onCancel;
+		this.searchEnabled = options.enableSearch ?? false;
+
+		if (this.searchEnabled) {
+			this.searchInput = new Input();
+		}
+	}
+
+	/** Update an item's currentValue */
+	updateValue(id: string, newValue: string): void {
+		const item = this.items.find((i) => i.id === id);
+		if (item) {
+			item.currentValue = newValue;
+		}
+	}
+
+	getSelectedId(): string | null {
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		const item = displayItems[this.selectedIndex];
+		return item?.id ?? null;
+	}
+
+	setSelectedId(id: string): void {
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		const index = displayItems.findIndex((item) => item.id === id);
+		if (index >= 0) {
+			this.selectedIndex = index;
+		}
+	}
+
+	invalidate(): void {
+		this.submenuComponent?.invalidate?.();
+	}
+
+	render(width: number): string[] {
+		// If submenu is active, render it instead
+		if (this.submenuComponent) {
+			return this.submenuComponent.render(width);
+		}
+		return this.renderMainList(width);
+	}
+
+	private renderMainList(width: number): string[] {
+		const lines: string[] = [];
+		if (this.searchEnabled && this.searchInput) {
+			lines.push(...this.searchInput.render(width));
+			lines.push("");
+		}
+
+		if (this.items.length === 0) {
+			lines.push(this.theme.hint("  No settings available"));
+			if (this.searchEnabled) {
+				this.addHintLine(lines);
+			}
+			return lines;
+		}
+
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		if (displayItems.length === 0) {
+			lines.push(this.theme.hint("  No matching settings"));
+			this.addHintLine(lines);
+			return lines;
+		}
+
+		// Calculate visible range with scrolling
+		const startIndex = Math.max(
+			0,
+			Math.min(
+				this.selectedIndex - Math.floor(this.maxVisible / 2),
+				displayItems.length - this.maxVisible,
+			),
+		);
+		const endIndex = Math.min(startIndex + this.maxVisible, displayItems.length);
+
+		// Calculate max label width for alignment
+		const maxLabelWidth = Math.min(30, Math.max(...this.items.map((item) => visibleWidth(item.label))));
+
+		// Render visible items
+		for (let i = startIndex; i < endIndex; i++) {
+			const item = displayItems[i];
+			if (!item) continue;
+			const isSelected = i === this.selectedIndex;
+			const prefix = isSelected ? this.theme.cursor : "  ";
+			const prefixWidth = visibleWidth(prefix);
+
+			// Pad label to align values
+			const labelPadded = item.label + " ".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+			const labelText = this.theme.label(labelPadded, isSelected);
+
+			// Calculate space for value
+			const separator = "  ";
+			const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
+			const valueMaxWidth = Math.max(1, width - usedWidth - 2);
+			const optionLines = isSelected && item.values && item.values.length > 0
+				? wrapTextWithAnsi(this.formatOptionsInline(item, item.values), valueMaxWidth)
+				: null;
+			const valueText = optionLines
+				? optionLines[0] ?? ""
+				: this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, ""), isSelected);
+			const line = prefix + labelText + separator + valueText;
+			lines.push(truncateToWidth(line, width, ""));
+			if (optionLines && optionLines.length > 1) {
+				const indent = " ".repeat(prefixWidth + maxLabelWidth + visibleWidth(separator));
+				for (const continuation of optionLines.slice(1)) {
+					lines.push(truncateToWidth(indent + continuation, width, ""));
+				}
+			}
+		}
+
+		// Add scroll indicator if needed
+		if (startIndex > 0 || endIndex < displayItems.length) {
+			const scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`;
+			lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, "")));
+		}
+
+		// Add description for selected item
+		const selectedItem = displayItems[this.selectedIndex];
+		if (selectedItem?.description) {
+			lines.push("");
+			const wrapWidth = Math.max(1, width - 4);
+			const wrappedDesc = wrapTextWithAnsi(selectedItem.description, wrapWidth);
+			for (const line of wrappedDesc) {
+				const prefixed = `  ${line}`;
+				lines.push(this.theme.description(truncateToWidth(prefixed, width, "")));
+			}
+		}
+
+
+		// Add hint
+		this.addHintLine(lines);
+		return lines;
+	}
+
+	handleInput(data: string): void {
+		// If submenu is active, delegate all input to it
+		// The submenu's onCancel (triggered by escape) will call done() which closes it
+		if (this.submenuComponent) {
+			this.submenuComponent.handleInput?.(data);
+			return;
+		}
+
+		const kb = getSettingsKeybindings();
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+
+		if (kb.matches(data, "selectUp")) {
+			if (displayItems.length === 0) return;
+			this.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;
+		} else if (kb.matches(data, "selectDown")) {
+			if (displayItems.length === 0) return;
+			this.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;
+		} else if (kb.matches(data, "cursorLeft")) {
+			this.stepValue(-1);
+		} else if (kb.matches(data, "cursorRight")) {
+			this.stepValue(1);
+		} else if (kb.matches(data, "selectConfirm") || data === " ") {
+			this.activateItem();
+		} else if (kb.matches(data, "selectCancel")) {
+			this.onCancel();
+		} else if (this.searchEnabled && this.searchInput) {
+			const sanitized = data.replace(/ /g, "");
+			if (!sanitized) {
+				return;
+			}
+			this.searchInput.handleInput(sanitized);
+			this.applyFilter(this.searchInput.getValue());
+		}
+	}
+
+	private stepValue(direction: -1 | 1): void {
+		const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+		const item = displayItems[this.selectedIndex];
+		if (!item || !item.values || item.values.length === 0) return;
+		const values = item.values;
+		let currentIndex = values.indexOf(item.currentValue);
+		if (currentIndex === -1) {
+			currentIndex = direction > 0 ? 0 : values.length - 1;
+		}
+		const nextIndex = (currentIndex + direction + values.length) % values.length;
+		const newValue = values[nextIndex];
+		if (newValue === CUSTOM_OPTION) {
+			item.currentValue = newValue;
+			this.onChange(item.id, newValue);
+			return;
+		}
+		item.currentValue = newValue;
+		this.onChange(item.id, newValue);
+	}
+
+	private activateItem(): void {
+		const item = this.searchEnabled ? this.filteredItems[this.selectedIndex] : this.items[this.selectedIndex];
+		if (!item) return;
+
+		const hasCustom = Boolean(item.values && item.values.includes(CUSTOM_OPTION));
+		const currentIsCustom = hasCustom && item.values && !item.values.includes(item.currentValue);
+
+		if (item.submenu && hasCustom) {
+			if (currentIsCustom || item.currentValue === CUSTOM_OPTION) {
+				this.openSubmenu(item);
+			}
+			return;
+		}
+
+		if (item.submenu) {
+			this.openSubmenu(item);
+		}
+	}
+
+	private closeSubmenu(): void {
+		this.submenuComponent = null;
+		// Restore selection to the item that opened the submenu
+		if (this.submenuItemIndex !== null) {
+			this.selectedIndex = this.submenuItemIndex;
+			this.submenuItemIndex = null;
+		}
+	}
+
+	private applyFilter(query: string): void {
+		this.filteredItems = fuzzyFilter(this.items, query, (item) => item.label);
+		this.selectedIndex = 0;
+	}
+
+	private formatOptionsInline(item: SettingItem, values: string[]): string {
+		const separator = this.theme.description(" • ");
+		const hasCustom = values.includes(CUSTOM_OPTION);
+		const currentIsCustom = hasCustom && !values.includes(item.currentValue);
+		return values
+			.map((value) => {
+				const label = value === CUSTOM_OPTION
+					? (currentIsCustom ? `${CUSTOM_LABEL} (${item.currentValue})` : CUSTOM_LABEL)
+					: value;
+				const selected = value === item.currentValue || (currentIsCustom && value === CUSTOM_OPTION);
+				return this.theme.value(label, selected);
+			})
+			.join(separator);
+	}
+
+	private openSubmenu(item: SettingItem): void {
+		if (!item.submenu) return;
+		this.submenuItemIndex = this.selectedIndex;
+		this.submenuComponent = item.submenu(item.currentValue, (selectedValue) => {
+			if (selectedValue !== undefined) {
+				item.currentValue = selectedValue;
+				this.onChange(item.id, selectedValue);
+			}
+			this.closeSubmenu();
+		});
+	}
+
+	private addHintLine(lines: string[]): void {
+		lines.push("");
+		lines.push(
+			this.theme.hint(
+				this.searchEnabled
+					? "  Type to search · ←/→ change · Enter/Space edit custom · Esc to cancel"
+					: "  ←/→ change · Enter/Space edit custom · Esc to cancel",
+			),
+		);
+	}
+}

package/src/usage/types.ts

@@ -0,0 +1,5 @@
+/**
+ * Usage data types shared across modules.
+ */
+
+export type { ProviderUsageEntry } from "@eiei114/pi-sub-shared";

package/src/utils.ts

@@ -0,0 +1,42 @@
+/**
+ * Utility functions for the sub-bar display layer.
+ */
+
+import { MODEL_MULTIPLIERS } from "@eiei114/pi-sub-shared";
+
+export function normalizeTokens(value: string): string[] {
+	return value
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, " ")
+		.trim()
+		.split(" ")
+		.filter(Boolean);
+}
+
+const MODEL_MULTIPLIER_TOKENS = Object.entries(MODEL_MULTIPLIERS).map(([label, multiplier]) => ({
+	label,
+	multiplier,
+	tokens: normalizeTokens(label),
+}));
+
+/**
+ * Get the request multiplier for a model ID
+ * Uses fuzzy matching against known model names
+ */
+export function getModelMultiplier(modelId: string | undefined): number | undefined {
+	if (!modelId) return undefined;
+	const modelTokens = normalizeTokens(modelId);
+	if (modelTokens.length === 0) return undefined;
+
+	let bestMatch: { multiplier: number; tokenCount: number } | undefined;
+	for (const entry of MODEL_MULTIPLIER_TOKENS) {
+		const isMatch = entry.tokens.every((token) => modelTokens.includes(token));
+		if (!isMatch) continue;
+		const tokenCount = entry.tokens.length;
+		if (!bestMatch || tokenCount > bestMatch.tokenCount) {
+			bestMatch = { multiplier: entry.multiplier, tokenCount };
+		}
+	}
+
+	return bestMatch?.multiplier;
+}

package/test/all.test.ts

@@ -0,0 +1,6 @@
+import "./formatting.test.js";
+import "./settings.test.js";
+import "./dividers.test.js";
+import "./providers.test.js";
+import "./status.test.js";
+import "./keybindings.test.js";

package/test/dividers.test.ts

@@ -0,0 +1,34 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import { buildDividerLine } from "../src/dividers.js";
+
+const theme = {
+	fg: (_color: string, text: string) => text,
+} as unknown as Theme;
+
+test("divider join aligns after wide emoji", () => {
+	const baseLine = "🙂|"; // emoji width 2, divider at column 2
+	const line = buildDividerLine(4, baseLine, "|", true, "bottom", "text", theme);
+	assert.equal(line[2], "┴");
+});
+
+test("divider join disabled keeps base line intact", () => {
+	const baseLine = "| | |";
+	const line = buildDividerLine(5, baseLine, "|", false, "top", "text", theme);
+	assert.equal(line, "─────");
+	assert.ok(!line.includes("┬"));
+});
+
+test("divider join ignores unsupported characters", () => {
+	const baseLine = "• • •";
+	const line = buildDividerLine(5, baseLine, "•", true, "bottom", "text", theme);
+	assert.equal(line, "─────");
+	assert.ok(!line.includes("┴"));
+});
+
+test("divider join handles ansi codes and wide characters", () => {
+	const baseLine = "\x1b[31m🙂│\x1b[0m";
+	const line = buildDividerLine(4, baseLine, "│", true, "top", "text", theme);
+	assert.equal(line[2], "┬");
+});