@iowarp/clio-coder 0.3.0 → 0.3.1

package/src/interactive/overlays/prompts.ts

@@ -0,0 +1,72 @@
+import type { OverlayHandle, TUI } from "../../engine/tui.js";
+import type { SlashCommandContext } from "../slash-commands.js";
+import { clioTheme, GLYPH } from "../theme/index.js";
+import { type ListOverlayItem, openListOverlay } from "./list-overlay.js";
+
+/** @internal exported for contract tests */
+export const PROMPTS_EMPTY =
+	"no prompt templates found. add a markdown file to .clio-coder/prompts/ in this project or prompts/ in your clio-coder config dir, and it becomes a slash command named after the file.";
+
+export function openPromptsOverlay(tui: TUI, ctx: SlashCommandContext, onClose: () => void): OverlayHandle {
+	const promptsList = ctx.listPrompts();
+	const items: ListOverlayItem[] = promptsList.items.map((template) => {
+		const usage = `/${template.name}${template.argumentHint ? ` ${template.argumentHint}` : ""}`;
+		const label = `${usage.padEnd(28)}${template.description}`;
+		const item: ListOverlayItem = {
+			id: template.name,
+			label,
+			group: "Prompt Templates",
+			detail: () => {
+				const lines = [`# Prompt Template: /${template.name}`, `**Description:** ${template.description}`];
+				if (template.argumentHint) {
+					lines.push(`**Argument Hint:** \`${template.argumentHint}\``);
+				}
+				lines.push(`**Source:** ${template.sourceInfo.source ?? template.sourceInfo.scope}`);
+				if (!template.trusted) {
+					lines.push("**Untrusted:** set `skills.trustProjectCompatRoots` before this template will expand.");
+				}
+				return lines;
+			},
+		};
+		const marker = template.trusted ? undefined : clioTheme().fg("warning", "untrusted");
+		if (marker) item.meta = template.argumentHint ? `${template.argumentHint} · ${marker}` : marker;
+		else if (template.argumentHint) item.meta = template.argumentHint;
+		return item;
+	});
+
+	const diagnosticItems: ListOverlayItem[] = promptsList.diagnostics.map((diag, idx) => {
+		const theme = clioTheme();
+		const marker = diag.type === "error" ? theme.fg("error", GLYPH.error) : theme.fg("warning", GLYPH.warnInline);
+		const item: ListOverlayItem = {
+			id: `diag-${idx}`,
+			label: `${marker} ${diag.message}`,
+			group: "Diagnostics",
+			detail: () => [
+				`# Diagnostic`,
+				`**Severity:** ${diag.type}`,
+				`**Message:** ${diag.message}`,
+				`**File:** ${diag.path ?? "unknown"}`,
+			],
+		};
+		if (diag.path) {
+			item.meta = diag.path;
+		}
+		return item;
+	});
+
+	const allItems = [...items, ...diagnosticItems];
+
+	return openListOverlay(tui, {
+		title: "Prompt Templates",
+		items: allItems,
+		filterable: true,
+		emptyMessage: PROMPTS_EMPTY,
+		onSelect: (item) => {
+			if (item.group !== "Diagnostics") {
+				ctx.setEditorText?.(`/${item.id} `);
+			}
+			onClose();
+		},
+		onClose,
+	});
+}

package/src/interactive/overlays/session-selector-search.ts

@@ -0,0 +1,31 @@
+import type { SessionMeta } from "../../domains/session/contract.js";
+import { fuzzyFilter } from "../../engine/tui.js";
+
+/**
+ * Compose the searchable text for a session. Includes every field a user
+ * might recall: the id (for the rare "I remember the prefix" recall),
+ * timestamps, cwd, target/model pair, and any display name or turn labels
+ * discovered from sessionInfo entries.
+ */
+function getSessionSearchText(meta: SessionMeta): string {
+	const target = meta.target ?? "";
+	const model = meta.model ?? "";
+	const cwd = meta.cwd ?? "";
+	const created = meta.createdAt ?? "";
+	const ended = meta.endedAt ?? "";
+	const lastActivity = meta.lastActivityAt ?? "";
+	const name = meta.name ?? "";
+	const labels = meta.labels?.join(" ") ?? "";
+	const preview = meta.firstMessagePreview ?? "";
+	return `${meta.id} ${created} ${ended} ${lastActivity} ${target}/${model} ${cwd} ${name} ${labels} ${preview}`;
+}
+
+/**
+ * Filter sessions by a fuzzy query, preserving the input order when the
+ * query is empty. Tokenized: each whitespace-separated token must match.
+ * Backed by pi-tui's fuzzy matcher so behavior tracks the rest of the TUI.
+ */
+export function filterSessions(sessions: ReadonlyArray<SessionMeta>, query: string): SessionMeta[] {
+	if (!query.trim()) return [...sessions];
+	return fuzzyFilter([...sessions], query, getSessionSearchText);
+}

package/src/interactive/overlays/session-selector.ts

@@ -0,0 +1,266 @@
+import { basename } from "node:path";
+import type { SessionContract, SessionMeta } from "../../domains/session/contract.js";
+import {
+	Input,
+	matchesKey,
+	type OverlayHandle,
+	type SelectItem,
+	SelectList,
+	type SelectListLayoutOptions,
+	Text,
+	type TUI,
+} from "../../engine/tui.js";
+import { relative } from "../format-time.js";
+import { buildHint, DEFAULT_SELECT_THEME, FILTER_HINT, FocusBox, showClioOverlayFrame } from "../overlay-frame.js";
+import { GLYPH } from "../theme/index.js";
+import { filterSessions } from "./session-selector-search.js";
+
+export const SESSION_OVERLAY_WIDTH = 110;
+const VISIBLE_ROWS = 12;
+export const SESSION_ESCAPE_GRACE_MS = 75;
+const ESC = String.fromCharCode(27);
+
+/**
+ * SelectList allocates the primary column to the label and uses any
+ * remaining width for the description. The picker treats the meta strip
+ * (status glyph, time, count, target) as the primary column and the
+ * conversation preview as the description, so users scan the right column
+ * for the topic they remember.
+ */
+const SESSION_LAYOUT: SelectListLayoutOptions = {
+	minPrimaryColumnWidth: 52,
+	maxPrimaryColumnWidth: 60,
+};
+
+/**
+ * Format an ISO-8601 instant as a human-relative string ("3 minutes ago",
+ * "yesterday", "2026-04-12"). Mirrors common coding-tool resume pickers so
+ * users do not have to read raw timestamps. The absent case is the picker's
+ * own: a session row can carry no activity instant at all.
+ */
+export function formatRelativeTime(iso: string | null | undefined, now: number = Date.now()): string {
+	return iso ? relative(iso, now) : "—";
+}
+
+function shortTarget(meta: SessionMeta): string {
+	const target = meta.target?.trim();
+	const model = meta.model?.trim();
+	if (!target && !model) return "no target";
+	if (target && model) return `${target}/${model}`;
+	return target ?? model ?? "no target";
+}
+
+function previewLine(meta: SessionMeta): string {
+	const explicit = meta.firstMessagePreview?.trim();
+	if (explicit) return explicit;
+	const name = meta.name?.trim();
+	if (name) return `(${name})`;
+	const cwdLeaf = meta.cwd ? basename(meta.cwd) : "";
+	return cwdLeaf ? `(no preview · ${cwdLeaf})` : "(no preview)";
+}
+
+function metaStrip(meta: SessionMeta, now: number): string {
+	// An ended session shows the ok glyph; an open one shows the running dot.
+	const status = meta.endedAt ? GLYPH.ok : GLYPH.running;
+	const when = formatRelativeTime(meta.lastActivityAt ?? meta.endedAt ?? meta.createdAt, now);
+	const count = typeof meta.messageCount === "number" ? meta.messageCount : 0;
+	const countLabel = count === 1 ? "1 msg" : `${count} msgs`;
+	return `${status} ${when} · ${countLabel} · ${shortTarget(meta)}`;
+}
+
+/**
+ * Pure builder used by the /resume overlay. Each row carries a meta strip
+ * (status, last-activity, msg count, target/model) in the primary column
+ * and the first user-message preview in the description column.
+ */
+export function buildSessionItems(sessions: ReadonlyArray<SessionMeta>, now: number = Date.now()): SelectItem[] {
+	return sessions.map((meta) => {
+		const labels = meta.labels && meta.labels.length > 0 ? `  labels: ${meta.labels.join(", ")}` : "";
+		return {
+			value: meta.id,
+			label: metaStrip(meta, now),
+			description: `${previewLine(meta)}${labels}`,
+		};
+	});
+}
+
+export interface OpenSessionOverlayDeps {
+	session: SessionContract;
+	onResume: (sessionId: string) => void;
+	onClose: () => void;
+}
+
+/**
+ * SelectList navigation keys (arrows + Enter) route to the list; everything
+ * else feeds the search Input which live-filters the candidate set. pi-tui key
+ * matching avoids treating fragmented arrow escape sequences as overlay close.
+ */
+function isLikelyCompleteEscapeSequence(data: string): boolean {
+	if (!data.startsWith(ESC)) return false;
+	const rest = data.slice(1);
+	if (/^\[[0-9;:?]*[A-Za-z~]$/.test(rest)) return true;
+	return /^O.$/.test(rest);
+}
+
+function isPotentialEscapeSequence(data: string): boolean {
+	if (isBareEscape(data)) return true;
+	if (!data.startsWith(ESC)) return false;
+	if (`${ESC}[`.startsWith(data) || `${ESC}O`.startsWith(data)) return true;
+	if (data.startsWith(`${ESC}[`)) return !isLikelyCompleteEscapeSequence(data);
+	if (data.startsWith(`${ESC}O`)) return data.length < 3;
+	return false;
+}
+
+function isBareEscape(data: string): boolean {
+	return data.length === 1 && matchesKey(data, "esc");
+}
+
+/** @internal */
+export function createSessionOverlayBox(
+	sessions: ReadonlyArray<SessionMeta>,
+	onSelect: (sessionId: string) => void,
+	onClose: () => void,
+	options: { escapeGraceMs?: number } = {},
+): FocusBox & { dispose(): void } {
+	const input = new Input();
+	const noMatchView = new Text("");
+	const allSessions = [...sessions];
+	let filtered = [...sessions];
+	let lastQuery = "";
+	let list = buildList(filtered);
+	let pendingEscape = "";
+	let pendingEscapeTimer: ReturnType<typeof setTimeout> | null = null;
+	const box = new FocusBox([], { onInput: handleInput }) as FocusBox & { dispose(): void };
+	box.dispose = (): void => {
+		clearPendingEscape();
+	};
+	input.setValue("");
+	input.onSubmit = () => commitSelection();
+	rebuildChildren();
+	return box;
+
+	function buildList(sessions: ReadonlyArray<SessionMeta>): SelectList {
+		const items = buildSessionItems(sessions);
+		const visible = Math.min(VISIBLE_ROWS, Math.max(1, items.length || 1));
+		const list = new SelectList(items, visible, DEFAULT_SELECT_THEME, SESSION_LAYOUT);
+		list.onSelect = (item: SelectItem): void => {
+			onSelect(item.value);
+			closeOverlay();
+		};
+		list.onCancel = (): void => {
+			closeOverlay();
+		};
+		return list;
+	}
+
+	function rebuildChildren(): void {
+		box.clear();
+		box.addChild(input);
+		if (filtered.length === 0) {
+			noMatchView.setText("(no matching sessions)");
+			box.addChild(noMatchView);
+		} else {
+			box.addChild(list);
+		}
+		box.invalidate();
+	}
+
+	function applyFilter(): void {
+		filtered = filterSessions(allSessions, lastQuery);
+		list = buildList(filtered);
+		rebuildChildren();
+	}
+
+	function commitSelection(): void {
+		const first = filtered[0];
+		if (!first) return;
+		onSelect(first.id);
+		closeOverlay();
+	}
+
+	function closeOverlay(): void {
+		clearPendingEscape();
+		onClose();
+	}
+
+	function clearPendingEscape(): void {
+		if (pendingEscapeTimer) clearTimeout(pendingEscapeTimer);
+		pendingEscapeTimer = null;
+		pendingEscape = "";
+	}
+
+	function armPendingEscape(data: string): void {
+		if (pendingEscapeTimer) clearTimeout(pendingEscapeTimer);
+		pendingEscape = data;
+		pendingEscapeTimer = setTimeout(() => {
+			pendingEscapeTimer = null;
+			pendingEscape = "";
+			onClose();
+		}, options.escapeGraceMs ?? SESSION_ESCAPE_GRACE_MS);
+	}
+
+	function dispatchResolvedInput(data: string): void {
+		if (matchesKey(data, "up") || matchesKey(data, "down")) {
+			list.handleInput(data);
+			return;
+		}
+		if (matchesKey(data, "enter") || data === "\n") {
+			list.handleInput(data);
+			return;
+		}
+		input.handleInput(data);
+		const next = input.getValue();
+		if (next !== lastQuery) {
+			lastQuery = next;
+			applyFilter();
+		}
+	}
+
+	function handleInput(data: string): void {
+		if (pendingEscape) {
+			const combined = `${pendingEscape}${data}`;
+			if (isLikelyCompleteEscapeSequence(combined)) {
+				clearPendingEscape();
+				dispatchResolvedInput(combined);
+				return;
+			}
+			if (isPotentialEscapeSequence(combined)) {
+				armPendingEscape(combined);
+				return;
+			}
+			closeOverlay();
+			return;
+		}
+		if (isBareEscape(data)) {
+			armPendingEscape(data);
+			return;
+		}
+		if (matchesKey(data, "esc")) {
+			closeOverlay();
+			return;
+		}
+		dispatchResolvedInput(data);
+	}
+}
+
+export function openSessionOverlay(tui: TUI, deps: OpenSessionOverlayDeps): OverlayHandle {
+	const sessions = deps.session.history();
+	const box = createSessionOverlayBox(
+		sessions,
+		(sessionId) => deps.onResume(sessionId),
+		() => deps.onClose(),
+	);
+	const handle = showClioOverlayFrame(tui, box, {
+		anchor: "center",
+		width: SESSION_OVERLAY_WIDTH,
+		title: "Sessions",
+		footerHint: buildHint([FILTER_HINT, { key: "Enter", verb: "resume" }]),
+	});
+	return {
+		...handle,
+		hide(): void {
+			box.dispose();
+			handle.hide();
+		},
+	};
+}