@huseynsnmz/pi-suite 0.0.0-stage → 0.2.0

package/packages/frame/src/kit/screen/client.ts

@@ -0,0 +1,74 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+
+import {
+	APPLY,
+	type ApplyRequest,
+	DONE,
+	LIST,
+	type ListRequest,
+	type RowView,
+	RUN,
+	type RunDone,
+	type RunRequest,
+	type TabView,
+} from "../contracts/screen.ts";
+import type { Json } from "../control.ts";
+import { isObject } from "../decode.ts";
+
+type Events = ExtensionAPI["events"];
+
+/** Same-titled tabs from different packages merge. */
+export function listTabs(events: Events): TabView[] {
+	const request: ListRequest = { tabs: [] };
+	events.emit(LIST, request);
+
+	const merged: TabView[] = [];
+	for (const tab of request.tabs) {
+		if (tab.rows.length === 0) continue;
+		const same = merged.find((entry) => entry.title === tab.title);
+		if (same === undefined) {
+			merged.push({ title: tab.title, sections: [...tab.sections], rows: [...tab.rows] });
+			continue;
+		}
+		for (const section of tab.sections)
+			if (!same.sections.includes(section)) same.sections.push(section);
+		same.rows.push(...tab.rows);
+	}
+	return merged;
+}
+
+export function applyRow(
+	events: Events,
+	row: RowView,
+	op: ApplyRequest["op"],
+	value?: Json,
+): string | undefined {
+	const request: ApplyRequest = { feature: row.feature, id: row.id, op };
+	if (value !== undefined) request.value = value;
+	events.emit(APPLY, request);
+	if (request.answer === undefined) return `${row.feature} is not running`;
+	return request.answer.error;
+}
+
+export function runRow(events: Events, row: RowView): Promise<Omit<RunDone, "request">> {
+	const id = crypto.randomUUID();
+	return new Promise((resolve) => {
+		const stop = events.on(DONE, (data) => {
+			if (!isObject(data) || data.request !== id) return;
+			stop();
+			resolve({
+				...(typeof data.text === "string" ? { text: data.text } : {}),
+				...(typeof data.error === "string" ? { error: data.error } : {}),
+			});
+		});
+
+		const request: RunRequest = { feature: row.feature, id: row.id, request: id };
+		events.emit(RUN, request);
+		const refused =
+			request.answer === undefined ? `${row.feature} is not running` : request.answer.error;
+		if (refused !== undefined) {
+			stop();
+			resolve({ error: refused });
+		}
+	});
+}

package/packages/frame/src/kit/screen/feature.ts

@@ -0,0 +1,64 @@
+// Every app brings this feature; the claim keeps the first copy.
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { Key } from "@earendil-works/pi-tui";
+
+import type { Feature, FeatureScope } from "../app/feature.ts";
+import { formatValue } from "../control.ts";
+import { hideImagesUnderOverlays } from "../overlay-images.ts";
+import { applyRow, listTabs } from "./client.ts";
+import { ScreenModel } from "./model.ts";
+import { type ScreenResult, ScreenView } from "./view.ts";
+
+export const settingsScreen: Feature = {
+	id: "settings-screen",
+	description: "One screen for every setting of the harness",
+	setup(scope) {
+		scope.registerCommand("harness", {
+			description: "Settings for every harness piece (also Alt+S)",
+			getArgumentCompletions: (prefix) => {
+				const typed = prefix.trim().toLowerCase();
+				const tabs = listTabs(scope.events).map((tab) => tab.title.toLowerCase());
+				const matches = tabs.filter((tab) => tab.startsWith(typed));
+				return matches.length === 0 ? null : matches.map((tab) => ({ value: tab, label: tab }));
+			},
+			handler: (args, ctx) => openScreen(scope, ctx, args),
+		});
+		scope.registerShortcut(Key.alt("s"), {
+			description: "Settings for every harness piece",
+			handler: (ctx) => openScreen(scope, ctx, ""),
+		});
+	},
+};
+
+async function openScreen(scope: FeatureScope, ctx: ExtensionContext, tab: string): Promise<void> {
+	if (ctx.mode !== "tui") {
+		ctx.ui.notify("the settings screen needs the interactive terminal", "warning");
+		return;
+	}
+	const model = new ScreenModel(listTabs(scope.events));
+	if (tab.trim() !== "") model.openTab(tab);
+
+	// Pi's own editor takes over for long text, so the screen closes and reopens where it was.
+	for (;;) {
+		// oxlint-disable-next-line no-await-in-loop -- one screen at a time
+		const result = await ctx.ui.custom<ScreenResult>(
+			(tui, theme, _keybindings, done) => {
+				hideImagesUnderOverlays(tui);
+				return new ScreenView({ tui, theme, events: scope.events, model, done });
+			},
+			{ overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", anchor: "top-left" } },
+		);
+		if (result?.kind !== "edit") return;
+
+		const row = result.row;
+		const current = typeof row.value === "string" ? row.value : "";
+		// oxlint-disable-next-line no-await-in-loop -- the screen waits for the editor
+		const text = await ctx.ui.editor(row.label, current);
+		if (text !== undefined && text !== current) {
+			const error = applyRow(scope.events, row, "set", text);
+			const shown = row.control === undefined ? "" : formatValue(row.control, text);
+			ctx.ui.notify(error ?? `${row.label}: ${shown}`, error === undefined ? "info" : "error");
+		}
+		model.refresh(listTabs(scope.events));
+	}
+}

package/packages/frame/src/kit/screen/model.ts

@@ -0,0 +1,182 @@
+import { fuzzyFilter } from "@earendil-works/pi-tui";
+
+import type { RowView, TabView } from "../contracts/screen.ts";
+import { GLYPH } from "../ui/glyphs.ts";
+
+export type Line = { kind: "heading"; title: string } | { kind: "row"; row: RowView; tab: string };
+
+export interface SectionMark {
+	title: string;
+	active: boolean;
+}
+
+export class ScreenModel {
+	tabs: TabView[];
+	tab = 0;
+	query = "";
+	#cursor: string | undefined;
+	/** Built once per tab, query and list; the four mutators drop it. */
+	#lines: Line[] | undefined;
+
+	constructor(tabs: TabView[]) {
+		this.tabs = tabs;
+		this.#cursor = this.#firstKey();
+	}
+
+	get searching(): boolean {
+		return this.query !== "";
+	}
+
+	refresh(tabs: TabView[]): void {
+		const title = this.tabs[this.tab]?.title;
+		this.tabs = tabs;
+		this.#lines = undefined;
+		const index = tabs.findIndex((entry) => entry.title === title);
+		this.tab = index === -1 ? 0 : index;
+		if (this.#index() === -1) this.#cursor = this.#firstKey();
+	}
+
+	lines(): Line[] {
+		this.#lines ??= this.searching ? this.#results() : this.#tabLines();
+		return this.#lines;
+	}
+
+	selected(): Extract<Line, { kind: "row" }> | undefined {
+		const line = this.lines()[this.#index()];
+		return line?.kind === "row" ? line : undefined;
+	}
+
+	cursorLine(): number {
+		return this.#index();
+	}
+
+	move(delta: number): void {
+		const rows = this.#rowIndexes();
+		if (rows.length === 0) return;
+		const at = rows.indexOf(this.#index());
+		const next = Math.min(rows.length - 1, Math.max(0, (at === -1 ? 0 : at) + delta));
+		this.#select(rows[next]);
+	}
+
+	moveToEdge(edge: "first" | "last"): void {
+		const rows = this.#rowIndexes();
+		this.#select(edge === "first" ? rows[0] : rows.at(-1));
+	}
+
+	jumpSection(direction: 1 | -1): void {
+		const lines = this.lines();
+		const starts: number[] = [];
+		lines.forEach((line, index) => {
+			if (line.kind === "heading" && lines[index + 1]?.kind === "row") starts.push(index + 1);
+		});
+		if (starts.length === 0) return;
+
+		const at = this.#index();
+		const current = starts.findLastIndex((start) => start <= at);
+		const next = (current + direction + starts.length) % starts.length;
+		this.#select(starts[next]);
+	}
+
+	switchTab(delta: number): void {
+		if (this.searching || this.tabs.length === 0) return;
+		this.tab = (this.tab + delta + this.tabs.length) % this.tabs.length;
+		this.#lines = undefined;
+		this.#cursor = this.#firstKey();
+	}
+
+	openTab(title: string): boolean {
+		const wanted = title.trim().toLowerCase();
+		const index = this.tabs.findIndex((entry) => entry.title.toLowerCase().startsWith(wanted));
+		if (index === -1) return false;
+		this.tab = index;
+		this.#lines = undefined;
+		this.#cursor = this.#firstKey();
+		return true;
+	}
+
+	setQuery(query: string): void {
+		this.query = query;
+		this.#lines = undefined;
+		this.#cursor = this.#firstKey();
+	}
+
+	sections(): SectionMark[] {
+		const lines = this.lines();
+		const at = this.#index();
+		let active = "";
+		lines.forEach((line, index) => {
+			if (line.kind === "heading" && index <= at) active = line.title;
+		});
+		return lines
+			.filter((line): line is Extract<Line, { kind: "heading" }> => line.kind === "heading")
+			.map((line) => ({ title: line.title, active: line.title === active }));
+	}
+
+	#tabLines(): Line[] {
+		const tab = this.tabs[this.tab];
+		if (tab === undefined) return [];
+		const lines: Line[] = [];
+		for (const section of tab.sections) {
+			const rows = tab.rows.filter((row) => row.section === section);
+			if (rows.length === 0) continue;
+			lines.push({ kind: "heading", title: section });
+			for (const row of rows) lines.push({ kind: "row", row, tab: tab.title });
+		}
+		return lines;
+	}
+
+	#results(): Line[] {
+		const all = this.tabs.flatMap((tab) => tab.rows.map((row) => ({ row, tab: tab.title })));
+		// The query picks the rows; the order stays the tab's.
+		const matched = new Set(
+			fuzzyFilter(all, this.query, ({ row, tab }) =>
+				[row.label, row.section, tab, row.id].join(" "),
+			),
+		);
+		const found = all.filter((hit) => matched.has(hit));
+
+		const groups = new Map<string, typeof found>();
+		for (const hit of found) {
+			const title = `${hit.tab} ${GLYPH.chevron} ${hit.row.section}`;
+			const group = groups.get(title) ?? [];
+			group.push(hit);
+			groups.set(title, group);
+		}
+		const lines: Line[] = [];
+		for (const [title, hits] of groups) {
+			lines.push({ kind: "heading", title });
+			for (const hit of hits) lines.push({ kind: "row", ...hit });
+		}
+		return lines;
+	}
+
+	#rowIndexes(): number[] {
+		const indexes: number[] = [];
+		this.lines().forEach((line, index) => {
+			if (line.kind === "row") indexes.push(index);
+		});
+		return indexes;
+	}
+
+	#index(): number {
+		if (this.#cursor === undefined) return -1;
+		return this.lines().findIndex(
+			(line) => line.kind === "row" && keyOf(line.row) === this.#cursor,
+		);
+	}
+
+	#select(index: number | undefined): void {
+		if (index === undefined) return;
+		const line = this.lines()[index];
+		if (line?.kind === "row") this.#cursor = keyOf(line.row);
+	}
+
+	#firstKey(): string | undefined {
+		const line = this.lines().find((entry) => entry.kind === "row");
+		return line?.kind === "row" ? keyOf(line.row) : undefined;
+	}
+}
+
+export function keyOf(row: RowView): string {
+	return `${row.feature}\u0000${row.id}`;
+}